*,*:before,*:after{box-sizing:border-box}:root{--bg: #ebf1f7;--surface: rgba(255, 255, 255, .86);--surface-strong: #ffffff;--edge: #d4deea;--edge-strong: #b9c7d8;--ink: #1e2a3a;--muted: #65758a;--accent: #0ea5b7;--accent-strong: #0b7f8d;--shadow: 0 10px 30px rgba(15, 23, 42, .12);--glass: blur(10px)}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 0% 0%,#def5ff 0%,transparent 35%),radial-gradient(circle at 100% 100%,#e1f8ef 0%,transparent 40%),var(--bg);color:var(--ink);font-family:Manrope,Segoe UI,sans-serif}#app{width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}#toolbar{position:relative;height:52px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border-bottom:1px solid var(--edge);background:linear-gradient(160deg,#fff,#f7fbff);box-shadow:0 6px 22px #0d1a3014;z-index:15}.toolbar-left{display:inline-flex;align-items:center;gap:8px;min-width:0}.toolbar-brand{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;background:linear-gradient(140deg,#0f2538,#182f42);color:#effaff;border:1px solid #0f273d;font-size:11px;font-weight:800;letter-spacing:.02em}.toolbar-brand i{color:#86f2ff;font-size:12px}.brand-text{display:inline-flex;align-items:baseline;gap:6px}.brand-text span{opacity:.75;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.toolbar-actions{display:inline-flex;align-items:center;gap:6px;overflow-x:auto}#toolbar #toggle-toolbar-btn{display:none;flex-shrink:0}#toggle-toolbar-btn.active{border-color:#8da2b8;background:#dde6f1;color:#2e435a}#app[data-topbar-collapsed=true] .toolbar-actions{display:none}@media (min-width: 901px){#app[data-topbar-collapsed=true] .toolbar-actions{display:inline-flex}}#toolbar button,#upload-sticker-label{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--edge-strong);background:var(--surface-strong);color:#334255;border-radius:999px;min-height:32px;padding:5px 10px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:box-shadow .14s ease,border-color .18s ease,background .18s ease}#toolbar button:hover,#upload-sticker-label:hover{box-shadow:0 2px 8px #0000001a;border-color:#88abc8;background:#f1f8ff}#sticker-upload{display:none}.icon{width:12px;min-width:12px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1}#grid-wrapper{position:relative;flex:1;overflow:auto;display:block;background:radial-gradient(circle at 10% 15%,#ffffff 0%,transparent 35%),radial-gradient(circle at 90% 85%,#deecfb 0%,transparent 38%),#eaf1f8}#grid{display:block;margin:0;image-rendering:pixelated;touch-action:none;-webkit-user-select:none;user-select:none;background:#f0f4fa;box-shadow:inset 0 0 0 1px #d7e1ed}#grid.view-pan{cursor:grab}#grid.view-pan.panning{cursor:grabbing}#grid.tool-draw{cursor:crosshair}#left-dock,#right-dock{position:fixed;top:calc(var(--toolbar-offset, 0px) + 14px);z-index:20;display:flex;flex-direction:column;gap:8px;pointer-events:none}#left-dock{left:14px;width:232px}#right-dock{right:14px;width:188px;bottom:14px;max-height:calc(100vh - var(--toolbar-offset, 0px) - 28px);max-height:calc(100dvh - var(--toolbar-offset, 0px) - 28px);overflow:hidden}.dock-panel{pointer-events:auto;border:1px solid var(--edge);border-radius:14px;background:var(--surface);-webkit-backdrop-filter:var(--glass);backdrop-filter:var(--glass);box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;gap:6px}[data-tool-card],#right-dock[data-tool-card]{display:none}#app[data-active-tool=draw] [data-tool-card~=draw],#app[data-active-tool=fill] [data-tool-card~=fill],#app[data-active-tool=shape] [data-tool-card~=shape],#app[data-active-tool=sticker] [data-tool-card~=sticker],#app[data-active-tool=text] [data-tool-card~=text],#app[data-active-tool=sticker] #right-dock[data-tool-card~=sticker]{display:flex}#app[data-ui-hidden=true] #left-dock,#app[data-ui-hidden=true] #right-dock{display:none!important}.panel-title{margin:0;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex-shrink:0}.panel-title i{opacity:.65;margin-right:2px}.toolbar-group{display:flex;align-items:center;gap:6px;padding:5px 6px;border:1px solid var(--edge);border-radius:10px;background:#f9fbff}.toolbar-label{display:inline-flex;align-items:center;gap:6px;min-width:52px;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}#tool-group{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--edge);border-radius:11px;background:#f6faff}#tool-group .tool-btn{border:1px solid #c7d5e6;border-radius:9px;background:#fff;color:#324258;min-height:40px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px}#tool-group .tool-btn .btn-text{display:none}kbd.tool-key{font-family:inherit;font-size:8px;font-weight:800;letter-spacing:.03em;line-height:1;color:var(--muted);background:none;border:none;padding:0;-webkit-user-select:none;user-select:none}#tool-group .tool-btn.active kbd.tool-key{color:#ffffffbf}#tool-group .tool-btn.active,#capture-sticker-btn.active{border-color:#087483;background:linear-gradient(145deg,var(--accent),var(--accent-strong));color:#fff}#toolbar #pan-view-btn.active,#toolbar #pan-view-btn.active:hover,#toolbar #pan-view-btn.active:active,#toolbar #pan-view-btn.active:focus-visible{border-color:#087483;background:linear-gradient(145deg,var(--accent),var(--accent-strong));color:#123342}#toggle-ui-btn.active{border-color:#8da2b8;background:#dde6f1;color:#2e435a}#color-picker{width:24px;height:24px;padding:1px;border:1px solid var(--edge-strong);border-radius:7px;cursor:pointer;background:none}#brush-size,#opacity-slider,#text-size{width:86px;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:999px;outline:none;cursor:pointer}#brush-size,#opacity-slider{background:linear-gradient(90deg,#7ddfe8,#0ea5b7)}#text-size{background:linear-gradient(90deg,#91d4ff,#0f8de5)}#brush-size::-webkit-slider-thumb,#opacity-slider::-webkit-slider-thumb,#text-size::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;border:1px solid #0f5660;background:#0f6874}#brush-size::-moz-range-thumb,#opacity-slider::-moz-range-thumb,#text-size::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:1px solid #0f5660;background:#0f6874}#brush-size-label,#opacity-label,#text-size-label{min-width:18px;text-align:center;font-size:10px;font-weight:800;color:var(--muted)}#shape-type,#shape-mode{display:none}.shape-type-group{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.shape-type-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--edge-strong);border-radius:7px;background:#fff;color:#334255;font-size:13px;font-family:Arial,Helvetica,sans-serif;height:30px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,border-color .15s}.shape-type-btn:hover{border-color:var(--accent);background:#f0fbfd}.shape-type-btn.active{border-color:#087483;background:linear-gradient(145deg,var(--accent),var(--accent-strong));color:#fff}.shape-mode-group{display:grid;grid-template-columns:1fr 1fr;gap:4px}.shape-mode-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--edge-strong);border-radius:7px;background:#fff;color:#334255;font-size:10px;font-weight:700;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:background .15s,border-color .15s}.shape-mode-btn:hover{border-color:var(--accent);background:#f0fbfd}.shape-mode-btn.active{border-color:#087483;background:linear-gradient(145deg,var(--accent),var(--accent-strong));color:#fff}.toolbar-divider{width:1px;height:20px;background:var(--edge-strong);margin:0 2px;flex-shrink:0;align-self:center}[data-size-for]{display:none}#app[data-active-tool=draw] [data-size-for~=draw],#app[data-active-tool=fill] [data-size-for~=fill],#app[data-active-tool=shape] [data-size-for~=shape],#app[data-active-tool=text] [data-size-for~=text]{display:flex}.sticker-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0}.sticker-actions .action-btn,.sticker-actions #upload-sticker-label{width:100%;justify-content:center;border-radius:9px;border:1px solid var(--edge-strong);background:#fff;color:#334459;min-height:32px}#sticker-tray{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:6px;flex:1;min-height:0;max-height:none;overflow:auto}.sticker-item{width:100%;height:54px;border:1px solid #c6d4e3;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;padding:3px;cursor:pointer}.sticker-item.active{border-color:#087483;box-shadow:inset 0 0 0 1px #087483}.sticker-thumb{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}#grid.tool-fill{cursor:cell}#grid.tool-shape{cursor:crosshair}#grid.tool-text{cursor:text}@media (max-width: 1180px){#toolbar{height:auto;flex-wrap:wrap;justify-content:center}.toolbar-actions{order:2;width:100%;justify-content:center}#left-dock,#right-dock{width:170px}#left-dock{left:10px}#right-dock{right:10px}.toolbar-label{min-width:46px}.shape-type-group,.shape-mode-group{grid-template-columns:1fr}}@media (max-width: 900px){#toolbar{height:auto;padding:8px;gap:8px;flex-direction:column;align-items:stretch}.toolbar-left{width:100%;justify-content:space-between;order:1}.toolbar-brand{order:1;display:inline-flex;width:auto;justify-content:flex-start}#toolbar #toggle-toolbar-btn{order:2;display:inline-flex}.toolbar-actions{order:2;width:100%;justify-content:flex-start;flex-wrap:wrap;gap:6px}.toolbar-divider{display:none}#toolbar button,#upload-sticker-label{min-height:34px;padding:6px 10px;font-size:12px}#left-dock{position:fixed;top:calc(var(--toolbar-offset, 0px) + 8px);left:8px;right:8px;width:auto;flex-direction:column;gap:8px;overflow:visible;padding:0;z-index:24}#right-dock{position:fixed;left:8px;right:8px;bottom:8px;top:auto;width:auto;max-height:42%;flex-direction:column;gap:8px;overflow:hidden;padding:0;z-index:24}#grid-wrapper{display:block;padding:0;overflow:auto}.dock-panel{padding:8px;border-radius:12px;min-width:0;width:100%}#grid{max-width:none;max-height:none}.tool-panel{min-width:0}.panel-title{display:block;margin-bottom:6px}#sticker-tray{display:flex;flex-wrap:nowrap;align-items:stretch;gap:6px;flex:1;min-height:0;max-height:none;overflow-x:auto;overflow-y:hidden;min-width:0;width:100%}.sticker-item{flex:0 0 56px;width:56px;min-width:56px;height:54px}}#layers-panel{flex-shrink:0}.layers-header{display:flex;align-items:center;justify-content:space-between}.layers-header .panel-title{margin:0}#add-layer-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--edge-strong);background:var(--surface-strong);border-radius:6px;width:22px;height:22px;min-width:22px;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;font-size:9px;color:var(--muted);transition:border-color .15s,color .15s}#add-layer-btn:hover{border-color:var(--accent);color:var(--accent);background:#f0fbfd}#add-layer-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.layers-list{display:flex;flex-direction:column;gap:2px;max-height:108px;overflow-y:auto}.layer-row{display:flex;align-items:center;gap:3px;padding:3px 5px;border-radius:7px;border:1px solid transparent}.layer-row:hover{background:#f0f6ff}.layer-row:focus-within{outline:2px solid var(--accent);outline-offset:1px}.layer-row.active{border-color:var(--accent);background:#e6f7fb}.layer-vis-btn,.layer-move-btn,.layer-del-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;min-width:20px;display:flex;align-items:center;justify-content:center;border:1px solid var(--edge);border-radius:5px;background:#fff;cursor:pointer;font-size:8px;color:var(--muted);padding:0}.layer-vis-btn:hover,.layer-move-btn:hover,.layer-del-btn:hover{border-color:var(--accent);color:var(--accent)}.layer-vis-btn:focus-visible,.layer-move-btn:focus-visible,.layer-del-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.layer-vis-btn:disabled,.layer-move-btn:disabled,.layer-del-btn:disabled{opacity:.3;cursor:default}.layer-vis-btn:disabled:hover,.layer-move-btn:disabled:hover,.layer-del-btn:disabled:hover{border-color:var(--edge);color:var(--muted)}.layer-name{flex:1;font-size:10px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;padding:0;text-align:left;cursor:pointer}.layer-name:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:3px}@media (max-width: 640px){#toolbar{padding:6px}.toolbar-actions{gap:5px}#grid-wrapper{padding:0}#left-dock,#right-dock{gap:6px}.dock-panel{padding:7px}.toolbar-label{min-width:46px;font-size:9px}#tool-group .btn-text{display:none}#tool-group .tool-btn{min-width:36px}#shape-type,#shape-mode{font-size:10px}}