@import"https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap";:root{--primary: #0ca3b9;--primary-dark: #0a7c90;--secondary: #5bd3c7;--secondary-dark: #37b8a9;--accent: #ffd166;--background: #eef8fb;--surface: #ffffff;--surface-muted: #f5fafc;--border: rgba(9, 124, 144, .12);--border-strong: rgba(9, 124, 144, .22);--text-primary: #113842;--text-secondary: #47606a;--text-muted: #7a8f99;--success: #2a9d8f;--warning: #f4a259;--danger: #ef476f;--radius-xl: 28px;--radius-lg: 20px;--radius-md: 16px;--radius-sm: 10px;--shadow-soft: 0 30px 60px -45px rgba(12, 140, 170, .65);--shadow-card: 0 26px 60px -40px rgba(3, 74, 98, .55);--shadow-focus: 0 0 0 4px rgba(11, 163, 185, .12);--transition: .22s ease}*{margin:0;padding:0;box-sizing:border-box}html,body{min-height:100%}body{font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text-primary);background-color:var(--background);position:relative}body:before,body:after{content:"";position:fixed;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#5bd3c738,#0ca3b900);z-index:-2;pointer-events:none}body:before{top:-160px;right:-120px}body:after{bottom:-180px;left:-160px;background:radial-gradient(circle at 70% 70%,#0ca3b933,#5bd3c700)}a{color:inherit;text-decoration:none}.container{width:min(1200px,100%);margin:0 auto;padding:0 24px 48px}.page-shell{padding-top:24px}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:32px}.page-title{font-size:32px;font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.page-subtitle{margin-top:8px;font-size:16px;color:var(--text-secondary);max-width:560px;line-height:1.55}.page-chip{padding:14px 24px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:14px;font-weight:500;box-shadow:var(--shadow-soft);display:inline-flex;align-items:center;gap:10px}.page-chip svg,.page-chip span{display:inline-flex;align-items:center}.page-chip--success{background:#5bd3c738;border-color:transparent;color:var(--primary-dark)}.section-card{background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);border:1px solid transparent;padding:36px;position:relative;overflow:hidden}.section-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;border:1px solid rgba(255,255,255,.12);pointer-events:none}.section-card--muted{background:var(--surface-muted);box-shadow:none;border:1px solid var(--border)}.section-card--accent{background:linear-gradient(135deg,#0ca3b91f,#5bd3c70f);border:1px solid rgba(12,163,185,.18)}.section-card--success{background:linear-gradient(135deg,#5bd3c740,#0ca3b92e);border:1px solid rgba(91,211,199,.38)}.card-title{font-size:22px;font-weight:600;margin-bottom:10px;color:var(--text-primary)}.card-subtitle{font-size:15px;color:var(--text-secondary);margin-bottom:24px}.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;border:1px solid transparent}.badge--success{color:#0d6d5f;background:#2a9d8f29;border-color:#2a9d8f38}.badge--warning{color:#935610;background:#f4a2592e;border-color:#f4a25947}.button-row{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--radius-md);border:none;font-size:15px;font-weight:600;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition),background var(--transition);color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-dark));box-shadow:0 14px 25px -18px #0ca3b9cc}.btn:hover{transform:translateY(-2px);box-shadow:0 18px 30px -20px #0ca3b9d9}.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}.btn:disabled{cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}.btn-secondary{background:linear-gradient(135deg,#113842a6,#113842d9);box-shadow:0 14px 26px -20px #11384299}.btn-secondary:hover{box-shadow:0 18px 30px -20px #113842b3}.btn-outline{background:transparent;color:var(--primary-dark);border:1px solid var(--border-strong);box-shadow:none}.btn-outline:hover{background:#0ca3b914;box-shadow:none}.btn-watch{width:100%}.btn-logout{padding:10px 18px;background:#ef476f1f;color:var(--danger);border-radius:var(--radius-sm);border:1px solid rgba(239,71,111,.18);cursor:pointer;font-weight:600;transition:background var(--transition),transform var(--transition)}.btn-logout:hover{background:#ef476f2e;transform:translateY(-1px)}.form-group{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}.form-group label{font-size:14px;font-weight:600;color:var(--text-secondary)}.form-group input{padding:14px 16px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-muted);font-size:15px;transition:border-color var(--transition),background var(--transition),box-shadow var(--transition)}.form-group input::placeholder{color:var(--text-muted)}.form-group input:focus{outline:none;border-color:#0ca3b98c;background:#fff;box-shadow:var(--shadow-focus)}.input-help{font-size:13px;color:var(--text-muted)}.alert{border-radius:var(--radius-md);padding:16px 20px;border:1px solid transparent;font-size:14px;font-weight:500}.alert--danger{background:#ef476f1f;border-color:#ef476f2e;color:var(--danger)}.alert--warning{background:#f4a25929;border-color:#f4a25938;color:#8c5316}.alert--success{background:#2a9d8f24;border-color:#2a9d8f38;color:#0d6d5f}.alert--info{background:#0ca3b91f;border-color:#0ca3b92e;color:var(--primary-dark)}.header{padding:26px 0;position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#eef8fbd9;border-bottom:1px solid rgba(12,163,185,.08)}.header-content{width:min(1200px,100%);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:16px}.brand-logo{width:92px;height:92px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.brand-logo img{width:100%;height:100%;object-fit:contain;border-radius:18px}.brand-text h1{font-size:22px;font-weight:600;letter-spacing:-.03em;color:var(--text-primary)}.brand-text span{display:block;font-size:13px;color:var(--text-secondary);margin-top:2px}.user-info{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.user-chip{display:inline-flex;flex-direction:column;gap:2px}.user-chip strong{font-size:15px}.user-chip span{font-size:13px;color:var(--text-muted)}.login-page{min-height:100vh;display:grid;place-items:center;padding:48px 16px}.login-container{width:min(1024px,100%);background:#ffffffad;border-radius:32px;box-shadow:0 40px 80px -60px #05525e8c;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;border:1px solid rgba(12,163,185,.15)}.login-illustration{padding:48px;background:linear-gradient(160deg,#0ca3b94d,#5bd3c733);position:relative}.login-illustration:after{content:"";position:absolute;top:24px;right:24px;bottom:24px;left:24px;border-radius:28px;border:1px dashed rgba(255,255,255,.55);opacity:.5}.login-illustration-content{position:relative;z-index:1;display:flex;flex-direction:column;gap:18px;color:#fff}.login-illustration h2{font-size:30px;font-weight:600;letter-spacing:-.02em}.login-illustration p{font-size:16px;color:#ffffffd9;line-height:1.6}.login-illustration .feature-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}.feature-item{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500}.feature-item span{width:32px;height:32px;border-radius:50%;background:#ffffff29;display:inline-flex;align-items:center;justify-content:center}.login-box{padding:48px;display:flex;flex-direction:column;gap:28px}.login-box h2{font-size:28px;font-weight:600;color:var(--text-primary);letter-spacing:-.015em}.login-subtitle{font-size:15px;color:var(--text-secondary)}.error-message{width:100%;margin-bottom:10px}.video-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px;margin-bottom:40px}.video-card{background:var(--surface);border-radius:var(--radius-xl);padding:28px;border:1px solid rgba(12,163,185,.08);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:18px;position:relative;transition:transform var(--transition),box-shadow var(--transition)}.video-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;border:1px solid rgba(255,255,255,.14);pointer-events:none}.video-card:hover{transform:translateY(-6px);box-shadow:0 32px 80px -55px #05525eb3}.video-card--locked{opacity:.9;border-style:dashed;border-color:#0ca3b929;box-shadow:none}.video-card--locked:hover{transform:none;box-shadow:none}.video-card h3{font-size:20px;font-weight:600;letter-spacing:-.01em}.video-card .video-meta{display:flex;align-items:center;justify-content:space-between;color:var(--text-muted);font-size:14px}.video-lock-hint{margin-top:12px;font-size:13px;color:var(--text-muted);text-align:center}.completion-callout{margin-top:12px}.section-card.completion-callout{padding:24px 36px}.completion-callout .btn{max-width:240px;margin:18px auto 0}.presentation-container{max-width:100%}.presentation-wrapper{width:100%;border-radius:var(--radius-lg);overflow:hidden;background:#f5f5f5;min-height:800px}.presentation-wrapper iframe{display:block}.video-player-container{background:var(--surface);border-radius:var(--radius-xl);padding:40px;box-shadow:var(--shadow-card);border:1px solid rgba(12,163,185,.08);max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:24px}.video-player-container h2{font-size:26px;font-weight:600}.video-wrapper{position:relative;padding-top:56.25%;border-radius:var(--radius-lg);overflow:hidden;background:#0c1f25}.react-player{position:absolute;top:0;right:0;bottom:0;left:0}.video-controls{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}.video-controls .button-row{justify-content:flex-end}.watching-hint{margin-top:-4px;align-self:center}.exam-container{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:32px}.exam-card{padding:36px}.exam-header{display:flex;flex-direction:column;gap:12px;text-align:center}.exam-header h2{font-size:28px;font-weight:600}.question-progress{color:var(--primary-dark);font-weight:500;font-size:15px}.question-card{display:flex;flex-direction:column;gap:24px}.question-text{font-size:20px;line-height:1.45}.options-list{display:grid;gap:14px;list-style:none}.option-label{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--radius-lg);border:2px solid rgba(12,163,185,.12);background:var(--surface-muted);cursor:pointer;transition:border-color var(--transition),background var(--transition),transform var(--transition)}.option-label:hover{border-color:#0ca3b959;background:#fff;transform:translateY(-1px)}.option-label input[type=radio]{accent-color:var(--primary);width:20px;height:20px;cursor:pointer}.option-label.selected{border-color:#0ca3b98c;background:#5bd3c71f;box-shadow:var(--shadow-focus)}.exam-navigation{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.exam-status{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--text-muted)}.exam-status--ready{color:var(--success)}.exam-status--warning{color:#8c5316}.result-container{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:28px}.result-card{text-align:center;padding:40px}.result-card h2{font-size:30px;font-weight:600;margin-bottom:16px}.result-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px}.stat-card{padding:22px;border-radius:var(--radius-lg);background:var(--surface-muted);border:1px solid rgba(12,163,185,.08);box-shadow:inset 0 1px #ffffffa6;display:flex;flex-direction:column;gap:8px;align-items:center}.stat-card h3{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}.stat-card p{font-size:34px;font-weight:600}.stat-card.correct p{color:var(--success)}.stat-card.wrong p{color:var(--danger)}.stat-card.percentage p{color:var(--primary-dark)}.result-highlight{padding:32px;border-radius:var(--radius-xl);background:linear-gradient(135deg,#0ca3b947,#5bd3c733);display:flex;flex-direction:column;gap:8px;align-items:center;color:#fff}.result-highlight strong{font-size:52px;font-weight:600;letter-spacing:-.04em}.result-highlight span{font-size:16px;opacity:.9}.survey-container{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:28px}.survey-card{padding:36px;display:flex;flex-direction:column;gap:26px}.survey-card h2{font-size:28px;font-weight:600;text-align:center}.survey-intro{font-size:15px;color:var(--text-secondary);text-align:center;line-height:1.6}.survey-question{display:flex;flex-direction:column;gap:16px}.survey-question label{font-weight:600;color:var(--text-primary)}.survey-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}.survey-option{padding:18px;border-radius:var(--radius-lg);border:2px solid rgba(12,163,185,.12);background:var(--surface-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;transition:border-color var(--transition),background var(--transition),transform var(--transition)}.survey-option:hover{border-color:#0ca3b952;background:#fff;transform:translateY(-1px)}.survey-option.selected{border-color:#0ca3b985;background:#5bd3c71a;box-shadow:var(--shadow-focus);color:var(--primary-dark)}.dashboard-container{display:flex;flex-direction:column;gap:28px}.dashboard-card{padding:36px}.dashboard-card h2{font-size:28px;font-weight:600;margin-bottom:16px}.empty-state{text-align:center;padding:40px 24px;color:var(--text-muted);font-weight:500}.students-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-card)}.students-table thead tr{background:linear-gradient(135deg,#0ca3b92e,#5bd3c71f);color:var(--text-primary);text-transform:uppercase;letter-spacing:.03em;font-size:12px}.students-table th,.students-table td{padding:16px 20px;text-align:left;border-bottom:1px solid rgba(12,163,185,.08);background:var(--surface)}.students-table tbody tr:hover td{background:#0ca3b90f}.metric{font-weight:600}.metric--success{color:var(--success)}.metric--danger{color:var(--danger)}.metric--info{color:var(--primary-dark)}.student-detail-card{display:flex;flex-direction:column;gap:28px}.student-header{display:flex;flex-direction:column;gap:10px}.student-header h3{font-size:22px}.student-info{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--text-secondary)}.survey-summary{display:grid;gap:16px}.survey-answer{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-radius:var(--radius-md);background:var(--surface-muted);border:1px solid rgba(12,163,185,.08);font-weight:500}.survey-answer span{display:inline-flex;align-items:center;gap:10px}.timestamp{font-size:13px;color:var(--text-muted)}.callout{border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:16px}.callout p{color:var(--text-secondary);line-height:1.55}.loading{text-align:center;padding:80px 20px;font-size:18px;font-weight:600;color:var(--primary-dark)}.hidden{display:none!important}.text-center{text-align:center}.text-muted{color:var(--text-muted)}.text-success{color:var(--success)}.text-warning{color:#8c5316}.text-danger{color:var(--danger)}.text-info{color:var(--primary-dark)}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}.gap-16{display:flex;flex-direction:column;gap:16px}@media (max-width: 1024px){.login-container{grid-template-columns:1fr}.login-illustration{display:none}}@media (max-width: 768px){.header{position:static;background:transparent;border-bottom:none}.header-content{flex-direction:column;align-items:flex-start;gap:16px}.container{padding:0 18px 40px}.page-header{flex-direction:column;align-items:stretch}.video-list{grid-template-columns:1fr}.video-player-container,.exam-card,.dashboard-card,.survey-card,.result-card{padding:28px}.section-card{border-radius:var(--radius-lg)}.login-box{padding:36px 28px}}@media (max-width: 480px){.btn,.btn-secondary,.btn-outline{width:100%}.exam-navigation{flex-direction:column;align-items:stretch}.survey-options{grid-template-columns:1fr}.students-table{font-size:13px}}