:root{--brand:#2563eb;--accent:#3b82f6;--accent-hover:#2563eb;--bg:#fff;--bg-alt:#f8f9fa;--text:#1f2937;--text-muted:#6b7280;--border:#e5e7eb;--success:#10b981;--error:#ef4444;--warning:#f59e0b;--spacing-xs:.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--spacing-2xl:4rem;--font-size-base:16px;--font-size-sm:.875rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--font-size-4xl:2.5rem;--container-max-width:1200px;--border-radius:8px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1);--transition:.2s ease}#app{display:flex;flex-direction:column;min-height:100vh}.btn{align-items:center;border:1px solid transparent;border-radius:var(--border-radius);cursor:pointer;display:inline-flex;font-weight:500;justify-content:center;padding:var(--spacing-sm) var(--spacing-md);text-decoration:none;transition:all var(--transition)}.btn--primary{background-color:var(--brand);color:#fff}.btn--primary:hover{background-color:var(--accent-hover);opacity:1}.btn--ghost{background-color:transparent;border-color:var(--brand);color:var(--brand)}.btn--ghost:hover{background-color:var(--brand);color:#fff}.btn--secondary{background-color:var(--bg-alt);color:var(--text)}.btn--secondary:hover{background-color:var(--border)}.container{margin:0 auto;max-width:var(--container-max-width);padding:0 var(--spacing-md);width:100%}@media(max-width:768px){:root{--font-size-base:15px;--spacing-xl:2rem;--spacing-2xl:3rem}.container{padding:0 var(--spacing-sm)}}@media(max-width:480px){:root{--font-size-base:14px}}