body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial; background:#f5f6f8; }
.container { max-width: 920px; margin: 20px auto; padding: 0 12px; }
h1 { font-size: 20px; color:#222; }
.title-art {
  text-align:center;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #1f2a44;
  text-shadow:
    0 1px 0 #fff,
    0 2px 0 #dfe6f9,
    0 3px 0 #c6d4f6,
    0 4px 0 #adc2f3,
    0 6px 8px rgba(79,124,255,.35);
}
@media (max-width: 640px){ .title-art { font-size: 28px; } }
.card { background:#fff; border-radius:12px; padding:12px; box-shadow:0 4px 14px rgba(0,0,0,.08); }
.row { display:flex; align-items:center; gap:10px; margin:8px 0; }
label { width:82px; color:#333; }
select, input[type=file], button { flex:1; padding:8px 10px; border:1px solid #e2e5ea; border-radius:8px; }
button { background:#4f7cff; color:#fff; border:none; cursor:pointer; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:16px; }
.item { background:#fff; border-radius:12px; padding:12px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.item img { width:100%; border-radius:8px; display:block; }
.dl { margin-top:8px; }
.dl a, .back { color:#4f7cff; text-decoration:none; }

/* 拖拽上传区域 */
.dropzone { border:2px dashed #c7cce3; border-radius:12px; background:#fbfcff; padding:22px; text-align:center; color:#6b7280; cursor:pointer; transition: all .15s ease; }
.dropzone:hover { background:#f5f7ff; }
.dropzone.dragover { background:#eef2ff; border-color:#8fa2ff; color:#4f7cff; }
.dropzone .plus { font-size:36px; line-height:1; display:block; color:#6b86ff; }
.muted { color:#888; font-size:12px; }

/* 新栅格表单布局 */
.form-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:18px 28px; align-items:start; }
.field { min-width:0; }
.field > label { display:block; text-align:center; margin-bottom:6px; font-size:13px; color:#334155; }
.pill { width:100%; box-sizing:border-box; border:2px solid #c7cce3; background:#fff; border-radius:12px; padding:10px 12px; outline:none; }
.pill:focus { border-color:#8fa2ff; box-shadow:0 0 0 3px rgba(79,124,255,.15); }

/* 模拟“胶囊按钮”九宫格 */
.mini-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; align-items:stretch; justify-items:stretch; margin:6px 0 8px; }
.pill-box{ position:relative; width:auto; min-height:64px; border:2px solid #aebbf5; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#1f2a44; user-select:none; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.04); padding:6px 8px; }
.pill-box:hover{ border-color:#8fa2ff; }
.pill-box .overlay{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.pill-title{ font-size:11px; color:#64748b; margin-bottom:3px; }
.pill-val{ font-size:13px; font-weight:700; color:#1f2a44; }

.pill-edit{ display:none; }
.pill-edit:focus{ outline:none; border-color:#8fa2ff; box-shadow:0 0 0 3px rgba(79,124,255,.15); }
.pill-box#btnZip, .pill-box span#btnZip{ cursor:pointer; }

/* 首页胶囊颜色区分（四色） */
.pill-src{ border-color:#93c5fd; background:#f0f7ff; }
.pill-tgt{ border-color:#86efac; background:#edfff2; }
.pill-zip{ border-color:#c4b5fd; background:#f7f5ff; }
.pill-save{ border-color:#fbbf24; background:#fff8e1; }

/* 进度条 */
#progressWrap{ margin:10px 0 6px; }
.progress{ position:relative; width:100%; height:10px; background:#eef2ff; border-radius:999px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.06); }
.progress-bar{ height:100%; width:0%; background:linear-gradient(90deg, #4f7cff, #8fa2ff); transition:width .3s ease; }
.progress-text{ margin-top:8px; font-size:12px; color:#666; text-align:center; }