:root{--bg:#0b0f14;--fg:#e6eef8;--muted:#a9b1bb;--card:#111720;--accent:#7aa2f7;--ok:#10b981;--warn:#f59e0b;--err:#ef4444;--border:#1e293b}
*{box-sizing:border-box}
html,body{height:100%; overflow:hidden}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial}
.wrap{max-width:1600px;margin:24px auto;padding:0 16px; height:100vh; display:flex; flex-direction:column}
h1{font-size:20px;margin:0 0 12px}
.layout{display:grid;grid-template-columns:340px 1fr 320px;gap:16px; flex:1; min-height:0}

.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.card h2{margin:0 0 8px;font-size:16px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0 4px}
.hint{color:var(--muted);font-size:12px}
.dropzone{border:2px dashed #334155;border-radius:14px;padding:16px;text-align:center;color:var(--muted)}
.dropzone.drag{border-color:var(--accent);color:var(--fg)}
canvas{width:100%;height:auto;background:#0a0a0a;border-radius:12px;border:1px solid var(--border)}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;background:#0e1726;border:1px solid var(--border);padding:2px 6px;border-radius:6px}
.pill{padding:4px 8px;border:1px solid var(--border);border-radius:999px;background:#0f172a}
.btn{border:1px solid var(--border);background:#0f172a;color:var(--fg);padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:hover{border-color:#2b3a55}
input[type="number"],input[type="file"],input[type="range"],label.switch{border:1px solid var(--border);background:#0f172a;color:var(--fg);padding:8px 10px;border-radius:10px}
input[type="range"]{padding:0}

/* 左侧色表 */
.sidebar{display:flex; flex-direction:column; overflow:hidden; min-height:0;max-height:95%;}
.sidebar .controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.paletteList{display:flex;flex-direction:column;gap:8px; overflow:auto; flex:1 1 auto; min-height:0;
  scrollbar-width: thin; scrollbar-color: rgba(122,162,247,.7) rgba(30,41,59,.6);
}
.paletteList::-webkit-scrollbar{width:10px}
.paletteList::-webkit-scrollbar-track{background:rgba(30,41,59,.6); border-radius:10px}
.paletteList::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(122,162,247,.95), rgba(122,162,247,.55)); border-radius:10px; border:2px solid rgba(30,41,59,.6)}
.paletteList::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg, rgba(122,162,247,1), rgba(122,162,247,.7))}

.swatch{border:1px solid var(--border);border-radius:10px;padding:6px; transition:background .15s ease,border-color .15s ease}
.swatch.enabled{background:rgba(16,185,129,.12);border-color:#134e4a}
.swatch.disabled{background:rgba(239,68,68,.12);border-color:#7f1d1d}
details summary{list-style:none;cursor:pointer}
details summary::-webkit-details-marker{display:none}
.sumrow{display:flex;align-items:center;gap:10px}
.chip{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.15);flex:0 0 auto}
.title{display:flex;gap:8px;align-items:baseline}
.title strong{font-weight:600}
.badge{margin-left:auto;color:#a1a1aa;font-size:12px}
.blocklist{margin-top:8px}
.tag{display:inline-block;padding:2px 6px;border-radius:6px;background:#12233a;border:1px solid #213148;margin-right:6px;margin-top:6px;font-size:12px}
.legend{display:flex;gap:8px;margin-top:6px}
.legend .dot{width:10px;height:10px;border-radius:50%}
.legend .on{background:#10b981}
.legend .off{background:#ef4444}

/* 中间主区 */
.main{overflow:auto; min-height:0; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.7) rgba(30,41,59,.6)}
.main::-webkit-scrollbar{width:12px}
.main::-webkit-scrollbar-track{background:rgba(30,41,59,.6); border-radius:10px}
.main::-webkit-scrollbar-thumb{background:rgba(148,163,184,.85); border-radius:10px; border:2px solid rgba(30,41,59,.6)}
.main::-webkit-scrollbar-thumb:hover{background:rgba(203,213,225,.95)}

/* 右侧统计 */
.rsidebar{display:flex; flex-direction:column; overflow:hidden; min-height:0;max-height:95%}
.rsidebar .statsHeader{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 6px}
#stats{flex:1 1 auto; overflow:auto; min-height:0; display:flex; flex-direction:column; gap:8px;
  scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.7) rgba(30,41,59,.6);
}
#stats::-webkit-scrollbar{width:10px}
#stats::-webkit-scrollbar-track{background:rgba(30,41,59,.6); border-radius:10px}
#stats::-webkit-scrollbar-thumb{background:rgba(148,163,184,.85); border-radius:10px; border:2px solid rgba(30,41,59,.6)}
#stats::-webkit-scrollbar-thumb:hover{background:rgba(203,213,225,.95)}

.footer{margin-top:16px;color:var(--muted)}

/* 方块缩略图 */
.blockgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:8px}
.blockcard{display:flex;gap:8px;align-items:center;padding:6px;border:1px solid var(--border);border-radius:10px;background:#0f172a;cursor:pointer; position:relative}
.blockcard.selected{background:rgba(122,162,247,0.15); border-color:var(--accent)}
.blockcard:hover{background:rgba(122,162,247,0.1); border-color:var(--accent)}
.bthumb{width:34px;height:34px;border-radius:8px;background:#0b1220;border:1px solid #213148;display:flex;align-items:center;justify-content:center;overflow:hidden; flex-shrink:0; pointer-events:none}
.bthumb img{max-width:100%;max-height:100%;image-rendering:pixelated; pointer-events:none}
.bmeta{min-width:0; pointer-events:none}
.bname{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e5e7eb}
.bid{font-size:11px;color:#94a3b8}

/* 统计样式 */
.statsList{display:flex;flex-direction:column;gap:8px}
.statRow{display:grid;grid-template-columns:8% 10% 50% 20%;gap:8px;align-items:center}
.statChip{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.15)}
.barWrap{height:8px;background:#0f172a;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.bar{height:100%;background:linear-gradient(90deg, var(--accent), rgba(122,162,247,.5))}

/* 预测样式 */
.sep{border:none;border-top:1px solid var(--border);margin:10px 0}
.predictList{display:flex;flex-direction:column;gap:8px}
.predictRow{display:grid;grid-template-columns:28px 1fr 92px;gap:8px;align-items:center}
.predictChip{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.15)}

/* 移动端降级 */
@media (max-width: 1100px){
  html, body{overflow:auto}
  .wrap{height:auto}
  .layout{grid-template-columns:1fr}
}

/* 导出模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 15, 20, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-content {
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.modal-header h2 {
  margin: 0;
}
.modal-close {
  padding: 4px 10px;
}
.modal-body {
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-right: 10px; /* for scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(30,41,59,.6);
}
.modal-body::-webkit-scrollbar{width:8px}
.modal-body::-webkit-scrollbar-track{background:rgba(30,41,59,.6); border-radius:10px}
.modal-body::-webkit-scrollbar-thumb{background:var(--accent); border-radius:10px}

.modal-footer {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
#exportStats ul {
  padding-left: 18px;
  margin: 0;
  font-size: 13px;
  color: var(--fg);
}
#exportStats li {
  margin-bottom: 4px;
}

@media(max-width: 700px) {
  .modal-body {
    grid-template-columns: 1fr;
  }
}