body{font-family:Comic Sans MS,Segoe UI,cursive,sans-serif;background:linear-gradient(135deg,#ff8c00,orange,#1a1a1a);min-height:100vh;color:#333}.app{min-height:100vh}.navbar{background:linear-gradient(90deg,#ff8c00,#1a1a1a);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;color:#fff;box-shadow:0 8px 16px #0000004d;border-bottom:4px solid #FFA500}.nav-brand{font-size:1.8rem;font-weight:700;display:flex;align-items:center;gap:.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.capybara{font-size:2rem;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.nav-links{display:flex;gap:2rem;align-items:center}.nav-links a{color:#fff;text-decoration:none;font-weight:700;font-size:1.1rem;transition:transform .3s;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.nav-links a:hover{transform:scale(1.1)}.logout-btn{background:#ffffff4d;color:#fff;border:2px solid white;padding:.6rem 1.2rem;border-radius:20px;cursor:pointer;font-weight:700;transition:all .3s;box-shadow:0 4px 8px #0003}.logout-btn:hover{background:#ffffff80;transform:scale(1.05)}main{padding:2rem;max-width:1200px;margin:0 auto}.capybara{display:inline-block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));transition:filter .3s ease}.capybara:hover{filter:drop-shadow(0 6px 12px rgba(255,20,147,.3))}.capybara.small{width:80px;height:80px}.capybara.medium{width:120px;height:120px}.capybara.large{width:200px;height:200px}.capybara.animated{animation:capybaraJump 3s ease-in-out infinite}@keyframes capybaraJump{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-15px) rotate(-3deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-10px) rotate(3deg)}}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#ff8c00,orange,#1a1a1a);padding:1rem}@keyframes gradientBg{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.login-card{background:linear-gradient(135deg,#fff8dc,#ffe4b5);padding:3rem;border-radius:24px;border:4px solid #FFA500;outline:4px solid #1a1a1a;outline-offset:2px;box-shadow:0 24px 60px #0006;width:100%;max-width:420px;text-align:center;position:relative;overflow:hidden}.login-card:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#ff8c00,orange,gold,#1a1a1a)}.capybara-welcome{font-size:5rem;margin-bottom:1.5rem;animation:capybara-bounce 2s ease-in-out infinite;display:inline-block}@keyframes capybara-bounce{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-20px) rotate(-5deg)}75%{transform:translateY(-15px) rotate(5deg)}}.login-card h1{font-size:2.2rem;color:#333;margin-bottom:.5rem;font-weight:900;background:linear-gradient(135deg,#ff8c00,#1a1a1a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-card h2{font-size:1.3rem;color:#555;margin-bottom:2rem;font-weight:700}.error-message{background:linear-gradient(135deg,#ffb6c1,#ff69b4);color:#fff;padding:1rem;border-radius:12px;margin-bottom:1rem;font-size:.95rem;font-weight:600;border:2px solid #FF1493}.login-card form{display:flex;flex-direction:column;gap:1.2rem}.login-card input{padding:1rem;border:3px solid #FFA500;border-radius:12px;font-size:1rem;transition:all .3s;background:#fff;font-weight:500}.login-card input:focus{outline:none;border-color:#ff8c00;box-shadow:0 0 12px #ff8c004d;transform:scale(1.01)}.login-card button[type=submit]{padding:1rem;background:linear-gradient(135deg,#ff8c00,orange);color:#fff;border:3px solid #1a1a1a;border-radius:16px;font-size:1.1rem;font-weight:900;cursor:pointer;transition:all .3s;box-shadow:0 8px 20px #ff8c004d;text-transform:uppercase;letter-spacing:1px}.login-card button[type=submit]:hover:not(:disabled){transform:translateY(-4px) scale(1.02);box-shadow:0 12px 32px #ff8c0080}.login-card button[type=submit]:disabled{opacity:.6;cursor:not-allowed}.toggle-btn{background:none;border:none;color:#ff8c00;cursor:pointer;font-size:.95rem;text-decoration:underline;margin-top:1.5rem;font-weight:600;transition:color .3s}.toggle-btn:hover{color:#1a1a1a}.dashboard{padding:2rem;max-width:1200px;margin:0 auto}.hero-section{text-align:center;color:#fff;margin-bottom:3rem;background:linear-gradient(135deg,#ff8c00e6,#1a1a1ae6);padding:2rem;border-radius:20px;border:4px solid #FFA500;outline:4px solid #1a1a1a;outline-offset:2px;box-shadow:0 8px 16px #0000004d}.capybara-mascot{font-size:8rem;margin-bottom:1rem;animation:capybaraJump 3s ease-in-out infinite;display:inline-block}@keyframes capybaraJump{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-30px) rotate(-5deg)}50%{transform:translateY(0) rotate(5deg)}75%{transform:translateY(-20px) rotate(-3deg)}}.hero-section h1{font-size:3rem;margin-bottom:.5rem;text-shadow:3px 3px 6px rgba(0,0,0,.4);font-weight:900}.hero-section p{font-size:1.3rem;opacity:.95;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin-bottom:3rem}.stat-card{background:#fff;padding:2rem;border-radius:20px;border:3px solid #FFA500;outline:3px solid #1a1a1a;outline-offset:2px;box-shadow:0 12px 24px #0003;text-align:center;transition:transform .3s,box-shadow .3s,filter .3s;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#ff8c00,orange,#1a1a1a)}.stat-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 16px 32px #ffd7004d;filter:brightness(1.05)}.stat-value{font-size:3.5rem;font-weight:900;background:linear-gradient(135deg,#ff8c00,orange);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.stat-label{font-size:1rem;color:#333;font-weight:700;text-transform:uppercase;letter-spacing:1px}.stat-subtext{font-size:.85rem;color:#ff8c00;margin-top:.5rem;font-weight:600}.level-card{background:linear-gradient(135deg,orange,#ff8c00,#1a1a1a);color:#fff;border:3px solid #FFD700}.level-card:before{background:linear-gradient(90deg,#ff8c00,orange,gold)}.level-card .level-number{font-size:4.5rem;font-weight:900;margin-bottom:.5rem;text-shadow:3px 3px 6px rgba(0,0,0,.3)}.level-card .level-label{font-size:1.1rem;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.2)}.progress-bar{height:12px;background:#fff6;border-radius:6px;overflow:hidden;margin-bottom:.5rem;border:2px solid white}.progress-fill{height:100%;background:linear-gradient(90deg,orange,gold);border-radius:4px;transition:width .3s ease;box-shadow:0 0 10px #ffa50099}.progress-text{font-size:.9rem;opacity:.95;font-weight:600}.badges-section{margin-bottom:3rem;color:#fff}.badges-section h2{font-size:2rem;margin-bottom:1.5rem;text-align:center;text-shadow:2px 2px 4px rgba(0,0,0,.3);font-weight:900}.badges-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2rem;margin-bottom:2rem}.badge{background:#fff;padding:1.5rem;border-radius:16px;text-align:center;transition:transform .3s,filter .3s,box-shadow .3s;cursor:pointer;border:3px solid #FFA500;outline:3px solid #1a1a1a;outline-offset:2px;position:relative;overflow:hidden}.badge:before{content:"★";position:absolute;font-size:1.5rem;top:-10px;right:-10px;opacity:0;transition:opacity .3s}.badge.unlocked{box-shadow:0 8px 20px #ffa50066;background:linear-gradient(135deg,#fff8dc,#ffe4b5)}.badge.unlocked:before{opacity:1;color:gold}.badge.unlocked:hover{transform:scale(1.1) rotate(-10deg);box-shadow:0 12px 28px #ffd70099}.badge.locked{opacity:.5;filter:grayscale(80%) brightness(.8)}.badge-icon{font-size:3rem;margin-bottom:.5rem}.badge-name{font-size:.9rem;color:#333;font-weight:700}.cta-section{text-align:center;margin-top:2rem}.cta-button{display:inline-block;background:linear-gradient(135deg,#ff8c00,orange);color:#fff;padding:1.2rem 3rem;border-radius:50px;text-decoration:none;font-weight:900;font-size:1.2rem;box-shadow:0 12px 24px #ff8c0066;transition:transform .3s,box-shadow .3s,filter .3s;border:3px solid #1a1a1a;text-shadow:1px 1px 2px rgba(0,0,0,.2);letter-spacing:1px}.cta-button:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 16px 32px #ff8c0099;filter:brightness(1.1)}.checker-container{padding:2rem;max-width:900px;margin:0 auto;position:relative}.checker-card{background:linear-gradient(135deg,#fff8dc,#ffe4b5);padding:3rem;border-radius:24px;border:4px solid #FFA500;outline:4px solid #1a1a1a;outline-offset:2px;box-shadow:0 16px 40px #0000004d;position:relative;overflow:hidden}.checker-card:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#ff8c00,orange,gold,#1a1a1a)}.checker-card h1{color:#333;margin-bottom:.5rem;font-size:2.2rem;font-weight:900}.subtitle{color:#666;margin-bottom:2rem;font-size:1.05rem;font-weight:600}.error-message{background:linear-gradient(135deg,#ffb6c1,#ff69b4);color:#fff;padding:1rem;border-radius:12px;margin-bottom:1.5rem;border:2px solid #FF1493;font-weight:600;box-shadow:0 4px 8px #ff14934d}.result-card{padding:2.5rem;border-radius:20px;text-align:center;margin-bottom:1.5rem;animation:popIn .4s cubic-bezier(.34,1.56,.64,1);border:4px solid;outline:3px solid #1a1a1a;outline-offset:2px}@keyframes popIn{0%{opacity:0;transform:scale(.5) rotate(-5deg)}70%{transform:scale(1.1) rotate(2deg)}to{opacity:1;transform:scale(1) rotate(0)}}.result-card.correct{background:linear-gradient(135deg,#90ee90,#32cd32);border-color:#228b22;box-shadow:0 12px 32px #32cd3266}.result-card.incorrect{background:linear-gradient(135deg,orange,#ff8c00);border-color:#1a1a1a;box-shadow:0 12px 32px #ff8c0066}.result-icon{font-size:5rem;margin-bottom:1rem;animation:spin .6s ease-out}@keyframes spin{0%{transform:rotateY(180deg) scale(.5)}to{transform:rotateY(0) scale(1)}}.result-card h2{color:#fff;margin-bottom:1rem;font-size:2rem;font-weight:900;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.result-message{color:#fff;font-size:1.05rem;margin-bottom:1.5rem;line-height:1.8;text-shadow:1px 1px 2px rgba(0,0,0,.2);font-weight:600}.result-rewards{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}.result-rewards span{background:#fffffff2;padding:.75rem 1.5rem;border-radius:20px;font-weight:900;color:#333;border:2px solid white;box-shadow:0 4px 12px #0003;font-size:1.05rem}.dismiss-btn{background:linear-gradient(135deg,#ff8c00,orange);color:#fff;padding:1rem 2rem;border:3px solid #1a1a1a;border-radius:20px;cursor:pointer;font-weight:900;font-size:1.1rem;transition:all .3s;box-shadow:0 6px 16px #0003}.dismiss-btn:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 10px 24px #ff149366}.problem-form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column}.form-group label{font-weight:900;color:#333;margin-bottom:.75rem;font-size:1.1rem}.form-group input,.form-group textarea{padding:1rem;border:3px solid #FFA500;border-radius:12px;font-size:1rem;font-family:inherit;transition:all .3s;background:#fff}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#ff8c00;box-shadow:0 0 12px #ff8c004d;transform:scale(1.01)}.form-group textarea{resize:vertical;min-height:150px}.submit-btn{padding:1.2rem;background:linear-gradient(135deg,#ff8c00,orange);color:#fff;border:3px solid #1a1a1a;border-radius:16px;font-size:1.2rem;font-weight:900;cursor:pointer;transition:all .3s;box-shadow:0 8px 20px #ff8c004d;text-transform:uppercase;letter-spacing:1px}.submit-btn:hover:not(:disabled){transform:translateY(-4px) scale(1.02);box-shadow:0 12px 32px #ff8c0080}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.history{padding:2rem;max-width:1000px;margin:0 auto}.history-header{color:#fff;margin-bottom:2rem;background:linear-gradient(135deg,#ff8c00e6,#1a1a1ae6);padding:2rem;border-radius:20px;border:4px solid #FFA500;outline:4px solid #1a1a1a;outline-offset:2px;box-shadow:0 8px 16px #0000004d}.history-header h1{font-size:2.8rem;margin-bottom:1.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.3);font-weight:900}.filter-buttons{display:flex;gap:1rem;flex-wrap:wrap}.filter-buttons button{padding:.8rem 1.8rem;background:#ffffff40;color:#fff;border:2px solid white;border-radius:20px;cursor:pointer;font-weight:700;transition:all .3s;font-size:.95rem;text-transform:uppercase;letter-spacing:1px}.filter-buttons button:hover{background:#fff6;transform:scale(1.05)}.filter-buttons button.active{background:#fff;color:#ff8c00;border-color:#fff;box-shadow:0 4px 12px #0003}.empty-state{background:linear-gradient(135deg,#fff8dc,#ffe4b5);padding:3rem;border-radius:20px;text-align:center;color:#666;font-size:1.2rem;border:3px dashed #FFA500;font-weight:600}.problems-list{display:flex;flex-direction:column;gap:1.5rem}.problem-card{background:#fff;padding:2rem;border-radius:16px;border:4px solid;outline:3px solid #1a1a1a;outline-offset:2px;box-shadow:0 8px 20px #00000026;display:flex;justify-content:space-between;align-items:center;transition:all .3s cubic-bezier(.34,1.56,.64,1);cursor:pointer}.problem-card.correct{border-color:#32cd32;background:linear-gradient(135deg,#f0fff0,#e0ffe0)}.problem-card.correct:hover{box-shadow:0 12px 32px #32cd324d;transform:translate(8px) translateY(-2px)}.problem-card.incorrect{border-color:orange;background:linear-gradient(135deg,#fffacd,#ffe4b5)}.problem-card.incorrect:hover{box-shadow:0 12px 32px #ffa5004d;transform:translate(8px) translateY(-2px)}.problem-header{display:flex;align-items:center;gap:1.5rem;flex-grow:1}.problem-status{font-size:2rem;min-width:40px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.problem-info{flex-grow:1}.problem-equation{font-weight:900;color:#333;font-size:1.2rem;margin-bottom:.25rem;font-family:Courier New,monospace}.problem-answer{color:#666;font-size:.95rem;font-weight:600}.problem-category{background:linear-gradient(135deg,#ff8c00,orange);color:#fff;padding:.6rem 1.2rem;border-radius:16px;font-size:.85rem;white-space:nowrap;margin-right:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 12px #ff8c0033}.problem-date{color:#999;font-size:.85rem;white-space:nowrap;font-weight:600}@media (max-width: 768px){.problem-card{flex-direction:column;align-items:flex-start;gap:1rem}.problem-header{width:100%}.problem-date{align-self:flex-end}.history-header h1{font-size:2rem}}:root{--primary: #667eea;--primary-dark: #764ba2;--success: #28a745;--warning: #ffc107;--danger: #dc3545;--light: #f8f9fa;--dark: #333}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}