.app{min-height:100vh;display:flex;flex-direction:column;background:#f5f7fa}.top-nav{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 8px #0000001a;position:sticky;top:0;z-index:100}.nav-content{max-width:1400px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.nav-brand{display:flex;align-items:center;gap:.75rem;color:#fff}.brand-icon{font-size:2rem}.brand-text{font-size:1.5rem;font-weight:700;letter-spacing:-.5px}.logout-button{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.2rem;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease}.logout-button:hover{background:#ffffff4d;transform:translateY(-1px)}.logout-icon{font-size:1.2rem}.main-content{flex:1;max-width:1400px;width:100%;margin:0 auto;padding:0}.upload-section-wrapper{margin:2rem}.gallery-section{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 2px 8px #0000000d;margin:0 2rem 2rem}.gallery-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;gap:1rem;flex-wrap:wrap}.gallery-title-row{display:flex;align-items:center;gap:1rem}.gallery-title{font-size:1.75rem;color:#333;font-weight:700;margin:0}.refresh-button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:#f5f5f5;color:#666;border:1px solid #ddd;border-radius:8px;font-size:1.1rem;cursor:pointer;transition:all .2s ease}.refresh-button:hover:not(:disabled){background:#e8e8e8;border-color:#ccc}.refresh-button:active:not(:disabled){transform:scale(.95)}.refresh-button:disabled{opacity:.4;cursor:not-allowed}.search-box{display:flex;align-items:center;gap:.5rem;background:#f5f7fa;border:2px solid #e0e0e0;border-radius:10px;padding:.5rem 1rem;transition:all .3s ease;min-width:250px}.search-box:focus-within{border-color:#667eea;background:#fff;box-shadow:0 0 0 3px #667eea1a}.search-icon{font-size:1.2rem;color:#666}.search-input{border:none;background:transparent;outline:none;font-size:.95rem;color:#333;flex:1;min-width:0}.search-input::placeholder{color:#999}.error-message{background:#fee;color:#c33;padding:1rem;border-radius:12px;margin-bottom:1.5rem;text-align:center;border:2px solid #fcc}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem;color:#667eea}.spinner{width:50px;height:50px;border:4px solid rgba(102,126,234,.2);border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.loading p{color:#666;font-size:1rem}@media (max-width: 768px){.nav-content{padding:1rem}.brand-text{font-size:1.2rem}.brand-icon{font-size:1.5rem}.main-content{padding:1rem}.gallery-section{padding:1.5rem}.gallery-header{flex-direction:column;align-items:stretch}.gallery-title{font-size:1.5rem}.search-box{width:100%;min-width:0}.logout-button span:last-child{display:none}}@media (max-width: 480px){.gallery-section{padding:1rem;border-radius:12px}.gallery-title{font-size:1.25rem}}.video-gallery{width:100%}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.video-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #00000014;transition:all .3s ease;cursor:pointer;display:flex;flex-direction:column;height:100%;border:1px solid #e0e0e0}.video-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #667eea26;border-color:#667eea}.video-card.disabled{opacity:.6;cursor:not-allowed}.video-card.disabled:hover{transform:none;box-shadow:0 2px 8px #00000014;border-color:#e0e0e0}.video-thumbnail{width:100%;height:200px;background:linear-gradient(135deg,#667eea,#764ba2);position:relative;overflow:hidden}.english-level-badge{position:absolute;top:.5rem;right:.5rem;background:#667eeae6;color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600;z-index:10}.thumbnail-image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.video-card:hover .thumbnail-image{transform:scale(1.05)}.thumbnail-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;gap:1rem}.placeholder-icon{font-size:3rem;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}.placeholder-text{font-size:1.1rem;font-weight:500}.video-info{padding:1.5rem;display:flex;flex-direction:column;flex:1}.video-name{color:#333;font-size:1.2rem;margin:0 0 1rem;word-wrap:break-word;word-break:break-word;line-height:1.4;flex:1;display:flex;align-items:flex-start}.video-status{margin-top:auto;padding-top:.5rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}.delete-button{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#fff5f5;border:1px solid #ffdddd;border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .2s ease;padding:0}.delete-button:hover{background:#ffe8e8;border-color:#fcc}.delete-button:active{transform:scale(.95)}.delete-confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease}.delete-confirm-dialog{background:#fff;border-radius:20px;padding:2.5rem;max-width:480px;width:90%;box-shadow:0 25px 80px #0006;animation:slideUp .3s cubic-bezier(.34,1.56,.64,1)}.delete-confirm-dialog h3{margin:0 0 1.5rem;font-size:1.75rem;color:#333;text-align:center;font-weight:700}.delete-confirm-dialog p{margin:0 0 .75rem;color:#666;line-height:1.6;text-align:center}.video-name-display{font-weight:600;color:#333!important;background:#f8f9fa;padding:.75rem 1rem;border-radius:8px;word-break:break-word;margin-bottom:1rem!important;font-size:.95rem}.warning-text{color:#dc3545!important;font-weight:600;margin-bottom:1.5rem!important;font-size:1.05rem}.math-verification{margin:1.5rem 0;padding:1.5rem;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;border:2px solid #dee2e6;text-align:center}.math-question{margin:0 0 .5rem;color:#666;font-size:.95rem;font-weight:500}.math-equation{margin:0 0 1rem;color:#007bff;font-size:2rem;font-weight:700;letter-spacing:2px}.math-input{width:100%;padding:1rem;border:2px solid #ced4da;border-radius:10px;font-size:1.25rem;text-align:center;font-weight:600;transition:all .3s ease;background:#fff}.math-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 4px #007bff26;transform:scale(1.02)}.math-input.error{border-color:#dc3545;background:#fff5f5;animation:shake .5s ease}.math-input.error:focus{box-shadow:0 0 0 4px #dc354526}.error-message{margin:.75rem 0 0;color:#dc3545;font-size:.95rem;font-weight:600}.dialog-buttons{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem}.cancel-button,.confirm-delete-button{flex:1;padding:1rem 2rem;border:none;border-radius:12px;font-size:1.05rem;font-weight:700;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.cancel-button{background:#f8f9fa;color:#666;border:2px solid #dee2e6}.cancel-button:hover:not(:disabled){background:#e9ecef;border-color:#ced4da;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.confirm-delete-button{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;box-shadow:0 4px 15px #dc35454d}.confirm-delete-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #dc354566}.cancel-button:disabled,.confirm-delete-button:disabled{opacity:.5;cursor:not-allowed;transform:none!important}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.status-badge{display:inline-block;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600}.status-badge.success{background:#d4edda;color:#155724}.status-badge.processing{background:#fff3cd;color:#856404}.view-button{width:100%;padding:.75rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.view-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.view-button:disabled{opacity:.5;cursor:not-allowed;background:#ccc}.empty-gallery{text-align:center;padding:4rem 2rem;color:#666}.empty-icon{font-size:5rem;margin-bottom:1rem;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.empty-gallery h2{font-size:2rem;margin-bottom:.5rem;color:#333}.empty-gallery p{font-size:1.2rem;color:#666}@media (max-width: 768px){.gallery-grid{grid-template-columns:1fr;gap:1rem}}@media (max-width: 480px){.gallery-grid{grid-template-columns:1fr}.video-card{border-radius:10px}}.video-detail-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:1000;overflow:hidden}.video-detail-container{width:100vw;height:100vh;display:flex;flex-direction:column;position:relative;overflow:hidden}.close-button-top{position:absolute;top:1rem;right:1rem;background:#667eeae6;color:#fff;border:none;border-radius:50%;width:48px;height:48px;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:10;box-shadow:0 4px 12px #00000026}.close-button-top:hover{background:#764ba2e6;transform:scale(1.1);box-shadow:0 6px 16px #0003}.page-content{flex:1;overflow:hidden;padding:0;display:flex;flex-direction:column}.navigation-controls{display:flex;align-items:center;justify-content:space-between;padding:.75rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);border-top:1px solid rgba(255,255,255,.1)}.nav-button-wrapper{position:relative;display:flex;align-items:center}.nav-preview{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:.75rem;background:#fff;border:2px solid #667eea;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px #0000004d;z-index:100;animation:fadeInUp .2s ease;min-width:200px}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.nav-preview-image{width:100%;height:auto;display:block;max-width:300px}.nav-preview-title{padding:.75rem;text-align:center;font-weight:600;color:#667eea;font-size:.95rem;background:linear-gradient(135deg,#f5f7ff,#f0f2ff)}.nav-preview-text{padding:1rem 1.5rem;text-align:center;font-weight:600;color:#667eea;font-size:1.05rem;white-space:nowrap}.nav-button{padding:.5rem 1.5rem;font-size:.9rem;font-weight:600;color:#fff;background:#fff3;border:2px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.nav-button:hover:not(:disabled){background:#ffffff4d;border-color:#ffffff80;transform:translateY(-2px)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.page-indicator{color:#fff;font-size:.95rem;font-weight:600}.loading-content,.error-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem;gap:1.5rem}.loading-content .spinner{width:60px;height:60px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}.loading-content p,.error-content p{font-size:1.2rem;color:#666}.error-content .close-button{padding:.75rem 2rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:10px;cursor:pointer;transition:all .3s ease}.error-content .close-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}@media (max-width: 768px){.close-button-top{width:40px;height:40px;font-size:1.2rem;top:.75rem;right:.75rem}.page-content{padding:1.5rem 1rem}.navigation-controls{padding:.5rem 1rem}.nav-button{padding:.4rem .8rem;font-size:.85rem}.page-indicator{font-size:.85rem}}.overview-page-disney{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background:#f5f5f5;padding:20px 60px}.overview-container{width:100%;margin:0 auto;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px #0000001a}.hero-section{position:relative;width:100%;height:500px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.hero-image{width:100%;height:100%;object-fit:cover}.hero-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.hero-icon{font-size:6rem;color:#fff}.play-button-overlay{position:absolute;width:80px;height:80px;background:#fffffff2;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .3s ease;box-shadow:0 8px 30px #0000004d}.play-button-overlay:hover{transform:scale(1.1)}.play-icon{color:#667eea;font-size:2rem;margin-left:5px}.content-section{padding:30px 40px;background:#fff}.video-title-disney{font-size:2.5rem;font-weight:700;color:#333;margin:0 0 15px}.synopsis-section-disney{display:flex;align-items:flex-start;gap:15px;margin-bottom:40px}.audio-button-disney{flex-shrink:0;width:50px;height:50px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px #667eea66;transition:transform .2s ease}.audio-button-disney:hover{transform:scale(1.1)}.audio-loading{font-size:1.5rem;animation:spin 1s linear infinite}.synopsis-text-disney{flex:1;font-size:1.1rem;line-height:1.6;color:#555;background:#f8f9fa;padding:15px 20px;border-radius:12px;border-left:4px solid #667eea;margin:0}.section-header-disney{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-size:1.8rem;font-weight:700;color:#333}.section-header-icon{width:40px;height:40px;border-radius:50%;object-fit:cover}.section-header-emoji{font-size:1.8rem}.section-count{font-size:1rem;font-weight:400;color:#999}.characters-section-disney{margin-bottom:50px}.characters-scroll{display:flex;gap:20px;overflow-x:auto;padding:10px 0;scrollbar-width:thin;scrollbar-color:#667eea #f0f0f0}.characters-scroll::-webkit-scrollbar{height:8px}.characters-scroll::-webkit-scrollbar-track{background:#f0f0f0;border-radius:4px}.characters-scroll::-webkit-scrollbar-thumb{background:#667eea;border-radius:4px}.character-card-disney{flex-shrink:0;width:120px;text-align:center;cursor:pointer;transition:transform .3s ease}.character-card-disney:hover{transform:translateY(-5px)}.character-avatar-disney{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:2.5rem;color:#fff;box-shadow:0 4px 15px #667eea4d;overflow:hidden}.character-avatar-image{width:100%;height:100%;object-fit:cover}.character-initial{font-size:2.5rem;font-weight:700;color:#fff}.character-name-disney{font-size:.9rem;font-weight:600;color:#333;line-height:1.2}.chapters-section-disney{margin-bottom:30px}.chapters-scroll{display:flex;gap:20px;overflow-x:auto;padding:10px 0;scrollbar-width:thin;scrollbar-color:#667eea #f0f0f0}.chapters-scroll::-webkit-scrollbar{height:8px}.chapters-scroll::-webkit-scrollbar-track{background:#f0f0f0;border-radius:4px}.chapters-scroll::-webkit-scrollbar-thumb{background:#667eea;border-radius:4px}.chapter-card-disney{flex-shrink:0;width:280px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px #0000001a;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease}.chapter-card-disney:hover{transform:translateY(-5px);box-shadow:0 8px 25px #667eea4d}.chapter-thumbnail{width:100%;height:160px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;position:relative}.chapter-thumbnail-image{width:100%;height:100%;object-fit:cover}.chapter-thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chapter-number-large{font-size:4rem;font-weight:700;color:#fff}.chapter-number-badge{position:absolute;top:10px;left:10px;background:#fffffff2;color:#667eea;font-weight:700;font-size:1.2rem;padding:5px 12px;border-radius:20px}.chapter-duration-badge{position:absolute;bottom:10px;right:10px;background:#000000b3;color:#fff;font-size:.85rem;padding:4px 10px;border-radius:12px}.chapter-info{padding:15px}.chapter-title-disney{font-size:1.1rem;font-weight:600;color:#333;margin-bottom:8px;line-height:1.3}.chapter-description-disney{font-size:.9rem;color:#666;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.character-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease}.character-video-dialog{background:#fff;border-radius:20px;padding:0;max-width:800px;width:90%;max-height:90vh;overflow:hidden;box-shadow:0 20px 60px #00000080;animation:slideUp .3s ease;position:relative}.character-video-container{display:flex;flex-direction:column}.character-video{width:100%;max-height:60vh;background:#000;border-radius:20px 20px 0 0}.character-video-info{padding:20px 30px}.character-video-title{font-size:1.8rem;font-weight:700;color:#333;margin:0 0 10px}.character-video-description{font-size:1rem;line-height:1.6;color:#555;margin:0}.character-video-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 30px;gap:20px}.character-video-loading .spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}.character-video-loading p{font-size:1.1rem;color:#666}.dialog-close-button{position:absolute;top:15px;right:15px;background:#f0f0f0;border:none;width:35px;height:35px;border-radius:50%;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}.dialog-close-button:hover{background:#e0e0e0}.dialog-title{font-size:2rem;font-weight:700;color:#333;margin:0 0 10px}.dialog-role{font-size:1.1rem;color:#667eea;font-weight:600;margin:0 0 20px}.dialog-description{font-size:1rem;line-height:1.6;color:#555}.dialog-description h3{font-size:1.3rem;color:#333;margin:0 0 10px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.hero-section{height:300px}.video-title-disney{font-size:1.8rem}.section-header-disney{font-size:1.4rem}.content-section{padding:20px}.synopsis-section-disney{flex-direction:column}.audio-button-disney{align-self:flex-start}}.timeline-page{display:flex;flex-direction:column;height:100%;gap:.25rem}.page-title{font-size:2rem;color:#667eea;text-align:center;margin:0;flex-shrink:0;font-weight:700}.timeline-layout{flex:1;display:flex;min-height:0;gap:.5rem}.sidebar{display:flex;flex-direction:column;gap:1rem;width:60px;flex-shrink:0}.segment-badge{background:linear-gradient(135deg,#667eea,#764ba2);padding:.75rem 1rem;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:.25rem;box-shadow:0 4px 12px #667eea4d}.badge-label{font-size:.75rem;color:#ffffffe6;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.badge-number{font-size:1.3rem;color:#fff;font-weight:700}.sidebar-tabs{display:flex;flex-direction:column;gap:.5rem}.sidebar-tab{display:flex;align-items:center;justify-content:center;padding:.75rem;background:#fff;border:2px solid #e0e0e0;border-radius:12px;cursor:pointer;transition:all .3s ease;width:100%;aspect-ratio:1}.sidebar-tab:hover{border-color:#667eea;transform:translate(5px)}.sidebar-tab.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;transform:translate(5px)}.sidebar-tab.active .tab-icon,.sidebar-tab.active .tab-label{color:#fff}.tab-icon{font-size:1.8rem}.main-content{flex:1;overflow:hidden;display:flex;flex-direction:column;gap:0;padding:0}@media (max-width: 768px){.timeline-layout{flex-direction:column}.sidebar{flex-direction:row;width:100%;gap:.75rem}.segment-badge{flex-direction:row;padding:.5rem 1rem;gap:.5rem;width:auto}.badge-label{font-size:.7rem}.badge-number{font-size:1.1rem}.sidebar-tabs{flex-direction:row;justify-content:space-around;flex:1}.sidebar-tab{flex:1;padding:.75rem .5rem}.sidebar-tab:hover,.sidebar-tab.active{transform:translateY(-3px)}.tab-icon{font-size:1.5rem}.tab-label{font-size:.75rem}}.video-segment-page{display:flex;flex-direction:column;height:100%}.segment-title{font-size:1.8rem;font-weight:700;color:#667eea;margin:0;text-align:center;flex-shrink:0}.event-description{flex-shrink:0;background:linear-gradient(135deg,#667eea,#764ba2);padding:.4rem .75rem;border-radius:8px 8px 0 0}.event-description p{margin:0;font-size:1rem;line-height:1.4;color:#fff}.video-with-controls{flex:1;display:flex;flex-direction:column;min-height:0;max-height:100%;overflow:hidden}.video-player-container{flex:1;display:flex;align-items:center;justify-content:center;background:#000;border-radius:0 0 12px 12px;overflow:hidden;min-height:0}.video-player{width:100%;height:100%;object-fit:contain}.video-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#fff;font-size:1.2rem}.segment-controls{display:flex;gap:0;flex-shrink:0;height:32px}.segment-bar{flex:1;padding:.35rem .5rem;background:linear-gradient(135deg,#f5f7ff,#f0f2ff);border:1px solid #d0d5f5;border-top:none;cursor:pointer;transition:all .3s ease;text-align:center;position:relative}.segment-bar:first-child{border-radius:0 0 0 12px}.segment-bar:last-child{border-radius:0 0 12px}.segment-bar:not(:last-child){border-right:none}.segment-bar:hover{background:linear-gradient(135deg,#e8ebff,#dde1ff);border-color:#667eea;transform:translateY(-2px);box-shadow:0 4px 12px #667eea4d}.segment-bar.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent}.segment-bar.active .segment-label,.segment-bar.active .segment-time{color:#fff}.segment-bar.highlight{border-color:#f99}.segment-bar.highlight:not(.active){background:linear-gradient(135deg,#fff5f7,#ffe8eb)}.segment-bar.highlight.active{background:linear-gradient(135deg,#ff6b6b,#ee5a6f)}.segment-label{font-size:.85rem;font-weight:600;color:#5a5a7a}.segment-time{font-size:.85rem;color:#666;font-family:monospace}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem}.loading-state .spinner{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}.loading-state p{font-size:1.1rem;color:#666}@media (max-width: 768px){.event-description p{font-size:.95rem}.segment-controls{flex-direction:column}.segment-bar{padding:.75rem}.segment-label{font-size:.9rem}.segment-time{font-size:.75rem}}.quiz-page{display:flex;flex-direction:column;height:100%;gap:1rem;overflow:hidden;padding:1rem}.quiz-header{flex-shrink:0}.quiz-title{font-size:1.8rem;font-weight:700;color:#667eea;margin:0 0 .75rem;text-align:center}.quiz-progress{display:flex;align-items:center;gap:1rem}.progress-bar{flex:1;height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s ease}.progress-text{font-size:.9rem;font-weight:600;color:#667eea;min-width:50px;text-align:right}.questions-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem;padding-right:.5rem}.question-block{background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:1.25rem;flex-shrink:0}.question-header{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:1rem}.question-number{font-size:1.1rem;font-weight:700;color:#667eea;flex-shrink:0}.question-text{flex:1;font-size:1.05rem;font-weight:600;color:#333;line-height:1.4}.difficulty-badge{flex-shrink:0;font-size:.85rem;color:#666;background:#f5f5f5;padding:.25rem .75rem;border-radius:12px;white-space:nowrap}.options-container{display:flex;flex-direction:column;gap:.75rem;margin-bottom:.75rem}.option{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:linear-gradient(135deg,#f5f7ff,#f0f2ff);border:2px solid #d0d5f5;border-radius:8px;cursor:pointer;transition:all .2s ease}.option:hover{background:linear-gradient(135deg,#e8ebff,#dde1ff);border-color:#667eea;transform:translate(4px)}.option-radio{font-size:1.2rem;color:#667eea;flex-shrink:0;width:24px;text-align:center}.option-label{font-weight:700;color:#667eea;flex-shrink:0}.option-text{flex:1;color:#333;font-size:.95rem}.option-correct{background:linear-gradient(135deg,#d4edda,#c3e6cb);border-color:#28a745;cursor:default}.option-correct:hover{background:linear-gradient(135deg,#d4edda,#c3e6cb);transform:none}.option-correct .option-radio{color:#28a745;font-weight:700}.option-wrong{background:linear-gradient(135deg,#f8d7da,#f5c6cb);border-color:#dc3545;cursor:default}.option-wrong:hover{background:linear-gradient(135deg,#f8d7da,#f5c6cb);transform:none}.option-wrong .option-radio{color:#dc3545;font-weight:700}.option-show-correct{background:linear-gradient(135deg,#d4edda,#c3e6cb);border-color:#28a745;cursor:default}.option-show-correct:hover{background:linear-gradient(135deg,#d4edda,#c3e6cb);transform:none}.feedback{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:8px;font-size:.95rem;font-weight:600;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.feedback-correct{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.feedback-wrong{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.feedback-icon{font-size:1.2rem;font-weight:700}.questions-container::-webkit-scrollbar{width:8px}.questions-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.questions-container::-webkit-scrollbar-thumb{background:#667eea;border-radius:4px}.questions-container::-webkit-scrollbar-thumb:hover{background:#5568d3}.discussion-page{display:flex;flex-direction:column;height:100%;gap:1.5rem;overflow-y:auto;padding:1rem 1.5rem 1rem 1rem}.questions-list{display:flex;flex-direction:column;gap:1rem}.question-card{background:#fff;border:2px solid #e0e0e0;border-radius:12px;overflow:hidden;transition:all .3s ease}.question-card:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea26}.question-card.expanded{border-color:#667eea}.question-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem;cursor:pointer;gap:1rem}.question-content{display:flex;align-items:flex-start;gap:1rem;flex:1}.difficulty-badge{padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600;color:#fff;text-transform:uppercase;flex-shrink:0}.question-text{margin:0;font-size:1.1rem;color:#333;line-height:1.5}.expand-icon{font-size:1.2rem;color:#667eea;flex-shrink:0;transition:transform .3s ease}.question-card.expanded .expand-icon{transform:rotate(0)}.answer-section{padding:0 1.25rem 1.25rem;border-top:1px solid #e0e0e0;animation:slideDown .3s ease}.answer-section h4{margin:1rem 0 .5rem;font-size:1rem;color:#667eea}.answer-section p{margin:0;font-size:1rem;line-height:1.6;color:#555;background:#f8f9fa;padding:1rem;border-radius:8px;border-left:3px solid #667eea}.learning-focus{background:linear-gradient(135deg,#667eea,#764ba2);padding:1.5rem;border-radius:12px;color:#fff;margin-top:auto;flex-shrink:0}.learning-focus h3{margin:0 0 1rem;font-size:1.3rem}.focus-content{display:flex;flex-direction:column;gap:.75rem}.focus-item{font-size:1rem;line-height:1.5}.focus-item strong{display:inline-block;min-width:80px;opacity:.9}@media (max-width: 768px){.section-title{font-size:1.5rem}.question-header{padding:1rem}.question-content{flex-direction:column;gap:.5rem}.question-text{font-size:1rem}.answer-section{padding:0 1rem 1rem}.answer-section p{font-size:.95rem}.learning-focus{padding:1rem}.learning-focus h3{font-size:1.1rem}.focus-item{font-size:.9rem}}.vocabulary-page{display:flex;flex-direction:column;height:100%;gap:1rem;overflow:hidden;padding:1rem}.section-title{font-size:1.8rem;color:#333;margin:0;flex-shrink:0}.no-data{text-align:center;color:#999;font-size:1.1rem;margin-top:2rem}.loading-hint{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background:#f0f2ff;border-radius:8px;color:#667eea;font-size:.9rem;flex-shrink:0}.small-spinner{width:16px;height:16px;border:2px solid #e0e0e0;border-top:2px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.vocab-split-container{display:flex;gap:1rem;flex:1;min-height:0;overflow:hidden}.vocab-center-section,.vocab-video-with-card{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.word-info-bar{flex-shrink:0;background:linear-gradient(135deg,#667eea,#764ba2);padding:.6rem 1rem;border-radius:8px 8px 0 0}.vocab-word-title{font-size:1.5rem;font-weight:700;color:#fff;margin:0 0 .25rem}.vocab-word-definition{font-size:1.05rem;line-height:1.4;color:#fffffff2;margin:0}.video-player-wrapper{background:#000;overflow:hidden;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.vocab-video-player{width:100%;height:100%;display:block;object-fit:contain}.video-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5f5f5,#e8e8e8);border:2px dashed #ccc}.video-placeholder p{color:#999;font-size:1rem;margin:0;text-align:center;padding:0 2rem}.word-example-bar{flex-shrink:0;background:linear-gradient(135deg,#f5f7ff,#f0f2ff);padding:.75rem 1rem;border-radius:0 0 8px 8px;border-top:2px solid #d0d5f5}.word-example-bar .example-text{font-style:italic;color:#5a5a7a;margin:0;font-size:1.05rem;line-height:1.5}.vocab-list-section{flex:0 0 200px;display:flex;flex-direction:column;min-height:0}.vocab-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding-right:.25rem}.vocab-list-item{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:#fff;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .3s ease;flex-shrink:0}.vocab-list-item:hover{border-color:#667eea;box-shadow:0 2px 8px #667eea33}.vocab-list-item.active{border-color:#667eea;background:linear-gradient(135deg,#667eea1a,#764ba21a);box-shadow:0 2px 8px #667eea4d}.vocab-list-item .word-number{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:50%;font-weight:700;font-size:.8rem;flex-shrink:0}.vocab-list-item.active .word-number{box-shadow:0 0 0 2px #667eea4d}.word-title{margin:0;font-size:.9rem;font-weight:700;color:#333;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vocab-list-item.active .word-title{color:#667eea}@media (max-width: 1024px){.vocab-split-container{flex-direction:column}.vocab-video-section,.vocab-list-section{flex:1}.vocab-video-section,.vocab-list-section{max-height:50%}}@media (max-width: 768px){.section-title,.current-word{font-size:1.5rem}.info-section p{font-size:1rem}.vocab-list-item{padding:.75rem}.word-title{font-size:1rem}.word-preview{font-size:.85rem}}.overall-discussion-page{display:flex;flex-direction:column;height:100%;padding:2rem;overflow-y:auto;background:linear-gradient(135deg,#f5f7fa,#c3cfe2)}.discussion-header{text-align:center;margin-bottom:2rem}.discussion-title{font-size:3rem;color:#333;margin:0 0 .5rem;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.discussion-subtitle{font-size:1.3rem;color:#666;margin:0;font-style:italic}.discussion-content{flex:1;display:flex;flex-direction:column;gap:2rem;max-width:900px;margin:0 auto;width:100%}.topic-card{background:#fff;padding:2.5rem;border-radius:20px;box-shadow:0 10px 40px #0000001a;text-align:center;border:3px solid #667eea}.topic-icon{font-size:4rem;margin-bottom:1rem}.topic-heading{font-size:2rem;color:#667eea;margin:0 0 1.5rem}.topic-text{font-size:1.4rem;line-height:1.8;color:#444;margin:0;font-weight:500}.reflection-prompt{background:#fff;padding:2rem;border-radius:16px;box-shadow:0 6px 20px #00000014}.reflection-prompt h3{font-size:1.5rem;color:#667eea;margin:0 0 1rem}.reflection-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}.reflection-list li{font-size:1.1rem;color:#555;padding-left:2rem;position:relative;line-height:1.6}.reflection-list li:before{content:"✓";position:absolute;left:0;color:#667eea;font-weight:700;font-size:1.3rem}.completion-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1.5rem 2rem;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:1rem;box-shadow:0 8px 24px #667eea66;margin-top:2rem}.badge-icon{font-size:2rem;animation:sparkle 2s ease-in-out infinite}@keyframes sparkle{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.2) rotate(180deg)}}.badge-text{font-size:1.3rem;font-weight:600}@media (max-width: 768px){.overall-discussion-page{padding:1.5rem 1rem}.discussion-title{font-size:2rem}.discussion-subtitle{font-size:1.1rem}.topic-card{padding:1.5rem}.topic-icon{font-size:3rem}.topic-heading{font-size:1.5rem}.topic-text{font-size:1.1rem}.reflection-prompt{padding:1.5rem}.reflection-prompt h3{font-size:1.2rem}.reflection-list li{font-size:1rem}.completion-badge{padding:1rem 1.5rem;flex-direction:column;gap:.5rem}.badge-text{font-size:1.1rem}}.upload-section{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 2px 8px #0000000d;border:1px solid #e0e0e0}.upload-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.upload-header h2{color:#667eea;font-size:1.5rem;margin:0}.toggle-icon{font-size:1.2rem;color:#667eea;transition:transform .3s ease}.upload-content{margin-top:1.5rem;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.mode-selector{display:flex;gap:1rem;margin-bottom:1.5rem;background:#f8f9ff;padding:.5rem;border-radius:12px}.mode-button{flex:1;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;color:#667eea;background:#fff;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .3s ease}.mode-button:hover:not(:disabled){background:#f0f2ff;border-color:#667eea}.mode-button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea}.mode-button:disabled{opacity:.5;cursor:not-allowed}.level-selector{margin-bottom:1.5rem;padding:1rem;background:#f8f9ff;border-radius:12px;border:2px solid #e0e7ff}.level-label{display:block;font-weight:600;color:#555;font-size:1rem;margin-bottom:.75rem}.level-select{width:100%;padding:.75rem;border:2px solid #667eea;border-radius:8px;background:#fff;font-size:1rem;font-weight:500;color:#333;cursor:pointer;transition:all .3s ease}.level-select:hover:not(:disabled){border-color:#764ba2;box-shadow:0 2px 8px #667eea33}.level-select:focus{outline:none;border-color:#764ba2;box-shadow:0 0 0 3px #667eea1a}.level-select:disabled{opacity:.5;cursor:not-allowed}.level-info{margin-top:.75rem;padding:.75rem;background:#fff;border-radius:8px;border:1px solid #e0e7ff}.level-detail{color:#667eea;font-size:.9rem;font-weight:600;margin-bottom:.5rem}.level-detail strong{color:#555}.level-description{color:#666;font-size:.9rem;line-height:1.5;font-style:italic}.file-inputs{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1rem}.file-input-group{display:flex;flex-direction:column;gap:.5rem}.file-label{font-weight:600;color:#555;font-size:1rem}.file-input{padding:.75rem;border:2px dashed #667eea;border-radius:8px;background:#f8f9ff;cursor:pointer;transition:all .3s ease}.file-input:hover:not(:disabled){border-color:#764ba2;background:#f0f2ff}.file-input:disabled{opacity:.5;cursor:not-allowed}.file-info{color:#28a745;font-size:.9rem;padding:.5rem;background:#e8f5e9;border-radius:6px}.s3-inputs{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:1rem}.s3-input-group{display:flex;flex-direction:column;gap:.5rem}.s3-path-input{padding:.75rem;border:2px solid #667eea;border-radius:8px;background:#f8f9ff;font-size:1rem;transition:all .3s ease}.s3-path-input:focus{outline:none;border-color:#764ba2;background:#fff}.s3-path-input:disabled{opacity:.5;cursor:not-allowed}.s3-hint{color:#666;font-size:.85rem;font-style:italic}.upload-info{background:#e3f2fd;color:#1976d2;padding:1rem;border-radius:8px;margin:1rem 0;font-size:.95rem}.message{padding:1rem;border-radius:8px;margin:1rem 0;font-weight:500}.message.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.message.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.progress-container{margin:1rem 0}.progress-status{text-align:center;color:#667eea;font-weight:600;margin-bottom:.5rem;font-size:.95rem}.progress-bar{width:100%;height:24px;background:#e0e0e0;border-radius:12px;overflow:hidden;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s ease;border-radius:12px}.progress-text{text-align:center;margin-top:.5rem;font-weight:600;color:#667eea}.upload-button{width:100%;padding:1rem 2rem;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea66}.upload-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.upload-button:disabled{opacity:.6;cursor:not-allowed;transform:none}@media (max-width: 768px){.file-inputs{grid-template-columns:1fr}.mode-selector{flex-direction:column}.upload-header h2{font-size:1.2rem}}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.login-card{background:#fffffff2;border-radius:20px;box-shadow:0 8px 32px #0000001a;padding:40px;width:100%;max-width:400px;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.login-header{text-align:center;margin-bottom:30px}.login-icon{font-size:60px;margin-bottom:15px;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.login-header h1{color:#333;font-size:28px;margin:0 0 10px;font-weight:600}.login-header p{color:#666;font-size:14px;margin:0}.login-form{display:flex;flex-direction:column;gap:20px}.input-group{position:relative}.password-input{width:100%;padding:15px 20px;border:2px solid #e0e0e0;border-radius:12px;font-size:16px;transition:all .3s ease;box-sizing:border-box}.password-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.password-input:disabled{background-color:#f5f5f5;cursor:not-allowed}.login-button{width:100%;padding:15px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea4d}.login-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.login-button:active:not(:disabled){transform:translateY(0)}.login-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.error-message{background-color:#fee;color:#c33;padding:12px 16px;border-radius:8px;font-size:14px;text-align:center;animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@media (max-width: 480px){.login-card{padding:30px 20px}.login-header h1{font-size:24px}.login-icon{font-size:50px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:#333}#root{min-height:100vh}