/* ============================================================
   内网 Excel 图片数据整理工具 —— 样式
   设计令牌沿用仓库既有工具（浅色为默认，深色仅覆盖颜色令牌）
   ============================================================ */

:root{
  --bg:#fafafa;
  --card:#ffffff;
  --border:#ececec;
  --primary:#4f46e5;
  --primary-hover:#4338ca;
  --primary-soft:#eef2ff;
  --text:#18181b;
  --text-2:#71717a;
  --text-3:#a1a1aa;
  --success:#16a34a; --success-bg:#f0fdf4; --success-border:#bbf7d0; --success-text:#166534;
  --danger:#dc2626;  --danger-bg:#fef2f2;  --danger-border:#fecaca;  --danger-text:#991b1b;
  --info:#2563eb;    --info-bg:#eff6ff;    --info-border:#bfdbfe;    --info-text:#1e40af;
  --warn:#d97706;    --warn-bg:#fffbeb;    --warn-border:#fde68a;    --warn-text:#92400e;
  --r-card:16px; --r-btn:10px; --r-input:10px; --r-icon:12px; --r-chip:999px;
  --sh-card:0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
  --sh-card-hover:0 2px 4px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --sh-btn:0 1px 2px rgba(79,70,229,.3);
  --sh-btn-hover:0 4px 12px rgba(79,70,229,.35);
  --sh-seg:0 1px 3px rgba(0,0,0,.08);
  --bg-grid:rgba(0,0,0,.018);
  --surface-2:#f4f4f5;
  --surface-3:#fafafa;
  --surface-hover:#f5f5ff;
  --surface-file:#f8f8ff;
  --border-2:#e4e4e7;
  --border-3:#d4d4d8;
  --border-file:#e4e4f0;
  --on-primary:#ffffff;
  --disabled-bg:#c7c7d1;
  --danger-soft:#fee2e2;
  --row-selected:#eef2ff;
  --row-hover:#f8f8fb;
  --head-bg:#f7f7f9;
  --focus-ring:rgba(79,70,229,.25);
  --focus-ring-soft:rgba(79,70,229,.12);
  --overlay:rgba(255,255,255,.45);
  --row-selected-strong:rgba(79,70,229,.10);  /* 拖选经过的行 */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:200ms;
}

html[data-theme="dark"]{
  --bg:#0f1115;
  --card:#171a21;
  --border:#262b35;
  --primary:#818cf8;
  --primary-hover:#a5b4fc;
  --primary-soft:#232a45;
  --text:#e8eaf0;
  --text-2:#a3aab8;
  --text-3:#7c8494;
  --success:#4ade80; --success-bg:#12271b; --success-border:#1f4d33; --success-text:#86efac;
  --danger:#f87171;  --danger-bg:#2a1618;  --danger-border:#5b2628;  --danger-text:#fca5a5;
  --info:#60a5fa;    --info-bg:#132234;    --info-border:#1e3a5f;    --info-text:#93c5fd;
  --warn:#fbbf24;    --warn-bg:#2a2113;    --warn-border:#5b4520;    --warn-text:#fcd34d;
  --sh-card:0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.35);
  --sh-card-hover:0 2px 6px rgba(0,0,0,.55), 0 10px 28px rgba(0,0,0,.45);
  --sh-btn:0 1px 2px rgba(0,0,0,.4);
  --sh-btn-hover:0 6px 18px rgba(129,140,248,.28);
  --sh-seg:0 1px 3px rgba(0,0,0,.5);
  --bg-grid:rgba(255,255,255,.028);
  --surface-2:#20242e;
  --surface-3:#1b1f27;
  --surface-hover:#232a45;
  --surface-file:#1c2130;
  --border-2:#2c323d;
  --border-3:#39404d;
  --border-file:#2c3446;
  --on-primary:#101322;
  --disabled-bg:#3a4150;
  --danger-soft:#3a1c1f;
  --row-selected:#232a45;
  --row-hover:#1d2230;
  --head-bg:#1b1f27;
  --focus-ring:rgba(129,140,248,.45);
  --focus-ring-soft:rgba(129,140,248,.18);
  --overlay:rgba(255,255,255,.22);
  --row-selected-strong:rgba(129,140,248,.22);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background-color:var(--bg);
  background-image:linear-gradient(var(--bg-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);
  background-size:24px 24px;
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}
.hidden{display:none !important}

.app{max-width:1600px;margin:0 auto;padding:24px 20px 40px}

/* ============ 顶部标题栏 ============ */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
        margin-bottom:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-icon{width:32px;height:32px;border-radius:var(--r-icon);background:var(--primary-soft);
            display:flex;align-items:center;justify-content:center;color:var(--primary);flex:none}
