:root{--primary:#6366f1;--primary-dark:#4f46e5;--primary-light:#eef2ff;--success:#22c55e;--danger:#ef4444;--bg:#f8fafc;--surface:#fff;--border:#e2e8f0;--text:#0f172a;--text-muted:#64748b;--sidebar-bg:#1e1e2e;--sidebar-text:#c8c8d4;--sidebar-active:#6366f1;--radius:10px;--shadow:0 1px 4px #00000014;--shadow-md:0 4px 16px #0000001a}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;display:block}button{cursor:pointer;font-family:inherit}.sr-only{clip:rect(0,0,0,0);width:1px;height:1px;position:absolute;overflow:hidden}.btn{border-radius:var(--radius);border:none;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:background .15s,opacity .15s,transform .1s;display:inline-flex}.btn:hover{opacity:.92;transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-outline{color:var(--primary);border:2px solid var(--primary);background:0 0}.btn-ghost{color:var(--text-muted);background:0 0}.btn-ghost:hover{background:var(--border)}.btn-danger{background:var(--danger);color:#fff}.btn-sm{padding:6px 14px;font-size:.82rem}.btn-lg{padding:13px 28px;font-size:1rem}.btn-full{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.form-group{flex-direction:column;gap:6px;margin-bottom:18px;display:flex}.form-group label{color:var(--text);font-size:.875rem;font-weight:600}.form-group input,.form-group select,.form-group textarea{border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);padding:10px 14px;font-family:inherit;font-size:.95rem;transition:border-color .15s,box-shadow .15s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #6366f11f}.form-error{color:var(--danger);margin-top:4px;font-size:.82rem}.form-hint{color:var(--text-muted);font-size:.82rem}.rich-editor{border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:border-color .15s,box-shadow .15s;overflow:hidden}.rich-editor:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px #6366f11f}.rich-toolbar{border-bottom:1px solid var(--border);background:var(--bg);flex-wrap:wrap;align-items:center;gap:2px;padding:6px 8px;display:flex}.rich-toolbar-divider{background:var(--border);flex-shrink:0;width:1px;height:18px;margin:0 4px}.rich-editor-content{padding:12px 14px}.rich-editor .ProseMirror{color:var(--text);outline:none;font-family:inherit;font-size:.95rem;line-height:1.7}.rich-editor .ProseMirror p{margin-bottom:10px}.rich-editor .ProseMirror p:last-child{margin-bottom:0}.rich-editor .ProseMirror h1{margin:16px 0 8px;font-size:1.5rem;font-weight:800;line-height:1.2}.rich-editor .ProseMirror h2{margin:14px 0 6px;font-size:1.15rem;font-weight:700;line-height:1.3}.rich-editor .ProseMirror ul,.rich-editor .ProseMirror ol{margin-bottom:10px;padding-left:22px}.rich-editor .ProseMirror li{margin-bottom:4px}.rich-editor .ProseMirror strong{font-weight:700}.rich-editor .ProseMirror em{font-style:italic}.rich-editor .ProseMirror s{text-decoration:line-through}.rich-editor .ProseMirror blockquote{border-left:3px solid var(--primary);color:var(--text-muted);margin:10px 0;padding:4px 0 4px 14px;font-style:italic}.rich-editor .ProseMirror hr{border:none;border-top:2px solid var(--border);margin:16px 0}.rich-editor .ProseMirror table{border-collapse:collapse;width:100%;margin:12px 0;font-size:.9rem}.rich-editor .ProseMirror th,.rich-editor .ProseMirror td{border:1px solid var(--border);text-align:left;vertical-align:top;padding:6px 10px}.rich-editor .ProseMirror th{background:var(--bg);font-weight:600}.rich-editor .ProseMirror tr:nth-child(2n) td{background:color-mix(in srgb, var(--surface) 50%, var(--bg))}.resizable-image-wrapper{box-sizing:border-box;max-width:100%;margin:8px 0;display:block;position:relative}.resizable-image-wrapper--selected img{outline:2px solid var(--primary);outline-offset:2px}.resize-handle{background:var(--primary);cursor:nwse-resize;opacity:0;z-index:10;border-radius:3px 0 0;width:14px;height:14px;transition:opacity .15s;position:absolute;bottom:0;right:0}.resizable-image-wrapper:hover .resize-handle,.resize-handle--active{opacity:1}.rich-editor .ProseMirror img{border-radius:var(--radius);max-width:100%;height:auto;display:block}.lesson-content{color:var(--text);font-size:.95rem;line-height:1.65}.lesson-content p{margin-bottom:.55em}.lesson-content p:last-child{margin-bottom:0}.lesson-content h1{margin:1.2em 0 .3em;font-size:1.5rem;font-weight:800;line-height:1.2}.lesson-content h2{margin:1em 0 .25em;font-size:1.2rem;font-weight:700;line-height:1.3}.lesson-content ul,.lesson-content ol{margin:.15em 0 .55em;padding-left:22px}.lesson-content li{margin-bottom:2px;line-height:1.55}.lesson-content a{color:var(--primary);text-decoration:underline}.lesson-content a:hover{opacity:.8}.lesson-content strong{font-weight:700}.lesson-content em{font-style:italic}.lesson-content s{text-decoration:line-through}.lesson-content blockquote{border-left:3px solid var(--primary);color:var(--text-muted);margin:10px 0;padding:4px 0 4px 14px;font-style:italic}.lesson-content img{border-radius:var(--radius);cursor:zoom-in;max-width:100%;height:auto;margin:12px 0;transition:opacity .15s;display:block}.lesson-content img:hover{opacity:.9}.lesson-content hr{border:none;border-top:2px solid var(--border);margin:16px 0}.lesson-content table{border-collapse:collapse;width:100%;margin:12px 0;font-size:.9rem}.lesson-content th,.lesson-content td{border:1px solid var(--border);text-align:left;vertical-align:top;padding:6px 10px}.lesson-content th{background:var(--bg);font-weight:600}.lesson-content tr:nth-child(2n) td{background:color-mix(in srgb, var(--surface) 50%, var(--bg))}.lightbox-overlay{z-index:1000;cursor:zoom-out;background:#000000d9;justify-content:center;align-items:center;padding:24px;animation:.15s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.lightbox-img{border-radius:var(--radius);cursor:default;max-width:100%;max-height:calc(100vh - 80px);box-shadow:0 24px 80px #0009}.lightbox-close{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:background .15s;display:flex;position:fixed;top:20px;right:24px}.lightbox-close:hover{background:#ffffff47}.card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden}.auth-layout{background:linear-gradient(135deg,#eef2ff 0%,#f8fafc 100%);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{background:var(--surface);box-shadow:var(--shadow-md);border-radius:16px;width:100%;max-width:420px;padding:48px 40px}.auth-logo{text-align:center;margin-bottom:28px}.auth-logo h1{color:var(--primary);letter-spacing:-.5px;font-size:1.5rem;font-weight:800}.auth-logo p{color:var(--text-muted);margin-top:4px;font-size:.9rem}.auth-card h2{margin-bottom:24px;font-size:1.2rem;font-weight:700}.auth-footer{text-align:center;color:var(--text-muted);margin-top:20px;font-size:.875rem}.alert{border-radius:var(--radius);margin-bottom:16px;padding:12px 16px;font-size:.875rem}.alert-error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca}.alert-success{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0}.navbar{background:var(--surface);border-bottom:1px solid var(--border);z-index:100;justify-content:space-between;align-items:center;height:60px;padding:0 28px;display:flex;position:sticky;top:0}.navbar-brand{color:var(--primary);letter-spacing:-.5px;font-size:1.1rem;font-weight:800}.navbar-brand:hover{text-decoration:none}.navbar-actions{align-items:center;gap:12px;display:flex}.navbar-user{color:var(--text-muted);align-items:center;gap:10px;font-size:.875rem;display:flex}.avatar{background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:.85rem;font-weight:700;display:flex}.page-layout{max-width:1100px;margin:0 auto;padding:40px 28px}.page-header{margin-bottom:32px}.page-header h1{letter-spacing:-.5px;font-size:1.6rem;font-weight:800}.page-header p{color:var(--text-muted);margin-top:6px}.course-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;display:grid}.course-card{background:var(--surface);border:1px solid var(--border);cursor:pointer;border-radius:14px;flex-direction:column;transition:box-shadow .2s,transform .2s;display:flex;overflow:hidden;box-shadow:0 2px 8px #00000012}.course-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px #0000001f}.course-card-thumb{flex-shrink:0;justify-content:center;align-items:center;height:148px;font-size:3.5rem;display:flex;position:relative;overflow:hidden}.course-card-thumb:after{content:"";background:linear-gradient(#0000 40%,#0000002e 100%);position:absolute;inset:0}.course-card-body{flex-direction:column;flex:1;padding:18px 20px 20px;display:flex}.course-card-body h3{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:6px;font-size:1rem;font-weight:700;line-height:1.3;display:-webkit-box;overflow:hidden}.course-card-body p{color:var(--text-muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1;font-size:.82rem;line-height:1.55;display:-webkit-box;overflow:hidden}.course-card-tags{flex-wrap:wrap;gap:5px;margin-top:10px;display:flex}.course-card-meta{border-top:1px solid var(--border);color:var(--text-muted);justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;font-size:.78rem;display:flex}.badge{letter-spacing:.01em;border-radius:20px;align-items:center;padding:3px 10px;font-size:.72rem;font-weight:600;display:inline-flex}.badge-primary{background:var(--primary-light);color:var(--primary)}.badge-success{color:#15803d;background:#f0fdf4}.progress-bar-wrap{background:var(--border);height:3px;overflow:hidden}.progress-bar-fill{background:var(--primary);height:100%;transition:width .4s}.player-layout{height:calc(100vh - 60px);display:flex}.player-sidebar{background:var(--sidebar-bg);width:300px;min-width:300px;color:var(--sidebar-text);border-right:1px solid #2d2d3f;flex-direction:column;display:flex;overflow-y:auto}.player-sidebar-header{border-bottom:1px solid #2d2d3f;padding:20px}.player-sidebar-header h2{color:#fff;font-size:.9rem;font-weight:700;line-height:1.4}.sidebar-module{padding:12px 20px 4px}.sidebar-module-title{text-transform:uppercase;letter-spacing:.08em;color:#6b6b8a;margin-bottom:6px;font-size:.7rem;font-weight:700}.sidebar-lesson{color:var(--sidebar-text);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:7px;align-items:center;gap:10px;width:100%;margin-bottom:2px;padding:9px 12px;font-size:.85rem;transition:background .15s;display:flex}.sidebar-lesson:hover{background:#ffffff0f}.sidebar-lesson.active{color:#a5b4fc;background:#6366f133}.lesson-check{min-width:16px;font-size:.8rem}.player-content{background:var(--bg);flex:1;overflow-y:auto}.player-content-inner{max-width:780px;margin:0 auto;padding:40px 32px}.player-nav{border-top:1px solid var(--border);justify-content:space-between;align-items:center;margin-top:40px;padding-top:24px;display:flex}.video-placeholder{aspect-ratio:16/9;border-radius:var(--radius);color:#6b6b8a;background:#1e1e2e;border:2px dashed #2d2d3f;flex-direction:column;justify-content:center;align-items:center;width:100%;margin-bottom:28px;display:flex}.video-placeholder span{margin-bottom:8px;font-size:2.5rem}.video-placeholder p{font-size:.85rem}.assessment-layout{max-width:680px;margin:0 auto;padding:48px 28px}.question-card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);margin-bottom:20px;padding:28px}.question-number{text-transform:uppercase;letter-spacing:.08em;color:var(--primary);margin-bottom:10px;font-size:.75rem;font-weight:700}.question-text{margin-bottom:18px;font-size:1rem;font-weight:600;line-height:1.5}.options{flex-direction:column;gap:10px;display:flex}.option-label{border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;align-items:flex-start;gap:12px;padding:12px 16px;font-size:.9rem;transition:border-color .15s,background .15s;display:flex}.option-label:hover{border-color:var(--primary);background:var(--primary-light)}.option-label.selected{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark);font-weight:600}.option-label.correct{border-color:var(--success);color:#15803d;background:#f0fdf4}.option-label.incorrect{border-color:var(--danger);color:#b91c1c;background:#fef2f2}.option-label input[type=radio]{accent-color:var(--primary);margin-top:2px}.fill-blank-input{border:1.5px solid var(--border);border-radius:var(--radius);width:100%;padding:10px 14px;font-family:inherit;font-size:.95rem}.fill-blank-input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #6366f11f}.score-card{text-align:center;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-md);border-radius:16px;padding:48px 40px}.score-number{color:var(--primary);margin:16px 0;font-size:4rem;font-weight:900;line-height:1}.score-label{color:var(--text-muted);font-size:.9rem}.certificate-page{text-align:center;max-width:680px;margin:0 auto;padding:48px 28px}.certificate-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px;display:flex}.loading{height:200px;color:var(--text-muted);justify-content:center;align-items:center;gap:10px;font-size:.9rem;display:flex}.spinner{border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:20px;height:20px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;color:var(--text-muted);padding:60px 20px}.empty-state span{margin-bottom:12px;font-size:3rem;display:block}.empty-state h3{color:var(--text);margin-bottom:6px;font-size:1.1rem;font-weight:700}.admin-layout{max-width:820px;margin:0 auto;padding:40px 28px}.admin-layout textarea{resize:vertical;min-height:120px}.EmojiPickerReact{--epr-search-input-padding:10px 8px 10px 42px!important;--epr-search-bar-inner-padding:0 12px!important}@media (width<=768px){.player-sidebar{display:none}.course-grid{grid-template-columns:1fr}.auth-card{padding:32px 24px}}