*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#08080e;--surface:#0f0f18;--card:#16161f;--border:#22222f;
  --accent:#7c3aed;--accent2:#a855f7;--text:#eeeef5;--muted:#7070a0;--live:#22c55e;
  --sw:280px;
}
html{scroll-behavior:smooth}
.ch-grid{contain:layout style paint}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
html,body{height:100%;height:100dvh}
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)}
header{padding-top:env(safe-area-inset-top)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes bar-dance{to{height:8px;opacity:.3}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes logoSwitch{0%{opacity:1;transform:scale(1)}40%{opacity:0;transform:scale(.7) rotate(-5deg)}60%{opacity:0;transform:scale(.7) rotate(5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes info-slide{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
@keyframes vol-pop{0%{transform:scaleX(1)}50%{transform:scaleX(1.06)}100%{transform:scaleX(1)}}
@keyframes popup-in{from{opacity:0;transform:translateX(-50%) scale(.93)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes popup-in-top{from{opacity:0;transform:scale(.93) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ── Header ── */
header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 12px;height:44px;display:flex;align-items:center;gap:8px;flex-shrink:0;z-index:300;position:relative}
.logo{display:flex;align-items:center;gap:7px;font-size:.9rem;font-weight:700;text-decoration:none;color:inherit}
.logo-mark{width:28px;height:28px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.logo-text{background:linear-gradient(90deg,#fff,var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.live-badge{background:var(--live);color:#000;font-size:9px;font-weight:800;padding:2px 5px;border-radius:20px;letter-spacing:1px;animation:blink 2s infinite;flex-shrink:0}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.hdr-count{font-size:10px;color:#aaaacc;background:var(--card);border:1px solid var(--border);padding:2px 8px;border-radius:5px;white-space:nowrap}
.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}
@media(max-width:900px){.cb-text{display:none}.hdr-btn{padding:5px 8px}}
.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:30px;height:30px;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);flex-shrink:0}
.icon-btn:hover{color:var(--text);border-color:var(--accent);background:rgba(124,58,237,.1)}
.icon-btn:active{transform:scale(.86)}
.hidden{display:none!important}
.mob-only{display:none!important}
.mob-icon-btn{display:none}
@media(max-width:700px){
  .mob-hide{display:none!important}
  .mob-only{display:flex!important}
  .mob-icon-btn{
    display:flex;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:16px;
    width:32px;height:32px;border-radius:6px;
    cursor:pointer;flex-shrink:0;
    transition:background .15s,border-color .15s;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  .mob-icon-btn:active{transform:scale(.91);background:rgba(124,58,237,.3)}
}
.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)}
@media(max-width:700px){.mob-search-btn{display:flex}.icon-btn{display:none}}
.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;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{background:none;border:none;color:var(--muted);font-size:20px;padding:4px;cursor:pointer;line-height:1;flex-shrink:0}

/* ── Modals ── */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;visibility:hidden;
  transition:opacity .22s cubic-bezier(.4,0,.2,1),visibility .22s;
  pointer-events:none;
}
.modal-backdrop.open{opacity:1;visibility:visible;pointer-events:auto;}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;width:100%;max-width:440px;box-shadow:0 8px 40px rgba(0,0,0,.7);transform:scale(.94) translateY(10px);opacity:0;transition:transform .22s cubic-bezier(.34,1.2,.64,1),opacity .18s ease}
.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:var(--card);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);font-size:13px;outline:none;margin-bottom:10px;transition:border-color .18s}
.modal-box input:focus{border-color:var(--accent)}
.modal-box input::placeholder{color:var(--muted)}
.modal-footer{display:flex;gap:8px;justify-content:flex-end}
.btn-cancel{background:var(--card);border:1px solid var(--border);color:var(--muted);font-size:12px;padding:7px 14px;border-radius:7px;cursor:pointer;transition:color .15s,border-color .15s}
.btn-cancel:hover{color:var(--text);border-color:var(--muted)}
.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:7px;cursor:pointer;transition:opacity .15s}
.btn-primary:hover{opacity:.88}

/* Sleep timer modal */
.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}
@media(max-width:480px){
  .modal-box{padding:16px;border-radius:12px}
  .sleep-grid{gap:6px}
  .sleep-opt{font-size:11px;padding:10px 4px}
  .modal-box h3{font-size:13px}
  .modal-hint{font-size:9px}
}
/* Sleep indicator in header */
.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 ── */
.player-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;background:var(--bg)}
.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 expands */
.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{position:relative;background:#000;width:100%;aspect-ratio:16/9;max-height:62vh;max-width:min(calc(62vh*(16/9)),100%);border-radius:10px;overflow:hidden;box-shadow:0 4px 40px rgba(0,0,0,.7);touch-action:manipulation;isolation:isolate}
.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 */
.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%)}