.brand-title{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-chip);
       background:var(--surface-2);color:var(--text-2);font-size:12px;font-weight:500;white-space:nowrap}
.topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ============ 按钮 ============ */
.primary-btn, .ghost-btn, .danger-btn{
  height:34px;padding:0 14px;border-radius:var(--r-btn);font-size:13px;font-weight:500;
  font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.primary-btn{border:none;background:var(--primary);color:var(--on-primary);box-shadow:var(--sh-btn)}
.primary-btn:hover:not(:disabled){background:var(--primary-hover);box-shadow:var(--sh-btn-hover);transform:translateY(-1px)}
.ghost-btn{border:1px solid var(--border-2);background:var(--card);color:var(--text-2);text-decoration:none}
.ghost-btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.danger-btn{border:1px solid var(--danger-border);background:var(--danger-bg);color:var(--danger)}
.danger-btn:hover:not(:disabled){background:var(--danger-soft)}
.primary-btn:active:not(:disabled),.ghost-btn:active:not(:disabled),.danger-btn:active:not(:disabled){transform:scale(.97)}
.primary-btn:disabled,.ghost-btn:disabled,.danger-btn:disabled{
  background:var(--surface-2);border-color:var(--border);color:var(--text-3);
  box-shadow:none;cursor:not-allowed}
.icon-btn{width:28px;height:28px;border-radius:var(--r-chip);border:none;background:var(--card);
          color:var(--text-3);display:flex;align-items:center;justify-content:center;cursor:pointer;
          flex:none;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.icon-btn:hover{background:var(--danger-soft);color:var(--danger)}

/* ============ 主题 / 密度按钮图标切换 ============ */
#themeBtn .i-sun{display:none}
html[data-theme="dark"] #themeBtn .i-sun{display:flex}
html[data-theme="dark"] #themeBtn .i-moon{display:none}

/* ============ 卡片 ============ */
.stack{display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);
      padding:18px 20px;box-shadow:var(--sh-card)}
.card-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.step{width:22px;height:22px;border-radius:var(--r-chip);background:var(--primary-soft);
      color:var(--primary);font-size:12px;font-weight:600;display:flex;align-items:center;
      justify-content:center;flex:none}
.card-title{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}

/* ============ 上传区 ============ */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
          padding:26px 20px;border:2px dashed var(--border-3);border-radius:14px;background:var(--surface-3);
          cursor:pointer;text-align:center;
          transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.dropzone:hover{border-color:var(--primary);background:var(--surface-hover)}
.dropzone.drag{border-style:solid;border-color:var(--primary);background:var(--primary-soft)}
.dz-icon{width:44px;height:44px;border-radius:var(--r-icon);background:var(--primary-soft);
         color:var(--primary);display:flex;align-items:center;justify-content:center}
.dz-main{font-size:14px;font-weight:500}
.dz-sub{font-size:12.5px;color:var(--text-3)}

.file-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;margin-top:14px;
           background:var(--surface-file);border:1px solid var(--border-file)}
.file-card .fc-icon{color:var(--primary);display:flex;flex:none}
.fc-meta{min-width:0;flex:1}
.fc-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-size{font-size:12px;color:var(--text-3)}

/* ============ 工作表 / 图片列选择 ============ */
.picker-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px;
            padding-top:14px;border-top:1px dashed var(--border-2)}
.picker{display:flex;align-items:center;gap:8px}
.picker-label{font-size:12.5px;color:var(--text-2);white-space:nowrap}
.picker-note{font-size:12.5px;color:var(--text-3)}
.picker-note.warn{color:var(--warn-text)}

select,.search-input,input[type="search"]{
  height:34px;border:1px solid var(--border-2);border-radius:var(--r-input);background:var(--card);
  color:var(--text);font-size:13px;font-family:inherit;padding:0 10px;cursor:pointer;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
select:focus,.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring-soft)}
.select-sm{max-width:180px}

/* ============ 工具栏 ============ */
.toolbar-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar-row + .toolbar-row{margin-top:10px}
.search-input{flex:1 1 260px;min-width:180px;cursor:text;padding:0 12px}
.divider{width:1px;height:20px;background:var(--border-2);flex:none;margin:0 2px}
.toolbar-spacer{flex:1 1 auto}

/* ============ 统计栏 ============ */
.stats{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;background:var(--card);
       border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-card)}
.stat{display:inline-flex;align-items:baseline;gap:6px;padding:3px 10px;border-radius:var(--r-chip);
      background:var(--surface-2);font-size:12.5px;color:var(--text-2)}
