/* ============================================================
   MDPlay — tema dark estilo streaming
   ============================================================ */
:root {
    --bg: #000;
    --surface: #141414;
    --surface-2: #1f1f1f;
    --text: #f5f5f5;
    --text-dim: #b3b3b3;
    --accent-1: #fb1c53;
    --accent-2: #ff6a13;
    --grad: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    --radius: 8px;
    --pad: clamp(16px, 4vw, 48px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* O atributo hidden precisa vencer a regra acima: 'img{display:block}' e' regra
   de autor e ganha do display:none que o navegador aplica a [hidden]. Sem isto
   uma <img hidden> continua ocupando espaco — foi o retangulo preto que
   aparecia no compositor de story, e no visualizador mostraria imagem e video
   ao mesmo tempo. */
[hidden] { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* ---------------- topbar ---------------- */
.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,0));
    transition: background .25s ease;
}
.topbar.solid,
.topbar.scrolled { background: rgba(10,10,10,.97); box-shadow: 0 1px 0 rgba(255,255,255,.06); }

.topbar-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 14px var(--pad);
    max-width: 1600px;
    margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brand-name { font-size: 22px; font-weight: 400; letter-spacing: -.5px; }
.brand-name strong { font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.mainnav { display: flex; gap: 22px; flex: 1; }
.mainnav a {
    color: var(--text-dim);
    font-size: 14.5px;
    font-weight: 600;
    padding: 6px 2px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-bottom: 2px solid transparent;
    transition: color .2s;
}
.mainnav a:hover { color: var(--text); }
.mainnav a.active { color: var(--text); border-bottom-color: var(--accent-1); }

.topbar-right { display: flex; align-items: center; gap: 14px; }

.searchbox {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
}
.searchbox button { background: none; border: 0; color: var(--text-dim); display: flex; }
.searchbox input {
    background: none;
    border: 0;
    outline: 0;
    color: var(--text);
    font-size: 14px;
    padding: 4px 8px;
    width: 140px;
    transition: width .25s;
}
.searchbox input:focus { width: 200px; }
.searchbox input::placeholder { color: var(--text-dim); }

.btn-assine {
    background: var(--grad);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 18px;
    border-radius: 999px;
    white-space: nowrap;
    transition: filter .2s, transform .2s;
}
.btn-assine:hover { filter: brightness(1.15); transform: translateY(-1px); }

.btn-entrar {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    white-space: nowrap;
    transition: border-color .2s;
}
.btn-entrar:hover { border-color: #fff; }

.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 22px; }

.dot-live {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff2e2e;
    display: inline-block;
    animation: pulse 1.6s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------------- hero ---------------- */
.hero {
    position: relative;
    min-height: 78vh;
    display: flex;
    align-items: flex-end;
    background: var(--hero-bg) center 20% / cover no-repeat, var(--surface);
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.92) 88%, #000 100%),
        linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 60%);
}
.hero.empty { min-height: 60vh; background: radial-gradient(ellipse at 30% 20%, #2a0d18, #000 70%); }

.hero-content { position: relative; padding: 0 var(--pad) 56px; max-width: 720px; }
.hero-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    margin-bottom: 10px;
}
.hero-title { font-size: clamp(30px, 5vw, 56px); font-weight: 800; line-height: 1.08; margin-bottom: 10px; }
.hero-meta { color: var(--text-dim); font-size: 15px; margin-bottom: 24px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn-play {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    color: #000;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 30px;
    border-radius: 999px;
    transition: transform .15s, box-shadow .15s;
}
.btn-play:hover { transform: scale(1.04); box-shadow: 0 6px 24px rgba(255,255,255,.25); }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: 999px;
    transition: background .2s;
}
.btn-ghost:hover { background: rgba(255,255,255,.22); }
.full { width: 100%; justify-content: center; }

/* ---------------- rails ---------------- */
.rails { padding: 28px 0 60px; display: flex; flex-direction: column; gap: 38px; }

.rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 var(--pad);
    margin-bottom: 14px;
}
.rail-head h2 { font-size: 19px; font-weight: 700; }
.rail-more { color: var(--text-dim); font-size: 13.5px; font-weight: 600; transition: color .2s; }
.rail-more:hover { color: var(--text); }
.rail-more span { font-size: 17px; }

.rail-wrap { position: relative; }
.rail-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0 var(--pad);
    scrollbar-width: none;
}
.rail-track::-webkit-scrollbar { display: none; }

.rail-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    z-index: 5;
    border: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,0));
    color: #fff;
    font-size: 34px;
    opacity: 0;
    transition: opacity .2s;
}
.rail-arrow.next { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.85), rgba(0,0,0,0)); }
.rail-arrow.prev { left: 0; }
.rail-wrap:hover .rail-arrow { opacity: 1; }

/* ---------------- cards ---------------- */
.card {
    flex: 0 0 auto;
    width: clamp(200px, 22vw, 300px);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 30px rgba(0,0,0,.6); }

.card-img { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .2s;
}
.card:hover .card-play { opacity: 1; }

.card-body { padding: 10px 12px 13px; display: flex; flex-direction: column; gap: 3px; }
.card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-cat { font-size: 12px; color: var(--text-dim); }

/* ---------------- watch (vídeo / ao vivo) ---------------- */
.watch { padding: 84px var(--pad) 8px; max-width: 1280px; margin: 0 auto; }

.player-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0a0a0a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.player-frame iframe,
.player-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.player-empty {
    position: absolute; inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-dim);
    font-size: 17px;
    background: radial-gradient(ellipse at 50% 30%, #1c1c1c, #0a0a0a 75%);
}
.player-empty .muted { font-size: 14px; opacity: .7; }

.watch-info { padding: 22px 4px 10px; }
.watch-info h1 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; margin: 8px 0; }
.watch-meta { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 14px; flex-wrap: wrap; }
.watch-meta .sep { opacity: .5; }
.watch-cast { margin-top: 12px; color: var(--text-dim); font-size: 14px; }
.watch-cast strong { color: var(--text); }

.chip {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    transition: background .2s;
}
.chip:hover { background: rgba(255,255,255,.2); }

