*{box-sizing:border-box;margin:0;padding:0}body{color:#eee;background:#1a1a2e;min-height:100vh;font-family:system-ui,-apple-system,sans-serif}#app{max-width:1100px;margin:0 auto;padding:2rem}h1{text-align:center;color:#00d4ff;margin-bottom:2rem}#video-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;display:grid}.video-card{cursor:pointer;background:#16213e;border-radius:12px;transition:transform .2s,box-shadow .2s;overflow:hidden}.video-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00d4ff26}.thumb-wrapper{aspect-ratio:16/9;position:relative;overflow:hidden}.thumb-wrapper img{object-fit:cover;width:100%;height:100%}.duration-badge{font-variant-numeric:tabular-nums;background:#000c;border-radius:4px;padding:2px 8px;font-size:.8rem;position:absolute;bottom:8px;right:8px}.card-info{padding:.75rem 1rem}.card-info h3{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.95rem;line-height:1.4;display:-webkit-box;overflow:hidden}#loading{text-align:center;color:#888;padding:2rem}#player-section{max-width:900px;margin:0 auto}#player-section.hidden,#gallery.hidden{display:none}#back-btn{color:#eee;cursor:pointer;background:0 0;border:1px solid #333;border-radius:6px;margin-bottom:1rem;padding:.5rem 1rem;font-size:.9rem}#back-btn:hover{color:#00d4ff;border-color:#00d4ff}#player-tabs{border-bottom:2px solid #333;gap:0;margin-bottom:1rem;display:flex}.tab{color:#888;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;margin-bottom:-2px;padding:.75rem 1rem;font-size:.95rem;font-weight:600;transition:color .2s,border-color .2s}.tab:hover{color:#ccc}.tab.active{color:#00d4ff;border-bottom-color:#00d4ff}.panel{display:none}.panel.active{display:block}.panel-note{color:#888;background:#16213e;border-radius:8px;margin-top:.75rem;padding:.75rem 1rem;font-size:.8rem;line-height:1.5}.panel-note code{color:#00d4ff;background:#0f3460;border-radius:4px;padding:1px 6px}.player-container{aspect-ratio:16/9;background:#000;border-radius:12px;width:100%;overflow:hidden}.player-container iframe,.player-container video{width:100%;height:100%;display:block}#custom-player-wrapper{background:#000;border-radius:12px;position:relative;overflow:hidden}#custom-player-wrapper.is-fullscreen{border-radius:0;width:100vw;height:100vh}#custom-player-wrapper.is-fullscreen .player-container{aspect-ratio:auto;border-radius:0;height:100%}#custom-overlay{z-index:5;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#custom-overlay.controls-hidden{cursor:none}#custom-big-play{color:#1a1a2e;cursor:pointer;pointer-events:all;z-index:10;background:#00d4ffe6;border:none;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;font-size:2rem;transition:transform .15s;display:flex}#custom-big-play:hover{transform:scale(1.1)}#custom-big-play.hidden{display:none}#action-indicator{z-index:15;pointer-events:none;background:#0009;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:1.2rem;animation:.3s ease-out action-pop;display:flex;position:absolute}#action-indicator.hidden{display:none}#action-indicator.fade-out{opacity:0;transition:opacity .3s}@keyframes action-pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}#buffering-indicator{z-index:12;pointer-events:none;position:absolute}#buffering-indicator.hidden{display:none}.spinner{border:4px solid #fff3;border-top-color:#00d4ff;border-radius:50%;width:48px;height:48px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.tap-zone{pointer-events:all;z-index:6;width:33.33%;position:absolute;top:0;bottom:60px}#tap-zone-left{left:0}#tap-zone-right{right:0}@media (width>=768px){.tap-zone{display:none}}#custom-controls-wrapper{z-index:10;pointer-events:all;background:linear-gradient(#0000,#000c);padding:0 12px 8px;transition:opacity .3s,transform .3s;position:absolute;bottom:0;left:0;right:0}#custom-controls-wrapper.hidden-controls{opacity:0;pointer-events:none;transform:translateY(10px)}#custom-seekbar-container{padding:8px 0;position:relative}#custom-seekbar{cursor:pointer;background:#fff3;border-radius:3px;width:100%;height:5px;transition:height .15s;position:relative;overflow:visible}#custom-seekbar:hover{height:8px}#custom-seekbar-buffered{pointer-events:none;background:#ffffff26;border-radius:3px;height:100%;position:absolute;top:0;left:0}#custom-seekbar-played{pointer-events:none;z-index:2;background:#00d4ff;border-radius:3px;height:100%;position:absolute;top:0;left:0}#custom-seekbar-hover{pointer-events:none;z-index:1;background:#ffffff1a;height:100%;position:absolute;top:0;left:0}.chapter-marker{z-index:3;pointer-events:none;background:#ffffff80;border-radius:1px;width:3px;height:100%;position:absolute;top:0}#custom-seekbar-tooltip{color:#fff;pointer-events:none;white-space:nowrap;background:#000000e6;border-radius:6px;flex-direction:column;align-items:center;gap:2px;margin-bottom:8px;padding:6px 10px;font-size:.75rem;display:flex;position:absolute;bottom:100%;transform:translate(-50%)}#custom-seekbar-tooltip.hidden{display:none}#tooltip-chapter{color:#00d4ff;font-size:.7rem}#tooltip-time{font-variant-numeric:tabular-nums;font-weight:600}#custom-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.controls-left,.controls-right{align-items:center;gap:.5rem;display:flex}#custom-controls button,.ctrl-btn{color:#eee;cursor:pointer;white-space:nowrap;background:#ffffff1a;border:none;border-radius:5px;padding:.35rem .6rem;font-size:.8rem;transition:background .15s,color .15s}#custom-controls button:hover,.ctrl-btn:hover{color:#fff;background:#ffffff40}.ctrl-btn.active{color:#1a1a2e;background:#00d4ff}.volume-group{align-items:center;gap:.3rem;display:flex}#custom-volume{accent-color:#00d4ff;cursor:pointer;width:70px}@media (width<=767px){#custom-volume{display:none}}.time-display{font-variant-numeric:tabular-nums;color:#ccc;white-space:nowrap;font-size:.8rem}.dropdown-wrapper{position:relative}.dropdown-wrapper.hidden{display:none}.dropdown{z-index:50;background:#1a1a2e;border:1px solid #333;border-radius:8px;min-width:200px;max-height:300px;margin-bottom:8px;padding:4px 0;position:absolute;bottom:100%;right:0;overflow-y:auto}.dropdown.hidden{display:none}.chapter-item{cursor:pointer;padding:8px 12px;font-size:.8rem;transition:background .1s}.chapter-item:hover{background:#ffffff1a}.chapter-item.active{color:#00d4ff;background:#00d4ff26}.chapter-time{color:#00d4ff;font-variant-numeric:tabular-nums;margin-right:8px;font-weight:600}.sub-item{cursor:pointer;padding:8px 12px;font-size:.8rem;transition:background .1s}.sub-item:hover{background:#ffffff1a}.sub-item.active{color:#00d4ff}.setting-row{cursor:pointer;justify-content:space-between;padding:10px 14px;font-size:.85rem;transition:background .1s;display:flex}.setting-row:hover{background:#ffffff1a}.settings-sub.hidden{display:none}.sub-back{cursor:pointer;color:#00d4ff;border-bottom:1px solid #333;padding:10px 14px;font-size:.85rem}.sub-back:hover{background:#00d4ff1a}.setting-option{cursor:pointer;padding:8px 14px;font-size:.8rem;transition:background .1s}.setting-option:hover{background:#ffffff1a}.setting-option.active{color:#00d4ff}#custom-chapters{margin-top:1rem}#custom-chapters.hidden{display:none}#custom-chapters h3{color:#00d4ff;margin-bottom:.5rem;font-size:.95rem}#custom-chapters ul{list-style:none}.chapter-item-below{cursor:pointer;border-radius:6px;padding:.5rem .75rem;font-size:.85rem;transition:background .15s}.chapter-item-below:hover{background:#16213e}.chapter-item-below.active{color:#00d4ff;background:#00d4ff1a}#video-title{margin-top:1.5rem;margin-bottom:.5rem;font-size:1.3rem}#video-description{color:#999;font-size:.9rem;line-height:1.5}.error{color:#ff6b6b;text-align:center;padding:2rem}@media (width<=600px){#app{padding:1rem}#video-grid{grid-template-columns:1fr}.controls-right{gap:.3rem}#chapters-label{display:none}.time-display{font-size:.7rem}}