.mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 640px; margin: 0 auto 20px; }
.mode-tab { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 16px; cursor: pointer; background: var(--card); border: 1px solid var(--border); color: var(--text); transition: all .2s; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mode-tab:hover { border-color: var(--border-strong); }
.mode-tab .mt-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--card-2); border: 1px solid var(--border); }
.mode-tab .mt-ic svg { width: 22px; height: 22px; color: var(--text-2); }
.mode-tab b { display: block; font-size: 15px; }
.mode-tab small { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.mode-tab.on { background: var(--accent-soft); border-color: transparent; box-shadow: inset 0 0 0 1.5px rgba(220,192,143,.8), var(--shadow-glow); }
.mode-tab.on .mt-ic { background: var(--accent); border-color: transparent; }
.mode-tab.on .mt-ic svg { color: #fff; }
.upload-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.upload-grid .dropzone { height: 100%; }
.size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.color-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
.color-grid .opt, .bg-grid .opt { min-height: 0; padding: 9px 4px 7px; }
.bg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bg-grid .swatch, .color-grid .swatch { width: 100%; height: 34px; border-radius: 9px; }
.swatch.transparent { background: repeating-conic-gradient(#c9ced8 0 25%, #fff 0 50%) 0 0/10px 10px; }
.swatch.upload { display: grid; place-items: center; background: var(--card-2); }
.custom-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.custom-row label.faint { white-space: nowrap; }
.custom-size { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.custom-size .input { flex: 1; min-width: 0; }
.btn-col { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.result-stage { margin-top: 12px; min-height: 420px; height: calc(100vh - 260px); max-height: 780px; display: flex; align-items: center; justify-content: center; padding: 14px; }
.result-stage canvas, .result-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.result-stage img.layout { background: #fff; }
.compare-layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; z-index: 3; background: inherit; }
#idWarn { margin-top: 10px; color: var(--warn); }
@media (max-width: 960px) { .upload-grid { grid-template-columns: minmax(0, 1fr); } .result-stage { height: 56vh; min-height: 300px; } }
@media (max-width: 600px) {
  .mode-tabs { gap: 8px; margin-bottom: 14px; }
  .mode-tab { padding: 10px; gap: 9px; border-radius: 14px; }
  .mode-tab .mt-ic { width: 34px; height: 34px; border-radius: 10px; }
  .mode-tab small { display: none; }
  .size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .result-stage { height: 46vh; padding: 10px; }
}

/* 精修画笔 */
.refine-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--accent-soft); }
.refine-bar .seg button { display: inline-flex; align-items: center; gap: 6px; }
.refine-bar .seg svg { width: 16px; height: 16px; }
.brush-size { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; }
.brush-size input { flex: 1; accent-color: var(--accent); }
.brush-size i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--text-2); flex: none; }
.refine-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.refine-actions .btn { height: 40px; }
.refine-tip { flex-basis: 100%; font-size: 12px; }
.result-stage.refining canvas { touch-action: none; cursor: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.brush-cursor { position: absolute; z-index: 4; pointer-events: none; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.4); transform: translate(-50%, -50%); }
.brush-cursor.erase { background: rgba(248,113,113,.18); }
.brush-cursor.restore { background: rgba(74,222,128,.18); }
#refineBtn.active { color: #fff; background: var(--accent); border-color: transparent; }
@media (max-width: 600px) {
  .refine-bar { padding: 10px; gap: 8px; }
  .refine-actions { margin-left: 0; width: 100%; }
  .refine-actions .btn { flex: 1; }
  .brush-size { min-width: 0; flex-basis: 100%; }
}