/* Buffer quality indicator */
.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;transform:translateY(-4px);transition:opacity .25s,transform .25s}
.buf-badge.show{opacity:1;transform:translateY(0)}

.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)}

/* Controls */
.controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.92));padding:28px 10px 8px;display:flex;align-items:center;gap:5px;opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);z-index:10}
.player-wrapper:hover .controls,.player-wrapper.paused .controls,.player-wrapper.show-ctrl .controls{opacity:1}
.ctrl-btn{background:none;border:none;color:#fff;cursor:pointer;padding:5px;border-radius:6px;display:flex;align-items:center;justify-content:center;opacity:.85;transition:opacity .15s ease,transform .12s cubic-bezier(.34,1.4,.64,1);flex-shrink:0;touch-action:manipulation;min-width:32px;min-height:32px}
.ctrl-btn:hover{opacity:1;transform:scale(1.12)}
.ctrl-btn:active{transform:scale(.9);opacity:1}
.ctrl-btn svg{width:18px;height:18px;pointer-events:none}
.theater-btn{font-size:9px;font-weight:700;padding:3px 7px;border-radius:4px;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;letter-spacing:.3px;min-height:26px;white-space:nowrap}
.theater-btn:hover{border-color:rgba(255,255,255,.4)}
.theater-btn.active{border-color:var(--accent2);color:var(--accent2)}
.vol-wrap{display:flex;align-items:center;gap:3px}
.vol-slider{width:54px;-webkit-appearance:none;height:4px;border-radius:2px;background:rgba(255,255,255,.2);outline:none;cursor:pointer;transition:width .2s ease,height .15s}
.vol-slider.vol-anim{animation:vol-pop .25s ease}
.vol-slider:hover{height:5px}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;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.2);box-shadow:0 0 0 3px rgba(168,85,247,.35)}
.vol-slider:active::-webkit-slider-thumb{transform:scale(1.1);box-shadow:0 0 0 5px rgba(168,85,247,.25)}
.vol-slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.vol-slider:hover::-moz-range-thumb{transform:scale(1.2);box-shadow:0 0 0 3px rgba(168,85,247,.35)}
.prog-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;cursor:pointer;padding:4px 0}
.prog-bar{height:4px;background:rgba(255,255,255,.2);border-radius:2px;position:relative;transition:height .15s}
.prog-wrap:hover .prog-bar{height:6px}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;width:100%;transform:scaleX(0);transform-origin:left;pointer-events:none;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}
.time-label{font-size:9px;color:rgba(255,255,255,.55);letter-spacing:.3px;pointer-events:none;line-height:1}
.q-sel{background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:10px;padding:3px 5px;border-radius:4px;cursor:pointer;outline:none;max-width:56px}
.q-sel option{background:#1a1a26}
.fit-wrap,.speed-wrap{position:relative}
.fit-btn,.speed-btn{font-size:9px;font-weight:700;padding:3px 7px;border-radius:4px;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;letter-spacing:.3px;min-height:26px;white-space:nowrap;min-width:30px;text-align:center}
.fit-btn:hover,.speed-btn:hover{border-color:rgba(255,255,255,.4)}
.fit-popup,.speed-popup{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#1a1a26;border:1px solid var(--border);border-radius:9px;padding:4px;display:none;flex-direction:column;gap:2px;min-width:116px;z-index:200;box-shadow:0 4px 20px rgba(0,0,0,.7)}
.speed-popup{min-width:88px;padding:5px}
.fit-popup.open,.speed-popup.open{display:flex;animation:popup-in .18s cubic-bezier(.34,1.2,.64,1) both}
.speed-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}
.fit-opt,.speed-opt{padding:6px 10px;border-radius:6px;font-size:11px;cursor:pointer;color:var(--text);transition:background .1s}
.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,.2)}
.fit-opt.active,.speed-opt.active{color:var(--accent2);font-weight:600}
.speed-opt.active{font-weight:700}
.res-badge{font-size:9px;font-weight:800;color:var(--accent2);background:rgba(124,58,237,.15);border:1px solid rgba(124,58,237,.3);padding:2px 5px;border-radius:4px;letter-spacing:.5px;display:none;flex-shrink:0}

