:root{
  --preto:#0B0B0B; --vermelho:#E50914; --dourado:#C9A34E; --branco:#FFFFFF;
  --bg:#0B0B0B; --bg-2:#141414; --bg-3:#1c1c1c; --line:#2a2a2a;
  --txt:#f2f2f2; --txt-mut:#9a9a9a; --card:#181818;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--txt); min-height:100dvh;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none;cursor:pointer}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{display:block}
.hidden{display:none!important}

/* ---------- top nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:24px;
  padding:16px 4vw;transition:background .3s;
  background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,0));
}
.nav.solid{background:var(--preto)}
.nav .logo{font-size:24px;font-weight:800;letter-spacing:.5px}
.nav .logo b{color:var(--vermelho)} .nav .logo span{color:var(--dourado)}
.nav-links{display:flex;gap:20px;font-size:14px}
.nav-links a{color:var(--txt-mut);transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:var(--txt)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.search-box{display:flex;align-items:center;background:rgba(0,0,0,.6);border:1px solid var(--line);
  border-radius:6px;padding:7px 12px;gap:8px}
.search-box input{background:none;border:0;color:var(--txt);outline:none;font-size:14px;width:160px}
.avatar{width:34px;height:34px;border-radius:6px;background:var(--vermelho);display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:14px}
.nav-cta{background:var(--vermelho);color:#fff;padding:8px 18px;border-radius:6px;font-weight:600;font-size:14px}

/* ---------- hero ---------- */
.hero{position:relative;height:78vh;min-height:480px;display:flex;align-items:flex-end;
  padding:0 4vw 8vh}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center top;z-index:-2}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,11,11,.92) 0%,rgba(11,11,11,.55) 40%,rgba(11,11,11,.1) 70%),
             linear-gradient(0deg,var(--bg) 2%,rgba(11,11,11,0) 40%)}
