*{box-sizing:border-box}html,body{color:#f1f1f1;background:#14101f;margin:0;padding:0;font-family:Segoe UI,Roboto,Arial,sans-serif}a{color:inherit;text-decoration:none}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#14101f}::-webkit-scrollbar-thumb{background:#3a3252;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#4d4270}.channel-card{text-align:center;cursor:pointer;background:#1e1930;border:1px solid #2a2340;border-radius:12px;padding:20px 16px 16px;transition:transform .18s,background .18s,box-shadow .18s,border-color .18s;position:relative}.channel-card:hover{background:#261f3d;border-color:#e0408f66;transform:translateY(-4px);box-shadow:0 12px 28px #e0408f26}.card-rank{color:#6b5f8f;font-size:11px;font-weight:700;position:absolute;top:10px;left:12px}.category-pill{color:#cfc8e8;cursor:pointer;background:#241f38;border:1px solid #2a2340;border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;transition:background .15s}.category-pill:hover{background:#332c50}.category-pill.active{color:#fff;background:linear-gradient(135deg,#e0408f,#7c4dff);border-color:#0000}.live-badge{color:#ff6b64;letter-spacing:.5px;background:#e6211726;border-radius:4px;align-items:center;gap:5px;padding:3px 8px;font-size:11px;font-weight:700;display:inline-flex}.live-badge:before{content:"";background:#e62117;border-radius:50%;width:6px;height:6px}.sidebar-channel{cursor:pointer;border-radius:8px;align-items:center;gap:12px;padding:8px 10px;transition:background .15s;display:flex}.sidebar-channel:hover{background:#2a2340}.sidebar-channel.active{background:#2a2340;box-shadow:inset 3px 0 #e0408f}.sidebar-cat-header{justify-content:space-between;align-items:center;padding:14px 12px 8px;display:flex}.sidebar-cat-header .cat-name{letter-spacing:.6px;color:#cfc8e8;font-size:12px;font-weight:700}.sidebar-cat-header .cat-count{color:#8a7fb0;background:#2a2340;border-radius:999px;padding:2px 8px;font-size:11px}.sidebar-cat-header .cat-all{color:#b18cff;font-size:11px}.channel-num{color:#6b5f8f;text-align:right;flex-shrink:0;width:22px;font-size:12px;font-weight:700}.watch-layout{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:20px;max-width:1600px;margin:0 auto;padding:20px 24px;display:grid}@media (width<=960px){.watch-layout{grid-template-columns:1fr}}.canvas-hls-player{background:#000;border-radius:14px;width:100%;position:relative;overflow:hidden}.player-overlay{opacity:0;pointer-events:none;background:linear-gradient(#0a061459 0%,#0000 30% 78%,#0a0614bf 100%);transition:opacity .2s;position:absolute;inset:0}.canvas-hls-player:hover .player-overlay,.canvas-hls-player.paused .player-overlay{opacity:1}.player-overlay button,.player-overlay input{pointer-events:auto}.player-bottom{align-items:center;gap:14px;padding:0 18px;display:flex;position:absolute;bottom:10px;left:0;right:0}.player-bottom-spacer{flex:1}.play-btn{color:#14101f;cursor:pointer;background:#fffffff2;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:transform .15s;display:flex}.play-btn:hover{transform:scale(1.06)}.player-clock{color:#ff8f9c;font-variant-numeric:tabular-nums;font-size:14px;font-weight:600}.icon-btn{color:#fff;cursor:pointer;background:#ffffff1f;border:none;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;transition:background .15s;display:flex}.icon-btn:hover{background:#ffffff3d}.seek-btn{color:#ffffffe6;cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:4px;padding:10px;font-size:11px;font-weight:700;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.seek-btn svg{transition:transform .15s}.seek-btn:hover svg{transform:scale(1.15)}.seek-left{left:26px}.seek-right{right:26px}.player-progress{pointer-events:none;background:#ffffff2e;height:4px;position:absolute;bottom:0;left:0;right:0}.player-progress-fill{background:linear-gradient(90deg,#e0408f,#ff5a5f);border-radius:2px;height:100%}.ctrl-bar{background:#1e1930;border:1px solid #2a2340;border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:16px;padding:12px 16px;display:flex}.vol-group{align-items:center;gap:10px;display:flex}.vol-value{color:#cfc8e8;font-variant-numeric:tabular-nums;min-width:32px;font-size:13px;font-weight:700}.vol-slider{appearance:none;cursor:pointer;background:#3a3252;border-radius:3px;outline:none;width:130px;height:5px}.vol-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#e0408f;border-radius:50%;width:14px;height:14px}.vol-slider::-moz-range-thumb{cursor:pointer;background:#e0408f;border:none;border-radius:50%;width:14px;height:14px}.ctrl-btn{color:#f1f1f1;cursor:pointer;background:#2a2340;border:none;border-radius:10px;align-items:center;gap:8px;padding:9px 22px;font-size:13px;font-weight:600;transition:background .15s,transform .15s;display:inline-flex}.ctrl-btn:hover:not(:disabled){background:#3a3252;transform:translateY(-1px)}.ctrl-btn:disabled{opacity:.4;cursor:default}.ctrl-btn.accent{color:#fff;background:linear-gradient(135deg,#e0408f,#7c4dff)}.ctrl-btn.accent:hover:not(:disabled){background:linear-gradient(135deg,#ef55a3,#8f63ff)}