/* ============================================================
   polish.css — 视觉精装修层（260910 P0，参考 Tabler/Ant Design）
   在 style.css 之后加载，只做覆盖与增强，不改结构。
   出问题要回退：删掉 HTML 里这一行 link 即可，无副作用。
   ============================================================ */

/* ---------- 全局质感 ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--blue-200); }

/* 细滚动条（全站弹层/表格区） */
.tbl-scroll::-webkit-scrollbar, .fp-list::-webkit-scrollbar, .side nav::-webkit-scrollbar { width: 8px; height: 8px; }
.tbl-scroll::-webkit-scrollbar-thumb, .fp-list::-webkit-scrollbar-thumb, .side nav::-webkit-scrollbar-thumb {
  background: var(--blue-200); border-radius: 4px;
}
.tbl-scroll::-webkit-scrollbar-thumb:hover, .fp-list::-webkit-scrollbar-thumb:hover { background: var(--blue-300); }
.tbl-scroll::-webkit-scrollbar-track, .fp-list::-webkit-scrollbar-track { background: transparent; }

/* ---------- 卡片 ---------- */
.card {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-med);
}
.card:hover { box-shadow: var(--shadow-md); }
.card h3 { font-size: var(--fs-lg); letter-spacing: .01em; }
.card .card-sub { font-size: var(--fs-xs); line-height: 1.7; }

/* ---------- 顶栏 ---------- */
.topbar {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(11, 42, 91, .03);
}
.topbar .page-title { font-size: var(--fs-lg); }

/* ---------- 按钮 ---------- */
.btn {
  border-radius: var(--r-md);
  transition: all var(--t-fast);
}
.btn:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { box-shadow: 0 2px 6px rgba(29, 92, 184, .25); }
.btn.primary:hover { box-shadow: 0 4px 12px rgba(29, 92, 184, .32); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-color: var(--blue-500);
}

/* ---------- 输入框 ---------- */
input, select, textarea { transition: border-color var(--t-fast), box-shadow var(--t-fast); }

/* ---------- 标签页（tabs 胶囊化） ---------- */
.tabs { gap: var(--s-2); }
.tab { border-radius: var(--r-pill); transition: all var(--t-fast); }
.tab:not(.active):hover { background: var(--blue-100); border-color: var(--blue-300); }
.tab.active { box-shadow: 0 2px 8px rgba(29, 92, 184, .28); }

/* ---------- 数据表格 ---------- */
table.data { font-size: var(--fs-sm); }
table.data thead th {
  background: var(--blue-50);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  border-bottom: 2px solid var(--line);
  padding: 9px 10px;
}
table.data th, table.data td { border-bottom: 1px solid var(--line-2); }
table.data tbody tr { transition: background var(--t-fast); }
table.data tbody tr:hover { background: var(--blue-50); }

/* 排序箭头（旧字符版弱化显示，新 TableKit SVG 版见下方 tk- 规则） */
.sort-hint { opacity: .3; }
th.sortable:hover .sort-hint { opacity: .7; }

/* ---------- TableKit 统一表格组件（table-kit.js 配套） ---------- */
.tk-th { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tk-sort { display: inline-flex; align-items: center; color: var(--ink-3); }
.tk-sort svg { width: 12px; height: 12px; }
th.sortable:hover .tk-sort { color: var(--blue-600); }
.tk-sort.on { color: var(--blue-600); }

.tk-filter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: none; background: none; cursor: pointer;
  color: var(--ink-3); border-radius: var(--r-sm); padding: 0; position: relative;
  transition: all var(--t-fast);
}
.tk-filter svg { width: 13px; height: 13px; }
.tk-filter:hover { background: var(--blue-100); color: var(--blue-600); }
.tk-filter.on { color: var(--blue-600); }
.tk-filter.on::after {   /* 有筛选时的蓝点标记 */
  content: ''; position: absolute; top: 1px; right: 0;
  width: 5px; height: 5px; border-radius: 50%; background: var(--blue-500);
}

/* 筛选弹层（AntD ProTable 风格：搜索 + 列表 + 底部操作条） */
.filter-pop {
  min-width: 210px; max-width: 280px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  animation: tkPopIn var(--t-fast);
}
@keyframes tkPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.filter-pop .fp-kw {
  width: 100%; box-sizing: border-box; margin-bottom: 8px;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-xs); outline: none;
}
.filter-pop .fp-kw:focus { border-color: var(--blue-500); box-shadow: var(--focus-ring); }
.filter-pop .fp-list { max-height: 220px; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.filter-pop label {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 6px; border-radius: var(--r-sm);
  cursor: pointer; color: var(--ink); white-space: nowrap; font-size: var(--fs-sm);
}
.filter-pop label:hover { background: var(--blue-50); }
.filter-pop input { accent-color: var(--blue-600); }
.filter-pop .fp-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2);
}
.filter-pop .fp-count { font-size: var(--fs-xs); color: var(--ink-3); }
.filter-pop .fp-ops { display: flex; gap: 12px; }
.filter-pop .fp-ops span { color: var(--blue-600); cursor: pointer; font-size: var(--fs-xs); }
.filter-pop .fp-ops span:hover { color: var(--blue-700); text-decoration: underline; }

