#progressBox{position:fixed;z-index:9999;left:50%;top:50%;width:min(360px,calc(100vw - 36px));transform:translate(-50%,-50%);padding:22px;background:#fff;border:1px solid #d8d1c7;border-top:4px solid #24383d;border-radius:8px;box-shadow:0 0 0 100vmax #18282d99,0 14px 40px #0004;font-size:14px;font-weight:bold;color:#24383d;text-align:center}.progressTrack{height:10px;margin-top:14px;background:#e4e0da;border-radius:99px;overflow:hidden}.progressTrack i{display:block;width:0;height:100%;background:#bd8650;transition:width .2s}.progressText{display:block;margin-top:10px;color:#59676b}.progressText:before{content:'กำลังประมวลผล · ';color:#a36e3b}
.rangeValue{float:right;color:#24383d;font-size:12px;letter-spacing:0;background:#f6ead9;border:1px solid #dfb783;border-radius:999px;padding:2px 8px}.zoomScale{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:7px}.zoomScale button{min-height:31px;padding:4px 2px;border:1px solid #d8d1c7;background:#fff;color:#405054;font:inherit;font-size:10px;cursor:pointer}.zoomScale button.on,.zoomScale button:hover{background:#f6ead9;border-color:#bd8650;color:#1b2a2f;font-weight:bold}
.donateButton{display:block;box-sizing:border-box;width:100%;max-width:100%;margin:0 0 18px;padding:11px 12px;border:1px solid #bd8650;border-radius:6px;background:#fff8ef;color:#805126;font:700 13px Kanit,Arial,sans-serif;cursor:pointer}.donateButton:hover{background:#f6ead9}.donateDialog{box-sizing:border-box;width:min(50vw,420px);height:min(50vh,620px);max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);margin:auto;padding:22px;border:0;border-radius:12px;box-shadow:0 18px 55px #0008;text-align:center;color:#24383d;overflow:hidden}.donateDialog::backdrop{background:#18282da8}.donateDialog h2{margin:0;font:700 clamp(16px,2vw,22px) Kanit,Arial,sans-serif}.donateDialog p{margin:5px 0 8px;font:clamp(11px,1.25vw,14px) Sarabun,Arial,sans-serif;color:#59676b}.donateDialog img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100% - 96px);margin:0 auto;border-radius:6px;object-fit:contain}.donateDialog small{display:block;margin-top:7px;color:#805126;font:clamp(10px,1vw,12px) Sarabun,Arial,sans-serif}.closeDonate{position:absolute;right:8px;top:7px;width:28px;height:28px;border:0;border-radius:50%;background:#24383d;color:#fff;font-size:19px;line-height:1;cursor:pointer}
.visitorCount{margin:-11px 0 18px;text-align:center;font:11px Sarabun,Arial,sans-serif;color:#7b8587}
.downloadCount{margin:7px 0 0;text-align:center;font:11px Sarabun,Arial,sans-serif;color:#7b8587}

@media (max-width:800px){
  .top{padding:8px 14px!important;min-height:54px!important}.siteBrand{font-size:15px;letter-spacing:.6px}.siteBrand span{font-size:9px!important}.siteCredit{display:none}
  .app{display:flex!important;flex-direction:column;padding:12px!important;gap:14px!important}.panel{order:0!important;width:100%;padding:12px!important;border-radius:7px}.stageWrap{order:1!important;min-height:0!important;width:100%;position:static!important}.stage{width:100%!important;max-height:none!important}.note{margin:6px 0 0;text-align:center}
  .upload{height:112px}.formats{grid-template-columns:repeat(2,1fr)!important}.formats button,.layout button,.actionRow button,.template button{min-height:44px;font-size:13px!important}.layout{gap:7px!important}.actionRow{gap:8px!important}.panel label,.label{margin-top:14px!important}details{margin:8px 0!important;padding:0 10px 10px!important}summary{padding:13px 0!important;font-size:14px!important}input[type=range]{height:36px;padding:7px 0}input[type=color],input[type=text],textarea,select{min-height:44px;font-size:16px!important}.export{position:sticky;bottom:8px;z-index:30;min-height:52px;margin-top:14px!important;border-radius:5px;font-size:15px}.tile button{width:32px;height:32px;font-size:19px;right:7px;top:7px}.caption{padding:12px 5%}.caption strong{font-size:clamp(17px,6vw,28px)!important}.caption p{font-size:clamp(11px,3.5vw,15px)!important}.caption.pos-left,.caption.pos-right{width:58%}.caption.pos-center{left:5%;right:5%}
  .zoomScale{grid-template-columns:repeat(4,1fr);gap:6px}.zoomScale button{min-height:38px;font-size:11px}.rangeValue{font-size:12px;padding:3px 9px}
  #progressBox{width:min(340px,calc(100vw - 28px));padding:20px;font-size:15px}
  .donateButton{width:100%;margin:4px 0 18px;min-height:46px;font-size:14px}.donateDialog{width:50vw;height:50vh;min-width:0;min-height:0;padding:18px 14px}.donateDialog img{max-height:calc(100% - 86px)}
}