.hero-content{max-width:560px}
.hero h1{font-size:clamp(28px,5vw,52px);font-weight:800;line-height:1.05;margin-bottom:16px;
  text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hero .meta{display:flex;gap:12px;align-items:center;margin-bottom:14px;color:var(--dourado);font-size:14px}
.hero .class-tag{border:1px solid var(--dourado);padding:1px 7px;border-radius:3px;font-size:12px}
.hero p{font-size:16px;color:#dcdcdc;line-height:1.5;margin-bottom:22px;max-width:480px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-play{background:var(--branco);color:#000;padding:12px 28px;border-radius:6px;font-weight:700;
  font-size:16px;display:flex;align-items:center;gap:8px}
.btn-play:hover{background:#e6e6e6}
.btn-info{background:rgba(80,80,80,.6);color:#fff;padding:12px 24px;border-radius:6px;font-weight:600;
  font-size:16px;display:flex;align-items:center;gap:8px}
.btn-info:hover{background:rgba(80,80,80,.4)}

/* ---------- rows / carousels ---------- */
.rows{padding:0 0 60px;margin-top:-6vh;position:relative;z-index:2}
.row{margin:0 0 36px}
.row h2{font-size:20px;font-weight:700;margin:0 4vw 12px;display:flex;align-items:center;gap:10px}
.row h2::before{content:'';width:4px;height:18px;background:var(--vermelho);border-radius:2px}
.row-scroll{display:flex;gap:8px;overflow-x:auto;padding:6px 4vw 14px;scroll-snap-type:x proximity;
  scrollbar-width:none}
.row-scroll::-webkit-scrollbar{display:none}
.card{flex:0 0 auto;width:200px;scroll-snap-align:start;cursor:pointer;transition:transform .2s;
  position:relative}
.card:hover{transform:scale(1.06);z-index:5}
.card .thumb{width:100%;aspect-ratio:16/9;border-radius:6px;object-fit:cover;background:var(--bg-3)}
.card .ph{width:100%;aspect-ratio:16/9;border-radius:6px;background:linear-gradient(135deg,#222,#111);
  display:flex;align-items:center;justify-content:center;color:#555;font-size:13px;text-align:center;padding:8px}
.card .ctitle{font-size:13px;color:var(--txt-mut);margin-top:7px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.card .prog{height:3px;background:#444;border-radius:2px;margin-top:7px;overflow:hidden}
.card .prog>i{display:block;height:100%;background:var(--vermelho)}
.card .class-badge{position:absolute;top:7px;left:7px;background:rgba(0,0,0,.7);
  border:1px solid var(--dourado);color:var(--dourado);font-size:10px;padding:1px 5px;border-radius:3px}

/* portrait cards p/ series */
.card.portrait{width:150px}
.card.portrait .thumb,.card.portrait .ph{aspect-ratio:2/3}

/* ---------- detail / player views ---------- */
.page{min-height:100dvh;padding:100px 4vw 60px}
.detail-hero{position:relative;border-radius:14px;overflow:hidden;margin-bottom:30px}
.detail-bg{width:100%;aspect-ratio:21/9;object-fit:cover;background:var(--bg-3)}
.detail-overlay{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg),transparent 70%),
  linear-gradient(90deg,rgba(11,11,11,.8),transparent 60%);display:flex;align-items:flex-end;padding:34px}
.detail-overlay h1{font-size:clamp(26px,4vw,42px);font-weight:800;max-width:600px}
.detail-meta{display:flex;gap:14px;color:var(--txt-mut);font-size:14px;margin:14px 0}
.detail-desc{max-width:720px;line-height:1.6;color:#cfcfcf;margin-bottom:22px}
.detail-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.btn-fav{background:var(--bg-3);border:1px solid var(--line);padding:12px 22px;border-radius:6px;
  font-weight:600;display:flex;align-items:center;gap:8px}
.btn-fav.active{border-color:var(--dourado);color:var(--dourado)}

/* player */
.player-wrap{background:#000;border-radius:12px;overflow:hidden;max-width:1100px;margin:0 auto 24px;
  position:relative}
video{width:100%;display:block;background:#000;aspect-ratio:16/9}
.player-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--bg-2);
  flex-wrap:wrap}
.player-bar button{color:var(--txt-mut);font-size:14px;display:flex;align-items:center;gap:6px}
.player-bar button:hover{color:var(--txt)}
.player-bar select{background:var(--bg-3);border:1px solid var(--line);color:var(--txt);
  border-radius:6px;padding:6px 10px;font-size:13px}
.player-bar .sp{flex:1}

/* ---------- grid (busca, minha lista, noticias) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.section-title{font-size:24px;font-weight:800;margin-bottom:20px}
.empty-state{text-align:center;color:var(--txt-mut);padding:80px 20px}

/* artigos */
.article{max-width:760px;margin:0 auto}
.article h1{font-size:32px;font-weight:800;margin-bottom:14px;line-height:1.15}
.article .a-meta{color:var(--txt-mut);font-size:14px;margin-bottom:24px}
.article .a-cover{width:100%;border-radius:12px;margin-bottom:24px}
.article .a-body{line-height:1.75;font-size:17px;color:#dcdcdc}
.article .a-body p{margin-bottom:18px}

.news-card{background:var(--card);border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .15s}
.news-card:hover{transform:translateY(-3px)}
.news-card .nc-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--bg-3)}
.news-card .nc-body{padding:14px}
.news-card h3{font-size:16px;margin-bottom:8px;line-height:1.3}
.news-card p{font-size:13px;color:var(--txt-mut);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.skeleton{background:linear-gradient(90deg,#181818,#222,#181818);background-size:200% 100%;
  animation:sk 1.4s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--bg-3);
  border:1px solid var(--dourado);color:var(--txt);padding:13px 22px;border-radius:10px;
  font-size:14px;z-index:80}

/* ---------- responsive ---------- */
@media(max-width:740px){
  .nav-links{display:none}
  .search-box input{width:110px}
  .hero{height:62vh;min-height:380px}
  .card{width:150px} .card.portrait{width:118px}
  .player-bar{gap:8px}
}

/* ============ AO VIVO (Fatia 4) ============ */
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.live-card{display:flex;gap:14px;background:var(--card);border-radius:12px;padding:16px;
  cursor:pointer;transition:transform .15s,border-color .15s;border:1px solid var(--line);position:relative;overflow:hidden}
.live-card:hover{transform:translateY(-3px);border-color:var(--vermelho)}
.live-card.is-off{opacity:.65}
.live-badge{position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;letter-spacing:.5px;
  display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:20px}
.live-badge.on{background:rgba(229,9,20,.18);color:#ff6b6b}
.live-badge.off{background:rgba(154,154,154,.15);color:var(--txt-mut)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--vermelho);animation:pulse 1.4s infinite}
.off-dot{width:8px;height:8px;border-radius:50%;background:var(--txt-mut)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.live-logo{width:64px;height:64px;border-radius:10px;background:var(--bg-3);display:flex;
  align-items:center;justify-content:center;font-size:28px;color:var(--dourado);flex:0 0 auto;overflow:hidden}
.live-logo img{width:100%;height:100%;object-fit:cover}
.live-info h3{font-size:17px;margin-bottom:6px}
.live-now{font-size:13px;color:var(--dourado)}
.live-next{font-size:12px;color:var(--txt-mut);margin-top:4px}

/* layout player ao vivo + chat */
.live-layout{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start;max-width:1280px;margin:0 auto}
.live-main{min-width:0}
.live-tag-over{position:absolute;top:14px;left:14px;background:rgba(0,0,0,.65);color:#fff;
  font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;display:flex;align-items:center;gap:6px;z-index:3}
.live-head{margin-top:14px}
.live-head h2{font-size:22px;font-weight:800}
.live-sub{display:flex;gap:16px;align-items:center;margin-top:8px;color:var(--txt-mut);font-size:14px;flex-wrap:wrap}
.viewers{display:flex;align-items:center;gap:6px}
.viewers::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--vermelho)}
.live-now-inline{color:var(--dourado)}

.live-offline{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a1a1a,#0d0d0d);color:var(--txt-mut);text-align:center;padding:20px;gap:8px}
.live-offline-icon{font-size:40px;opacity:.6}
.live-offline h3{color:var(--txt);font-size:20px}
.live-offline p{font-size:14px;max-width:340px}

/* grade */
.grade{display:flex;flex-direction:column;gap:2px;padding:0 4vw}
.grade-item{display:flex;gap:16px;padding:11px 14px;border-radius:8px;font-size:14px}
.grade-item:hover{background:var(--bg-2)}
.grade-item.now{background:rgba(229,9,20,.1);box-shadow:inset 3px 0 0 var(--vermelho)}
.g-time{color:var(--dourado);font-weight:600;min-width:48px}
.g-title em{color:var(--txt-mut);font-style:normal;font-size:12px}

/* chat */
.live-chat{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  display:flex;flex-direction:column;height:560px;position:sticky;top:90px}
.chat-head{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px}
.chat-msgs{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:9px}
.chat-msgs::-webkit-scrollbar{width:6px}.chat-msgs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.chat-msg{font-size:14px;line-height:1.4;word-break:break-word}
.chat-msg b{color:var(--dourado);margin-right:7px;font-weight:600}
.chat-msg span{color:#dcdcdc}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-input input{flex:1;background:var(--bg-3);border:1px solid var(--line);color:var(--txt);
  padding:10px 12px;border-radius:8px;outline:none;font-size:14px}
.chat-input input:focus{border-color:var(--dourado)}
.chat-input button{background:var(--vermelho);color:#fff;border-radius:8px;padding:0 16px;font-weight:600;font-size:14px}
.chat-login{display:block;text-align:center;color:var(--dourado);padding:12px;font-size:14px}

@media(max-width:900px){
  .live-layout{grid-template-columns:1fr}
  .live-chat{height:440px;position:static}
}