:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;font-weight:400;color-scheme:light;color:#333;background-color:#f5f5f5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;min-height:100vh;background-color:#f5f5f5;color:#333}h1,h2,h3,h4,h5,h6{color:#2c3e50;margin-bottom:1rem}a{color:#2196f3;text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font-family:inherit;font-size:1rem}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}@media (max-width: 768px){.app{padding:1rem}.login-container,.quiz-container,.result-container{margin:1rem 0;padding:1rem}.quiz-header{flex-direction:column;gap:.5rem;text-align:center}.options{grid-template-columns:1fr}}.results-container{max-width:1200px;margin:0 auto;padding:2rem;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.certificate{background:#fff;border:2px solid #e0e0e0;border-radius:15px;box-shadow:0 15px 40px #0000001a;display:flex;aspect-ratio:16/9;min-height:500px;overflow:hidden}.certificate-left-panel{background:#1c2d4b;width:20%;padding:2rem;display:flex;flex-direction:column;color:#fff;position:relative;min-height:100%}.left-panel-content{display:flex;flex-direction:column;height:100%;justify-content:flex-start;align-items:center;position:relative;padding-bottom:6rem}.seal-container{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);width:100%;text-align:center;padding:0 1rem;box-sizing:border-box}.seal-wrapper{display:inline-block;max-width:120px;width:100%}.gold-seal{max-width:120px;height:auto;opacity:.9;filter:drop-shadow(0 0 10px rgba(218,165,32,.4))}.certificate-left-panel:after{content:"";position:absolute;right:0;top:0;bottom:0;width:20px;background:linear-gradient(to right,transparent,rgba(255,255,255,.1));border-radius:0 15px 15px 0}.logo-section{text-align:center;margin-bottom:2rem}.left-logo{width:80px;height:80px;object-fit:contain;margin-bottom:1rem;filter:brightness(0) invert(1)}.logo-text h3{font-size:1.8rem;font-weight:700;margin:0 0 .5rem;letter-spacing:2px}.logo-text p{font-size:.9rem;margin:0;opacity:.8;letter-spacing:1px}.qr-section{text-align:center}.qr-code{width:100px;height:100px;background:#fff;border-radius:8px;margin:0 auto;display:flex;align-items:center;justify-content:center}.qr-pattern{width:80px;height:80px;background-image:linear-gradient(45deg,#000 25%,transparent 25%),linear-gradient(-45deg,#000 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#000 75%),linear-gradient(-45deg,transparent 75%,#000 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.certificate-right-panel{background:#fff;width:80%;padding:3rem;position:relative;display:flex;flex-direction:column}.certificate-right-panel:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 80%,rgba(0,0,0,.03) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(0,0,0,.03) 0%,transparent 50%);pointer-events:none}.certificate-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;position:relative;z-index:1;border-bottom:1px solid #eee;padding-bottom:1rem}.certificate-title{color:#1c2d4b;font-size:1.6rem;font-weight:700;margin:0;text-transform:uppercase;letter-spacing:1px;flex-grow:1;padding-right:1rem}.score-percentage{display:flex;flex-direction:column;align-items:center;background:linear-gradient(135deg,#f8fafc 40%,#f1f5f9 60%);border-radius:12px;padding:1.2rem 2rem;border:1px solid rgba(28,45,75,.1);box-shadow:0 4px 16px #0000000a;text-align:center;margin:0;position:relative;top:-.5rem;min-width:120px;transition:all .3s ease;overflow:hidden;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.score-percentage:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1c2d4b,#3a5a8a)}.percentage-value{font-size:2.4rem;font-weight:800;color:#1c2d4b;line-height:1;font-family:Georgia,serif;margin-bottom:.1rem}.percentage-label{font-size:.9rem;color:#5a6c84;letter-spacing:1px;text-transform:uppercase;font-weight:600;margin-top:.3rem;position:relative}.award-badge{position:relative;width:120px;height:120px}.badge-content{width:100%;height:100%;background:linear-gradient(135deg,gold,#ffed4e);border:3px dotted #ffd700;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#000;font-weight:700;box-shadow:0 5px 15px #ffd7004d}.stars{font-size:1.2rem;margin-bottom:.3rem}.year{font-size:1.8rem;margin-bottom:.2rem}.awarded{font-size:.8rem;letter-spacing:1px}.badge-ribbon{position:absolute;bottom:-15px;left:50%;transform:translate(-50%);width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:20px solid #1c2d4b}.badge-ribbon:after{content:"";position:absolute;top:-20px;left:-15px;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:20px solid #1c2d4b;transform:translate(-15px)}.certificate-content{flex:1;position:relative;z-index:1}.intro-text{color:#000;font-size:1.1rem;margin:0 0 1rem;font-family:Georgia,serif}.student-name-container{display:flex;align-items:center;gap:2rem;margin:.5rem 0 1.5rem}.student-name{color:#000;font-size:2.5rem;font-weight:700;margin:0;white-space:nowrap}.score-percentage{display:flex;flex-direction:column;align-items:center;background:#1c2d4b0d;border-radius:12px;padding:.5rem 1.2rem;border:1px solid rgba(28,45,75,.1);text-align:center;margin:0}.percentage-value{font-size:2.2rem;font-weight:800;color:#1c2d4b;line-height:1;font-family:Georgia,serif;display:block;text-shadow:1px 1px 2px rgba(0,0,0,.1);position:relative;z-index:1}.percentage-label{font-size:.9rem;color:#666;letter-spacing:1px;text-transform:uppercase;font-weight:600;margin-top:.3rem;display:block}.underline{width:200px;height:2px;background:#e0e0e0;margin-bottom:1.5rem}.course-text{color:#000;font-size:1.1rem;margin:0 0 1rem;font-family:Georgia,serif}.course-name{font-weight:700;color:#1c2d4b}.course-modules{list-style:none;padding:0 0 0 1.5rem;margin:.5rem 0 1.5rem;text-align:left}.course-modules li{position:relative;padding:.1rem 0 .1rem 1.5rem;color:#1c2d4b;font-size:1rem;font-family:Georgia,serif;line-height:1.6;display:flex;align-items:center;min-height:1.5em}.course-modules li:before{content:"•";color:#1c2d4b;font-size:1.8rem;position:absolute;left:.1rem;line-height:1;display:inline-flex;align-items:center;height:100%}.achievement-text{color:#000;font-size:1.1rem;margin:0;font-family:Georgia,serif;line-height:1.6}.signatures-section{display:flex;justify-content:space-between;padding-top:2rem;border-top:1px solid #e0e0e0;gap:2rem;flex-wrap:wrap}.signature-block{flex:1;min-width:150px;text-align:center;margin:.5rem 0}.signature-line{width:150px;height:2px;background:#000;margin:0 auto 1rem;position:relative}.signature-name{color:#000;font-size:1.1rem;font-weight:600;margin:.5rem 0 .25rem;font-family:Georgia,serif;line-height:1.4;display:flex;align-items:center;justify-content:center;gap:.5rem}.date-label{font-weight:400;color:#666}.signature-title{color:#666;font-size:.85rem;margin:0;font-weight:600;letter-spacing:1px;text-transform:uppercase}.signature-date,.certificate-id{color:#666;font-size:.9rem;margin:0;font-family:Courier New,monospace;font-weight:500}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}.btn{padding:1rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:180px;text-align:center;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.print-btn{background:#1c2d4b;color:#fff}.print-btn:hover{background:#152238;transform:translateY(-2px);box-shadow:0 4px 15px #1c2d4b4d}.home-btn{background:#fff;color:#1c2d4b;border:2px solid #1c2d4b}.home-btn:hover{background:#f8f9fa;transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}@media print{.action-buttons{display:none!important}.results-container{padding:0;max-width:none}.certificate{border:2px solid #000;box-shadow:none;border-radius:0;margin:0;aspect-ratio:auto;min-height:auto}.certificate-left-panel{background:#1c2d4b!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.certificate-right-panel{background:#fff!important}.badge-content{background:gold!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.badge-ribbon{border-top-color:#1c2d4b!important}.badge-ribbon:after{border-top-color:#1c2d4b!important}@page{size:A4 landscape;margin:.5in}}@media (max-width: 1200px){.certificate{aspect-ratio:4/3}.certificate-left-panel{width:35%}.certificate-right-panel{width:65%}}.try-again-container{max-width:600px;margin:2rem auto;padding:2.5rem;background:#fff;border-radius:15px;box-shadow:0 4px 20px #00000014;text-align:center}.try-again-content h2{color:#1c2d4b;font-size:2.2rem;margin-bottom:1.5rem;font-weight:700}.try-again-content p{color:#5a6c84;font-size:1.1rem;margin-bottom:1.5rem;line-height:1.6}.try-again-button{background:linear-gradient(135deg,#1c2d4b,#3a5a8a);color:#fff;border:none;padding:.9rem 2.5rem;font-size:1.1rem;font-weight:600;border-radius:8px;cursor:pointer;margin-top:1rem;transition:all .3s ease;box-shadow:0 4px 12px #1c2d4b26}.try-again-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #1c2d4b40}@media (max-width: 768px){.results-container{padding:1rem}.certificate{flex-direction:column;aspect-ratio:auto;min-height:auto}.certificate-left-panel{width:100%;padding:1.5rem}.certificate-right-panel{width:100%;padding:2rem}.header-text h1{font-size:2.5rem}.header-text h2{font-size:1.8rem}.student-name{font-size:2rem}.signatures-section{flex-direction:column;gap:2rem}.action-buttons{flex-direction:column;align-items:center}.btn{width:100%;max-width:300px}}@media (max-width: 480px){.certificate-left-panel{padding:1rem}.certificate-right-panel{padding:1.5rem}.header-text h1{font-size:2rem}.header-text h2{font-size:1.5rem}.student-name{font-size:1.8rem}.award-badge{width:100px;height:100px}.year{font-size:1.5rem}.left-logo{width:60px;height:60px}.logo-text h3{font-size:1.5rem}}@media print{body *{visibility:hidden!important}.certificate,.certificate *{visibility:visible!important}.certificate{position:fixed!important;inset:0!important;margin:0 auto!important;width:297mm!important;height:210mm!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important;background:#fff!important}.action-buttons{display:none!important}@page{size:A4 landscape;margin:0}}*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background-color:#f5f5f5;color:#333;line-height:1.6}.app{margin:0 auto;padding:2rem;min-height:100vh;display:flex;flex-direction:column}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease-out forwards}.results-container .card{text-align:center;padding:2.5rem;box-shadow:0 4px 20px #00000014}.results-container h2{color:#1c2d4b;font-size:2rem}.score-summary{margin:2rem 0;display:flex;flex-direction:column;align-items:center;gap:2rem}.score-circle{width:180px;height:180px;border-radius:50%;background:#f8f9fa;display:flex;flex-direction:column;justify-content:center;align-items:center;border:10px solid #e9ecef;box-shadow:0 4px 15px #0000001a;position:relative;overflow:hidden}.score-percentage{font-size:2.5rem;font-weight:700;color:#1c2d4b;line-height:1}.score-message{font-size:1.1rem;color:#495057;margin-top:.5rem;font-weight:500}.score-details{background:#f8f9fa;padding:1.5rem;border-radius:10px;width:100%;max-width:500px;margin:0 auto;box-shadow:0 2px 10px #0000000d}.score-details p{margin:.5rem 0;color:#495057;font-size:1.1rem}.score-details strong{color:#1c2d4b;font-weight:600}.result-actions{display:flex;justify-content:center;gap:1.5rem;margin-top:2.5rem;flex-wrap:wrap}.result-actions .btn{padding:.8rem 2rem;font-size:1rem;border-radius:50px;font-weight:600;transition:all .3s ease;text-transform:none;letter-spacing:normal;min-width:160px}.result-actions .restart-btn{background:#1c2d4b;color:#fff;border:none}.result-actions .restart-btn:hover{background:#152238;transform:translateY(-2px);box-shadow:0 4px 15px #1c2d4b4d}.result-actions .home-btn{background:#fff;color:#1c2d4b;border:2px solid #1c2d4b}.result-actions .home-btn:hover{background:#f8f9fa;transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.wrap{max-width:1000px;margin:0 auto;padding:20px;font-family:Segoe UI,system-ui,-apple-system,sans-serif;display:flex;flex-direction:column;align-items:center;gap:20px}.logo-container{text-align:center;margin-bottom:10px}.main-logo{max-width:200px;height:auto;display:block;margin:0 auto}.card{background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000000d;padding:20px;margin:0 auto 20px;width:100%;max-width:800px;box-sizing:border-box}header.card{display:flex;align-items:flex-start;gap:20px;background:#fff;color:#1c2d4b;padding:20px 25px;width:100%;max-width:800px;margin:0 auto 20px;box-sizing:border-box}.logo{background:#fff;color:#1c2d4b;width:50px;height:50px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;flex-shrink:0;margin-top:4px}.header-content{flex:1}header h1{margin:0 0 8px;font-size:1.5rem;font-weight:600;line-height:1.2}.header-details{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:6px}.muted{opacity:.9;font-size:.95rem;display:flex;align-items:center;gap:8px}.divider{opacity:.7}.instructor{display:flex;align-items:center;gap:6px;font-size:.95rem;background:#d9d9d9;padding:4px 10px;border-radius:4px}.instructor-name{font-weight:500;color:#1c2d4b;text-decoration:none}.login-container{background:#fff;padding:2rem;border-radius:10px;box-shadow:0 2px 10px #0000001a;max-width:500px;margin:2rem auto}.login-form{display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#4a5568;font-size:.95rem}.form-group input{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:1rem;transition:all .2s ease}.form-group input:focus{outline:none;border-color:#1c2d4b;box-shadow:0 0 0 2px #1c2d4b33}.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:10px}.form-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid #edf2f7}.info-pills{display:flex;gap:10px;align-items:center;flex-wrap:wrap;flex:1}.pill{background:#e8eaf0;color:#1c2d4b;padding:5px 10px;border-radius:16px;font-size:.85rem;display:inline-flex;align-items:center;gap:4px;line-height:1.2}.timer{background:#e8eaf0;color:#1c2d4b;padding:5px 10px;border-radius:16px;font-size:.85rem;font-weight:500;display:inline-flex;align-items:center;gap:4px;line-height:1.2}.btn{background:#1c2d4b;color:#fff;border:none;padding:8px 20px;border-radius:6px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;height:36px;display:inline-flex;align-items:center;justify-content:center}.btn:hover{background:#152238;transform:translateY(-1px);box-shadow:0 2px 5px #0000001a}.btn:active{transform:translateY(0);box-shadow:none}.start-btn{padding:0 20px;font-weight:500;margin-left:auto}.footer{text-align:center;padding:15px 20px;background:#f8f9fa}.small{font-size:.85rem;color:#718096;line-height:1.5}.error{color:#e53e3e;font-size:.9rem;margin-top:5px;grid-column:1 / -1}.quiz-container{background:#f5f6fa;padding:2rem;border-radius:15px;max-width:800px;margin:0 auto}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:.8rem 1.5rem;background:#1c2d4b;color:#fff;border-radius:8px;font-weight:500;font-size:.95rem}.quiz-header div{display:flex;align-items:center;gap:8px}.question-container{background:#fff;padding:2rem;border-radius:12px;margin:1.5rem 0;box-shadow:0 2px 8px #0000000d}.question-container h3{margin-bottom:2rem;font-size:1.2rem;color:#2d3436;line-height:1.6;text-align:left;font-weight:500}.options{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2rem 0}.option{padding:1rem 1.2rem;border:2px solid #dfe6e9;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:1rem;background:#fff;color:#2d3436;text-align:left;position:relative}.option:hover{background:#f8f9fa;border-color:#1c2d4b}.option.selected{border-color:#00b894;background:#e8f8f5;color:#00b894;font-weight:500}.option.selected:before{content:"";position:absolute;left:0;top:0;height:100%;width:4px;background:#00b894;border-radius:4px 0 0 4px}button{background:#1c2d4b;color:#fff;border:none;padding:.9rem 2.5rem;border-radius:30px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;margin:2rem auto 0;display:block;box-shadow:0 4px 10px #6c5ce74d;text-transform:uppercase;letter-spacing:.5px;font-family:Segoe UI,system-ui,-apple-system,sans-serif}button:hover{background:#152238;transform:translateY(-2px);box-shadow:0 6px 15px #1c2d4b4d}button:active{transform:translateY(0)}button:disabled{background:#b2a8e8;cursor:not-allowed;transform:none;box-shadow:none}.next-btn{background:#1c2d4b;padding:.9rem 3rem;margin:.5rem auto 0;font-weight:500;text-transform:none;font-size:1rem}.start-btn,.restart-btn{background:#1c2d4b;padding:1rem 3rem;font-size:1rem;margin:1.5rem auto 0;border-radius:30px;text-transform:none;font-weight:500}.start-btn:hover,.restart-btn:hover{background:#152238;transform:translateY(-2px)}.result-container{display:flex;justify-content:center;align-items:center;min-height:70vh;padding:2rem}.result-card{background:#fff;padding:2.5rem;border-radius:15px;box-shadow:0 4px 20px #0000001a;text-align:center;max-width:600px;width:100%}.result-card h2{color:#2c3e50;margin-bottom:1.5rem;font-size:2rem;font-weight:600}.user-details{background:#f8f9fa;padding:1.5rem;border-radius:10px;margin-bottom:1.5rem;text-align:left}.user-details p{margin:.5rem 0;font-size:1.1rem;color:#333}.score-summary{margin:2rem 0;padding:1.5rem;background:#e8eaf0;border-radius:10px}.score-summary p{font-size:1.2rem;margin:.8rem 0;color:#2c3e50}.score{font-weight:700;color:#2196f3;font-size:1.3rem}.percentage{font-weight:700;font-size:1.8rem;color:#4caf50}.result-message{margin:2rem 0;padding:1.5rem;border-radius:10px;font-size:1.2rem;font-weight:500}.result-message.success{background-color:#e8f5e9;color:#2e7d32;border-left:5px solid #4CAF50}.result-message.fail{background-color:#ffebee;color:#c62828;border-left:5px solid #f44336}.restart-btn{background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff;border:none;padding:1rem 2.5rem;font-size:1.1rem;border-radius:50px;cursor:pointer;margin-top:1.5rem;transition:all .3s ease;box-shadow:0 4px 15px #2196f34d}.restart-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #2196f366;background:linear-gradient(135deg,#1976d2,#1565c0)}.error{color:#f44336;margin-top:.5rem;font-size:.9rem}