*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--bg:#0d0d0d;--surface:#1a1a1a;--surface-2:#252525;--accent:#e8e8e8;--accent-dim:#888;--text:#f0f0f0;--text-dim:#888;--border:#ffffff14;--workspace-bg:#fff;--canvas-chrome:#e8ecf4;--danger:#c44;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--tool-size:44px;--island-inset:12px;--island-radius:16px;--island-bg:#1a1a1aeb;--layer-drawer-width:260px;--top-island-height:52px;--dock-island-height:56px;--context-island-height:52px;--tool-dock-height:var(--dock-island-height);--context-strip-height:var(--context-island-height);--bottom-ui-gap:16px;--tool-dock-bottom:calc(var(--island-inset) + var(--safe-bottom));--context-strip-bottom:calc(var(--tool-dock-height) + var(--island-inset) * 2 + var(--safe-bottom));--refine-panel-bottom:calc(var(--context-strip-bottom) + var(--context-strip-height) + var(--bottom-ui-gap));--tool-rail-width:calc(var(--tool-size) + 12px + 2px);--tool-rail-gap:8px;--brush-panel-width:280px;--brush-panel-bottom:calc(var(--context-strip-bottom) + var(--context-strip-height) + var(--bottom-ui-gap))}html,body{background:var(--bg);height:100%;color:var(--text);touch-action:none;-webkit-user-select:none;user-select:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{flex-direction:column;height:100dvh;display:flex;position:relative;overflow:hidden}.app-shell{flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.island{pointer-events:auto;background:var(--island-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--island-radius);box-shadow:0 4px 24px #00000059}.top-island{top:calc(var(--island-inset) + var(--safe-top));z-index:50;max-width:calc(100% - var(--island-inset) * 2);width:min(520px, calc(100% - var(--island-inset) * 2));align-items:center;gap:8px;padding:6px 10px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.top-group{align-items:center;gap:6px;display:flex}.top-group-end{margin-left:auto}.icon-btn,.tool-btn{width:var(--tool-size);height:var(--tool-size);min-width:var(--tool-size);min-height:var(--tool-size);border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;transition:background .15s,transform .1s,border-color .15s,box-shadow .15s;display:flex}.icon-btn i,.tool-btn i{text-align:center;width:22px;font-size:17px;line-height:1}.tool-icon-rotated{display:inline-block;transform:rotate(-45deg)}.icon-btn svg,.tool-btn svg{width:22px;height:22px}.icon-btn:active,.tool-btn:active{transform:scale(.94)}.icon-btn:disabled{opacity:.35;cursor:not-allowed}.snap-toggle{background:var(--surface-2);border-radius:10px;gap:2px;padding:3px;display:flex}.snap-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:8px;min-height:36px;padding:8px 14px;font-size:13px;font-weight:600;transition:background .15s,color .15s}.snap-btn.active{background:var(--accent);color:#111;box-shadow:0 0 0 1px #ffffff1f}.mirror-toggle{background:var(--surface-2);border-radius:10px;gap:2px;padding:3px;display:flex}.mirror-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:8px;width:44px;height:44px;font-size:13px;font-weight:700;transition:background .15s,color .15s}.mirror-btn.active{background:var(--surface-2);color:var(--accent);box-shadow:inset 0 0 0 1px #ffffff26}.workspace{flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.left-chrome{left:calc(var(--island-inset) + env(safe-area-inset-left,0px));z-index:55;align-items:center;gap:var(--tool-rail-gap);max-height:calc(100% - var(--island-inset) * 2 - var(--safe-top) - var(--safe-bottom));pointer-events:none;flex-direction:column;display:none;position:absolute;top:50%;transform:translateY(-50%)}.left-chrome>*{pointer-events:auto}.brush-panels-stack{max-height:inherit;flex-direction:column;align-items:flex-start;display:flex;position:relative}.tool-rail{max-height:inherit;overscroll-behavior:contain;flex-direction:column;flex-shrink:0;align-items:center;gap:4px;padding:6px;display:none;overflow-y:auto}.workspace-main{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.rulers{z-index:6;pointer-events:none;position:absolute;inset:0}.rulers.hidden{display:none}.ruler-corner{background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);width:24px;height:24px;position:absolute;top:0;left:0}.ruler-top,.ruler-left{background:var(--surface);border-color:var(--border);pointer-events:auto;cursor:crosshair;position:absolute;overflow:hidden}.ruler-top{border-bottom:1px solid var(--border);height:24px;top:0;left:24px;right:0}.ruler-left{border-right:1px solid var(--border);width:24px;top:24px;bottom:0;left:0}.ruler-tick{color:var(--text-dim);font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap;font-size:9px;position:absolute}.ruler-tick-h{top:2px;transform:translate(-50%)}.ruler-tick-v{transform-origin:0;left:2px;transform:translateY(-50%)rotate(-90deg)}.grid-settings{flex-direction:column;gap:8px;display:flex}.grid-size-label{color:var(--text-dim);grid-template-columns:72px 1fr 40px;align-items:center;gap:8px;font-size:12px;display:grid}.grid-size-label input[type=range]{width:100%;accent-color:var(--accent)}.grid-presets{gap:6px;display:flex}.grid-preset-btn{border:1px solid var(--border);background:var(--surface-2);min-height:36px;color:var(--text-dim);cursor:pointer;border-radius:8px;flex:1;font-size:12px;font-weight:600}.grid-preset-btn.active,.overflow-action-btn.snap-btn-style.active{background:var(--accent);border-color:var(--accent);color:#111}.install-banner{top:calc(var(--top-island-height) + var(--safe-top) + var(--island-inset) + 8px);border:1px solid var(--border);z-index:105;background:#1a1a1af5;border-radius:12px;align-items:center;gap:10px;padding:10px 14px;font-size:13px;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #0006}.install-banner.hidden{display:none}.install-btn{background:var(--accent);color:#111;cursor:pointer;border:none;border-radius:8px;padding:6px 12px;font-weight:600}.install-dismiss{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:18px}.workspace-main.rulers-on .canvas-wrap{margin-top:24px;margin-left:24px}.canvas-wrap{background:var(--workspace-bg);position:absolute;inset:0;overflow:hidden}#pixi-canvas-back,#pixi-canvas-front,#paper-canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}#pixi-canvas-back{z-index:0}#paper-canvas{z-index:1;cursor:crosshair;background:0 0}#pixi-canvas-front{z-index:2;pointer-events:none}#paper-canvas.zoom-in{cursor:zoom-in}#paper-canvas.zoom-out{cursor:zoom-out}#paper-canvas.select-mode.marquee-active,#paper-canvas.lasso-mode.lasso-active,#paper-canvas.lasso-mode,#paper-canvas.sketch-mode,#paper-canvas.pen-mode,#paper-canvas.brush-mode,#paper-canvas.eraser-mode{cursor:crosshair}#paper-canvas.panning,#paper-canvas.pan-ready{cursor:grab}#paper-canvas.panning{cursor:grabbing}.context-strip{left:50%;bottom:var(--context-strip-bottom);z-index:45;min-height:var(--context-island-height);max-width:calc(100% - var(--island-inset) * 2);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:6px 12px;display:flex;position:absolute;transform:translate(-50%)}.context-strip.hidden{display:none}body.sketch-refining .context-strip,body.color-picker-open .context-strip{display:none!important}body.sketch-refining{--refine-panel-bottom:calc(var(--context-strip-bottom) + var(--bottom-ui-gap))}.style-group{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.style-group.hidden{display:none}.brush-group{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.brush-group.hidden{display:none}.brush-size-wrap,.brush-opacity-wrap{align-items:center;gap:8px;min-width:100px;display:flex}#brush-size,#brush-opacity{accent-color:var(--accent);height:var(--tool-size);flex:1;min-width:72px}.color-swatch{width:var(--tool-size);height:var(--tool-size);border:2px solid var(--border);cursor:pointer;background-color:#333;background-image:linear-gradient(45deg,#444 25%,#0000 25%),linear-gradient(-45deg,#444 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#444 75%),linear-gradient(-45deg,#0000 75%,#444 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;border-radius:10px;flex-shrink:0;padding:0;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0003}.color-swatch:active{transform:scale(.96)}#brush-size-label,#brush-opacity-label{color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:40px;font-size:12px}.brush-opacity-wrap.hidden{display:none}.polygon-sides{background:var(--surface-2);border-radius:10px;align-items:center;gap:4px;padding:4px 6px;display:flex}.polygon-sides.hidden{display:none}.sides-btn{width:44px;height:44px;color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:8px;font-size:18px;font-weight:600}.sides-btn:active{background:#ffffff1a}#sides-label{color:var(--text-dim);text-align:center;min-width:52px;font-size:12px;font-weight:600}.color-wrap{display:none}.width-wrap,.fill-opacity-wrap{align-items:center;gap:8px;min-width:100px;display:flex}#stroke-width,#fill-opacity{accent-color:var(--accent);height:var(--tool-size);flex:1;min-width:72px}#width-label,#fill-opacity-label{color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:32px;font-size:12px}.tool-dock{left:50%;bottom:calc(var(--island-inset) + var(--safe-bottom));z-index:50;min-height:var(--dock-island-height);max-width:calc(100% - var(--island-inset) * 2);justify-content:center;align-items:center;gap:4px;padding:6px 8px;display:flex;position:absolute;transform:translate(-50%)}.tool-dock .tool-secondary{display:none}.tool-dock.expanded .tool-secondary{display:flex}.tool-dock .tool-more{letter-spacing:1px;font-size:20px;font-weight:700}.tool-dock.expanded .tool-more{background:var(--accent);color:#111}.tool-btn.active{background:var(--accent);color:#111;border-color:#fff3;box-shadow:0 0 12px #ffffff14}.tool-rail .tool-btn,.tool-dock .tool-btn{padding:0;overflow:hidden}.tool-rail .tool-btn:hover:not(:disabled):not(.active),.tool-dock .tool-btn:hover:not(:disabled):not(.active){background:#ffffff1a}.tool-btn:hover:not(:disabled):not(.active){background:#2a2a2a;border-color:#ffffff26}.angle-badge{top:calc(var(--top-island-height) + var(--island-inset) + var(--safe-top) + 8px);border:1px solid var(--border);font-variant-numeric:tabular-nums;pointer-events:none;-webkit-backdrop-filter:blur(8px);z-index:5;background:#1a1a1aeb;border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;position:absolute;left:50%;transform:translate(-50%)}.angle-badge.hidden{display:none}.finish-poly{bottom:calc(var(--dock-island-height) + var(--island-inset) * 2 + var(--safe-bottom) + 8px);background:var(--accent);color:#111;cursor:pointer;z-index:10;border:1px solid #ffffff26;border-radius:24px;min-height:44px;padding:12px 24px;font-size:14px;font-weight:600;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #00000059}.finish-poly.hidden{display:none}.finish-poly:active{transform:translate(-50%)scale(.96)}.sketch-refine{bottom:var(--refine-panel-bottom);width:min(380px, calc(100% - var(--island-inset) * 2));border:1px solid var(--border);z-index:55;-webkit-backdrop-filter:blur(10px);background:#1a1a1af5;border-radius:16px;padding:14px 16px;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #00000073}.sketch-refine.hidden{display:none}.sketch-refine-header{color:var(--text-dim);text-align:center;margin-bottom:10px;font-size:13px;font-weight:600}.sketch-refine-controls{flex-direction:column;gap:8px;margin-bottom:12px;display:flex}.sketch-slider{color:var(--text-dim);grid-template-columns:64px 1fr 36px;align-items:center;gap:8px;font-size:12px;display:grid}.sketch-slider input[type=range]{width:100%;accent-color:var(--accent);height:28px}.sketch-slider-value{font-variant-numeric:tabular-nums;text-align:right;color:var(--text);font-weight:600}.sketch-close-mode{background:var(--surface-2);border-radius:10px;gap:2px;margin-bottom:12px;padding:3px;display:flex}.sketch-close-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;min-height:44px;padding:8px 10px;font-size:12px;font-weight:600;transition:background .15s,color .15s}.sketch-close-btn.active{background:var(--accent);color:#111}.sketch-refine-actions{gap:8px;display:flex}.sketch-action-btn{border:1px solid var(--border);background:var(--surface-2);min-height:44px;color:var(--text);cursor:pointer;border-radius:10px;flex:1;padding:10px 16px;font-size:13px;font-weight:600;transition:background .15s,transform .1s}.sketch-action-btn.primary{background:var(--accent);border-color:var(--accent);color:#111}.sketch-action-btn:active{transform:scale(.97)}.boolean-bar{background:var(--surface-2);border-radius:10px;gap:2px;padding:3px;display:flex}.bool-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:8px;width:44px;height:44px;font-size:16px;font-weight:700;transition:background .15s,color .15s}.bool-btn:not(:disabled):hover,.bool-btn:not(:disabled):active{color:var(--accent);background:#ffffff1a}.bool-btn:disabled{opacity:.3;cursor:not-allowed}.boolean-pill{top:calc(var(--top-island-height) + var(--safe-top) + var(--island-inset) + 8px);border:1px solid var(--border);z-index:18;-webkit-backdrop-filter:blur(10px);background:#1a1a1af5;border-radius:24px;gap:2px;padding:4px;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #0006}.boolean-pill.hidden{display:none}.overflow-backdrop{z-index:90;opacity:0;pointer-events:none;background:#00000080;transition:opacity .2s;position:fixed;inset:0}.overflow-backdrop.open{opacity:1;pointer-events:auto}.overflow-backdrop.hidden{display:none}.overflow-backdrop.open:not(.hidden){display:block}.overflow-sheet{z-index:100;background:var(--surface);border:1px solid var(--border);flex-direction:column;gap:16px;max-height:min(85vh,520px);padding:16px;transition:transform .25s,opacity .2s;display:flex;position:fixed;overflow-y:auto}.overflow-sheet.hidden{display:none}.overflow-sheet:not(.hidden){display:flex}.overflow-sheet{padding-bottom:calc(16px + var(--safe-bottom));border-radius:16px 16px 0 0;bottom:0;left:0;right:0;transform:translateY(100%)}.overflow-sheet.open{transform:translateY(0)}.overflow-handle{background:var(--border);border-radius:2px;width:36px;height:4px;margin:0 auto}.overflow-drag-zone{cursor:grab;touch-action:none;flex-shrink:0;margin:-16px -16px 0;padding:8px 16px 4px}.overflow-sheet.dragging{transition:none}.canvas-presets{flex-wrap:wrap;gap:6px;display:flex}.canvas-preset-btn{border:1px solid var(--border);background:var(--surface-2);min-width:72px;min-height:44px;color:var(--text-dim);cursor:pointer;border-radius:8px;flex:calc(33% - 6px);padding:8px 10px;font-size:12px;font-weight:600;transition:background .15s,color .15s,border-color .15s}.canvas-preset-btn.active{background:var(--accent);border-color:var(--accent);color:#111}.canvas-custom{flex-direction:column;gap:8px;margin-top:4px;display:flex}.canvas-custom.hidden{display:none}.canvas-custom-row{gap:8px;display:flex}.canvas-custom-field{color:var(--text-dim);flex-direction:column;flex:1;gap:4px;font-size:11px;font-weight:600;display:flex}.canvas-custom-field input{border:1px solid var(--border);background:var(--surface-2);width:100%;min-height:44px;color:var(--text);font-variant-numeric:tabular-nums;border-radius:8px;padding:8px 10px;font-size:14px}.canvas-apply-btn{border:1px solid var(--border);background:var(--surface-2);min-height:44px;color:var(--text);cursor:pointer;border-radius:8px;padding:10px 16px;font-size:13px;font-weight:600}.canvas-size-label{color:var(--text-dim);text-align:center;font-variant-numeric:tabular-nums;font-size:12px}.overflow-section{flex-direction:column;gap:8px;display:flex}.overflow-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);font-size:11px;font-weight:700}.overflow-snap .snap-btn{flex:1}.overflow-actions{flex-direction:column;gap:8px;display:flex}.overflow-action-btn{border:1px solid var(--border);background:var(--surface-2);width:100%;min-height:44px;color:var(--text);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:10px;padding:10px 16px;font-size:14px;font-weight:600;transition:background .15s,transform .1s;display:flex}.overflow-action-btn i{text-align:center;flex-shrink:0;width:20px;font-size:16px}.overflow-action-btn svg{flex-shrink:0;width:20px;height:20px}.overflow-action-btn:active{transform:scale(.98)}.overflow-action-btn.danger{color:var(--danger);border-color:#c446}.overflow-action-btn.danger:active{color:#f0a0a0;background:#c443}.clear-section{border-top:1px solid var(--border);padding-top:16px}.clear-prompt{color:var(--text-dim);text-align:center;font-size:13px}.toast{bottom:calc(var(--dock-island-height) + var(--island-inset) * 2 + var(--safe-bottom) + 16px);border:1px solid var(--border);color:var(--text);z-index:110;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(10px);text-align:center;background:#1a1a1af5;border-radius:12px;max-width:calc(100% - 32px);padding:12px 20px;font-size:14px;font-weight:500;transition:opacity .25s,transform .25s;position:fixed;left:50%;transform:translate(-50%)translateY(20px)}.toast.visible{opacity:1;transform:translate(-50%)translateY(0)}.toast.hidden{display:block}@media (width<=519px){.top-island{gap:6px;padding:4px 8px}.snap-btn{padding:6px 10px;font-size:12px}#width-label{display:none}.width-wrap{min-width:80px}.context-strip{bottom:calc(var(--context-strip-bottom) + 4px);padding:4px 8px}.toast{bottom:calc(var(--dock-island-height) + var(--context-island-height) + var(--island-inset) * 2 + var(--safe-bottom) + 8px)}}@media (width>=768px){.tool-dock{display:none}.left-chrome{display:flex}.tool-rail{display:flex;position:relative;top:auto;left:auto;transform:none}.tool-rail .tool-secondary,.tool-rail .tool-more{display:flex}.tool-rail .tool-more{display:none}:root{--context-strip-bottom:calc(var(--island-inset) + var(--safe-bottom));--refine-panel-bottom:calc(var(--context-strip-bottom) + var(--context-strip-height) + var(--bottom-ui-gap))}body.sketch-refining{--refine-panel-bottom:calc(var(--context-strip-bottom) + var(--bottom-ui-gap))}.context-strip{bottom:var(--context-strip-bottom)}.finish-poly{bottom:calc(var(--context-strip-bottom) + var(--bottom-ui-gap))}.toast{bottom:calc(var(--context-island-height) + var(--island-inset) * 2 + var(--safe-bottom) + 16px)}.overflow-sheet{left:auto;right:var(--island-inset);top:calc(var(--top-island-height) + var(--safe-top) + var(--island-inset) + 4px);border-radius:var(--island-radius);opacity:0;pointer-events:none;width:min(320px,100vw - 24px);bottom:auto;transform:translateY(-8px);box-shadow:0 8px 32px #0006}.overflow-sheet.open{opacity:1;pointer-events:auto;transform:translateY(0)}.overflow-handle{display:none}.overflow-backdrop.open{background:0 0}.boolean-pill:not(.hidden){display:flex}}@media (width<=767px){.boolean-pill{display:none!important}.overflow-drag-zone{display:block}}@media (width>=768px){.overflow-drag-zone{display:none}}@media (width<=900px) and (orientation:landscape){:root{--dock-island-height:44px;--context-island-height:40px;--top-island-height:44px;--tool-size:40px}.top-island{padding:4px 8px}.tool-dock{gap:2px;padding:4px 6px}.tool-dock .tool-btn{width:40px;min-width:40px;height:40px;min-height:40px}.context-strip{gap:6px;padding:4px 8px}#stroke-width,#fill-opacity{min-width:60px;height:36px}.sketch-refine{max-height:min(45vh,220px);padding:10px 12px;overflow-y:auto}.sketch-refine-controls{gap:4px;margin-bottom:8px}.sketch-slider{grid-template-columns:56px 1fr 32px;gap:6px}.sketch-close-btn,.sketch-action-btn{min-height:36px;padding:6px 10px}.finish-poly{bottom:calc(var(--dock-island-height) + var(--island-inset) + var(--safe-bottom) + 4px);min-height:36px;padding:8px 18px;font-size:13px}.overflow-sheet{max-height:min(90vh,400px)}}.hidden-file-input{opacity:0;pointer-events:none;width:0;height:0;position:absolute}.layer-panel-backdrop{z-index:30;opacity:0;pointer-events:none;background:#00000080;transition:opacity .22s;position:absolute;inset:0}.layer-panel-backdrop.open{opacity:1;pointer-events:auto}.layer-panel-backdrop.hidden{display:none}.layer-panel-backdrop.open:not(.hidden){display:block}.layer-panel.layer-drawer{width:min(var(--layer-drawer-width), 85vw);z-index:40;background:var(--surface);border:none;border-left:1px solid var(--border);border-radius:0;flex-direction:column;max-height:none;transition:transform .22s;display:flex;position:absolute;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-8px 0 32px #00000059}.layer-panel.hidden{display:none}.layer-panel:not(.hidden){display:flex}.layer-panel.open{transform:translate(0)}@media (width>=768px){.layer-panel-backdrop.open{background:#00000040}}.layer-panel-header{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;padding:12px 12px 8px;display:flex}.layer-panel-title{flex:1;font-size:15px;font-weight:700}.layer-active-label{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;max-width:100px;font-size:11px;overflow:hidden}.layer-panel-close{width:44px;min-width:44px;height:44px;min-height:44px}.layer-list{flex-direction:column;flex:1;gap:4px;min-height:120px;padding:8px;display:flex;overflow-y:auto}.layer-row{background:var(--surface-2);border:1px solid #0000;border-radius:10px;overflow:hidden}.layer-row.active{border-color:var(--accent);box-shadow:0 0 0 1px #ffffff1f}.layer-row-main{align-items:center;gap:4px;min-height:44px;padding:4px;display:flex}.layer-select-btn{min-height:44px;color:var(--text);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;flex:1;align-items:center;gap:8px;padding:4px 8px;display:flex}.layer-select-btn:active{background:#ffffff0f}.layer-type-icon{text-align:center;width:20px;color:var(--text-dim);flex-shrink:0;justify-content:center;align-items:center;font-size:14px;display:flex}.layer-type-icon i{font-size:13px}.layer-name-wrap{flex:1;min-width:0}.layer-name{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;display:block;overflow:hidden}.layer-rename-input{border:1px solid var(--accent);background:var(--bg);width:100%;min-height:36px;color:var(--text);border-radius:6px;padding:6px 8px;font-size:13px}.layer-actions,.layer-reorder{align-items:center;gap:2px;display:flex}.layer-icon-btn{width:44px;min-width:44px;height:44px;min-height:44px;color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex}.layer-icon-btn svg{width:18px;height:18px}.layer-icon-btn.on,.layer-icon-btn:active{color:var(--accent);background:#ffffff14}.layer-icon-btn i{font-size:15px}.layer-icon-btn.off{opacity:.45}.layer-icon-btn:disabled{opacity:.25;cursor:not-allowed}.layer-detail{border-top:1px solid var(--border);flex-direction:column;gap:8px;padding:8px 12px 12px;display:flex}.layer-detail-row{color:var(--text-dim);grid-template-columns:64px 1fr 40px;align-items:center;gap:8px;font-size:12px;display:grid}.layer-detail-row input[type=range]{width:100%;accent-color:var(--accent);height:28px}.layer-fit-row{background:var(--bg);border-radius:8px;gap:2px;padding:3px;display:flex}.layer-fit-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:6px;flex:1;min-height:44px;font-size:11px;font-weight:600}.layer-fit-btn.active{background:var(--accent);color:#111}.layer-ref-actions{gap:8px;display:flex}.layer-detail-btn{border:1px solid var(--border);background:var(--bg);min-height:44px;color:var(--text);cursor:pointer;border-radius:8px;flex:1;padding:8px 12px;font-size:12px;font-weight:600}.layer-detail-btn.danger{color:var(--danger);border-color:#c446}.layer-panel-actions{border-top:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;gap:6px;padding:8px 12px 12px;display:flex}.layer-add-btn{border:1px dashed var(--border);min-height:44px;color:var(--text-dim);cursor:pointer;background:0 0;border-radius:8px;flex:calc(50% - 6px);padding:8px 6px;font-size:11px;font-weight:600}.layer-add-btn:active{color:var(--text);background:#ffffff0d}.layer-delete-sheet{z-index:120;background:var(--surface);border:1px solid var(--border);opacity:0;pointer-events:none;border-radius:14px;width:min(320px,100% - 32px);padding:20px;transition:opacity .2s,transform .2s;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(.95);box-shadow:0 12px 40px #00000073}.layer-delete-sheet.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)scale(1)}.layer-delete-sheet.hidden{display:none}.layer-delete-sheet:not(.hidden){display:block}.layer-delete-msg{color:var(--text);text-align:center;margin-bottom:16px;font-size:14px}.layer-delete-actions{gap:8px;display:flex}.overflow-actions-inline{flex-flow:wrap}.overflow-actions-inline .overflow-action-btn{flex:calc(50% - 4px)}.color-picker-panel{flex-direction:column;flex-shrink:0;gap:12px;padding:12px;display:flex}.color-picker-header{justify-content:flex-end;align-items:center;gap:8px;display:flex}.color-picker-icon-btn{border:1px solid var(--border);background:var(--surface-2);width:36px;height:36px;color:var(--text);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;display:flex}.color-picker-icon-btn.active{background:var(--accent);color:#111;border-color:#fff3}.color-picker-sv{border:1px solid var(--border);cursor:crosshair;touch-action:none;border-radius:8px;width:100%;height:140px}.color-picker-hue{width:100%;height:14px;accent-color:var(--accent);border-radius:7px}.color-picker-row{align-items:center;gap:6px;display:flex}.color-picker-label{color:var(--text-dim);font-size:13px;font-weight:600}.color-picker-hex{border:1px solid var(--border);background:var(--surface-2);min-height:36px;color:var(--text);text-transform:uppercase;border-radius:8px;flex:1;padding:6px 10px;font-family:ui-monospace,monospace;font-size:13px}.color-picker-opacity-wrap.hidden{display:none}.color-picker-opacity-label{color:var(--text-dim);grid-template-columns:56px 1fr;align-items:center;gap:8px;font-size:12px;display:grid}.color-picker-opacity-label input[type=range]{width:100%;accent-color:var(--accent)}.color-picker-section-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:6px;font-size:10px;font-weight:700;display:block}.color-picker-grid{grid-template-columns:repeat(7,1fr);gap:4px;display:grid}.palette-swatch{aspect-ratio:1;border:1px solid var(--border);cursor:pointer;border-radius:6px;min-height:24px;padding:0}.palette-swatch:active{transform:scale(.92)}body.eyedropper-active #paper-canvas{cursor:crosshair!important}.brush-panel-backdrop{z-index:30;opacity:0;pointer-events:none;background:#00000059;transition:opacity .22s;position:absolute;inset:0}.brush-panel-backdrop.open{opacity:1;pointer-events:auto}.brush-panel{width:var(--brush-panel-width);max-height:calc(100vh - var(--top-island-height) - var(--island-inset) * 4);z-index:40;background:var(--surface);border:1px solid var(--border);border-radius:var(--island-radius);opacity:0;pointer-events:none;flex-direction:column;flex-shrink:0;transition:transform .22s,opacity .22s;display:flex;position:relative;top:auto;bottom:auto;left:auto;overflow:hidden;transform:translate(-12px);box-shadow:0 8px 32px #00000073}.brush-panel.open{opacity:1;pointer-events:auto;transform:translate(0)}.brush-panel:not(.open){visibility:hidden;width:0;min-width:0;box-shadow:none;border:none;position:absolute;overflow:hidden}.brush-panel-header{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;padding:12px;display:flex}.brush-panel-title{flex:1;font-size:15px;font-weight:700}.brush-preset-list{flex-direction:column;flex:1;gap:4px;padding:8px;display:flex;overflow-y:auto}.brush-preset-row{background:var(--surface-2);cursor:pointer;text-align:left;color:var(--text);border:1px solid #0000;border-radius:10px;align-items:center;gap:8px;padding:8px 10px;font-size:13px;display:flex}.brush-preset-row.active{border-color:var(--accent)}.brush-preset-row:hover{border-color:#ffffff26}.brush-preset-dot{border:1px solid var(--border);border-radius:50%;flex-shrink:0;width:20px;height:20px}.brush-preset-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.brush-editor{border-top:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:10px;max-height:45%;padding:12px;display:flex;overflow-y:auto}.brush-field{color:var(--text-dim);grid-template-columns:72px 1fr 40px;align-items:center;gap:8px;font-size:12px;display:grid}.brush-field input[type=range]{width:100%;accent-color:var(--accent)}.brush-field input[type=text],.brush-field input[type=color]{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:8px;grid-column:2/-1;min-height:36px;padding:8px 10px}.brush-field input[type=color]{height:36px;padding:4px}.brush-field select{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:8px;grid-column:2/-1;min-height:36px;padding:8px 10px}.brush-panel-actions{border-top:1px solid var(--border);flex-wrap:wrap;gap:6px;padding:10px 12px;display:flex}.brush-action-btn{border:1px solid var(--border);background:var(--surface-2);min-width:calc(50% - 4px);min-height:44px;color:var(--text);cursor:pointer;border-radius:10px;flex:1;padding:10px 12px;font-size:12px;font-weight:600}.brush-action-btn.primary{background:var(--accent);color:#111;border-color:var(--accent)}.brush-action-btn.danger{color:var(--danger)}@media (width<=767px){.left-chrome{z-index:40;pointer-events:none;max-height:none;display:block;position:absolute;inset:0;transform:none}.brush-panels-stack{pointer-events:none;position:absolute;inset:0}.brush-panel-backdrop.open{background:#00000080}.brush-panel{width:min(var(--brush-panel-width), 85vw);border-left:1px solid var(--border);opacity:1;visibility:visible;border-radius:0;max-height:none;position:absolute;inset:0 0 0 auto;transform:translate(100%);box-shadow:-8px 0 32px #00000059}.brush-panel:not(.open){pointer-events:none}.brush-panel.open{pointer-events:auto;transform:translate(0)}}@media (width>=768px){.brush-panel-backdrop.open{background:#00000040}}.settings-panel-backdrop{z-index:30;opacity:0;pointer-events:none;background:#00000080;transition:opacity .22s;position:absolute;inset:0}.settings-panel-backdrop.open{opacity:1;pointer-events:auto}.settings-panel-backdrop.hidden{display:none}.settings-panel-backdrop.open:not(.hidden){display:block}.settings-panel{width:min(var(--layer-drawer-width), 85vw);z-index:40;background:var(--surface);border:none;border-left:1px solid var(--border);border-radius:0;flex-direction:column;max-height:none;transition:transform .22s;display:flex;position:absolute;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-8px 0 32px #00000059}.settings-panel.hidden{display:none}.settings-panel:not(.hidden){display:flex}.settings-panel.open{pointer-events:auto;transform:translate(0)}.settings-panel:not(.open){pointer-events:none}.right-chrome{width:min(var(--layer-drawer-width), 85vw);z-index:40;background:var(--surface);border-left:1px solid var(--border);pointer-events:none;flex-direction:column;transition:transform .22s;display:flex;position:absolute;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-8px 0 32px #00000059}.right-chrome.open{pointer-events:auto;transform:translate(0)}.right-chrome-tool-section{border-top:1px solid var(--border);flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.settings-panel-header{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;padding:12px 12px 8px;display:flex}.settings-panel-title{flex:1;font-size:15px;font-weight:700}.settings-panel-close{width:44px;min-width:44px;height:44px;min-height:44px}.settings-panel-body{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}@media (width>=768px){.settings-panel-backdrop.open{background:#00000040}}.icon-btn.active{background:var(--accent);color:#111;border-color:#fff3}.brush-library-backdrop{z-index:35;opacity:0;pointer-events:none;background:#00000073;transition:opacity .22s;position:absolute;inset:0}.brush-library-backdrop.open{opacity:1;pointer-events:auto}.brush-library{width:min(var(--layer-drawer-width), 85vw);z-index:45;background:var(--surface);border-left:1px solid var(--border);pointer-events:none;flex-direction:column;transition:transform .22s;display:flex;position:absolute;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-8px 0 32px #00000059}.brush-library.open:not(.embedded){pointer-events:auto;transform:translate(0)}.brush-library.embedded{width:100%;box-shadow:none;pointer-events:auto;border:none;flex:1;min-height:0;position:static;transform:none}.brush-library-header{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;padding:12px;display:flex}.brush-library-title{flex:1;margin:0;font-size:15px;font-weight:700}.brush-library-body{flex:1;min-height:0;display:flex;overflow:hidden}.brush-category-nav{border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;gap:4px;width:72px;padding:8px 6px;display:flex;overflow-y:auto}.brush-category-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;font-size:10px;font-weight:600;transition:background .15s,color .15s,border-color .15s;display:flex}.brush-category-btn i{font-size:16px}.brush-category-btn.active{background:var(--surface-2);color:var(--text);border-color:var(--accent)}.brush-grid-wrap{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.brush-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));align-content:start;gap:8px;padding:10px;display:grid;overflow-y:auto}.brush-card{border:1px solid var(--border);background:var(--surface-2);cursor:pointer;color:var(--text);text-align:center;border-radius:12px;flex-direction:column;gap:6px;padding:8px;transition:border-color .15s,transform .1s;display:flex}.brush-card:hover{border-color:#fff3}.brush-card.active{border-color:var(--accent);box-shadow:0 0 0 1px #ffffff14}.brush-card-preview{background:#00000040;border-radius:8px;align-items:center;min-height:44px;padding:6px 4px;display:flex}.brush-card-name{text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;overflow:hidden}.brush-library-settings{border-top:1px solid var(--border);background:var(--surface);flex-wrap:wrap;flex-shrink:0;gap:10px;padding:10px 12px;display:flex}.brush-mini-field{color:var(--text-dim);flex:1;align-items:center;gap:8px;min-width:120px;font-size:12px;display:flex}.brush-mini-field input[type=range]{accent-color:var(--accent);flex:1}.brush-mini-field input[type=color]{border:1px solid var(--border);background:var(--surface-2);border-radius:6px;width:36px;height:28px;padding:2px}.brush-preset-preview{background:#0003;border-radius:6px;flex-shrink:0;width:52px;padding:2px 4px}.floating-tool-strip{left:50%;bottom:calc(var(--tool-dock-height) + var(--island-inset) * 2 + var(--safe-bottom) + var(--context-island-height) + var(--bottom-ui-gap));z-index:48;max-width:calc(100% - var(--island-inset) * 2 - var(--left-chrome-width,0px));align-items:center;gap:6px;padding:6px 10px;display:flex;position:absolute;transform:translate(-50%)}.fts-preview{border:1px solid var(--border);background:#00000040;border-radius:8px;width:56px;padding:4px 6px}.fts-btn{border:1px solid var(--border);background:var(--surface-2);width:40px;height:40px;color:var(--text);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;transition:background .15s,border-color .15s;display:flex}.fts-btn.active{background:var(--accent);color:#111;border-color:#fff3}.fts-size{width:88px;padding:0 4px}.fts-size input[type=range]{width:100%;accent-color:var(--accent)}.fts-color{cursor:pointer;border:2px solid #ffffff59;border-radius:50%;flex-shrink:0;width:36px;height:36px}.color-preview{pointer-events:auto;flex-direction:column;align-items:center;gap:5px;padding:8px 6px;display:flex}.color-preview-stack{flex-shrink:0;width:36px;height:36px;position:relative}.color-preview-stack .color-swatch{border-width:1px;border-radius:4px;width:26px;min-width:26px;height:26px;min-height:26px;position:absolute}.color-preview-fill{z-index:1;top:0;left:0}.color-preview-stroke{z-index:2;border:2px solid #fff;bottom:0;right:0;box-shadow:inset 0 0 0 1px #00000040,0 1px 3px #00000059}.color-preview-stack .color-swatch.is-none{box-shadow:none}.color-preview-stack .color-swatch.is-none:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(to top right,#0000 calc(50% - 1.25px),#e53935 calc(50% - 1.25px) calc(50% + 1.25px),#0000 calc(50% + 1.25px));position:absolute;inset:0}.color-preview-swap{width:32px;height:22px;color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:0;font-size:11px;transition:color .15s,background .15s;display:flex}.color-preview-swap:hover{color:var(--text);background:var(--surface-2)}.color-preview-swap:active{transform:scale(.94)}@media (width<=767px){.left-chrome{top:auto;bottom:calc(var(--tool-dock-height) + var(--island-inset) + var(--safe-bottom));left:var(--island-inset);right:var(--island-inset);flex-direction:row;max-height:none;display:flex;transform:none}.left-chrome .tool-rail{display:none}.left-chrome .color-preview{flex-direction:row;flex:1;justify-content:center;gap:8px;padding:6px 10px}.left-chrome .color-preview-swap{width:28px;height:var(--tool-size)}.floating-tool-strip{bottom:calc(var(--tool-dock-height) + var(--island-inset) * 2 + var(--safe-bottom) + 52px);max-width:calc(100% - var(--island-inset) * 2);flex-wrap:wrap;justify-content:center}.brush-category-nav{width:56px}.brush-category-btn span{display:none}}