:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-height:100vh;width:100vw;overflow:hidden}#root{width:100%;height:100vh;display:flex;flex-direction:column}#root{max-width:1280px;margin:0 auto;text-align:center}:root{font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;--primary: #2563eb;--primary-dark: #1e40af;--secondary: #64748b;--success: #16a34a;--error: #dc2626;--bg: #f1f5f9;--card-bg: #ffffff;--text: #0f172a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-height:100vh;width:100vw;overflow:hidden;background-color:var(--bg);color:var(--text)}#root{width:100%;height:100vh;display:flex;flex-direction:column;max-width:none;text-align:left}.dashboard-header{background:#fff;border-bottom:1px solid #e2e8f0;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;height:80px}.header-left{display:flex;align-items:center;gap:1.5rem}.grade-badge{background:#0f172a;color:#fff;font-weight:800;padding:.5rem .75rem;border-radius:8px;font-size:1.1rem}.school-name{color:#64748b;font-size:.85rem;margin:0;font-weight:500}.header-right{display:flex;gap:1.5rem}.status-item{display:flex;align-items:center;gap:.5rem;font-weight:600;color:#10b981;font-size:.9rem}.status-item.pending{color:#f59e0b}.nav-btn{width:45px;height:40px;border:1px solid #e2e8f0;background:#fff;color:#64748b;border-radius:8px;font-weight:600;transition:all .2s;display:flex;align-items:center;justify-content:center}.nav-btn:hover{border-color:#94a3b8;background:#f8fafc}.nav-btn.active{background:#0f172a;color:#fff;border-color:#0f172a;box-shadow:0 4px 6px -1px #0000001a}.nav-btn.answered{background-color:#ecfdf5;color:#059669;border-color:#10b981}.questions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.customize-scrollbar::-webkit-scrollbar{width:6px}.customize-scrollbar::-webkit-scrollbar-track{background:transparent}.customize-scrollbar::-webkit-scrollbar-thumb{background-color:#cbd5e1;border-radius:20px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .4s ease-out forwards}.visual-container{margin:1.5rem 0;padding:1.5rem;background:#f8fafc;border-radius:.75rem;border:2px dashed #cbd5e1;text-align:center;font-size:.95rem;color:var(--secondary);display:flex;align-items:center;justify-content:center;gap:10px}.graph-container{display:flex;align-items:flex-end;justify-content:space-around;height:180px;margin-top:10px;background:#fff;padding:1rem;border-radius:.5rem;border:1px solid #e2e8f0;width:100%}.bar-group{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;width:15%}.bar{background:var(--primary);width:100%;border-radius:4px 4px 0 0;transition:height 1s ease;position:relative}.bar:hover{opacity:.9}.bar-label{font-size:.85rem;margin-top:8px;font-weight:700;color:var(--secondary)}.bar-val{font-size:.8rem;margin-bottom:4px;font-weight:600;color:var(--primary)}.circle-pattern{display:flex;gap:15px;justify-content:center;margin:1rem 0;flex-wrap:wrap}.circle{width:50px;height:50px;border:3px solid var(--primary);border-radius:50%;display:grid;place-items:center;font-size:.9rem;font-weight:700;color:var(--primary-dark);background:#eff6ff}.explanation-content strong{color:#0f172a}.explanation-content ul{margin:.5rem 0;padding-left:1.5rem}.explanation-content li{margin-bottom:.25rem}