.stat b{font-size:13.5px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.stat.ok b{color:var(--success)}
.stat.bad b{color:var(--danger)}
.stat.acc b{color:var(--primary)}

/* ============ 表格 ============ */
.table-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);
            box-shadow:var(--sh-card);overflow:hidden}
.table-scroll{overflow:auto;max-height:calc(100vh - 340px);min-height:220px;position:relative}
.table-inner{min-width:max-content}

.tr{display:flex;align-items:stretch;border-bottom:1px solid var(--border)}
.thead{position:sticky;top:0;z-index:3;background:var(--head-bg);box-shadow:0 1px 0 var(--border)}
.thead .tr{border-bottom:none}
.th{display:flex;align-items:center;gap:6px;padding:0 10px;height:42px;font-size:12.5px;font-weight:600;
    color:var(--text-2);border-right:1px solid var(--border);white-space:nowrap;overflow:hidden}
.th.img-col{color:var(--primary)}
.th-resize{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:2}
.th{cursor:default}
.th .th-text{overflow:hidden;text-overflow:ellipsis}

.td{padding:0 10px;font-size:13px;border-right:1px solid var(--border);overflow:hidden;
    display:flex;align-items:center;min-width:0;
    /* 整行可点选：单元格不参与文本选择，避免拖拽拉选时被浏览器文本选区打断 */
    user-select:none;-webkit-user-select:none}
.tbody .tr{height:72px;transition:background-color 120ms var(--ease);cursor:pointer}
.tbody .tr:hover{background:var(--row-hover)}
.tbody .tr.selected{background:var(--row-selected)}
/* 拉选经过但未纳入的行，给出即时反馈 */
.tbody .tr.drag-pass{background:var(--row-selected-strong)}
.tbody .tr.drag-pass .row-check{border-color:var(--primary)}
/* 表格容器内统一显示默认光标，勾选语义由行高亮表达 */
.table-scroll.dragging,.table-scroll.dragging .tr{cursor:default}
.table-scroll.dragging .row-check{cursor:default}
.cell-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;
           font-variant-numeric:tabular-nums}
.cell-text.wrap{white-space:normal;word-break:break-all}

/* 固定列：复选框 / 序号 */
.col-check{width:44px;flex:none;justify-content:center;padding:0}
.col-index{width:64px;flex:none;color:var(--text-3);font-size:12.5px;
           font-variant-numeric:tabular-nums;justify-content:flex-end}
.row-check{appearance:none;-webkit-appearance:none;width:17px;height:17px;border-radius:5px;
           border:1.5px solid var(--border-3);background:var(--card);cursor:pointer;flex:none;
           display:grid;place-content:center;margin:0;
           transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.row-check::after{content:"";width:9px;height:5px;border-left:2px solid var(--on-primary);
                  border-bottom:2px solid var(--on-primary);transform:rotate(-45deg) translateY(-1px) scale(0);
                  transition:transform var(--dur) var(--ease)}
.row-check:checked{background:var(--primary);border-color:var(--primary)}
.row-check:checked::after{transform:rotate(-45deg) translateY(-1px) scale(1)}
.row-check.indet{background:var(--primary);border-color:var(--primary)}
.row-check.indet::after{width:9px;height:0;border-left:none;border-bottom:2px solid var(--on-primary);
                        transform:rotate(0) translateY(-1px) scale(1)}

/* 图片单元格 */
.img-cell{display:flex;align-items:center;gap:6px;overflow:hidden;width:100%}
.thumb{width:56px;height:56px;flex:none;border-radius:8px;border:1px solid var(--border-2);
       background:var(--surface-2);display:flex;align-items:center;justify-content:center;
       cursor:pointer;overflow:hidden;position:relative;color:var(--text-3);font-size:11px}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.failed{border-color:var(--danger-border);background:var(--danger-bg);color:var(--danger);
              cursor:default}
.thumb.loading{background:var(--surface-2)}
.thumb.loading::after{content:"";width:16px;height:16px;border:2px solid var(--border-3);
                      border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}
/* 悬停放大浮层：不占布局、不参与命中测试，纯预览 */
.hover-zoom{position:fixed;z-index:45;pointer-events:none;padding:6px;border-radius:12px;
            background:var(--card);border:1px solid var(--border-2);box-shadow:var(--sh-card-hover);
            animation:fadeIn 140ms var(--ease)}
.hover-zoom img{display:block;width:auto;height:auto;max-width:var(--zoom-max-w,420px);
                max-height:var(--zoom-max-h,420px);border-radius:8px;object-fit:contain;
                background:var(--surface-2)}
.hover-zoom .zoom-msg{display:block;padding:18px 22px;font-size:12.5px;color:var(--text-3)}

.toolbar-tip{font-size:12.5px;color:var(--text-3)}
.export-picker{align-items:center}
.export-picker select{max-width:200px}

.thumb-more{font-size:11px;color:var(--text-3);flex:none;padding:6px 8px;border-radius:var(--r-chip);
            background:var(--surface-2);cursor:pointer;white-space:nowrap}
.thumb-more:hover{color:var(--primary)}
.cell-empty{font-size:11.5px;color:var(--text-3)}
@keyframes spin{to{transform:rotate(360deg)}}

.table-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
            padding:8px 14px;border-top:1px solid var(--border);background:var(--surface-3);
            font-size:12.5px;color:var(--text-3)}

