/* ============================================================
   ui-kit.css · 控件皮肤 / 动效 / 自绘浮层
   ------------------------------------------------------------
   加载顺序：styles.css → ui-kit.css（本文件负责覆盖与增强）
   1. 关闭浏览器默认外观与浮层
   2. 自绘勾选框
   3. 扁平化重绘（按钮 / 卡片 / 表格 / 表单 / 页签 / 弹窗 / 吐司）
   4. 动效关键帧
   5. 自绘控件：下拉 / 日期 / 数字 / 输入记忆 / 气泡提示
   6. 无障碍：减少动效偏好
   ============================================================ */

/* ============ 1. 关闭浏览器默认外观与浮层 ============ */
/* 关掉原生下拉箭头、日期图标、数字微调、搜索清除、密码眼睛 */
input, select, textarea, button{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{ -webkit-appearance:none; display:none; }
input::-ms-clear, input::-ms-reveal{ display:none; width:0; height:0; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type="number"]{ -moz-appearance:textfield; }
/* 关掉 Edge/Chrome 的密码揭示按钮与自动填充浮层黄底 */
::-ms-reveal{ display:none; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
select:-webkit-autofill, textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--surface-2) inset;
  box-shadow:0 0 0 1000px var(--surface-2) inset;
  caret-color:var(--text);
  transition:background-color 9999s ease-out 0s;
}
/* 统一占位符、选中色、光标 */
::placeholder{ color:var(--text-3); opacity:1; }
::selection{ background:var(--primary-soft); color:var(--text); }
textarea{ resize:vertical; }
/* 滚动条：细、无轨道、圆角 */
*{ scrollbar-width:thin; scrollbar-color:var(--border-2) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--border-2); border-radius:8px;
  border:2px solid transparent; background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--text-3); border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-corner{ background:transparent; }
/* 防橡皮筋 / 双指缩放 / 下拉刷新 */
html, body{ overscroll-behavior:none; }
/* 统一焦点环（替换浏览器默认 outline） */
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--ring); outline-offset:1px; border-radius:var(--radius-sm); }
img, svg{ -webkit-user-drag:none; }

/* ============ 2. 自绘勾选框（勾选 / 半选 / 禁用） ============ */
/* v1.28.6：勾选框统一改**圆形**（与主体 UI 的圆角语言一致；原来的 5px 圆角方块
   在 15px 小尺寸下看着像没画完的圆），对勾居中画，任何尺寸都不会偏。 */
input[type="checkbox"], input[type="radio"]{
  appearance:none; -webkit-appearance:none;
  width:17px; height:17px; flex:none; position:relative; cursor:pointer;
  border:1.5px solid var(--border-2); background:var(--surface);
  transition:background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
  vertical-align:middle;
}
input[type="checkbox"], input[type="radio"]{ border-radius:50%; }
input[type="checkbox"]:hover:not(:checked):not(:disabled),
input[type="radio"]:hover:not(:checked):not(:disabled){ border-color:var(--primary); }
input[type="checkbox"]:checked, input[type="checkbox"]:indeterminate{
  background:var(--primary); border-color:var(--primary);
}
/* v1.28.8：对勾改用 data-URI SVG 背景绘制。之前用「旋转 45° 的 border 伪元素」画勾，
   用户环境（GPU 合成路径）下伪元素不渲染 ⇒ 勾选后只有实心圆看不见勾。
   SVG 背景由浏览器光栅化，居中定位，任何尺寸/缩放/GPU 下都稳定。 */
input[type="checkbox"]:not(.switch):checked{
  background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2 4.4 8 10.5 1.8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px 8px no-repeat;
  border-color:var(--primary);
}
input[type="checkbox"]:not(.switch):indeterminate{
  background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 2'%3E%3Crect width='10' height='2' rx='1' fill='white'/%3E%3C/svg%3E") center/9px 2px no-repeat;
  border-color:var(--primary);
}
input[type="radio"]:checked{ border-color:var(--primary); border-width:5.5px; }
input[type="radio"]:checked:hover{ border-color:var(--primary-hover); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled{ opacity:.42; cursor:not-allowed; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }

/* --- 胶囊滑动开关（启用 / 停用这类「开合」语义专用；多选/勾选语义仍用上面的圆形勾选框） ---
   用法：<input type="checkbox" class="switch">。轨道 38×21，圆点 14，
   选中 = 轨道主题色 + 圆点滑到右侧；结构与原生 checkbox 完全一致，读写 .checked 不用改任何 JS。 */
input[type="checkbox"].switch{
  width:38px; height:21px; border-radius:999px; padding:0;
  border:1.5px solid var(--border-2); background:var(--surface-2);
}
input[type="checkbox"].switch::after{
  content:''; position:absolute; left:2px; top:50%; width:14px; height:14px;
  border-radius:50%; background:var(--text-3);
  transform:translateY(-50%); border:none;
  transition:left var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
input[type="checkbox"].switch:hover:not(:checked):not(:disabled){ border-color:var(--primary); }
input[type="checkbox"].switch:checked{ background:var(--primary); border-color:var(--primary); }
input[type="checkbox"].switch:checked::after{
  left:calc(100% - 16px); background:var(--primary-ink); border:none;
  transform:translateY(-50%);
}
input[type="checkbox"].switch:disabled{ opacity:.42; cursor:not-allowed; }

/* ============ 3. 扁平化重绘 ============ */
/* --- 按钮：细边框 / 无阴影 / 克制的悬停 --- */
.btn{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  padding:8px 14px; border-radius:var(--radius-sm); font-weight:500; font-size:13.5px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.btn:hover{ background:var(--surface-2); border-color:var(--border-2); color:var(--text); }
.btn:active{ transform:scale(.985); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-primary{ background:var(--primary); border-color:var(--primary); color:var(--primary-ink); }
.btn-primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover); color:var(--primary-ink); }
.btn-primary:disabled{ background:var(--primary); }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--text-2); }
.btn-ghost:hover{ background:var(--surface-2); border-color:transparent; color:var(--text); }
.btn-danger{ color:var(--danger); border-color:transparent; background:transparent; }
.btn-danger:hover{ background:var(--danger-soft); border-color:transparent; color:var(--danger); }
.btn-sm{ padding:5px 10px; font-size:12.5px; }
.btn-block{ width:100%; }

