:root{--color-bg: #FFFFFF;--color-surface: #F6F8FA;--color-text: #1F2937;--color-primary: #10B981;--color-primary-hover: #059669;--color-success: #10B981;--color-error: #EF4444;--color-warning: #FBBF24;--color-accent: #A855F7;color-scheme:light}@media (prefers-color-scheme: dark){:root{--color-bg: #0A0D1E;--color-surface: #11172A;--color-text: #F1F5F9;--color-primary: #10B981;--color-primary-hover: #059669;--color-success: #34D399;--color-error: #F87171;--color-warning: #FCD34D;--color-accent: #C084FC;color-scheme:dark}}body{margin:0;font-family:Poppins,system-ui,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh;display:flex;justify-content:center;align-items:flex-start}#root{width:100%;max-width:1200px}h1{text-align:center}.card{background:var(--color-surface);padding:1rem;border-radius:8px;margin-bottom:1rem;display:flex;align-items:center}.swatch{width:2rem;height:2rem;border-radius:4px;margin-right:1rem}.primary-button{background:var(--color-primary);color:var(--color-text);border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer}.primary-button:hover{background:var(--color-primary-hover)}.success{color:var(--color-success)}.error{color:var(--color-error)}.warning{color:var(--color-warning)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}.logo{filter:none;transition:filter .2s ease}@media (prefers-color-scheme: dark){.logo{filter:invert(1) brightness(1.2)}}