/* ---------- 登录 / 注册页 ---------- */
.login-right input {
  border-radius: var(--r-md); padding: 12px 14px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.login-right input:focus { border-color: var(--blue-500); box-shadow: var(--focus-ring); }
.login-btn {
  border-radius: var(--r-md);
  box-shadow: 0 4px 14px rgba(20, 71, 143, .28);
  transition: all var(--t-fast);
}
.login-btn:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(20, 71, 143, .34); }
.login-btn:active { transform: translateY(0); }
.login-foot a:hover { text-decoration: underline; }

.reg-box { box-shadow: var(--shadow-lg); }
.reg-btn { transition: all var(--t-fast); box-shadow: 0 4px 14px rgba(20, 71, 143, .24); }
.reg-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(20, 71, 143, .32); }
.card-up { transition: all var(--t-fast); }

/* ---------- 弹窗 ---------- */
.modal { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); animation: tkPopIn var(--t-fast); }

/* ---------- Toast ---------- */
.toast { border-radius: var(--r-md); box-shadow: var(--shadow-md); }

/* ---------- P1 自助查询栏（Metabase 式，260910） ----------
   三个自助模块（收益自助对比 / 仓位产品自助拆分 / Barra 自助拆分）共用。
   回退方式：删除本段即可，卡片功能不依赖本样式。 */
.qbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: var(--blue-50); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 10px 12px; margin: 6px 0 12px;
}
.qbar .qb-field { position: relative; flex: 1; min-width: 220px; max-width: 480px; }
.qbar .qb-field input {
  width: 100%; box-sizing: border-box; padding: 9px 12px 9px 34px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-sm); background: #fff;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.qbar .qb-field input:focus { outline: none; border-color: var(--blue-500); box-shadow: var(--focus-ring); }
.qbar .qb-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-3); pointer-events: none;
}
.qbar select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-sm); background: #fff; color: var(--ink);
}
.qbar .qb-label { font-size: var(--fs-sm); color: var(--ink-2); }
.qb-sug {
  display: none; position: absolute; left: 0; right: 0; top: 42px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); z-index: 30; max-height: 300px; overflow-y: auto;
}
.qb-sug .sug-item { padding: 8px 12px; font-size: var(--fs-sm); cursor: pointer; border-bottom: 1px solid var(--line-2); }
.qb-sug .sug-item:last-child { border-bottom: none; }
.qb-sug .sug-item:hover { background: var(--blue-50); }
.qb-sug .sug-item .sug-meta { color: var(--ink-3); font-size: var(--fs-xs); }
.qb-picked { font-size: var(--fs-sm); color: var(--blue-700); padding: 2px 0 8px; }
@media (max-width: 767px) {
  .qbar .qb-field { max-width: none; min-width: 100%; }
}

/* ---------- P1+ 侧栏轻量化（260910 用户指令：更窄/字更小/颜色更浅） ----------
   深海军蓝渐变 → 浅蓝白侧栏（blue-50 系），激活项改 blue-600 实底白字；
   覆盖 style.css 原深色系，回退=删除本段。 */
.sidebar {
  width: 148px; min-width: 148px; padding: 10px 8px 14px;
  background: linear-gradient(180deg, #f8fbfe, #eef4fb);
  color: var(--ink-2);
  border-right: 1px solid var(--line-2);
}
.sidebar .logo {
  color: var(--blue-900); font-size: 14px;
  border-bottom: 1px solid var(--line-2);
}
.sidebar .logo small { color: var(--ink-3); opacity: 1; }
.menu { margin-top: 10px; }
.menu-item {
  padding: 8px 12px; margin-bottom: 2px; border-radius: var(--r-md);
  font-size: 12.5px; color: var(--ink-2);
}
.menu-item:hover { background: #e2ecfa; color: var(--blue-800); }
.menu-item.active {
  background: var(--blue-600); color: #fff;
  box-shadow: 0 3px 10px rgba(29, 92, 184, .28);
}
.menu-item.active .m-arrow { opacity: .85; }
.m-l2 { font-size: 12px; padding: 6px 10px 6px 24px; margin-bottom: 2px; }
.m-arrow { opacity: .5; }
.sidebar .side-foot { color: var(--ink-3); opacity: 1; border-top: 1px solid var(--line-2); }
/* 展开组的一级模块名：原深蓝底设计是白字加粗，浅底下看不见 → 改深蓝加粗 */
.mgrp.open > .m-l1 { color: var(--blue-800); font-weight: 600; }
/* 折叠按钮与折叠态迷你导航同步改浅色系 */
.side-fold {
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
}
.side-fold:hover { background: var(--blue-100); color: var(--blue-700); }
.side-fold-wide {
  border: 1px dashed var(--blue-200); background: #fff; color: var(--ink-2);
}
.side-fold-wide:hover { background: var(--blue-100); color: var(--blue-700); }
@media (min-width: 768px) {
  body.side-collapsed .menu-mini .menu-item { color: var(--ink-2); }
  body.side-collapsed .menu-mini .menu-item:hover { background: #e2ecfa; color: var(--blue-800); }
  body.side-collapsed .menu-mini .menu-item.active { background: var(--blue-600); color: #fff; }
}
/* 侧栏滚动条改深灰蓝（原白色alpha在深底上设计，浅底看不见） */
.sidebar .menu { scrollbar-color: rgba(90, 110, 140, .3) transparent; }
.sidebar .menu::-webkit-scrollbar-thumb { background: rgba(90, 110, 140, .28); }
.sidebar .menu::-webkit-scrollbar-thumb:hover { background: rgba(90, 110, 140, .45); }