:root {
      --primary: #2563eb;
      --primary-dark: #1d4ed8;
      --bg: #f1f5f9;
      --primary-soft: #eff6ff;
      --panel: #ffffff;
      --border: #e2e8f0;
      --text: #0f172a;
      --muted: #64748b;
      --danger: #dc2626;
      --success: #16a34a;
      --warn: #d97706;
      --radius: 10px;
      --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .05);
      --ring: 0 0 0 3px rgba(37, 99, 235, .25)
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    body {
      font-family: -apple-system, "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      line-height: 1.5
    }

    .wrap {
      max-width: 1280px;
      margin: 0 auto;
      padding: 16px
    }

    header {
      background: linear-gradient(135deg, var(--primary), #3b82f6 55%, #60a5fa);
      color: #fff;
      border-radius: var(--radius);
      padding: 14px 20px;
      box-shadow: var(--shadow);
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap
    }

    header .header-title h1 {
      font-size: 22px;
      font-weight: 600
    }

    header h1 .ver {
      display: inline-block;
      font-size: 13px;
      font-weight: 500;
      vertical-align: 3px;
      margin-left: 8px;
      padding: 2px 10px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .18);
      border: 1px solid rgba(255, 255, 255, .35)
    }

    header .header-meta {
      opacity: .92;
      font-size: 13px;
      margin: 0;
      padding-left: 16px;
      border-left: 1px solid rgba(255, 255, 255, .25);
      white-space: nowrap
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: var(--shadow);
      margin-bottom: 8px
    }

    .panel h2 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .panel h2::before {
      content: "";
      width: 4px;
      height: 16px;
      background: var(--primary);
      border-radius: 2px
    }

    /* 面板标题右侧的说明文字 */
    .panel h2 .panel-note {
      margin-left: auto;
      font-size: 12px;
      font-weight: 400;
      color: var(--muted);
      line-height: 1.6;
      text-align: right;
      max-width: 560px
    }

    .row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    label {
      font-size: 13px;
      color: var(--muted);
      font-weight: 500
    }

    input[type=number],
    input[type=text] {
      padding: 6px 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 14px;
      width: 160px;
      outline: none;
      transition: border-color .15s, box-shadow .15s;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent
    }

    input:focus {
      border-color: var(--primary)
    }

    input:focus-visible {
      border-color: var(--primary);
      box-shadow: var(--ring)
    }

    select {
      background-color: #fff;
      color: var(--text);
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent
    }

    .btn {
      padding: 7px 14px;
      border: none;
      border-radius: 6px;
      background: var(--primary);
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background .15s, transform .05s;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent
    }

    .btn:hover {
      background: var(--primary-dark)
    }

    .btn:focus-visible {
      outline: none;
      box-shadow: var(--ring)
    }

    .btn:active {
      transform: translateY(1px)
    }

    .btn:disabled {
      background: #94a3b8;
      cursor: not-allowed
    }

    .btn.secondary {
      background: #fff;
      color: var(--primary);
      border: 1px solid var(--primary)
    }

    .btn.secondary:hover {
      background: #eff6ff
    }

    .btn.ghost {
      background: #f1f5f9;
      color: var(--text)
    }

    .btn.ghost:hover {
      background: #e2e8f0
    }

    .btn.danger {
      background: var(--danger)
    }

    .btn.danger:hover {
      background: #b91c1c
    }

    .btn.sm {
      padding: 5px 12px;
      font-size: 13px
    }

    /* 批量修改按钮：贴到操作栏最右侧 */
    #btnBatch {
      margin-left: auto
    }

    .drop {
      border: 2px dashed var(--border);
      border-radius: var(--radius);
      padding: 16px 12px;
      text-align: center;
      color: var(--muted);
      cursor: pointer;
      transition: border-color .15s, background .15s;
      background: #fafcff;
      -webkit-tap-highlight-color: transparent
    }

    .drop:hover,
    .drop.over {
      border-color: var(--primary);
      background: #eff6ff;
      color: var(--primary)
    }

    .drop:focus-visible {
      outline: none;
      border-color: var(--primary);
      box-shadow: var(--ring)
    }

    .drop strong {
      color: var(--text)
    }

    /* 已选择文件：框内显示文件名 */
    .drop.has-file {
      border-color: var(--primary);
      border-style: solid;
      background: #eff6ff;
      color: var(--primary)
    }

    .drop .drop-file {
      font-weight: 600;
      color: var(--text);
      word-break: break-all;
      font-size: 14px
    }

    .fileinfo {
      margin-top: 8px;
      font-size: 13px;
      color: var(--muted);
      display: none
    }

    .fileinfo.show {
      display: block
    }

    .fileinfo b {
      color: var(--text)
    }

    .status {
      margin-top: 6px;
      font-size: 13px;
      color: var(--muted);
      min-height: 16px
    }

    .status.err {
      color: var(--danger)
    }

    .status.ok {
      color: var(--success)
    }

    .status.warn-text {
      color: var(--warn)
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      table-layout: fixed
    }

    th,
    td {
      padding: 6px 8px;
      text-align: left;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-variant-numeric: tabular-nums
    }

    th {
      background: #f8fafc;
      font-weight: 600;
      color: var(--muted);
      position: sticky;
      top: 0;
      cursor: pointer;
      user-select: none
    }

    th:hover {
      color: var(--primary)
    }

    /* 列宽拖拽手柄：位于表头右缘，hover 高亮 */
    th .resizer {
      position: absolute;
      top: 0;
      right: -4px;
      width: 8px;
      height: 100%;
      cursor: col-resize;
      z-index: 2;
      touch-action: none
    }

    th .resizer:hover,
    body.resizing th .resizer {
      background: rgba(37, 99, 235, .35)
    }

    th .resizer::after {
      content: "";
      position: absolute;
      top: 20%;
      bottom: 20%;
      left: 50%;
      width: 2px;
      transform: translateX(-50%);
      background: var(--border)
    }

    th .resizer:hover::after,
    body.resizing th .resizer::after {
      background: var(--primary)
    }

    /* 拖拽中：全局禁用文本选中，统一列宽光标 */
    body.resizing {
      cursor: col-resize;
      user-select: none;
      -webkit-user-select: none
    }

    tbody tr:hover {
      background: #f8fafc
    }

    tbody tr:nth-child(even) {
      background: #fbfcfe
    }

    tbody tr:nth-child(even):hover {
      background: #f1f5f9
    }

    .tablewrap {
      max-height: 460px;
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius)
    }

    .err-reason {
      color: var(--danger);
      white-space: normal;
      word-break: break-word;
      line-height: 1.4
    }

    /* 警告原因：橙色 */
    .err-reason.warn {
      color: var(--warn)
    }

    /* 错误原因收起/展开：默认单行省略，点击展开全部 */
    .err-collapsed {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .err-trunc {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--danger)
    }

    .err-trunc.warn {
      color: var(--warn)
    }

    /* 可点击的收起行：整行提示可展开 */
    .err-collapsed[data-toggle] {
      cursor: pointer
    }

    .err-collapsed[data-toggle]:hover .err-trunc {
      text-decoration: underline;
      text-underline-offset: 2px
    }

    .btn-link {
      flex: none;
      border: none;
      background: transparent;
      color: var(--primary);
      cursor: pointer;
      font-size: 12px;
      padding: 0;
      white-space: nowrap
    }

    .btn-link:hover {
      text-decoration: underline
    }

    /* 错误原因列：允许换行、占满剩余宽度，不被截断 */
    td.col-reason,
    th.col-reason {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      width: auto
    }

    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 500
    }

    .badge.danger {
      background: #fee2e2;
      color: var(--danger)
    }

    /* 深色状态徽标：已修改（深绿）/已删除（深红） */
    .badge.modified {
      background: #16a34a;
      color: #fff
    }

    .badge.deleted {
      background: #dc2626;
      color: #fff
    }

    .badge.warn {
      background: #fef3c7;
      color: var(--warn)
    }

    .stat {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px
    }

    .stat .card {
      flex: 1;
      min-width: 140px;
      background: linear-gradient(180deg, #fff, #f8fafc);
      border: 1px solid var(--border);
      border-top: 3px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 14px
    }

    .stat .card .n {
      font-size: 20px;
      font-weight: 700;
      font-variant-numeric: tabular-nums
    }

    .stat .card .t {
      font-size: 12px;
      color: var(--muted);
      margin-top: 2px
    }

    .stat .card.total .n {
      color: var(--primary)
    }

    .stat .card.total {
      border-top-color: var(--primary)
    }

    .stat .card.err {
      border-top-color: var(--danger)
    }

    .stat .card.ok {
      border-top-color: var(--success)
    }

    .stat .card.err .n {
      color: var(--danger)
    }

    .stat .card.ok .n {
      color: var(--success)
    }

    .stat .card.warn {
      border-top-color: var(--warn)
    }

    .stat .card.warn .n {
      color: var(--warn)
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      flex-wrap: wrap;
      gap: 10px
    }

    .toolbar .left {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap
    }

    .filters input {
      padding: 6px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      width: 200px;
      font-size: 13px;
      outline: none
    }

    .filters input:focus {
      border-color: var(--primary)
    }

    .pager {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 6px;
      justify-content: center;
      font-size: 13px;
      color: var(--muted)
    }

    .pager button {
      padding: 5px 12px;
      border: 1px solid var(--border);
      background: #fff;
      border-radius: 6px;
      cursor: pointer
    }

    .pager button:disabled {
      color: #cbd5e1;
      cursor: not-allowed
    }

    .empty {
      text-align: center;
      color: var(--muted);
      padding: 40px
    }

    .hint {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px
    }

    /* 文件分割弹窗 */
    .split-form {
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    .split-row-count {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap
    }

    .split-row-count label {
      font-size: 13px;
      color: var(--text);
      font-weight: 500;
      margin: 0
    }

    .split-row-count input {
      width: 130px
    }

    .split-naming-block {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
      margin: 0;
      min-width: 0
    }

    .split-naming-block legend {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      padding: 0 6px
    }

    .split-naming-block .tag {
      font-size: 11px;
      font-weight: 400;
      color: var(--muted);
      background: var(--border);
      border-radius: 10px;
      padding: 1px 8px;
      margin-left: 4px
    }

    .split-naming {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 14px
    }

    .naming-pair {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      min-width: 0
    }

    .naming-pair label {
      font-size: 12px;
      color: var(--muted);
      margin: 0
    }

    .naming-pair input {
      width: 100%;
      font-size: 13px
    }

    /* 命名预览提示框 */
    .name-preview {
      margin-top: 12px;
      font-size: 12px;
      color: var(--muted);
      background: #f8fafc;
      border: 1px dashed var(--border);
      border-radius: 6px;
      padding: 8px 10px;
      line-height: 1.6;
      min-height: 16px
    }

    .name-preview code {
      background: #fff;
      border: 1px solid var(--border);
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 12px
    }

    .name-preview.warn-text {
      color: var(--warn);
      border-color: #fcd34d;
      background: #fffbeb
    }

    /* 浏览器兼容提示（整页覆盖） */
    .compat-block {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: var(--bg);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px
    }

    /* 确认框层级高于编辑/分割弹窗（90），低于进度遮罩（99） */
    #confirmMask {
      z-index: 95
    }

    .compat-block .compat-card {
      max-width: 560px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 30px 34px;
      box-shadow: var(--shadow);
      text-align: center
    }

    .compat-block h2 {
      font-size: 18px;
      color: var(--text);
      margin-bottom: 14px
    }

    .compat-block p {
      margin: 10px 0;
      font-size: 14px;
      color: var(--muted);
      line-height: 1.7
    }

    .compat-block .compat-contact {
      margin-top: 16px;
      font-weight: 600;
      color: var(--warn)
    }

    body.compat-blocked .wrap {
      display: none
    }

    /* 行编辑模态框 */
    .modal-mask {
      position: fixed;
      inset: 0;
      z-index: 90;
      background: rgba(15, 23, 42, .45);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px
    }

    .modal {
      background: var(--panel);
      border-radius: var(--radius);
      box-shadow: 0 10px 30px rgba(15, 23, 42, .35);
      max-width: 660px;
      width: 100%;
      max-height: 80vh;
      overflow: auto;
      overscroll-behavior: contain;
      padding: 18px 20px
    }

    .modal h3 {
      font-size: 15px;
      margin-bottom: 12px
    }

    .modal .modal-sub {
      font-size: 12px;
      color: var(--muted);
      font-weight: 400
    }

    .editor-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .editor-field {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .editor-field label {
      font-size: 12px
    }

    .editor-field input {
      width: 100%;
      font-size: 13px
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 16px
    }

    /* 删除按钮靠左，其余按钮靠右 */
    .modal-actions .btn.danger {
      margin-right: auto
    }

    /* 确认弹窗 */
    .modal-sm {
      max-width: 420px
    }

    .modal .confirm-msg {
      font-size: 14px;
      color: var(--text);
      line-height: 1.7;
      margin: 4px 0 8px
    }

    /* 编辑面板只读字段 */
    .editor-field input[readonly] {
      background: #f1f5f9;
      color: var(--muted);
      cursor: not-allowed
    }

    /* 批量修改 */
    .modal-batch {
      max-width: 720px
    }

    .batch-group-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 48vh;
      overflow: auto
    }

    .batch-group-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      text-align: left;
      width: 100%;
      background: var(--panel);
      font-size: 13px;
      line-height: 1.5
    }

    .batch-group-item:hover {
      border-color: var(--primary);
      background: var(--primary-soft)
    }

    .batch-group-item .g-top {
      display: flex;
      align-items: baseline;
      gap: 10px
    }

    .batch-group-item .g-name {
      font-weight: 600;
      flex-shrink: 0
    }

    .batch-group-item .g-type {
      color: var(--muted)
    }

    .batch-group-item .g-count {
      margin-left: auto;
      flex-shrink: 0;
      font-weight: 600;
      color: var(--primary)
    }

    .batch-group-item .g-err {
      color: var(--text);
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .batch-group-item .g-rows {
      color: var(--muted);
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .batch-info {
      font-size: 12px;
      color: var(--muted);
      background: var(--primary-soft);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 10px;
      margin-bottom: 10px;
      line-height: 1.6
    }

    .batch-quick {
      margin-top: 12px;
      padding: 10px 12px;
      border: 1px dashed var(--warn);
      border-radius: 8px;
      background: #fffbeb
    }

    .batch-quick-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--warn);
      margin-bottom: 6px
    }

    .batch-quick-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px
    }

    .batch-quick-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px
    }

    .batch-quick-item .bq-label {
      font-weight: 600
    }

    .batch-field-group-title {
      grid-column: 1 / -1;
      font-size: 12px;
      font-weight: 600;
      color: var(--primary);
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed var(--border)
    }

    .batch-field-group-title.judge {
      color: var(--warn)
    }

    /* 已暂存修改的行 */
    tbody tr.fixed-row {
      background: #f0fdf4
    }

    tbody tr.fixed-row:nth-child(even) {
      background: #e9faf0
    }

    /* 已标记删除的行 */
    tbody tr.deleted-row {
      background: #fef2f2;
      opacity: .8
    }

    tbody tr.deleted-row:nth-child(even) {
      background: #fdeaea
    }

    .loading-mask {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .45);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 99;
      flex-direction: column;
      gap: 10px;
      color: #fff
    }

    .loading-mask.show {
      display: flex
    }

    .spinner {
      width: 42px;
      height: 42px;
      border: 4px solid rgba(255, 255, 255, .3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 1s linear infinite
    }

    .mask-progress {
      width: 340px;
      max-width: 80vw;
      margin-top: 6px
    }

    .mask-progress-bar {
      height: 12px;
      background: rgba(255, 255, 255, .25);
      border-radius: 6px;
      overflow: hidden
    }

    .mask-progress-bar>i {
      display: block;
      height: 100%;
      width: 0;
      background: #fff;
      border-radius: 6px;
      transition: width .2s
    }

    .mask-pct {
      margin-top: 8px;
      font-size: 20px;
      font-weight: 700;
      letter-spacing: .5px;
      text-align: center
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .note {
      font-size: 12px;
      color: var(--muted);
      margin-top: 6px;
      line-height: 1.6
    }

    .note code {
      background: #f1f5f9;
      padding: 1px 5px;
      border-radius: 4px
    }

    details {
      margin-top: 6px
    }

    summary {
      cursor: pointer;
      color: var(--primary);
      font-size: 13px
    }

    .err-cat {
      font-size: 13px;
      color: var(--muted);
      margin: 8px 0
    }

    .err-cat b {
      color: var(--text)
    }
    /* 尊重系统减少动态效果设置 */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
      }
    }