/* ===== Main Styles (layout, components, theme) ===== */

<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html,body{height:100%;height:100dvh}

/* ── Header / Logo ── */
.logo{display:flex;align-items:center;gap:7px;font-size:.9rem;font-weight:700;text-decoration:none;color:inherit}
.logo:hover .logo-mark{transform:scale(1.12) rotate(-4deg);box-shadow:0 4px 18px rgba(192,132,252,.6),0 0 0 3px rgba(168,85,247,.18)}

.logo-text{background:linear-gradient(90deg,#ede9fe 0%,#c084fc 40%,#f5d0fe 65%,#ede9fe 100%);background-size:250% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:logo-shimmer 5s linear infinite}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.hdr-count.updated{animation:icon-pop .4s cubic-bezier(.34,1.4,.64,1) both}
.hdr-btn{display:flex;align-items:center;gap:4px;border:1px solid;font-size:10px;font-weight:600;padding:4px 9px;border-radius:6px;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .12s cubic-bezier(.34,1.4,.64,1);white-space:nowrap;line-height:1;text-decoration:none}
.hdr-btn:active{transform:scale(.91)}
.cb-text{display:inline}

.hdr-btn.purple{background:rgba(124,58,237,.18);border-color:rgba(124,58,237,.4);color:var(--accent2)}
.hdr-btn.purple:hover{background:rgba(124,58,237,.32);border-color:var(--accent2)}
.hdr-btn.green{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.4);color:#4ade80}
.hdr-btn.green:hover{background:rgba(34,197,94,.28);border-color:#4ade80}
.hdr-btn.teal{background:rgba(20,184,166,.14);border-color:rgba(20,184,166,.4);color:#2dd4bf}
.hdr-btn.teal:hover{background:rgba(20,184,166,.28);border-color:#2dd4bf}
.icon-btn{display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--border);color:var(--muted);font-size:13px;width:32px;height:32px;border-radius:7px;cursor:pointer;transition:color .18s ease,border-color .2s ease,background .18s ease,transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s;flex-shrink:0}
.icon-btn svg{width:15px;height:15px;pointer-events:none;transition:transform .22s cubic-bezier(.34,1.4,.64,1),filter .18s}
.icon-btn:hover{color:var(--accent2);border-color:rgba(168,85,247,.5);background:rgba(124,58,237,.12);box-shadow:0 0 0 3px rgba(124,58,237,.1),0 2px 10px rgba(124,58,237,.15);transform:translateY(-1px)}
.icon-btn:hover svg{transform:scale(1.18);filter:drop-shadow(0 0 4px rgba(168,85,247,.5))}
.icon-btn:active{transform:scale(.86);box-shadow:none}
.icon-btn:active svg{animation:icon-pop .3s cubic-bezier(.34,1.4,.64,1) both}
.hidden{display:none !important}
.ic{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}
.ic svg{display:block}
.mob-only{display:none !important}
.mob-icon-btn{display:none}

.mob-search-btn{display:none;align-items:center;justify-content:center;background:rgba(124,58,237,.18);border:1px solid rgba(124,58,237,.4);color:var(--accent2);font-size:14px;width:32px;height:32px;border-radius:6px;cursor:pointer;transition:background .15s,border-color .15s;flex-shrink:0}
.mob-search-btn:active{transform:scale(.93)}

.mob-search-overlay{display:none;position:fixed;top:0;left:0;right:0;z-index:500;background:var(--surface);border-bottom:1px solid var(--border);padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top));gap:8px;align-items:center}
.mob-search-overlay.open{display:flex;animation:popup-in-top .2s cubic-bezier(.34,1.2,.64,1) both}
.mob-search-input{flex:1;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:7px 10px;color:var(--text);font-size:13px;outline:none;transition:border-color .18s}
.mob-search-input:focus{border-color:var(--accent)}
.mob-search-input::placeholder{color:var(--muted)}
.mob-search-close{display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--muted);padding:4px;cursor:pointer;line-height:1;flex-shrink:0;transition:color .15s}
.mob-search-close:hover{color:var(--text)}
.mob-search-close svg{pointer-events:none}
/* ── Modals ── */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .25s cubic-bezier(.4,0,.2,1),visibility .25s;pointer-events:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-backdrop.open .modal-box{transform:scale(1) translateY(0);opacity:1}
.modal-backdrop:not(.open) .modal-box{will-change:auto}
.modal-box h3{font-size:14px;font-weight:700;margin-bottom:6px;color:#fff}
.modal-hint{font-size:10px;color:var(--muted);margin-bottom:12px;line-height:1.7}
.modal-box input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:9px 12px;color:var(--text);font-size:13px;outline:none;margin-bottom:10px;transition:border-color .18s,background .18s}
.modal-box input:focus{border-color:var(--accent);background:rgba(124,58,237,.06)}
.modal-box input::placeholder{color:var(--muted)}
.modal-footer{display:flex;gap:8px;justify-content:flex-end}
.btn-cancel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--muted);font-size:12px;padding:7px 16px;border-radius:8px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.btn-cancel:hover{color:var(--text);border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.1)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;font-size:12px;font-weight:600;padding:7px 16px;border-radius:8px;cursor:pointer;transition:opacity .15s,transform .1s;box-shadow:0 2px 10px rgba(124,58,237,.3)}
.btn-primary:hover{opacity:.9}
.btn-primary:active{transform:scale(.96)}
.sleep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px}
.sleep-opt{background:var(--card);border:1px solid var(--border);color:var(--muted);font-size:12px;font-weight:600;padding:9px 6px;border-radius:8px;cursor:pointer;transition:color .15s,border-color .15s,background .15s;text-align:center;line-height:1.3;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.sleep-opt:hover{border-color:var(--accent);color:var(--accent2)}
.sleep-opt:active{transform:scale(.95)}
.sleep-opt.active{background:rgba(124,58,237,.2);border-color:var(--accent2);color:#fff}
.sleep-custom-row{display:flex;gap:7px;align-items:center;margin-bottom:14px}
.sleep-custom-row input{margin-bottom:0;flex:1;min-width:0}
.sleep-custom-row .btn-primary{white-space:nowrap;padding:7px 12px;flex-shrink:0}

.sleep-indicator{display:none;align-items:center;gap:5px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35);color:#fbbf24;font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;cursor:pointer;flex-shrink:0;transition:background .15s;max-width:100px;overflow:hidden;white-space:nowrap}
.sleep-indicator.show{display:flex}
.sleep-indicator:hover{background:rgba(251,191,36,.2)}
/* ── Layout ── */
.root{display:flex;flex-direction:column;height:100%;height:100dvh}
.body-wrap{display:flex;flex:1;overflow:hidden;min-height:0}
.player-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:var(--bg)}
/* ── Player ── */
.player-outer{flex-shrink:0;display:flex;justify-content:center;align-items:flex-start;padding:10px 10px 0;background:var(--bg)}
.theater-mode .player-outer{padding:0 !important}
.theater-mode .player-wrapper{max-height:72vh !important;max-width:100% !important;border-radius:0 !important}
.player-wrapper video{width:100%;height:100%;display:block;background:#000;transition:opacity .2s ease;transform:translateZ(0)}
.player-wrapper.fit-contain video{object-fit:contain}
.player-wrapper.fit-cover video{object-fit:cover}
.player-wrapper.fit-fill video{object-fit:fill}
.audio-overlay{position:absolute;inset:0;background:linear-gradient(160deg,#0d0d1a,#1a0a2e);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:5}
.audio-overlay.show{display:flex}
.audio-icon{font-size:48px;opacity:.7}
.audio-title{font-size:13px;font-weight:600;color:#ddddf0;max-width:240px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-bars{display:flex;align-items:flex-end;gap:3px;height:36px}
.audio-bars span{width:4px;background:var(--accent2);border-radius:2px;animation:bar-dance var(--d,.6s) ease-in-out infinite alternate;height:var(--h,50%)}
.buf-badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.75);font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.4px;opacity:0;z-index:6;pointer-events:none;white-space:nowrap;transform:translateY(-4px) scale(.92);transition:opacity .25s,transform .25s cubic-bezier(.34,1.4,.64,1)}
.buf-badge.show{opacity:1;transform:translateY(0) scale(1)}
.resize-handle{height:5px;background:var(--border);cursor:ns-resize;flex-shrink:0;transition:background .15s;z-index:50}
.resize-handle:hover,.resize-handle.dragging{background:var(--accent)}
.player-wrapper:hover .controls,.player-wrapper.paused .controls,.player-wrapper.show-ctrl .controls{opacity:1}
.ctrl-btn svg{width:18px;height:18px;pointer-events:none;transition:transform .15s cubic-bezier(.34,1.4,.64,1),filter .15s,opacity .15s}
.play-btn{position:relative;width:38px;height:38px;min-width:38px;min-height:38px;border-radius:50%;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.18);transition:background .18s,border-color .18s,transform .15s cubic-bezier(.34,1.4,.64,1),box-shadow .18s}
.play-btn:hover{background:rgba(168,85,247,.28);border-color:rgba(168,85,247,.65);transform:scale(1.12);box-shadow:0 0 0 4px rgba(168,85,247,.15),0 4px 16px rgba(124,58,237,.3)}
.play-btn svg{width:16px;height:16px}

.play-btn:active{transform:scale(.9);background:rgba(168,85,247,.4);animation:play-ripple .4s ease-out}
.mute-btn{position:relative;width:32px;height:32px;min-width:32px;min-height:32px;border-radius:8px;transition:background .15s,transform .15s cubic-bezier(.34,1.4,.64,1)}
.mute-btn:hover{background:rgba(255,255,255,.1);transform:scale(1.1)}
.mute-btn:active{transform:scale(.88)}
.mute-btn svg{width:18px;height:18px}
.vol-arc{stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .25s ease,opacity .2s}
.mute-btn:hover .vol-arc{filter:drop-shadow(0 0 3px rgba(168,85,247,.7))}
.vol-wrap{display:flex;align-items:center;gap:4px}
.vol-slider.vol-anim{animation:vol-pop .25s ease}
.vol-slider.is-muted{background:linear-gradient(to right,rgba(255,80,80,.5) var(--vol,30%),rgba(255,255,255,.1) var(--vol,30%))}
.vol-slider.is-muted::-webkit-slider-thumb{background:rgba(255,150,150,.9)}
.prog-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;cursor:pointer;padding:4px 0}
.time-label{font-size:9px;color:rgba(255,255,255,.55);letter-spacing:.3px;pointer-events:none;line-height:1}
.fit-wrap,.speed-wrap,.quality-wrap{position:relative}
.quality-btn{display:flex;align-items:center;gap:4px;max-width:62px}
.quality-btn-ic{transition:transform .2s cubic-bezier(.34,1.4,.64,1)}
.quality-btn.popup-open .quality-btn-ic{transform:rotate(180deg)}
#qualityBtnLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quality-popup::-webkit-scrollbar{width:3px}
.quality-popup::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.speed-popup-title,.quality-popup-title{font-size:9px;color:var(--muted);padding:2px 8px 5px;border-bottom:1px solid var(--border);margin-bottom:2px;text-align:center;letter-spacing:.8px;text-transform:uppercase}
.speed-opt.active{font-weight:700}
.quality-opt-ic{flex-shrink:0;font-size:13px;opacity:.85}
.quality-opt.active .quality-opt-ic{opacity:1}
.quality-opt-label{flex:1;min-width:0}
.quality-opt-hd{font-size:8px;font-weight:800;color:#fbbf24;background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.35);padding:1px 4px;border-radius:3px;letter-spacing:.3px;flex-shrink:0}
.quality-opt-live,.quality-opt-check{font-size:11px;color:var(--accent2);flex-shrink:0;opacity:0;width:0;overflow:hidden;transition:opacity .15s,width .15s}
.quality-opt.active .quality-opt-check{opacity:1;width:1em}
.quality-opt-live{color:#4ade80}

.quality-opt[data-level="-1"].active .quality-opt-live{opacity:1;width:1em}
.quality-opt[data-level="-1"].active .quality-opt-live::before{content:"";display:block;width:5px;height:5px;border-radius:50%;background:#4ade80;box-shadow:0 0 5px #4ade80;animation:quality-live-pulse 1.4s ease-in-out infinite;margin:0 auto}
.now-logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(168,85,247,.15));display:flex;align-items:center;justify-content:center;font-size:15px;border:1px solid rgba(124,58,237,.28);overflow:hidden;flex-shrink:0;transition:transform .3s cubic-bezier(.34,1.3,.64,1),opacity .22s ease,box-shadow .22s;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.now-logo.switching{animation:logoSwitch .4s ease both}
.now-logo img{width:100%;height:100%;object-fit:cover;border-radius:8px;animation:logo-switch-in .35s cubic-bezier(.34,1.2,.64,1) both}
.now-info{flex:1;min-width:0;overflow:hidden}
.now-info p{font-size:9px;color:#7070a0;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .18s ease;letter-spacing:.2px}
.now-info.switching h2,.now-info.switching p{opacity:0;transform:translateX(-6px)}
.now-info.incoming h2,.now-info.incoming p{animation:info-slide .22s ease forwards}
.now-info.incoming p{animation-delay:.04s}
.live-pill{display:none;align-items:center;gap:5px;background:linear-gradient(90deg,rgba(124,58,237,.2),rgba(168,85,247,.15));border:1px solid rgba(124,58,237,.45);padding:4px 11px;border-radius:20px;font-size:9px;font-weight:800;color:var(--accent2);flex-shrink:0;box-shadow:0 1px 8px rgba(124,58,237,.2),inset 0 1px 0 rgba(255,255,255,.05);letter-spacing:.5px}
.lpd{width:6px;height:6px;background:var(--accent2);border-radius:50%;animation:blink 1.5s infinite;box-shadow:0 0 6px var(--accent2)}
.nav-btns{display:flex;gap:5px;flex-shrink:0}
.nav-btn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#8888bb;font-size:9px;padding:4px 9px;border-radius:6px;cursor:pointer;transition:color .18s ease,border-color .18s ease,background .18s ease,transform .12s cubic-bezier(.34,1.4,.64,1);white-space:nowrap;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.nav-btn:hover{border-color:rgba(124,58,237,.5);color:#e0e0f4;background:rgba(124,58,237,.1)}
.nav-btn:active{transform:scale(.88)}
.grid-section::-webkit-scrollbar{width:3px}
.grid-section::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.grid-header{display:flex;align-items:center;margin-bottom:8px;gap:6px}
.sort-wrap{position:relative;flex-shrink:0}
.sort-btn{background:none;border:1px solid var(--border);color:var(--muted);font-size:12px;padding:2px 8px;border-radius:5px;cursor:pointer;transition:color .15s,border-color .15s,background .15s;line-height:1.4;display:flex;align-items:center;gap:4px;white-space:nowrap}
.sort-btn:hover{color:var(--accent2);border-color:var(--accent)}
.sort-btn.active{color:var(--accent2);border-color:var(--accent);background:rgba(124,58,237,.1)}
.sort-btn .sort-chevron{font-size:8px;opacity:.6;transition:transform .2s}
.sort-btn.popup-open .sort-chevron{transform:rotate(180deg)}
.sort-popup{position:absolute;top:calc(100% + 6px);right:0;background:#1a1a26;border:1px solid var(--border);border-radius:10px;padding:4px;display:none;flex-direction:column;gap:1px;min-width:130px;z-index:400;box-shadow:0 6px 24px rgba(0,0,0,.75)}
.sort-popup.open{display:flex;animation:popup-in-top .18s cubic-bezier(.34,1.2,.64,1) both}
.sort-popup-title{font-size:9px;color:var(--muted);padding:3px 10px 6px;border-bottom:1px solid var(--border);margin-bottom:2px;text-align:center;letter-spacing:.8px;text-transform:uppercase}
.sort-opt{padding:7px 12px;border-radius:7px;font-size:12px;cursor:pointer;color:var(--text);transition:background .1s,color .1s;display:flex;align-items:center;gap:8px}
.sort-opt:hover{background:rgba(124,58,237,.2)}
.sort-opt.active{color:var(--accent2);font-weight:600;background:rgba(124,58,237,.12)}
.sort-opt .sort-opt-icon{font-size:13px;width:18px;text-align:center;flex-shrink:0}
.sort-opt .sort-opt-check{margin-left:auto;font-size:11px;color:var(--accent2);opacity:0}
.sort-opt.active .sort-opt-check{opacity:1}
.grid-title{font-size:9px;font-weight:700;color:#8888bb;text-transform:uppercase;letter-spacing:1.2px}
.grid-count{margin-left:auto;font-size:9px;color:#6666aa;font-weight:600}
.grid-ch.card-animate{animation:card-in .3s cubic-bezier(.34,1.15,.64,1) both}
.grid-logo img.lazy{transition:opacity .35s ease}
.grid-fav-star{position:absolute;top:3px;right:4px;font-size:11px;color:#fbbf24;line-height:1;pointer-events:none;animation:fav-star-pop .32s cubic-bezier(.34,1.5,.64,1) both;display:flex;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.grid-fav-star svg{display:block}

.sb-search{padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0;position:relative}
.search-clear{position:absolute;right:18px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:2px 4px;line-height:1;display:none;transition:color .15s}
.search-clear svg{display:block}
.search-clear:hover{color:var(--text)}
.search-clear.visible{display:block}
.search-box::placeholder{color:var(--muted)}
.group-list::-webkit-scrollbar{width:3px}
.group-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.group-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:10px;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .2s cubic-bezier(.34,1.3,.64,1);border:1px solid transparent;margin-bottom:2px;touch-action:manipulation;contain:layout style}
.group-item:hover{background:rgba(255,255,255,.05);transform:translateX(3px)}
.group-item:active{animation:sidebar-tap .3s cubic-bezier(.34,1.3,.64,1) both}
.group-item.active{background:rgba(124,58,237,.14);border-color:rgba(124,58,237,.28);transform:translateX(0);box-shadow:inset 3px 0 0 var(--accent2)}
.group-icon{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;transition:background .18s,border-color .18s,transform .2s cubic-bezier(.34,1.3,.64,1),box-shadow .2s}
.group-item:hover .group-icon{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.15);transform:scale(1.1)}

.group-info{flex:1;min-width:0}
.group-name{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#cccce0;transition:color .12s}
.group-item:hover .group-name,.group-item.active .group-name{color:#fff}
.group-item.active .group-name{font-weight:600}
.group-badge{font-size:9px;font-weight:600;color:#9999bb;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:1px 7px;border-radius:10px;flex-shrink:0;transition:color .12s,background .12s,border-color .12s;min-width:22px;text-align:center}
.group-item:hover .group-badge{color:#fff;background:rgba(255,255,255,.1)}
.group-item.active .group-badge{color:#fff;background:rgba(124,58,237,.35);border-color:rgba(124,58,237,.5)}
.group-item[data-cat="__favs__"] .group-icon{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.3);color:#fbbf24}
.group-item[data-cat="__favs__"].active .group-icon{background:rgba(251,191,36,.25);border-color:rgba(251,191,36,.5);animation:glow-pulse-green 2.5s ease-in-out infinite .1s,group-icon-pop .35s cubic-bezier(.34,1.5,.64,1)}
.group-item[data-cat="__history__"] .group-icon{background:rgba(99,179,237,.1);border-color:rgba(99,179,237,.3);color:#63b3ed}
.group-item[data-cat="__history__"].active .group-icon{background:rgba(99,179,237,.2);border-color:rgba(99,179,237,.5)}

.sk{background:linear-gradient(90deg,var(--card) 25%,var(--border) 50%,var(--card) 75%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite;border-radius:8px;height:42px;margin-bottom:3px}
.sk:nth-child(2){animation-delay:.15s}
.sk:nth-child(3){animation-delay:.3s}
.sk:nth-child(4){animation-delay:.45s}
.sk-ch{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:5px}
.sk-ch-logo{width:36px;height:36px;border-radius:8px;background:linear-gradient(90deg,var(--border) 25%,#2a2a3a 50%,var(--border) 75%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite}
.sk-ch-name{width:52px;height:8px;border-radius:3px;background:linear-gradient(90deg,var(--border) 25%,#2a2a3a 50%,var(--border) 75%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite .1s}
.sk-ch-name2{width:36px;height:8px;border-radius:3px;background:linear-gradient(90deg,var(--border) 25%,#2a2a3a 50%,var(--border) 75%);background-size:200% 100%;animation:shimmer 1.6s ease-in-out infinite .2s}

.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;text-align:center;padding:12px 20px;z-index:20;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.2,1);overflow:hidden}
.overlay.show{opacity:1;pointer-events:auto}
.ov-err{background:rgba(0,0,0,.92)}
.ov-empty{background:rgba(8,8,14,.5)}
/* ── Loading / error overlays ── */
.ov-load{background:radial-gradient(ellipse at 50% 40%, rgba(30,18,60,.97) 0%, rgba(8,8,14,.99) 70%);flex-direction:column;gap:0}
.load-orbit-system{position:relative;width:72px;height:72px;flex-shrink:0;margin-bottom:16px}
.load-center-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(124,58,237,.18);animation:load-glow-pulse 2.4s ease-in-out infinite}
.load-ring-outer{position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent2);border-right-color:rgba(168,85,247,.4);animation:load-ring-spin .9s cubic-bezier(.5,.1,.5,.9) infinite;will-change:transform}
.load-ring-inner{position:absolute;inset:10px;border-radius:50%;border:2px solid transparent;border-bottom-color:var(--accent);border-left-color:rgba(124,58,237,.4);animation:load-ring-spin-rev 1.3s cubic-bezier(.5,.1,.5,.9) infinite;will-change:transform}
.load-center-logo{position:absolute;inset:18px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:14px;animation:load-logo-pop .5s cubic-bezier(.34,1.4,.64,1) both .1s}
.load-dot-track{position:absolute;inset:0;border-radius:50%;animation:load-ring-spin 2.2s linear infinite;will-change:transform}
.load-dot-track:nth-child(5){animation-duration:3.1s;animation-direction:reverse}
.load-dot-track:nth-child(6){animation-duration:1.7s}
.load-dot{position:absolute;width:5px;height:5px;border-radius:50%;top:50%;left:50%;transform-origin:0 0}
.load-dot-track:nth-child(5) .load-dot{background:var(--accent2);margin-top:-24px;margin-left:-2.5px;box-shadow:0 0 6px var(--accent2)}
.load-dot-track:nth-child(6) .load-dot{background:#f0abfc;width:4px;height:4px;margin-top:-20px;margin-left:-2px;box-shadow:0 0 5px #f0abfc}
.load-dot-track:nth-child(7) .load-dot{background:var(--accent);width:3px;height:3px;margin-top:-15px;margin-left:-1.5px;box-shadow:0 0 4px var(--accent)}
.load-ch-name{font-size:13px;font-weight:700;letter-spacing:.3px;margin-bottom:5px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(90deg,#fff 0%,var(--accent2) 40%,#fff 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:load-text-in .3s ease both .15s, load-shimmer-text 3s linear infinite .45s}
.load-status{font-size:10px;color:#6060aa;margin-bottom:14px;animation:load-text-in .3s ease both .25s;letter-spacing:.4px;min-height:14px}
.load-prog-wrap{width:120px;height:3px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;margin-bottom:12px;animation:load-text-in .3s ease both .3s}
.load-prog-bar{height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent2),#f0abfc);animation:load-bar 8s cubic-bezier(.1,.0,.9,1) both .1s}
.load-prog-bar.done{animation:load-bar-done .25s ease forwards}
.load-waves{display:flex;align-items:center;gap:3px;margin-top:2px;animation:load-text-in .3s ease both .35s}
.load-wave-bar{width:3px;border-radius:2px;background:var(--accent);opacity:.45}
.load-wave-bar:nth-child(1){height:6px;animation:load-wave 1.1s ease-in-out infinite .0s}
.load-wave-bar:nth-child(2){height:10px;animation:load-wave 1.1s ease-in-out infinite .1s}
.load-wave-bar:nth-child(3){height:14px;animation:load-wave 1.1s ease-in-out infinite .2s;background:var(--accent2);opacity:.6}
.load-wave-bar:nth-child(4){height:10px;animation:load-wave 1.1s ease-in-out infinite .3s}
.load-wave-bar:nth-child(5){height:7px;animation:load-wave 1.1s ease-in-out infinite .4s;background:var(--accent2);opacity:.5}
.load-wave-bar:nth-child(6){height:12px;animation:load-wave 1.1s ease-in-out infinite .5s}
.load-wave-bar:nth-child(7){height:8px;animation:load-wave 1.1s ease-in-out infinite .35s;opacity:.4}
.load-credit{display:flex;align-items:center;justify-content:center;gap:4px;font-size:8px;font-weight:500;color:rgba(110,110,170,.6);letter-spacing:.6px;animation:load-text-in .35s ease both .5s;pointer-events:none;margin-top:8px;flex-shrink:0}
.load-credit span{color:rgba(148,65,217,.65)}

.ov-err.show .err-icon{animation:err-icon-in .45s cubic-bezier(.34,1.3,.64,1) both .05s}
.ov-err.show .err-title{animation:err-content-in .35s ease both .18s}
.ov-err.show .err-body{animation:err-content-in .35s ease both .26s}
.ov-err.show .err-btn-row{animation:err-content-in .35s ease both .32s}
.err-icon svg{width:26px;height:26px;color:#ff6b6b}
.err-icon.shake{animation:err-shake .4s ease,err-pulse-ring 1.5s ease 2}
.err-btn-row{display:flex;gap:7px;align-items:center;justify-content:center;flex-wrap:nowrap;margin-top:6px;width:100%;max-width:260px}
.retry-btn{display:flex;align-items:center;justify-content:center;gap:5px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;padding:8px 16px;border-radius:9px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .18s,transform .12s cubic-bezier(.34,1.4,.64,1),box-shadow .18s;box-shadow:0 3px 14px rgba(124,58,237,.4);flex:1;min-width:0;touch-action:manipulation}
.retry-btn:hover{opacity:.9;box-shadow:0 4px 18px rgba(124,58,237,.5)}
.retry-btn:active{transform:scale(.93)}
.report-btn{display:flex;align-items:center;justify-content:center;gap:5px;background:rgba(34,158,217,.15);border:1px solid rgba(34,158,217,.4);color:#60c8f0;padding:8px 14px;border-radius:9px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .18s,border-color .18s,transform .12s cubic-bezier(.34,1.4,.64,1);text-decoration:none;line-height:1;flex:1;min-width:0;touch-action:manipulation}
.report-btn:hover{background:rgba(34,158,217,.28);border-color:#60c8f0}
.report-btn:active{transform:scale(.93)}
.report-btn svg{width:13px;height:13px;flex-shrink:0}

.ei{opacity:.2;animation:empty-float 3s ease-in-out infinite;display:flex;align-items:center;justify-content:center}
.et{color:var(--muted);font-size:12px;font-weight:500}
.es{color:var(--border);font-size:10px}
.toast.reset{transition:none;opacity:0;transform:translateX(-50%) translateY(10px)}

.kb-modal{max-width:360px}
.kb-modal h3{font-size:13px;font-weight:700;margin-bottom:14px;color:#fff;display:flex;align-items:center;gap:6px}
.kb-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center}
.kb-key{font-size:10px;font-weight:700;background:var(--card);border:1px solid var(--border);border-bottom-width:2px;padding:3px 8px;border-radius:5px;color:var(--accent2);white-space:nowrap;text-align:center;font-family:monospace}
.kb-desc{font-size:11px;color:#aaaacc}
.kb-sep{grid-column:1/-1;height:1px;background:var(--border);margin:4px 0}
.kb-close{margin-top:16px;width:100%;background:var(--card);border:1px solid var(--border);color:var(--muted);font-size:12px;padding:8px;border-radius:7px;cursor:pointer;transition:all .15s}
.kb-close:hover{color:var(--text);border-color:var(--muted)}
:fullscreen .player-wrapper,:-webkit-full-screen .player-wrapper{width:100vw !important;height:100vh !important;max-height:none !important;max-width:none !important;border-radius:0 !important;aspect-ratio:unset !important}
:fullscreen .controls,:-webkit-full-screen .controls{opacity:0}
:fullscreen .player-wrapper:hover .controls,:-webkit-full-screen .player-wrapper:hover .controls,
:fullscreen .player-wrapper.show-ctrl .controls,:-webkit-full-screen .player-wrapper.show-ctrl .controls,
:fullscreen .player-wrapper.paused .controls,:-webkit-full-screen .player-wrapper.paused .controls{opacity:1}

/* ── Page splash screen ── */
#splashScreen{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 35%,#1a0a35 0%,#0b0b16 55%,#08080e 100%);overflow:hidden;transition:opacity .5s cubic-bezier(.4,0,.2,1),visibility .5s}
#splashScreen.hidden{opacity:0;visibility:hidden;pointer-events:none;will-change:auto}
#splashScreen.hidden *{animation-play-state:paused !important}
.splash-scanline{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(168,85,247,.18),rgba(124,58,237,.35),rgba(168,85,247,.18),transparent);animation:splash-scanline 3.5s linear infinite;will-change:transform;pointer-events:none}
.splash-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(124,58,237,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;contain:strict}
.splash-corner{position:absolute;width:60px;height:60px;pointer-events:none;opacity:.35}
.splash-corner.tl{top:18px;left:18px;border-top:2px solid var(--accent2);border-left:2px solid var(--accent2);border-radius:4px 0 0 0}
.splash-corner.tr{top:18px;right:18px;border-top:2px solid var(--accent2);border-right:2px solid var(--accent2);border-radius:0 4px 0 0}
.splash-corner.bl{bottom:18px;left:18px;border-bottom:2px solid var(--accent2);border-left:2px solid var(--accent2);border-radius:0 0 0 4px}
.splash-corner.br{bottom:18px;right:18px;border-bottom:2px solid var(--accent2);border-right:2px solid var(--accent2);border-radius:0 0 4px 0}
.splash-orbit{position:relative;width:96px;height:96px;flex-shrink:0;margin-bottom:28px;animation:splash-logo-in .7s cubic-bezier(.34,1.3,.64,1) both .1s;will-change:transform,opacity}
.splash-orbit-ring1{position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent2);border-right-color:rgba(168,85,247,.3);animation:splash-ring-spin 1.1s linear infinite;will-change:transform}
.splash-orbit-ring2{position:absolute;inset:6px;border-radius:50%;border:2px solid transparent;border-bottom-color:var(--accent);border-left-color:rgba(124,58,237,.3);animation:splash-ring-rev 1.7s linear infinite;will-change:transform}
.splash-orbit-ring3{position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(168,85,247,.12);animation:splash-ring-spin 4s linear infinite;will-change:transform}
.splash-orbit-dot{position:absolute;width:6px;height:6px;background:var(--accent2);border-radius:50%;box-shadow:0 0 8px var(--accent2);top:-3px;left:50%;margin-left:-3px;transform-origin:3px calc(48px + 3px);animation:splash-ring-spin 1.1s linear infinite;will-change:transform}
.splash-orbit-dot2{position:absolute;width:5px;height:5px;background:#f0abfc;border-radius:50%;box-shadow:0 0 6px #f0abfc;bottom:-2.5px;left:50%;margin-left:-2.5px;transform-origin:2.5px calc(-45px + 2.5px);animation:splash-ring-spin 1.7s linear infinite reverse;will-change:transform}
.splash-logo-center{position:absolute;inset:14px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:22px;animation:splash-logo-glow 2.5s ease-in-out infinite .8s;box-shadow:0 0 0 3px rgba(124,58,237,.2),inset 0 1px 0 rgba(255,255,255,.15)}
.splash-brand{font-size:1.75rem;font-weight:800;letter-spacing:-.5px;margin-bottom:30px;background:linear-gradient(90deg,#fff 0%,var(--accent2) 45%,#c084fc 75%,#fff 100%);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:splash-title-in .5s ease both .55s,splash-bar-shimmer 4s linear infinite 1.2s}
.splash-prog-wrap{width:180px;height:3px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;margin-bottom:10px;animation:splash-sub-in .4s ease both .8s}
.splash-prog-bar{height:100%;width:100%;border-radius:3px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--accent),var(--accent2),#f0abfc,var(--accent2),var(--accent));background-size:300% auto;will-change:transform;animation:splash-bar-fill 3.5s cubic-bezier(.1,0,.6,1) both .5s,splash-bar-shimmer 2s linear infinite 1s}
.splash-status{font-size:.68rem;color:#5050aa;letter-spacing:.8px;min-height:16px;animation:splash-sub-in .4s ease both .9s}
.splash-status span{display:inline-block;animation:splash-status-in .3s ease both}
.splash-dots{display:flex;gap:7px;margin-top:20px;animation:splash-sub-in .4s ease both 1s}
.splash-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:splash-dot-pulse 1.2s ease-in-out infinite;will-change:transform,opacity}
.splash-dot:nth-child(2){background:var(--accent2);animation-delay:.2s}
.splash-dot:nth-child(3){background:#f0abfc;animation-delay:.4s}
.splash-particle{position:absolute;border-radius:50%;pointer-events:none;will-change:transform,opacity;animation:splash-particle var(--sd,2.5s) ease-out infinite var(--delay,0s);opacity:0}
.splash-credit{position:absolute;bottom:28px;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.62rem;color:#3a3a6a;letter-spacing:.6px;white-space:nowrap;animation:splash-sub-in .5s ease both 1.1s;text-align:center}
.splash-credit-dev{font-size:.7rem;color:#5a5aaa;font-weight:600;letter-spacing:.4px}
.splash-credit-dev span{background:linear-gradient(90deg,var(--accent2),#f0abfc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:600}
.prog-bar{height:4px;background:rgba(255,255,255,.2);border-radius:2px;position:relative;transition:height .15s;--fill:0}
.prog-wrap:hover .prog-bar::after{content:"";position:absolute;left:calc(var(--fill)*1%);top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(168,85,247,.7);pointer-events:none}
.ctrl-btn:active{transform:scale(.88);opacity:1;background:rgba(255,255,255,.1)}
.vol-slider{appearance:none;flex-shrink:0;width:58px;-webkit-appearance:none;height:4px;border-radius:3px;background:rgba(255,255,255,.2);outline:none;cursor:pointer;transition:width .2s ease,height .15s}
.vol-slider:hover{height:6px;width:66px}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 0 0 0 rgba(168,85,247,0)}
.vol-slider:hover::-webkit-slider-thumb{transform:scale(1.25);box-shadow:0 0 0 4px rgba(168,85,247,.3)}
.vol-slider:active::-webkit-slider-thumb{transform:scale(1.1);box-shadow:0 0 0 6px rgba(168,85,247,.2)}
.vol-slider::-moz-range-thumb{box-shadow:0 1px 4px rgba(0,0,0,.5);width:14px;height:14px;border-radius:50%;background:#fff;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.vol-slider:hover::-moz-range-thumb{transform:scale(1.25);box-shadow:0 0 0 4px rgba(168,85,247,.3)}
.fit-btn,.speed-btn,.quality-btn{min-width:30px;text-align:center;font-size:9px;font-weight:700;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;letter-spacing:.3px;min-height:28px;white-space:nowrap;transition:border-color .15s,background .15s,transform .1s cubic-bezier(.34,1.4,.64,1);display:flex;align-items:center;justify-content:center;gap:4px}
.fit-btn:hover,.speed-btn:hover,.quality-btn:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.1)}
.fit-btn:active,.speed-btn:active,.quality-btn:active{transform:scale(.93)}
.quality-btn.popup-open,.quality-btn:focus-visible{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(124,58,237,.25)}
.speed-popup{min-width:92px;padding:6px}
.quality-popup{max-height:220px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;min-width:138px;padding:6px}
.fit-popup.open,.speed-popup.open,.quality-popup.open{display:flex;animation:popup-in .2s cubic-bezier(.34,1.2,.64,1) both}
.fit-opt,.speed-opt{padding:7px 12px;border-radius:7px;font-size:11px;cursor:pointer;color:var(--text);transition:background .12s,color .12s}
.fit-opt{display:flex;align-items:center;gap:6px}
.speed-opt{display:flex;align-items:center;justify-content:space-between;gap:6px}
.fit-opt:hover,.speed-opt:hover{background:rgba(124,58,237,.22);color:#fff}
.fit-opt.active,.speed-opt.active{color:var(--accent2);font-weight:700;background:rgba(124,58,237,.15)}
.quality-opt{display:flex;align-items:center;gap:7px;font-size:11px;cursor:pointer;color:var(--text);transition:background .12s,color .12s;white-space:nowrap;padding:7px 10px;border-radius:7px}
.quality-opt:hover{background:rgba(124,58,237,.22);color:#fff}
.quality-opt.active{color:var(--accent2);font-weight:700;background:rgba(124,58,237,.15)}

.grid-ch:hover{border-color:rgba(168,85,247,.6);transform:translateY(-5px) scale(1.06);box-shadow:0 12px 28px rgba(124,58,237,.32),0 0 0 1px rgba(168,85,247,.2);background:linear-gradient(160deg,rgba(32,20,52,.95),rgba(22,22,31,.98))}
.grid-ch:active{transform:scale(.88);background:rgba(124,58,237,.18);box-shadow:none;transition:transform .07s ease}
.grid-ch.active{border-color:var(--accent2);background:rgba(124,58,237,.2);box-shadow:0 0 0 1.5px rgba(124,58,237,.4),0 6px 24px rgba(124,58,237,.25);animation:card-glow 2.8s ease-in-out infinite}
.grid-logo{width:40px;height:40px;border-radius:10px;background:rgba(0,0,0,.4);margin:0 auto 7px;display:flex;align-items:center;justify-content:center;font-size:17px;color:#7a6aa8;border:1px solid rgba(255,255,255,.08);overflow:hidden;transition:border-color .2s,transform .2s}
.grid-ch:hover .grid-logo{border-color:rgba(168,85,247,.4);transform:scale(1.06)}
.grid-ch.active .grid-logo{border-color:rgba(168,85,247,.55);box-shadow:0 2px 10px rgba(124,58,237,.3)}
.grid-name{font-size:9px;font-weight:500;line-height:1.38;word-break:break-word;color:#cccce0;transition:color .15s}
.grid-ch:hover .grid-name{color:#fff}
.grid-ch.active .grid-name{color:#e0d4ff;font-weight:600}

.err-icon{flex-shrink:0;font-size:38px;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(255,107,107,.1);border:2px solid rgba(255,107,107,.28);margin-bottom:6px;animation:err-icon-pulse 2.5s ease-in-out infinite}
.err-title{letter-spacing:.2px;font-size:15px;font-weight:700;color:#ff9999;margin-bottom:4px}
.err-body{font-size:11px;color:#8888bb;line-height:1.6;max-width:220px;text-align:center}
.info-bar{padding:6px 12px;background:linear-gradient(90deg,rgba(15,15,24,.98),rgba(18,18,28,.98));border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:9px;flex-shrink:0;height:48px;min-width:0;box-shadow:0 2px 12px rgba(0,0,0,.3),inset 0 -1px 0 rgba(124,58,237,.07)}
.now-info h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;transition:opacity .18s ease,transform .18s ease;letter-spacing:-.1px;font-size:12px;font-weight:700}
.player-wrapper{position:relative;background:#000;width:100%;aspect-ratio:16/9;max-height:62vh;max-width:min(calc(62vh*(16/9)),100%);border-radius:14px;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.07);touch-action:manipulation;isolation:isolate;transition:box-shadow .3s}
.player-wrapper:hover{box-shadow:0 16px 56px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.09),0 0 0 3px rgba(124,58,237,.07)}
.search-box{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 30px 8px 12px;color:var(--text);font-size:12px;outline:none;transition:border-color .2s,background .2s,box-shadow .2s}
.search-box:focus{border-color:rgba(124,58,237,.6);background:rgba(124,58,237,.06);box-shadow:0 0 0 3px rgba(124,58,237,.1)}
#btnFav.fav-active{border-color:rgba(251,191,36,.55) !important;color:#fbbf24 !important;background:rgba(251,191,36,.12) !important}
.toast-ic{display:flex;flex-shrink:0;font-size:14px;color:var(--accent2);line-height:0}
.toast-ic svg{display:block}

.toast.show .toast-ic{animation:toast-ic-pop .32s cubic-bezier(.34,1.4,.64,1) both}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.about-dev-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;text-align:left;transition:border-color .2s,box-shadow .2s}
.about-dev-card:hover{border-color:rgba(124,58,237,.35);box-shadow:0 4px 16px rgba(124,58,237,.12)}
.about-dev-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:-.5px}
.about-dev-info{flex:1;min-width:0}
.about-dev-name{font-size:13px;font-weight:700;color:#fff;margin-bottom:2px}
.about-dev-role{font-size:10px;color:var(--muted);letter-spacing:.3px}

.player-wrapper.show-ctrl .controls,.player-wrapper:hover .controls,.player-wrapper.paused .controls{animation:ctrl-fade-in .2s ease both}
.mob-icon-btn svg{pointer-events:none}
.sleep-indicator svg{flex-shrink:0}
.live-badge::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:live-badge-shimmer 2.5s ease-in-out infinite}

.hdr-count{transition:color .3s ease;font-size:10px;color:#c084fc;background:rgba(124,58,237,.12);border:1px solid rgba(192,132,252,.25);padding:2px 8px;border-radius:5px;white-space:nowrap}
.group-list{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;padding:5px;touch-action:pan-y;contain:style;overscroll-behavior:contain}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:7px;contain:layout style paint;will-change:auto}
.card-animate{animation:card-in .38s cubic-bezier(.34,1.3,.64,1) both;animation-delay:calc(min(var(--i,0)*28ms, 420ms));contain:layout style paint}
.splash-orbit-ring1,.splash-orbit-ring2,.splash-orbit-ring3,
.splash-orbit-dot,.splash-orbit-dot2,.splash-prog-bar,
.load-ring-outer,.load-ring-inner,.load-dot-track{will-change:transform}
.grid-ch,.group-item,.toast,.modal-box,.hdr-btn,.icon-btn{will-change:auto}
button,a,[role="button"],[onclick]{touch-action:manipulation}
.grid-section{flex:1;overflow-y:auto;padding:8px 10px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.group-item,.grid-ch,.nav-btn,.hdr-btn,.sleep-opt{-webkit-user-select:none;user-select:none}
/* ── Sidebar / channel groups ── */
.sidebar{width:var(--sw);flex-shrink:0;background:linear-gradient(180deg,#0e0e1c,var(--surface));border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;overflow:hidden;transform:translateZ(0)}
.modal-backdrop.open{opacity:1;visibility:visible;pointer-events:auto;will-change:opacity}
.modal-backdrop:not(.open){will-change:auto;backdrop-filter:none;-webkit-backdrop-filter:none}
.search-box,.mob-search-input,.modal-box input{font-size:max(16px,0.75rem)}

/* ── Base reset & root variables ── */
html{scroll-behavior:smooth;scrollbar-gutter:auto}

.pip-btn,.fs-btn{position:relative;overflow:hidden}
.pip-btn::before,.fs-btn::before{content:"";position:absolute;inset:0;border-radius:8px;background:rgba(255,255,255,0);transition:background .18s}
.pip-btn:hover::before{background:rgba(168,85,247,.15)}
.fs-btn:hover::before{background:rgba(168,85,247,.15)}
.pip-btn svg,.fs-btn svg{transition:transform .2s cubic-bezier(.34,1.4,.64,1),filter .2s,stroke .2s}
.pip-btn:hover svg{transform:scale(1.18);filter:drop-shadow(0 0 5px rgba(168,85,247,.65));stroke:var(--accent2)}
.fs-btn:hover svg{transform:scale(1.15);filter:drop-shadow(0 0 5px rgba(168,85,247,.65));stroke:var(--accent2)}
.pip-btn:active svg,.fs-btn:active svg{transform:scale(.88)}

.pip-btn:active,.fs-btn:active{animation:btn-ripple .4s ease-out}
.fs-btn.fs-active svg{stroke:var(--accent2);filter:drop-shadow(0 0 4px rgba(168,85,247,.5))}
.pip-btn.pip-active svg{stroke:var(--accent2);filter:drop-shadow(0 0 4px rgba(168,85,247,.5))}
.player-wrapper,.controls,.overlay,.modal-backdrop.open .modal-box{contain:layout style}
/* ── Channel grid cards ── */
.grid-ch{background:linear-gradient(160deg,rgba(24,24,34,.9),var(--card));border:1px solid var(--border);border-radius:12px;padding:10px 5px 8px;text-align:center;cursor:pointer;transition:border-color .22s ease,background .22s ease,transform .22s cubic-bezier(.34,1.3,.64,1),box-shadow .22s ease;touch-action:manipulation;-webkit-user-select:none;user-select:none;position:relative;contain:layout style paint;content-visibility:auto;contain-intrinsic-size:0 96px}
.load-ring-outer,.load-ring-inner,.load-dot-track,.splash-orbit-ring1,.splash-orbit-ring2,.splash-orbit-dot,.splash-orbit-dot2{will-change:transform}
.prog-buf{position:absolute;top:0;left:0;height:100%;background:rgba(255,255,255,.12);border-radius:2px;pointer-events:none;transform:scaleX(0);transform-origin:left;transition:transform .4s ease;will-change:transform}
.sidebar,.player-area{overflow:hidden}

body{overflow:hidden;font-family:"Inter",sans-serif;background:var(--bg);color:var(--text);overscroll-behavior:none;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* ── Player controls ── */
.controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;opacity:0;transition:opacity .28s cubic-bezier(.4,0,.2,1);z-index:10;background:linear-gradient(to top,rgba(0,0,0,.96) 0%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.28) 72%,transparent 100%) !important;padding:42px 12px 11px !important;gap:6px !important}
.ctrl-btn{background:none;border:none;color:#fff;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;opacity:.85;flex-shrink:0;touch-action:manipulation;min-width:34px;min-height:34px;border-radius:8px;transition:opacity .15s ease,transform .15s cubic-bezier(.34,1.4,.64,1),background .15s}
.ctrl-btn:hover{opacity:1;transform:scale(1.15);background:rgba(255,255,255,.1);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.prog-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;pointer-events:none;will-change:transform;background:linear-gradient(90deg,#9d5ff5 0%,#c084fc 60%,#e879f9 100%);border-radius:3px}
.prog-wrap:hover .prog-fill{box-shadow:0 0 12px rgba(192,132,252,.7),0 0 4px rgba(192,132,252,.4)}
.prog-wrap:hover .prog-bar{height:6px;box-shadow:0 0 8px rgba(192,132,252,.2)}
.theater-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border-radius:8px;font-size:0}
.theater-btn svg{transition:transform .2s cubic-bezier(.34,1.4,.64,1),filter .2s}
.theater-btn:hover svg{transform:scale(1.18);filter:drop-shadow(0 0 4px rgba(168,85,247,.6))}
.theater-btn.active{border-color:var(--accent2);background:rgba(124,58,237,.22)}
.theater-btn.active svg{filter:drop-shadow(0 0 5px rgba(168,85,247,.75))}
.fit-popup,.speed-popup,.quality-popup{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);border-radius:11px;padding:5px;display:none;flex-direction:column;gap:2px;min-width:120px;z-index:200;background:rgba(14,14,24,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.09);box-shadow:0 12px 40px rgba(0,0,0,.85),0 0 0 1px rgba(124,58,237,.12)}
.info-bar .now-info h2{color:#fff;background:linear-gradient(90deg,#fff 0%,#e0d0ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:13px;font-weight:700;letter-spacing:-.2px}
.modal-box{border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:20px;width:100%;max-width:440px;transform:scale(.93) translateY(14px);opacity:0;transition:transform .26s cubic-bezier(.34,1.2,.64,1),opacity .2s ease;will-change:transform,opacity;background:linear-gradient(160deg,rgba(16,16,26,.99),rgba(12,12,20,.99));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 16px 56px rgba(0,0,0,.88),0 0 0 1px rgba(255,255,255,.06),0 0 0 3px rgba(124,58,237,.08)}
/* ── Toast notifications ── */
.toast{overflow:hidden;text-overflow:ellipsis;position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);display:inline-flex;align-items:center;justify-content:center;gap:7px;background:rgba(18,18,30,.97);border:1px solid rgba(124,58,237,.3);color:#e0e0f4;padding:9px 20px;pointer-events:none;z-index:9999;opacity:0;transition:opacity .25s,transform .25s cubic-bezier(.34,1.2,.64,1);white-space:nowrap;max-width:90vw;text-align:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:14px;font-size:12px;font-weight:500;box-shadow:0 6px 24px rgba(0,0,0,.55),0 0 0 1px rgba(124,58,237,.15)}
header{padding-top:env(safe-area-inset-top);background:linear-gradient(90deg,rgba(12,12,20,.99),rgba(15,15,24,.99));border-bottom:1px solid rgba(255,255,255,.07);padding:0 14px;height:46px;display:flex;align-items:center;gap:8px;flex-shrink:0;z-index:300;box-shadow:0 2px 20px rgba(0,0,0,.5);position:relative}
header::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(168,85,247,.18),rgba(124,58,237,.12),transparent);pointer-events:none}

.logo-mark{width:30px;height:30px;background:linear-gradient(135deg,#9d5ff5,#c084fc);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;box-shadow:0 2px 12px rgba(192,132,252,.4);transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s;animation:logo-glow 4s ease-in-out infinite}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(124,58,237,.35);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(168,85,247,.55)}
:focus-visible{border-radius:4px;outline:2px solid rgba(168,85,247,.7);outline-offset:2px}
.grid-logo img{width:100%;height:100%;border-radius:8px;image-rendering:auto;object-fit:contain;opacity:0;transition:opacity .3s ease}
.grid-logo img.loaded{opacity:1}
.group-item.active .group-icon{background:rgba(124,58,237,.25);border-color:rgba(124,58,237,.45);box-shadow:0 0 0 1px rgba(192,132,252,.5),0 0 12px rgba(168,85,247,.3);animation:group-icon-active 2.8s ease-in-out infinite}
.live-badge{background:linear-gradient(90deg,#16a34a,var(--live));color:#fff;font-weight:800;flex-shrink:0;box-shadow:0 1px 6px rgba(34,197,94,.4);position:relative;overflow:hidden;animation:blink 2.4s ease-in-out infinite;border-radius:5px;letter-spacing:.8px;font-size:8.5px;padding:2px 7px}
</style>