@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Quicksand:wght@500;600;700&display=swap";
:root{--bg-primary:#fff8e7;--bg-secondary:#fff;--bg-card:#fff;--bg-tertiary:#f3f4f6;--text-primary:#2d3436;--text-secondary:#636e72;--text-muted:#b2bec3;--text-inverse:#fff;--pop-purple:#9b59b6;--pop-orange:#e67e22;--pop-cyan:#00cec9;--pop-green:#00b894;--pop-red:#d63031;--pop-yellow:#fdcb6e;--pop-dark:#2d3436;--pop-blue:#0984e3;--border-width:3px;--border-style:solid;--border-color:#2d3436;--border-main:var(--border-width)var(--border-style)var(--border-color);--border-radius:12px;--border-radius-lg:24px;--border-radius-full:9999px;--shadow-pop:4px 4px 0px 0px var(--text-primary);--shadow-pop-sm:2px 2px 0px 0px var(--text-primary);--shadow-pop-lg:6px 6px 0px 0px var(--text-primary);--shadow-none:0 0 0 0 transparent;--header-height:70px;--chat-width:320px;--transition-fast:.15s cubic-bezier(.4,0,.2,1);--transition-normal:.3s cubic-bezier(.4,0,.2,1);--transition-bouncy:.4s cubic-bezier(.175,.885,.32,1.275)}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;max-width:100vw;min-height:100vh}body{color:var(--text-primary);background:var(--bg-primary);background-image:radial-gradient(var(--pop-purple)1px,transparent 1px),radial-gradient(var(--pop-orange)1px,transparent 1px);background-position:0 0,20px 20px;background-size:40px 40px;background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Quicksand,sans-serif;font-weight:600}h1,h2,h3,h4,h5,h6{letter-spacing:.02em;color:var(--text-primary);font-family:Fredoka,sans-serif;font-weight:700}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;outline:none;font-family:Fredoka,sans-serif;font-weight:600}input{font-family:Quicksand,sans-serif;font-weight:500}.btn{text-transform:uppercase;border-radius:var(--border-radius);border:var(--border-main);box-shadow:var(--shadow-pop);transition:all var(--transition-fast);background:var(--bg-secondary);color:var(--text-primary);padding:12px 24px;font-size:1rem;font-weight:700}.btn:hover{box-shadow:var(--shadow-pop-lg);transform:translate(-1px,-1px)}.btn:active{box-shadow:var(--shadow-pop-sm);transform:translate(2px,2px)}.btn-primary{background:var(--pop-purple);color:var(--text-inverse)}.btn-secondary{background:var(--pop-orange);color:var(--text-inverse)}.btn-danger{background:var(--pop-red);color:var(--text-inverse)}.card{background:var(--bg-secondary);border:var(--border-main);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-pop);padding:24px}.input{width:100%;color:var(--text-primary);border:2px solid var(--text-primary);border-radius:var(--border-radius);transition:all var(--transition-fast);background:#fff;padding:14px 18px;font-size:1rem}.input:focus{border-color:var(--pop-purple);box-shadow:4px 4px 0 var(--text-primary);outline:none;transform:translate(-2px,-2px)}.input::placeholder{color:var(--text-muted)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-tertiary)}::-webkit-scrollbar-thumb{background:var(--pop-purple);border:2px solid var(--bg-tertiary);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--pop-orange)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.animate-pop{animation:popIn .3s var(--transition-bouncy)}.animate-pulse{animation:2s infinite pulse}.animate-bounce{animation:2s infinite bounce}