:root{--toolbar-height:56px;--toolbar-bg:#fff;--toolbar-border:#e5e7eb;--btn-hover:#f3f4f6;--btn-active:#e5e7eb;--primary-color:#2563eb;--canvas-bg:#fff;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px -1px #0000001a;--radius-sm:6px;--radius-md:8px}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--canvas-bg);-webkit-user-select:none;user-select:none;overscroll-behavior:none;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}.toolbar{height:var(--toolbar-height);background:var(--toolbar-bg);border-bottom:1px solid var(--toolbar-border);z-index:100;box-shadow:var(--shadow-sm);touch-action:manipulation;justify-content:space-between;align-items:center;padding:0 12px;display:flex;position:fixed;top:0;left:0;right:0}.menu-wrapper{display:none;position:relative}.menu-btn{display:flex}.menu-dropdown{border-radius:var(--radius-md);box-shadow:var(--shadow-md);visibility:hidden;opacity:0;z-index:200;background:#fff;flex-direction:column;gap:2px;min-width:200px;padding:6px;display:none;position:absolute;top:calc(100% + 8px);left:auto;right:0}.menu-dropdown.show{visibility:visible;opacity:1;display:flex}.menu-option{border-radius:var(--radius-sm);cursor:pointer;color:#374151;text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:14px;display:flex}.menu-option:hover{background:var(--btn-hover)}.menu-option svg{flex-shrink:0;width:18px;height:18px}.menu-option-value{color:#2563eb;background:#eef2ff;border-radius:999px;margin-left:auto;padding:2px 7px;font-size:12px;font-weight:600}.menu-divider{background:var(--toolbar-border);height:1px;margin:4px 0}.mobile-tools{touch-action:manipulation;align-items:center;gap:2px;display:none;overflow:visible}.mobile-tools .toolbar-btn,.mobile-tools .color-picker,.mobile-tools .stroke-picker,.mobile-tools .smart-shape-picker{flex-shrink:0}.mobile-tools .toolbar-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.mobile-tools .toolbar-divider{flex-shrink:0;height:24px;margin:0 4px}.color-dropdown-mobile,.stroke-dropdown-mobile,.smart-shape-dropdown-mobile{z-index:300;position:fixed!important}.toolbar-left,.toolbar-center,.toolbar-right{align-items:center;gap:4px;display:flex}.toolbar-logo{border-radius:var(--radius-sm);align-items:center;padding:8px;transition:background .2s;display:flex}.toolbar-logo:hover{background:var(--btn-hover)}.toolbar-logo img{width:28px;height:28px}.toolbar-divider{background:var(--toolbar-border);width:1px;height:28px;margin:0 8px}.toolbar-btn{border-radius:var(--radius-sm);cursor:pointer;color:#374151;background:0 0;border:none;justify-content:center;align-items:center;width:40px;height:40px;transition:background .2s;display:flex}.toolbar-btn:hover:not(:disabled){background:var(--btn-hover)}.toolbar-btn:active:not(:disabled){background:var(--btn-active)}.toolbar-btn.active{background:var(--primary-color);color:#fff}.toolbar-btn:disabled{opacity:.4;cursor:not-allowed}.toolbar-btn svg{width:20px;height:20px}.save-status{color:#166534;white-space:nowrap;background:#ecfdf5;border-radius:999px;align-items:center;gap:5px;min-height:30px;padding:4px 8px;font-size:12px;font-weight:650;display:inline-flex}.save-status[data-status=saving]{color:#1d4ed8;background:#eff6ff}.save-status[data-status=error]{color:#b91c1c;background:#fef2f2}.save-status-icon{place-items:center;width:16px;height:16px;font-weight:800;display:grid}.color-picker,.stroke-picker,.smart-shape-picker,.lang-picker{position:relative}.color-btn{padding:6px}.color-indicator{border:2px solid #d1d5db;border-radius:50%;width:20px;height:20px}.color-dropdown,.stroke-dropdown,.smart-shape-dropdown,.lang-dropdown{border-radius:var(--radius-md);box-shadow:var(--shadow-md);visibility:hidden;opacity:0;z-index:200;background:#fff;padding:8px;display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.color-dropdown.show,.stroke-dropdown.show,.smart-shape-dropdown.show,.lang-dropdown.show{visibility:visible;opacity:1;gap:6px;display:flex}.color-option{cursor:pointer;border:2px solid #0000;border-radius:50%;width:32px;height:32px;transition:transform .15s,border-color .15s}.color-option:hover{transform:scale(1.1)}.color-option.active{border-color:#374151}.stroke-dropdown{flex-direction:column;gap:4px;padding:6px}.smart-shape-dropdown{flex-direction:column;gap:10px;min-width:220px;padding:10px}.smart-shape-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.smart-shape-toggle{color:#111827;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;font-size:14px;display:flex}.smart-shape-toggle input{width:18px;height:18px}.smart-shape-row-slider{gap:8px}.smart-shape-label{color:#374151;width:72px;font-size:12px}#smartShapeSensitivity{flex:1}.smart-shape-value{color:#374151;text-align:right;width:28px;font-size:12px}.smart-shape-presets{gap:6px;display:flex}.smart-shape-preset{border-radius:var(--radius-sm);cursor:pointer;color:#374151;background:0 0;border:none;flex:1;height:34px;font-size:12px}.smart-shape-preset:hover{background:var(--btn-hover)}.smart-shape-preset.active{background:var(--btn-active)}.stroke-option{border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:80px;height:32px;display:flex}.stroke-option:hover{background:var(--btn-hover)}.stroke-option.active{background:var(--btn-active)}.stroke-preview{background:#374151;border-radius:2px;width:60px}.lang-dropdown{flex-direction:column;gap:4px;padding:6px;left:auto;right:0;transform:none}.lang-option{border-radius:var(--radius-sm);cursor:pointer;color:#374151;background:0 0;border:none;justify-content:center;align-items:center;width:80px;height:32px;font-size:14px;display:flex}.lang-option:hover{background:var(--btn-hover)}.lang-option.active{background:var(--btn-active)}.canvas-container{top:var(--toolbar-height);background:var(--canvas-bg);touch-action:none;position:fixed;bottom:0;left:0;right:0;overflow:hidden}.hero-section{z-index:10;background:var(--canvas-bg);pointer-events:none;justify-content:center;align-items:center;transition:opacity .3s,visibility .3s;display:flex;position:absolute;inset:0}.hero-section.hidden{opacity:0;visibility:hidden}.hero-content{text-align:center;pointer-events:none;max-width:400px;padding:24px}.hero-icon{justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 20px;display:flex}.hero-icon img{width:100%;height:100%}.hero-title{color:#111827;margin-bottom:8px;font-size:24px;font-weight:600}.hero-brand{color:#2563eb}.hero-subtitle{color:#6b7280;margin-bottom:24px;font-size:16px}.hero-features{flex-direction:column;gap:12px;margin-bottom:24px;display:flex}.hero-feature{border-radius:var(--radius-md);color:#374151;background:#f9fafb;align-items:center;gap:12px;padding:12px 16px;font-size:14px;display:flex}.hero-feature svg{width:20px;height:20px;color:var(--primary-color);flex-shrink:0}.hero-divider{align-items:center;gap:16px;margin-bottom:24px;display:flex}.hero-divider:before,.hero-divider:after{content:"";background:#e5e7eb;flex:1;height:1px}.hero-divider span{color:#9ca3af;text-transform:uppercase;letter-spacing:.5px;font-size:14px}.hero-import-section{flex-direction:column;align-items:center;gap:12px;display:flex}.hero-import-btn{border:2px solid var(--toolbar-border);border-radius:var(--radius-md);color:#374151;cursor:pointer;pointer-events:auto;background:#fff;align-items:center;gap:10px;padding:14px 28px;font-size:16px;font-weight:500;transition:border-color .2s,background .2s;display:flex}.hero-import-btn:hover{border-color:var(--primary-color);background:#f9fafb}.hero-import-btn svg{width:20px;height:20px;color:var(--primary-color)}.hero-hint{color:#6b7280;font-size:14px}.hero-formats{color:#9ca3af;font-size:12px}@media (width<=480px){.hero-content{padding:16px}.hero-icon{width:64px;height:64px}.hero-title{font-size:20px}.hero-subtitle{font-size:14px}.hero-import-btn{padding:12px 20px;font-size:14px}.hero-feature{padding:10px 12px;font-size:13px}.hero-feature svg{width:18px;height:18px}}.images-layer{pointer-events:none;z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.images-layer .imported-image{pointer-events:auto;cursor:move;border:2px solid #0000;transition:border-color .2s;position:absolute}.images-layer .imported-image:hover,.images-layer .imported-image.selected{border-color:var(--primary-color)}.images-layer .imported-image img{pointer-events:none;max-width:100%;height:auto;display:block}.images-layer .imported-image .resize-handle{border:3px solid var(--primary-color);touch-action:none;background:#fff;border-radius:4px;width:20px;height:20px;display:none;position:absolute}.images-layer .imported-image .resize-nw{cursor:nwse-resize;top:-11px;left:-11px}.images-layer .imported-image .resize-ne{cursor:nesw-resize;top:-11px;right:-11px}.images-layer .imported-image .resize-sw{cursor:nesw-resize;bottom:-11px;left:-11px}.images-layer .imported-image .resize-se{cursor:nwse-resize;bottom:-11px;right:-11px}.images-layer .imported-image.selected .resize-handle{display:block}.images-layer .imported-image .delete-handle{cursor:pointer;color:#fff;background:#dc2626;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;font-weight:700;display:none;position:absolute;top:-8px;right:-8px}.images-layer .imported-image.selected .delete-handle{display:flex}.canvas-container.tool-select .images-layer{z-index:4}#drawingCanvas{z-index:2;touch-action:none;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}#liveCanvas{z-index:3;touch-action:none;width:100%;height:100%;position:absolute;top:0;left:0}.drop-zone{border:3px dashed var(--primary-color);z-index:50;background:#2563eb1a;justify-content:center;align-items:center;display:none;position:absolute;inset:0}.drop-zone.active{display:flex}.drop-zone-content{text-align:center;color:var(--primary-color)}.drop-zone-content svg{width:64px;height:64px;margin-bottom:16px}.drop-zone-content p{font-size:18px;font-weight:500}.toast{color:#fff;border-radius:var(--radius-md);opacity:0;z-index:300;background:#1f2937;padding:12px 24px;font-size:14px;font-weight:500;transition:transform .3s,opacity .3s;position:fixed;bottom:24px;left:50%;transform:translate(-50%)translateY(100px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.toast.success{background:#16a34a}.toast.error{background:#dc2626}@media (width<=768px){:root{--toolbar-height:48px}.toolbar{padding:0 8px}.toolbar-btn{width:36px;height:36px}.toolbar-btn svg{width:18px;height:18px}.toolbar-divider{margin:0 4px}.toolbar-logo img{width:24px;height:24px}.color-indicator{width:18px;height:18px}}.toolbar-center .color-picker,.toolbar-center .stroke-picker,.toolbar-center #dashBtn{display:none}@media (width>=601px) and (width<=900px){.toolbar-right .desktop-only{display:none!important}.menu-wrapper{display:block}}@media (width<=600px){.save-status{z-index:45;top:calc(var(--toolbar-height) + 6px);justify-content:center;min-width:28px;min-height:28px;padding:4px;position:fixed;right:8px;box-shadow:0 2px 8px #0f172a1f}.save-status-label{display:none}.desktop-only{display:none!important}.menu-wrapper{display:block}.mobile-tools{display:flex}.toolbar{justify-content:space-between;gap:4px}.toolbar-left{flex:1;min-width:0;overflow:visible}.toolbar-right{flex-shrink:0}}@media (width<=480px){.mobile-tools{gap:1px}.mobile-tools .toolbar-btn{width:32px;height:32px}.mobile-tools .toolbar-btn svg{width:16px;height:16px}.mobile-tools .toolbar-divider{display:none}.mobile-tools .color-indicator{width:16px;height:16px}}@media (prefers-contrast:high){.toolbar-btn.active{outline:2px solid #000}}.canvas-container.tool-pen{cursor:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\"><circle cx=\"5\" cy=\"5\" r=\"3\" fill=\"white\"/><circle cx=\"5\" cy=\"5\" r=\"2\" fill=\"black\"/></svg>") 5 5,crosshair}.canvas-container.tool-eraser{cursor:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><g transform=\"rotate(45 10 10)\"><rect x=\"6\" y=\"4\" width=\"8\" height=\"12\" rx=\"1\" fill=\"white\" stroke=\"black\" stroke-width=\"1.5\"/><line x1=\"6\" y1=\"13\" x2=\"14\" y2=\"13\" stroke=\"black\" stroke-width=\"1\"/></g></svg>") 10 10,crosshair}.canvas-container.tool-select{cursor:crosshair}.canvas-container.tool-select.has-selection{cursor:move}.pen-style-btn{flex-direction:column;gap:3px;position:relative}.pen-style-color{border:1px solid #0000002e;border-radius:50%;width:13px;height:13px}.pen-style-line{background:currentColor;border-radius:3px;width:18px;height:3px}.pen-style-line.dashed{background:repeating-linear-gradient(90deg,currentColor 0 5px,#0000 5px 8px)}.pen-style-panel{z-index:310;top:calc(var(--toolbar-height) + 8px);background:#fff;border-radius:12px;width:min(330px,100vw - 16px);padding:12px;display:none;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 8px 28px #0f172a33}.pen-style-panel.show{display:block}.pen-style-colors,.pen-style-options{justify-content:center;gap:8px;display:flex}.pen-style-colors{margin-bottom:10px}.pen-panel-color{border:3px solid #fff;border-radius:50%;width:32px;height:32px;padding:0;box-shadow:0 0 0 1px #cbd5e1}.pen-panel-color.active{box-shadow:0 0 0 3px #334155}.pen-style-options button{color:#334155;background:#f1f5f9;border:0;border-radius:8px;min-height:38px;padding:5px 9px}.pen-style-options button.active{color:#fff;background:#2563eb}.pen-style-options svg{width:30px;height:16px;display:block}.record-toolbar-btn{flex-shrink:0;gap:6px}.record-dot{border:3px solid #dc2626;border-radius:50%;width:15px;height:15px;display:block}.record-time:empty{display:none}.record-toolbar-btn.recording{color:#fff;background:#dc2626;width:auto;min-width:64px;padding:0 11px}.record-toolbar-btn.recording:hover:not(:disabled),.record-toolbar-btn.recording:active:not(:disabled){background:#b91c1c}.record-toolbar-btn.recording .record-dot{display:none}.record-toolbar-btn.recording .record-time{font-variant-numeric:tabular-nums;font-size:12px;display:inline}.record-toolbar-btn.recording.paused,.record-toolbar-btn.recording.paused:hover:not(:disabled),.record-toolbar-btn.recording.paused:active:not(:disabled){color:#422006;background:#f59e0b}body.recording-paused #recordingMenuTimer{color:#b45309}.recording-menu{z-index:320;top:calc(var(--toolbar-height) + 8px);width:360px;max-height:calc(100dvh - var(--toolbar-height) - 20px);background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:12px;display:none;position:fixed;right:12px;overflow-y:auto;box-shadow:0 10px 32px #0f172a33}.recording-menu.show{display:block}.recording-menu [hidden],.recording-face-settings[hidden],.recording-face-preview[hidden]{display:none!important}.recording-menu-header{justify-content:space-between;align-items:center;min-height:32px;margin-bottom:6px;font-size:15px;display:flex}#recordingMenuTimer{color:#dc2626;font-variant-numeric:tabular-nums}.recording-setting{border-top:1px solid #f1f5f9;border-radius:8px;justify-content:space-between;align-items:center;min-height:44px;padding:0 8px;display:flex}.recording-setting:hover{background:#f8fafc}.recording-setting input{accent-color:#2563eb;width:22px;height:22px}.recording-face-settings{padding:4px 0}.recording-face-toggles{gap:8px;margin:2px 0 4px;display:flex}.recording-preview-toggle{color:#475569;background:#f8fafc;border-radius:10px;flex:1;justify-content:space-between;align-items:center;min-height:40px;padding:0 8px;font-size:12px;font-weight:600;display:flex}.recording-preview-toggle input{accent-color:#2563eb;width:18px;height:18px}.recording-aspect{color:#475569;background:#f8fafc;border-radius:10px;align-items:center;gap:5px;min-height:40px;padding:3px 4px 3px 8px;display:flex}.recording-aspect-label{white-space:nowrap;font-size:12px;font-weight:600}.recording-aspect-buttons{grid-template-columns:1fr 1fr;gap:4px;display:grid}.recording-aspect button{color:#475569;background:#f1f5f9;border:0;border-radius:10px;width:44px;min-height:40px;font-size:23px}.recording-aspect button.active{color:#fff;background:#2563eb}.recording-face-control-row{gap:8px;display:flex}.recording-face-control-group{flex:1;min-width:0}.recording-position-group{flex:1.35}.recording-setting-label{color:#64748b;margin:6px 0 4px;font-size:12px;font-weight:600;display:block}.recording-corners,.recording-sizes{gap:4px;display:grid}.recording-corners{grid-template-columns:repeat(4,1fr)}.recording-sizes{grid-template-columns:repeat(3,1fr)}.recording-corners button,.recording-sizes button{background:#f1f5f9;border:0;border-radius:10px;min-height:44px;font-size:15px}.recording-corners button.active,.recording-sizes button.active{color:#fff;background:#2563eb}.recording-primary,.recording-stop,.recording-download,.recording-pause,.recording-discard{color:#fff;background:#2563eb;border:0;border-radius:9px;justify-content:center;align-items:center;width:100%;min-height:44px;margin-top:12px;font-weight:700;text-decoration:none;display:flex}.recording-active-controls{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;display:grid}.recording-active-controls .recording-pause,.recording-active-controls .recording-stop,.recording-active-controls .recording-discard{margin-top:0}.recording-active-controls .recording-discard{grid-column:1/-1}.recording-pause{color:#422006;background:#facc15}.recording-pause.resume{color:#fff;background:#16a34a}.recording-pause.resume:hover{background:#15803d}.recording-stop{background:#2563eb}.recording-discard{color:#b91c1c;background:#fee2e2}.recording-download{background:#16a34a}.recording-result{margin-top:10px}.recording-result-preview{background:#111827;border-radius:10px;width:100%;max-height:min(32dvh,240px);display:block}.recording-result-actions{grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;display:grid}.recording-result-actions .recording-download,.recording-result-actions .recording-discard{margin-top:0;font:700 14px/1.2 system-ui,-apple-system,Segoe UI,sans-serif}.recording-status{color:#64748b;min-height:16px;margin:7px 2px 0;font-size:12px}.recording-status.error{color:#dc2626}.recording-face-preview{z-index:20;aspect-ratio:3/4;object-fit:cover;touch-action:none;border:3px solid #fff;border-radius:16px;width:25%;max-width:320px;transition:opacity .15s;position:absolute;transform:scaleX(-1);box-shadow:0 4px 18px #0f172a4d}.recording-face-preview.face-landscape{aspect-ratio:4/3}.recording-face-preview.live-preview-off{opacity:0;pointer-events:none}#recordingOutputCanvas{display:none!important}.bottom-sheet-handle{display:none}@media (width<=600px){.mobile-bottom-sheet.bottom-sheet-dragging{transition:none!important}.mobile-bottom-sheet.bottom-sheet-snapping{transition:transform .2s ease-out!important}.bottom-sheet-handle{touch-action:none;cursor:grab;background:0 0;border:0;justify-content:center;align-items:center;width:64px;height:24px;margin:-12px auto 2px;padding:0;display:flex}.bottom-sheet-handle span{background:#cbd5e1;border-radius:5px;width:36px;height:5px;display:block}.bottom-sheet-handle:active span{background:#94a3b8}.mobile-tools .color-picker,.mobile-tools .stroke-picker,#dashBtnMobile{display:none!important}.recording-menu{top:auto;right:6px;bottom:max(6px, env(safe-area-inset-bottom));border:1px solid #e2e8f0;border-radius:18px;width:auto;max-height:min(68dvh,560px);padding:16px 12px 12px;left:6px;box-shadow:0 12px 36px #0f172a3d}.recording-face-preview{border-radius:12px;width:30%}}@media (width<=400px){body.recording-active #redoBtnMobile{display:none}.mobile-tools{gap:0}.mobile-tools .toolbar-btn{width:31px}}.conversion-popup{z-index:200;background:#fff;border-radius:8px;gap:4px;padding:6px;display:none;position:fixed;box-shadow:0 4px 12px #00000026}.conversion-popup.show{display:flex}.conversion-popup button{cursor:pointer;color:#374151;white-space:nowrap;background:0 0;border:none;border-radius:6px;padding:8px 12px;font-size:13px}.conversion-popup button:hover{background:#f3f4f6}.property-panel{z-index:200;background:#fff;border-radius:10px;flex-direction:column;gap:6px;padding:8px;display:none;position:fixed;overflow:hidden;box-shadow:0 2px 12px #0000001f,0 0 0 1px #0000000a}.property-panel.show{display:flex}.prop-colors{justify-content:center;gap:6px;padding:4px 4px 2px;display:flex}.prop-colors button{cursor:pointer;border:2px solid #00000014;border-radius:50%;width:22px;min-width:22px;height:22px;padding:0;transition:transform .12s,border-color .12s}.prop-colors button:hover{transform:scale(1.15)}.prop-colors button.active{border-color:#374151;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #374151}.prop-widths{justify-content:center;align-items:center;gap:1px;padding:0 2px;display:flex}.prop-divider{background:#e5e7eb;flex-shrink:0;width:1px;height:18px;margin:0 3px}.prop-widths button{cursor:pointer;color:#6b7280;background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;width:30px;height:26px;padding:0;display:flex}.prop-widths button:hover{background:#f3f4f6}.prop-widths button.active{background:#e5e7eb}.prop-symmetry[hidden]{display:none!important}.prop-symmetry.active{color:#fff;background:#2563eb!important}.prop-delete{color:#9ca3af;cursor:pointer;background:0 0;border:none;border-radius:5px;justify-content:center;align-items:center;padding:5px;transition:background .12s,color .12s;display:flex}.prop-delete:hover{color:#dc2626;background:#fee2e2}.property-panel{opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;transform:scale(.95)}.property-panel.show{opacity:1;pointer-events:auto;transform:scale(1)}@media (width<=400px){.property-panel{gap:4px;padding:6px}.prop-colors button{width:20px;min-width:20px;height:20px}.prop-colors{gap:4px}.prop-widths button{width:26px;height:24px}}.shape-palette{right:0;top:var(--toolbar-height);z-index:90;touch-action:manipulation;background:#fff;border-left:1px solid #e5e7eb;flex-direction:column;gap:8px;width:200px;padding:12px;transition:transform .2s;display:none;position:fixed;bottom:0;overflow-y:auto;box-shadow:-2px 0 8px #0000001a}.shape-palette.show{display:flex}.shape-palette-title{color:#374151;margin-bottom:4px;font-size:14px;font-weight:600}.shape-palette-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.shape-palette-item{cursor:pointer;color:#6b7280;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:1px solid #e5e7eb;border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:10px 8px;font-size:11px;transition:background .1s,border-color .1s;display:flex}.shape-palette-item:hover{background:#f9fafb;border-color:#2563eb}.shape-palette-item svg{color:#374151;width:32px;height:32px}@media (width<=600px){.shape-palette{border-top:1px solid #e5e7eb;border-left:none;border-radius:16px 16px 0 0;width:100%;height:auto;max-height:50vh;padding:12px 16px 20px;inset:auto 0 0;box-shadow:0 -4px 12px #0000001a}.shape-palette-grid{grid-template-columns:repeat(4,1fr);gap:6px}.shape-palette-item{padding:8px 4px;font-size:10px}.shape-palette-item svg{width:28px;height:28px}.shape-palette-title{text-align:center;font-size:13px}}.shape-drag-ghost{z-index:400;pointer-events:none;opacity:.7;color:#2563eb;width:48px;height:48px;position:fixed;transform:translate(-50%,-50%)}.shape-drag-ghost svg{width:100%;height:100%}