:root{--bg: #f0e6ff;--toolbar-bg: #ffffff;--accent: #7c3aed;--accent-light: #ede9fe;--shadow: 0 4px 20px rgba(124, 58, 237, .15)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:#1e1e2e}.app{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:1rem;gap:1rem}.header{text-align:center}.header h1{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#7c3aed,#ec4899,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;background:var(--toolbar-bg);padding:.75rem 1.25rem;border-radius:1rem;box-shadow:var(--shadow);max-width:920px;width:100%}.tool-group{display:flex;align-items:center;gap:.5rem}.tool-group .label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#888;margin-right:.15rem;white-space:nowrap}.tool-btn{padding:.4rem .85rem;border:2px solid #e2e2e2;border-radius:.6rem;background:#fafafa;cursor:pointer;font-size:.8rem;font-weight:600;transition:all .15s}.tool-btn:hover{border-color:var(--accent);background:var(--accent-light)}.tool-btn.active{border-color:var(--accent);background:var(--accent);color:#fff}.colors{display:flex;gap:.35rem;flex-wrap:wrap}.color-btn{width:28px;height:28px;border-radius:50%;border:3px solid #ddd;cursor:pointer;transition:transform .15s,border-color .15s}.color-btn:hover{transform:scale(1.2)}.color-btn.active{border-color:#333;transform:scale(1.2);box-shadow:0 0 0 2px var(--accent)}.sizes{display:flex;gap:.4rem;align-items:center}.size-btn{width:34px;height:34px;border-radius:50%;border:2px solid #e2e2e2;background:#fafafa;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.size-btn:hover{border-color:var(--accent)}.size-btn.active{border-color:var(--accent);background:var(--accent-light)}.size-dot{border-radius:50%;display:block}.actions{margin-left:auto;gap:.5rem}.action-btn{padding:.4rem 1rem;border:none;border-radius:.6rem;font-size:.8rem;font-weight:700;cursor:pointer;transition:all .15s}.action-btn.clear{background:#fee2e2;color:#dc2626}.action-btn.clear:hover{background:#fecaca}.action-btn.save{background:#d1fae5;color:#059669}.action-btn.save:hover{background:#a7f3d0}.canvas-wrap{background:var(--toolbar-bg);padding:.75rem;border-radius:1rem;box-shadow:var(--shadow);max-width:920px;width:100%;overflow:hidden}.canvas{display:block;width:100%;height:auto;border-radius:.6rem;cursor:crosshair;touch-action:none}@media(max-width:640px){.toolbar{gap:.75rem;padding:.6rem .85rem}.header h1{font-size:1.5rem}.tool-group .label{display:none}.color-btn{width:24px;height:24px}.actions{margin-left:0;width:100%;justify-content:center}}