.cmp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:.9rem;box-shadow:var(--shadow)}.cmp-modes{margin-bottom:.85rem}.cmp-modes .seg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem}.cmp-modes .seg-btn.is-on{background:var(--surface);color:var(--accent-text);box-shadow:var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .08))}.cmp-slots{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.6rem}.cmp-slot{position:relative;display:grid;place-items:center;gap:.5rem;min-height:220px;padding:.9rem;border:2px dashed var(--border-strong);border-radius:var(--radius);background:radial-gradient(120% 120% at 50% 0%,var(--brand-soft),transparent 60%),var(--bg-soft);text-align:center;transition:border-color .2s ease,box-shadow .2s ease}.cmp-slot.is-dragover{border-color:var(--brand);border-style:solid;box-shadow:0 0 0 4px var(--brand-soft)}.cmp-slot.has-img{border-style:solid;border-color:var(--border);background:var(--bg-sunken)}.cmp-slot img{max-width:100%;max-height:220px;border-radius:8px;object-fit:contain}.cmp-slot-empty{display:grid;place-items:center;gap:.35rem;color:var(--text-soft)}.cmp-slot-label{font-weight:700;font-size:.95rem;color:var(--text)}.cmp-slot-btn{display:inline-flex;align-items:center;gap:.3rem;font-size:.82rem;font-weight:650;color:var(--accent-text);cursor:pointer;border:1px solid var(--border);border-radius:8px;padding:.3rem .7rem;background:var(--surface)}.cmp-slot-btn:hover{border-color:var(--brand)}.cmp-vs{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bg-sunken);color:var(--text-soft)}.cmp-hint{font-size:.85rem;margin-top:.5rem}.cmp-hint-center{text-align:center}.cmp-error{color:#b91c1c;font-size:.9rem;margin-top:.5rem}.cmp-summary{font-size:.85rem;color:var(--text-soft);margin-top:.1rem}.cmp-summary{font-weight:600}.cmp-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:1.25rem;align-items:start;animation:editorIn .4s ease both}@media(max-width:860px){.cmp-editor{display:flex;flex-direction:column;gap:.75rem}}.cmp-stage{position:relative;width:100%;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:repeating-conic-gradient(#e9eef5 0% 25%,#f7f9fc 0% 50%) 50% / 22px 22px}.cmp-slider{position:relative;width:100%;max-height:clamp(360px,70svh,640px);aspect-ratio:4 / 3;touch-action:none;user-select:none;cursor:ew-resize;overflow:hidden}.cmp-img-b,.cmp-img-a{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.cmp-img-a-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}.cmp-img-a-wrap .cmp-img-a{width:100cqw}.cmp-divider{position:absolute;top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 0 1px #00000040;transform:translate(-50%);pointer-events:none}.cmp-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#111;box-shadow:0 2px 8px #0000004d}.cmp-tag{position:absolute;top:8px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:#1119;padding:.15rem .45rem;border-radius:6px;pointer-events:none}.cmp-tag-a{left:8px}.cmp-tag-b{right:8px}.cmp-diffview{display:grid;place-items:center;width:100%;min-height:320px;max-height:clamp(360px,70svh,640px);padding:.5rem}.cmp-diff-canvas{max-width:100%;max-height:clamp(340px,66svh,600px);object-fit:contain;image-rendering:auto;border-radius:6px}.cmp-diff-empty{display:grid;place-items:center;gap:.5rem;color:var(--text-soft);text-align:center;padding:2rem}.cmp-controls{display:grid;gap:.2rem;align-content:start}@media(max-width:860px){.cmp-controls{overflow-y:auto}}.cmp-field{display:grid;gap:.3rem;font-size:.84rem;color:var(--text-soft)}.cmp-field>span{display:inline-flex;align-items:center;gap:.3rem;justify-content:space-between}.cmp-field b{color:var(--text);font-variant-numeric:tabular-nums}.cmp-field input[type=range]{width:100%;accent-color:var(--brand)}.cmp-field-sm{display:grid;gap:.3rem;font-size:.8rem;color:var(--text-soft)}.cmp-field-sm input[type=color]{width:100%;height:34px;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--surface);cursor:pointer}.cmp-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.5rem}.cmp-actions .btn{flex:1 1 auto}.cmp-multidrop{display:grid;place-items:center;gap:.4rem;padding:clamp(1.5rem,5vw,2.75rem) 1rem;border:2px dashed var(--border-strong);border-radius:var(--radius-lg);background:radial-gradient(120% 120% at 50% 0%,var(--brand-soft),transparent 60%),var(--bg-soft);text-align:center;transition:border-color .2s ease,box-shadow .2s ease}.cmp-multidrop.is-dragover{border-color:var(--brand);border-style:solid;box-shadow:0 0 0 4px var(--brand-soft)}.dup-group{border:1px solid var(--border);border-radius:var(--radius);padding:.6rem;background:var(--bg-soft)}.dup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.6rem}.dup-thumb{position:relative;display:grid;gap:.25rem;margin:0;padding:.35rem;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.dup-thumb.is-dup{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}.dup-thumb img{width:100%;height:92px;object-fit:cover;border-radius:6px;background:var(--bg-sunken)}.dup-thumb figcaption{font-size:.72rem;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dup-x{position:absolute;top:6px;right:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:none;background:#111111a6;color:#fff;cursor:pointer}.dup-x:hover{background:#b91c1c}@media(max-width:560px){.cmp-slots{grid-template-columns:1fr}.cmp-vs{transform:rotate(90deg);justify-self:center}}