/* MeteFlix — tema escuro de streaming. Um único destaque de cor (laranja meteoro) sobre fundo quase preto. */
:root {
  --ink:#0c0b10; --surface:#17151d; --surface2:#221f2b; --line:#2f2b3a;
  --text:#f5f3f8; --muted:#a39eb0; --accent:#ff5a36; --accent-hover:#ff7452; --glow:#ffb24a;
  --pad:4vw; --radius:6px; --head-h:68px; --card-w:clamp(190px,19vw,300px);
  --display:'Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { background:var(--ink); }
body { margin:0; background:var(--ink); color:var(--text); -webkit-font-smoothing:antialiased;
  font:16px/1.5 'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif; }
h1,h2,h3 { font-family:var(--display); letter-spacing:-.02em; margin:0; }
h2 { font-size:1.35rem; margin:26px 0 12px; }
h3 { font-size:1.1rem; margin:18px 0 8px; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.muted { color:var(--muted); }
.hidden { display:none !important; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ---------- marca ---------- */
.brand { position:relative; display:inline-block; padding-bottom:7px; color:var(--accent);
  font:italic 900 1.7rem/1 var(--display); letter-spacing:-.03em; }
.brand::after { content:''; position:absolute; left:0; right:-.15em; bottom:0; height:3px; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--accent) 60%,var(--glow)); }

/* ---------- botões ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:4px; cursor:pointer;
  background:var(--accent); color:#fff; font-weight:600; padding:10px 20px; transition:background-color .15s; }
.btn:hover { background:var(--accent-hover); }
.btn:disabled { opacity:.55; cursor:wait; }
.btn.lg { padding:11px 26px; font-size:1.1rem; font-weight:700; }
.btn.light { background:#fff; color:#111; }
.btn.light:hover { background:#ffffffbf; }
.btn.dim { background:#6d6d6eb3; color:#fff; }
.btn.dim:hover { background:#6d6d6e66; }
.btn.ghost { background:var(--surface); border:1px solid var(--line); font-weight:500; padding:8px 14px; }
.btn.ghost:hover { background:var(--surface2); }
.btn.danger { background:transparent; border:1px solid #7a2a2a; color:#ff9d8f; font-weight:500; }
.btn.danger:hover { background:#7a2a2a44; }
.btn.small { padding:5px 11px; font-size:.85rem; }
.btn.block { width:100%; height:48px; margin-top:12px; font-size:1rem; }
.icon-btn { display:grid; place-items:center; width:36px; height:36px; background:none; border:0; color:#fff; cursor:pointer; padding:0; }

/* ---------- barra superior ---------- */
.top { position:fixed; inset:0 0 auto 0; z-index:30; height:var(--head-h); display:flex; align-items:center; gap:28px; padding:0 var(--pad);
  background-image:linear-gradient(#000c,#0000); transition:background-color .3s; }
.top.solid { background-image:none; background-color:var(--ink); box-shadow:0 1px 0 var(--line); }
.top nav { display:flex; gap:20px; overflow-x:auto; scrollbar-width:none; }
.top nav a { color:#e5e1ea; font-size:.95rem; white-space:nowrap; transition:color .2s; }
.top nav a:hover { color:#fff; }
.top nav a.on { color:#fff; font-weight:700; }
.top .right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.searchbox { display:flex; align-items:center; border:1px solid transparent; transition:border-color .2s, background-color .2s; }
.searchbox input[type=search] { width:0; padding:0; opacity:0; border:0; border-radius:0; background:transparent; color:#fff; transition:width .25s, opacity .2s; }
.searchbox.open { border-color:#fff; background:#000a; }
.searchbox.open input[type=search] { width:min(230px,42vw); padding:6px 8px; opacity:1; outline:none; }
.profile { position:relative; }
.avatar { width:34px; height:34px; border:0; border-radius:4px; background:var(--accent); color:#fff; font-weight:800; cursor:pointer; }
.dropdown { position:absolute; right:0; top:46px; min-width:230px; background:#000e; border:1px solid var(--line); border-radius:6px; padding:8px; box-shadow:0 14px 40px #000; }
.dropdown .who { padding:8px 12px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.dropdown .who small { display:block; color:var(--muted); }
.dropdown a,.dropdown button { display:block; width:100%; text-align:left; padding:9px 12px; background:none; border:0; border-radius:4px; color:#fff; cursor:pointer; }
.dropdown a:hover,.dropdown button:hover { background:var(--surface2); }

.view { min-height:100vh; }
.view.pad { padding:calc(var(--head-h) + 28px) var(--pad) 80px; }
.foot { padding:36px var(--pad) 48px; color:var(--muted); font-size:.85rem; }

/* ---------- destaque (billboard) ---------- */
.billboard { position:relative; min-height:clamp(440px,82vh,820px); display:flex; align-items:flex-end; overflow:hidden;
  padding:0 var(--pad) clamp(96px,17vh,180px);
  background:radial-gradient(900px 520px at 75% 20%,#ff5a3626,transparent),var(--surface); }
.billboard.detail { min-height:clamp(420px,72vh,720px); padding-bottom:clamp(48px,9vh,90px); }
.bb-img { position:absolute; inset:0; background-size:cover; background-position:center 20%; animation:bbIn 1.4s ease both; }
.billboard::before { content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,#000d 0,#0006 42%,transparent 72%),linear-gradient(0deg,var(--ink) 0,transparent 40%),linear-gradient(180deg,#000a 0,transparent 24%); }
.bb-body { position:relative; z-index:2; max-width:min(640px,92vw); }
.bb-title { font-size:clamp(2.4rem,6vw,4.8rem); font-weight:900; line-height:1.02; text-wrap:balance; text-shadow:0 2px 24px #000a; }
.bb-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:16px 0 12px; color:#d9d5e0; font-weight:600; }
.bb-genre { color:#bdb8c8; font-weight:500; }
.bb-over { font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.5; max-width:56ch; text-shadow:0 1px 8px #000; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.detail .bb-over { display:block; -webkit-line-clamp:unset; }
.bb-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
@keyframes bbIn { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:none; } }
.chip { border:1px solid #fff5; padding:0 7px; border-radius:3px; font-size:.75rem; font-weight:600; }

/* ---------- carrosséis ---------- */
.rows { position:relative; z-index:3; margin-top:-9vh; padding-bottom:50px; }
.rowwrap { position:relative; }
.rowwrap:hover { z-index:5; }
.row-title { font-size:clamp(1.05rem,1.6vw,1.4rem); font-weight:700; padding:0 var(--pad); margin:0 0 -6px; }
.rowbox { position:relative; }
.row { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
  padding:34px var(--pad) 110px; margin-bottom:-80px; scroll-padding:0 var(--pad); }
.row::-webkit-scrollbar { display:none; }
.arrow { position:absolute; top:34px; bottom:30px; width:var(--pad); min-width:44px; z-index:7; display:grid; place-items:center;
  background:#000a; color:#fff; border:0; cursor:pointer; opacity:0; transition:opacity .2s; }
.arrow.left { left:0; } .arrow.right { right:0; }
.rowbox:hover .arrow { opacity:1; }
@media (hover:none) { .arrow { display:none; } }

.card { flex:0 0 var(--card-w); position:relative; border-radius:var(--radius); cursor:pointer; transition:transform .22s ease; }
.card:first-child { transform-origin:left center; }
.card:last-child { transform-origin:right center; }
.c-thumb { position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background-size:cover; background-position:center 25%; }
.c-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#000c,transparent 58%); }
.c-name { position:absolute; left:12px; right:12px; bottom:10px; z-index:1; font-weight:700; font-size:.95rem; line-height:1.2; text-shadow:0 1px 6px #000;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bar { position:absolute; left:0; bottom:0; height:4px; background:var(--accent); z-index:2; }
.c-info { position:absolute; left:0; right:0; top:100%; padding:12px; background:var(--surface2); border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 20px 30px #000a; opacity:0; pointer-events:none; transition:opacity .15s; }
.c-btns { display:flex; gap:8px; }
.round { display:grid; place-items:center; width:34px; height:34px; padding:0; border-radius:50%; border:2px solid #fff6; background:#0008; color:#fff; cursor:pointer; }
.round:hover { border-color:#fff; }
.round.play { background:#fff; color:#000; border-color:#fff; }
.c-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:10px; font-size:.78rem; color:#d0ccd8; }
@media (hover:hover) {
  .card:hover,.card:focus-within { transform:scale(1.2); z-index:6; transition-delay:.12s; }
  .card:hover .c-info,.card:focus-within .c-info { opacity:1; pointer-events:auto; transition-delay:.12s; }
  .card:hover .c-thumb,.card:focus-within .c-thumb { border-bottom-left-radius:0; border-bottom-right-radius:0; }
}

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--card-w),1fr)); gap:60px 8px; padding-bottom:80px; }
.grid .card { flex:none; }
.empty { max-width:520px; margin:18vh auto 0; text-align:center; }
.empty h1 { font-size:2rem; margin-bottom:10px; }
.empty p { color:var(--muted); margin:0 0 20px; }

/* ---------- episódios ---------- */
.sec { padding:0 var(--pad); margin-top:4px; }
.sec-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 14px; }
.sec-head h2 { font-size:1.5rem; margin:0; }
select { padding:8px 12px; background:var(--surface2); border:1px solid var(--line); border-radius:4px; }
.eplist { border-top:1px solid var(--line); }
.ep { display:grid; grid-template-columns:48px minmax(120px,190px) 1fr; gap:20px; align-items:center; padding:18px 16px; border-bottom:1px solid var(--line); border-radius:4px; cursor:pointer; }
.ep:hover,.ep:focus-visible { background:var(--surface); }
.ep.off { opacity:.5; }
.ep-n { font-size:1.6rem; color:var(--muted); text-align:center; }
.ep-t { position:relative; aspect-ratio:16/9; border-radius:4px; overflow:hidden; background:var(--surface2) center/cover; }
.play-badge { position:absolute; inset:0; display:grid; place-items:center; background:#0006; opacity:0; transition:opacity .15s; color:#fff; }
.ep:hover .play-badge,.ep:focus-visible .play-badge { opacity:1; }
.ep-h { display:flex; justify-content:space-between; gap:12px; }
.ep-b p { margin:6px 0 0; color:var(--muted); font-size:.9rem; max-width:70ch; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:640px) {
  :root { --head-h:92px; --card-w:44vw; }
  .ep { grid-template-columns:26px 110px 1fr; gap:12px; padding:12px 4px; }
  .ep-n { font-size:1.1rem; }
  /* cabeçalho em duas linhas: marca e conta em cima, links embaixo */
  .top { flex-wrap:wrap; align-content:center; height:auto; min-height:var(--head-h); gap:4px 12px; padding-top:10px; padding-bottom:6px; }
  .top nav { order:3; flex:0 0 100%; gap:22px; }
  .top .right { margin-left:auto; }
  .brand { font-size:1.45rem; }
  .btn.lg { padding:10px 16px; font-size:1rem; }
  .bb-actions .btn { flex:1 1 auto; }
  .billboard { min-height:clamp(420px,76vh,700px); }
}

/* ---------- carregando ---------- */
.sk { border-radius:var(--radius); background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 37%,var(--surface) 63%); background-size:400% 100%; animation:sh 1.4s ease infinite; }
@keyframes sh { 0% { background-position:100% 0; } 100% { background-position:0 0; } }
.sk-hero { height:clamp(380px,70vh,700px); border-radius:0; }
.sk-title { height:30px; width:220px; margin:0 0 20px; }
.sk-row { display:flex; gap:6px; margin:28px 0; padding:0 var(--pad); overflow:hidden; }
.view.pad .sk-row { padding:0; }
.sk-card { flex:0 0 var(--card-w); aspect-ratio:16/9; }

/* ---------- login ---------- */
.auth-page { min-height:100vh; display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:radial-gradient(1100px 620px at 85% -10%,#ff5a3630,transparent 60%),radial-gradient(800px 500px at -5% 105%,#ffb24a18,transparent 60%),var(--ink); }
.auth-page::before { content:''; position:absolute; inset:-30%; pointer-events:none;
  background:repeating-linear-gradient(118deg,transparent 0 190px,#ffffff09 190px 191px,transparent 191px 420px); }
.auth-head { position:relative; padding:26px var(--pad); }
.auth-card { position:relative; margin:auto; width:min(450px,92vw); padding:clamp(26px,5vw,52px); margin-bottom:8vh; border-radius:6px; background:#000b; }
.auth-card h1 { font-size:2rem; margin-bottom:22px; }
.field { position:relative; margin-bottom:16px; }
.field input { width:100%; height:56px; padding:22px 16px 6px; background:#333a; border:1px solid #8c8c8c66; border-radius:4px; color:#fff; font-size:1rem; }
.field input:focus { outline:2px solid #fff; outline-offset:0; border-color:transparent; }
.field label { position:absolute; left:16px; top:17px; margin:0; color:#9a95a6; font-size:1rem; pointer-events:none; transition:top .15s, font-size .15s; }
.field input:focus + label,.field input:not(:placeholder-shown) + label { top:7px; font-size:.75rem; }
.auth-err { margin-bottom:16px; padding:10px 14px; border-left:3px solid var(--accent); border-radius:4px; background:#ff5a3622; color:#ffd9cf; font-size:.92rem; }
.auth-err:empty { display:none; }
.auth-alt { margin:22px 0 0; color:var(--muted); }
.auth-alt button { padding:0; border:0; background:none; color:#fff; font:inherit; cursor:pointer; }
.auth-alt button:hover { text-decoration:underline; }
.auth-note { margin-top:14px; font-size:.82rem; color:var(--muted); }

/* ---------- player ---------- */
#player { position:fixed; inset:0; z-index:50; display:none; background:#000; }
#player.on { display:block; }
#player video { width:100%; height:100%; background:#000; }
.ptop { position:absolute; top:0; left:0; right:0; z-index:2; display:flex; align-items:center; gap:16px; padding:18px var(--pad); background:linear-gradient(#000c,transparent); transition:opacity .3s; }
.ptop .back { width:40px; height:40px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:#0008; color:#fff; cursor:pointer; }
.ptop .title { flex:1; font-weight:600; text-shadow:0 1px 4px #000; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ptop .next { padding:9px 16px; border:1px solid #fff8; border-radius:4px; background:#000a; color:#fff; font-weight:600; cursor:pointer; }
.ptop .next:hover { background:#fff; color:#000; }
#player.idle .ptop { opacity:0; pointer-events:none; }
#player.idle { cursor:none; }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:60; display:none; max-width:90vw; padding:12px 18px; border:1px solid var(--line); border-radius:6px; background:var(--surface2); box-shadow:0 10px 30px #000; }

/* ---------- conta e administração ---------- */
.panel { margin:12px 0; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:8px; }
label { display:block; margin:12px 0 4px; font-size:.85rem; color:var(--muted); }
input[type=text],input[type=password],input[type=number],input[type=search],textarea,.panel select { width:100%; padding:9px 12px; background:var(--ink); border:1px solid var(--line); border-radius:6px; }
textarea { min-height:90px; resize:vertical; }
input[type=file] { width:100%; }
.err { min-height:20px; margin-top:12px; font-size:.92rem; color:#ff8a7a; }
.ok { color:#3ecf8e; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:640px) { .two { grid-template-columns:1fr; } }
.arow { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.arow:last-child { border-bottom:0; }
.arow .t { flex:none; width:44px; aspect-ratio:2/3; border-radius:6px; background:var(--ink) center/cover; }
.arow .grow { flex:1; min-width:0; }
.arow .grow b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.codebox { margin:12px 0; padding:14px; border:1px dashed var(--accent); border-radius:10px; text-align:center; user-select:all; font:600 1.3rem ui-monospace,Consolas,monospace; letter-spacing:1px; }
.progress { height:8px; margin-top:8px; overflow:hidden; background:var(--ink); border-radius:4px; }
.progress > div { height:100%; width:0; background:var(--accent); transition:width .2s; }
.subtabs { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; }
.page-head { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.big-avatar { display:grid; place-items:center; width:56px; height:56px; border-radius:6px; background:var(--accent); font-size:1.6rem; font-weight:800; }