@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@400;600;700&display=swap";*,:before,:after{box-sizing:border-box}body{margin:0;padding:0}#root{display:none}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-base:#0e0e0f;--bg-surface:#161618;--bg-panel:#1c1c1f;--bg-hover:#242428;--bg-active:#2e2e34;--border:#2a2a30;--border-light:#38383f;--accent:#e8ff47;--accent-dim:#e8ff4726;--accent-glow:#e8ff470f;--red:#ff4d4d;--blue:#4d9fff;--text-pri:#f0f0f2;--text-sec:#888892;--text-dim:#555560;--radius:6px;--radius-lg:10px;--toolbar-w:64px;--panel-w:260px;--bottom-h:64px;--transition:.14s cubic-bezier(.4,0,.2,1)}input[type=color]{appearance:none;cursor:pointer;background:0 0;border:none;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:0}input[type=color]::-moz-color-swatch{border:none;border-radius:0}.image-editor-modal{z-index:9000;background:#000c;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.image-editor-modal.open{animation:.18s ieFadeIn;display:flex}@keyframes ieFadeIn{0%{opacity:0}to{opacity:1}}#ie-modal-inner{position:relative}#ie-close-btn{border:1px solid var(--border-light,#38383f);width:32px;height:32px;color:var(--text-sec,#888892);cursor:pointer;background:#3e3e44;border-radius:50%;justify-content:center;align-items:center;font-size:16px;font-weight:700;line-height:1;transition:all .14s;display:none}#ie-close-btn:hover{background:var(--bg-hover,#242428);color:var(--text-pri,#f0f0f2)}#image-editor-modal.open #ie-close-btn{display:flex}.image-editor-wrapper{background:var(--bg-base);height:100%;color:var(--text-pri);-webkit-font-smoothing:antialiased;font-size:13px;line-height:1.5;overflow:hidden}#app{grid-template-columns:var(--toolbar-w) 1fr var(--panel-w);grid-template-rows:48px 1fr var(--bottom-h);grid-template-areas:"header header header""toolbar canvas panel""toolbar bottom panel";width:100vw;height:100vh;display:grid}#header-row2{align-items:center;gap:8px;display:flex}#header{background:var(--bg-surface);border-bottom:1px solid var(--border);z-index:10;grid-area:header;align-items:center;gap:12px;padding:0 16px;display:flex}.header-logo{letter-spacing:.08em;color:var(--accent);text-transform:uppercase;-webkit-user-select:none;user-select:none;cursor:pointer;flex-shrink:0;font-family:Syne,sans-serif;font-size:1.2rem;font-weight:700}.header-logo-mobile{display:none}.header-sep{background:var(--border);flex-shrink:0;width:1px;height:20px}.header-file{color:var(--text-sec);align-items:center;gap:8px;font-size:12px;display:flex}#file-name{text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;max-width:25vw;display:inline-block;overflow:hidden}.header-actions{order:1;align-items:center;gap:8px;margin-left:auto;display:flex}#header-row2{order:0}#btn-apply{display:none}.btn{border-radius:var(--radius);border:1px solid var(--border);color:var(--text-sec);cursor:pointer;transition:all var(--transition);white-space:nowrap;-webkit-user-select:none;user-select:none;background:0 0;align-items:center;gap:6px;padding:6px 12px;font-family:DM Mono,monospace;font-size:12px;display:inline-flex}.btn:hover{border-color:var(--border-light);color:var(--text-pri);background:var(--bg-hover)}.btn.btn-primary{background:var(--accent);color:#0e0e0f;border-color:var(--accent);font-weight:500}.btn.btn-primary:hover{background:#d4e83f}.btn.btn-ghost{border-color:#0000}.btn.btn-ghost:hover{border-color:var(--border)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn svg{flex-shrink:0}.new-doc-modal-label{color:var(--text-sec);flex-shrink:0;min-width:30px;font-size:11px}.new-doc-bg-val{width:30px;outline:0!important;padding:0!important}.canvas-bg-icon{display:none}.canvas-bg-text{color:var(--text-sec);text-wrap:nowrap;font-family:DM Mono,monospace;font-size:12px}#toolbar{background:var(--bg-surface);border-right:1px solid var(--border);z-index:10;flex-direction:column;grid-area:toolbar;align-items:center;gap:2px;padding:8px 0;display:flex;overflow:hidden auto}.tool-btn{border-radius:var(--radius);width:44px;height:44px;color:var(--text-dim);cursor:pointer;transition:all var(--transition);background:0 0;border:none;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:3px;display:flex;position:relative}.tool-btn:hover{background:var(--bg-hover);color:var(--text-sec)}.tool-btn.active{background:var(--accent-dim);color:var(--accent)}.tool-btn.active:before{content:"";background:var(--accent);border-radius:0 2px 2px 0;width:2px;height:20px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.tool-btn span{letter-spacing:.04em;text-transform:uppercase;font-family:DM Mono,monospace;font-size:9px;line-height:1}.tool-sep{background:var(--border);flex-shrink:0;width:24px;height:1px;margin:4px 0}#canvas-area{touch-action:none;background:#3a3939;grid-area:canvas;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}#canvas-area.tool-crop{cursor:crosshair}#canvas-area.tool-draw{cursor:none}#canvas-area.tool-text{cursor:text}#canvas-area.tool-shape{cursor:crosshair}#canvas-area.tool-grab{cursor:grab}#canvas-area.tool-grab.grabbing{cursor:grabbing}#canvas-wrapper{transform-origin:50%;justify-content:center;align-items:center;display:flex;position:absolute}#main-canvas{box-shadow:0 0 0 1px var(--border), 0 8px 48px #0009;display:block}#overlay-canvas{pointer-events:none;position:absolute;top:0;left:0}#drop-zone{color:var(--text-dim);border:2px dashed var(--border);border-radius:var(--radius-lg);transition:all var(--transition);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:16px;margin:24px;display:flex;position:absolute;inset:0}#drop-zone:hover,#drop-zone.drag-over{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}#drop-zone svg{opacity:.4}#drop-zone.hidden{display:none}.drop-title{color:var(--text-sec);font-family:Syne,sans-serif;font-size:18px;font-weight:600}.drop-sub{color:var(--text-dim);font-size:12px}#zoom-info{color:var(--text-dim);background:var(--bg-surface);border:1px solid var(--border);pointer-events:none;border-radius:4px;padding:3px 8px;font-size:11px;position:absolute;bottom:12px;left:12px}#crop-overlay{border:2px solid var(--accent);cursor:move;display:none;position:absolute;box-shadow:0 0 0 9999px #0000008c}#crop-overlay.active{display:block}.crop-handle{background:var(--accent);border:2px solid #0e0e0f;border-radius:2px;width:10px;height:10px;position:absolute}.crop-handle.tl{cursor:nw-resize;top:-5px;left:-5px}.crop-handle.tr{cursor:ne-resize;top:-5px;right:-5px}.crop-handle.bl{cursor:sw-resize;bottom:-5px;left:-5px}.crop-handle.br{cursor:se-resize;bottom:-5px;right:-5px}.crop-handle.tc{cursor:n-resize;top:-5px;left:50%;transform:translate(-50%)}.crop-handle.bc{cursor:s-resize;bottom:-5px;left:50%;transform:translate(-50%)}.crop-handle.ml{cursor:w-resize;top:50%;left:-5px;transform:translateY(-50%)}.crop-handle.mr{cursor:e-resize;top:50%;right:-5px;transform:translateY(-50%)}#panel{background:var(--bg-panel);border-left:1px solid var(--border);flex-direction:column;grid-area:panel;display:flex;overflow:hidden}.panel-section{border-bottom:1px solid var(--border);display:none}.panel-section.active{display:block}.panel-header{letter-spacing:.12em;text-transform:uppercase;color:var(--text-sec);justify-content:space-between;align-items:center;padding:12px 16px;font-family:Syne,sans-serif;font-size:11px;font-weight:600;display:flex}.panel-body{flex-direction:column;gap:12px;padding:12px 16px;display:flex;overflow:hidden auto}.rotate-degree{width:80px}.rotate-degree-val{background-color:#ddd;border:none;outline:none;width:45px;height:21px;padding:0 0 0 6px;font-size:.75rem}.degree-sign{color:var(--text-sec);flex:1;min-width:20px;font-size:11px}.custom-rotate-btn{flex:1;justify-content:center;min-width:0;padding:6px 8px}.resize-w,.resize-h{background-color:#ddd;border:none;outline:none;flex:1;width:45px;height:21px;padding:0 0 0 6px;font-size:.75rem}.shape-fill-opacity,.shape-sw{background-color:#ddd;border:none;outline:none;width:80px;height:21px;padding:0 0 0 6px}.shape-fill-opacity-val{background-color:#ddd;border:none;outline:none;width:30px;height:21px;padding:0 0 0 6px;font-size:.8rem}.text-color-val{background-color:#ddd;border:none;outline:none;width:60px;height:21px;padding:0 0 0 6px}.text-color-val:hover,.text-color-val:focus,.text-color-val:active{background-color:#fff;box-shadow:inset 0 0 1px #424242}.text-stroke-width{width:80px}.text-stroke-width-val{background-color:#ddd;border:none;outline:none;width:45px;height:21px;padding:0 0 0 6px;font-size:.75rem}.text-size{width:80px}.text-size-val{background-color:#ddd;border:none;outline:none;width:45px;height:21px;padding:0 0 0 6px;font-size:.75rem}.text-size-val:hover,.text-size-val:focus,.text-size-val:active{background-color:#fff;box-shadow:inset 0 0 1px #424242}.sticker-size{width:80px}.sticker-size-val{background-color:#ddd;border:none;outline:none;width:45px;height:21px;padding:0 0 0 6px;font-size:.75rem}.bgr-tolerance{background-color:#ddd;border:none;outline:none;width:80px;height:21px;padding:0 0 0 6px}.ctrl-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.ctrl-label{color:var(--text-sec);flex-shrink:0;min-width:60px;font-size:11px}.ctrl-inline-label{color:var(--text-sec);min-width:20px;margin-right:2px;font-size:11px}.ctrl-val{color:var(--text-dim);text-align:right;min-width:32px;font-size:11px}input[type=range]{appearance:none;background:var(--bg-active);cursor:pointer;border-radius:2px;outline:none;flex:1;height:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:2px solid var(--bg-panel);cursor:pointer;width:14px;height:14px;transition:transform var(--transition);border-radius:50%}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.btn-group{flex-wrap:wrap;gap:6px;display:flex}.btn-group .btn{flex:1;justify-content:center;min-width:0;padding:6px 8px}.color-row{align-items:center;gap:6px;display:flex}.color-swatch{border:1px solid var(--border-light);cursor:pointer;width:20px;height:20px;transition:transform var(--transition);border-radius:4px;flex-shrink:0}.color-swatch:hover{transform:scale(1.1)}.color-swatch.selected{box-shadow:0 0 0 2px var(--accent)}.color-custom{border:1px dashed var(--border-light);cursor:pointer;width:20px;height:20px;transition:box-shadow var(--transition);background:0 0;border-radius:4px;flex-shrink:0;padding:0;position:relative;overflow:hidden}.color-custom.selected{box-shadow:0 0 0 2px var(--accent);border-color:#0000}.color-custom input[type=color]{opacity:1;cursor:pointer;border:none;width:calc(100% + 8px);height:calc(100% + 8px);padding:0;position:absolute;inset:-4px}.filter-grid{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.filter-item{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-surface);cursor:pointer;text-align:center;color:var(--text-sec);transition:all var(--transition);padding:8px;font-size:11px}.filter-item:hover{border-color:var(--border-light);color:var(--text-pri)}.filter-item.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.shape-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.shape-item{aspect-ratio:1;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-surface);cursor:pointer;color:var(--text-sec);transition:all var(--transition);justify-content:center;align-items:center;display:flex}.shape-item:hover{border-color:var(--border-light);color:var(--text-pri)}.shape-item.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.text-input-wrap{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:6px;padding:8px;display:flex}.text-input-wrap textarea{color:var(--text-pri);resize:none;background:0 0;border:none;outline:none;width:100%;min-height:56px;font-family:DM Mono,monospace;font-size:12px}.text-input-wrap textarea::placeholder{color:var(--text-dim)}.mode-btn{transition:all .2s}.mode-btn.active{color:#06f;background:#fff;font-weight:600;box-shadow:0 2px 6px #0000001a}#bottom-bar{background:var(--bg-surface);border-top:1px solid var(--border);-webkit-overflow-scrolling:touch;grid-area:bottom;align-items:center;gap:8px;padding:0 12px;display:flex;overflow:auto hidden}.bottom-tool{border-radius:var(--radius);color:var(--text-dim);cursor:pointer;transition:all var(--transition);letter-spacing:.04em;text-transform:uppercase;background:0 0;border:none;flex-direction:column;flex-shrink:0;align-items:center;gap:4px;padding:6px 10px;font-family:DM Mono,monospace;font-size:9px;display:flex}.bottom-tool:hover{background:var(--bg-hover);color:var(--text-sec)}.bottom-tool.active{color:var(--accent)}.bottom-sep{background:var(--border);flex-shrink:0;width:1px;height:28px}#image-editor-toast-container{z-index:99999;pointer-events:none;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:80px;left:50%;transform:translate(-50%)}.image-editor-toast{background:var(--bg-surface);border:1px solid var(--border-light);color:var(--text-pri);border-radius:var(--radius);white-space:nowrap;padding:10px 16px;font-size:12px;animation:.2s forwards toastIn}.image-editor-toast.removing{animation:.2s forwards toastOut}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1}to{opacity:0;transform:translateY(-4px)}}#text-editor-modal-backdrop{z-index:100;background:#000000b3;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#text-editor-modal-backdrop.open{display:flex}.text-editor-modal{background:var(--bg-panel);border:1px solid var(--border-light);border-radius:var(--radius-lg);flex-direction:column;gap:16px;width:320px;padding:24px;display:flex}.text-editor-modal-title{color:var(--text-pri);font-family:Syne,sans-serif;font-size:15px;font-weight:600}.text-editor-modal-actions{justify-content:flex-end;gap:8px;display:flex}@media (width<=575px){:root{--toolbar-w:0px;--panel-w:0px;--bottom-h:56px}body{overflow:hidden}#app{grid-template-columns:1fr;grid-template-rows:auto 1fr auto var(--bottom-h);grid-template-areas:"header""canvas""panel""toolbar";width:100%;height:100dvh;overflow:hidden}#canvas-area{touch-action:pan-x pan-y;min-height:0;padding:0;overflow:hidden}#toolbar{border-right:none;border-top:1px solid var(--border);width:100%;height:var(--bottom-h);-webkit-overflow-scrolling:touch;flex-direction:row;grid-area:toolbar;justify-content:space-between;padding:8px;overflow:auto hidden}.tool-btn{flex-shrink:0;width:48px;height:44px}.tool-btn.active:before{border-radius:2px 2px 0 0;width:20px;height:2px;top:auto;bottom:0;left:50%;transform:translate(-50%)}.tool-btn.grab-move,.tool-sep{display:none}#panel{border-left:none;border-top:1px solid var(--border);grid-area:panel;max-height:220px;overflow-y:auto}#bottom-bar{display:none}#header{flex-wrap:wrap;align-items:center;gap:0;height:auto;padding:6px 10px 0;display:flex}#header .header-sep{display:none}.header-logo{white-space:nowrap;flex-shrink:0;order:0;padding:0;font-size:1rem;line-height:32px;display:block}.header-logo-mobile{display:none}.header-actions{flex-wrap:nowrap;flex-shrink:0;order:1;align-items:center;gap:6px;margin-left:auto;padding:0;display:flex}.header-actions .btn span{display:none}#header-row2{border-top:1px solid var(--border);order:2;align-items:center;gap:6px;width:100%;margin-top:4px;padding:4px 0 2px;display:flex}#header-row2 .btn span{display:none}.header-file{width:100%;color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;order:3;align-items:center;gap:6px;padding:4px 0 6px;font-family:DM Mono,monospace;font-size:11px;display:flex;overflow:hidden}#file-name{text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;max-width:55vw;display:inline-block;overflow:hidden}#file-size{white-space:nowrap;vertical-align:middle;flex-shrink:0}.text-editor-modal{width:calc(100vw - 32px);padding:16px}}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:2px}