header { flex-wrap:wrap; gap:16px; min-height:64px; z-index:90; }
header .brand-area { min-width:0; gap:8px; }
header .brand { flex:0 0 168px; min-width:0; margin-right:12px; }
header .brand img { display:block; width:168px; max-width:100%; height:auto; }
header .hactions { min-width:0; gap:8px; overflow:visible; }
header button.tiny, .more-actions summary { min-height:34px; white-space:nowrap; }
header button#scanModeBtn, header button#cutterModeBtn { color:var(--text); }
.more-actions { position:relative; flex:0 0 auto; }
.more-actions summary { display:flex; align-items:center; list-style:none; border:1px solid var(--border); padding:5px 12px; border-radius:4px; color:var(--text); cursor:pointer; }
.more-actions summary::-webkit-details-marker { display:none; }
.more-actions[open] summary { border-color:var(--accent); }
.more-actions-panel { position:absolute; top:calc(100% + 10px); right:0; display:flex; flex-direction:column; gap:6px; padding:8px; min-width:180px; background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:0 12px 36px #0005; z-index:100; }
.more-actions-panel button { text-align:left; width:100%; }
#left > #sec-effects { flex:1 1 auto; min-height:0; }
ul.efflist { padding:0 10px 14px; }
ul.efflist li[data-key] { min-height:64px; gap:12px; padding:6px; margin-bottom:3px; border:1px solid transparent; color:var(--text); }
ul.efflist li[data-key].active { border-color:var(--accent); background:var(--panel2); }
.effect-thumb { display:block; width:50px; height:50px; flex:0 0 50px; object-fit:cover; border-radius:4px; background:var(--panel2); }
.effect-name { line-height:1.45; font-size:12px; }
ul.efflist li.efgroup { opacity:1; padding:16px 6px 8px; }
button:focus-visible, summary:focus-visible, li[data-key]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#stageWrap:has(#placeholder:not([style*="display: none"])) { background-image:none; }
#placeholder { position:absolute; max-height:100%; overflow:auto; width:min(620px,100%); max-width:620px; padding:28px; margin:auto; pointer-events:auto; flex-shrink:0; }
#placeholder .big { font:600 clamp(20px,2.1vw,28px) var(--option-font); color:var(--text); letter-spacing:-.5px; margin-bottom:10px; }
#placeholder .placeholder-copy { max-width:none; font:13px/1.7 var(--option-font); }
.welcome-actions { display:flex; justify-content:center; gap:10px; margin:22px 0 30px; flex-wrap:wrap; }
#placeholder .welcome-actions button { margin:0; padding:10px 16px; min-height:42px; font:12px var(--option-font); color:var(--text); background:var(--panel2); border-color:var(--border); }
#placeholder #emptyUploadBtn { background:var(--accent); color:#06231a; border-color:var(--accent); font-weight:700; }
.sample-effects { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#placeholder .sample-effect { margin:0; padding:0; overflow:hidden; text-align:left; background:var(--panel); border:1px solid var(--border); border-radius:7px; font:12px var(--option-font); color:var(--text); }
#placeholder .sample-effect:hover { border-color:var(--accent); }
.sample-effect canvas { display:block; width:100%; height:auto; aspect-ratio:1; background:var(--panel2); }
.sample-effect span { display:block; padding:12px 10px; }
#sampleStatus { font:12px/1.5 var(--option-font); min-height:18px; margin:14px 0 0; color:var(--dim); }
#stageWrap:has(#placeholder:not([style*="display: none"])) > canvas { display:none; }
@media (max-width:1180px) {
header { flex-wrap:wrap; gap:8px; }
header .brand-area { flex:1 1 auto; }
header .hactions { margin-left:auto; flex-wrap:wrap; justify-content:flex-end; overflow:visible; }
header .brand { flex-basis:140px; }
header .brand img { width:140px; }
#placeholder { padding:24px 18px; }
.sample-effects { gap:8px; }
}
@media (max-width:720px) {
header { padding:8px; }
header .hactions { width:100%; justify-content:flex-start; }
header .hactions #animationBtn { margin-left:auto; }
#placeholder { padding:20px 14px; }
#placeholder .big { font-size:21px; }
.sample-effect span { padding:9px 6px; font-size:11px; }
}
html.mobile-prototype .more-actions { grid-column:1/-1; }
html.mobile-prototype .more-actions-panel { position:static; margin-top:8px; box-shadow:none; }
html.mobile-prototype #placeholder { position:absolute; max-height:100%; overflow:auto; max-width:620px; }