/* ── Info bar ── */
.info-bar{padding:5px 10px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0;height:42px;min-width:0}
.now-logo{width:30px;height:30px;border-radius:7px;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:14px;border:1px solid var(--border);overflow:hidden;flex-shrink:0;transition:transform .3s cubic-bezier(.34,1.3,.64,1),opacity .22s ease}
.now-logo.switching{animation:logoSwitch .4s ease both}
.now-logo img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.now-info{flex:1;min-width:0;overflow:hidden}
.now-info h2{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;transition:opacity .18s ease,transform .18s ease}
.now-info p{font-size:9px;color:#8888bb;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .18s ease}
.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:3px;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.28);padding:3px 8px;border-radius:20px;font-size:9px;font-weight:700;color:var(--accent2);flex-shrink:0}
.lpd{width:4px;height:4px;background:var(--accent);border-radius:50%;animation:blink 1.5s infinite}
.nav-btns{display:flex;gap:4px;flex-shrink:0}
.nav-btn{background:var(--card);border:1px solid var(--border);color:var(--muted);font-size:9px;padding:3px 8px;border-radius:5px;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}
.nav-btn:hover{border-color:var(--accent);color:var(--text);background:rgba(124,58,237,.08)}
.nav-btn:active{transform:scale(.88)}

/* ── Channel grid ── */
.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}
.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}
@keyframes card-in{0%{opacity:0;transform:translateY(10px) scale(.93)}60%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
.grid-ch{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:8px 4px;text-align:center;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .2s cubic-bezier(.34,1.3,.64,1),box-shadow .2s ease;touch-action:manipulation;-webkit-user-select:none;user-select:none;position:relative;contain:layout style paint;content-visibility:auto;contain-intrinsic-size:0 90px}
.grid-ch.card-animate{animation:card-in .25s cubic-bezier(.34,1.2,.64,1) both}
.grid-logo img.lazy{opacity:0;transition:opacity .3s ease}
.grid-logo img.lazy.loaded{opacity:1}
.grid-fav-star{position:absolute;top:3px;right:4px;font-size:8px;color:#fbbf24;line-height:1;pointer-events:none;animation:fadeIn .2s ease}
.grid-ch:hover{border-color:var(--accent);transform:translateY(-3px) scale(1.04);box-shadow:0 8px 22px rgba(124,58,237,.25)}
.grid-ch:active{transform:scale(.91);background:rgba(124,58,237,.12);box-shadow:none;transition:transform .08s ease,background .08s ease}
.grid-ch.active{border-color:var(--accent);background:rgba(124,58,237,.14);box-shadow:0 0 0 1px rgba(124,58,237,.25)}
.grid-logo{width:36px;height:36px;border-radius:8px;background:var(--bg);margin:0 auto 5px;display:flex;align-items:center;justify-content:center;font-size:16px;border:1px solid var(--border);overflow:hidden}
.grid-logo img{width:100%;height:100%;object-fit:cover;border-radius:7px;image-rendering:auto}
.grid-name{font-size:9px;font-weight:500;line-height:1.3;word-break:break-word;color:#ddddf0}

/* ── Sidebar ── */
.sidebar{width:var(--sw);flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.sb-search{padding:8px;border-bottom:1px solid var(--border);flex-shrink:0;position:relative}
.search-clear{position:absolute;right:16px;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:hover{color:var(--text)}
.search-clear.visible{display:block}
.search-box{width:100%;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--text);font-size:12px;outline:none;transition:border-color .18s}
.search-box:focus{border-color:var(--accent)}
.search-box::placeholder{color:var(--muted)}
.group-list{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;padding:4px;touch-action:pan-y}
.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:8px;padding:7px 10px;border-radius:8px;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .15s 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,.04);transform:translateX(3px)}
.group-item:active{transform:scale(.97)}
.group-item.active{background:rgba(124,58,237,.14);border-color:rgba(124,58,237,.3);transform:translateX(0)}
.group-icon{width:30px;height:30px;border-radius:7px;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 .12s,border-color .12s}
.group-item:hover .group-icon{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.15)}
.group-item.active .group-icon{background:rgba(124,58,237,.25);border-color:rgba(124,58,237,.45)}
.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)}
.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)}

/* ── Skeleton ── */
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.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}

