@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap";:root{--bg-primary:#f5f8fa;--bg-secondary:#fff;--primary-blue:#4a90e2;--primary-blue-hover:#357abd;--primary-blue-pastel:#eef5fc;--primary-blue-pastel-deep:#d2e4f7;--primary-orange:#ff9f43;--primary-orange-hover:#ee8a24;--primary-orange-pastel:#fff5eb;--primary-orange-pastel-deep:#ffdcb5;--success-color:#2ecc71;--success-pastel:#eafaf1;--warning-color:#f1c40f;--warning-pastel:#fef9e7;--danger-color:#e74c3c;--danger-pastel:#fde8e7;--text-main:#2d3748;--text-muted:#718096;--text-light:#a0aec0;--border-color:#edf2f7;--border-radius-sm:8px;--border-radius-md:16px;--border-radius-lg:24px;--shadow-sm:0 2px 4px #4a90e20a;--shadow-md:0 8px 16px #4a90e20f;--shadow-lg:0 16px 32px #4a90e21a;--shadow-inset:inset 0 2px 4px #00000005;--font-heading:"Outfit", sans-serif;--font-body:"Inter", sans-serif;--transition-fast:.2s ease;--transition-normal:.3s cubic-bezier(.25, .8, .25, 1);--transition-slow:.5s ease}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-main);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--text-main);font-weight:600}.app-container{min-height:100vh;display:flex;position:relative}.sidebar{background-color:var(--bg-secondary);border-right:1px solid var(--border-color);z-index:100;width:320px;height:100vh;box-shadow:var(--shadow-sm);transition:transform var(--transition-normal);flex-direction:column;padding:24px;display:flex;position:sticky;top:0}.brand-section{border-bottom:1px solid var(--border-color);align-items:center;gap:12px;margin-bottom:32px;padding-bottom:16px;display:flex}.brand-logo{font-size:24px;font-weight:700;font-family:var(--font-heading);letter-spacing:-.5px;color:var(--primary-blue);align-items:center;gap:8px;display:flex}.brand-logo span{color:var(--primary-orange)}.version-badge{background-color:var(--primary-blue-pastel);color:var(--primary-blue);border-radius:12px;margin-left:auto;padding:2px 8px;font-size:11px;font-weight:600}.nav-menu{flex-direction:column;flex:1;gap:6px;padding-right:4px;list-style:none;display:flex;overflow-y:auto}.nav-menu::-webkit-scrollbar{width:4px}.nav-menu::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:4px}.nav-item{border-radius:var(--border-radius-sm);cursor:pointer;color:var(--text-muted);transition:all var(--transition-fast);align-items:center;gap:12px;padding:12px 16px;font-size:14px;font-weight:500;display:flex;position:relative}.nav-item:hover{background-color:var(--primary-blue-pastel);color:var(--primary-blue)}.nav-item.active{background-color:var(--primary-blue-pastel-deep);color:var(--primary-blue);font-weight:600}.nav-item-icon{justify-content:center;align-items:center;display:flex}.nav-item-check{color:var(--success-color);align-items:center;margin-left:auto;display:flex}.sidebar-footer{border-top:1px solid var(--border-color);flex-direction:column;gap:12px;margin-top:auto;padding-top:16px;display:flex}.update-status{color:var(--text-muted);align-items:center;gap:6px;font-size:11px;display:flex}.btn-update{background-color:var(--primary-orange);color:#fff;border-radius:var(--border-radius-sm);width:100%;font-family:var(--font-heading);cursor:pointer;transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;gap:8px;padding:12px;font-weight:600;display:flex;box-shadow:0 4px 10px #ff9f4333}.btn-update:hover{background-color:var(--primary-orange-hover);transform:translateY(-1px)}.btn-update:disabled{background-color:var(--text-light);box-shadow:none;cursor:not-allowed}.main-content{flex:1;max-width:1200px;height:100vh;margin:0 auto;padding:40px;position:relative;overflow-y:auto}.top-header{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.update-notification-banner{background-color:var(--primary-orange-pastel);border:1px solid var(--primary-orange-pastel-deep);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;margin-bottom:24px;padding:16px 20px;animation:.3s slideIn;display:flex}.update-notification-content{align-items:center;gap:12px;display:flex}.update-notification-text h4{color:var(--primary-orange-hover);margin-bottom:2px;font-size:14px}.update-notification-text p{color:var(--text-main);font-size:13px}.btn-dismiss{color:var(--text-muted);cursor:pointer;transition:background-color var(--transition-fast);background:0 0;border:none;border-radius:50%;align-items:center;padding:4px;display:flex}.btn-dismiss:hover{background-color:var(--primary-orange-pastel-deep);color:var(--primary-orange-hover)}.content-card{background-color:var(--bg-secondary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border-color);margin-bottom:32px;padding:40px}.section-header{border-bottom:2px solid var(--border-color);justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:20px;display:flex}.section-title{align-items:center;gap:16px;font-size:32px;display:flex}.section-icon-wrapper{background-color:var(--primary-blue-pastel);color:var(--primary-blue);border-radius:var(--border-radius-md);justify-content:center;align-items:center;width:56px;height:56px;display:flex}.btn-complete-section{border-radius:var(--border-radius-sm);font-weight:600;font-family:var(--font-heading);cursor:pointer;transition:all var(--transition-fast);border:1px solid var(--border-color);align-items:center;gap:8px;padding:10px 20px;display:flex}.btn-complete-section.completed{background-color:var(--success-pastel);border-color:var(--success-color);color:var(--success-color)}.btn-complete-section.not-completed{background-color:var(--bg-secondary);color:var(--text-muted)}.btn-complete-section.not-completed:hover{background-color:var(--bg-primary);border-color:var(--text-muted)}.notes-container{flex-direction:column;gap:20px;margin-bottom:32px;display:flex}.note-item{background-color:var(--bg-primary);border-radius:var(--border-radius-md);border-left:4px solid var(--primary-blue);padding:20px}.note-title{align-items:flex-start;gap:10px;margin-bottom:8px;font-size:16px;font-weight:600;display:flex}.sub-list{flex-direction:column;gap:8px;margin-top:10px;padding-left:26px;list-style:none;display:flex}.sub-list-item{color:var(--text-muted);padding-left:16px;font-size:14px;position:relative}.sub-list-item:before{content:"•";color:var(--primary-orange);font-size:16px;position:absolute;top:-2px;left:0}.timeline-header{font-size:20px;font-family:var(--font-heading);color:var(--text-main);align-items:center;gap:10px;margin-top:40px;margin-bottom:24px;display:flex}.timeline-container{flex-direction:column;gap:32px;margin-top:20px;padding-left:32px;display:flex;position:relative}.timeline-container:before{content:"";background-color:var(--primary-blue-pastel-deep);width:2px;position:absolute;top:8px;bottom:8px;left:11px}.timeline-node{position:relative}.timeline-marker{background-color:var(--bg-secondary);border:4px solid var(--primary-blue);width:24px;height:24px;transition:all var(--transition-fast);z-index:5;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:4px;left:-32px}.timeline-node:hover .timeline-marker{border-color:var(--primary-orange);transform:scale(1.2)}.timeline-card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);padding:24px}.timeline-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-blue-pastel-deep);transform:translateY(-2px)}.timeline-meta{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.timeline-time{background-color:var(--primary-blue-pastel);color:var(--primary-blue);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700}.timeline-title{color:var(--text-main);font-size:18px;font-weight:700;font-family:var(--font-heading)}.timeline-details{flex-direction:column;gap:8px;list-style:none;display:flex}.timeline-detail-item{color:var(--text-muted);padding-left:14px;font-size:14px;position:relative}.timeline-detail-item:before{content:"›";color:var(--primary-blue);font-size:18px;font-weight:700;position:absolute;top:-4px;left:0}.quiz-container{background-color:var(--primary-orange-pastel);border:1px solid var(--primary-orange-pastel-deep);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);margin-top:40px;padding:40px}.quiz-header{border-bottom:1px solid var(--primary-orange-pastel-deep);align-items:center;gap:16px;margin-bottom:24px;padding-bottom:16px;display:flex}.quiz-icon{color:var(--primary-orange);width:48px;height:48px;box-shadow:var(--shadow-sm);background-color:#fff;border-radius:12px;justify-content:center;align-items:center;display:flex}.quiz-question-box{margin-bottom:24px}.quiz-question-num{text-transform:uppercase;letter-spacing:1px;color:var(--primary-orange);margin-bottom:8px;font-size:12px;font-weight:700}.quiz-question-text{color:var(--text-main);margin-bottom:20px;font-size:18px;font-weight:600}.quiz-options{flex-direction:column;gap:12px;display:flex}.quiz-option{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);cursor:pointer;transition:all var(--transition-fast);align-items:center;gap:12px;padding:16px 20px;font-weight:500;display:flex}.quiz-option:hover:not(.selected):not(.disabled){border-color:var(--primary-orange);background-color:var(--primary-orange-pastel)}.quiz-option.selected{border-color:var(--primary-orange);background-color:var(--primary-orange-pastel-deep);font-weight:600}.quiz-option.correct{border-color:var(--success-color);background-color:var(--success-pastel);color:var(--success-color)}.quiz-option.wrong{border-color:var(--danger-color);background-color:var(--danger-pastel);color:var(--danger-color)}.quiz-option.disabled{cursor:not-allowed}.quiz-feedback{border-radius:var(--border-radius-md);margin-top:20px;padding:16px;font-size:14px;font-weight:500;animation:.2s fadeIn}.quiz-feedback.correct{background-color:var(--success-pastel);color:var(--success-color)}.quiz-feedback.wrong{background-color:var(--danger-pastel);color:var(--danger-color)}.quiz-footer{justify-content:flex-end;margin-top:24px;display:flex}.btn-next-question{background-color:var(--primary-orange);color:#fff;border-radius:var(--border-radius-sm);font-family:var(--font-heading);cursor:pointer;transition:all var(--transition-fast);border:none;padding:12px 24px;font-weight:600}.btn-next-question:hover{background-color:var(--primary-orange-hover)}.quiz-results{text-align:center;flex-direction:column;align-items:center;gap:16px;padding:32px 0;display:flex}.quiz-score-circle{border:8px solid var(--primary-orange-pastel-deep);width:120px;height:120px;color:var(--primary-orange);font-size:28px;font-weight:700;font-family:var(--font-heading);box-shadow:var(--shadow-md);background-color:#fff;border-radius:50%;justify-content:center;align-items:center;margin-bottom:16px;display:flex}.quiz-results-title{font-size:24px;font-weight:700}.quiz-results-subtitle{color:var(--text-muted);margin-bottom:16px;font-size:14px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=992px){.app-container{flex-direction:column}.sidebar{border-right:none;border-bottom:1px solid var(--border-color);width:100%;height:auto;position:relative}.main-content{height:auto;padding:24px}}.quiz-sort-container{flex-direction:column;gap:12px;margin-top:16px;display:flex}.quiz-sort-item{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);cursor:grab;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-sm);align-items:center;gap:16px;padding:16px 20px;font-weight:500;display:flex}.quiz-sort-item:hover:not(.disabled){border-color:var(--primary-orange);background-color:var(--primary-orange-pastel);box-shadow:var(--shadow-md);transform:translateY(-1px)}.quiz-sort-item:active:not(.disabled){cursor:grabbing}.quiz-sort-item.disabled{cursor:not-allowed}.quiz-sort-item.correct{border-color:var(--success-color);background-color:var(--success-pastel);color:var(--success-color)}.quiz-sort-item.wrong{border-color:var(--danger-color);background-color:var(--danger-pastel);color:var(--danger-color)}.quiz-sort-number{background-color:var(--primary-blue-pastel);width:24px;height:24px;color:var(--primary-blue);border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.quiz-sort-item.correct .quiz-sort-number{background-color:var(--success-color);color:#fff}.quiz-sort-item.wrong .quiz-sort-number{background-color:var(--danger-color);color:#fff}.quiz-sort-handle{color:var(--text-light);cursor:grab;align-items:center;display:flex}.quiz-sort-item:active .quiz-sort-handle{cursor:grabbing}.quiz-sort-actions{gap:6px;margin-left:auto;display:flex}.btn-sort-action{background-color:var(--bg-primary);border:1px solid var(--border-color);cursor:pointer;color:var(--text-muted);transition:all var(--transition-fast);border-radius:4px;justify-content:center;align-items:center;padding:6px;display:flex}.btn-sort-action:hover:not(:disabled){background-color:var(--primary-orange-pastel-deep);color:var(--primary-orange-hover);border-color:var(--primary-orange)}.btn-sort-action:disabled{opacity:.3;cursor:not-allowed}.quiz-blank-sentence{color:var(--text-main);background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-md);box-shadow:var(--shadow-inset);margin-bottom:24px;padding:24px;font-size:17px;line-height:2.2}.quiz-blank-slot{vertical-align:middle;background-color:var(--bg-primary);border:2px dashed var(--border-color);border-radius:var(--border-radius-sm);cursor:pointer;min-width:120px;height:32px;color:var(--primary-blue);transition:all var(--transition-fast);justify-content:center;align-items:center;margin:0 6px;padding:0 12px;font-size:14px;font-weight:600;display:inline-flex}.quiz-blank-slot.active{border-color:var(--primary-orange);background-color:var(--primary-orange-pastel)}.quiz-blank-slot.filled{border-style:solid;border-color:var(--primary-blue-pastel-deep);background-color:var(--primary-blue-pastel);color:var(--primary-blue-hover);box-shadow:var(--shadow-sm)}.quiz-blank-slot.correct{border-style:solid;border-color:var(--success-color);background-color:var(--success-pastel);color:var(--success-color)}.quiz-blank-slot.wrong{border-style:solid;border-color:var(--danger-color);background-color:var(--danger-pastel);color:var(--danger-color)}.quiz-blank-slot.disabled{cursor:not-allowed}.quiz-blank-options-title{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:12px;font-size:12px;font-weight:700}.quiz-blank-options{background-color:var(--bg-primary);border-radius:var(--border-radius-md);border:1px dashed var(--border-color);flex-wrap:wrap;gap:10px;padding:16px;display:flex}.quiz-blank-option{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);-webkit-user-select:none;user-select:none;padding:8px 16px;font-size:14px;font-weight:500}.quiz-blank-option:hover:not(.used):not(.disabled){border-color:var(--primary-orange);background-color:var(--primary-orange-pastel);box-shadow:var(--shadow-md);transform:translateY(-1px)}.quiz-blank-option.used{opacity:.3;cursor:default;background-color:var(--bg-primary);border-style:dashed}.quiz-blank-option.disabled{cursor:not-allowed}