:root{--background-color: #121212;--surface-color: #1e1e1e;--primary-color: #bb86fc;--secondary-color: #03dac6;--completed-color: #4caf50;--fail-color: #cf6679;--text-primary: #e0e0e0;--text-secondary: #aaaaaa;--font-family: "Poppins", sans-serif;--border-radius: 12px;--shadow: 0 4px 20px rgba(0, 0, 0, .5)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--background-color);color:var(--text-primary);line-height:1.6}#root{display:flex;justify-content:center;padding:2rem}.app-container{width:100%;max-width:1200px;display:flex;flex-direction:column;gap:2rem}header{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;gap:.5rem}.school-logo{width:150px;height:auto;margin-bottom:1rem}.logo{font-size:1.6rem;font-weight:700;color:var(--text-primary);line-height:1.3}.developer-info{color:var(--text-secondary);font-size:.9rem}.developer-info p{margin:0;line-height:1.4}main{display:grid;grid-template-columns:1fr;gap:2rem}.btn{display:inline-block;padding:.75rem 1.5rem;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));color:#000;border:none;border-radius:var(--border-radius);font-family:var(--font-family);font-weight:500;font-size:.9rem;text-align:center;cursor:pointer;transition:all .3s ease}.btn:hover:not(:disabled){box-shadow:0 4px 15px #03dac64d;transform:translateY(-2px)}.btn:disabled{background:#ffffff1f;color:#ffffff4d;cursor:not-allowed;box-shadow:none;transform:none}.welcome-section{display:flex;gap:2rem;align-items:center;background-color:var(--surface-color);padding:2.5rem;border-radius:var(--border-radius);box-shadow:var(--shadow)}.welcome-content{flex:1;text-align:left}.welcome-image-container{flex:1;display:flex;justify-content:center;align-items:center}.welcome-image{max-width:80%;height:auto;border-radius:var(--border-radius)}.welcome-section h2{font-size:2rem;margin-bottom:.5rem;color:var(--text-primary);text-align:left}.welcome-section .subtitle{font-size:1.2rem;font-weight:500;color:var(--secondary-color);margin-bottom:2rem;text-align:left}.welcome-section p{color:var(--text-secondary);margin-bottom:1rem;line-height:1.7}.welcome-section .greeting{font-weight:600;color:var(--text-primary)}.welcome-section .call-to-action,.welcome-section .tagline{font-weight:600;font-size:1.1rem;color:var(--text-primary);text-align:center;margin-top:1.5rem}.start-course-container{margin-top:1rem;text-align:center}.start-course-container .btn{background:linear-gradient(90deg,var(--completed-color),#81c784)}.start-course-container .btn:hover:not(:disabled){box-shadow:0 4px 15px #4caf5080}.course-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:1rem}.course-list-header h2{font-size:2rem}.course-list-actions{display:flex;gap:1rem;flex-wrap:wrap}.btn-secondary{background:var(--surface-color);border:1px solid var(--primary-color);color:var(--primary-color)}.btn-secondary:hover:not(:disabled){background:var(--primary-color);color:#000;box-shadow:0 4px 15px #bb86fc66;transform:translateY(-2px)}.btn-danger{background:var(--fail-color);color:#000;border:1px solid var(--fail-color)}.btn-danger:hover:not(:disabled){background:#d32f2f;box-shadow:0 4px 15px #cf667980}.confirmation-message{text-align:center;width:100%;margin-bottom:1rem;padding:.75rem;background-color:#4caf5033;color:var(--completed-color);border-radius:calc(var(--border-radius) / 2);border:1px solid var(--completed-color);animation:fadeIn .3s ease-in-out}.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.empty-state-message{grid-column:1 / -1;text-align:center;padding:4rem 2rem;background-color:var(--surface-color);border-radius:var(--border-radius);color:var(--text-secondary);border:1px dashed rgba(255,255,255,.2)}.empty-state-message p{margin-bottom:.5rem;font-size:1.1rem}.course-card{background-color:#1b263b;border-radius:var(--border-radius);padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease,opacity .3s ease;border-left:4px solid #4A90E2}.course-card.unlocked:hover{transform:translateY(-5px);box-shadow:0 8px 30px #0009}.course-card-content{display:flex;flex-direction:column;flex-grow:1}.course-card h3{font-size:1.2rem;margin-bottom:.75rem;color:var(--text-primary);display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}.lock-icon{font-size:1.2rem;color:var(--text-secondary);line-height:1}.course-card-description{color:var(--text-secondary);font-size:.9rem;line-height:1.4;margin-bottom:1rem;flex-grow:1}.course-card .course-card-actions{margin-top:1.5rem;display:flex;flex-direction:column;gap:.75rem}.course-card .btn{width:100%}.course-card.locked{opacity:.85;border-left-color:#616161;background-color:#2a2a2a}.course-card.locked .btn{cursor:not-allowed}.course-card.locked:hover{transform:none;box-shadow:var(--shadow)}.course-card.completed{border-left-color:#81d4fa}.course-card.completed .btn{background:linear-gradient(90deg,#4a90e2,#81d4fa)}.progress-bar-container{width:100%;height:24px;background-color:#ffffff1a;border-radius:25px;position:relative;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--secondary-color),var(--primary-color));border-radius:25px;transition:width .4s ease-in-out}.course-card.completed .progress-bar-fill{background:linear-gradient(90deg,#4a90e2,#81d4fa)}.progress-text{position:absolute;width:100%;top:50%;left:0;transform:translateY(-50%);text-align:center;color:#000;font-weight:600;font-size:.8rem;text-shadow:none}.course-detail-view{background-color:var(--surface-color);padding:2.5rem;border-radius:var(--border-radius);box-shadow:var(--shadow);animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.course-detail-header{border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:1rem;margin-bottom:2rem}.course-detail-header h2{font-size:2.2rem;color:var(--text-primary)}.course-detail-content{min-height:300px}.course-discussion-content h3{font-size:1.8rem;color:var(--primary-color);margin:1rem 0 1.5rem;border-bottom:2px solid var(--primary-color);padding-bottom:.5rem}.course-discussion-content h4{font-size:1.5rem;color:var(--text-primary);margin-top:2rem;margin-bottom:1rem;font-weight:600}.course-discussion-content h5{font-size:1.2rem;color:var(--text-primary);margin-top:1.5rem;margin-bottom:1rem;font-weight:600}.course-discussion-content p,.course-discussion-content li{color:var(--text-secondary);line-height:1.8;font-size:1rem}.course-discussion-content p{margin-bottom:1rem}.course-discussion-content strong{color:var(--text-primary);font-weight:600}.course-discussion-content ul,.course-discussion-content ol{padding-left:2rem;margin-bottom:1.5rem}.course-discussion-content ol li{margin-bottom:1rem}.content-divider{border:none;border-top:1px solid rgba(255,255,255,.12);margin:2rem 0}.course-detail-content a{color:var(--secondary-color);text-decoration:none;font-weight:500;transition:color .2s ease;word-break:break-all}.course-detail-content a:hover{color:var(--primary-color);text-decoration:underline}.course-discussion-content li{margin-bottom:.75rem}.course-discussion-content.part-2,.course-discussion-content.part-3{margin-top:2.5rem;border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem}.course-completion-container{text-align:center;margin-top:2.5rem}.course-completion-container .btn{font-size:1.1rem;padding:.8rem 2rem}.course-completion-container .btn.btn-assessment{background:linear-gradient(90deg,var(--completed-color),#81c784)}.btn-assessment:hover:not(:disabled){box-shadow:0 4px 15px #4caf5080}.course-detail-footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.course-detail-footer-actions{display:flex;gap:1rem;flex-wrap:wrap}.quiz-container{animation:fadeIn .5s ease-in-out;margin-top:2rem;border-top:1px solid rgba(255,255,255,.12);padding-top:2rem}.start-quiz-container{text-align:center;padding:2rem;background-color:#ffffff0d;border-radius:var(--border-radius);border-top:none;margin-top:2rem}.quiz-container h3{font-size:1.8rem;margin-bottom:1rem;color:var(--text-primary);text-align:center}.quiz-instruction{text-align:center;color:var(--text-secondary);margin-bottom:2rem;font-style:italic}.quiz-question-container{background-color:#ffffff0d;padding:1.5rem;border-radius:var(--border-radius);margin-bottom:1.5rem;border-left:4px solid var(--primary-color)}.quiz-question-text{font-size:1.1rem;font-weight:500;color:var(--text-primary);margin-bottom:1.5rem}.quiz-options{display:flex;flex-direction:column;gap:1rem}.quiz-options label{display:flex;align-items:center;gap:.75rem;background-color:var(--surface-color);padding:.75rem 1rem;border-radius:calc(var(--border-radius) / 1.5);cursor:pointer;transition:background-color .2s ease-in-out,border-color .2s ease-in-out;border:1px solid rgba(255,255,255,.12)}.quiz-options label:hover{background-color:#ffffff0d}.quiz-options input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid var(--secondary-color);border-radius:50%;transition:all .2s ease-in-out;flex-shrink:0}.quiz-options input[type=radio]:checked{background-color:var(--secondary-color);border-color:var(--primary-color)}.quiz-options span{color:var(--text-secondary);font-size:1rem;transition:color .2s ease-in-out}.quiz-options label:hover span,.quiz-options input[type=radio]:checked+span{color:var(--text-primary)}.quiz-container .btn{display:block;width:100%;margin-top:2rem;font-size:1.1rem}.quiz-result-container{text-align:center;padding:3rem 2rem;border-radius:var(--border-radius);animation:fadeIn .5s ease-in-out;margin-top:2rem;border-top:1px solid rgba(255,255,255,.12)}.quiz-result-container.pass{background:linear-gradient(135deg,#4caf501a,#4caf5026);border:1px solid var(--completed-color)}.quiz-result-container.fail{background:linear-gradient(135deg,#cf66791a,#cf667926);border:1px solid var(--fail-color)}.quiz-result-container.pass h3{color:var(--completed-color)}.quiz-result-container.fail h3{color:var(--fail-color)}.quiz-result-container h3{font-size:2rem;margin-bottom:1rem}.quiz-score{font-size:2.5rem;font-weight:700;margin-bottom:1rem}.quiz-result-container.pass .quiz-score{color:var(--completed-color)}.quiz-result-container.fail .quiz-score{color:var(--fail-color)}.quiz-result-message{font-size:1.1rem;color:var(--text-secondary);margin-bottom:2rem}.quiz-result-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.completed-icon{color:var(--completed-color);margin-left:.5rem}.styled-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem;box-shadow:0 2px 8px #0000004d;border-radius:var(--border-radius);overflow:hidden}.styled-table caption{font-size:1.2rem;font-weight:600;margin-bottom:1rem;color:var(--text-primary);text-align:left}.styled-table th,.styled-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.12)}.styled-table th{background-color:#ffffff1a;color:var(--text-primary);font-weight:600}.styled-table td{color:var(--text-secondary)}.styled-table td strong{color:var(--text-primary)}.styled-table tbody tr:last-child td{border-bottom:none}.styled-table tbody tr:hover{background-color:#ffffff0d}.example-box{padding:1rem 1.5rem;margin:1rem 0;border-radius:calc(var(--border-radius) / 1.5);border-left:4px solid var(--secondary-color);background-color:#03dac61a}.example-box p,.example-box li{color:var(--text-secondary)}.example-box strong{color:var(--secondary-color)}.part-content-wrapper{transition:filter .3s ease-in-out,opacity .3s ease-in-out}.part-content-wrapper.content-locked{filter:blur(5px);opacity:.6;pointer-events:none;-webkit-user-select:none;user-select:none}.course-topic-buttons{display:flex;flex-direction:column;gap:1rem;margin-top:2rem;margin-bottom:2rem}.btn.btn-topic{width:100%;text-align:left;background:var(--surface-color);border:1px solid var(--secondary-color);color:var(--secondary-color);justify-content:space-between;display:flex;align-items:center;padding:1rem 1.5rem;font-size:1rem}.btn.btn-topic:hover:not(:disabled){background:var(--secondary-color);color:#000;transform:translate(5px);box-shadow:none}.btn.btn-topic.locked{border-color:#444;color:#666;opacity:.8}.btn.btn-topic.locked:hover{background:var(--surface-color);transform:none;color:#666}.btn.btn-topic.completed{border-color:var(--completed-color);background:#4caf501a;color:var(--completed-color)}.btn.btn-topic.completed:hover:not(:disabled){background:#4caf5033;transform:none;color:var(--completed-color)}.topic-navigation{margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12)}.unlock-form-container{display:flex;flex-direction:column;gap:.5rem}.unlock-form-container input[type=password]{width:100%;padding:.5rem .75rem;background-color:#ffffff0d;border:1px solid rgba(255,255,255,.12);border-radius:calc(var(--border-radius) / 2);color:var(--text-primary);font-family:var(--font-family);font-size:.9rem}.unlock-form-container input[type=password]::placeholder{color:var(--text-secondary);opacity:.7}.unlock-form-container .btn-unlock{width:100%;padding:.5rem 1rem;font-size:.8rem;background:var(--surface-color);border:1px solid var(--secondary-color);color:var(--secondary-color)}.unlock-form-container .btn-unlock:hover:not(:disabled){background:var(--secondary-color);color:#000}.unlock-error-message{font-size:.8rem;color:var(--fail-color);text-align:center;margin-top:.25rem}.disclaimer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeIn .3s ease-out}.disclaimer-modal{background-color:var(--surface-color);padding:2.5rem;border-radius:var(--border-radius);width:90%;max-width:500px;box-shadow:var(--shadow);border-top:4px solid var(--primary-color)}.disclaimer-modal h3{font-size:1.6rem;margin-bottom:1.5rem;color:var(--text-primary)}.disclaimer-modal p{color:var(--text-secondary);margin-bottom:1rem}.disclaimer-modal ul{list-style-position:inside;padding-left:.5rem;margin-bottom:1.5rem}.disclaimer-modal ul li{color:var(--text-secondary);margin-bottom:.5rem}.disclaimer-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem}.video-disclaimer-section{margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.12);text-align:center}.video-disclaimer-section h4{font-size:1.3rem;margin-bottom:.75rem;color:var(--text-primary)}.required-star{color:var(--fail-color);margin-right:.25rem}.video-disclaimer-section p{color:var(--text-secondary);margin-bottom:1.5rem}.video-container{position:relative;overflow:hidden;width:80%;padding-top:45%;border-radius:var(--border-radius);background-color:#000;margin:0 auto 1.5rem;box-shadow:var(--shadow)}.video-container iframe,.video-container video{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:none}.video-disclaimer-section .btn-secondary:disabled{background:var(--completed-color);border-color:var(--completed-color);color:#000;opacity:1;transform:none;box-shadow:none;cursor:default}.disabled-message{margin-top:.75rem;color:var(--text-secondary);font-size:.9rem;font-style:italic}.realtime-clock{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.12);width:100%}.realtime-clock p{font-size:1rem;color:var(--text-secondary);font-weight:500;letter-spacing:.5px;margin:0}.main-footer{width:100%;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);text-align:center}.main-footer p{color:var(--text-secondary);font-size:.9rem;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.5rem}.matatag-logo{height:2em;margin:0 .5ch;vertical-align:middle;background-color:#fafafa;border-radius:4px;padding:2px}.cooperation-logo{height:2.5em;margin-left:.75ch;vertical-align:middle}.main-footer a{color:var(--secondary-color);text-decoration:none;word-break:break-all}.main-footer a:hover{text-decoration:underline}@media (max-width: 992px){.welcome-section{flex-direction:column;padding:2rem}.welcome-content,.welcome-image-container{max-width:100%;text-align:center}.welcome-content h2,.welcome-content .subtitle{text-align:center}.welcome-image-container{margin-bottom:2rem}}@media (max-width: 768px){#root{padding:1rem}header{gap:1rem;align-items:center}.course-detail-view{padding:1.5rem}.course-detail-header h2{font-size:1.8rem}.course-discussion-content h4{font-size:1.3rem}.welcome-image-container{width:80%;max-width:300px;margin-bottom:1rem}.video-container{width:100%;padding-top:56.25%}}.course-detail-content.pdf-render-mode{background:#fff!important;padding:1rem}.course-detail-content.pdf-render-mode,.course-detail-content.pdf-render-mode *{background-color:#fff!important;color:#000!important;text-shadow:none!important;box-shadow:none!important}.course-detail-content.pdf-render-mode h2,.course-detail-content.pdf-render-mode h3,.course-detail-content.pdf-render-mode h4,.course-detail-content.pdf-render-mode h5{color:#000!important}.course-detail-content.pdf-render-mode a{color:#00e!important;text-decoration:underline!important}.course-detail-content.pdf-render-mode a:after{content:" (" attr(href) ")";font-size:9pt;font-weight:400}.course-detail-content.pdf-render-mode .styled-table,.course-detail-content.pdf-render-mode .example-box{border:1px solid #ccc!important}.pdf-loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;color:#fff;flex-direction:column;gap:1rem;font-size:1.2rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.spinner{border:4px solid rgba(255,255,255,.3);border-radius:50%;border-top:4px solid #fff;width:40px;height:40px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media print{body *{visibility:hidden}.course-detail-view,.course-detail-view *{visibility:visible}.course-detail-view{position:absolute;left:0;top:0;width:100%}.course-detail-footer,.course-detail-header .btn{display:none!important}}