/* ── Player overlays ── */
@keyframes ov-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ov-fade-out{from{opacity:1}to{opacity:0}}
@keyframes load-logo-pop{0%{transform:scale(0.6) rotate(-8deg);opacity:0}60%{transform:scale(1.12) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes load-ring-spin{to{transform:rotate(360deg)}}
@keyframes load-ring-spin-rev{to{transform:rotate(-360deg)}}
@keyframes load-orbit{0%{transform:rotate(0deg) translateX(28px) rotate(0deg)}100%{transform:rotate(360deg) translateX(28px) rotate(-360deg)}}
@keyframes load-orbit2{0%{transform:rotate(180deg) translateX(28px) rotate(-180deg)}100%{transform:rotate(540deg) translateX(28px) rotate(-540deg)}}
@keyframes load-orbit3{0%{transform:rotate(90deg) translateX(20px) rotate(-90deg)}100%{transform:rotate(450deg) translateX(20px) rotate(-450deg)}}
@keyframes load-pulse-dot{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.5);opacity:1}}
@keyframes load-bar{0%{width:0%;opacity:1}70%{width:80%;opacity:1}85%{width:85%;opacity:.8}100%{width:90%;opacity:.7}}
@keyframes load-bar-done{from{width:85%}to{width:100%;opacity:0}}
@keyframes load-text-in{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@keyframes load-shimmer-text{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes load-particles{0%{transform:translateY(0) translateX(0) scale(1);opacity:.8}100%{transform:translateY(-40px) translateX(var(--px,10px)) scale(0);opacity:0}}
@keyframes load-glow-pulse{0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.0)}50%{box-shadow:0 0 0 8px rgba(124,58,237,.15),0 0 30px rgba(168,85,247,.2)}}
@keyframes load-wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(2.2)}}
@keyframes err-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

.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)}

/* ── Advanced Loading Overlay ── */
.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;
}

/* Orbit system */
.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}
/* Orbiting dots */
.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)}

/* Channel name */
.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;
}

/* Status text */
.load-status{font-size:10px;color:#6060aa;margin-bottom:14px;animation:load-text-in .3s ease both .25s;letter-spacing:.4px;min-height:14px}

/* Progress bar */
.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}

/* Wave equalizer (decorative) */
.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}
/* Channel loading credit - in normal flex flow, below waves */
.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)}

@media(max-width:700px){
  .ov-load{gap:6px;padding:8px 12px}
  .load-orbit-system{width:52px;height:52px;margin-bottom:8px}
  .load-center-logo{font-size:10px}
  .load-ring-outer{inset:-3px}
  .load-ring-inner{inset:8px}
  .load-ch-name{font-size:11px;margin-bottom:3px}
  .load-status{font-size:9px;margin-bottom:8px}
  .load-prog-wrap{width:90px;margin-bottom:6px}
  .load-waves{gap:2px;margin-top:1px}
  .load-wave-bar{width:2px}
  .load-credit{font-size:7px;margin-top:4px}
}
.err-icon{font-size:30px;display:block}
.err-icon.shake{animation:err-shake .4s ease}
.err-title{font-size:13px;font-weight:600;color:#ff6b6b}
.err-body{font-size:11px;color:var(--muted);max-width:230px;line-height:1.7}
.retry-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;padding:7px 18px;border-radius:7px;font-size:11px;cursor:pointer;font-weight:600;transition:opacity .18s ease,transform .12s cubic-bezier(.34,1.4,.64,1);margin-top:2px}
.retry-btn:hover{opacity:.88}
.retry-btn:active{transform:scale(.94)}
.ei{font-size:36px;opacity:.12}
.et{color:var(--muted);font-size:12px}
.es{color:var(--border);font-size:10px}

/* ── Toast ── */
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(10px);background:rgba(8,8,18,.96);border:1px solid var(--border);padding:6px 14px;border-radius:8px;font-size:11px;color:var(--text);opacity:0;transition:opacity .22s ease,transform .28s cubic-bezier(.34,1.3,.64,1);z-index:9999;white-space:nowrap;pointer-events:none;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.reset{transition:none;opacity:0;transform:translateX(-50%) translateY(10px)}
@media(max-width:700px){.toast{bottom:78px}}

/* ── Keyboard help modal ── */
.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 */
: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}

