*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Nunito,sans-serif;min-width:320px;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit}:root{--level-1: #22C55E;--level-1-light: #DCFCE7;--level-2: #3B82F6;--level-2-light: #DBEAFE;--level-3: #F97316;--level-3-light: #FFEDD5;--level-4: #A855F7;--level-4-light: #F3E8FF;--sidebar-bg: #1E1B4B;--sidebar-width: 240px;--white: #ffffff;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-400: #9ca3af;--gray-600: #4b5563;--gray-800: #1f2937;--radius: 16px;--radius-sm: 10px;--radius-xs: 6px;--shadow: 0 2px 8px rgba(0,0,0,.1);--shadow-md: 0 6px 20px rgba(0,0,0,.12);--shadow-lg: 0 12px 32px rgba(0,0,0,.16)}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fillBar{0%{width:0%}}@keyframes popIn{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.06)}to{transform:scale(1);opacity:1}}.app-loading{display:flex;align-items:center;justify-content:center;height:100vh;font-size:1.3rem;font-weight:700;color:var(--gray-600);background:var(--gray-100)}.layout-wrapper{display:flex;height:100vh;overflow:hidden;background:var(--gray-100)}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--sidebar-bg);display:flex;flex-direction:column;height:100vh;overflow-y:auto;overflow-x:hidden}.sidebar-header{padding:1rem;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-logo{width:100%;display:block;background:var(--white);padding:.5rem .75rem;border-radius:var(--radius-xs)}.sidebar-title{font-size:1.2rem;font-weight:900;color:var(--white);margin:0;line-height:1.3}.sidebar-subtitle{font-size:.72rem;color:#ffffff73;margin-top:.2rem}.sidebar-nav{flex:1;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.sidebar-level-btn{width:100%;background:#ffffff0f;border:2px solid transparent;border-radius:var(--radius-sm);padding:.75rem .9rem;cursor:pointer;text-align:left;transition:background .2s,border-color .2s,transform .15s;min-height:64px;color:#ffffffbf;font-family:Nunito,sans-serif}.sidebar-level-btn:hover{background:#ffffff1f;transform:translate(3px)}.sidebar-level-btn.active{background:#ffffff26;border-color:var(--level-color, #fff);color:var(--white)}.sidebar-level-header-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}.sidebar-badge{width:28px;height:28px;border-radius:50%;background:var(--level-color, rgba(255,255,255,.3));color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:900;flex-shrink:0}.sidebar-badge.complete{background:#22c55e;font-size:.9rem}.sidebar-level-name{font-size:.85rem;font-weight:800;line-height:1.2;flex:1}.sidebar-progress-track{height:5px;background:#ffffff1f;border-radius:99px;overflow:hidden}.sidebar-progress-fill{height:100%;border-radius:99px;background:var(--level-color, #22C55E);transition:width .6s ease}.sidebar-footer{padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.1)}.sidebar-email{font-size:.72rem;color:#fff6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.6rem}.btn-logout{width:100%;background:#ffffff14;border:1.5px solid rgba(255,255,255,.2);color:#ffffffbf;padding:.5rem 1rem;border-radius:var(--radius-xs);cursor:pointer;font-size:.8rem;font-weight:700;font-family:Nunito,sans-serif;transition:background .2s}.btn-logout:hover{background:#ffffff2e}.main-area{flex:1;overflow-y:auto;display:flex;flex-direction:column}.main-header{padding:1.25rem 1.75rem 1rem;background:var(--white);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;gap:1rem}.main-level-badge{width:52px;height:52px;border-radius:14px;background:var(--level-color, #22C55E);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:900;color:var(--white);flex-shrink:0;animation:popIn .35s ease-out;box-shadow:0 4px 12px #00000026}.main-header-text{flex:1;min-width:0}.main-level-title{font-size:1.3rem;font-weight:900;color:var(--gray-800);margin:0 0 .2rem}.main-level-desc{font-size:.85rem;color:var(--gray-600);font-weight:600;margin:0}.main-progress-wrap{min-width:200px;max-width:240px}.level-complete-banner{margin:1.25rem 1.75rem 0;background:linear-gradient(135deg,#22c55e,#16a34a);color:var(--white);border-radius:var(--radius);padding:.9rem 1.5rem;font-size:1.05rem;font-weight:900;text-align:center;animation:popIn .4s ease-out}.video-grid{padding:1.5rem 1.75rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem;animation:fadeIn .35s ease-out}.loading{display:flex;align-items:center;justify-content:center;padding:4rem;font-size:1.1rem;font-weight:700;color:var(--gray-600)}.api-error{margin:1.5rem 1.75rem;background:#fee2e2;color:#dc2626;border-radius:var(--radius);padding:1.25rem 1.5rem;font-size:.9rem;font-weight:700}.api-error p{margin-top:.4rem;font-weight:600}.progress-container{width:100%}.progress-label{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:700;color:var(--gray-600);margin-bottom:.4rem;gap:.5rem}.progress-complete-text{color:#16a34a;font-weight:800}.progress-percent{font-weight:800;flex-shrink:0}.progress-bar-track{height:10px;background:var(--gray-200);border-radius:99px;overflow:hidden}.progress-bar-track.thick{height:14px}.progress-bar-fill{height:100%;border-radius:99px;animation:fillBar .8s ease-out forwards}.video-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:2.5px solid transparent;transition:transform .2s ease,box-shadow .2s ease,border-color .25s}.video-card:hover{transform:scale(1.03);box-shadow:var(--shadow-lg)}.video-card.watched{border-color:#86efac}.video-embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;background:#000}.video-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.video-thumbnail{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;display:flex;align-items:center;justify-content:center}.thumbnail-img{width:100%;height:100%;object-fit:cover}.thumbnail-placeholder{width:100%;height:100%;background:var(--gray-200);display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;color:var(--gray-600);font-size:.8rem;font-weight:600}.play-button-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#00000038;transition:background .2s}.video-thumbnail:hover .play-button-overlay{background:#0000006b}.play-button{width:56px;height:56px;background:#fffffff2;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--sidebar-bg);padding-left:4px;transition:transform .2s;box-shadow:0 4px 16px #00000040}.video-thumbnail:hover .play-button{transform:scale(1.12)}.watched-badge{position:absolute;top:.6rem;right:.6rem;background:#22c55e;color:var(--white);font-size:.78rem;font-weight:800;padding:.25rem .65rem;border-radius:99px;box-shadow:0 2px 8px #0003;animation:popIn .3s ease-out}.video-info{padding:.85rem 1rem}.video-title{font-size:.9rem;font-weight:800;color:var(--gray-800);margin:0 0 .4rem;line-height:1.3}.watch-stats{display:flex;flex-direction:column;gap:.1rem;margin-bottom:.35rem}.watch-count{font-size:.78rem;font-weight:700;color:#16a34a}.watch-date{font-size:.72rem;color:var(--gray-400)}.btn-watch{border:none;padding:.55rem 1.1rem;border-radius:var(--radius-xs);font-size:.875rem;font-weight:800;font-family:Nunito,sans-serif;cursor:pointer;transition:all .2s;margin-top:.25rem}.btn-primary{background:var(--level-color, #3B82F6);color:var(--white);border:none;padding:.65rem 1.5rem;border-radius:var(--radius-sm);font-size:1rem;font-weight:800;font-family:Nunito,sans-serif;cursor:pointer;transition:filter .2s,transform .15s;width:100%}.btn-primary:hover:not(:disabled){filter:brightness(1.1)}.btn-primary:active:not(:disabled){transform:scale(.97)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-rewatch{background:var(--gray-100);color:var(--gray-600);border:2px solid var(--gray-200)}.btn-rewatch:hover{background:var(--gray-200)}.btn-watch:disabled{opacity:.5;cursor:not-allowed}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem;background:linear-gradient(135deg,#1e1b4b,#3b82f6 60%,#22c55e)}.login-card{background:var(--white);border-radius:24px;padding:2.5rem;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}.login-icon{display:block;width:110px;height:auto;margin:0 auto -.25rem}.login-logo{display:block;width:100%;max-width:360px;margin:0 auto 1.75rem}.login-subtitle{text-align:center;color:var(--gray-600);font-weight:600;margin:0 0 2rem}.login-form{display:flex;flex-direction:column;gap:1.25rem}.form-group{display:flex;flex-direction:column;gap:.4rem}.form-group label{font-weight:700;font-size:.9rem;color:var(--gray-800)}.form-group input{padding:.8rem 1rem;border:2px solid var(--gray-200);border-radius:var(--radius-sm);font-size:1rem;font-family:Nunito,sans-serif;font-weight:600;outline:none;transition:border-color .2s;color:var(--gray-800)}.form-group input:focus{border-color:#3b82f6}.form-group input:disabled{background:var(--gray-100);cursor:not-allowed}.error-message{color:#dc2626;font-size:.875rem;font-weight:700;padding:.6rem .8rem;background:#fee2e2;border-radius:var(--radius-xs)}.login-toggle{text-align:center;margin-top:1.5rem;color:var(--gray-600);font-size:.9rem;font-weight:600}.btn-link{background:none;border:none;color:#3b82f6;cursor:pointer;font-size:inherit;font-weight:800;font-family:Nunito,sans-serif;text-decoration:underline;padding:0}.btn-link:hover{color:#2563eb}@media(max-width:767px){.layout-wrapper{flex-direction:column;height:auto;overflow:visible}.sidebar{width:100%;height:auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;min-width:unset}.sidebar-header,.sidebar-footer{display:none}.sidebar-nav{flex-direction:row;padding:.5rem;gap:.4rem;flex:1}.sidebar-level-btn{min-width:130px;min-height:auto}.main-area{overflow-y:visible}.main-header{padding:1rem}.main-progress-wrap{display:none}.video-grid{padding:1rem;grid-template-columns:1fr}}