:root{--bg: #ffffff;--panel: #f8f9fa;--border: #dee2e6;--ink: #1e1e1e;--muted: #868e96;--accent: #1971c2;--danger: #e03131;--radius: 8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;overflow:hidden}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}.layout{display:flex;height:100%}.sidebar{width:240px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}.sidebar-header h1{font-size:16px;margin:0}.canvas-list{flex:1;overflow-y:auto;padding:8px}.canvas-item{display:flex;align-items:center;width:100%;padding:8px 10px;border-radius:var(--radius);text-align:left;gap:6px}.canvas-item:hover{background:#e9ecef}.canvas-item.active{background:#d0ebff;color:var(--accent)}.canvas-item .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-item .delete{color:var(--muted);visibility:hidden;padding:0 2px}.canvas-item:hover .delete{visibility:visible}.canvas-item .delete:hover{color:var(--danger)}.empty-list{padding:24px 16px;color:var(--muted);font-size:14px;text-align:center}.main{flex:1;position:relative;display:flex;flex-direction:column;min-width:0}.toolbar{display:flex;align-items:center;gap:16px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--bg)}.toolbar .title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toolbar .spacer{flex:1}.tool-group{display:flex;align-items:center;gap:6px}.swatch{width:22px;height:22px;border-radius:50%;border:2px solid transparent;padding:0}.swatch.active{border-color:var(--accent)}.size-btn{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius)}.size-btn:hover{background:#e9ecef}.size-btn.active{background:#d0ebff}.size-dot{border-radius:50%;background:var(--ink)}.tool-btn{padding:6px 10px;border-radius:var(--radius);color:var(--ink)}.tool-btn:hover{background:#e9ecef}.tool-btn:disabled{color:var(--muted);cursor:default;background:none}.save-status{font-size:13px;color:var(--muted);min-width:70px;text-align:right}.board-wrap{flex:1;position:relative;background:var(--bg)}.board-wrap canvas{position:absolute;inset:0;touch-action:none;cursor:crosshair}.welcome{flex:1;display:grid;place-items:center;color:var(--muted)}.btn-primary{background:var(--accent);color:#fff;padding:6px 12px;border-radius:var(--radius)}.btn-primary:hover{background:#1864ab}