/* ── Mobile ── */
@media(max-width:700px){
  .root{height:100%;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  .body-wrap{flex:1;flex-direction:column;overflow:hidden;min-height:0;display:flex;overflow-x:clip}
  .player-area{order:1;flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
  .player-outer{padding:0!important;flex-shrink:0;background:#000}
  .player-wrapper{aspect-ratio:16/9!important;width:100%!important;max-height:38vh!important;max-width:none!important;border-radius:0!important;box-shadow:none!important}
  .theater-mode .player-wrapper{max-height:62vh!important}
  .player-wrapper video{height:100%!important;object-fit:contain}
  .info-bar{height:36px;flex-shrink:0;padding:3px 8px}
  .now-logo{width:26px;height:26px;font-size:12px}
  .now-info h2{font-size:10px}
  .now-info p{font-size:8px}
  .grid-section{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 8px 6px;min-height:0}
  .ch-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:5px}
  .grid-ch{contain-intrinsic-size:0 80px}
  .grid-logo{width:32px;height:32px;font-size:14px}
  .grid-name{font-size:8.5px}
  .grid-header{margin-bottom:5px}
  .sidebar{order:2;width:100%;flex-shrink:0;border-left:none;border-top:1px solid var(--border);height:calc(64px + env(safe-area-inset-bottom));min-height:calc(64px + env(safe-area-inset-bottom));max-height:calc(64px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow:visible;padding-bottom:env(safe-area-inset-bottom)}
  .sb-search{display:none}
  .group-list{flex:1;display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:6px 8px;gap:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:center;overscroll-behavior-x:contain;touch-action:pan-x;will-change:scroll-position}
  .group-list::-webkit-scrollbar{display:none}
  .group-item{flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 7px;text-align:center;min-width:52px;max-width:68px;flex-shrink:0;margin-bottom:0;border-radius:9px;min-height:50px;touch-action:manipulation}
  .group-info{display:flex!important;min-width:0;width:100%}
  .group-name{font-size:8px!important;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
  .group-badge{display:none}
  .group-icon{width:26px;height:26px;font-size:13px;flex-shrink:0}
  .controls{padding:20px 8px 8px;gap:4px;opacity:0}
  .player-wrapper.show-ctrl .controls{opacity:1!important}
  .player-wrapper.paused .controls{opacity:1!important}
  .ctrl-btn{min-width:38px;min-height:38px;padding:7px}
  .ctrl-btn svg{width:20px;height:20px}
  .vol-wrap{display:flex}
  .vol-slider{width:50px;height:5px}
  .vol-slider::-webkit-slider-thumb{width:14px;height:14px}
  .speed-wrap,.fit-wrap,.q-sel,.res-badge,.theater-btn{display:none!important}
  .prog-wrap{min-width:0;flex:1}
  .hdr-count,.nav-btns{display:none}
  .resize-handle{display:none}
  .sleep-indicator{font-size:9px;padding:2px 6px;max-width:82px}
}
@media(min-width:701px) and (max-width:1024px){:root{--sw:220px}.player-wrapper{max-height:52vh}.ch-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}}
@media(max-width:380px){
  header{padding:0 8px;gap:4px;height:40px}
  .logo-text{display:none}
  .hdr-btn{padding:3px 7px}
  .ch-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:4px}
  .player-wrapper{max-height:34vh!important}
  .sidebar{height:58px;min-height:58px;max-height:58px}
  .group-list{padding:4px 6px;gap:4px}
  .group-icon{width:22px;height:22px;font-size:11px}
  .group-item{min-width:44px;padding:3px 5px;min-height:46px}
  .group-name{font-size:7px!important}
  .ctrl-btn{min-width:34px;min-height:34px;padding:5px}
  .vol-wrap{display:none!important}}
@media(max-width:320px){.logo-mark{width:24px;height:24px;font-size:12px}.ch-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}}

/* ══════════════════════════════════════════
   PAGE SPLASH LOADING SCREEN
══════════════════════════════════════════ */
@keyframes splash-logo-in{0%{opacity:0;transform:scale(.55) rotate(-12deg)}65%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes splash-logo-glow{0%,100%{box-shadow:0 0 0 3px rgba(124,58,237,.2),inset 0 1px 0 rgba(255,255,255,.15)}50%{box-shadow:0 0 0 3px rgba(124,58,237,.35),0 0 28px rgba(168,85,247,.5),inset 0 1px 0 rgba(255,255,255,.15)}}
@keyframes splash-title-in{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes splash-sub-in{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes splash-bar-fill{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(.72);opacity:1}80%{transform:scaleX(.88);opacity:.9}100%{transform:scaleX(1);opacity:1}}
@keyframes splash-bar-shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes splash-ring-spin{to{transform:rotate(360deg)}}
@keyframes splash-ring-rev{to{transform:rotate(-360deg)}}
@keyframes splash-dot-pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.6);opacity:1}}
@keyframes splash-particle{0%{opacity:.8;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-55px) translateX(var(--spx,0px)) scale(0)}}
@keyframes splash-status-in{0%{opacity:0;transform:translateX(-4px)}100%{opacity:1;transform:translateX(0)}}
@keyframes splash-scanline{0%{transform:translateY(-100%)}100%{transform:translateY(100vh)}}
#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;
}
/* About modal */
.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}
.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}