/* The preview stacks above controls on narrow screens; decoration uses a side panel on desktop. */
.fire-maker.lm { --pink:var(--accent); }
.fire-maker .lm-top { flex:none; }
.fire-maker .top-actions { min-height:44px; }
.fire-maker .step-guide { flex:none; padding:4px 16px 20px; text-align:center; }
/* Keep overflow accessible without a bright platform scrollbar track. */
.fire-maker :is(.workspace, .panel, .help) { scrollbar-width:thin; scrollbar-color:#66565f transparent; }
.fire-maker :is(.workspace, .panel, .help)::-webkit-scrollbar { width:6px; height:6px; }
.fire-maker :is(.workspace, .panel, .help)::-webkit-scrollbar-track { background:transparent; }
.fire-maker :is(.workspace, .panel, .help)::-webkit-scrollbar-thumb { background:#66565f; border-radius:999px; }
.fire-maker :is(.workspace, .panel, .help)::-webkit-scrollbar-thumb:hover { background:#8d7482; }
.fire-maker .workspace { display:block; flex:1 1 auto; min-height:0; width:100%; overflow-y:auto; overscroll-behavior:contain; padding:0 12px 20px; }
.fire-maker .stage, .fire-maker .stage.stage-done { display:block; position:relative; top:auto; width:min(720px,100%); height:auto; aspect-ratio:5 / 3; margin:0 auto; border:0; border-radius:20px; background:#090b13; overflow:hidden; }
.fire-maker .stage .canvas-wrap { width:100%; aspect-ratio:5 / 3; }
.fire-maker .stage .canvas-wrap canvas { width:100%; height:100%; max-width:none; max-height:none; border-radius:20px; }
.fire-maker .stage-label { top:12px; left:12px; border:0; background:#30242b; color:#fff; padding:3px 10px; font-size:11px; }
.fire-maker .stage-hint { position:absolute; bottom:8px; left:0; right:0; min-height:0; padding:0 10px; text-align:center; color:#ebdce4; text-shadow:0 1px 5px #000; }
.fire-maker .panel { width:min(720px,100%); margin:20px auto 0; padding:0 0 16px; border:0; height:auto; overflow:visible; }
.fire-maker .fire-text-meta { flex-wrap:wrap; gap:4px 12px; margin-bottom:8px; text-align:left; }
.fire-maker .text-field textarea { resize:none; }
.fire-maker .panel h2 { font-size:15px; margin:0 0 10px; }
.fire-maker .font-options { display:flex; gap:8px; overflow-x:auto; padding:3px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.fire-maker .font-options::-webkit-scrollbar { display:none; }
.fire-maker .decoration-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; overflow:visible; padding:2px; }
.fire-maker .font-options button { flex:0 0 106px; min-height:92px; scroll-snap-align:start; }
.fire-maker .font-options span { font-size:27px; }
.fire-maker .decoration-options button { width:100%; min-width:0; }
.fire-maker .navigation { display:grid; grid-template-columns:1fr 1.35fr; gap:8px; margin:16px 0 0; padding:14px 0 0; }
.fire-maker .navigation button { max-width:none; height:50px; font-size:15px; }
.fire-maker .lm-bottom { display:block; flex:none; }
.fire-maker.is-done .lm-bottom { display:none; }
.fire-maker .fire-done { padding:4px 0 24px; }
.fire-maker .fire-done .done-actions .btn-main { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:52px; border-radius:999px; }
.fire-maker .fire-completion-effect { position:absolute; z-index:3; inset:0; width:100%; height:100%; pointer-events:none; }
.fire-maker .bottom-bar { display:none; }
.fire-maker .help { position:absolute; z-index:30; top:62px; left:50%; transform:translateX(-50%); width:min(720px,calc(100% - 24px)); max-height:calc(100dvh - 120px); overflow:auto; box-shadow:0 12px 48px #000b; }
.fire-maker .toast { bottom:84px; }
@media(max-width:600px) {
 .fire-maker .workspace { padding:0 12px 12px; }
 .fire-maker .stage-hint { font-size:10px; }
 .fire-maker .panel { margin-top:20px; }
 .fire-maker .font-options button { flex-basis:96px; }
}
@media(min-width:720px) {
 .fire-maker .lm-top { height:64px; }
 .fire-maker .step-guide { padding:0 16px 20px; }
}
@media(min-width:900px) {
 .fire-maker .workspace.decor-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,400px); align-items:start; gap:32px; overflow:hidden; max-width:1600px; margin:0 auto; padding:16px 24px 24px; }
 .fire-maker .decor-workspace .stage { width:min(100%,calc((100dvh - 190px)*5/3)); margin:0 auto; }
 .fire-maker .decor-workspace .panel { width:100%; height:100%; min-height:0; margin:0; padding:12px 16px 20px 28px; border-left:1px solid var(--line); overflow-y:auto; }
}
.fire-maker .lm-bottom button.footer-btn { min-width:0; width:100%; height:44px; min-height:44px; padding:0 6px; display:flex; align-items:center; justify-content:center; gap:4px; font-size:13px; white-space:nowrap; }
.fire-maker .lm-bottom button.footer-btn .ms { flex:none; font-size:18px; }
@media(max-width:390px) { .fire-maker .lm-bottom button.footer-btn { font-size:11.5px; padding:0 3px; } }