.magic-dialog{width:min(680px,calc(100vw - 20px));max-height:92dvh}
.magic-dialog .generated-result canvas{width:100%;height:auto;display:block;border-radius:14px;border:1px solid #eee5f0;background:#f8f5fb;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.magic-dialog .generated-result canvas.dragging{cursor:grabbing}
.magic-dialog .result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.magic-dialog .result-actions button{font-size:16px;min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.magic-edit{margin-top:25px;border-top:1px solid #e8dced;padding-top:17px}
.magic-edit h3{font-size:20px;margin:0 0 18px;color:#39254d}
.edit-field{margin:0 0 18px}
.edit-field>label{display:block;font-weight:800;font-size:14px;margin-bottom:9px}
.edit-field small{display:block;color:#877996;font-size:11px;margin-top:7px}
.ratio-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.ratio-options button,.edit-toolbar button,.font-chip{color:#4d326b;border:1px solid #decfe9;background:#fff;border-radius:12px;min-height:42px;font-size:13px;font-weight:800;cursor:pointer}
.ratio-options button.selected,.edit-toolbar button.selected,.font-chip.selected{background:#7e4ab0;color:#fff;border-color:#7e4ab0}
.edit-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.compact-toolbar{justify-content:space-between;gap:10px;flex-wrap:nowrap}
.compact-toolbar .edit-toolbar{flex-wrap:nowrap}
.style-inline{margin-left:auto}
.edit-toolbar button{width:42px;height:42px;display:grid;place-items:center;padding:0}
.edit-toolbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.font-rail{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;scrollbar-color:#b896d6 #f2ecf7;-webkit-overflow-scrolling:touch}
.font-chip{flex:0 0 auto;min-width:132px;padding:12px 16px;text-align:center;white-space:nowrap}
.background-controls{display:flex;gap:8px;flex-wrap:wrap}
.background-controls button{font-size:13px;padding:10px 12px}
.background-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}
.background-grid[hidden]{display:none}
.background-thumb{padding:3px;border-radius:9px;border:2px solid transparent;background:white;cursor:pointer}
.background-thumb.selected{border-color:#934db8}
.background-thumb img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:5px}
.generated-result[hidden],.magic-notice[hidden]{display:none!important}
@media(max-width:550px){
 .magic-dialog .result-actions{grid-template-columns:1fr 1fr}
 .magic-dialog .result-actions button{font-size:14px;padding:10px 6px}
 .ratio-options{grid-template-columns:repeat(4,minmax(0,1fr))}
 .background-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .compact-toolbar{gap:8px}
 .edit-toolbar button{width:40px;height:40px}
 .font-chip{min-width:120px;padding:11px 14px}
}
@media(max-width:390px){
 .compact-toolbar{align-items:flex-start;overflow-x:auto;padding-bottom:4px}
 .compact-toolbar .edit-toolbar{flex:0 0 auto}
 .style-inline{margin-left:0}
}
@media(max-width:350px){.ratio-options{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* V9 : carrousel tactile des fonds, toujours visible */
.background-grid.background-rail{display:flex;grid-template-columns:none;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding:5px 3px 12px;margin:0 0 8px;touch-action:pan-x;max-width:100%}
.background-grid.background-rail .background-thumb{flex:0 0 150px;scroll-snap-align:start;padding:3px;border-radius:11px;min-height:96px;box-shadow:0 1px 6px #160c2a1a}
.background-grid.background-rail .background-thumb img{height:96px;aspect-ratio:3/2;object-fit:cover}
.background-grid.background-rail .background-thumb.selected{border-color:#914eb4;box-shadow:0 0 0 2px #9d57bf33}
@media(max-width:540px){.background-grid.background-rail{display:flex;grid-template-columns:none}.background-grid.background-rail .background-thumb{flex-basis:128px}.background-grid.background-rail .background-thumb img{height:85px}}