:root{color-scheme:dark;--bg:#151b26;--panel:#202937;--border:#364255;--text:#f1f4fa;--muted:#aebbd0;--blue:#8abaff;--accent:#245fc1;font-family:system-ui,-apple-system,'Noto Sans Thai',sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);height:100dvh;display:flex;flex-direction:column;overflow:hidden}button,input,select,textarea{font:inherit}button{color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:9px;min-height:44px;padding:8px 12px;cursor:pointer;white-space:nowrap;font-size:.875rem}button:disabled{opacity:.4;cursor:default}button:hover:not(:disabled){border-color:var(--blue)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px}.primary{background:var(--accent);border-color:var(--accent);color:white;font-weight:600}.icon{font-size:1.4rem;min-width:44px;padding:4px 8px;border-color:transparent;background:transparent}.wide{width:100%}header{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));border-bottom:1px solid var(--border);flex-shrink:0}header img{object-fit:contain}.brand{font-size:1.1rem;font-weight:750;flex:1;letter-spacing:-.3px}.brand span{color:var(--muted);font-weight:450}main{min-height:0;flex:1;display:flex;flex-direction:column}.infobar{display:flex;gap:8px;align-items:center;padding:5px 10px;min-height:54px;flex-shrink:0}#filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.875rem}#position{font-size:.8rem;color:var(--muted);white-space:nowrap}#stage{flex:1;min-height:90px;position:relative;overflow:hidden;background:#0c1017;touch-action:none;user-select:none}#view{width:100%;height:100%;display:block}#empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;gap:14px;background:radial-gradient(ellipse at center,#25334c 0,#0c1017 80%)}#empty h1{font-size:1.35rem;line-height:1.5;margin:0}#empty p{color:var(--muted);line-height:1.8;margin:0;font-size:.95rem}#empty small{font-size:.8rem;color:var(--muted);margin-top:8px}#empty[hidden]{display:none}.nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:#202937b8;font-size:2rem;line-height:1;width:42px;padding:4px;display:none}.prev{left:8px}.next{right:8px}.loaded .nav{display:block}.viewbar{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 8px;flex-shrink:0}.viewbar button{min-height:40px;padding:5px 9px}.viewbar #zoom{min-width:44px;color:var(--muted);font-size:.8rem;text-align:center}.viewbar .icon{margin-left:auto}#editor{background:var(--panel);border-top:1px solid var(--border);flex-shrink:0}#editor[hidden]{display:none}.tools{display:flex;gap:6px;padding:8px 10px;overflow-x:auto}.tools button{background:transparent}.tools .active{background:#314c75;border-color:var(--blue);color:#cce1ff}.editOptions{display:flex;align-items:center;gap:8px;padding:0 10px;flex-wrap:wrap}.editOptions label{display:flex;align-items:center;gap:5px;font-size:.875rem}.editOptions input[type=range]{width:70px;accent-color:var(--blue)}.editOptions input[type=color]{width:36px;height:36px;border:0;background:transparent;padding:2px}.editOptions output{min-width:18px;color:var(--muted);font-size:.8rem}.editOptions #save{margin-left:auto}#toolHint{font-size:.8rem;color:var(--muted);margin:6px 12px 8px}#thumbnails{display:flex;gap:8px;overflow-x:auto;flex-shrink:0;padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom));border-top:1px solid var(--border);min-height:90px}#thumbnails:empty,#thumbnails[hidden]{display:none}.thumbnail{padding:3px;flex:0 0 68px;min-width:0;background:#0c1017;position:relative;border-radius:7px;overflow:hidden}.thumbnail img{width:60px;height:60px;object-fit:contain;display:block}.thumbnail.active{border:2px solid var(--blue);padding:2px}.thumbnail span{display:none}.thumbnail.edited:after{content:'•';position:absolute;right:3px;top:-5px;color:var(--blue);font-size:1.7rem}dialog{width:min(94vw,450px);max-height:90dvh;overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#0009;backdrop-filter:blur(3px)}.dialogHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.dialogHead h2{font-size:1.2rem;margin:0}dialog p{line-height:1.7;font-size:.95rem}.muted{font-size:.875rem!important;color:var(--muted)}.field{display:flex;flex-direction:column;gap:8px;margin:16px 0;font-size:.875rem}input:not([type=color]):not([type=range]),select,textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:11px;min-height:44px;font-size:1rem}.menuButtons{display:flex;flex-direction:column;gap:9px}.menuButtons button{text-align:left}#toast{position:fixed;bottom:calc(100px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,15px);background:#e9f1ff;color:#12233d;padding:10px 16px;border-radius:10px;box-shadow:0 3px 30px #0007;font-size:.875rem;max-width:90vw;min-width:180px;text-align:center;z-index:10;opacity:0;pointer-events:none;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}#stopSlide{position:fixed;right:14px;top:12px;z-index:5;background:#a7253d}#cropActions{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);white-space:nowrap;display:flex;gap:6px}#cropActions[hidden]{display:none}#dropHint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#245fc1c9;font-size:1.4rem}#dropHint[hidden]{display:none}progress{width:100%;accent-color:var(--blue)}body:fullscreen header,body:fullscreen .infobar,body:fullscreen #thumbnails{display:none}body:fullscreen #editor{display:none}body:fullscreen .viewbar{background:var(--bg)}@media(min-width:800px){main{position:relative;padding-left:104px}#thumbnails{position:absolute;left:0;top:0;bottom:0;width:104px;flex-direction:column;overflow-y:auto;overflow-x:hidden;border-right:1px solid var(--border);border-top:0;min-height:0}.thumbnail{flex:0 0 84px}.thumbnail img{width:76px;height:65px}.thumbnail span{display:block;font-size:.75rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:76px}.noThumbs main{padding-left:0}#thumbnails:empty{display:none}body:not(.loaded) main{padding-left:0}.viewbar .icon{margin-left:15px}header{padding-left:22px;padding-right:22px}.tools,.editOptions{justify-content:center}.editOptions #save{margin-left:5px}#toolHint{text-align:center}body:fullscreen main{padding-left:0}}@media(max-height:530px){header{padding:4px 10px}.infobar{min-height:40px}.viewbar{padding:2px 6px}#thumbnails{min-height:64px;padding:4px}.thumbnail img{height:48px}.tools{padding:3px 8px}#toolHint{display:none}#empty img,#empty small{display:none}}
header{flex-wrap:wrap}.brand{min-width:100px}#filename{min-width:0}.viewbar{flex-wrap:wrap}.viewbar button{flex-shrink:0}

#zipEntries{max-height:40dvh;overflow:auto;margin:12px 0;border:1px solid var(--border);border-radius:9px}.zipEntry{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--border);overflow-wrap:anywhere;font-size:.875rem}.zipEntry:last-child{border:0}.zipEntry input[type=checkbox]{width:22px;min-height:22px;flex-shrink:0;accent-color:var(--blue)}.zipEntry span{min-width:0;flex:1}.zipEntry small{color:var(--muted);white-space:nowrap}.zipActions{display:flex;gap:8px}