/* ===================== 盘车盘点工具 · 样式（移动端优先 / 浅色主题） ===================== */
:root{
  --bg:#f5f6f8; --card:#ffffff; --ink:#1f2533; --muted:#6b7280; --line:#e6e8ec;
  --brand:#2b6cff;
  --high:#e34d59; --high-bg:#fdecee;
  --mid:#ff9f40;  --mid-bg:#fff4e6;
  --low:#3b82f6;  --low-bg:#eaf2ff;
  --radius:14px; --shadow:0 2px 10px rgba(20,30,60,.06);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5; font-size:15px;
}

/* 顶栏 */
.topbar{padding:16px 18px; background:#fff; border-bottom:1px solid var(--line);}
.brand{font-size:19px; font-weight:700;}
.sub{font-size:13px; color:var(--muted); margin-top:2px;}

/* 上传区 */
.upload-wrap{max-width:920px; margin:18px auto 0; padding:0 14px; position:relative;}
.upload-inner{
  display:block;
  border:2px dashed var(--line); border-radius:var(--radius); background:#fff;
  padding:34px 18px; text-align:center; cursor:pointer; transition:.15s; position:relative; z-index:1;
}
/* 透明文件 input 覆盖整块上传区——最可靠的跨浏览器方案 */
#fileInput{
  position:absolute; top:0; left:14px; right:14px; bottom:0; opacity:0; cursor:pointer; z-index:2;
  font-size:0; /* 避免部分浏览器渲染微小文字 */
}
.upload-wrap:hover .upload-inner{border-color:var(--brand);}
#drop.over .upload-inner{border-color:var(--brand); background:var(--low-bg);}
.upload-icon{font-size:34px;}
.upload-text{font-weight:600; margin-top:6px;}
.upload-hint{font-size:12px; color:var(--muted); margin-top:6px;}
.file-meta{font-size:13px; color:var(--brand); margin-top:10px; text-align:center;}
.parse-err{font-size:13px; color:var(--high); margin-top:8px; text-align:center; white-space:pre-wrap;}

/* 筛选栏 */
.filter-bar{max-width:920px; margin:14px auto 0; padding:14px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); display:none;}
.filter-bar.show{display:block;}
.filter-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.filter-grid label{display:flex; flex-direction:column; font-size:12px; color:var(--muted);}
.filter-grid input{
  margin-top:4px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; font-size:14px; color:var(--ink);
}
.reset{margin-top:12px; padding:8px 16px; border:1px solid var(--line); background:#fff; border-radius:9px; cursor:pointer; color:var(--muted);}
.reset:hover{border-color:var(--brand); color:var(--brand);}

/* 结果区 */
#resultArea{max-width:920px; margin:14px auto 40px; padding:0 14px;}
.view-empty{color:var(--muted); text-align:center; padding:30px 0;}

/* 性价比分布条 */
.cp-bar{display:flex; align-items:center; gap:0; background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin-bottom:14px; flex-wrap:wrap; overflow:hidden;}
.cp-bar-title{font-size:11px; font-weight:600; color:var(--muted); margin-right:8px; white-space:nowrap;}
.cp-seg{height:26px; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; font-weight:600; min-width:28px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:.15s;}
.cp-seg:first-of-type{border-radius:6px 0 0 6px;}
.cp-seg:last-of-type{border-radius:0 6px 6px 0;}
.cp-ratio{margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap; padding-left:10px;}
.cp-ratio b{color:var(--ink);}

/* 截面统计 */
.summary-head{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px;}
.stat{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center;}
.stat b{display:block; font-size:20px; color:var(--brand);}
.stat span{font-size:11px; color:var(--muted);}

/* 卡片网格 */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.card{
  text-align:left; background:var(--card); border:1px solid var(--line); border-left-width:5px;
  border-radius:var(--radius); padding:14px; cursor:pointer; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:8px; font:inherit; color:var(--ink); transition:.15s;
}
.card:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(20,30,60,.1);}
.card.is-empty{opacity:.45; cursor:default; filter:grayscale(.4);}
.card.sev-high{border-left-color:var(--high);}
.card.sev-mid{border-left-color:var(--mid);}
.card.sev-low{border-left-color:var(--low);}
.card-top{display:flex; justify-content:space-between; align-items:center; font-size:11px;}
.card-title{font-weight:700; font-size:15px;}
.card-count{font-size:26px; font-weight:800; line-height:1;}
.card-count .unit{font-size:13px; font-weight:500; color:var(--muted); margin-left:3px;}
.card-foot{display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-top:2px;}
.def-btn{color:var(--brand); cursor:pointer;}
.go{color:var(--muted);}

