html,body{margin:0;width:100%;height:100%}.progress-bar-top{position:fixed;top:0;left:0;right:0;height:4px;background:#ffffff14;z-index:100}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#60a5fa,#a78bfa);width:0%;transition:width .3s ease}.quiz-header{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;background:#1e293b66;border-radius:8px}.hdr-timer{display:flex;align-items:center;gap:.25rem;font-size:.85rem;font-weight:700;color:#fbbf24;flex-shrink:0}.hdr-materia{font-size:.8rem;color:#cbd5e1;font-weight:500;text-align:center;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 .5rem}.hdr-counter{font-size:.75rem;font-weight:600;color:#94a3b8;flex-shrink:0}.quiz-footer{position:fixed;bottom:0;left:0;right:0;padding:.5rem 1.5rem;display:flex;justify-content:space-between;align-items:center;z-index:100;background:#0f172af2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.08)}.footer-btn{width:64px;height:44px;border:none;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;background:var(--primary);transition:all .15s ease}.footer-btn:hover{background:var(--primary-hover);transform:scale(1.05)}.footer-btn:active{transform:scale(.97)}.footer-btn.sm{width:44px;height:40px;border-radius:8px;background:#ffffff1f}.footer-btn.sm:hover{background:#ffffff38}.zoom-controls{display:flex;gap:.4rem}.footer-btn.finish-mode{background:var(--success)!important}.footer-btn.finish-mode:hover{filter:brightness(1.1)}.question-card{overflow:visible;--quiz-zoom: 1}.q-title{font-size:calc(1.15rem * var(--quiz-zoom));line-height:1.4;margin:0 0 .5rem;transition:font-size .15s ease}.q-image{margin:.5rem 0;border-radius:8px;overflow:hidden;background:#fff;padding:.25rem}.q-image img{max-width:100%;height:auto;display:block;margin:0 auto;cursor:zoom-in;transition:transform .2s}.q-image img:hover{transform:scale(1.02)}.image-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s ease}.modal-backdrop{position:absolute;inset:0;background:#0f172ad9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.image-modal img{position:relative;z-index:10000;max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 25px 50px -12px #00000080;transform:scale(1);animation:popIn .3s cubic-bezier(.175,.885,.32,1.275)}.btn-close-modal{position:absolute;top:1.5rem;right:1.5rem;z-index:10001;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-close-modal:hover{background:#ffffff40;transform:scale(1.1)}@keyframes popIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.q-options{display:flex;flex-direction:column;gap:.3rem}.option-btn{text-align:left;padding:.5rem .75rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:var(--text-main);font-size:calc(.95rem * var(--quiz-zoom, 1));cursor:pointer;transition:all .15s ease}.option-btn:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff40}.option-btn.correct{border-color:var(--success)!important;background:#10b98133!important;color:#a7f3d0!important}.option-btn.wrong{border-color:var(--danger)!important;background:#ef444433!important;color:#fecaca!important}.option-btn:disabled{cursor:default}.q-feedback{padding:.4rem .75rem;border-radius:8px;margin-top:.3rem;animation:fadeIn .2s ease}.q-feedback p{margin:0;font-size:calc(.85rem * var(--quiz-zoom, 1));font-weight:600;transition:font-size .15s ease}.q-feedback.success{background:var(--success-bg);color:#065f46;border-left:4px solid var(--success)}.q-feedback.error{background:var(--danger-bg);color:#991b1b;border-left:4px solid var(--danger)}:root{--primary: #4F46E5;--primary-hover: #4338CA;--success: #10B981;--success-bg: #D1FAE5;--danger: #EF4444;--danger-bg: #FEE2E2;--bg-color: #0F172A;--card-bg: rgba(30, 41, 59, .7);--text-main: #F8FAFC;--text-muted: #94A3B8}body{margin:0;font-family:Inter,system-ui,sans-serif;background:linear-gradient(135deg,#0f172a,#1e1b4b);color:var(--text-main);min-height:100vh;display:flex;justify-content:center}.app-container{width:100%;max-width:600px;padding:.5rem;box-sizing:border-box}.view{display:none;animation:fadeIn .3s ease forwards}.view.active-view{display:flex;flex-direction:column;gap:.5rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.glass{background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 10px 30px -10px #00000080;padding:1rem}.gradient-text{background:linear-gradient(to right,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem;font-size:2.5rem}.hero p{color:var(--text-muted);font-size:1.1rem;margin-top:0}.mtc-logo{width:80px;height:auto;margin-bottom:.5rem;border-radius:8px}h2{margin-top:0;font-size:1.5rem}.btn{width:100%;padding:1rem;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.primary-btn{background:var(--primary);color:#fff}.primary-btn:hover{background:var(--primary-hover);transform:translateY(-2px)}.primary-btn:active{transform:translateY(0)}.primary-btn:disabled{background:#475569;cursor:not-allowed;opacity:.7;transform:none}.secondary-btn{background:transparent;border:2px solid var(--primary);color:#fff}.secondary-btn:hover{background:#4f46e51a}.pulse-glow{box-shadow:0 0 15px #4f46e580;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #4f46e566}70%{box-shadow:0 0 0 15px #4f46e500}to{box-shadow:0 0 #4f46e500}}.hidden{display:none!important}.text-center{text-align:center}.score-circle{width:150px;height:150px;border-radius:50%;border:8px solid var(--primary);display:flex;align-items:center;justify-content:center;margin:2rem auto;font-size:2.5rem;font-weight:700}.score-pass{border-color:var(--success);color:var(--success)}.score-fail{border-color:var(--danger);color:var(--danger)}