.social-image-work .work-body{padding:22px}.social-image-work .split-layout{grid-template-columns:minmax(330px,.72fr) minmax(420px,1.28fr)}
.editor-controls{display:grid;gap:13px}.control-block{padding:14px;border:1.5px solid var(--ink);border-radius:15px;background:#fff}.control-block h3{margin:0 0 10px;font-size:17px}.control-block>.field:last-child{margin-bottom:0}
.preset-list{display:grid;max-height:310px;gap:7px;overflow:auto;padding:2px}.preset-button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1.5px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}.preset-button:hover{background:var(--soft-accent)}.preset-button.is-active{background:var(--ink);color:#fff}.preset-button strong{display:block;font-size:12px}.preset-button small{font-size:9px;opacity:.76}.preset-button span:last-child{font-size:10px;font-weight:900;white-space:nowrap}
.swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch{width:34px;height:34px;padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--swatch);box-shadow:0 0 0 2px #fff inset;cursor:pointer}.swatch.is-active{box-shadow:0 0 0 3px var(--accent)}
.preview-column{display:grid;align-content:start;gap:12px;min-width:0}.social-canvas-stage{position:relative;display:grid;min-height:480px;place-items:center;overflow:auto;padding:18px;border:2px solid var(--ink);border-radius:20px;background-color:#e6e6e0;background-image:linear-gradient(45deg,#d6d6d0 25%,transparent 25%),linear-gradient(-45deg,#d6d6d0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d6d6d0 75%),linear-gradient(-45deg,transparent 75%,#d6d6d0 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px}.social-canvas-stage canvas{display:block;max-width:100%;max-height:690px;border:1px solid rgba(0,0,0,.25);background:#fff;box-shadow:0 5px 18px rgba(0,0,0,.12);cursor:grab;touch-action:none}.social-canvas-stage canvas.is-positioning{cursor:grabbing}.preview-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1.5px solid var(--ink);border-radius:13px;background:#fff}.preview-meta strong{font-size:12px}.preview-meta span{color:var(--muted);font-size:10px}
.dual-preview{display:grid;grid-template-columns:1fr 1fr;gap:14px}.avatar-preview{display:grid;gap:8px;text-align:center}.avatar-preview canvas{width:100%;height:auto}.avatar-preview.circle canvas{border-radius:50%}.avatar-preview strong{font-size:11px}
.pack-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.pack-choice{display:flex;align-items:flex-start;gap:8px;padding:9px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:10px}.pack-choice input{width:17px;height:17px;accent-color:var(--accent)}
.carousel-stage{display:grid;gap:12px}.carousel-overview{position:relative;display:block;max-width:100%;overflow:auto;border:2px solid var(--ink);border-radius:17px;background:#fff}.carousel-overview canvas{display:block;max-height:560px;cursor:grab;touch-action:none}.slide-strip{display:flex;gap:8px;overflow-x:auto;padding:3px}.slide-thumb{display:grid;width:124px;flex:0 0 124px;gap:5px;padding:7px;border:1.5px solid var(--ink);border-radius:11px;background:#fff;color:var(--ink);cursor:pointer}.slide-thumb.is-active{background:var(--soft-accent);box-shadow:inset 0 0 0 2px var(--accent)}.slide-thumb canvas{display:block;width:100%;height:auto;border:1px solid var(--line)}.slide-thumb strong{font-size:9px;text-align:center}.mode-note{margin:0;padding:10px 12px;border-radius:11px;background:#f7f6f1;color:var(--muted);font-size:10px}.source-note{margin:12px 0 0;color:var(--muted);font-size:10px}.source-note a{color:inherit;font-weight:850}
@media(max-width:940px){.social-image-work .split-layout{grid-template-columns:1fr}.social-canvas-stage{min-height:360px}.dual-preview{max-width:640px;margin:auto}}
@media(max-width:640px){.social-image-work .work-body{padding:13px}.pack-list{grid-template-columns:1fr}.dual-preview{grid-template-columns:1fr 1fr}.social-canvas-stage{min-height:290px;padding:10px}.preset-list{max-height:240px}}