.icon-btn{
  background:transparent; border:none; color:var(--text-2); font-size:17px;
  width:34px; height:34px; border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover{ background:var(--surface-2); color:var(--text); }
.icon-btn:active{ transform:scale(.94); }

.link{ color:var(--primary); }
.link:hover{ text-decoration:underline; }

/* --- 卡片：极浅阴影 + 细边框，去掉“浮起感” --- */
.card{ box-shadow:none; border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.card-title{ font-size:14.5px; letter-spacing:.1px; }
.kpi{ box-shadow:none; }
/* ⭐ B 方案：主指标卡压平 —— 原来的亮紫渐变实心改为「淡底 + 1px 主色边 + 主色数字」，
   整屏层次统一；语义胶囊 / 主要数字 / 主按钮实心 一律保留。 */
.kpi.accent{ background:var(--primary-soft); border:1px solid var(--primary); }
.kpi.accent .k-label{ color:var(--primary); }
.kpi.accent .k-val{ color:var(--primary); }
.kpi.accent .k-ic{ color:var(--primary); opacity:.55; }

/* --- 顶栏：右侧动作区不被挤压（用户名/账套胶囊不换行） --- */
.top-actions{ flex-shrink:0; }
.user-chip, .set-chip{ flex:0 0 auto; }
.uname{ white-space:nowrap; }
.page-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 头像底色是主色（深色主题下是亮色），文字必须跟着 primary-ink 走 */
.avatar{ color:var(--primary-ink); }

/* ⭐ 网格/弹性子项默认 min-width:auto，会被内部「不可收缩」的内容（长表格、
   长 id）顶宽，进而把整页撑出横向滚动条（仪表盘 KPI 被裁就是这个问题）。
   统一放开收缩权限，让内部的 .tbl-wrap 自己去横向滚动。 */
.grid > *, .row > *{ min-width:0; }

/* --- 表格 --- */
.tbl-wrap{ box-shadow:none; }
.tbl th{ background:var(--surface-2); color:var(--text-2); border-bottom:1px solid var(--border); }
.tbl td{ border-bottom:1px solid var(--border); }
.tbl tbody tr{ transition:background-color var(--dur-fast) var(--ease); }
.tbl tr:hover td{ background:var(--surface-2); }

/* --- 表单控件：统一扁平外观 --- */
.field input, .field select, .field textarea,
.form-row .login-input,
.login-form input, .login-form select,
.search-input, .perm-sel select{
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:9px 11px; color:var(--text); width:100%;
  transition:border-color var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover,
.form-row .login-input:hover, .login-form input:hover,
.search-input:hover{ border-color:var(--border-2); }
.field input:focus, .field select:focus, .field textarea:focus,
.form-row .login-input:focus, .login-form input:focus, .login-form select:focus,
.search-input:focus, .perm-sel select:focus{
  border-color:var(--primary); background:var(--surface);
  box-shadow:0 0 0 3px var(--ring);
}
.field input:disabled, .field select:disabled, .field textarea:disabled,
.search-input:disabled, .perm-sel select:disabled{
  opacity:.6; cursor:not-allowed; background:var(--surface-2);
}
/* 未被增强器接管的 select 兜底画箭头 */
select:not(.ui-native){
  background-image:var(--arrow);
  background-repeat:no-repeat; background-position:right 10px center;
  padding-right:30px; cursor:pointer;
}
select:not(.ui-native):disabled{ cursor:not-allowed; }
input, textarea{ cursor:text; }
textarea{ min-height:70px; }

/* --- 页签：下划线从中间展开 --- */
.tabs{ position:relative; border-bottom:1px solid var(--border); gap:2px; }
.tabs .tab{
  border-bottom:none; border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  padding:10px 15px; font-size:13.5px; position:relative;
  transition:color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.tabs .tab:hover{ color:var(--text); background:var(--surface-2); }
.tabs .tab.active{ color:var(--primary); background:transparent; }
.tabs .tab::after{
  content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px;
  border-radius:2px; background:var(--primary);
  transform:scaleX(.35); opacity:0;
  transition:transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}
.tabs .tab.active::after{ transform:scaleX(1); opacity:1; }

/* --- 侧边导航：左侧强调条 + 平滑悬停 --- */
.nav-item{
  position:relative; border-radius:var(--radius-sm);
  transition:background-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             padding-left var(--dur) var(--ease);
}
.nav-item:hover{ transform:none; }
.nav-item.active{ background:var(--primary-soft); color:var(--primary); font-weight:600; }
.nav-item.active::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:60%; border-radius:0 3px 3px 0; background:var(--primary);
  animation:navMarkIn var(--dur) var(--ease-out) both;
}
@keyframes navMarkIn{ from{ height:0; opacity:0; } to{ height:60%; opacity:1; } }

/* --- 弹窗：现代缓动 --- */
/* ⚠ 遮罩底色/模糊归 styles.css（v1.28.8 方案B：纯变暗无 blur）。
   这里历史上写过 blur(3px) 且 ui-kit 加载在 styles 之后 ⇒ 会把方案B整体覆盖，
   用户看「没生效」。此文件不再声明 .scrim-bg 的 background/backdrop-filter。 */
.scrim-bg{
  animation:scrimIn .18s var(--ease) both;
}
.scrim-bg.closing{ animation:scrimOut .16s var(--ease) both; }
.modal{
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); animation:modalIn .26s var(--ease-out) both;
}
.scrim-bg.closing .modal{ animation:modalOut .16s var(--ease) both; }
.modal-head{ padding:16px 20px; }
.modal-body{ padding:18px 20px; }
.modal-foot{ padding:14px 20px; }

/* --- 提示条：底部居中浮出（v1.59.0 从右上角下沉） ---
   为什么挪：右上角与操作点（开关/保存按钮）隔 600px 以上，而且与顶栏同高、贴边，
   看着像顶栏的一部分，用户不会把它当「刚才发生了什么」。底部居中落在主内容中轴下方，
   离操作区最近，也不压顶栏和右侧公司信息。
   左缘 3px 色条 + 圆形图标用来一眼分辨成败，底部细线是剩余时间。 */
.toast-root{
  position:fixed; top:auto; bottom:22px;
  left:calc(50% + var(--toast-shift, 0px)); right:auto;
  transform:translateX(-50%);
  z-index:380;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;   /* 空白处不挡点击，只有提示本体可点 */
}
.toast{
  pointer-events:auto;
  position:relative; display:flex; align-items:center; gap:9px;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--border-2); border-radius:10px;
  padding:10px 12px; font-size:13.5px; line-height:1.35;
  box-shadow:var(--shadow-lg); overflow:hidden;
  max-width:min(520px, calc(100vw - 28px));
  animation:toastUp .24s var(--ease-out) both;
}
.toast::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--toast-tone, var(--primary));
}
.toast-ico{
  flex:0 0 20px; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--toast-soft, var(--primary-soft)); color:var(--toast-tone, var(--primary));
}
.toast-ico svg{ width:11px; height:11px; }
.toast-text{ min-width:0; }
.toast-count{
  flex:none; font-size:11.5px; font-variant-numeric:tabular-nums;
  color:var(--text-2); background:var(--surface-3); border-radius:99px; padding:0 6px;
}
.toast-x{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; padding:0; margin-left:2px;
  background:none; border:0; border-radius:6px; cursor:pointer;
  color:var(--text-3); opacity:.85;
}
.toast-x:hover{ opacity:1; color:var(--text); background:var(--surface-3); }
.toast-x svg{ width:10px; height:10px; }
.toast-timer{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--toast-tone, var(--primary)); opacity:.6;
  transform-origin:left;
  animation:toastTimer var(--toast-dur, 3200ms) linear both;
}
.toast:hover .toast-timer{ animation-play-state:paused; }
.toast.ok{ --toast-tone:var(--success); --toast-soft:var(--success-soft); }
.toast.err{ --toast-tone:var(--danger); --toast-soft:var(--danger-soft); }
.toast.info{ --toast-tone:var(--primary); --toast-soft:var(--primary-soft); }
.toast.out{ animation:toastOut .22s var(--ease) both; }

