:root{--navy-900: #071525;--navy-800: #0B2545;--navy-700: #163F6B;--navy-600: #1A4E82;--navy-100: #E8EEF5;--navy-50: #F0F4F9;--teal-600: #0E9DB2;--teal-500: #12B5CC;--teal-400: #1EBECA;--teal-100: #D6F3F7;--teal-50: #EBF9FB;--success: #16A34A;--success-bg:#DCFCE7;--error: #DC2626;--error-bg: #FEE2E2;--warning: #D97706;--warning-bg:#FEF3C7;--white: #FFFFFF;--gray-50: #F8FAFC;--gray-100: #F1F5F9;--gray-200: #E2E8F0;--gray-300: #CBD5E1;--gray-400: #94A3B8;--gray-500: #64748B;--gray-600: #475569;--gray-700: #334155;--gray-800: #1E293B;--gray-900: #0F172A;--font-display: "Libre Baskerville", Georgia, serif;--font-body: "Mulish", system-ui, sans-serif;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--shadow-sm: 0 1px 3px rgba(7,21,37,.08), 0 1px 2px rgba(7,21,37,.04);--shadow-md: 0 4px 12px rgba(7,21,37,.1), 0 2px 4px rgba(7,21,37,.06);--shadow-lg: 0 10px 30px rgba(7,21,37,.12), 0 4px 8px rgba(7,21,37,.06);--shadow-xl: 0 20px 50px rgba(7,21,37,.15);--transition: .2s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--gray-50);color:var(--gray-900);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}h1,h2,h3,h4{font-family:var(--font-display);line-height:1.25;color:var(--navy-800);font-weight:700}h1{font-size:2.2rem}h2{font-size:1.7rem}h3{font-size:1.3rem}h4{font-size:1.1rem}p{color:var(--gray-700)}a{color:var(--teal-600);text-decoration:none}a:hover{text-decoration:underline}.app-shell{display:flex;flex-direction:column;min-height:100vh}.page-content{flex:1;max-width:1200px;margin:0 auto;padding:2rem 1.5rem;width:100%}.page-content.wide{max-width:1400px}.navbar{background:var(--navy-800);padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:64px;position:sticky;top:0;z-index:100;box-shadow:0 2px 20px #07152540}.navbar-logo{font-family:var(--font-display);font-size:1.3rem;color:var(--white);font-weight:700;display:flex;align-items:center;gap:.6rem;text-decoration:none}.navbar-logo span{color:var(--teal-400)}.navbar-links{display:flex;align-items:center;gap:.5rem}.nav-link{color:var(--navy-100);padding:.4rem .9rem;border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;transition:var(--transition);text-decoration:none;letter-spacing:.01em}.nav-link:hover,.nav-link.active{background:#1ebeca26;color:var(--teal-400);text-decoration:none}.nav-user{display:flex;align-items:center;gap:.75rem;color:var(--navy-100);font-size:.85rem}.nav-badge{background:var(--teal-400);color:var(--navy-900);padding:2px 8px;border-radius:20px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);overflow:hidden;transition:var(--transition)}.card-body{padding:1.5rem}.card:hover{box-shadow:var(--shadow-md)}.card.clickable{cursor:pointer}.card.clickable:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}button,.btn{cursor:pointer;font-family:var(--font-body)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.3rem;border-radius:var(--radius-md);font-size:.9rem;font-weight:700;border:none;transition:var(--transition);text-decoration:none;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--navy-800);color:var(--white)}.btn-primary:hover:not(:disabled){background:var(--navy-700)}.btn-teal{background:var(--teal-500);color:var(--white)}.btn-teal:hover:not(:disabled){background:var(--teal-600)}.btn-outline{background:transparent;color:var(--navy-800);border:2px solid var(--navy-800)}.btn-outline:hover:not(:disabled){background:var(--navy-50)}.btn-ghost{background:transparent;color:var(--gray-600);border:1px solid var(--gray-300)}.btn-ghost:hover:not(:disabled){background:var(--gray-100);color:var(--gray-800)}.btn-danger{background:var(--error);color:var(--white)}.btn-danger:hover:not(:disabled){background:#b91c1c}.btn-success{background:var(--success);color:var(--white)}.btn-sm{padding:.35rem .85rem;font-size:.82rem}.btn-lg{padding:.85rem 2rem;font-size:1rem}.btn-full{width:100%}.form-group{margin-bottom:1.25rem}.form-label{display:block;font-size:.85rem;font-weight:700;color:var(--gray-700);margin-bottom:.4rem;letter-spacing:.02em;text-transform:uppercase}.form-input,.form-select,.form-textarea{width:100%;padding:.65rem 1rem;border:1.5px solid var(--gray-300);border-radius:var(--radius-md);font-size:.95rem;font-family:var(--font-body);color:var(--gray-900);background:var(--white);transition:var(--transition);outline:none}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--teal-500);box-shadow:0 0 0 3px #12b5cc26}.form-textarea{resize:vertical;min-height:100px;line-height:1.5}.form-error{color:var(--error);font-size:.8rem;margin-top:.3rem}.form-hint{color:var(--gray-500);font-size:.8rem;margin-top:.3rem}.progress-bar-outer{background:var(--gray-200);border-radius:99px;height:8px;overflow:hidden}.progress-bar-inner{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal-500),var(--teal-400));transition:width .5s ease}.progress-label{display:flex;justify-content:space-between;font-size:.82rem;color:var(--gray-500);margin-bottom:.4rem;font-weight:600}.alert{padding:.9rem 1.2rem;border-radius:var(--radius-md);font-size:.9rem;font-weight:500;margin-bottom:1rem;border:1px solid transparent}.alert-error{background:var(--error-bg);color:#991b1b;border-color:#fecaca}.alert-success{background:var(--success-bg);color:#166534;border-color:#bbf7d0}.alert-warning{background:var(--warning-bg);color:#92400e;border-color:#fde68a}.alert-info{background:var(--teal-50);color:var(--teal-600);border-color:var(--teal-100)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#07152599;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .15s ease}.modal-box{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:640px;width:100%;max-height:90vh;overflow-y:auto;animation:slideUp .2s ease}.modal-header{padding:1.5rem 1.75rem 1rem;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between}.modal-header h3{font-size:1.2rem}.modal-body{padding:1.5rem 1.75rem}.modal-footer{padding:1rem 1.75rem;border-top:1px solid var(--gray-200);display:flex;gap:.75rem;justify-content:flex-end}.modal-close{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--gray-400);line-height:1;padding:.2rem;border-radius:var(--radius-sm);transition:var(--transition)}.modal-close:hover{color:var(--gray-700);background:var(--gray-100)}.table-wrapper{overflow-x:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}table{width:100%;border-collapse:collapse;background:var(--white)}thead{background:var(--navy-800)}thead th{color:var(--navy-100);font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.85rem 1rem;text-align:left}tbody tr{border-bottom:1px solid var(--gray-100);transition:var(--transition)}tbody tr:last-child{border-bottom:none}tbody tr:hover{background:var(--gray-50)}tbody td{padding:.85rem 1rem;font-size:.9rem;color:var(--gray-700);vertical-align:middle}.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:99px;font-size:.75rem;font-weight:700;letter-spacing:.04em}.badge-navy{background:var(--navy-100);color:var(--navy-800)}.badge-teal{background:var(--teal-100);color:var(--teal-600)}.badge-green{background:var(--success-bg);color:var(--success)}.badge-red{background:var(--error-bg);color:var(--error)}.badge-yellow{background:var(--warning-bg);color:var(--warning)}.badge-gray{background:var(--gray-200);color:var(--gray-600)}.login-page{min-height:100vh;display:flex;background:var(--navy-800);position:relative;overflow:hidden}.login-page:before{content:"";position:absolute;top:-20%;left:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(30,190,202,.12) 0%,transparent 70%);pointer-events:none}.login-page:after{content:"";position:absolute;bottom:-20%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(30,190,202,.08) 0%,transparent 70%);pointer-events:none}.login-panel{margin:auto;width:100%;max-width:440px;padding:1.5rem;position:relative;z-index:1}.login-box{background:var(--white);border-radius:var(--radius-xl);padding:2.5rem;box-shadow:var(--shadow-xl)}.login-logo{text-align:center;margin-bottom:2rem}.login-logo h1{font-family:var(--font-display);font-size:1.8rem;color:var(--navy-800)}.login-logo h1 span{color:var(--teal-500)}.login-logo p{color:var(--gray-500);font-size:.9rem;margin-top:.4rem}.dashboard-header{margin-bottom:2rem}.dashboard-header h1{font-size:1.9rem;margin-bottom:.3rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:2.5rem}.stat-card{background:var(--white);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;border:1px solid var(--gray-200);box-shadow:var(--shadow-sm)}.stat-card-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gray-500);margin-bottom:.4rem}.stat-card-value{font-family:var(--font-display);font-size:2.2rem;color:var(--navy-800);font-weight:700;line-height:1}.stat-card-sub{font-size:.8rem;color:var(--gray-500);margin-top:.2rem}.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}.category-card{background:var(--white);border-radius:var(--radius-lg);padding:1.5rem;border:1px solid var(--gray-200);box-shadow:var(--shadow-sm);cursor:pointer;transition:var(--transition);position:relative;overflow:hidden}.category-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--navy-700),var(--teal-500));opacity:0;transition:var(--transition)}.category-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--teal-100)}.category-card:hover:before{opacity:1}.category-card-name{font-family:var(--font-display);font-size:1.15rem;color:var(--navy-800);margin-bottom:.75rem;font-weight:700}.category-card-stats{display:flex;gap:1rem;font-size:.82rem;color:var(--gray-500);font-weight:600;margin-bottom:1rem}.quiz-layout{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:800px;margin:0 auto}.quiz-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.75rem}.quiz-mode-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--navy-800);color:var(--teal-400);padding:.3rem .9rem;border-radius:99px;font-size:.8rem;font-weight:700;letter-spacing:.04em}.question-card{background:var(--white);border-radius:var(--radius-xl);border:1px solid var(--gray-200);box-shadow:var(--shadow-md);overflow:hidden}.question-card-header{background:var(--navy-800);padding:1.25rem 1.75rem;display:flex;justify-content:space-between;align-items:center}.question-meta{display:flex;gap:.5rem}.question-body{padding:1.75rem}.question-text{font-size:1.1rem;line-height:1.65;color:var(--gray-800);margin-bottom:1.75rem;font-weight:500}.choices-list{display:flex;flex-direction:column;gap:.75rem}.choice-btn{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;border:2px solid var(--gray-200);border-radius:var(--radius-md);background:var(--white);cursor:pointer;text-align:left;font-family:var(--font-body);font-size:.95rem;color:var(--gray-700);transition:var(--transition);width:100%}.choice-btn:hover:not(:disabled){border-color:var(--navy-700);background:var(--navy-50);color:var(--navy-800)}.choice-btn:disabled{cursor:default}.choice-btn.selected{border-color:var(--navy-700);background:var(--navy-50)}.choice-btn.correct{border-color:var(--success);background:var(--success-bg);color:#166534}.choice-btn.wrong{border-color:var(--error);background:var(--error-bg);color:#991b1b}.choice-letter{display:flex;align-items:center;justify-content:center;width:30px;height:30px;min-width:30px;border-radius:var(--radius-sm);background:var(--gray-100);font-weight:800;font-size:.85rem;color:var(--gray-600);transition:var(--transition)}.choice-btn.correct .choice-letter{background:var(--success);color:var(--white)}.choice-btn.wrong .choice-letter{background:var(--error);color:var(--white)}.choice-btn.selected .choice-letter{background:var(--navy-800);color:var(--white)}.explanation-box{margin-top:1.25rem;padding:1.25rem;background:var(--gray-50);border-left:4px solid var(--teal-500);border-radius:0 var(--radius-md) var(--radius-md) 0;animation:fadeIn .3s ease}.explanation-box h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;color:var(--teal-600);margin-bottom:.5rem;font-weight:800}.explanation-box p{font-size:.95rem;line-height:1.65;color:var(--gray-700);white-space:pre-wrap}.result-banner{padding:.9rem 1.25rem;border-radius:var(--radius-md);font-weight:700;font-size:1rem;display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;animation:fadeIn .2s ease}.result-banner.correct{background:var(--success-bg);color:#166534}.result-banner.wrong{background:var(--error-bg);color:#991b1b}.stats-tabs{display:flex;gap:.25rem;background:var(--gray-100);padding:.3rem;border-radius:var(--radius-md);margin-bottom:1.5rem;flex-wrap:wrap}.stats-tab{padding:.5rem 1.2rem;border-radius:var(--radius-sm);font-size:.88rem;font-weight:700;background:none;border:none;color:var(--gray-500);cursor:pointer;transition:var(--transition)}.stats-tab.active{background:var(--white);color:var(--navy-800);box-shadow:var(--shadow-sm)}.admin-tabs{display:flex;border-bottom:2px solid var(--gray-200);margin-bottom:1.5rem;gap:0}.admin-tab{padding:.75rem 1.5rem;border:none;background:none;font-family:var(--font-body);font-size:.9rem;font-weight:700;color:var(--gray-500);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:var(--transition)}.admin-tab:hover{color:var(--navy-700)}.admin-tab.active{color:var(--navy-800);border-bottom-color:var(--navy-800)}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.filter-bar{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}.filter-group{display:flex;flex-direction:column;gap:.35rem;min-width:160px}.filter-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500)}.multi-select-box{border:1.5px solid var(--gray-300);border-radius:var(--radius-md);max-height:200px;overflow-y:auto;background:var(--white);transition:var(--transition)}.multi-select-box:focus-within{border-color:var(--teal-500);box-shadow:0 0 0 3px #12b5cc26}.multi-select-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .9rem;cursor:pointer;transition:var(--transition);font-size:.9rem}.multi-select-item:hover{background:var(--gray-50)}.multi-select-item.selected{background:var(--teal-50)}.multi-select-item input[type=checkbox]{accent-color:var(--teal-500);width:15px;height:15px}.icon{display:inline-flex;align-items:center}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.fade-in{animation:fadeIn .3s ease}.slide-up{animation:slideUp .35s ease}.loading{animation:pulse 1.5s ease infinite}.spinner{width:32px;height:32px;border:3px solid var(--gray-200);border-top-color:var(--teal-500);border-radius:50%;animation:spin .8s linear infinite}.spinner.sm{width:18px;height:18px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.loading-page{display:flex;align-items:center;justify-content:center;min-height:300px;gap:1rem;color:var(--gray-500);font-weight:600}.toggle-group{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition)}.toggle-group:hover{background:var(--teal-50);border-color:var(--teal-200)}.toggle-group label{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--gray-700)}.toggle-group input[type=checkbox]{accent-color:var(--teal-500);width:17px;height:17px}.session-end-card{background:var(--white);border-radius:var(--radius-xl);padding:2.5rem;text-align:center;max-width:600px;margin:2rem auto;box-shadow:var(--shadow-lg);border:1px solid var(--gray-200)}.session-score{font-family:var(--font-display);font-size:4rem;color:var(--navy-800);font-weight:700;line-height:1;margin:1rem 0}.session-score-label{font-size:.9rem;color:var(--gray-500);font-weight:600}.empty-state{text-align:center;padding:3rem 1.5rem;color:var(--gray-400)}.empty-state-icon{font-size:3rem;margin-bottom:1rem}.empty-state h3{color:var(--gray-600);margin-bottom:.5rem}.quiz-panel-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1.5rem;align-items:start}@media (max-width: 768px){h1{font-size:1.7rem}h2{font-size:1.4rem}.page-content{padding:1.25rem 1rem}.navbar{padding:0 1rem}.categories-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.quiz-layout{max-width:100%}.quiz-panel-grid{grid-template-columns:1fr}.modal-box{max-height:95vh}.admin-tab{padding:.6rem 1rem;font-size:.82rem}.login-box{padding:1.75rem 1.5rem}.filter-bar{flex-direction:column}.filter-group{min-width:100%}}@media (max-width: 480px){.stats-grid{grid-template-columns:1fr 1fr}.choice-btn{font-size:.88rem}.session-score{font-size:3rem}.navbar-links .nav-link span{display:none}}