*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;min-height:100%}body{color:#172033;background:#f4f7fb;font-family:Arial,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}#root{min-height:100vh}.app{background:radial-gradient(circle at 0 0,#4f46e514,#0000 35%),linear-gradient(135deg,#f8fafc 0%,#eef2ff 100%);justify-content:center;align-items:center;min-height:100vh;padding:30px 20px;font-family:Arial,Helvetica,sans-serif;display:flex}.quiz-card{background:#fff;border:1px solid #e5e7eb;border-radius:24px;width:100%;max-width:720px;padding:40px;animation:.4s cardAppear;box-shadow:0 25px 60px #0f172a1a,0 8px 20px #4f46e50f}@keyframes cardAppear{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.quiz-card h1{text-align:center;color:#172033;margin:0 0 8px;font-size:32px;font-weight:800}.subtitle{text-align:center;color:#64748b;margin-bottom:28px;font-size:16px}.progress{color:#4338ca;background:#eef2ff;border-radius:999px;margin-bottom:18px;padding:7px 13px;font-size:14px;font-weight:700;display:inline-block}.quiz-card h2{color:#172033;margin:15px 0 24px;font-size:22px;line-height:1.6}.quiz-timer{color:#c2410c;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;width:fit-content;margin:0 auto 25px;padding:10px 18px;font-size:17px;font-weight:800;box-shadow:0 4px 12px #ea580c14}.options{flex-direction:column;gap:13px;display:flex}.options button{cursor:pointer;text-align:left;color:#334155;background:#fff;border:2px solid #e2e8f0;border-radius:14px;width:100%;padding:17px 18px;font-size:16px;line-height:1.5;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s}.options button:hover:not(:disabled){background:#f8faff;border-color:#818cf8;transform:translateY(-2px);box-shadow:0 6px 15px #4f46e514}.options button.selected{color:#3730a3;background:#eef2ff;border-color:#4f46e5;box-shadow:0 5px 15px #4f46e51f}.options button.correct{color:#166534;background:#dcfce7;border-color:#22c55e}.options button.wrong{color:#991b1b;background:#fee2e2;border-color:#ef4444}.options button:disabled{cursor:not-allowed}.option-letter{color:#4338ca;background:#eef2ff;border-radius:8px;justify-content:center;align-items:center;min-width:30px;height:30px;margin-right:8px;font-weight:800;display:inline-flex}.next-button,.quiz-card>button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4f46e5,#3730a3);border:none;border-radius:13px;width:100%;margin-top:25px;padding:15px 18px;font-size:16px;font-weight:700;transition:transform .2s,box-shadow .2s,opacity .2s;box-shadow:0 8px 20px #4f46e533}.next-button:hover,.quiz-card>button:hover{transform:translateY(-2px);box-shadow:0 12px 25px #4f46e547}.next-button:active,.quiz-card>button:active{transform:translateY(0)}.back-button{color:#475569;cursor:pointer;background:#fff;border:1px solid #dbe3ef;border-radius:12px;width:100%;margin-top:10px;padding:13px;transition:all .2s}.back-button:hover{background:#f8fafc;border-color:#94a3b8}.answer-feedback{background:#f8fafc;border-radius:12px;margin-top:20px;padding:15px}.correct-text{color:#166534;font-weight:700}.wrong-text{color:#991b1b}.feedback{text-align:center;margin:20px 0;line-height:1.6}.results-card{max-width:850px}.result{text-align:center;margin:30px 0;font-size:24px;font-weight:700}.result-icon{text-align:center;margin-bottom:10px;font-size:60px}.results-card h1{color:#172033}.course-name{text-align:center;color:#64748b;font-size:16px}.score-box{text-align:center;background:linear-gradient(135deg,#eef2ff,#f0f9ff);border:1px solid #e0e7ff;border-radius:18px;margin:28px 0;padding:25px}.score-box h2{color:#3730a3;margin:0;font-size:46px}.score-box p{color:#4f46e5;margin:8px 0 0;font-size:26px;font-weight:700}.performance-message{text-align:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;margin:20px 0;padding:17px;line-height:1.6}.review-title{color:#172033;margin-top:32px;margin-bottom:15px}.answer-review{flex-direction:column;gap:15px;display:flex}.review-item{border-left:5px solid;border-radius:14px;padding:18px}.correct-review{background:#f0fdf4;border-left-color:#22c55e}.wrong-review{background:#fef2f2;border-left-color:#ef4444}.review-item p{margin:7px 0;line-height:1.6}.dashboard{background:radial-gradient(circle at 100% 0,#6366f10f,#0000 30%),#f8fafc;width:100%;min-height:100vh}.dashboard-header{color:#172033;background:#fffffff5;border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:24px 6%;display:flex;box-shadow:0 2px 12px #0f172a0a}.dashboard-header h1{text-align:left;color:#172033;margin:0 0 8px;font-size:32px;font-weight:800}.dashboard-header p{color:#64748b;margin:0}.dashboard-header button{color:#4338ca;cursor:pointer;background:#eef2ff;border:none;border-radius:10px;padding:11px 17px;font-weight:700;transition:all .2s}.dashboard-header button:hover{background:#e0e7ff;transform:translateY(-1px)}.dashboard-content{width:88%;max-width:1200px;margin:40px auto}.dashboard-content h2{color:#172033;margin-bottom:8px}.dashboard-description{color:#64748b;margin-bottom:30px}.course-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%;display:grid}.course-card{background:#fff;border:1px solid #e5e7eb;border-radius:20px;min-width:0;padding:28px;transition:transform .25s,box-shadow .25s,border-color .25s;position:relative;box-shadow:0 8px 25px #0f172a0f}.course-card:hover{border-color:#c7d2fe;transform:translateY(-6px);box-shadow:0 18px 35px #4f46e51f}.course-icon{background:#eef2ff;border-radius:18px;justify-content:center;align-items:center;width:65px;height:65px;margin-bottom:18px;font-size:34px;display:flex}.course-code{color:#4f46e5;background:#eef2ff;border-radius:999px;padding:5px 10px;font-size:13px;font-weight:800;display:inline-block}.course-card h3{color:#172033;margin:14px 0 10px;font-size:20px}.course-card p{color:#64748b;min-height:55px;line-height:1.6}.course-price{font-weight:800;color:#0f766e!important;min-height:auto!important;font-size:18px!important}.course-card button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4f46e5,#3730a3);border:none;border-radius:11px;width:100%;margin-top:18px;padding:13px;font-size:15px;font-weight:700;transition:all .2s}.course-card button:hover{transform:translateY(-2px);box-shadow:0 8px 18px #4f46e540}.back-link{color:#4f46e5;cursor:pointer;background:0 0;border:none;margin-bottom:20px;font-size:15px;font-weight:700}.progress-dashboard{background:#f8fafc;min-height:100vh;padding-bottom:50px}.progress-dashboard .dashboard-header{background:#fff;padding:30px 6%}.progress-dashboard .dashboard-header h1{color:#172033;margin:0 0 8px;font-size:32px}.progress-dashboard .dashboard-header p{color:#64748b;margin:0}.progress-dashboard .dashboard-content{width:88%;max-width:1200px;margin:35px auto}.stats-grid{grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px;display:grid}.stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;align-items:center;gap:16px;padding:24px;transition:all .2s;display:flex;box-shadow:0 6px 20px #0f172a0d}.stat-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px #0f172a14}.stat-icon{font-size:32px}.stat-card h2{color:#172033;margin:0;font-size:28px}.stat-card h3{margin:5px 0;font-size:15px}.stat-card p{color:#64748b;margin:5px 0 0}.stat-card strong{font-size:30px}.dashboard-section{margin-bottom:40px}.section-heading{margin-bottom:20px}.section-heading h2{color:#172033;margin-bottom:5px}.section-heading p{color:#64748b}.course-progress-grid{grid-template-columns:repeat(2,1fr);gap:20px;display:grid}.course-progress-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:24px;transition:all .2s;box-shadow:0 6px 20px #0f172a0d}.course-progress-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px #0f172a14}.course-progress-top{justify-content:space-between;align-items:center;gap:20px;display:flex}.course-progress-top h3{color:#172033;margin:6px 0 0}.course-progress-top strong{color:#4f46e5;font-size:24px}.progress-bar{background:#e5e7eb;border-radius:20px;width:100%;height:10px;margin:20px 0 12px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#4f46e5,#06b6d4);border-radius:20px;height:100%;transition:width .5s}.course-progress-card p{color:#64748b;margin:0;font-size:14px}.history-list{background:#fff;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;box-shadow:0 6px 20px #0f172a0d}.history-item{border-bottom:1px solid #eee;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.history-item:last-child{border-bottom:none}.history-info h3{color:#172033;margin:0 0 5px}.history-info p{color:#6b7280;margin:0;font-size:14px}.history-score{font-size:18px;font-weight:700}.excellent{color:#16a34a}.good{color:#ca8a04}.needs-improvement{color:#dc2626}.empty-state{text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:50px;box-shadow:0 6px 20px #0f172a0d}.empty-state h3{color:#172033}.empty-state p{color:#6b7280}.start-button,.view-progress-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#4f46e5,#3730a3);border:none;border-radius:10px;padding:12px 20px;font-size:15px;font-weight:700;transition:all .2s}.start-button:hover,.view-progress-button:hover{transform:translateY(-2px);box-shadow:0 8px 18px #4f46e540}.start-button{margin-top:15px}.view-progress-button{margin:0}.profile-section{margin-top:30px}.profile-section h2{color:#172033;margin-bottom:15px}.profile-card{text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:35px;box-shadow:0 8px 25px #0f172a0f}.profile-avatar{background:#eef2ff;border-radius:50%;justify-content:center;align-items:center;width:85px;height:85px;margin:0 auto 15px;font-size:40px;display:flex}.profile-card h2{margin:8px 0}.profile-card p{color:#64748b;margin:5px 0}.profile-form{gap:10px;max-width:400px;margin:20px auto 0;display:flex}.profile-form input{border:1px solid #dbe3ef;border-radius:10px;outline:none;flex:1;padding:12px}.profile-form button{color:#fff;cursor:pointer;background:#4f46e5;border:none;border-radius:10px;padding:12px 18px;font-weight:700}.overall-progress-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:25px;box-shadow:0 6px 20px #0f172a0d}.overall-progress-header{justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}.overall-progress-header strong{color:#4f46e5;font-size:24px}.overall-progress-card p{color:#6b7280;margin-bottom:0}.recent-attempts{flex-direction:column;gap:12px;margin-top:20px;display:flex}.recent-attempt-card{background:#fff;border:1px solid #e5e7eb;border-radius:15px;justify-content:space-between;align-items:center;padding:20px 22px;transition:all .2s;display:flex;box-shadow:0 4px 15px #0f172a0a}.recent-attempt-card:hover{transform:translateY(-2px)}.recent-attempt-card p{color:#555;margin:5px 0}.recent-attempt-card small{color:#888}.attempt-score{text-align:right;flex-direction:column;gap:5px;display:flex}.attempt-score strong{color:#4f46e5;font-size:20px}.attempt-score span{color:#777}.auth-container{background:radial-gradient(circle at 10% 10%,#4f46e52e,#0000 32%),radial-gradient(circle at 90% 90%,#06b6d429,#0000 32%),linear-gradient(135deg,#eef2ff 0%,#f8fafc 50%,#ecfeff 100%);justify-content:center;align-items:center;width:100%;min-height:100vh;padding:24px;display:flex;position:relative;overflow:hidden}.auth-container:before{content:"";background:#4f46e51f;border-radius:50%;width:320px;height:320px;position:absolute;top:-160px;left:-120px}.auth-container:after{content:"";background:#06b6d41f;border-radius:50%;width:380px;height:380px;position:absolute;bottom:-180px;right:-170px}.auth-card{z-index:2;text-align:center;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#fffffff5;border:1px solid #ffffffe6;border-radius:26px;width:100%;max-width:440px;padding:42px 38px;animation:.55s authAppear;position:relative;box-shadow:0 25px 70px #0f172a24,0 8px 25px #4f46e514}.auth-card h1{letter-spacing:-1px;background:linear-gradient(135deg,#3730a3,#2563eb,#0891b2);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0 0 22px;font-size:34px;font-weight:800}.auth-card h2{color:#111827;margin:0 0 7px;font-size:25px;font-weight:800}.auth-card>p{color:#64748b;margin:0 0 28px;font-size:15px}.auth-card form{flex-direction:column;gap:14px;width:100%;display:flex}.auth-card input{box-sizing:border-box;color:#111827;background:#f8fafc;border:1.5px solid #dbe3ef;border-radius:13px;outline:none;width:100%;padding:15px 16px;font-size:15px;transition:border-color .2s,box-shadow .2s,background .2s,transform .2s}.auth-card input:hover{border-color:#a5b4fc}.auth-card input:focus{background:#fff;border-color:#4f46e5;transform:translateY(-1px);box-shadow:0 0 0 4px #4f46e51a}.auth-card input::placeholder{color:#94a3b8}.auth-card form button[type=submit]{color:#fff;background:linear-gradient(135deg,#4f46e5,#3730a3);border:none;border-radius:13px;width:100%;margin-top:6px;padding:15px 18px;font-size:16px;font-weight:800;transition:transform .2s,box-shadow .2s,opacity .2s;box-shadow:0 10px 22px #4f46e540}.auth-card form button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 14px 28px #4f46e552}.auth-card form button[type=submit]:active{transform:translateY(0)}.auth-card form button[type=submit]:disabled{opacity:.65;cursor:not-allowed;box-shadow:none;transform:none}.auth-message{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;margin-top:18px;padding:12px 14px;font-size:14px;line-height:1.5}.auth-switch{color:#4f46e5;cursor:pointer;background:0 0;border:none;margin-top:22px;padding:0;font-size:14px;font-weight:800}.auth-switch:hover{color:#3730a3;text-decoration:underline}@keyframes authAppear{0%{opacity:0;transform:translateY(25px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.payment-list{flex-direction:column;gap:15px;margin-top:20px;display:flex}.admin-payment-card{background:#fff;border:1px solid #e2e8f0;border-radius:15px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:center;gap:15px;padding:20px;transition:all .2s;display:grid;box-shadow:0 5px 15px #0f172a0a}.admin-payment-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px #0f172a14}.admin-payment-card h3{color:#172033;margin:0 0 5px}.admin-payment-card p{color:#64748b;margin:4px 0}.payment-reference{word-break:break-all;color:#475569;font-size:12px}.admin-payment-card span{color:#16a34a;font-weight:700}@media (width<=900px){.course-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}.course-progress-grid{grid-template-columns:1fr}}@media (width<=800px){.dashboard-header,.progress-dashboard .dashboard-header{flex-direction:column;align-items:flex-start}.dashboard-content,.progress-dashboard .dashboard-content{width:92%}}@media (width<=600px){.app{align-items:flex-start;padding:12px}.quiz-card{border-radius:18px;padding:28px 18px}.quiz-card h1{font-size:26px}.quiz-card h2{font-size:19px}.options button{padding:14px;font-size:15px}.quiz-timer{font-size:15px}.course-grid,.stats-grid{grid-template-columns:1fr}.dashboard-header,.progress-dashboard .dashboard-header{padding:25px 20px}.dashboard-header h1,.progress-dashboard .dashboard-header h1{font-size:26px}.dashboard-content,.progress-dashboard .dashboard-content{width:94%;margin:25px auto}.history-item,.recent-attempt-card{flex-direction:column;align-items:flex-start;gap:12px}.attempt-score{text-align:left}.course-progress-top{align-items:flex-start}.profile-form{flex-direction:column}.auth-container{padding:18px 14px}.auth-card{border-radius:22px;max-width:100%;padding:34px 22px}.auth-card h1{font-size:29px}.auth-card h2{font-size:22px}.auth-card>p{margin-bottom:24px;font-size:14px}.auth-card input,.auth-card form button[type=submit]{padding:14px}.admin-payment-card{grid-template-columns:1fr}}@media (width<=380px){.quiz-card{padding:22px 15px}.auth-container{padding:12px}.auth-card{padding:28px 17px}.auth-card h1{font-size:27px}.auth-card h2{font-size:20px}.auth-card input{font-size:14px}.score-box h2{font-size:32px}}.answer-feedback{border-radius:12px;flex-direction:column;gap:6px;margin-top:20px;padding:16px 18px;font-size:15px;line-height:1.5;display:flex}.quiz-mode-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px;display:grid}.quiz-mode-button{color:#1e293b;text-align:left;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:18px;flex-direction:column;justify-content:center;gap:12px;min-height:180px;padding:26px;transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;display:flex;position:relative}.quiz-mode-button:hover{border-color:#94a3b8;transform:translateY(-4px);box-shadow:0 12px 30px #0f172a1a}.quiz-mode-button strong{color:#0f172a;font-size:20px}.quiz-mode-button span{color:#64748b;font-size:14px;line-height:1.6}.quiz-mode-button:first-child{border-top:4px solid #10b981}.quiz-mode-button:first-child:hover{background:#f0fdf4;border-color:#10b981}.quiz-mode-button:last-child{border-top:4px solid #4f46e5}.quiz-mode-button:last-child:hover{background:#eef2ff;border-color:#4f46e5}.quiz-mode-badge{letter-spacing:.2px;border-radius:999px;justify-content:center;align-items:center;width:fit-content;margin-bottom:14px;padding:7px 13px;font-size:13px;font-weight:700;display:inline-flex}.practice-mode-badge{color:#047857;background:#ecfdf5;border:1px solid #a7f3d0}.exam-mode-badge{color:#4338ca;background:#eef2ff;border:1px solid #c7d2fe}.quiz-timer{color:#fff;letter-spacing:.5px;background:#0f172a;border-radius:12px;justify-content:center;align-items:center;gap:8px;margin:0 auto 20px;padding:10px 18px;font-size:17px;font-weight:700;display:inline-flex;box-shadow:0 6px 18px #0f172a26}.quiz-timer:before{content:""}.answer-feedback{border-radius:14px;flex-direction:column;gap:7px;margin-top:20px;padding:17px 19px;font-size:15px;line-height:1.55;animation:.25s feedbackAppear;display:flex}.correct-feedback{color:#065f46;background:#ecfdf5;border:1px solid #6ee7b7}.incorrect-feedback{color:#991b1b;background:#fef2f2;border:1px solid #fca5a5}.answer-feedback strong{font-size:16px}@keyframes feedbackAppear{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.question-navigator{flex-wrap:wrap;justify-content:center;gap:8px;margin:20px 0;display:flex}.question-navigator button{color:#334155;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:8px;width:40px;height:40px;padding:0;font-size:14px;font-weight:700;transition:background .2s,border-color .2s,transform .15s}.question-navigator button:hover{background:#f1f5f9;border-color:#94a3b8;transform:translateY(-2px)}.question-navigator button.active{color:#fff;background:#4f46e5;border-color:#4f46e5}.question-navigator button.answered{color:#fff;background:#22c55e;border-color:#22c55e}.question-navigator button.active.answered{color:#fff;background:#4f46e5;border-color:#4f46e5}.quiz-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.quiz-progress{color:#64748b;font-size:14px;font-weight:600}.quiz-option{color:#1e293b;text-align:left;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:12px;width:100%;margin-bottom:12px;padding:16px 18px;font-size:15px;line-height:1.5;transition:border-color .2s,background .2s,transform .15s,box-shadow .2s;position:relative}.quiz-option:hover{background:#f8fafc;border-color:#94a3b8;transform:translate(2px)}.quiz-option.selected{background:#eef2ff;border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e514}.quiz-option.correct{color:#065f46;background:#ecfdf5;border-color:#10b981}.quiz-option.incorrect{color:#991b1b;background:#fef2f2;border-color:#ef4444}.exam-mode .quiz-card{border-top:4px solid #4f46e5}.practice-mode .quiz-card{border-top:4px solid #10b981}@media (width<=700px){.quiz-mode-options{grid-template-columns:1fr}.quiz-mode-button{min-height:150px;padding:22px}.quiz-mode-button strong{font-size:18px}.quiz-timer{padding:9px 15px;font-size:15px}.answer-feedback{padding:15px}}