/* ============================================
 EFX IPTV — Pro Dark Theme  v3.1
   ============================================ */

:root{
  --bg:#0b0e14; --bg2:#0f1319; --surface:#141820; --surface2:#1a1f2b;
  --side:#0d1017; --panel:rgba(255,255,255,.04); --panel-hi:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.06); --line2:rgba(255,255,255,.12);
  --text:#e8edf5; --muted:#6b7a92;
  --accent:#00e59b; --accent2:#00b8ff; --accent3:#8b5cf6; --pink:#ff4d7e;
  --r:14px; --topbar-h:64px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}

body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.5;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(800px 500px at 80% 0%,#00e59b0e,transparent 60%),
    radial-gradient(600px 400px at 10% 5%,#00b8ff0c,transparent 60%),
    var(--bg);
}

button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#ffffff12;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#ffffff22}
::-webkit-scrollbar-track{background:transparent}

/* ===== LAYOUT ===== */
.app{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}

/* ===== SIDEBAR ===== */
.sidebar{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  background:var(--side);border-right:1px solid var(--line);z-index:50;
}
.brand{display:flex;align-items:center;gap:12px;padding:20px 18px;border-bottom:1px solid var(--line)}
.brand-icon{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#021a12;font-size:16px;font-weight:900;box-shadow:0 6px 20px -6px var(--accent);
}
.brand-name{font-size:18px;font-weight:900;letter-spacing:-.5px}
.brand-name span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-sub{font-size:8px;letter-spacing:2.5px;color:var(--muted);margin-top:2px;font-weight:700}

.side-scroll{flex:1;overflow-y:auto;padding:8px 10px 20px}
.side-label{font-size:9px;font-weight:800;letter-spacing:2px;color:#4a5568;padding:18px 10px 6px;display:flex;align-items:center;gap:8px}
.side-label::after{content:"";flex:1;height:1px;background:var(--line)}

.side-btn{
  width:100%;display:flex;align-items:center;gap:11px;padding:10px 12px;margin-bottom:2px;
  border-radius:10px;color:#8a96aa;font-size:12px;font-weight:700;text-align:left;
  transition:.15s;position:relative;
}
.side-btn:hover{background:var(--panel-hi);color:#cdd6e3}
.side-btn.active{background:linear-gradient(90deg,#00e59b18,#00b8ff0a);color:var(--accent)}
.side-btn.active::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:0 4px 4px 0;background:var(--accent)}
.side-ico{width:18px;text-align:center;font-size:14px}
.side-count{margin-left:auto;font-size:9px;font-weight:800;color:var(--muted);background:#ffffff0a;padding:2px 7px;border-radius:20px}
.side-btn.active .side-count{color:var(--accent);background:#00e59b18}

.group-btn{width:100%;display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:8px;color:#7b8a9e;font-size:11.5px;text-align:left;transition:.15s}
.group-btn:hover{background:var(--panel-hi);color:#c4cede}
.group-btn.active{color:var(--accent);background:#00e59b10}
.gdot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.group-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.group-count{font-size:9px;color:#4e5a6e;font-weight:700}

.side-foot{padding:12px 18px;border-top:1px solid var(--line);font-size:9.5px;color:#4a5568;line-height:1.8}
.side-foot b{color:#a0aec0}

/* ===== TOPBAR ===== */
.topbar{
  position:sticky;top:0;z-index:40;height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 22px;
  background:rgba(11,14,20,.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);
}
.top-left{display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;width:40px;height:40px;border-radius:10px;font-size:18px;color:var(--muted);background:var(--panel);border:1px solid var(--line)}
.page-title{font-size:15px;font-weight:850;letter-spacing:-.3px}
.page-sub{font-size:10px;color:var(--muted);margin-top:2px}
.top-right{display:flex;align-items:center;gap:10px}

.search{display:flex;align-items:center;gap:8px;height:40px;padding:0 13px;width:min(300px,30vw);border-radius:10px;background:var(--surface);border:1px solid var(--line);transition:.2s}
.search:focus-within{border-color:#00e59b55;box-shadow:0 0 0 3px #00e59b10}
.search i{font-style:normal;font-size:15px;color:var(--muted)}
.search input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:12px}
.search input::placeholder{color:#505d72}

.live-pill{display:flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:10px;font-size:9px;font-weight:900;letter-spacing:.8px;color:var(--accent);background:#00e59b0c;border:1px solid #00e59b22}
.pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #00e59b70}50%{box-shadow:0 0 0 5px #00e59b00}}

.content{padding:20px 22px 50px;max-width:1600px;margin:auto}

/* ===== STICKY PLAYER ===== */
.top-player{margin-bottom:18px}
.top-player.sticky{position:sticky;top:var(--topbar-h);z-index:35}

.player-container{
  border-radius:16px;overflow:hidden;background:#090c12;border:1px solid var(--line2);
  box-shadow:0 20px 60px -20px #000c;animation:playerIn .3s ease-out;
}
@keyframes playerIn{from{transform:scale(.97) translateY(6px);opacity:0}to{transform:none;opacity:1}}

.tp-video{position:relative;aspect-ratio:16/9;background:#000;max-height:65vh;transition:height .25s ease}
.tp-video video{width:100%;height:100%;display:block;background:#000}

.top-player.minimized .tp-video{height:0;aspect-ratio:auto;max-height:0;overflow:hidden}

.tp-status{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;font-size:12px;color:#8b9ab3;background:#080b11dd}
.spin{width:34px;height:34px;border-radius:50%;margin:0 auto 12px;border:3px solid #ffffff10;border-top-color:var(--accent);animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

.player-tools{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:5}
.ptool{
  width:34px;height:34px;border-radius:8px;background:#000000aa;backdrop-filter:blur(6px);
  border:1px solid #ffffff18;color:#ccd5e2;font-size:15px;display:grid;place-items:center;transition:.15s;
}
.ptool:hover{background:#00e59b22;color:var(--accent);border-color:#00e59b44}

.tp-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface);border-top:1px solid var(--line)}
.tp-logo{width:38px;height:38px;border-radius:10px;background:#0d1118;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex:none}
.tp-logo img{width:100%;height:100%;object-fit:contain;padding:3px}
.tp-info{min-width:0;flex:1}
.tp-name{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-grp{font-size:10px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:6px;min-width:0}
.tp-grp span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tp-actions{display:flex;gap:6px;flex:none}
.tp-btn{width:34px;height:34px;border-radius:9px;background:var(--panel);border:1px solid var(--line);font-size:14px;color:#8b9ab3;display:grid;place-items:center;transition:.15s}
.tp-btn:hover{background:var(--panel-hi);color:#fff;border-color:var(--line2)}
.tp-btn.on{color:var(--pink);border-color:#ff4d7e33;background:#ff4d7e10}
.tp-close-btn:hover{color:var(--pink);border-color:#ff4d7e33;background:#ff4d7e10}

/* ===== RELATED ===== */
.related{margin-bottom:18px}
.rel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rel-title{font-size:13px;font-weight:900;display:flex;align-items:center;gap:8px}
.rel-scroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

/* ===== STATS ===== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.stat{padding:16px 17px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);transition:.2s}
.stat:hover{border-color:var(--line2);transform:translateY(-2px)}
.stat-top{display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:800;letter-spacing:1.2px;color:var(--muted)}
.stat-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px}
.i-a{background:#00e59b12;color:var(--accent)}
.i-b{background:#00b8ff12;color:var(--accent2)}
.i-c{background:#ff4d7e12;color:var(--pink)}
.stat-val{font-size:24px;font-weight:900;letter-spacing:-1px;margin-top:8px}

/* ===== SECTIONS ===== */
.section{margin-top:26px}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sec-title{font-size:15px;font-weight:900;letter-spacing:-.3px;display:flex;align-items:center;gap:8px;min-width:0}
.sec-bar{width:3px;height:16px;border-radius:3px;background:linear-gradient(var(--accent),var(--accent2));flex:none}
.link-btn{color:var(--accent);font-size:11px;font-weight:800;padding:6px 2px;flex:none}
.link-btn:hover{text-decoration:underline}

/* ===== CHIPS ===== */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin}
.chip{flex:none;display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:26px;background:var(--surface);border:1px solid var(--line);color:#8a96aa;font-size:11px;font-weight:750;white-space:nowrap;transition:.15s}
.chip:hover{color:#d0d9e6;border-color:var(--line2)}
.chip small{font-size:9.5px;color:#505d72;font-weight:800}
.chip.active{color:#021a12;border-color:transparent;background:linear-gradient(100deg,var(--accent),var(--accent2));box-shadow:0 8px 20px -10px var(--accent)}
.chip.active small{color:#04291f}

/* ===== FEATURED ===== */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.feat{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:.2s;user-select:none}
.feat:hover{transform:translateY(-2px);border-color:#00e59b44;background:#00e59b08;box-shadow:0 14px 30px -18px #000}
.feat .shine{position:absolute;inset:0;opacity:0;transition:.3s;background:linear-gradient(100deg,transparent,#00e59b08,transparent)}
.feat:hover .shine{opacity:1}
.thumb{width:46px;height:46px;flex:none;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:#0d1118;border:1px solid var(--line);font-weight:900;color:var(--accent);font-size:15px}
.thumb img{width:100%;height:100%;object-fit:contain;padding:4px}
.feat-txt{min-width:0;flex:1}
.feat-name{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat-grp{margin-top:4px;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feat-play{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:#ffffff0a;color:var(--accent);font-size:10px;transition:.2s}
.feat:hover .feat-play{background:linear-gradient(100deg,var(--accent),var(--accent2));color:#021a12;transform:scale(1.05)}

/* ===== DIRECTORY ===== */
.dir{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.dir-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dir-title{font-size:12px;font-weight:900;letter-spacing:.5px}
.dir-count{font-size:10px;color:var(--muted);margin-top:3px}
.dir-tools{display:flex;align-items:center;gap:8px}
.sel{height:36px;padding:0 10px;border-radius:10px;font-size:11px;font-weight:700;background:var(--bg);border:1px solid var(--line);cursor:pointer}
.vtoggle{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.vbtn{width:32px;height:30px;border-radius:7px;color:#6b7a92;font-size:13px;display:grid;place-items:center;transition:.12s}
.vbtn.active{background:#00e59b18;color:var(--accent)}

/* ===== ROWS ===== */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:36px 46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 16px;min-height:68px;border-bottom:1px solid var(--line);cursor:pointer;transition:.12s;user-select:none}
.row:last-child{border-bottom:0}
.row:hover{background:#00e59b06}
.row:hover .rnum{color:var(--accent)}
.row.playing{background:#00e59b0d}
.row.playing .rnum{color:var(--accent)}

.rnum{font-size:10px;font-weight:800;color:#4a5568;text-align:center;letter-spacing:.5px}
.rlogo{width:44px;height:44px;border-radius:11px;overflow:hidden;display:grid;place-items:center;background:#0d1118;border:1px solid var(--line);color:var(--accent);font-weight:900;font-size:14px;position:relative}
.rlogo img{width:100%;height:100%;object-fit:contain;padding:3px}
.rlogo::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;background:#000000aa;color:var(--accent);opacity:0;transition:.15s}
.row:hover .rlogo::after{opacity:1}

.rname{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmeta{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:9.5px;color:var(--muted);min-width:0}
.tag{padding:2px 7px;border-radius:16px;background:#ffffff08;border:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.live{color:var(--accent);background:#00e59b0c;border-color:#00e59b20;font-weight:800;letter-spacing:.5px}

.ract{display:flex;align-items:center;gap:6px}
.ico-btn{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:14px;background:var(--bg);border:1px solid var(--line);color:#7b8a9e;transition:.15s}
.ico-btn:hover{border-color:var(--line2);color:#d0d9e6}
.ico-btn.on{color:var(--pink);border-color:#ff4d7e33;background:#ff4d7e0e}
.play-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:10px;font-size:10px;font-weight:900;letter-spacing:.5px;color:#021a12;background:linear-gradient(100deg,var(--accent),var(--accent2));transition:.2s}
.play-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px var(--accent)}

/* ===== CARDS ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;padding:14px}
.card{position:relative;overflow:hidden;border-radius:var(--r);background:var(--bg2);border:1px solid var(--line);cursor:pointer;transition:.2s;user-select:none}
.card:hover{transform:translateY(-3px);border-color:#00e59b44;box-shadow:0 16px 36px -20px #000}
.card.playing{border-color:#00e59b66}
.card-art{position:relative;aspect-ratio:16/10;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#151c2a,#0b1017)}
.card-art img{width:65%;height:65%;object-fit:contain}
.card-ph{font-size:22px;font-weight:900;color:#00e59b44}
.card-play{position:absolute;inset:0;display:grid;place-items:center;background:#000000aa;opacity:0;transition:.2s}
.card:hover .card-play{opacity:1}
.card-play i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;background:linear-gradient(100deg,var(--accent),var(--accent2));color:#021a12}
.card-fav{position:absolute;top:7px;right:7px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:#b8c4d5;background:#0a0e14cc;backdrop-filter:blur(6px);border:1px solid var(--line);transition:.15s;z-index:2}
.card-fav.on{color:var(--pink);border-color:#ff4d7e33}
.card-no{position:absolute;top:7px;left:7px;font-size:9px;font-weight:800;color:#b8c4d5;background:#0a0e14cc;backdrop-filter:blur(6px);padding:3px 7px;border-radius:16px;border:1px solid var(--line);z-index:2}
.card-body{padding:10px 11px 12px}
.card-name{font-size:11.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-grp{margin-top:4px;font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== SKELETON ===== */
.sk{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.sk div{border-radius:8px;background:linear-gradient(90deg,#ffffff06,#ffffff10,#ffffff06);background-size:200% 100%;animation:sh 1.2s infinite}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk .a{width:44px;height:44px;flex:none}
.sk .b{height:10px;width:min(220px,42%)}
.sk .c{height:8px;width:100px;margin-top:7px}

/* ===== EMPTY / MORE ===== */
.empty{padding:50px 22px;text-align:center;color:var(--muted);font-size:12px;line-height:1.9}
.empty b{display:block;color:#d0d9e6;font-size:14px;margin-bottom:5px}
.empty .ei{font-size:30px;margin-bottom:10px;opacity:.4}
.more-wrap{padding:16px;display:flex;justify-content:center}
.more{height:42px;padding:0 24px;border-radius:11px;font-size:11px;font-weight:800;background:var(--surface);border:1px solid var(--line2);color:#c4cede;transition:.2s}
.more:hover{border-color:#00e59b55;color:var(--accent);background:#00e59b08}

/* ===== FOOTER ===== */
.foot{text-align:center;padding:26px 10px 4px;font-size:9.5px;color:#4a5568;line-height:2}
.foot b{color:var(--accent)}
.kbd-hint{opacity:.6;font-size:9px}

/* ===== TOAST ===== */
.toast{position:fixed;left:50%;bottom:24px;z-index:200;transform:translate(-50%,14px);padding:11px 18px;border-radius:12px;font-size:12px;font-weight:600;background:#131920f2;border:1px solid var(--line2);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:.2s;max-width:90vw;text-align:center;box-shadow:0 16px 36px -16px #000}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== SIDEBAR OVERLAY ===== */
.sidebar-overlay{display:none;position:fixed;inset:0;z-index:45;background:#000000aa;backdrop-filter:blur(4px)}
.sidebar-overlay.show{display:block}

/* ===== MOBILE ===== */
.mnav{display:none}

@media(max-width:1100px){
  .content{padding:18px}
  .topbar{padding:0 18px}
}

@media(max-width:860px){
  :root{--topbar-h:58px}
  .app{display:block;padding-bottom:72px}
  .sidebar{position:fixed;left:0;top:0;width:260px;height:100vh;transform:translateX(-100%);transition:transform .25s;z-index:50}
  .sidebar.open{transform:translateX(0)}
  .menu-toggle{display:grid}
  .topbar{height:var(--topbar-h);padding:0 12px;gap:8px}
  .page-title{font-size:13.5px}
  .page-sub{font-size:9px}
  .search{width:42px;height:38px;padding:0 11px;transition:width .2s}
  .search input{width:0;padding:0}
  .search:focus-within{width:min(200px,50vw)}
  .search:focus-within input{width:100%}
  .live-pill{height:38px;padding:0 10px;font-size:0;gap:0}
  .content{padding:12px 10px 22px}
  .stats{gap:7px}
  .stat{padding:12px 11px}
  .stat-top{font-size:8px;letter-spacing:.5px}
  .stat-val{font-size:20px}
  .stat-ico{width:24px;height:24px;font-size:11px}
  .sec-title{font-size:14px}
  .feat-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:8px}
  .feat{padding:9px;gap:9px}
  .feat-play{display:none}
  .thumb{width:40px;height:40px}
  .dir-head{padding:11px 12px}
  .row{grid-template-columns:26px 42px minmax(0,1fr) auto;gap:9px;padding:9px 10px;min-height:62px}
  .rlogo{width:40px;height:40px}
  .play-btn{width:34px;padding:0;font-size:0;justify-content:center}
  .play-btn::after{content:"▶";font-size:10px}
  .cards{grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:8px;padding:10px}
  .rel-scroll{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
  .toast{bottom:82px}
  .kbd-hint{display:none}

  .mnav{
    position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);
    background:rgba(11,14,20,.95);backdrop-filter:blur(20px);border-top:1px solid var(--line);
    padding:7px 4px calc(7px + env(safe-area-inset-bottom));
  }
  .mbtn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px;font-size:8.5px;font-weight:800;color:#5c6a7e;transition:.12s}
  .mbtn b{font-size:16px;font-weight:400}
  .mbtn.active{color:var(--accent)}
}

@media(max-width:400px){
  .row{grid-template-columns:22px 38px minmax(0,1fr) auto;gap:7px}
  .rlogo{width:36px;height:36px}
  .ico-btn{width:30px;height:32px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}