/* ============ 空状态 ============ */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
             padding:48px 20px;border:1px dashed var(--border-3);border-radius:var(--r-card);
             color:var(--text-3);text-align:center;background:var(--card)}
.empty-main{margin:8px 0 0;font-size:14px;font-weight:500;color:var(--text-2)}
.empty-sub{margin:0;font-size:12.5px}

.foot-note{max-width:900px;margin:20px auto 0;font-size:12px;color:var(--text-3);text-align:center;line-height:1.8}

/* ============ 弹窗 ============ */
.modal-mask{position:fixed;inset:0;background:rgba(15,17,21,.5);z-index:50;
            display:flex;align-items:center;justify-content:center;padding:24px;
            animation:fadeIn 160ms var(--ease)}
.modal{background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);
       box-shadow:var(--sh-card-hover);display:flex;flex-direction:column;max-height:100%;
       animation:popIn 180ms var(--ease)}
.preview-modal{width:min(920px,100%)}
.confirm-modal{width:min(420px,100%)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
            padding:14px 18px;border-bottom:1px solid var(--border)}
.modal-title{margin:0;font-size:15px;font-weight:600}
.confirm-body{padding:18px;font-size:13.5px;color:var(--text-2);line-height:1.8}
.confirm-body b{color:var(--text)}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;
            border-top:1px solid var(--border)}

.preview-body{display:flex;flex-direction:column;min-height:0}
.preview-stage{background:var(--surface-2);display:flex;align-items:center;justify-content:center;
               min-height:220px;max-height:62vh;overflow:auto;padding:12px}
.preview-stage img{max-width:100%;max-height:58vh;display:block;object-fit:contain}
.preview-stage .stage-msg{font-size:13px;color:var(--text-3)}
.preview-meta{padding:12px 18px 16px;display:flex;flex-direction:column;gap:10px}
.preview-url{font-size:12px;color:var(--text-2);word-break:break-all;max-height:60px;overflow:auto;
             background:var(--surface-2);border-radius:8px;padding:8px 10px}
.preview-actions{display:flex;gap:8px;flex-wrap:wrap}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* ============ 加载遮罩 ============ */
.busy-mask{position:fixed;inset:0;background:rgba(15,17,21,.35);z-index:60;
           display:flex;align-items:center;justify-content:center}
.busy-box{display:flex;align-items:center;gap:12px;padding:16px 22px;border-radius:12px;
          background:var(--card);box-shadow:var(--sh-card-hover);font-size:13.5px}
.spinner{width:18px;height:18px;border:2px solid var(--border-3);border-top-color:var(--primary);
         border-radius:50%;animation:spin .7s linear infinite;flex:none}
.busy-text{color:var(--text-2)}

/* ============ Toast ============ */
.toast-wrap{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:80;
            display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-chip);
       background:var(--card);border:1px solid var(--border-2);box-shadow:var(--sh-card-hover);
       font-size:13px;color:var(--text);max-width:min(560px,92vw);
       animation:toastIn 200ms var(--ease)}
.toast.success{border-color:var(--success-border);background:var(--success-bg);color:var(--success-text)}
.toast.error{border-color:var(--danger-border);background:var(--danger-bg);color:var(--danger-text)}
.toast.info{border-color:var(--info-border);background:var(--info-bg);color:var(--info-text)}
.toast.warn{border-color:var(--warn-border);background:var(--warn-bg);color:var(--warn-text)}
.toast.leaving{opacity:0;transform:translateY(-6px);transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ============ 紧凑模式 ============ */
body[data-density="compact"] .tbody .tr{height:76px}
body[data-density="comfortable"] .tbody .tr{height:96px}
body[data-density="compact"] .thumb{width:56px;height:56px}
body[data-density="comfortable"] .thumb{width:74px;height:74px}

/* ============ 响应式 ============ */
@media (max-width:900px){
  .app{padding:16px 12px 32px}
  .brand-title{font-size:16px}
  .badge{display:none}
  .table-scroll{max-height:60vh}
}