html,body,#root{height:100%;width:100%}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #6366f1;--primary-hover: #4f46e5;--bg: #f8fafc;--surface: #ffffff;--text: #1e293b;--text-light: #64748b;--border: #e2e8f0;--shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1)}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 100%);color:#fff;padding:2rem;text-align:center;box-shadow:var(--shadow)}.header h1{font-size:2.5rem;margin-bottom:.5rem;text-shadow:0 2px 4px rgba(0,0,0,.1)}.header p{font-size:1.1rem;opacity:.9}.workspace{display:flex;flex:1;padding:1.5rem;gap:1.5rem;max-width:1400px;margin:0 auto;width:100%}.color-palette{background:var(--surface);border-radius:1rem;padding:1.5rem;box-shadow:var(--shadow);width:200px;flex-shrink:0}.color-palette h3{font-size:1rem;margin-bottom:1rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.05em}.colors{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.color-btn{width:100%;aspect-ratio:1;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow)}.color-btn:hover{transform:scale(1.15);box-shadow:var(--shadow-lg)}.color-btn.selected{border-color:var(--text);transform:scale(1.1);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--primary)}.canvas-area{flex:1;display:flex;flex-direction:column;gap:1rem}.canvas-container{background:var(--surface);border-radius:1rem;padding:1.5rem;box-shadow:var(--shadow);display:flex;justify-content:center;align-items:center;flex:1}.cow-svg{width:100%;max-width:800px;height:auto;cursor:crosshair}.cow-svg path,.cow-svg ellipse,.cow-svg circle{transition:fill .2s ease;cursor:pointer}.cow-svg path:hover,.cow-svg ellipse:hover,.cow-svg circle:hover{filter:brightness(.95)}.selected-color-bar{background:var(--surface);border-radius:1rem;padding:1rem 1.5rem;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between}.selected-color-preview{width:60px;height:40px;border-radius:.5rem;border:2px solid var(--border);box-shadow:var(--shadow)}.actions{display:flex;gap:.75rem}.btn-reset,.btn-save{padding:.75rem 1.5rem;border-radius:.5rem;border:none;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem}.btn-reset{background:#f1f5f9;color:var(--text)}.btn-reset:hover{background:#e2e8f0}.btn-save{background:linear-gradient(135deg,var(--primary) 0%,#8b5cf6 100%);color:#fff}.btn-save:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}@media (max-width: 768px){.workspace{flex-direction:column;padding:1rem}.color-palette{width:100%}.colors{grid-template-columns:repeat(8,1fr)}.header h1{font-size:1.75rem}.selected-color-bar{flex-wrap:wrap;gap:1rem}.actions{width:100%;justify-content:center}}@media (max-width: 480px){.colors{grid-template-columns:repeat(6,1fr)}.btn-reset,.btn-save{padding:.6rem 1rem;font-size:.9rem}}