/* ============================================================
   ui-polish.v20260924193401.css —— 设计令牌统一覆盖层（加载于所有样式之后）
   原则：不改功能、不改编译产物 JS，只做视觉一致性收敛。
   依赖页面已有的主题令牌：--primary --primary-2 --warning --bg-0/1/2
   --text-1/2 --panel-bg --panel-border --panel-radius --card-radius
   --control-radius --laser-a/b --input-* --hero-title --hero-subtitle
   ============================================================ */

/* ---------- 1. 色彩统一：把 Element Plus 变量同步到主题色 ---------- */
html[data-theme] {
  --el-color-primary: var(--primary);
  --el-color-primary-rgb: 0 234 255;
  --el-color-primary-dark-2: color-mix(in srgb, var(--primary) 72%, #000);
  --el-color-primary-light-3: color-mix(in srgb, var(--primary) 62%, var(--bg-1));
  --el-color-primary-light-5: color-mix(in srgb, var(--primary) 42%, var(--bg-1));
  --el-color-primary-light-7: color-mix(in srgb, var(--primary) 24%, var(--bg-1));
  --el-color-primary-light-8: color-mix(in srgb, var(--primary) 16%, var(--bg-1));
  --el-color-primary-light-9: color-mix(in srgb, var(--primary) 8%, var(--bg-1));
  --el-bg-color: var(--bg-1);
  --el-bg-color-overlay: var(--bg-2);
  --el-text-color-primary: var(--text-1);
  --el-text-color-regular: var(--text-1);
  --el-text-color-secondary: var(--text-2);
  --el-text-color-placeholder: color-mix(in srgb, var(--text-2) 72%, transparent);
  --el-border-color: var(--panel-border);
  --el-border-color-light: var(--panel-border);
  --el-border-color-lighter: color-mix(in srgb, var(--panel-border) 70%, transparent);
  --el-fill-color-blank: var(--bg-1);
  --el-fill-color-light: color-mix(in srgb, var(--primary) 6%, var(--bg-1));
  --el-border-radius-base: var(--control-radius);
  --el-font-family: var(--font-body);
  --el-box-shadow-light: 0 10px 34px var(--panel-shadow);
}

/* ---------- 2. 暗色下拉浮层（select / popper / message） ---------- */
.el-popper {
  background: var(--el-bg-color-overlay) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 18px 48px var(--panel-shadow) !important;
  color: var(--text-1);
}
.el-popper__arrow::before {
  background: var(--el-bg-color-overlay) !important;
  border-color: var(--panel-border) !important;
}
.el-select-dropdown__item {
  color: var(--text-1);
  border-radius: calc(var(--control-radius) - 4px);
  margin: 2px 6px;
  transition: background-color .16s ease, color .16s ease;
}
.el-select-dropdown__item.is-hovering,
.el-select-dropdown__item:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.el-select-dropdown__item.is-selected {
  color: var(--primary);
  font-weight: 600;
}
.el-select-dropdown__empty { color: var(--text-2); }
.el-message {
  background: var(--el-bg-color-overlay);
  border: 1px solid var(--panel-border);
}

/* ---------- 3. 交互态统一：focus 环 / hover / active / disabled ---------- */
.el-input__wrapper,
.el-select__wrapper,
.el-textarea__inner {
  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px var(--primary) inset, 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent) !important;
}
.el-input__wrapper:hover:not(.is-focus),
.el-select__wrapper:hover:not(.is-focused) {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent) inset !important;
}
.el-button {
  transition: transform .16s ease, box-shadow .18s ease, background-color .18s ease,
              border-color .18s ease, opacity .18s ease;
}
.el-button:not(.is-disabled):hover { transform: translateY(-1px); }
.el-button:not(.is-disabled):active { transform: translateY(0); }
.el-button.is-disabled { opacity: .45; cursor: not-allowed; }
.el-button--primary:not(.is-disabled) {
  box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 26%, transparent);
}
.el-button--primary:not(.is-disabled):hover {
  box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 38%, transparent);
}

/* ---------- 4. 字体层级 ---------- */
.panel-title { letter-spacing: .02em; }
.panel-note p { line-height: 1.7; }
.form-label, label { letter-spacing: .01em; }
/* 数值结果用展示字体 + 等宽数字 */
.result-value, .metric-value, [class*="result"] strong {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* ---------- 5. 布局节奏 ---------- */
/* 桌面端表单卡片收窄居中，避免 1320px 下字段被拉太长 */
@media only screen and (min-width: 1200px) {
  .settlement-page > .panel:not(.hero-panel) {
    max-width: 108rem;
    margin-left: auto;
    margin-right: auto;
  }
  /* 两列字段统一列宽节奏：单列字段不再通栏 */
  .form-grid > *, .simple-grid > * { min-width: 0; }
}
/* ---------- 6. 移动端：压缩 hero、保证触控目标 ---------- */
@media (max-width: 768px) {
  .settlement-page { padding: 1.6rem 1.2rem 8.4rem; }
  .hero-grid { gap: 1.6rem; }
  .hero-logo-field { width: min(52vw, 13.6rem); }
  .hero-logo-slot { width: 10.4rem; height: 10.4rem; }
  /* 触控目标下限 44px */
  .el-button { min-height: 44px; }
  .el-input__wrapper, .el-select__wrapper { min-height: 44px; }
  /* 表单间距收紧 */
  .form-section + .form-section { margin-top: 1.4rem; }
}

/* ---------- 7. 细节打磨 ---------- */
/* 滚动条与主题一致 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 30%, var(--bg-2));
  border-radius: 8px;
  border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-track { background: transparent; }
::selection { background: color-mix(in srgb, var(--primary) 30%, transparent); }
/* 降级兜底：不支持 color-mix 的老内核不影响主样式 */
@supports not (color: color-mix(in srgb, red, blue)) {
  html[data-theme] { --el-color-primary-light-9: rgba(0, 234, 255, .08); }
}