/* 就地确认：开关切换后在控件旁闪一下，距离 0，不需要移开视线找提示 */
.flash-tip{
  position:fixed; z-index:390; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px 3px 7px; border-radius:99px;
  font-size:11.5px; line-height:1.5; white-space:nowrap;
  background:var(--success-soft); color:var(--success);
  pointer-events:none;
  animation:tipPop .18s var(--ease-out) both;
}
.flash-tip .ico{ display:flex; }
.flash-tip .ico svg{ width:9px; height:9px; }
.flash-tip.off{ background:var(--surface-3); color:var(--text-2); }
.flash-tip.out{ opacity:0; transition:opacity .2s var(--ease); }
.toast-count[hidden]{ display:none; }

@media (max-width: 860px){
  /* 手机：贴底抬高一点，避开浏览器底栏 / 手势区，宽度不超出屏幕 */
  .toast-root{ bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
  .toast{ font-size:13px; padding:9px 11px; gap:8px; }
}

/* --- 徽标 / 胶囊：降饱和 --- */
.budget-badge, .ext-pill{ font-weight:500; }
code{ background:var(--surface-2); border-color:var(--border); }

/* --- 进度条 --- */
.bar{ height:6px; background:var(--surface-3); }

/* ============ 4. 动效关键帧 ============ */
@keyframes scrimIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes scrimOut{ from{ opacity:1; } to{ opacity:0; } }
@keyframes modalIn{ from{ opacity:0; transform:translateY(14px) scale(.975); } to{ opacity:1; transform:none; } }
@keyframes modalOut{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(6px) scale(.99); } }
@keyframes toastUp{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(8px) scale(.985); } }
@keyframes toastTimer{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
@keyframes tipPop{ from{ opacity:0; transform:translateY(-50%) scale(.9); } to{ opacity:1; transform:translateY(-50%) scale(1); } }
@keyframes viewIn{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
@keyframes popIn{ from{ opacity:0; transform:translateY(-5px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes popInUp{ from{ opacity:0; transform:translateY(5px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes tipIn{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* 页面切换：内容区直接子元素逐个淡入上移 */
.content.view-enter > *{ animation:viewIn .34s var(--ease-out) both; }
.content.view-enter > *:nth-child(1){ animation-delay:0s; }
.content.view-enter > *:nth-child(2){ animation-delay:.035s; }
.content.view-enter > *:nth-child(3){ animation-delay:.07s; }
.content.view-enter > *:nth-child(4){ animation-delay:.105s; }
.content.view-enter > *:nth-child(5){ animation-delay:.14s; }
.content.view-enter > *:nth-child(n+6){ animation-delay:.17s; }
/* 就地重绘的区域（外部数据页签）也用一次轻淡入 */
.fade-in{ animation:fadeIn var(--dur) var(--ease) both; }
/* 就地局部刷新（表格、列表）不重放位移动画，避免“跳” */
.no-anim{ animation:none !important; }

/* 主题切换时的颜色过渡（由 JS 临时挂载，300ms 后摘除） */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{
  transition:background-color .28s ease, border-color .28s ease, color .28s ease, fill .28s ease !important;
}

/* ============ 5. 自绘控件 ============ */
/* --- 5.1 下拉：原生元素透明占位，面层自绘，浮层自绘 --- */
/* 默认块级撑满；只有明确「不撑满」的控件才降级为行内自适应（由 JS 加 .is-inline） */
.ui-sel{ position:relative; display:block; width:100%; max-width:100%; vertical-align:middle; line-height:1.5; }
.ui-sel.is-inline{ display:inline-block; width:auto; }
.ui-sel > select.ui-native{
  opacity:0; pointer-events:none; position:relative; z-index:1;
  display:block; width:100%; margin:0;
}
.ui-sel-face{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:flex; align-items:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:0 30px 0 11px;
  color:var(--text); font-size:14px; overflow:hidden;
  transition:border-color var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
.ui-sel-face .ui-sel-txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-sel-face .ui-sel-txt.ph{ color:var(--text-3); }
.ui-sel-face::after{
  content:''; position:absolute; right:11px; top:50%; width:12px; height:12px;
  margin-top:-6px; background:var(--arrow) center/contain no-repeat;
  transition:transform var(--dur) var(--ease-out);
}
.ui-sel:hover .ui-sel-face{ border-color:var(--border-2); }
.ui-sel:focus-within .ui-sel-face,
.ui-sel.open .ui-sel-face{
  border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 3px var(--ring);
}
.ui-sel.open .ui-sel-face::after{ transform:rotate(180deg); }
.ui-sel.disabled .ui-sel-face{ opacity:.6; cursor:not-allowed; }
.ui-sel:not(.disabled){ cursor:pointer; }

/* 浮层（下拉/记忆共用底座） */
.ui-pop{
  position:fixed; z-index:220; min-width:120px; max-width:min(360px,92vw);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
  padding:5px; max-height:min(320px,62vh); overflow-y:auto;
  animation:popIn .16s var(--ease-out) both; overscroll-behavior:contain;
}
.ui-pop.up{ animation-name:popInUp; }
.ui-opt{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:6px; font-size:13.5px;
  color:var(--text); cursor:pointer; white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ui-opt:hover, .ui-opt.hot{ background:var(--surface-2); }
.ui-opt.on{ background:var(--primary-soft); color:var(--primary); font-weight:600; }
.ui-opt .ui-opt-lab{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ui-opt .ui-opt-tick{ font-size:12px; opacity:0; }
.ui-opt.on .ui-opt-tick{ opacity:1; }
.ui-opt-note{ padding:8px 10px; font-size:12.5px; color:var(--text-3); }
/* 分组标题（对应原生 <optgroup label>） */
.ui-opt-grp{ padding:7px 10px 3px; font-size:11px; font-weight:700; letter-spacing:.06em;
  color:var(--text-3); text-transform:uppercase; }
.ui-opt-grp + .ui-opt{ margin-top:1px; }

/* --- 5.2 日期：文本输入 + 自绘日历浮层 --- */
.ui-date{ position:relative; display:block; width:100%; max-width:100%; vertical-align:middle; }
.ui-date.is-inline{ display:inline-block; width:auto; }
.ui-date > input{ width:100%; padding-right:34px; }
.ui-date-btn{
  position:absolute; right:2px; top:2px; bottom:2px; width:28px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:transparent; color:var(--text-3);
  border-radius:6px; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ui-date-btn:hover{ background:var(--surface-2); color:var(--primary); }
.ui-date-btn svg{ width:14px; height:14px; }

.ui-cal{
  position:fixed; z-index:220; width:272px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:12px;
  animation:popIn .16s var(--ease-out) both;
}
.ui-cal.up{ animation-name:popInUp; }
.ui-cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.ui-cal-title{ font-weight:650; font-size:13.5px; font-variant-numeric:tabular-nums; }
.ui-cal-nav{ display:flex; gap:2px; }
.ui-cal-nav button{
  width:26px; height:26px; border-radius:6px; border:none; background:transparent;
  color:var(--text-2); font-size:14px; line-height:1; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ui-cal-nav button:hover{ background:var(--surface-2); color:var(--primary); }
.ui-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.ui-cal-dow{ font-size:11px; color:var(--text-3); text-align:center; padding:3px 0 5px; }
.ui-cal-d{
  height:31px; border:none; background:transparent; border-radius:7px;
  font-size:12.5px; color:var(--text); cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ui-cal-d:hover{ background:var(--surface-2); }
.ui-cal-d.out{ color:var(--text-3); opacity:.55; }
.ui-cal-d.today{ color:var(--primary); font-weight:700; box-shadow:inset 0 0 0 1px var(--primary); }
.ui-cal-d.on{ background:var(--primary); color:var(--primary-ink); font-weight:600; }
.ui-cal-d.on:hover{ background:var(--primary-hover); }
.ui-cal-foot{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  margin-top:8px; padding-top:9px; border-top:1px solid var(--border);
}
.ui-cal-foot button{
  border:none; background:transparent; color:var(--primary); font-size:12.5px;
  padding:5px 8px; border-radius:6px; cursor:pointer; font-weight:500;
  transition:background-color var(--dur-fast) var(--ease);
}
.ui-cal-foot button:hover{ background:var(--primary-soft); }
.ui-cal-foot button.muted-btn{ color:var(--text-2); }
.ui-cal-foot button.muted-btn:hover{ background:var(--surface-2); }

/* --- 5.3 数字：自绘步进 --- */
.ui-num{ position:relative; display:block; width:100%; max-width:100%; vertical-align:middle; }
.ui-num.is-inline{ display:inline-block; width:auto; }
.ui-num > input{ width:100%; padding-right:24px; }
.ui-num-steps{
  position:absolute; right:1px; top:1px; bottom:1px; width:20px; z-index:2;
  display:flex; flex-direction:column;
  border-left:1px solid var(--border); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  overflow:hidden; opacity:0;
  transition:opacity var(--dur-fast) var(--ease);
}
.ui-num:hover .ui-num-steps, .ui-num:focus-within .ui-num-steps{ opacity:1; }
.ui-num-steps button{
  flex:1; border:none; background:transparent; color:var(--text-2);
  font-size:8px; line-height:1; cursor:pointer; padding:0;
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ui-num-steps button:hover{ background:var(--surface-2); color:var(--primary); }
.ui-num-steps button:active{ background:var(--surface-3); }

/* --- 5.4 输入记忆（替代浏览器自动填充下拉） --- */
.ui-mem{ position:fixed; z-index:220; min-width:180px; max-width:min(360px,92vw); }
.ui-mem-item{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px;
  font-size:13.5px; color:var(--text); cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease);
}
.ui-mem-item:hover, .ui-mem-item.hot{ background:var(--surface-2); }
.ui-mem-item .ui-mem-txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-mem-item .ui-mem-txt b{ color:var(--primary); font-weight:600; }
.ui-mem-del{
  flex:none; border:none; background:transparent; color:var(--text-3);
  font-size:13px; padding:1px 4px; border-radius:4px; cursor:pointer; line-height:1;
}
.ui-mem-del:hover{ background:var(--danger-soft); color:var(--danger); }

/* --- 5.5 气泡提示（替代原生 title 浮层） ---
   v1.36.0 主题化重刷：不再是「前景/背景反转」（深色主题下与浏览器原生提示几乎一样），
   改为主题表面卡片风——表面色 + 描边 + 大阴影 + 左缘 3px 主题色强调条（呼应全站强调条语言）。 */
.ui-tip{
  position:fixed; z-index:300; max-width:320px; pointer-events:none;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--border-2); border-left:3px solid var(--primary);
  font-size:12.5px; line-height:1.6; padding:8px 12px 8px 11px; border-radius:8px;
  box-shadow:var(--shadow-lg); animation:tipIn .14s var(--ease-out) both;
  word-break:break-word;
}

/* --- 5.6 用户菜单复用浮层皮肤 --- */
.ui-menu{ min-width:170px; }
.ui-menu .btn{ justify-content:flex-start; width:100%; border-color:transparent; }

/* ============ 6. 版本徽标与「版本与更新记录」 ============ */
.ver-badge{
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 10px; border-radius:999px; flex:none;
  font-size:11.5px; font-weight:600; letter-spacing:.2px; white-space:nowrap;
  color:var(--primary); background:var(--primary-soft);
  border:1px solid transparent; cursor:pointer; user-select:none;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ver-badge:hover{ border-color:var(--primary); }
.ver-badge:active{ transform:translateY(.5px); }
.ver-badge .vb-dot{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.7; flex:none; }
.ver-badge .vb-build{ color:var(--text-3); font-weight:500; }
/* 统一格式「vX.Y.Z (构建号)」：窄屏只收起构建号，不改变文字写法 */
@media(max-width:760px){ .ver-badge .vb-build{ display:none; } }
/* 非管理员：只显示版本号，不提供更新记录（别让它看起来像个可点的控件） */
.ver-badge.ver-badge-ro{ cursor:default; }
.ver-badge.ver-badge-ro:hover{ border-color:var(--border); }
.ver-badge.ver-badge-ro:active{ transform:none; }

/* 侧栏底部版本行：窄侧栏时省略而不是撑破布局 */
.side-foot .ver{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 版本记录弹窗 */
.vh-wrap{ max-height:min(52vh,460px); overflow:auto; margin:0 -4px; padding:0 4px; }
.vh-item{ padding:11px 0; border-bottom:1px solid var(--border); }
.vh-item:last-child{ border-bottom:none; }
.vh-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vh-v{ font-size:13.5px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.vh-tag{ font-size:10px; font-weight:600; padding:1px 8px; border-radius:999px; line-height:16px; }
.vh-tag.vtag-major{ color:var(--warn); background:var(--warn-soft); }
.vh-tag.vtag-minor{ color:var(--primary); background:var(--primary-soft); }
.vh-tag.vtag-patch{ color:var(--text-2); background:var(--surface-2); border:1px solid var(--border); }
.vh-date{ font-size:11.5px; color:var(--text-3); font-variant-numeric:tabular-nums; }
.vh-cur{ font-size:10px; font-weight:700; color:var(--primary); border:1px solid var(--primary); border-radius:999px; padding:0 8px; line-height:16px; }
.vh-notes{ margin:7px 0 0; padding:0; list-style:none; font-size:12.5px; line-height:1.75; color:var(--text-2); }
.vh-notes li{ position:relative; margin:0 0 2px; padding-left:14px; }
.vh-notes li::before{ content:'·'; position:absolute; left:4px; color:var(--text-3); }
.vh-foot{ margin-top:12px; font-size:11.5px; line-height:1.8; color:var(--text-3); }
.vh-foot b{ color:var(--text-2); font-weight:600; }

/* ============ 7. 图标：双形态（经典 emoji ↔ 扁平线性） ============ */
/* 调用点同时输出 emoji 与 svg 两份，由 <html data-icons="emoji|flat"> 决定显示哪一个：
   切换图标风格**不需要重渲染**，静态 HTML 与 JS 拼的字符串都自动跟随；
   原来的 emoji 一个都没删，切「经典」即完全还原。 */
.ico{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; line-height:0; vertical-align:-.14em; }
.ico-e{ display:none; font-style:normal; line-height:1; }
.ico-f{ display:block; width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
html[data-icons="emoji"] .ico-e{ display:inline; }
html[data-icons="emoji"] .ico-f{ display:none; }
/* flex 容器（按钮 / 导航项）之间的间距交给 gap；非 flex 场景补一点右边距 */
.ico-in{ margin-right:.34em; }

/* 双击查看：行提示 */
.rv-row{ cursor:default; }
.rv-hint{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.rv-hint .ico-f{ width:13px; height:13px; }

/* ============ 7.5 模块内搜索框（v1.57.5） ============
   取代工具栏里原来的「👁 双击行可查看详情」提示，宽度与它**实测一致**：
   12px 字号 × 8 个汉字 = 96px，加 13px 图标 + 5px 间距 ≈ 114px。
   宽度写死、聚焦也不改变 ⇒ 替换后「筛选 / 排序 / 分组」的位置不动，不换行。
   ⚠ 不复用 .search-input：styles.css 在 ≤520px 下把 .search-input 整条 display:none
     （那是给顶栏全局搜索用的），模块内搜索在手机上仍要能用。 */
.mod-q{
  width:114px; flex:0 0 auto; min-width:0;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:7px 9px; color:var(--text); font-size:12px; font-family:inherit; line-height:1.4;
  outline:none; -webkit-appearance:none; appearance:none;
  transition:border-color var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
.mod-q::placeholder{ color:var(--text-3); }
.mod-q:hover{ border-color:var(--border-2); }
.mod-q:focus{ border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 3px var(--ring); }
.mod-q:disabled{ opacity:.55; cursor:not-allowed; }
/* Chrome/Safari 给 type=search 的清除按钮：默认图标与深色主题不搭，统一换成细 ✕ */
.mod-q::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none; width:10px; height:10px; cursor:pointer;
  background:currentColor; opacity:.45;
  -webkit-mask:linear-gradient(45deg,transparent 44%,#000 44%,#000 56%,transparent 56%),
               linear-gradient(-45deg,transparent 44%,#000 44%,#000 56%,transparent 56%);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(45deg,transparent 44%,#000 44%,#000 56%,transparent 56%),
       linear-gradient(-45deg,transparent 44%,#000 44%,#000 56%,transparent 56%);
  mask-composite:intersect;
}
.mod-q::-webkit-search-cancel-button:hover{ opacity:.8; }

/* ============ 8. 行详情查看弹窗 ============ */
.rv-top{ margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.rv-name{ font-size:16px; font-weight:700; letter-spacing:.2px; }
.rv-sub{ font-size:12px; color:var(--text-3); margin-top:3px; }
.rv-sec.mt{ margin-top:16px; }
.rv-sec-t{ font-size:12.5px; font-weight:650; color:var(--text-2); margin-bottom:8px; }
.rv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
.rv-f{ display:flex; flex-direction:column; gap:3px; padding:7px 0; border-bottom:1px dashed var(--border); min-width:0; }
.rv-l{ font-size:11.5px; color:var(--text-3); }
.rv-v{ font-size:13.5px; color:var(--text); word-break:break-word; }
/* 电话 / 电子邮件 / 网址（v1.66.0）：详情里做成可点链接；下划线只在悬停出现，避免整页花 */
.rv-link{ color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; cursor:pointer; }
.rv-link:hover{ border-bottom-color:currentColor; }
.rv-total{ margin-top:8px; font-size:12.5px; color:var(--text-2); text-align:right; }
.rv-total b{ color:var(--text); }
@media(max-width:620px){ .rv-grid{ grid-template-columns:1fr; } }

/* ============ 8.5 弹窗布局（v1.52.0）：分区 + 字段宽度四档（6 列基网格） ============ */
.flo-sec{ border:1px solid var(--border); border-radius:10px; padding:10px 14px 8px; margin-bottom:10px; background:var(--surface); }
.flo-sec-t{ display:flex; align-items:center; gap:7px; cursor:pointer; user-select:none; margin-bottom:4px; }
.flo-sec-t b{ font-size:12.5px; color:var(--text-2); }
.flo-caret{ font-size:11px; color:var(--text-3); width:12px; }
.flo-sec.collapsed .flo-grid{ display:none; }
.flo-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:0 22px; }
.flo-2{ grid-column:span 2; } .flo-3{ grid-column:span 3; } .flo-4{ grid-column:span 4; } .flo-6{ grid-column:1/-1; }
@media(max-width:620px){
  .flo-grid{ grid-template-columns:1fr; }
  .flo-grid > *{ grid-column:auto !important; }   /* 手机单列：宽度档失效，避免 span 撑出隐式列 */
}

/* ---- 布局编辑器 ---- */
.flo-edit-tip{ font-size:12px; color:var(--text-2); background:var(--primary-soft); border-radius:8px; padding:8px 12px; margin-bottom:10px; line-height:1.6; }
.flo-edit-hint{ font-size:12px; color:var(--warn,#c9862f); margin-bottom:8px; min-height:16px; }
.flo-edit{ display:flex; flex-direction:column; gap:10px; max-height:56vh; overflow:auto; padding-right:2px; }
.flo-esec{ border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--surface-2); }
.flo-esec-t{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.flo-etitle{ flex:1 1 auto; min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:5px 10px; font-size:12.5px; color:var(--text); }
.flo-efold{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text-2); white-space:nowrap; cursor:pointer; }
/* v1.52.2：flo-edrop 不再自带 display:flex——挂在 .flo-grid 上时会覆盖六列网格，
   宽度档（flo-2/3/4/6）全部失效 ⇒ 编辑器永远每行挤 4 个、与真实弹窗不一致。
   流式排布只给未分区池用（.flo-edrop-flex）。 */
.flo-edrop{ min-height:34px; border:1.5px dashed transparent; border-radius:8px; padding:5px; }
.flo-edrop-flex{ display:flex; flex-wrap:wrap; gap:6px; }
.flo-edrop.over{ border-color:var(--primary); background:var(--primary-soft); }
.flo-eempty{ font-size:12px; color:var(--text-3); align-self:center; }
.flo-chip{ display:inline-flex; align-items:center; gap:5px; background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:4px 6px 4px 11px; font-size:12.5px; color:var(--text); cursor:grab; user-select:none; }
.flo-chip:active{ cursor:grabbing; }
.flo-chip.ins{ outline:2px solid var(--primary); outline-offset:-1px; }
.flo-chip .flo-w{ font-size:10.5px; color:var(--primary); background:var(--primary-soft); border-radius:99px; padding:1px 7px; cursor:pointer; font-weight:600; }
.flo-chip .flo-ro{ font-style:normal; font-size:10.5px; color:var(--text-3); border:1px solid var(--border); border-radius:99px; padding:0 6px; }
.flo-epool{ border-style:dashed; }

/* v1.52.1 编辑器「所见即所得」卡片：直接复用真实 .flo-sec/.flo-grid 骨架，这里只补卡片本体 */
.flo-wcard{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 10px 7px; cursor:grab; user-select:none; min-width:0; }
.flo-wcard:active{ cursor:grabbing; }
.flo-wcard.ins{ outline:2px solid var(--primary); outline-offset:-2px; }
.flo-wcard-h{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text); min-width:0; }
.flo-wcard-h b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.flo-grip{ color:var(--text-3); cursor:grab; font-size:13px; line-height:1; flex:none; }
.flo-wcard-v{ font-size:12px; color:var(--text-2); margin:4px 0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flo-wcard-v.ph{ color:var(--text-3); opacity:.7; }
.flo-wcard-w{ display:flex; gap:4px; flex-wrap:wrap; }
.flo-wb{ appearance:none; -webkit-appearance:none; border:1px solid var(--border); background:var(--surface-2); color:var(--text-3); border-radius:99px; padding:1px 9px; font-size:10.5px; cursor:pointer; line-height:1.7; }
.flo-wb:hover{ color:var(--text); }
.flo-wb.on{ background:var(--primary-soft); color:var(--primary); border-color:var(--primary); font-weight:600; }
/* 分区头右侧：字段数·默认态 + 改名/删分区 */
.flo-sec-t .flo-wmeta{ margin-left:auto; font-size:11px; color:var(--text-3); white-space:nowrap; }
.flo-wact{ font-size:11.5px; color:var(--text-3); cursor:pointer; white-space:nowrap; padding:0 1px; }
.flo-wact:hover{ color:var(--text); }
.flo-wact.danger:hover{ color:var(--err); }

/* ============ 9. 系统设置 › 外观（图标风格 / 主题色 / 明暗主题） ============ */
/* 排布规则：每个设置项 = 一行「标题在左 · 控件在右」（两列网格，永远贴齐容器两侧，
   不会因宽度不足把控件挤到下一行左侧）；预览面板与主题色卡共用同一套两列网格
   ⇒ 两组内容的左右边界严格对齐、且逐格等宽。 */
.ui-pref{ display:flex; flex-direction:column; gap:26px; }
.pref-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 18px; }
.pref-h{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pref-h b{ font-size:14px; }
.pref-h .tiny{ font-size:12px; color:var(--text-3); line-height:1.55; }
.seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:3px; gap:3px; }
.seg-btn{ border:none; background:transparent; color:var(--text-2); font-size:13px; font-weight:500; padding:7px 16px; border-radius:6px; transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.seg-btn:hover{ color:var(--text); }
.seg-btn.on{ background:var(--surface); color:var(--primary); box-shadow:var(--shadow); font-weight:600; }
/* 预览面板 / 色卡共用：等宽两列，左边界与标题对齐 */
.pref-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; max-width:664px; margin-top:14px; }
.pv-side{ width:100%; font:inherit; text-align:left; cursor:pointer; appearance:none; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px; display:flex; flex-direction:column; gap:2px; transition:border-color var(--dur-fast) var(--ease); }
.pv-side:hover{ border-color:var(--border-2); }
.pv-side.on{ border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.pv-t{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:3px 6px 7px; }
/* 图标风格的选项名即框标题：字号/字重配色与主题色卡标题同级，选中时转主色（等同原分段按钮的选中态） */
.pv-name{ font-size:13px; font-weight:500; color:var(--text-2); transition:color var(--dur-fast) var(--ease); }
.pv-side.on .pv-name{ color:var(--primary); font-weight:600; }
.pv-cur{ flex:none; font-size:10px; font-weight:700; color:var(--primary); border:1px solid var(--primary); border-radius:999px; padding:0 6px; line-height:15px; }
.pv-i{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px; font-size:12.5px; color:var(--text-2); }
.pv-i .ic{ font-size:15px; width:18px; display:inline-flex; justify-content:center; }
/* 迷你侧栏里「被选中那一项」用中性强调，跟主题色无关，两套预览看到的是同一个东西 */
.pv-i.on{ background:var(--surface-3); color:var(--text); font-weight:600; }
/* 预览框里强制指定形态，好让两套图标并排对比（不跟随全局 data-icons） */
.pv-force-emoji .ico-e{ display:inline !important; }
.pv-force-emoji .ico-f{ display:none !important; }
.pv-force-flat .ico-e{ display:none !important; }
.pv-force-flat .ico-f{ display:block !important; }
.acc-card{ width:100%; font:inherit; text-align:left; cursor:pointer; appearance:none; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:13px 14px; transition:border-color var(--dur-fast) var(--ease); }
.acc-card:hover{ border-color:var(--border-2); }
.acc-card.on{ border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary); }
.acc-h{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text); }
.acc-dot{ width:12px; height:12px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(128,128,128,.35); }
.acc-chk{ margin-left:auto; flex:none; font-size:10px; font-weight:700; color:var(--primary); border:1px solid var(--primary); border-radius:999px; padding:0 7px; line-height:16px; }
/* 色卡：两行（浅色 / 深色）× 三格，每格色块下面直接标它的 hex（等宽字体、不换行）。
   色块带 1px 内描边 —— 否则「深色行的淡底色块」会和卡片底色糊在一起看不见。 */
.acc-tbl{ display:grid; grid-template-columns:auto repeat(3,minmax(0,1fr)); gap:4px 7px; align-items:center; margin-top:11px; }
.acc-l{ font-size:10.5px; color:var(--text-3); white-space:nowrap; }
.acc-tbl i{ display:block; height:20px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(128,128,128,.3); }
.acc-hex{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:9.5px; color:var(--text-3); text-align:center; white-space:nowrap; }
/* 明暗主题：大图框（各画一张迷你界面缩略图，色值取两套主题的真实底色，故不随所选主题色变化） */
.th-pv{ margin-top:11px; height:88px; border-radius:8px; overflow:hidden; border:1px solid; display:flex; flex-direction:column; }
.th-pv .th-top{ height:15px; flex:none; }
.th-pv .th-body{ flex:1; display:flex; min-height:0; }
.th-pv .th-nav{ width:38px; flex:none; display:flex; flex-direction:column; gap:5px; padding:8px 7px; }
.th-pv .th-nav i{ display:block; height:5px; border-radius:3px; }
.th-pv .th-grid{ flex:1; min-width:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px; padding:8px; }
.th-pv .th-grid span{ border-radius:5px; }
.th-pv.light{ background:#f4f5f8; border-color:#e4e7ee; }
.th-pv.light .th-top{ background:#ffffff; border-bottom:1px solid #e4e7ee; }
.th-pv.light .th-nav{ background:#ffffff; border-right:1px solid #e4e7ee; }
.th-pv.light .th-nav i{ background:#cbd1dd; }
.th-pv.light .th-nav i:first-child{ background:#5b6ba8; }
.th-pv.light .th-grid span{ background:#ffffff; border:1px solid #e4e7ee; }
.th-pv.dark{ background:#111318; border-color:#2b303b; }
.th-pv.dark .th-top{ background:#181b22; border-bottom:1px solid #2b303b; }
.th-pv.dark .th-nav{ background:#181b22; border-right:1px solid #2b303b; }
.th-pv.dark .th-nav i{ background:#3a4150; }
.th-pv.dark .th-nav i:first-child{ background:#7d8ac9; }
.th-pv.dark .th-grid span{ background:#181b22; border:1px solid #2b303b; }
@media(max-width:700px){
  .pref-row{ grid-template-columns:minmax(0,1fr); }
  .pref-grid{ grid-template-columns:minmax(0,1fr); max-width:none; }
}

/* ============ 10. 无障碍：尊重系统的“减少动效” ============ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============ 11. 外部数据 › 统一层投影状态 ============ */
.uv-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:0 0 12px; }
.uv-st{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 13px; min-width:0; }
.uv-st b{ display:block; font-size:19px; font-weight:600; line-height:1.3; color:var(--text); }
.uv-st span{ display:block; margin-top:2px; font-size:12px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uv-st.warn{ border-color:var(--warn); }
.uv-st.warn b{ color:var(--warn); }

/* ============ 12. 工具栏内的行内控件 ============ */
/* 工具栏的语义是「标签 + 行内控件」，绝不能把控件撑成一整行。
   ⚠ 增强器包裹原生控件时若那一刻量不到宽度（祖先尚未布局），会保守地按「撑满」处理，
   于是该控件与前面的标签分行（来源 / 通道 / 公司主体等筛选下拉都会中招）。
   这里按工具栏语义直接收回宽度，不依赖增强器的判定时机。 */
.toolbar > .ui-sel,
.toolbar > .ui-date,
.toolbar > .ui-num{ display:inline-block; width:auto; min-width:150px; max-width:300px; vertical-align:middle; }
.toolbar > .ui-date,
.toolbar > .ui-num{ min-width:132px; max-width:200px; }

/* ============ 13. 统一数据：筛选 / 排序 / 分组 / 列显示 ============ */
/* 两行工具栏：第 1 行筛选，第 2 行视图操作。复用 .toolbar 的 flex-wrap，
   只把行间距压紧（.toolbar 默认 margin-bottom:14px 对两行太松）。 */
.uv-bar{ margin-bottom:8px; }
.uv-bar2{ margin-bottom:12px; }
.uv-lb{ font-size:13px; color:var(--text-2); white-space:nowrap; }
/* 关键字输入（type=search 不参与控件增强，因此不会被 .ui-sel 影响） */
.uv-q{ width:200px; }
.uv-fb{ margin:0 0 12px; font-size:12.5px; }
/* 分页行里的行内下拉（脱离 .toolbar 语境，单独收回宽度） */
.uv-inl{ display:inline-block; }
.uv-inl > .ui-sel{ display:inline-block; width:auto; min-width:86px; max-width:132px; vertical-align:middle; }

/* 关键字命中高亮 */
.uv-hl{ background:var(--warn-soft); color:inherit; border-radius:3px; padding:0 1px; }

/* 可排序表头：三态循环（升序 → 降序 → 不排序），所以只有「排序中」才上主色 */
.tbl th.uv-th{ cursor:pointer; user-select:none; }
.tbl th.uv-th:hover{ color:var(--text); }
.tbl th.uv-th.on{ color:var(--primary); }
.uv-ar{ margin-left:4px; font-size:11px; }
/* “当前分组依据”标记：一个小徽标，不加边框不加线 */
.uv-gmark{ margin-left:6px; font-size:10.5px; font-weight:500; color:var(--primary);
  background:var(--primary-soft); border-radius:8px; padding:1px 6px; }

/* 分组表头行：整行是一颗可点按钮，折叠箭头在最左 */
.tbl tr.uv-grp td{ background:var(--surface-3); cursor:pointer; font-size:12.5px; padding:8px 14px; }
.tbl tr.uv-grp:hover td{ background:var(--surface-2); }
.tbl tr.uv-grp b{ margin-right:8px; }
.uv-grp-ar{ display:inline-block; width:14px; color:var(--text-3); }
.tbl tr.uv-grp.closed b{ color:var(--text-2); }

/* 分组分布（可视化）：每行 = 组名 + 横条 + 条数，整行可点以下钻 */
.uv-dist{ margin:0 0 12px; }
.uv-dist-hd{ font-size:12.5px; color:var(--text-2); margin-bottom:8px; }
.uv-dist-hd a{ color:var(--primary); }
.uv-dist-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:4px 18px; }
.uv-dist-i{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:none; border-radius:var(--radius-sm); padding:5px 8px; transition:background-color var(--dur-fast) var(--ease); }
.uv-dist-i:hover{ background:var(--surface-2); }
.uv-dist-i.on{ background:var(--primary-soft); }
.uv-dist-i .nm{ flex:0 0 34%; max-width:34%; font-size:12.5px; color:var(--text-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uv-dist-i.on .nm{ color:var(--primary); font-weight:600; }
.uv-dist-i .bar{ flex:1; height:8px; background:var(--surface-3); border-radius:4px; overflow:hidden; }
.uv-dist-i .bar > i{ display:block; height:100%; background:var(--primary); border-radius:4px; }
.uv-dist-i .ct{ flex:0 0 auto; font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; }

/* 列显示控制浮层（复用 .ui-pop 的定位与阴影） */
.uv-colpop{ width:230px; padding:8px 0 0; }
.uv-cp-hd{ padding:4px 12px 8px; font-size:12.5px; font-weight:600; color:var(--text-2); border-bottom:1px solid var(--border); }
.uv-cp-list{ max-height:280px; overflow-y:auto; padding:6px 0; }
.uv-cp-i{ display:flex; align-items:center; gap:8px; padding:6px 12px; font-size:13px; cursor:pointer; }
.uv-cp-i:hover{ background:var(--surface-2); }
.uv-cp-i input{ flex-shrink:0; }
.uv-cp-i span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uv-cp-ft{ display:flex; gap:8px; padding:8px 12px; border-top:1px solid var(--border); }