.sev-tag-high{background:var(--high-bg); color:var(--high); padding:2px 8px; border-radius:20px; font-weight:600;}
.sev-tag-mid{background:var(--mid-bg); color:#c9740b; padding:2px 8px; border-radius:20px; font-weight:600;}
.sev-tag-low{background:var(--low-bg); color:var(--low); padding:2px 8px; border-radius:20px; font-weight:600;}
.grp{color:var(--muted);}

/* 下钻页 */
.detail-head{margin-bottom:12px;}
.back{background:none; border:none; color:var(--brand); font-size:14px; cursor:pointer; padding:0;}
.detail-title{font-size:18px; font-weight:700; margin:8px 0 4px; display:flex; align-items:center; gap:8px;}
.detail-sub{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:10px;}
.export{margin-left:auto; padding:6px 12px; border:1px solid var(--line); background:#fff; border-radius:9px; cursor:pointer;}
.export:hover{border-color:var(--brand); color:var(--brand);}

.table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:12px; background:#fff;
  position:relative;
}
.table-wrap::after{ /* 滑动提示阴影 */
  content:""; position:absolute; top:0; right:0; width:18px; height:100%; pointer-events:none;
  background:linear-gradient(to left, rgba(0,0,0,.08), transparent);
}
.detail-table{border-collapse:collapse; width:max-content; min-width:100%; font-size:13px;}
.detail-table th, .detail-table td{
  border-bottom:1px solid var(--line); padding:9px 12px; white-space:nowrap; text-align:left;
}
.detail-table th{background:#fafbfc; position:sticky; top:0; font-weight:600; color:#374151;}
.detail-table tbody tr:nth-child(even){background:#fcfcfd;}
.detail-table tbody tr:hover{background:var(--low-bg);}

/* 定义浮层 */
.overlay{position:fixed; inset:0; background:rgba(20,30,60,.4); display:none; align-items:center; justify-content:center; padding:20px; z-index:50;}
.overlay.show{display:flex;}
.modal{background:#fff; border-radius:16px; padding:22px; max-width:420px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,.2);}
.modal-title{font-size:18px; font-weight:700; display:flex; align-items:center; gap:8px;}
.modal-def{margin:12px 0; font-size:14px; color:#374151; line-height:1.7;}
.modal-meta{font-size:12px; color:var(--muted); margin-bottom:16px;}
.modal-close{width:100%; padding:10px; background:var(--brand); color:#fff; border:none; border-radius:10px; font-size:15px; cursor:pointer;}

/* 加载进度遮罩 */
.loading-overlay{position:fixed; inset:0; background:rgba(255,255,255,.85); display:none; align-items:center; justify-content:center; padding:20px; z-index:60;}
.loading-overlay.show{display:flex;}
.loading-box{text-align:center; max-width:320px; width:100%;}
.loading-bar-wrap{height:6px; background:#e6e8ec; border-radius:3px; overflow:hidden; margin-bottom:14px;}
.loading-bar{height:100%; width:30%; background:linear-gradient(90deg, var(--brand), #5b9cf5, var(--brand)); background-size:200% 100%; border-radius:3px; animation:loadingSlide 1.2s ease-in-out infinite;}
@keyframes loadingSlide{0%{transform:translateX(-100%);}100%{transform:translateX(430%);}}
.loading-text{font-size:16px; font-weight:600; color:var(--ink);}
.loading-sub{font-size:13px; color:var(--muted); margin-top:6px;}

/* ===================== 响应式：平板 ===================== */
@media (max-width:860px){
  .cards{grid-template-columns:repeat(2,1fr);}
}
/* ===================== 响应式：手机 ===================== */
@media (max-width:560px){
  body{font-size:14px;}
  .filter-grid{grid-template-columns:repeat(2,1fr);}
  .summary-head{grid-template-columns:repeat(2,1fr);}
  .cards{grid-template-columns:1fr;}
  .card-count{font-size:24px;}
  .detail-title{font-size:16px;}
  .cp-bar{gap:4px; padding:6px 10px;}
  .cp-ratio{width:100%; padding-left:0; margin-top:4px; text-align:right;}
  .cp-seg{font-size:10px; height:22px; min-width:22px;}
}