@import "https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Inter:wght@300..900&display=swap";:root{--font-child:"Quicksand", sans-serif;--font-ui:"Inter", sans-serif;--bg-primary:#f0f4f9;--bg-gradient:linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);--bg-card:#ffffffbf;--bg-card-hover:#ffffffe6;--border-color:#fff6;--bg-item:#0000000d;--bg-overlay:#0006;--primary:#6c5dd3;--primary-light:#ece9ff;--secondary:#ff7b54;--secondary-light:#ffebe5;--accent:#ffb74d;--success:#3ecd74;--success-light:#e8f9ef;--error:#fc5a5a;--error-light:#ffeaea;--info:#3f8cff;--text-main:#2d3748;--text-muted:#718096;--text-light:#fff;--shadow:0 8px 32px 0 #1f268714;--shadow-lg:0 12px 40px 0 #1f268726;--border-radius-sm:8px;--border-radius:16px;--border-radius-lg:24px;--border-radius-full:9999px;--transition:all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce:all .4s cubic-bezier(.175, .885, .32, 1.275)}.dark{--bg-primary:#0f111a;--bg-gradient:linear-gradient(135deg, #0f111a 0%, #171923 100%);--bg-card:#1a202cbf;--bg-card-hover:#232b3be6;--border-color:#ffffff1a;--bg-item:#ffffff12;--bg-overlay:#000000bf;--primary:#8a7cff;--primary-light:#8a7cff26;--secondary:#ff9e7d;--secondary-light:#ff9e7d26;--text-main:#edf2f7;--text-muted:#a0aec0;--shadow:0 8px 32px 0 #0006;--shadow-lg:0 12px 40px 0 #0000008c}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-ui);background:var(--bg-gradient);color:var(--text-main);background-attachment:fixed;min-height:100vh;transition:background .3s,color .3s;overflow-x:hidden}h1,h2,h3,h4,.child-font{font-family:var(--font-child)}.glass{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--shadow);transition:var(--transition)}.glass-hover:hover{background:var(--bg-card-hover);box-shadow:var(--shadow-lg);transform:translateY(-4px)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes pulse-soft{0%{transform:scale(1)}50%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes slide-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-float{animation:4s ease-in-out infinite float}.animate-pulse-soft{animation:3s ease-in-out infinite pulse-soft}.animate-slide-in{animation:.5s cubic-bezier(.4,0,.2,1) forwards slide-in}.app-container{flex-direction:column;min-height:100vh;display:flex}.main-content{flex:1;width:100%;max-width:1400px;margin:0 auto;padding:2rem}@media (width<=768px){.main-content{padding:1rem}}.btn{font-family:var(--font-child);border-radius:var(--border-radius-full);cursor:pointer;transition:var(--transition-bounce);border:none;outline:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;text-decoration:none;display:inline-flex;box-shadow:0 4px 10px #0000000d}.btn:active{transform:scale(.95)}.btn-primary{background:var(--primary);color:var(--text-light)}.btn-primary:hover{background:#5b4dbf;transform:translateY(-2px);box-shadow:0 6px 15px #6c5dd34d}.btn-secondary{background:var(--secondary);color:var(--text-light)}.btn-secondary:hover{background:#e66a43;transform:translateY(-2px);box-shadow:0 6px 15px #ff7b544d}.btn-outline{border:2px solid var(--primary);color:var(--primary);background:0 0}.btn-outline:hover{background:var(--primary-light);transform:translateY(-2px)}.btn-danger{background:var(--error);color:var(--text-light)}.btn-danger:hover{background:#e04a4a;transform:translateY(-2px);box-shadow:0 6px 15px #fc5a5a4d}.form-group{flex-direction:column;gap:.5rem;margin-bottom:1.25rem;display:flex}.form-label{font-family:var(--font-child);color:var(--text-main);font-size:.95rem;font-weight:600}.form-input{border-radius:var(--border-radius);border:1px solid var(--border-color);font-family:var(--font-ui);color:var(--text-main);transition:var(--transition);background:#ffffff80;outline:none;padding:.75rem 1rem}.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);background:#fff}.dark .form-input{border-color:#ffffff26;color:var(--text-main)!important;background:#1a202ccc!important}.dark .form-input:focus{border-color:var(--primary);background:#0f111ae6!important}.dark select option{color:#edf2f7!important;background:#1a202c!important}.badge-tag{border-radius:var(--border-radius-full);text-transform:uppercase;align-items:center;gap:.25rem;padding:.25rem .75rem;font-size:.8rem;font-weight:700;display:inline-flex}.grid-2{grid-template-columns:repeat(2,1fr);gap:1.5rem;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.grid-4{grid-template-columns:repeat(4,1fr);gap:1.5rem;display:grid}@media (width<=1024px){.grid-4{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.navbar{border-radius:var(--border-radius-lg);justify-content:space-between;align-items:center;margin:1rem;padding:1rem 2rem;display:flex}.nav-logo{color:var(--primary);align-items:center;gap:.5rem;font-size:1.5rem;font-weight:800;text-decoration:none;display:flex}.nav-links{align-items:center;gap:1.5rem;display:flex}.nav-link{color:var(--text-main);font-family:var(--font-child);transition:var(--transition);font-weight:600;text-decoration:none}.nav-link:hover,.nav-link.active{color:var(--primary)}.card{border-radius:var(--border-radius-lg);padding:1.5rem}.confetti-canvas{pointer-events:none;z-index:9999;width:100vw;height:100vh;position:fixed;top:0;left:0}.grid-responsive-2-1{grid-template-columns:2fr 1fr;gap:1.5rem;display:grid}.grid-responsive-1-3{grid-template-columns:1fr 3fr;gap:1.5rem;display:grid}.grid-responsive-1-1{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}.grid-responsive-repeat-4{grid-template-columns:repeat(4,1fr);gap:1.5rem;display:grid}.grid-responsive-repeat-3{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.admin-user-grid{grid-template-columns:1fr;gap:2rem;display:grid}.admin-user-grid.edit-active{grid-template-columns:1fr 2fr}.admin-content-grid{grid-template-columns:1fr 2fr;gap:2rem;display:grid}.nav-user-info{border-left:1px solid var(--border-color);align-items:center;gap:1rem;padding-left:1rem;display:flex}.mascot-sidebar{text-align:center;border-right:1px solid var(--border-color);flex-direction:column;justify-content:center;align-items:center;padding-right:2rem;display:flex}@media (width<=768px){.navbar{border-radius:var(--border-radius);flex-direction:column;align-items:center;gap:1rem;margin:.5rem;padding:1.25rem 1rem}.nav-links{border-top:1px solid var(--border-color);flex-direction:column;align-items:stretch;gap:1rem;width:100%;padding-top:1rem}.nav-link{text-align:center;border-radius:var(--border-radius-sm);background:#fff3;padding:.5rem}.nav-user-info{border-left:none;border-top:1px dashed var(--border-color);justify-content:center;width:100%;padding-top:1rem;padding-left:0}.mascot-sidebar{border-right:none;border-bottom:1px solid var(--border-color);padding-bottom:1.5rem;padding-right:0}.grid-responsive-2-1,.grid-responsive-1-3,.grid-responsive-1-1,.grid-responsive-repeat-4,.grid-responsive-repeat-3,.admin-user-grid,.admin-user-grid.edit-active,.admin-content-grid{gap:1rem;grid-template-columns:1fr!important}.card{padding:1rem}}@keyframes visualBeat{0%{opacity:.5;transform:scale(1);box-shadow:0 0 #ff7b5466}50%{opacity:1;transform:scale(1.3);box-shadow:0 0 12px 6px #ff7b5400}to{opacity:.5;transform:scale(1);box-shadow:0 0 #ff7b5400}}.metronome-visual-dot{background:var(--secondary);border-radius:50%;width:24px;height:24px;transition:transform .1s;display:inline-block}.metronome-visual-dot.active{animation:.2s cubic-bezier(.175,.885,.32,1.275) forwards visualBeat}.dark .form-input,.dark select,.dark textarea{border-color:#ffffff26!important}.dark option{color:#edf2f7!important;background-color:#1a202c!important}.auth-grid{border-radius:var(--border-radius-lg);grid-template-columns:1fr 1fr;width:100%;max-width:900px;display:grid;overflow:hidden}.auth-brand-panel{background:var(--primary);color:#fff;text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:3rem 2rem;display:flex;position:relative}.role-buttons-flex{gap:.5rem;display:flex}.landing-features-flex{color:var(--primary);border-radius:var(--border-radius-full);background:#ffffff80;flex-wrap:wrap;justify-content:center;gap:2rem;margin-top:2.5rem;padding:.75rem 2rem;font-size:1rem;font-weight:700;display:flex;box-shadow:0 4px 15px #00000008}.landing-promo-grid{grid-template-columns:1fr 1.2fr;align-items:center;gap:3rem;display:grid}.quiz-options-grid{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.report-header-flex{border-bottom:3px solid #6c5dd3;justify-content:space-between;align-items:center;padding-bottom:1.5rem;display:flex}.preview-box-responsive{font-size:4.5rem;font-weight:700;font-family:var(--font-child);color:var(--primary);background:#ffffffe6;min-width:250px;max-width:100%;margin-bottom:2rem;padding:2.5rem;display:inline-block}.preview-box-responsive.word-box{color:var(--secondary);min-width:280px;font-size:3.5rem}@media (width<=768px){.auth-grid{grid-template-columns:1fr}.auth-brand-panel{display:none!important}.landing-features-flex{border-radius:var(--border-radius);gap:1rem;margin-top:1.5rem;padding:1rem;font-size:.9rem}.landing-promo-grid{gap:1.5rem;grid-template-columns:1fr!important;padding:1.5rem!important}.quiz-options-grid{grid-template-columns:1fr!important}.report-header-flex{text-align:center;flex-direction:column;align-items:center;gap:1rem}.report-header-flex>div{text-align:center;flex-direction:column;align-items:center}.preview-box-responsive{min-width:200px;margin-bottom:1.5rem;padding:2rem 1rem;font-size:3rem}.preview-box-responsive.word-box{min-width:200px;font-size:2.5rem}}@media (width<=480px){.role-buttons-flex{flex-direction:column}.nav-user-info{flex-direction:column;align-items:center;gap:.75rem}.navbar{padding:1rem}}.quick-menu-link{color:var(--text-main);border-radius:var(--border-radius-sm);transition:var(--transition);align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.9rem;font-weight:700;text-decoration:none;display:flex}.quick-menu-link:hover{background:var(--primary-light);color:var(--primary);transform:translate(4px)}