.badge-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #d40e0e;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 5px 14px;
    border-radius: 4px;
}
.badge-live.off { background: #333; color: var(--text-dim); }

/* ---------------- listagens ---------------- */
.listing { padding: 104px var(--pad) 70px; max-width: 1600px; margin: 0 auto; }
.listing-title { font-size: clamp(24px, 3.4vw, 38px); font-weight: 800; margin-bottom: 26px; }

.breadcrumb { color: var(--text-dim); font-size: 13.5px; margin-bottom: 8px; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span { margin: 0 6px; opacity: .5; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}
.grid .card { width: auto; }

.empty-msg { color: var(--text-dim); font-size: 15px; }

/* categorias em cards gradientes */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.cat-card {
    border-radius: 12px;
    padding: 34px 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 130px;
    justify-content: flex-end;
    transition: transform .2s, filter .2s;
}
.cat-card:hover { transform: translateY(-4px); filter: brightness(1.15); }
.cat-name { font-size: 19px; font-weight: 800; }
.cat-count { font-size: 13px; opacity: .85; }

.grad1 { --g1: #fb1c53; --g2: #ff6a13; }
.grad2 { --g1: #6a11cb; --g2: #2575fc; }
.grad3 { --g1: #0f9b6e; --g2: #38ef7d; color: #06281c; }
.grad4 { --g1: #f7971e; --g2: #ffd200; color: #3a2a00; }
.grad5 { --g1: #c31432; --g2: #240b36; }
.grad6 { --g1: #396afc; --g2: #2948ff; }
.grad1, .grad2, .grad3, .grad4, .grad5, .grad6 { background: linear-gradient(135deg, var(--g1), var(--g2)); }

/* card de canal com imagem: foto à direita + degradê sobreposto com transparência */
.cat-card { position: relative; overflow: hidden; }
.cat-card .cat-bg {
    position: absolute;
    top: 8px; right: 8px; bottom: 8px;   /* leve sobra do fundo ao redor da imagem */
    width: 50%;                           /* imagem ocupa no máximo metade do card */
    max-width: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    z-index: 0;
}
.cat-card.has-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--g1) 35%, rgba(0,0,0,0) 100%);
    z-index: 1;
    pointer-events: none;
}
.cat-card .cat-name,
.cat-card .cat-count,
.cat-card .canal-avatar { position: relative; z-index: 2; }
.cat-card.has-img { min-height: 150px; }

/* Canais em carrossel (rail): cards no formato 16:9 */
.canal-rail .rail-track { padding: 6px var(--pad); }
.canal-rail .cat-card {
    flex: 0 0 auto;
    width: 280px;
    aspect-ratio: 16 / 9;     /* card no formato 16x9 */
    min-height: 0;
    padding: 16px 18px;
}
.canal-rail .cat-card.has-img { min-height: 0; }
.canal-rail .cat-card.is-hidden { display: none; }
.canal-rail .rail-arrow { opacity: 0; }
.canal-rail:hover .rail-arrow { opacity: 1; }

/* ---------------- assine ---------------- */
.assine-hero {
    padding: 130px var(--pad) 40px;
    text-align: center;
    background: radial-gradient(ellipse at 50% -10%, #3a0e1e, transparent 65%);
}
.assine-hero h1 { font-size: clamp(28px, 4.6vw, 52px); font-weight: 800; max-width: 820px; margin: 0 auto 14px; line-height: 1.12; }
.assine-hero p { color: var(--text-dim); font-size: 17px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding: 30px var(--pad);
    max-width: 1100px;
    margin: 0 auto;
}
.plano {
    background: var(--surface);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}
.plano.destaque { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; }
.plano-tag {
    position: absolute;
    top: -13px; left: 50%;
    transform: translateX(-50%);
    background: var(--grad);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 999px;
}
.plano h3 { font-size: 18px; font-weight: 700; }
.plano-preco { font-size: 34px; font-weight: 800; }
.plano-preco span { font-size: 14px; font-weight: 500; color: var(--text-dim); }
/* A taxa fica colada no preco de proposito: e ela que decide qual plano
   sai mais barato, e nao a mensalidade. Quem le so o valor do mes
   escolhe errado. */
.plano-taxa { display: flex; align-items: baseline; gap: 7px; margin-top: -4px;
              font-size: 19px; font-weight: 800; color: var(--accent-2); }
.plano-taxa span { font-size: 12.5px; font-weight: 500; color: var(--text-dim); }

.planos-nota { max-width: 760px; margin: -18px auto 0; padding: 0 var(--pad);
               text-align: center; color: var(--text-dim); font-size: 13.5px;
               line-height: 1.6; }

.plano ul { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plano li { color: var(--text-dim); font-size: 14px; padding-left: 24px; position: relative; }
.plano li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-2); font-weight: 800; }

.faq { max-width: 760px; margin: 0 auto; padding: 40px var(--pad) 80px; }
.faq h2 { font-size: 24px; font-weight: 800; margin-bottom: 20px; }
.faq details { border-bottom: 1px solid rgba(255,255,255,.1); padding: 16px 4px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none; }
.faq summary::after { content: '+'; float: right; color: var(--text-dim); font-size: 20px; }
.faq details[open] summary::after { content: '–'; }
.faq p { color: var(--text-dim); font-size: 14.5px; margin-top: 10px; line-height: 1.6; }
.faq a { color: var(--accent-2); }

/* ---------------- not found ---------------- */
.notfound {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 100px var(--pad) 40px;
}
.notfound h1 { font-size: clamp(22px, 3vw, 34px); }
.notfound p { color: var(--text-dim); margin-bottom: 10px; }

/* ---------------- footer ---------------- */
.footer { border-top: 1px solid rgba(255,255,255,.08); background: #0a0a0a; }
.footer-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 44px var(--pad);
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
    justify-content: space-between;
}
.footer-brand p { color: var(--text-dim); font-size: 13.5px; margin-top: 8px; max-width: 320px; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--text-dim); font-size: 13.5px; font-weight: 600; }
.footer-links a:hover { color: var(--text); }
.footer-copy { width: 100%; color: #666; font-size: 12.5px; }

/* ---------------- usuário logado ---------------- */
.usermenu { position: relative; }
.usermenu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 4px 12px 4px 4px;
    color: var(--text);
    transition: background .2s;
}
.usermenu-btn:hover { background: rgba(255,255,255,.16); }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.usermenu-name { font-size: 13.5px; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-caret { font-size: 11px; color: var(--text-dim); }

.usermenu-drop {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 190px;
    background: #181818;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 14px 40px rgba(0,0,0,.7);
    z-index: 50;
}
.usermenu.open .usermenu-drop { display: block; }
.usermenu-drop a {
    display: block;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    border-radius: 7px;
}
.usermenu-drop a:hover { background: rgba(255,255,255,.08); color: var(--text); }
.usermenu-drop a.danger:hover { background: rgba(251,28,83,.15); color: #ff5c7d; }

/* ---------------- perfil ---------------- */
.alerta {
    padding: 13px 18px;
    border-radius: 9px;
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 24px;
}
.alerta.ok { background: rgba(30,180,100,.15); border: 1px solid rgba(30,180,100,.4); color: #5be0a0; }
.alerta.erro { background: rgba(251,28,83,.12); border: 1px solid rgba(251,28,83,.4); color: #ff7d99; }

.perfil-grid {
    display: flex;              /* linha: os quatro cards lado a lado */
    flex-wrap: wrap;
    align-items: stretch;       /* mesma altura */
    gap: 20px;
    /* 1200px cabia três cards; com quatro, cada um ficaria em 285px e o campo
       de valor com o repasse ao lado espremeria. */
    max-width: 1500px;
    margin-bottom: 44px;
}
.perfil-grid > .perfil-card {
    /* base menor que a de três cards para os quatro caberem na mesma linha;
       abaixo disso o flex-wrap quebra em duas, que é o comportamento certo
       em tela estreita. */
    flex: 1 1 260px;
    min-width: 240px;
}
.perfil-card {
    background: var(--surface);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    justify-content: flex-start;
}
.perfil-card h2 { font-size: 19px; font-weight: 700; }
.perfil-mail { color: var(--text-dim); font-size: 14px; }
.perfil-avatar {
    width: 110px; height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid transparent;
    background: var(--grad) border-box;
    padding: 3px;
}
.perfil-form { width: 100%; display: flex; flex-direction: column; gap: 9px;
               margin-top: 14px; text-align: left; flex: 1; }
/* botao sempre no rodape do card, com os textos acima */
.perfil-form .btn-play { margin-top: auto; }
.lbl { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.inp {
    width: 100%;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    padding: 11px 13px;
    outline: none;
    transition: border-color .2s;
}
.inp:focus { border-color: var(--accent-1); }
.inp[type="file"] { padding: 8px; }
.hint { font-size: 12px; color: #888; }
.perfil-form .btn-play { border: 0; }

.perfil-sec { font-size: 21px; font-weight: 800; margin: 34px 0 18px; scroll-margin-top: 90px; }

.card.static:hover { transform: none; }

/* Cartões de "Meus canais".
 *
 * Os demais cartões ganham respiro do .card-body, que traz o padding.
 * Estes são montados direto dentro do .card, sem essa camada, então
 * herdavam padding nenhum: o avatar, o nome e o botão encostavam na
 * borda. */
.canal-item { padding: 14px; }
.card-actions { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.btn-mini {
    background: var(--grad);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
    transition: filter .2s;
}
.btn-mini:hover { filter: brightness(1.15); }
.btn-mini.ghost { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.btn-mini.ghost:hover { background: rgba(255,255,255,.2); }

.badge-inscrito {
    position: absolute;
    top: 8px; left: 8px;
    background: rgba(30,180,100,.9);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
}

/* ---------------- canais ---------------- */
.listing-sub { color: var(--text-dim); font-size: 14.5px; margin: -14px 0 26px; }

.canal-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;
}
.canal-avatar.big {
    width: 76px; height: 76px;
    font-size: 32px;
    background: var(--grad);
    flex-shrink: 0;
    margin-bottom: 0;
}
.canal-avatar { position: relative; overflow: hidden; }
.canal-avatar img { display: none; }
.canal-avatar.has-img img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.canal-avatar.has-img { border: 2px solid rgba(255,255,255,.5); background: #1c1c1c; }
.canal-avatar.big.has-img { border: 3px solid transparent; background: linear-gradient(#1c1c1c, #1c1c1c) padding-box, var(--grad) border-box; }
.canal-avatar.has-img .canal-inicial { visibility: hidden; }
.canal-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 26px;
}
.canal-head .listing-title { margin-bottom: 4px; }
.canal-head .listing-sub { margin: 0; }

/* Inscrição em canal — o form existe só para o POST, não deve ocupar espaço */
.form-inscricao { display: inline; margin: 0; }

.btn-inscrever {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    background: #e50914;
    color: #fff;
    border: 0;
    font-weight: 700;
    font-size: 14px;
    padding: 9px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .15s, background .15s;
}
.btn-inscrever:hover { transform: scale(1.04); background: #f6121d; }

/* Já inscrito: some o destaque, vira estado e não chamada para ação */
.btn-inscrever.inscrito {
    background: transparent;
    color: #ddd;
    border: 1px solid #555;
}
.btn-inscrever.inscrito:hover { background: rgba(255,255,255,.08); color: #fff; }

/* Conteúdo exclusivo de canal — mesmo lugar do selo de pago, cor diferente
   para não confundir "precisa comprar" com "precisa seguir o canal" */
.badge-exclusivo {
    position: absolute;
    top: 8px; left: 8px;
    background: rgba(229,9,20,.92);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .8px;
    padding: 4px 9px;
    border-radius: 4px;
    z-index: 2;
}

.exclusivo-bloqueio p { max-width: 46ch; margin: 0 auto 22px; line-height: 1.55; }

/* Seletor de idioma no topo */
.idiomamenu { position: relative; }

.idiomamenu-btn {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: 7px 10px;
    cursor: pointer;
    line-height: 0;
}
.idiomamenu-btn:hover { background: rgba(255,255,255,.16); }

.idiomamenu-drop {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 172px;
    background: #1c1c1c;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 6px;
    z-index: 60;
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.idiomamenu.aberto .idiomamenu-drop { display: block; }

/* Abre também por hover e por foco de teclado: assim o seletor continua
   utilizável se o JavaScript falhar ou ainda não tiver carregado, e fica
   acessível para quem navega por Tab. */
.idiomamenu:hover .idiomamenu-drop,
.idiomamenu:focus-within .idiomamenu-drop { display: block; }

.idiomamenu-drop a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 7px;
    color: #ddd;
    font-size: 14px;
    line-height: 1;
}
.idiomamenu-drop a:hover { background: rgba(255,255,255,.10); color: #fff; }
/* O ativo fica marcado: sem isso, o menu aberto não diz qual está em uso */
.idiomamenu-drop a.ativo { background: rgba(229,9,20,.20); color: #fff; font-weight: 700; }

/* Títulos das seções da página de canais */
.canais-sec {
    font-size: 21px;
    font-weight: 800;
    margin: 34px 0 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
}
.canais-sec:first-of-type { margin-top: 18px; }

/* .listing-sub nasceu com margin-top NEGATIVA (-14px) para colar sob o
   .listing-title, que tem 26px de margem inferior — lá o líquido dá 12px.
   Sob .canais-sec, com 6px, o líquido ficava negativo e o subtítulo subia por
   cima do título. Anula a margem negativa só neste contexto, preservando o
   comportamento nas demais páginas. */
.canais-sec + .listing-sub {
    margin-top: 0;
    margin-bottom: 18px;
}

/* Contador ao lado do título: dá noção de volume sem precisar contar cards */
.canais-cont {
    font-size: 12px;
    font-weight: 700;
    color: #bbb;
    background: rgba(255,255,255,.10);
    padding: 3px 9px;
    border-radius: 999px;
}

/* Selo no card da listagem — só indica estado, a ação fica na página do canal */
.cat-inscrito {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 4px 9px;
    border-radius: 4px;
    z-index: 2;
}

.badge-ppv {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(106,17,203,.92);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .8px;
    padding: 4px 9px;
    border-radius: 4px;
}

/* ---------------- credenciamento / compra ---------------- */
.badge-free {
    position: absolute;
    top: 8px; right: 8px;
    background: var(--grad);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 4px;
}
.badge-free.inline { position: static; display: inline-block; vertical-align: middle; margin-left: 6px; }

/* Selo do evento EXTERNO — acontece fora da plataforma, e o cartao leva
   ao site do organizador. Cor diferente do FREE de proposito: o verde
   promete gratuidade, e aqui o ingresso e com quem organiza. */
.badge-externo {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(20,24,34,.88);
    border: 1px solid rgba(255,255,255,.34);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 4px;
}
.hero-free { position: static; display: inline-block; vertical-align: middle; margin-left: 10px; font-size: 13px; }

.badge-pendente {
    position: absolute;
    top: 8px; left: 8px;
    background: rgba(255,170,0,.92);
    color: #241a00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
}
.hero-badge.badge-pendente,
.hero-badge.badge-inscrito { position: static; align-self: center; font-size: 13px; padding: 10px 18px; border-radius: 999px; }

.checkout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 940px;
}
.resumo-evento { text-align: left; align-items: flex-start; }
.resumo-capa { width: 100%; border-radius: 10px; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 6px; }
.resumo-desc { color: var(--text-dim); font-size: 14px; line-height: 1.6; }

.ticket-list { display: flex; flex-direction: column; gap: 8px; }
.ticket-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.ticket-opt:hover { background: rgba(255,255,255,.1); }
.ticket-opt:has(input:checked) { border-color: var(--accent-1); background: rgba(251,28,83,.08); }
.ticket-opt input { accent-color: #fb1c53; width: 17px; height: 17px; }
.ticket-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ticket-nome { font-size: 14.5px; font-weight: 700; }
.ticket-preco { font-size: 13.5px; color: var(--text-dim); }
.ticket-preco small { opacity: .8; }

.pedido { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.pedido td { padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.pedido td:first-child { color: var(--text-dim); width: 40%; }
.pedido .valor { font-weight: 800; font-size: 16px; }
.pedido .badge-inscrito, .pedido .badge-pendente { position: static; display: inline-block; }

/* ---------------- ambiente de evento ---------------- */
.evento-hero { min-height: 56vh; }
.hero-badge { align-self: center; position: static; font-size: 13px; padding: 10px 18px; border-radius: 999px; }

.evento-body { padding: 10px var(--pad) 70px; max-width: 1600px; margin: 0 auto; }

.tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    margin-bottom: 26px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    background: none;
    border: 0;
    color: var(--text-dim);
    font-size: 14.5px;
    font-weight: 700;
    padding: 13px 18px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color .2s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent-1); }

.tabpane { display: none; }
.tabpane.active { display: block; }

.evento-desc { max-width: 860px; margin-bottom: 28px; }
.evento-desc .lead { font-size: 16.5px; line-height: 1.65; color: var(--text); margin-bottom: 12px; }
.evento-desc .detalhe { font-size: 14.5px; line-height: 1.7; color: var(--text-dim); }

.evento-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.stat {
    background: var(--surface);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 18px 26px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}
.stat-num { font-size: 26px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-lbl { font-size: 12.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; }

.evento-sub { font-size: 18px; font-weight: 800; margin: 26px 0 8px; }
.evento-local { color: var(--text-dim); font-size: 14.5px; margin-bottom: 14px; }
.mapa { border-radius: 12px; overflow: hidden; max-width: 860px; }
.mapa iframe { width: 100%; height: 340px; border: 0; display: block; }

.player-frame.tour { max-width: 1100px; margin: 0 auto; }
.grid.expositores { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.expositor .card-img { aspect-ratio: 1; background: #fff; }
.expositor .card-img img { object-fit: contain; padding: 12px; }
.card.atual { outline: 2px solid var(--accent-1); }
.card-cat.resumo { white-space: normal; line-height: 1.45; }

/* ---------------- responsivo ---------------- */
@media (max-width: 900px) {
    .mainnav {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        background: rgba(10,10,10,.98);
        padding: 10px var(--pad) 18px;
    }
    .mainnav.open { display: flex; }
    .mainnav a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
    .nav-toggle { display: block; }
    .btn-entrar { display: none; }
    .searchbox input { width: 90px; }
    .searchbox input:focus { width: 130px; }
    .hero { min-height: 62vh; }
    .card { width: clamp(170px, 44vw, 240px); }
}

@media (max-width: 520px) {
    .btn-assine { padding: 8px 13px; font-size: 12.5px; }
    .brand-name { font-size: 19px; }
    .topbar-inner { gap: 12px; }
}

/* ---------------------------------------------------------- Cursos / Treinamentos */
.cursos-rail .rail-track,
.rail-track:has(.curso-card) { align-items: stretch; }
.curso-card {
    flex: 0 0 232px; width: 232px; align-self: stretch;
    background: #141418; border: 1px solid #23232c; border-radius: 12px;
    overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
    transition: transform .18s ease, border-color .18s ease;
}
.curso-card:hover { transform: translateY(-3px); border-color: #34343f; }
.curso-thumb { position: relative; height: 148px; background: #000; overflow: hidden; }
.curso-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.curso-badge {
    position: absolute; top: 8px; font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: 5px; letter-spacing: .5px; color: #fff;
}
.curso-type { left: 8px; background: #2f6bff; }
.curso-free { right: 8px; background: #18a558; }
.curso-film {
    position: absolute; inset: 0; background: rgba(0,0,0,.62);
    display: flex; align-items: center; justify-content: center;
}
.curso-lock {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.curso-body { flex: 1 1 auto; padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 7px; }
.curso-name { font-size: 13.5px; font-weight: 600; color: #f1f1f4; line-height: 1.25; min-height: 34px; }
.curso-cat { font-size: 12px; color: #9aa0ab; }
.curso-price { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.curso-price.free { color: #25c26e; }
.curso-price.pay { color: #e6e6ea; }
.curso-btn {
    margin-top: auto; text-align: center; background: #171a2b; color: #7ea2ff;
    border: 1px solid #26304d; padding: 8px; border-radius: 8px; font-weight: 700; font-size: 12.5px;
}
.curso-card:hover .curso-btn { background: #1e2440; color: #a9c2ff; }

/* ===== Conectar TV (pareamento por código) ===== */
.inp.tv-code{
    text-transform: uppercase;
    letter-spacing: .35em;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    font-family: "Segoe UI", Consolas, monospace;
}
.tv-sub{
    font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
    color: #9aa4b2; margin: 22px 0 10px; font-weight: 700;
}
.tv-list{ list-style: none; margin: 0; padding: 0; }
.tv-item{
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08);
}
.tv-item strong{ display: block; font-size: 14px; }
.tv-meta{ font-size: 12px; color: #8b95a3; }
.tv-unlink{
    background: transparent; border: 1px solid rgba(255,255,255,.28); color: #ddd;
    padding: 6px 14px; border-radius: 20px; font-size: 12px; cursor: pointer;
}
.tv-unlink:hover{ border-color: #e04b4b; color: #ff7b7b; }

/* lista de TVs conectadas: ocupa a largura do card, abaixo do formulário */
.perfil-card .tv-list,
.perfil-card .tv-sub { width: 100%; text-align: left; }

/* ícone da categoria (cadastrado no admin via TIcon) */
.cat-icon {
    font-size: 30px;
    line-height: 1;
    opacity: .95;
    margin-bottom: auto;          /* ícone no topo, nome/contagem embaixo */
    position: relative;
    z-index: 2;                   /* acima da imagem de fundo do card */
    text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* ===== Conteúdo pago / PPV: cadeado nos cards (TV e eventos) ===== */
.card-film {
    position: absolute; inset: 0; background: rgba(0,0,0,.62);
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
.card-lock {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.badge-lock {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(0,0,0,.78); color: #ffd166;
    border: 1px solid rgba(255,209,102,.45);
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    padding: 3px 8px; border-radius: 999px;
}
.card-preco { color: #ffd166 !important; font-weight: 700; }
/* no card bloqueado o cadeado substitui o play */
.card.is-locked .card-play { display: none; }
.card.is-locked:hover .card-film { background: rgba(0,0,0,.5); }

/* ---------- Ações do conteúdo (curtir / indicar) ----------
   Ficam à direita, logo abaixo do título e da ficha do vídeo. */
.watch-acoes{display:flex;justify-content:flex-end;align-items:center;gap:10px;
  margin-top:18px;flex-wrap:wrap;position:relative}
.acao-recado{font-size:13px;color:var(--text-dim);margin-right:auto}
.acao-form{margin:0}
.btn-acao{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--surface-2,#1f1f1f);color:var(--text,#f5f5f5);border:1px solid rgba(255,255,255,.14);
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .15s ease,border-color .15s ease}
.btn-acao:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.btn-acao.ativo{color:var(--like,#3b82f6);border-color:var(--like,#3b82f6)}
/* azul do like, separado do vermelho da marca: o like nao e' acento de
   marca, e' estado de "eu curti". */
.btn-acao.ativo svg{fill:var(--like,#3b82f6);stroke:var(--like,#3b82f6)}
.btn-acao.ativo:hover{background:rgba(59,130,246,.16)}
.btn-acao-num{font-variant-numeric:tabular-nums}

/* O <details> nativo dá o abre-e-fecha sem JavaScript: o painel continua
   utilizável se o script falhar, e o Esc/clique fora ficam por conta do
   navegador. O marcador padrão é removido porque o próprio botão já indica. */
.acao-share{position:relative}
.acao-share > summary{list-style:none}
.acao-share > summary::-webkit-details-marker{display:none}
.share-painel{position:absolute;right:0;top:calc(100% + 8px);z-index:40;width:320px;
  background:var(--surface,#141414);border:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:14px;box-shadow:0 18px 44px rgba(0,0,0,.6)}
.share-titulo{font-size:14px;font-weight:700;margin:0 0 8px}
.share-busca{width:100%;box-sizing:border-box;padding:8px 10px;margin-bottom:8px;
  border-radius:6px;border:1px solid rgba(255,255,255,.16);
  background:#0f0f0f;color:var(--text,#f5f5f5);font-size:14px}
.share-lista{max-height:220px;overflow-y:auto;margin-bottom:10px}
.share-item{display:flex;align-items:center;gap:9px;padding:6px 4px;border-radius:6px;
  font-size:14px;cursor:pointer}
.share-item:hover{background:rgba(255,255,255,.08)}
.share-item.oculto{display:none}
.share-enviar{width:100%;justify-content:center;text-align:center}
.share-link-rotulo{font-size:12px;color:var(--text-dim);margin:12px 0 6px}
.share-link{width:100%;box-sizing:border-box;padding:8px 10px;border-radius:6px;
  border:1px solid rgba(255,255,255,.16);background:#0f0f0f;
  color:var(--text,#f5f5f5);font-size:12px;font-family:monospace}

@media (max-width:640px){
  .share-painel{position:fixed;left:12px;right:12px;width:auto;top:auto;bottom:12px}
}
.acao-recado.erro{color:var(--accent-1,#fb1c53)}

/* ==================== STORIES ==================== */

/* Barra de avatares no topo da home */
.stories-rail .rail-track{gap:16px;align-items:flex-start}
.story-av{flex:0 0 auto;width:76px;background:none;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit}
/* Anel: colorido = tem novidade, cinza = já visto. O gradiente fica na borda
   via padding + background, que é o truque que dispensa uma segunda camada. */
.story-anel{display:block;width:68px;height:68px;border-radius:50%;padding:3px;
  background:rgba(255,255,255,.22);position:relative}
.story-anel.novo{background:var(--grad,linear-gradient(90deg,#fb1c53,#ff6a13))}
.story-anel.visto{background:rgba(255,255,255,.22)}
.story-anel img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:2px solid var(--bg,#000);background:#222}
.story-mais{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;
  background:var(--accent-1,#fb1c53);color:#fff;font-size:15px;font-weight:700;line-height:22px;
  text-align:center;border:2px solid var(--bg,#000)}
.story-nome{font-size:12px;color:var(--text-dim,#b3b3b3);max-width:74px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* Visualizador em tela cheia */
body.story-aberto{overflow:hidden}
/* Começa ABAIXO da barra superior, não em inset:0.
   A barra é fixa e vive em z-index 100, acima destes 90 — com o visualizador
   ocupando a tela inteira, o menu ficava por cima e engolia a linha do tempo
   e o nome do autor, que nascem a 10px e 24px do topo. Recuar o visualizador
   é o que põe a linha do tempo logo abaixo do menu, em vez de atrás dele.
   O valor exato é medido no navegador (ver ajustarTopo, em stories.js); os
   84px são a mesma folga que .watch e .story-compor usam, e valem como
   reserva caso a medição não aconteça. */
.story-viewer{position:fixed;left:0;right:0;bottom:0;top:var(--sv-topo-off,84px);
  z-index:90;background:#000;display:flex;
  align-items:center;justify-content:center}
.story-viewer[hidden]{display:none}
.sv-barras{position:absolute;top:10px;left:10px;right:10px;display:flex;gap:4px;z-index:3}
.sv-barra{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.sv-barra i{display:block;height:100%;width:0;background:#fff}
.sv-topo{position:absolute;top:24px;left:14px;right:14px;display:flex;align-items:center;
  gap:10px;z-index:3;color:#fff}
.sv-foto{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#222}
.sv-autor{font-size:14px;font-weight:700}
.sv-musica{font-size:12px;color:rgba(255,255,255,.8);
  max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-fechar{margin-left:auto;background:none;border:0;color:#fff;font-size:30px;
  line-height:1;cursor:pointer;padding:0 6px}
/* Altura em % do visualizador, e não em vh: o visualizador já não ocupa a
   tela inteira, e 92vh estouraria a área disponível — o rodapé do story
   ficaria fora da tela num notebook. */
.sv-palco{position:relative;width:min(430px,100vw);height:min(100%,764px);
  background:#111;border-radius:10px;overflow:hidden;display:flex;
  align-items:center;justify-content:center}
.sv-palco img,.sv-palco video{width:100%;height:100%;object-fit:contain;background:#000}
/* Ancorado pelo CENTRO, igual ao compositor: a posição em % é onde fica o
   meio do texto. Se aqui ancorasse pelo canto, o texto apareceria deslocado
   em relação ao que a pessoa posicionou ao publicar. */
/* A largura útil vai até 5px de cada lateral. Eram 86% do quadro — 7% de
   margem de cada lado, que num quadro de 430px come 60px e quebrava em duas
   linhas uma frase que caberia numa. O box-sizing é border-box, então o
   calc() já conta o padding: o que se vê para de fato a 5px da borda. */
.sv-texto{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  max-width:calc(100% - 10px);text-align:center;font-size:24px;font-weight:700;line-height:1.25;
  text-shadow:0 2px 10px rgba(0,0,0,.7);word-wrap:break-word}
/* As metades clicáveis que avançam e voltam, como no Instagram */
.sv-lado{position:absolute;top:0;bottom:0;width:32%;background:none;border:0;cursor:pointer;z-index:2}
.sv-ant{left:0}
.sv-prox{right:0}

/* Seta visível dentro de cada metade.
   A área de toque continua sendo a metade inteira — quem já sabia tocar na
   lateral não perde nada. O que muda é a descoberta: sem nada na tela, não
   havia como adivinhar que dava para avançar e voltar.
   Ancorada na borda da JANELA, e não do palco: no celular o palco ocupa a
   tela toda e no desktop fica centralizado, e é a borda que dá o mesmo
   resultado nos dois. */
.sv-lado::before{
  content:'';
  position:absolute;
  top:50%;
  margin-top:-21px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-size:26px;
  line-height:40px;
  text-align:center;
  opacity:.72;
  transition:opacity .15s ease, background .15s ease;
}
.sv-lado:hover::before{opacity:1;background:rgba(0,0,0,.72)}
/* o foco precisa aparecer: a seta é alcançável por teclado */
.sv-lado:focus-visible::before{opacity:1;box-shadow:0 0 0 2px #fff}
.sv-ant::before{content:'\2039';left:14px}
.sv-prox::before{content:'\203A';right:14px}

/* Telas estreitas: seta menor e mais colada na borda, para não cobrir o
   conteúdo do story num palco que ocupa a largura toda. */
@media (max-width:640px){
  .sv-lado::before{width:34px;height:34px;margin-top:-17px;font-size:22px;line-height:32px}
  .sv-ant::before{left:8px}
  .sv-prox::before{right:8px}
}

/* Compositor */
/* 84px no topo, como .watch: a barra superior e' fixa e comia o titulo. */
.story-compor{max-width:1000px;margin:0 auto;padding:84px 20px 60px}
.story-compor h1{font-size:26px;margin-bottom:6px}
.story-sub{color:var(--text-dim,#b3b3b3);font-size:14px;margin-bottom:18px}
.story-flash{padding:10px 14px;border-radius:8px;background:rgba(34,197,94,.16);
  color:#22c55e;font-size:14px;margin-bottom:16px}
.story-flash.erro{background:rgba(251,28,83,.16);color:var(--accent-1,#fb1c53)}
.story-aviso{background:var(--surface,#141414);border-radius:10px;padding:20px;max-width:520px}
.story-aviso p{margin-bottom:10px}
.story-editor{display:flex;gap:26px;flex-wrap:wrap}
.story-preview{position:relative;flex:0 0 300px;width:300px;aspect-ratio:9/16;background:#111;
  border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:2px dashed rgba(255,255,255,.18);transition:border-color .15s ease}
.story-preview:hover{border-color:rgba(255,255,255,.4)}
.story-preview.tem-midia{border-style:solid;border-color:transparent}
.story-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.story-preview img,.story-preview video{width:100%;height:100%;object-fit:contain;background:#000}
.story-vazio{color:var(--text-dim,#b3b3b3);font-size:14px;padding:0 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.story-vazio strong{font-size:15px;color:var(--text,#f5f5f5)}
.story-vazio small{font-size:12px}
/* O texto e' ancorado pelo CENTRO no ponto (left,top): assim a posicao em %
   significa "onde esta o meio do texto", que e' o que a pessoa ve enquanto
   arrasta. Ancorar pelo canto faria o texto escapar do ponto conforme cresce. */
/* Mesma folga de 5px do visualizador: o que se compõe aqui tem de ter a
   mesma largura útil do que vai ao ar. Quem impede o texto de passar dessa
   folga ao ser ARRASTADO é limitarX(), no stories.js — só o max-width não
   bastaria, porque o texto é ancorado pelo centro e escaparia pela borda. */
.story-texto-live{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  max-width:calc(100% - 10px);text-align:center;font-size:20px;font-weight:700;line-height:1.25;
  text-shadow:0 2px 10px rgba(0,0,0,.7);word-wrap:break-word;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  padding:4px 8px;border-radius:6px;outline:none}
.story-texto-live:hover,.story-texto-live:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.story-texto-live.arrastando{cursor:grabbing;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.story-controles{flex:1;min-width:280px;max-width:420px}
.story-dica{font-size:13px;color:var(--text-dim,#b3b3b3);margin:6px 0 16px;min-height:18px}
.story-dica.erro{color:var(--accent-1,#fb1c53)}
.story-cores{display:flex;gap:10px;margin-bottom:16px}
.story-cor{width:28px;height:28px;border-radius:50%;background:var(--c);cursor:pointer;
  border:2px solid transparent;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.story-cor.ativa{border-color:#fff}
.story-cor input{display:none}
.story-range{width:100%;margin-bottom:16px}
.story-enviar{margin-top:20px;width:100%;justify-content:center;text-align:center}
.story-enviar:disabled{opacity:.5;cursor:not-allowed}
.story-titulo-secao{font-size:18px;margin:34px 0 14px}
.story-meus{display:flex;gap:14px;flex-wrap:wrap}
.story-meu{position:relative;width:110px;height:196px;border-radius:8px;overflow:hidden;background:#111}
.story-meu img,.story-meu video{width:100%;height:100%;object-fit:cover}
.story-apagar{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.7);color:#fff;border:0;font-size:17px;line-height:1;cursor:pointer}

@media (max-width:640px){
  /* 100% e não 100vh: a área do visualizador começa abaixo do menu */
  .sv-palco{width:100vw;height:100%;border-radius:0}
  .story-preview{flex:1 1 100%;width:100%;max-width:340px;margin:0 auto;height:auto}
}

/* Compositor: cabeçalho do arquivo escolhido e ajustes do trilho de stories */
.story-arquivo-info{display:flex;align-items:center;gap:10px;margin-bottom:4px;
  font-size:13px;color:var(--text-dim,#b3b3b3)}
.story-arquivo-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-trocar{background:none;border:1px solid rgba(255,255,255,.25);color:inherit;
  border-radius:6px;padding:3px 10px;font-size:12px;cursor:pointer;flex:0 0 auto}
.story-trocar:hover{border-color:#fff;color:#fff}
.story-editor{align-items:flex-start}
.story-controles .lbl{display:block;margin-bottom:6px;font-size:13px;
  color:var(--text-dim,#b3b3b3)}
.story-controles .inp{width:100%;box-sizing:border-box;padding:10px 12px;margin-bottom:16px;
  border-radius:8px;border:1px solid rgba(255,255,255,.16);background:#0f0f0f;
  color:var(--text,#f5f5f5);font-size:14px}
.story-preview.arrastando{border-color:var(--accent-1,#fb1c53);background:#181818}

/* ---------- + do story na foto do perfil (cabeçalho) ---------- */
.avatar-story{position:relative;display:inline-block;border-radius:50%;padding:2px;
  background:transparent}
/* Anel só quando a pessoa tem story no ar — senão a foto fica como sempre foi */
.avatar-story.com-story{background:var(--grad,linear-gradient(90deg,#fb1c53,#ff6a13))}
.avatar-story .avatar{display:block;border-radius:50%;
  border:2px solid var(--surface,#141414)}
.usermenu{position:relative}
/* Fica POR CIMA da foto, no canto inferior direito. z-index acima do botão
   para o clique abrir o compositor em vez do menu do usuário. */
.avatar-mais{position:absolute;left:22px;bottom:2px;z-index:3;
  width:18px;height:18px;border-radius:50%;
  background:var(--accent-1,#fb1c53);color:#fff;
  font-size:13px;font-weight:700;line-height:17px;text-align:center;
  text-decoration:none;border:2px solid var(--surface,#141414);
  transition:transform .12s ease}
.avatar-mais:hover{transform:scale(1.15)}

/* Progresso da publicação do story */
.story-prog{margin-top:14px}
.story-prog-barra{height:6px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.story-prog-barra i{display:block;height:100%;width:0;border-radius:4px;
  background:var(--grad,linear-gradient(90deg,#fb1c53,#ff6a13));
  transition:width .25s ease}
.story-prog-txt{font-size:13px;color:var(--text-dim,#b3b3b3);margin-top:8px}
.story-prog.erro .story-prog-barra i{background:var(--accent-1,#fb1c53)}
.story-prog.erro .story-prog-txt{color:var(--accent-1,#fb1c53)}

/* Quadro do compositor: prévia e palco do texto sobrepostos.
   O palco não intercepta clique — só o texto dentro dele intercepta —, senão
   ele cobriria a prévia e o clique não abriria mais o seletor de arquivo. */
.story-quadro{position:relative;flex:0 0 300px;width:300px}
.story-palco{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:14px}
.story-palco > *{pointer-events:auto}
.story-quadro .story-preview{flex:none;width:100%}

@media (max-width:640px){
  .story-quadro{flex:1 1 100%;width:100%;max-width:340px;margin:0 auto}
}

/* ---------- Barra de cortes do vídeo ---------- */
.story-cortes{margin-top:20px}
.story-cortes-topo{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.story-cortes-conta{font-size:12px;color:var(--text-dim,#b3b3b3)}
.story-cortes-conta.erro{color:var(--accent-1,#fb1c53);font-weight:700}

/* Linha do tempo do vídeo INTEIRO. Mesma leitura da onda do áudio: os quadros
   ao fundo, a janela clara é o que vai ao ar, e o resto fica sob película. */
.story-linha{position:relative;height:64px;border-radius:8px;overflow:hidden;
  background:#0f0f0f;cursor:pointer;touch-action:none;user-select:none}
.story-linha-quadros{position:absolute;inset:0;display:flex}
/* Celula de miniatura da linha do tempo. Nome proprio: 'story-quadro' ja e' o
   container da previa, e a regra daqui o sobrescrevia. */
.story-linha-q{flex:1 1 0;min-width:0;background:#141414 center/cover no-repeat}

/* As duas películas cobrem o que fica FORA da janela — é o descartado, e
   precisa ser visível para a escolha ser consciente. */
.story-fora{position:absolute;top:0;bottom:0;width:0;
  background:rgba(0,0,0,.72);pointer-events:none}
.story-fora.esq{left:0}
.story-fora.dir{right:0}

/* A janela: moldura clara, sem véu por cima, para o trecho escolhido aparecer
   com o brilho original ao lado do que foi descartado. */
.story-sel{position:absolute;top:0;bottom:0;left:0;width:100%;
  border:2px solid #fff;border-radius:8px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.5)}

/* Marcas de 15s dentro da janela: mostram onde o vídeo será dividido. */
.story-marca{position:absolute;top:0;bottom:0;width:2px;
  background:rgba(255,255,255,.75);transform:translateX(-1px)}


/* ---------- Trecho da música ---------- */
.story-trecho{margin:10px 0 16px}
.story-onda{position:relative;display:flex;align-items:center;gap:2px;
  height:56px;padding:0 2px;border-radius:8px;background:#0f0f0f;
  overflow:hidden;cursor:pointer;touch-action:none}
.story-onda-b{flex:1 1 auto;min-width:2px;border-radius:2px;
  background:rgba(255,255,255,.28)}
/* A janela é a seleção: moldura clara sobre a onda, como no Instagram. */
.story-janela{position:absolute;top:0;bottom:0;left:0;width:25%;
  border:2px solid #fff;border-radius:8px;
  background:linear-gradient(90deg,rgba(251,28,83,.35),rgba(255,106,19,.35));
  pointer-events:none}
.story-trecho-info{display:flex;align-items:center;justify-content:space-between;
  margin-top:8px;font-size:12px;color:var(--text-dim,#b3b3b3)}
.story-ouvir{background:none;border:1px solid rgba(255,255,255,.25);color:inherit;
  border-radius:6px;padding:4px 12px;font-size:12px;cursor:pointer}
.story-ouvir:hover{border-color:#fff;color:#fff}

/* trocar o áudio x deixar a música de fundo */
.story-audio-modo,.story-modo{display:flex;gap:8px;margin-top:8px}
.story-audio-modo label,.story-modo label{flex:1;display:flex;align-items:center;justify-content:center;
  gap:6px;padding:7px 8px;font-size:13px;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);border-radius:8px}
.story-audio-modo input,.story-modo input{accent-color:var(--accent,#fb1c53);margin:0}
/* :has segura o destaque do rótulo inteiro; onde não houver, o radio marcado
   ainda mostra a escolha e nada quebra */
.story-audio-modo label:has(input:checked),.story-modo label:has(input:checked){border-color:var(--accent,#fb1c53);
  background:rgba(251,28,83,.12)}

/* aviso é diferente de erro: o envio continua permitido */
.story-dica.aviso{color:var(--accent-2,#ff6a13)}

/* ============================================================
   Compositor de story: caber numa tela só, sem rolagem
   ============================================================
   A prévia tinha largura fixa de 300px, o que dava 533px de altura em 9:16 —
   e junto com os controles estourava a viewport. Agora ela é dimensionada
   pela ALTURA disponível: encolhe em tela baixa em vez de empurrar o resto
   para fora. O ritmo vertical dos controles foi apertado junto, porque em
   telas baixas quem estoura é a coluna deles, não a prévia. */

.story-compor{padding:84px 20px 24px}
.story-compor h1{font-size:22px;margin-bottom:2px}
.story-sub{font-size:13px;line-height:1.4;margin-bottom:12px}

.story-editor{gap:20px}

/* min() põe um teto: em monitor alto a prévia para de crescer, senão ficaria
   desproporcional ao lado dos controles. */
.story-quadro{flex:0 0 auto;width:auto;height:min(56vh,440px);aspect-ratio:9/16}
.story-quadro .story-preview{width:100%;height:100%;aspect-ratio:auto}

.story-controles{max-width:460px}
.story-controles .lbl{margin-bottom:3px;font-size:12px}
.story-controles .inp{padding:8px 11px;margin-bottom:10px;font-size:13px}

.story-arquivo-info{margin-bottom:2px}
.story-dica{margin:3px 0 10px;min-height:16px;font-size:12px}
.story-cores{gap:9px;margin-bottom:10px}
.story-cor{width:24px;height:24px}
.story-range{margin-bottom:10px}

.story-trecho{margin:6px 0 10px}
.story-onda{height:42px}
.story-trecho-info{margin-top:5px}

.story-cortes{margin-top:12px}
.story-cortes-topo{margin-bottom:5px}
.story-linha{height:52px}

.story-enviar{margin-top:12px;padding:11px 30px}

.story-titulo-secao{font-size:16px;margin:22px 0 10px}
.story-meu{width:84px;height:150px}

/* Telas baixas (notebook de 720–768px de altura): corta mais o supérfluo.
   Medido a 720px: a coluna de CONTROLES é quem define a altura (a prévia já
   encolhe sozinha), então o que rende espaço aqui é o ritmo vertical dela. */
@media (max-height:820px){
  .story-compor{padding:76px 20px 14px}
  .story-sub{font-size:12px;margin-bottom:6px}
  .story-quadro{height:min(50vh,380px)}

  .story-controles .lbl{margin-bottom:2px}
  .story-controles .inp{padding:7px 10px;margin-bottom:7px}
  /* sem min-height: a linha de dica vazia reservava espaço à toa */
  .story-dica{margin:2px 0 7px;min-height:0}
  .story-cores{margin-bottom:7px}
  .story-cor{width:22px;height:22px}
  .story-range{margin-bottom:7px}

  .story-trecho{margin:4px 0 7px}
  .story-onda{height:34px}
  .story-trecho-info{margin-top:4px}

  .story-cortes{margin-top:8px}
  .story-cortes-topo{margin-bottom:4px}
  .story-linha{height:44px}

  .story-enviar{margin-top:10px;padding:9px 28px}

  /* A dica "arraste o texto sobre a prévia" some aqui: ela repete o que o
     próprio texto já diz no title ao passar o mouse, e em tela baixa esses
     ~23px são a diferença entre caber e rolar. */
  #storyDicaTexto{display:none !important}
}

/* No celular a prévia volta a mandar na largura: lá a rolagem é natural e
   espremer a imagem por altura só a deixaria minúscula. */
@media (max-width:640px){
  .story-quadro{flex:1 1 100%;width:100%;max-width:320px;height:auto;margin:0 auto}
  .story-controles{max-width:none}
}

/* ============================================================
   Sequência de imagens, tempo de cada uma e aparência do texto
   ============================================================
   A fileira de miniaturas é a ordem em que as imagens vão ao ar: a primeira
   à esquerda. Ela só aparece com duas ou mais — com uma só a prévia grande
   já diz tudo, e a fileira seria uma linha repetindo a mesma imagem. */

.story-fila{margin:0 0 10px}
.story-fila-topo{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px}
.story-fila-conta{font-size:12px;color:var(--text-dim,#b3b3b3)}
/* rola na horizontal: dez miniaturas não cabem na coluna de controles */
.story-fila-itens{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.story-fila-i{position:relative;flex:0 0 auto;width:46px;height:66px;border-radius:6px;
  overflow:hidden;background:#111;border:2px solid transparent}
.story-fila-i.ativa{border-color:var(--accent,#fb1c53)}
.story-fila-i img{width:100%;height:100%;object-fit:cover;cursor:pointer;display:block}
/* o número é a posição na sequência, não uma contagem de itens */
.story-fila-n{position:absolute;left:3px;bottom:3px;min-width:14px;height:14px;
  padding:0 3px;border-radius:7px;background:rgba(0,0,0,.68);color:#fff;
  font-size:10px;line-height:14px;text-align:center}
.story-fila-x{position:absolute;top:2px;right:2px;width:16px;height:16px;border:0;
  border-radius:50%;background:rgba(0,0,0,.68);color:#fff;font-size:13px;
  line-height:16px;padding:0;cursor:pointer}
.story-fila-x:hover{background:var(--accent-1,#fb1c53)}

/* tempo de cada imagem e tamanho do texto: o valor atual vai no rótulo, à
   direita, para o controle não precisar de uma linha só para ele */
.story-tempo{margin-bottom:2px}
.story-tempo-valor,.story-tam-valor{float:right;font-weight:400;
  color:var(--text-dim,#b3b3b3)}

/* Deslizante entre os dois botões: o deslizante é para a mudança grande, os
   botões para o ajuste fino que o dedo não acerta na barra. */
.story-tam{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.story-tam .story-range{flex:1;margin-bottom:0}
.story-tam-btn{flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:none;color:inherit;
  font-size:16px;line-height:1;cursor:pointer;padding:0}
.story-tam-btn:hover{border-color:#fff;color:#fff}

/* A combo mostra cada nome desenhado na própria fonte (style inline vindo do
   PHP). O fechado herda a fonte da opção escolhida em quase todo navegador;
   onde não herdar, a prévia do texto continua sendo a resposta verdadeira. */
.story-fonte-sel option{background:var(--surface,#141414);color:var(--text,#f5f5f5)}

@media (max-height:820px){
  .story-fila-i{width:38px;height:56px}
  .story-fila{margin-bottom:7px}
  .story-tam{margin-bottom:7px}
  .story-tam-btn{width:24px;height:24px;font-size:14px}
}

/* ---------- texto por imagem na sequência ---------- */
/* De qual imagem é o texto que está no campo. Vai no rótulo, à direita, como
   o valor do tamanho e do tempo — o campo não precisa de uma linha só para
   dizer o que está editando. */
.story-texto-qual{float:right;font-weight:400;color:var(--accent-2,#ff6a13)}
/* A miniatura de quem já tem texto ganha um ponto, para a pessoa ver de
   relance o que falta preencher sem clicar uma por uma. */
.story-fila-i.tem-texto::after{content:'';position:absolute;top:3px;left:3px;
  width:7px;height:7px;border-radius:50%;background:var(--accent-2,#ff6a13);
  box-shadow:0 0 0 1px rgba(0,0,0,.55)}
.story-modo{margin-bottom:10px}
@media (max-height:820px){
  .story-modo{margin-top:5px;margin-bottom:7px}
}

/* ---------- barra superior enquanto um story está aberto ---------- */
/* O visualizador começa abaixo do menu, então a faixa do menu passa a
   mostrar a página que ficou atrás dele. Com o fundo em degradê o resultado
   é uma tira translúcida sobre conteúdo parado, logo acima de uma área
   preta — que é justamente a confusão a evitar. Enquanto o story está no ar
   o menu fica sólido, e a divisão entre ele e o story fica óbvia. */
body.story-aberto .topbar{
  background:rgba(10,10,10,.97);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}

/* ---------- canal monetizado ---------- */
/* Marca, não bloqueio: o selo diz que ali há conteúdo que a inscrição libera.
   Verde e não vermelho de propósito — o vermelho da plataforma é o do
   cadeado/exclusivo, e confundir os dois faria "monetizado" parecer
   "bloqueado". */
.badge-monetizado{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:20px;
  background:rgba(34,197,94,.16);color:#22c55e;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;vertical-align:middle;
  white-space:nowrap;
}
.canal-link{margin-left:10px;color:var(--accent-2,#ff6a13);font-size:13px;white-space:nowrap}
.canal-link:hover{text-decoration:underline}
.canal-monetizado-aviso{
  margin:8px 0 12px;padding:10px 14px;max-width:70ch;
  background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.28);
  border-radius:8px;font-size:13px;color:var(--text-dim,#b3b3b3);line-height:1.45;
}
/* na fileira de canais o selo entra abaixo do nome, onde há menos espaço */
.cat-name + .badge-monetizado{margin:2px 0 0;font-size:9.5px}

/* ---------- cartão do canal ---------- */
/* Cartão próprio, ao lado do perfil. O primeiro formulário (nome) vem logo
   sob o <h2> do cartão e não precisa de margem. */
.perfil-canal{margin-top:0}
/* O segundo (acesso e valor) é outra decisão, e ganha a linha que separa —
   sem ela, "Salvar nome do canal" e "Acesso ao canal" pareciam o mesmo
   formulário e o botão de cima parecia salvar os dois. */
.perfil-canal + .perfil-canal{
  margin-top:18px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.10);
}
.perfil-canal-link{
  display:inline-block;margin-top:10px;
  font-size:13px;color:var(--accent-2,#ff6a13);
}
.perfil-canal-link:hover{text-decoration:underline}

/* ---------- acesso do canal (público x monetizado) ---------- */
.canal-modo{display:flex;gap:8px;margin-bottom:10px}
.canal-modo label{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px;font-size:13px;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);border-radius:8px;
}
.canal-modo input{accent-color:var(--accent,#fb1c53);margin:0}
.canal-modo label:has(input:checked){
  border-color:var(--accent,#fb1c53);background:rgba(251,28,83,.12);
}
/* O repasse é o número que o produtor precisa ver antes de decidir — por isso
   tem peso maior que a nota explicativa logo abaixo. */
.canal-repasse{
  margin:8px 0 4px;font-size:13px;line-height:1.45;
  color:var(--text,#f5f5f5);
}
.canal-repasse:empty{margin:0}
.canal-repasse strong{color:#22c55e}

/* ---------- botão de assinar canal monetizado ---------- */
/* Verde, e não o vermelho da marca: o vermelho aqui é o do cadeado/bloqueio,
   e "Assinar" é convite, não impedimento. Mesma cor do selo MONETIZADO, para
   o botão e o selo se lerem como a mesma coisa. */
.btn-inscrever.assinar{
  background:#22c55e;border-color:#22c55e;color:#0b1f12;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;
}
.btn-inscrever.assinar:hover{background:#1eb257;border-color:#1eb257}
/* o cadeado do selo herda a cor do texto e acompanha o tamanho */
.badge-monetizado svg{vertical-align:-1px}

/* ============================================================
   Fileira de stories em CARTÕES (modelo Facebook)
   ============================================================
   Era uma fileira de avatares redondos: dizia de QUEM era o story, mas não o
   que havia nele. O cartão mostra a prévia como fundo e o avatar por cima, no
   canto — as duas informações de uma vez, e é o padrão que a pessoa já
   reconhece de outras redes. */

.stories-rail .rail-track{gap:8px;align-items:flex-start}

.story-card{
  position:relative;flex:0 0 auto;
  width:112px;height:200px;
  border:0;padding:0;cursor:pointer;overflow:hidden;
  border-radius:12px;background:var(--surface-2,#1f1f1f);
  display:block;text-align:left;
}
.story-card:focus-visible{outline:2px solid #fff;outline-offset:2px}

.story-card-capa{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .25s ease;
}
.story-card:hover .story-card-capa{transform:scale(1.06)}
/* sem prévia de imagem o avatar vira o fundo; borrado para virar textura e
   não uma foto esticada */
.story-card-capa.borrada{filter:blur(10px) brightness(.55);transform:scale(1.15)}

/* Véu na base: o nome precisa ser legível sobre qualquer imagem. */
.story-card::after{
  content:'';position:absolute;inset:auto 0 0 0;height:60%;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.75));
  pointer-events:none;
}

.story-card-avatar{
  position:absolute;top:8px;left:8px;z-index:2;
  width:36px;height:36px;border-radius:50%;
  padding:2px;background:var(--surface,#141414);
  display:block;
}
.story-card-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
/* anel: colorido enquanto há story não visto, cinza depois — mesma leitura de
   antes, agora no cartão */
.story-card-avatar.novo{background:var(--grad,linear-gradient(90deg,#fb1c53,#ff6a13))}
.story-card-avatar.visto{background:rgba(255,255,255,.35)}

.story-card-nome{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:2;
  font-size:12px;font-weight:600;line-height:1.25;color:#fff;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* ---- cartão de criar ---- */
/* Metade imagem, metade ação: a foto do dono em cima e a chamada embaixo,
   sobre o fundo do tema. É o que separa "criar" de "assistir" à primeira
   vista, sem depender de ler. */
.story-card-novo{
  background:var(--surface,#141414);
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
}
.story-card-novo::after{content:none}
.story-card-novo .story-card-avatar{
  position:absolute;inset:0 0 auto 0;top:0;left:0;
  width:100%;height:132px;border-radius:12px 12px 0 0;padding:0;background:none;
}
.story-card-novo .story-card-avatar img{border-radius:12px 12px 0 0}
.story-card-mais{
  position:absolute;left:50%;top:132px;transform:translate(-50%,-50%);z-index:3;
  width:32px;height:32px;border-radius:50%;
  background:var(--accent-1,#fb1c53);color:#fff;
  border:3px solid var(--surface,#141414);
  font-size:20px;line-height:26px;text-align:center;font-weight:700;
}
.story-card-novo .story-card-nome{
  bottom:10px;text-align:center;color:var(--text,#f5f5f5);text-shadow:none;
}

@media (max-width:640px){
  .story-card{width:96px;height:172px}
  .story-card-novo .story-card-avatar{height:112px}
  .story-card-mais{top:112px}
}

/* ---------- os dois destinos do envio de story ---------- */
/* Lado a lado, com o mesmo peso: nenhum dos dois é "o certo" — o que muda é
   só se aquilo sai em 24h ou fica. A legenda embaixo diz isso, para a escolha
   não depender de a pessoa saber o que "reel" significa aqui. */
.story-publicar{display:flex;gap:10px;margin-top:12px}
.story-publicar .story-enviar{flex:1;margin-top:0;display:flex;flex-direction:column;
  align-items:center;gap:1px;padding:9px 10px;line-height:1.2}
.story-publicar .story-enviar small{
  font-size:10.5px;font-weight:400;opacity:.75;letter-spacing:.01em;
}
/* O reel é a alternativa, não o padrão: contorno em vez de preenchimento. */
.story-publicar .como-reel{
  background:transparent;border:1px solid var(--accent-2,#ff6a13);color:var(--accent-2,#ff6a13);
}
.story-publicar .como-reel:hover{background:rgba(255,106,19,.12)}
@media (max-width:640px){ .story-publicar{flex-direction:column} }

/* ---------- selo do cartão de reel ---------- */
/* Mesmo cartão da fileira de stories; o que distingue é o selo. Fica no canto
   OPOSTO ao avatar do story para os dois não disputarem o mesmo lugar quando
   a fileira mistura os dois. */
.reel-selo{
  position:absolute;top:8px;left:8px;z-index:2;
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 6px;border-radius:20px;
  background:rgba(0,0,0,.6);color:#fff;
  font-size:9.5px;font-weight:700;letter-spacing:.06em;
}
/* Quantas partes o envio tem — um vídeo longo virou vários trechos de 15s, e
   saber disso antes de abrir evita a surpresa de o reel "não acabar". */
.reel-partes{
  position:absolute;top:8px;right:8px;z-index:2;
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:rgba(0,0,0,.6);color:#fff;
  font-size:10px;font-weight:700;line-height:18px;text-align:center;
}
.reels-rail .rail-track{gap:8px;align-items:flex-start}

/* ---------- playlist ao lado do player ---------- */
/* Duas colunas só quando existe fila. O player continua mandando na largura:
   a lateral tem tamanho fixo em vez de fração, senão em tela média ela
   engole o vídeo. */
.watch.com-playlist{
  max-width:1600px;
  display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:20px;
  align-items:start;
}
.watch-principal{ min-width:0; }

/* Recolhida: a lateral sai do grid e o player ocupa tudo. */
.watch.com-playlist.pl-oculta{ grid-template-columns:minmax(0,1fr); }
.watch.com-playlist.pl-oculta .pl-lateral{ display:none; }

.pl-lateral{
  border:1px solid var(--linha,#2a2a2a); border-radius:12px;
  background:var(--card,#161616); overflow:hidden;
  max-height:calc(100vh - 140px); display:flex; flex-direction:column;
  position:sticky; top:96px;
}

.pl-cab{
  display:flex; align-items:center; gap:8px;
  padding:12px 10px 12px 14px; border-bottom:1px solid var(--linha,#2a2a2a);
}
.pl-cab-txt{ flex:1 1 auto; min-width:0; }
.pl-cab h2{
  font-size:14px; font-weight:700; margin:0; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pl-cab span{ font-size:12px; color:var(--text-dim,#9a9a9a); }

.pl-recolher{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  border:0; background:transparent; color:var(--text-dim,#9a9a9a); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.pl-recolher:hover{ background:rgba(255,255,255,.08); color:var(--text,#fff); }

/* A fila rola sozinha; a página não cresce por causa dela. */
.pl-fila{ overflow-y:auto; overscroll-behavior:contain; padding:6px; }

.pl-linha{
  display:flex; align-items:flex-start; gap:8px;
  padding:6px; border-radius:8px; text-decoration:none; color:inherit;
}
.pl-linha:hover{ background:rgba(255,255,255,.06); }
.pl-linha.atual{ background:rgba(255,255,255,.10); }

/* Número da posição, ou o triângulo de "tocando" no item atual. */
.pl-num{
  flex:0 0 16px; width:16px; padding-top:22px; text-align:center;
  font-size:11px; color:var(--text-dim,#9a9a9a);
  display:flex; align-items:flex-start; justify-content:center;
}
.pl-linha.atual .pl-num{ color:var(--acento,#e50914); }

.pl-mini{
  position:relative;   /* ancora o cadeado do pay-per-view */
  flex:0 0 104px; width:104px; height:59px; border-radius:6px;
  overflow:hidden; background:#000;
}
.pl-mini img{ width:100%; height:100%; object-fit:cover; display:block; }

.pl-txt{ flex:1 1 auto; min-width:0; }
/* Duas linhas e reticências: título longo não pode empurrar a descrição
   para fora da linha. */
.pl-nome{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:13px; font-weight:600; line-height:1.25;
}
.pl-canal{ display:block; font-size:11.5px; color:var(--text-dim,#9a9a9a); margin-top:2px; }
.pl-desc{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:11.5px; color:var(--text-dim,#9a9a9a); line-height:1.3; margin-top:2px; opacity:.85;
}

/* Reabrir: flutua no canto para não empurrar o player quando aparece. */
.pl-mostrar{
  position:fixed; right:16px; top:96px; z-index:40;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:20px; border:1px solid var(--linha,#2a2a2a);
  background:var(--card,#161616); color:var(--text,#fff);
  font-size:13px; font-weight:600; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.pl-mostrar:hover{ background:rgba(255,255,255,.10); }

/* Em tela estreita a fila vai para baixo do player: lado a lado nao cabe. */
@media (max-width: 980px){
  .watch.com-playlist{ grid-template-columns:minmax(0,1fr); }
  .pl-lateral{ position:static; max-height:60vh; }
  .pl-mostrar{ top:auto; bottom:16px; }
}

/* ---------- pay-per-view bloqueado na fila ---------- */
/* A miniatura escurece e o cadeado fica sobre ela: a fila mostra o que tem,
   mas deixa claro o que ainda nao abriu. */
.pl-linha.bloqueada .pl-mini img{ opacity:.42; filter:grayscale(.5); }
.pl-linha.bloqueada .pl-nome{ color:var(--text-dim,#9a9a9a); }

.pl-cadeado{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.8); pointer-events:none;
}

.pl-preco{
  display:inline-flex; align-items:center; gap:4px; margin-top:3px;
  font-size:11.5px; font-weight:700; color:var(--acento,#e50914);
}

/* ═══════════════════════════════════════════════════════════════════
   A TELA DO VÍDEO EM TRÊS COLUNAS
   publicidade à esquerda · player no centro · conversa à direita

   O grid é montado pelas classes que a página coloca: `tem-ads` e
   `tem-chat`. Sem nenhuma das duas, `.watch` continua como sempre foi —
   nada muda para quem não tem lateral.

   As cores saem das variáveis que o :root REALMENTE define: --surface,
   --surface-2, --text, --text-dim e --accent-1. Vale dizer porque o resto
   do arquivo usa --card, --linha e --acento, que **não existem** em lugar
   nenhum: as 17 ocorrências caem todas no valor de reserva. Funciona por
   acidente, e quem trocar o tema vai descobrir que metade da tela não o
   acompanha.
   ═══════════════════════════════════════════════════════════════════ */

.watch.tem-ads,
.watch.tem-chat {
  max-width: 1760px;
  display: grid;
  gap: 20px;
  align-items: start;
}

.watch.tem-ads             { grid-template-columns: 300px minmax(0, 1fr); }
.watch.tem-chat            { grid-template-columns: minmax(0, 1fr) 340px; }
.watch.tem-ads.tem-chat    { grid-template-columns: 300px minmax(0, 1fr) 340px; }

/* O player é quem manda: nunca encolhe por causa das laterais. */
.watch .watch-principal { min-width: 0; }

/* As duas laterais acompanham a rolagem — o player fica no lugar e a
   conversa continua ao alcance. 96px é a altura da barra fixa. */
.ads-lateral,
.cm-lateral { position: sticky; top: 96px; }

/* ---- a publicidade ---- */

.ads-lateral { min-width: 0; }

.ads-lateral .ads-peca {
  position: relative; width: 100%; overflow: hidden;
  line-height: 0; border-radius: 12px;
}
/* A PECA NAO PASSA DA ALTURA DO VIDEO.

   O formato e 300x600 e a coluna tem 300px fixos, mas a altura do player
   varia com a largura da janela: na faixa em que a lateral aparece (acima de
   1500px) o video mede de 461 a 620px. Sem o teto, a peca sobraria para baixo
   nas telas menores dessa faixa.

   max-width + max-height com width/height AUTO, e nao width 100% com
   object-fit: deixando o proprio navegador escolher o tamanho, a CAIXA do
   elemento fica com a proporcao certa. Com width 100% a caixa vira
   300x554 e so o desenho interno respeita a proporcao -- o que funciona
   na tela e mente para qualquer medida feita no elemento.

   Nada e cortado, de proposito: a chamada da peca fica na base, e corte
   comeria justamente ela. Anuncio sem chamada e espaco gasto a toa.

   --altura-player e a mesma variavel que a conversa usa, escrita pelo
   altura-lateral.js. Sem ela (JS fora, tela estreita) o max-height nao se
   aplica e a peca volta ao tamanho natural, que e o comportamento de antes. */
.ads-lateral .ads-peca-imagem {
  display: block;
  width: auto; height: auto;
  max-width: 100%;
  max-height: var(--altura-player, none);
  margin-inline: auto;
}
.ads-lateral .ads-peca-link   { display: block; text-decoration: none; }
.ads-lateral .ads-peca-selo {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(0, 0, 0, .68); color: #fff;
  font-size: 10px; line-height: 16px; letter-spacing: .3px;
  text-transform: uppercase; pointer-events: none;
}
.ads-lateral .ads-peca-titulo {
  display: block; padding: 22px 16px; border-radius: 12px;
  background: var(--surface, #141414); color: var(--text, #f5f5f5);
  font-size: 14px; line-height: 1.35; text-align: center;
}

/* ---- a conversa ---- */

.cm-lateral {
  border: 1px solid var(--surface-2, #1f1f1f); border-radius: 12px;
  background: var(--surface, #141414); overflow: hidden;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 140px);
}

.cm-cab {
  padding: 12px 14px; border-bottom: 1px solid var(--surface-2, #1f1f1f);
  display: flex; flex-direction: column; gap: 2px;
}
.cm-cab h2 { font-size: 14px; font-weight: 700; margin: 0; line-height: 1.2; }

/* Dizer que some faz parte do produto: quem escreve tem de saber que não
   fica guardado. */
.cm-aviso { font-size: 11px; color: var(--text-dim, #b3b3b3); }

.cm-fila {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 12px;
  min-height: 160px;
}

.cm-vazio { margin: auto 0; color: var(--text-dim, #b3b3b3); font-size: 13px; text-align: center; }

.cm-linha { display: flex; flex-direction: column; gap: 3px; }
.cm-linha-cab { display: flex; align-items: baseline; gap: 8px; }
.cm-autor {
  font-size: 12.5px; font-weight: 700; color: var(--text, #f5f5f5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%;
}
.cm-hora { font-size: 11px; color: var(--text-dim, #b3b3b3); flex: 0 0 auto; }

/* break-word porque uma URL colada sem espaço empurraria a coluna inteira. */
.cm-texto {
  margin: 0; font-size: 13.5px; line-height: 1.45;
  color: var(--text-dim, #b3b3b3); white-space: pre-wrap;
  overflow-wrap: break-word; word-break: break-word;
}

.cm-form { border-top: 1px solid var(--surface-2, #1f1f1f); padding: 10px 12px; }
.cm-form textarea {
  width: 100%; resize: vertical; min-height: 44px; max-height: 140px;
  border: 1px solid var(--surface-2, #1f1f1f); border-radius: 8px;
  background: rgba(255, 255, 255, .04); color: var(--text, #f5f5f5);
  padding: 8px 10px; font: inherit; font-size: 13.5px; line-height: 1.4;
}
.cm-form textarea:focus-visible { outline: 2px solid var(--accent-1, #fb1c53); outline-offset: 1px; }

.cm-form-pe { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cm-erro { flex: 1 1 auto; font-size: 12px; color: var(--accent-1, #fb1c53); min-width: 0; }
.cm-enviar {
  flex: 0 0 auto; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--accent-1, #fb1c53); color: #fff;
  padding: 7px 16px; font-size: 13px; font-weight: 700;
}
.cm-enviar:hover { filter: brightness(1.1); }

.cm-convite { border-top: 1px solid var(--surface-2, #1f1f1f); padding: 12px; text-align: center; }

/* Rótulo que só o leitor de tela usa. */
.cm-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- quando a tela aperta ----
   A publicidade é a primeira a sair: ela é o conteúdo menos pedido dos três.
   A conversa resiste mais, e no fim desce para baixo do player em vez de
   sumir — quem está no celular ainda quer comentar. */

@media (max-width: 1500px) {
  .watch.tem-ads.tem-chat { grid-template-columns: minmax(0, 1fr) 340px; }
  .watch.tem-ads          { grid-template-columns: minmax(0, 1fr); }
  .ads-lateral            { display: none; }
}

@media (max-width: 1100px) {
  .watch.tem-ads,
  .watch.tem-chat,
  .watch.tem-ads.tem-chat { grid-template-columns: minmax(0, 1fr); }

  .cm-lateral { position: static; max-height: 70vh; }
}

/* A coluna da direita pode levar duas coisas — a playlist e a conversa —,
   empilhadas e cada uma com sua rolagem. Sem o flex, a segunda escorregaria
   para fora da altura do grid. */
.watch-direita {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0; position: sticky; top: 96px;
}

/* A CONVERSA TEM A ALTURA DO VIDEO.
   As duas colunas terminam na mesma linha, e e isso que faz a tela parecer
   montada em vez de empilhada.

   --altura-player e escrito pelo JS, que mede o player de verdade: a altura
   depende da largura da coluna central, que muda com a janela e com a
   presenca da coluna de publicidade. Nao da para calcular isso em CSS sem
   fixar a largura do grid, e grid fixo quebra no primeiro layout novo.

   O 44vh e a rede: vale ate o JS medir, e continua valendo se ele nao rodar.
   Sem ele, a conversa nasceria com altura zero por um instante. */
/* A CONVERSA ACOMPANHA A ALTURA DO VIDEO, nas quatro telas.
   Vale tanto para o treinamento (onde ela mora dentro de .watch-direita)
   quanto para video, ao vivo e evento (onde e filha direta do grid): uma
   regra so, no ancestral comum, para nao haver duas definicoes divergindo.

   O valor de reserva e o teto antigo por altura de janela: vale ate o JS
   medir, e continua valendo se ele nao rodar. */
.watch .cm-lateral {
  height: var(--altura-player, calc(100vh - 140px));
  max-height: none;
}

.watch-direita .cm-lateral { position: static; }

/* A PLAYLIST FICA ABAIXO, e cresce a vontade ate o fim da tela. Teto em vh e
   nao em px: o que limita aqui e a altura da janela, nao a do video. */
.watch-direita .pl-lateral {
  position: static;
  max-height: calc(100vh - 220px);
}

@media (max-width: 1100px) {
  .watch-direita { position: static; }

  /* Na tela estreita a coluna desce para baixo do player, e amarrar a altura
     ao video deixa de fazer sentido: nao ha simetria para manter, e o video
     ocupa a largura toda. Volta ao teto por altura de janela. */
  .watch .cm-lateral { height: auto; max-height: 70vh; }
  .watch-direita .pl-lateral { max-height: 70vh; }
}

/* O .watch dentro da aba de atividades do evento nao precisa do respiro de
   84px que a versao de pagina inteira usa para escapar da barra fixa — aqui
   ele ja esta dentro do conteudo. */
.tabpane .watch { padding-top: 0; }