:root{--color-bg:#07080b;--color-surface-base:#0f111a;--color-surface-card:#121623b3;--color-surface-hover:#1c2135e6;--color-border:#ffffff14;--color-border-hover:#ffffff26;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--text-muted:#6b7280;--belt-white-color:#fff;--belt-white-glow:#ffffff4d;--belt-white-bg:#ffffff0f;--belt-yellow-color:#fbbf24;--belt-yellow-glow:#fbbf244d;--belt-yellow-bg:#fbbf240f;--belt-orange-blue-color:#3b82f6;--belt-orange-blue-glow:#3b82f64d;--belt-orange-blue-bg:#3b82f60f;--belt-purple-brown-color:#a855f7;--belt-purple-brown-glow:#a855f74d;--belt-purple-brown-bg:#a855f70f;--belt-brown-color:#b45309;--belt-brown-glow:#b453094d;--belt-brown-bg:#b453090f;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-heading:"Outfit", var(--font-sans);--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1);--shadow-premium:0 10px 30px -10px #000000b3;--shadow-glow:0 0 15px #fbbf2426}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;background-image:radial-gradient(at 0 0,#141b2d80 0,#0000 50%),radial-gradient(at 100% 100%,#0a0f1c99 0,#0000 50%);min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}.app-layout{flex-direction:column;min-height:100vh;display:flex}.app-container{width:100%;max-width:1400px;margin:0 auto;padding:2rem}@media (width<=768px){.app-container{padding:1.25rem}}.app-header{z-index:100;transition:var(--transition-smooth);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#07080b80;position:sticky;top:0}.app-header.scrolled{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--color-border);background:#0f111ae6;box-shadow:0 4px 30px #0006}.header-container{justify-content:space-between;align-items:center;gap:1.5rem;max-width:1400px;margin:0 auto;padding:1rem 2rem;display:flex}@media (width<=768px){.header-container{flex-direction:column;gap:1rem;padding:1rem}}.brand-logo{align-items:center;gap:.75rem;text-decoration:none;display:flex}.brand-icon{background:linear-gradient(135deg, var(--belt-yellow-color), #d97706);border-radius:12px;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;display:flex;box-shadow:0 4px 15px #fbbf244d}.brand-icon svg{color:#07080b;width:1.5rem;height:1.5rem}.brand-text h1{font-family:var(--font-heading);letter-spacing:.05em;color:#fff;font-size:1.25rem;font-weight:800;line-height:1.2}.brand-text p{color:var(--text-secondary);font-size:.75rem}.header-actions{align-items:center;gap:.75rem;width:100%;max-width:450px;display:flex}@media (width<=768px){.header-actions{max-width:100%}}.search-bar{flex-grow:1;position:relative}.search-icon{color:var(--text-muted);width:1rem;height:1rem;position:absolute;top:50%;left:.85rem;transform:translateY(-50%)}.search-clear{color:var(--text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;right:.85rem;transform:translateY(-50%)}.search-clear:hover{color:#fff}.search-input{border:1px solid var(--color-border);width:100%;color:var(--text-primary);font-size:.875rem;font-family:var(--font-sans);transition:var(--transition-smooth);background:#ffffff08;border-radius:12px;padding:.65rem 2.25rem}.search-input:focus{background:#ffffff12;border-color:#fff3;outline:none}.btn-reset{color:#f87171;cursor:pointer;transition:var(--transition-smooth);white-space:nowrap;background:#ef44440d;border:1px solid #ef444426;border-radius:12px;align-items:center;gap:.4rem;padding:.65rem 1rem;font-size:.8rem;font-weight:600;display:flex}.btn-reset:hover{background:#ef444426;border-color:#ef44444d}.hero-banner{background:var(--color-surface-base);border:1px solid var(--color-border);box-shadow:var(--shadow-premium);border-radius:24px;margin-bottom:2rem;position:relative;overflow:hidden}.hero-bg{opacity:.45;filter:brightness(.85);background-position:50% 30%;background-size:cover;position:absolute;inset:0}.hero-overlay{background:linear-gradient(90deg,#07080b 20%,#07080be6 60%,#0000 100%);position:absolute;inset:0}@media (width<=1024px){.hero-overlay{background:linear-gradient(#0000 0%,#07080bf2 25%,#07080b 70%)}}.hero-content-wrapper{z-index:10;justify-content:space-between;align-items:center;gap:3rem;padding:3rem;display:flex;position:relative}@media (width<=1024px){.hero-content-wrapper{text-align:center;flex-direction:column;align-items:stretch;gap:2rem;padding:2rem 1.5rem}}.hero-text{flex-direction:column;gap:1rem;max-width:600px;display:flex}.hero-badge{color:var(--belt-yellow-color);text-transform:uppercase;letter-spacing:.05em;background:#fbbf2414;border:1px solid #fbbf2433;border-radius:50px;align-self:flex-start;align-items:center;gap:.4rem;padding:.35rem .85rem;font-size:.75rem;font-weight:700;display:flex}@media (width<=1024px){.hero-badge{align-self:center}}.hero-text h2{font-family:var(--font-heading);letter-spacing:-.02em;color:#fff;font-size:2.75rem;font-weight:900;line-height:1.15}@media (width<=768px){.hero-text h2{font-size:2rem}}.hero-gradient-text{background:linear-gradient(135deg, var(--belt-yellow-color), #fff);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.hero-description{color:var(--text-secondary);font-size:.95rem;line-height:1.6}.hero-stats-panel{border:1px solid var(--color-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#07080ba6;border-radius:20px;align-items:center;gap:1.5rem;padding:1.5rem;display:flex}@media (width<=1024px){.hero-stats-panel{justify-content:center}}@media (width<=500px){.hero-stats-panel{flex-direction:column;padding:1.5rem 1rem}}.progress-ring-container{justify-content:center;align-items:center;width:90px;height:90px;display:flex;position:relative}.progress-ring-svg{width:90px;height:90px;transform:rotate(-90deg)}.progress-ring-bg{stroke:#ffffff0a}.progress-ring-bar{stroke:var(--belt-yellow-color);filter:drop-shadow(0 0 4px #fbbf244d);transition:stroke-dashoffset .6s ease-out}.progress-percentage{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute}.progress-number{font-size:1.25rem;font-family:var(--font-heading);color:#fff;font-weight:800}.progress-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);font-size:.55rem}.stats-grid{flex-direction:column;gap:.35rem;display:flex}.stats-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.2rem;font-size:.7rem;font-weight:700}.stats-row{justify-content:space-between;gap:1.5rem;font-size:.8rem;display:flex}.stats-row-label{color:var(--text-secondary)}.stats-row-value{color:#fff;font-weight:700}.stats-row-value.highlight{color:#10b981}.filters-section{flex-direction:column;gap:1.25rem;display:flex}.filter-group-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);align-items:center;gap:.4rem;font-size:.75rem;font-weight:700;display:flex}.belt-filters-list{flex-wrap:wrap;gap:.6rem;display:flex}.belt-btn{background:var(--color-surface-card);border:1px solid var(--color-border);font-size:.75rem;font-weight:600;font-family:var(--font-sans);color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);border-radius:12px;align-items:center;gap:.5rem;padding:.65rem 1rem;display:flex}.belt-btn:hover{border-color:var(--color-border-hover);color:#fff;background:#ffffff08}.belt-btn.active{color:#fff;box-shadow:0 4px 15px #0000004d}.belt-dot{border-radius:50%;width:.5rem;height:.5rem}.belt-pct{border-radius:50px;padding:.15rem .4rem;font-size:.65rem;font-weight:700}.filter-options-row{border-top:1px solid var(--color-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.25rem;display:flex}.category-pills{flex-wrap:wrap;gap:.4rem;display:flex}.category-pill{border:1px solid var(--color-border);color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);background:#ffffff05;border-radius:8px;padding:.4rem .85rem;font-size:.75rem}.category-pill:hover{color:#fff;border-color:var(--color-border-hover)}.category-pill.active{color:#07080b;background:#fff;border-color:#fff;font-weight:600}.checkbox-filters{align-items:center;gap:1.25rem;display:flex}.checkbox-label{color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.5rem;font-size:.75rem;display:flex}.checkbox-label:hover{color:#fff}.checkbox-custom{width:1rem;height:1rem;transition:var(--transition-smooth);border:1px solid #fff3;border-radius:4px;justify-content:center;align-items:center;display:flex}.checkbox-label input{display:none}.checkbox-label.active .checkbox-custom{background:var(--belt-yellow-color);border-color:var(--belt-yellow-color);color:#07080b}.checkbox-label.active.incomplete .checkbox-custom{color:#07080b;background:#10b981;border-color:#10b981}.checkbox-label.active{color:#fff}.belt-section{flex-direction:column;gap:1rem;margin-bottom:2.5rem;display:flex}.belt-section-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.65rem;display:flex}@media (width<=550px){.belt-section-header{flex-direction:column;align-items:flex-start;gap:.5rem}}.belt-section-title-wrapper{align-items:center;gap:.65rem;display:flex}.belt-section-indicator{border-radius:50%;width:.75rem;height:.75rem}.belt-section-title{font-family:var(--font-heading);text-transform:uppercase;color:#fff;letter-spacing:.02em;font-size:1.25rem;font-weight:800}.belt-section-stats{align-items:center;gap:.5rem;font-size:.75rem;display:flex}.belt-stats-badge{border:1px solid var(--color-border);color:var(--text-secondary);background:#ffffff05;border-radius:4px;padding:.2rem .5rem;font-weight:600}.belt-stats-pct{font-weight:800}.video-grid{grid-template-columns:repeat(4,1fr);gap:1.25rem;display:grid}@media (width<=1200px){.video-grid{grid-template-columns:repeat(3,1fr)}}@media (width<=900px){.video-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=550px){.video-grid{grid-template-columns:1fr}}.video-card{background:var(--color-surface-card);border:1px solid var(--color-border);cursor:pointer;height:100%;transition:var(--transition-smooth);border-radius:16px;flex-direction:column;display:flex;overflow:hidden}.video-card:hover{background:var(--color-surface-hover);box-shadow:0 10px 20px -5px #00000080, 0 0 15px var(--hover-glow);border-color:#ffffff26;transform:translateY(-4px)}.video-card.completed{border-color:#10b98140;box-shadow:0 4px 15px -3px #10b9810d}.card-thumbnail-wrapper{aspect-ratio:16/9;background:#000;width:100%;position:relative;overflow:hidden}.card-thumbnail-img{object-cover:cover;object-position:center;width:100%;height:100%;transition:transform .5s}.video-card:hover .card-thumbnail-img{transform:scale(1.04)}.card-play-overlay{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);opacity:0;background:#00000073;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:absolute;inset:0}.video-card:hover .card-play-overlay{opacity:1}.card-play-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;width:2.75rem;height:2.75rem;transition:var(--transition-smooth);background:#ffffff26;border:1px solid #ffffff40;border-radius:50%;justify-content:center;align-items:center;display:flex;transform:scale(.9)}.video-card:hover .card-play-btn{transform:scale(1)}.card-play-btn svg{fill:currentColor;width:1.15rem;height:1.15rem;margin-left:2px}.card-top-action{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);width:2rem;height:2rem;color:var(--text-muted);cursor:pointer;z-index:5;transition:var(--transition-smooth);background:#07080bb3;border:1px solid #ffffff0d;border-radius:8px;justify-content:center;align-items:center;display:flex;position:absolute;top:.65rem;right:.65rem}.card-top-action:hover{color:#fff;background:#07080b}.card-top-action.active{color:var(--belt-yellow-color)}.card-top-action svg{width:.95rem;height:.95rem}.card-top-action.active svg{fill:currentColor}.card-completed-badge{color:#07080b;z-index:5;background:#10b981;border-radius:6px;align-items:center;gap:.25rem;padding:.2rem .5rem;font-size:.65rem;font-weight:800;display:flex;position:absolute;top:.65rem;left:.65rem;box-shadow:0 4px 10px #0006}.card-completed-badge svg{fill:currentColor;width:.8rem;height:.8rem}.card-drill-badge{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--text-primary);z-index:5;background:#07080bcc;border:1px solid #ffffff1a;border-radius:4px;padding:.15rem .45rem;font-size:.65rem;font-weight:700;position:absolute;bottom:.65rem;left:.65rem}.card-body{flex-direction:column;flex-grow:1;justify-content:space-between;gap:.75rem;padding:1rem;display:flex}.card-category-row{text-transform:uppercase;letter-spacing:.05em;justify-content:space-between;align-items:center;font-size:.65rem;font-weight:700;display:flex}.card-category{color:var(--text-muted)}.card-belt-tag{border-radius:2px;padding:.1rem .35rem}.card-title{color:#e5e7eb;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.85rem;font-weight:700;line-height:1.35;transition:color .2s;display:-webkit-box;overflow:hidden}.video-card:hover .card-title{color:#fff}.card-footer{border-top:1px solid #ffffff0a;justify-content:space-between;align-items:center;margin-top:auto;padding-top:.75rem;display:flex}.card-todo-toggle{color:var(--text-muted);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;border-radius:6px;align-items:center;gap:.35rem;padding:.25rem .5rem;font-size:.7rem;font-weight:600;display:flex}.card-todo-toggle:hover{color:#fff;background:#ffffff0a}.card-todo-toggle.completed{color:#34d399}.card-todo-toggle.completed svg{color:#34d399;fill:#34d39914}.card-todo-toggle svg{width:.95rem;height:.95rem}.card-action-trigger{color:var(--belt-yellow-color);transition:var(--transition-smooth);align-items:center;gap:.25rem;font-size:.7rem;font-weight:700;display:flex}.video-card:hover .card-action-trigger{color:#ffe082;transform:translate(2px)}.card-action-trigger svg{fill:currentColor;width:.65rem;height:.65rem}.empty-state{text-align:center;background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:20px;max-width:500px;margin:2rem auto;padding:4rem 2rem}.empty-state svg{width:3rem;height:3rem;color:var(--text-muted);margin-bottom:1rem}.empty-state h4{color:#fff;margin-bottom:.5rem;font-size:1.15rem;font-weight:700}.empty-state p{color:var(--text-secondary);margin-bottom:1.5rem;font-size:.85rem}.empty-state-btn{background:var(--belt-yellow-color);color:#07080b;cursor:pointer;transition:var(--transition-smooth);border:none;border-radius:10px;padding:.6rem 1.2rem;font-size:.75rem;font-weight:700}.empty-state-btn:hover{background:#ffe082}.video-modal{background:0 0;border:none;border-radius:20px;outline:none;width:92%;max-width:900px;margin:auto;overflow:hidden;box-shadow:0 25px 50px -12px #000000d9}.modal-content{background:#090b11;border:1px solid #ffffff1a;border-radius:20px;flex-direction:column;width:100%;display:flex;overflow:hidden}.modal-header{background:#ffffff05;border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;display:flex}.modal-title-area{flex-direction:column;gap:.35rem;display:flex}.modal-badge{text-transform:uppercase;letter-spacing:.05em;color:var(--belt-yellow-color);background:#fbbf2414;border:1px solid #fbbf2433;border-radius:4px;align-self:flex-start;padding:.15rem .45rem;font-size:.6rem;font-weight:800}.modal-title{font-family:var(--font-heading);color:#fff;font-size:1.1rem;font-weight:700;line-height:1.3}.modal-close-btn{width:2rem;height:2rem;color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);background:#ffffff0a;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.modal-close-btn:hover{color:#fff;background:#ffffff1f}.modal-video-frame{aspect-ratio:16/9;background:#000;width:100%;position:relative}.modal-video-frame iframe{border:none;width:100%;height:100%;position:absolute;inset:0}.modal-footer{background:#07080be6;border-top:1px solid #ffffff0d;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem;display:flex}.playlist-nav{align-items:center;gap:.5rem;display:flex}.btn-nav{color:#fff;cursor:pointer;width:2.25rem;height:2.25rem;transition:var(--transition-smooth);background:#ffffff08;border:1px solid #ffffff0d;border-radius:8px;justify-content:center;align-items:center;display:flex}.btn-nav:hover{background:#ffffff14;border-color:#ffffff26}.btn-nav:disabled{color:var(--text-muted);cursor:not-allowed;background:0 0;border-color:#ffffff05}.playlist-count{color:var(--text-secondary);font-size:.75rem;font-family:var(--font-sans)}.modal-actions{align-items:center;gap:.75rem;display:flex}.modal-btn-bookmark{color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);background:#ffffff08;border:1px solid #ffffff0d;border-radius:10px;align-items:center;gap:.35rem;padding:.5rem .85rem;font-size:.75rem;font-weight:600;display:flex}.modal-btn-bookmark:hover{color:#fff;background:#ffffff14}.modal-btn-bookmark.active{color:var(--belt-yellow-color);background:#fbbf240f;border-color:#fbbf2440}.modal-btn-bookmark svg{width:.95rem;height:.95rem}.modal-btn-bookmark.active svg{fill:currentColor}.modal-btn-complete{background:var(--belt-yellow-color);color:#07080b;cursor:pointer;transition:var(--transition-smooth);border:none;border-radius:10px;align-items:center;gap:.35rem;padding:.5rem 1rem;font-size:.75rem;font-weight:800;display:flex}.modal-btn-complete:hover{background:#ffe082}.modal-btn-complete.completed{background:#10b981}.modal-btn-complete svg{width:.95rem;height:.95rem}.app-footer{border-top:1px solid var(--color-border);background:#0f111a99;margin-top:auto;padding:1.5rem 2rem}.footer-container{max-width:1400px;color:var(--text-muted);justify-content:space-between;align-items:center;gap:1rem;margin:0 auto;font-size:.75rem;display:flex}@media (width<=550px){.footer-container{text-align:center;flex-direction:column;gap:.5rem}}.footer-brand{color:var(--text-secondary);align-items:center;gap:.5rem;font-weight:600;display:flex}