:root{--bg-dark: #05060f;--card-bg: rgba(255, 255, 255, .05);--accent: #6366f1;--accent-glow: rgba(99, 102, 241, .3);--text-primary: #f8fafc;--text-secondary: #94a3b8;--glass-border: rgba(255, 255, 255, .1);--transition: all .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Outfit,sans-serif;background-color:var(--bg-dark);color:var(--text-primary);min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at top right,#1e1b4b,transparent),radial-gradient(circle at bottom left,#0f172a,var(--bg-dark))}#app{display:flex;flex-direction:column;height:100vh}.glass-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:#ffffff08;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--glass-border);z-index:100}.header-left{display:flex;align-items:center;gap:.8rem}.hamburger-btn{background:var(--card-bg);border:1px solid var(--glass-border);color:#fff;width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.hamburger-btn:hover{background:var(--accent);transform:scale(1.1)}#nav-overlay{display:none;position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:200;opacity:0;transition:opacity .3s ease}#nav-overlay.visible{display:block;opacity:1}#side-nav{position:fixed;top:0;left:0;height:100%;width:260px;background:#0a0a1ef2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--glass-border);z-index:300;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:2rem;transform:translate(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 30px #00000080}#side-nav.open{transform:translate(0)}.sidebar-close{align-self:flex-end;background:transparent;border:1px solid var(--glass-border);color:var(--text-secondary);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:1rem;transition:var(--transition)}.sidebar-close:hover{background:var(--accent);color:#fff;border-color:var(--accent)}.sidebar-logo img{height:36px;object-fit:contain}.sidebar-links{list-style:none;display:flex;flex-direction:column;gap:.5rem}.sidebar-link{display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;border-radius:12px;color:var(--text-secondary);text-decoration:none;font-size:.95rem;font-weight:500;transition:var(--transition)}.sidebar-link:hover{background:#6366f126;color:#fff}.sidebar-link.active{background:#6366f133;color:#fff;border:1px solid rgba(99,102,241,.4)}.logo{display:flex;align-items:center}#app-logo{height:56px;object-fit:contain}.search-container{display:flex;flex-direction:column;gap:.5rem;flex:0 1 500px;position:relative}.search-bar{display:flex;gap:.5rem;width:100%}.filter-btn{background:var(--card-bg);border:1px solid var(--glass-border);color:var(--text-secondary);padding:.6rem .9rem;border-radius:12px;cursor:pointer;font-size:.85rem;white-space:nowrap;transition:var(--transition);font-family:inherit}.filter-btn:hover,.filter-btn.active{background:#6366f133;border-color:var(--accent);color:#fff}.filter-panel{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#0a0a1ef7;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:16px;padding:1rem;z-index:1001;box-shadow:0 8px 32px #00000080}.filter-panel.hidden{display:none}.filter-title{font-size:.85rem;font-weight:600;color:var(--text-secondary);margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.05em}.filter-levels{display:flex;flex-wrap:wrap;gap:.5rem}.filter-chip{background:var(--card-bg);border:1px solid var(--glass-border);color:var(--text-secondary);padding:.4rem .85rem;border-radius:50px;cursor:pointer;font-size:.82rem;font-family:inherit;transition:var(--transition);white-space:nowrap}.filter-chip:hover{background:#6366f126;color:#fff;border-color:#6366f180}.filter-chip.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.filter-chip.sub{font-size:.78rem;padding:.3rem .7rem}.subfilter{margin-top:.3rem;padding-top:.6rem;border-top:1px solid var(--glass-border)}.subfilter.hidden{display:none}.alpha-badge{position:fixed;bottom:1rem;right:1rem;background:#6366f126;border:1px solid rgba(99,102,241,.35);color:var(--accent);padding:.3rem .75rem;border-radius:50px;font-size:.75rem;font-weight:600;letter-spacing:.05em;z-index:9999;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 12px #6366f133}#search-results-menu{position:absolute;top:100%;left:0;right:0;margin-top:10px;z-index:1000;padding:.5rem;display:flex;flex-direction:column;gap:5px}#search-results-menu.hidden{display:none}.search-result-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;cursor:pointer;transition:var(--transition)}.search-result-item:hover{background:#ffffff1a;transform:translate(5px)}.result-thumb{width:80px;height:45px;border-radius:8px;object-fit:cover}.result-info{flex:1;overflow:hidden}.result-title{font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-channel{font-size:.75rem;color:var(--text-secondary)}.search-container input{flex:1;background:var(--card-bg);border:1px solid var(--glass-border);padding:.6rem 1rem;border-radius:12px;color:#fff;outline:none;transition:var(--transition)}.search-container input:focus{border-color:var(--accent);box-shadow:0 0 15px var(--accent-glow)}.search-container button{background:var(--accent);color:#fff;border:none;padding:.6rem 1.2rem;border-radius:12px;cursor:pointer;font-weight:600;transition:var(--transition)}.search-container button:hover{transform:translateY(-2px);box-shadow:0 5px 15px var(--accent-glow)}.content{display:grid;grid-template-columns:1fr 350px;gap:1.5rem;padding:1.5rem;flex:1;overflow:hidden}.player-section{display:flex;flex-direction:column}.glass-card{background:var(--card-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:24px;padding:1rem;box-shadow:0 8px 32px #0000005e}#player-container{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}#youtube-player{width:100%;height:100%;border-radius:16px;display:none}.placeholder-content{text-align:center;color:var(--text-secondary)}.tutorial-steps{display:flex;gap:2rem;margin-top:2rem}.tutorial-steps span{background:var(--card-bg);padding:.5rem 1rem;border-radius:50px;font-size:.9rem}.sidebar{display:flex;flex-direction:column;gap:1.5rem}.timer-card{text-align:center;padding:1.5rem}.timer-display{font-size:3.5rem;font-weight:600;margin:1rem 0;color:var(--accent);text-shadow:0 0 20px var(--accent-glow)}.timer-duration{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1rem}.timer-duration label{font-size:.85rem;color:var(--text-secondary)}.timer-duration input{width:60px;background:var(--card-bg);border:1px solid var(--glass-border);border-radius:8px;color:#fff;text-align:center;font-size:.95rem;padding:.3rem .4rem;outline:none;font-family:inherit;transition:var(--transition)}.timer-duration input:focus{border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.timer-controls{display:flex;gap:1rem;justify-content:center}.primary-btn,.secondary-btn{padding:.8rem 1.5rem;border-radius:12px;cursor:pointer;font-weight:600;transition:var(--transition)}.primary-btn{background:var(--accent);color:#fff;border:none}.secondary-btn{background:transparent;border:1px solid var(--glass-border);color:#fff}.notes-card{flex:1;display:flex;flex-direction:column;padding:1.5rem}.notes-card textarea{flex:1;background:transparent;border:none;color:var(--text-primary);resize:none;margin-top:1rem;outline:none;line-height:1.6;font-family:inherit}body.focus-mode .glass-header,body.focus-mode .glass-footer{display:none}body.focus-mode .content{grid-template-columns:1fr;padding:0}body.focus-mode .sidebar{position:fixed;right:20px;bottom:20px;width:300px;height:auto;max-height:80vh;z-index:1000;opacity:.1;transition:opacity .5s}body.focus-mode .sidebar:hover{opacity:1}.icon-btn{background:var(--card-bg);border:1px solid var(--glass-border);color:#fff;width:40px;height:40px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}.icon-btn:hover{background:var(--accent);transform:scale(1.1)}.glass-footer{padding:1.5rem;text-align:center;font-size:.8rem;color:var(--text-secondary)}@media(min-width:640px)and (max-width:1024px){.content{grid-template-columns:1fr;overflow-y:auto}.sidebar{height:auto;flex-direction:row;flex-wrap:wrap;gap:1rem}.timer-card,.notes-card{flex:1 1 280px;min-width:0}.notes-card textarea{height:120px}.hero-title{font-size:2.8rem!important}.timeline-section{padding:2rem 1.5rem!important}}@media(max-width:639px){.glass-header{padding:.75rem 1rem;gap:.5rem}.header-left{gap:.5rem}#app-logo{height:40px}.search-container{flex:1}#video-input{font-size:.85rem;padding:.5rem .75rem}.search-container button{padding:.5rem .8rem;font-size:.85rem}#search-results-menu{left:-10px;right:-10px}#side-nav{width:85%}.content{grid-template-columns:1fr;padding:.75rem;gap:.75rem;overflow-y:auto}#player-container{aspect-ratio:16 / 9;height:auto;min-height:0}#youtube-player{width:100%;height:100%}.placeholder-content p{font-size:.85rem}.tutorial-steps{flex-direction:column;gap:.5rem;align-items:center;margin-top:1rem}.sidebar{height:auto;gap:.75rem}.timer-card{padding:1rem}.timer-display{font-size:2.5rem;margin:.5rem 0}.timer-duration{gap:.4rem;margin-bottom:.75rem}.timer-duration input{width:50px;font-size:.85rem}.timer-controls{gap:.5rem}.primary-btn,.secondary-btn{padding:.6rem 1rem;font-size:.85rem}.notes-card{padding:1rem}.notes-card textarea{height:120px}body.focus-mode .sidebar{width:90%;right:5%;left:5%;bottom:10px}.landing-hero{height:auto!important;padding:3rem 1.5rem!important}.hero-title{font-size:2.2rem!important;line-height:1.2}.hero-subtitle{font-size:1rem!important}.start-btn{padding:.8rem 2rem!important;font-size:.95rem}.timeline-section{padding:2rem 1rem!important}.timeline-container{padding-left:2rem}.timeline-content{padding:1rem}.glass-footer{font-size:.75rem;padding:1rem}}