.palette{width:200px;flex-shrink:0;background:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:16px;padding:16px 12px;overflow-y:auto}.palette-brand{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border)}.palette-logo{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);border-radius:var(--radius-sm);font-size:18px}.palette-brand strong{display:block;font-size:15px;font-weight:600;line-height:1.2}.palette-tagline{font-size:11px;color:var(--text-muted)}.palette-section-title{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:8px}.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.palette-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:var(--radius-sm);color:var(--text);transition:background .15s,box-shadow .15s}.palette-btn:hover{background:var(--accent-soft)}.palette-btn.active{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent-hover)}.palette-icon{font-size:18px;line-height:1}.palette-label{font-size:10px;text-align:center;line-height:1.2;color:var(--text-muted)}.palette-btn.active .palette-label{color:var(--accent-hover)}.palette-btn.draggable{cursor:grab}.palette-btn.draggable:active{cursor:grabbing}.palette-hint{margin-top:auto;font-size:11px;line-height:1.45;color:var(--text-muted);padding-top:8px}.toolbar{height:56px;flex-shrink:0;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--bg-panel);border-bottom:1px solid var(--border);box-shadow:var(--shadow);z-index:10}.toolbar-title{border:1px solid transparent;background:transparent;font-size:16px;font-weight:600;color:var(--text);padding:6px 10px;border-radius:var(--radius-sm);min-width:160px;max-width:240px}.toolbar-title:hover,.toolbar-title:focus{border-color:var(--border);background:#fff;outline:none}.toolbar-group{display:flex;align-items:center;gap:6px}.toolbar-label{font-size:11px;color:var(--text-muted);margin-right:4px}.toolbar-spacer{flex:1}.toolbar-divider{width:1px;height:28px;background:var(--border)}.toolbar-btn{padding:6px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;color:var(--text);background:#fff;border:1px solid var(--border);transition:background .15s,border-color .15s}.toolbar-btn:hover{background:var(--accent-soft);border-color:var(--border-focus)}.toolbar-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.toolbar-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.toolbar-btn.danger:hover:not(:disabled){background:#f8ecec;border-color:var(--rose);color:#8a5a5a}.toolbar-btn:disabled{opacity:.45;cursor:not-allowed}.toolbar-btn.zoom-value{min-width:52px}.toolbar-link{text-decoration:none;display:inline-flex;align-items:center}.properties{width:220px;flex-shrink:0;background:var(--bg-panel);border-left:1px solid var(--border);padding:16px;overflow-y:auto}.properties-title{font-size:13px;font-weight:600;margin-bottom:16px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.properties-section{margin-bottom:20px}.properties-label{display:block;font-size:12px;font-weight:500;color:var(--text-muted);margin-bottom:8px}.properties-type{display:block;font-size:14px;margin-bottom:12px}.properties-empty,.properties-hint{font-size:12px;color:var(--text-muted);line-height:1.5;margin-bottom:16px}.properties-textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);resize:vertical;margin-bottom:12px;background:#fff}.properties-textarea:focus{outline:none;border-color:var(--border-focus)}.properties-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}.properties-input{width:72px;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff}.properties-range{width:100%;accent-color:var(--accent)}.properties-note{font-weight:400;color:var(--text-muted)}.color-swatches{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.color-swatch{width:24px;height:24px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 1px #00000014;transition:transform .1s}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}.text-editor-overlay{position:fixed;z-index:1000;margin:0;padding:4px 6px;border:2px solid var(--accent);border-radius:var(--radius-sm);background:#fff;resize:none;outline:none;font-family:var(--font);line-height:1.35;box-shadow:var(--shadow-lg)}.text-editor-overlay--inline{background:#fffcf8eb;backdrop-filter:blur(2px);border-color:#8b9dc3d9;box-shadow:0 0 0 1px #8b9dc333,var(--shadow-md)}.text-editor-overlay::placeholder{color:#3d3d4873}.app{display:flex;flex-direction:column;height:100%}.app-body{display:flex;flex:1;min-height:0}.app-main{flex:1;min-width:0;position:relative;background:var(--bg-canvas)}.app-main.tool-eraser .canvas-wrap{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23f5f3ef' stroke='%238b9dc3' stroke-width='1.5'/%3E%3C/svg%3E") 12 12,cell}.canvas-container{position:relative;width:100%;height:100%}.canvas-wrap{width:100%;height:100%}.canvas-hint-subtle{opacity:.85;font-size:11px}.canvas-hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%);padding:8px 16px;background:#fffcf8eb;border:1px solid var(--border);border-radius:20px;font-size:12px;color:var(--text-muted);box-shadow:var(--shadow);pointer-events:none;z-index:5}.app-toast{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 16px;font-size:13px;z-index:20}.app-toast-error{background:#f8ecec;color:#6a4545;border-bottom:1px solid #e8d4d4}.app-toast button{font-size:18px;line-height:1;color:inherit;opacity:.7}.app-toast button:hover{opacity:1}.app-footer{flex-shrink:0;padding:6px 16px;font-size:11px;color:var(--text-muted);text-align:center;background:var(--bg-panel);border-top:1px solid var(--border)}@media(max-width:900px){.app-body{flex-direction:column}.palette,.properties{width:100%;max-height:140px;border:none;border-bottom:1px solid var(--border)}.properties{border-top:1px solid var(--border);border-left:none;max-height:120px}.palette-grid{grid-template-columns:repeat(4,1fr)}}:root{--bg-app: #f5f3ef;--bg-panel: #faf8f5;--bg-canvas: #fffcf8;--border: #e4dfd6;--border-focus: #b8c4d8;--text: #3d3d48;--text-muted: #7a7885;--accent: #8b9dc3;--accent-hover: #7a8db5;--accent-soft: #e8ecf4;--rose: #c9a8a8;--sage: #a8c4b4;--lavender: #b8a8c4;--peach: #d4c4a8;--shadow: 0 2px 12px rgba(61, 61, 72, .06);--shadow-lg: 0 8px 32px rgba(61, 61, 72, .1);--radius: 10px;--radius-sm: 6px;--font: "DM Sans", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{display:flex;flex-direction:column;font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg-app);-webkit-font-smoothing:antialiased}#root{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}button{font-family:inherit;cursor:pointer;border:none;background:none}input,textarea,select{font-family:inherit;font-size:inherit}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}