/*
 * Paleta em variáveis CSS (canais RGB separados por espaço, para permitir
 * opacidade via rgb(var(--x) / alfa)). O tema escuro só redefine os valores;
 * os componentes usam sempre os mesmos nomes.
 */
:root {
    color-scheme: light;

    --cor-tela: 245 246 247;
    --cor-superficie: 255 255 255;
    --cor-superficie-2: 250 250 250;
    --cor-superficie-3: 241 242 243;

    --cor-tinta: 49 49 49;
    --cor-tinta-2: 97 97 97;
    --cor-tinta-3: 138 138 138;

    --cor-linha: 217 217 217;
    --cor-linha-2: 236 236 236;

    --cor-marca: 0 81 195;
    --cor-marca-escuro: 0 61 148;
    --cor-marca-claro: 234 241 252;
    --cor-sobre-marca: 255 255 255;
    --cor-link: 0 85 220;

    --cor-ok: 18 114 74;
    --cor-ok-fundo: 231 244 236;
    --cor-ok-linha: 191 224 205;

    --cor-erro: 179 38 30;
    --cor-erro-fundo: 252 235 233;
    --cor-erro-linha: 240 203 199;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --cor-tela: 10 14 19;
        --cor-superficie: 17 24 33;
        --cor-superficie-2: 22 31 42;
        --cor-superficie-3: 30 40 52;

        --cor-tinta: 227 234 242;
        --cor-tinta-2: 148 162 177;
        --cor-tinta-3: 106 120 135;

        --cor-linha: 35 46 59;
        --cor-linha-2: 27 36 49;

        --cor-marca: 116 164 255;
        --cor-marca-escuro: 147 184 255;
        --cor-marca-claro: 23 37 61;
        --cor-sobre-marca: 8 17 31;
        --cor-link: 122 167 255;

        --cor-ok: 78 195 139;
        --cor-ok-fundo: 16 38 27;
        --cor-ok-linha: 29 70 51;

        --cor-erro: 242 121 110;
        --cor-erro-fundo: 44 20 19;
        --cor-erro-linha: 90 39 35;
    }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    background: rgb(var(--cor-tela));
    color: rgb(var(--cor-tinta));
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: rgb(var(--cor-link)); }

/* ------------------------------ topbar ------------------------------ */
.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 20px;
    border-bottom: 1px solid rgb(var(--cor-linha));
    background: rgb(var(--cor-superficie));
}
.topbar-marca { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.topbar-marca .logo-dot { width: 8px; height: 8px; border-radius: 999px; background: rgb(var(--cor-marca)); }
.topbar h1 { margin: 0; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.topbar .sub { color: rgb(var(--cor-tinta-2)); font-size: 12.5px; }
.topbar-spacer { flex: 1; }
.topbar-user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgb(var(--cor-tinta-2)); }
.back { color: rgb(var(--cor-tinta)); text-decoration: none; font-size: 1.1rem; display: inline-flex; }

/* ------------------------------ layout ------------------------------ */
.container { max-width: 960px; margin: 0 auto; padding: 28px 20px; }

/* ------------------------------- cards ------------------------------- */
.card {
    background: rgb(var(--cor-superficie));
    border: 1px solid rgb(var(--cor-linha));
    border-radius: 10px;
    margin-bottom: 24px;
}
.card-header { padding: 16px 20px; border-bottom: 1px solid rgb(var(--cor-linha-2)); }
.card-header h2 { margin: 0; font-size: 15px; font-weight: 600; }
.card-body { padding: 20px; }
section > h2 { font-size: 14px; font-weight: 600; color: rgb(var(--cor-tinta-2)); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; }

/* ------------------------------- forms -------------------------------- */
.field-label { display: block; margin-bottom: 5px; font-size: 12.5px; color: rgb(var(--cor-tinta-2)); }
.field-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="file"] {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    background: rgb(var(--cor-superficie));
    border: 1px solid rgb(var(--cor-linha));
    border-radius: 8px;
    color: rgb(var(--cor-tinta));
    font-size: 13.5px;
    font-family: inherit;
}
input[type="file"] { padding: 8px 12px; height: auto; }
.field-input:focus,
input:focus {
    outline: none;
    border-color: rgb(var(--cor-marca));
    box-shadow: 0 0 0 3px rgb(var(--cor-marca) / .15);
}

.form-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.form-inline input[type="text"],
.form-inline input[type="url"],
.form-inline input[type="file"] { flex: 1; min-width: 200px; }

.source-toggle { display: flex; gap: 16px; font-size: 12.5px; color: rgb(var(--cor-tinta-2)); }
.source-toggle label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ------------------------------ botões -------------------------------- */
button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid rgb(var(--cor-linha));
    background: rgb(var(--cor-superficie));
    color: rgb(var(--cor-tinta));
    cursor: pointer;
    text-decoration: none;
    font-size: 13.5px;
    font-family: inherit;
    transition: background-color .12s ease, border-color .12s ease;
}
button:hover, .btn:hover { background: rgb(var(--cor-superficie-2)); }
.btn-primary, button[type="submit"] {
    border-color: rgb(var(--cor-marca));
    background: rgb(var(--cor-marca));
    color: rgb(var(--cor-sobre-marca));
}
.btn-primary:hover, button[type="submit"]:hover { background: rgb(var(--cor-marca-escuro)); border-color: rgb(var(--cor-marca-escuro)); }
.btn-danger {
    border-color: rgb(var(--cor-erro-linha));
    background: rgb(var(--cor-erro-fundo));
    color: rgb(var(--cor-erro));
}
.btn-danger:hover { filter: brightness(.95); }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.link-btn {
    background: none; border: none; color: rgb(var(--cor-link));
    text-align: left; padding: 12px 12px 0; cursor: pointer; font-size: .85rem;
}
.link-btn:hover { text-decoration: underline; }

/* ------------------------------- avisos -------------------------------- */
.alert {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgb(var(--cor-erro-linha));
    background: rgb(var(--cor-erro-fundo));
    color: rgb(var(--cor-erro));
    font-size: 13px;
    margin-bottom: 14px;
}
.empty { color: rgb(var(--cor-tinta-3)); font-size: 13px; }

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
    border: 1px solid rgb(var(--cor-linha));
    background: rgb(var(--cor-superficie-3));
    color: rgb(var(--cor-tinta-2));
}

/* --------------------------- lista de playlists ------------------------ */
.playlist-grid { display: grid; gap: 12px; }
.playlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: rgb(var(--cor-superficie));
    border: 1px solid rgb(var(--cor-linha));
    border-radius: 10px;
    padding: 14px 18px;
    flex-wrap: wrap;
}
.playlist-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.playlist-info strong { font-size: 14px; }
.playlist-info small { color: rgb(var(--cor-tinta-2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; font-size: 12.5px; }
.playlist-actions { display: flex; gap: 8px; }
.playlist-actions form { display: inline; }

/* ------------------------------ auth pages ----------------------------- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.auth-card {
    width: 100%;
    max-width: 380px;
    background: rgb(var(--cor-superficie));
    border: 1px solid rgb(var(--cor-linha));
    border-radius: 12px;
    padding: 28px;
}
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 18px; font-weight: 700; font-size: 15px; }
.auth-brand .logo-dot { width: 9px; height: 9px; border-radius: 999px; background: rgb(var(--cor-marca)); }
.auth-title { text-align: center; font-size: 17px; font-weight: 600; margin: 0 0 20px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-footer { text-align: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(var(--cor-linha-2)); font-size: 12.5px; color: rgb(var(--cor-tinta-2)); }

/* -------------------------------- watch -------------------------------- */
.watch-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - 56px);
}

@media (min-width: 1400px) {
    .watch-layout { grid-template-columns: 380px 1fr; }
}

.channel-panel {
    border-right: 1px solid rgb(var(--cor-linha));
    background: rgb(var(--cor-superficie));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.type-menu { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px; overflow-y: auto; }
.type-card {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 18px; background: rgb(var(--cor-superficie-2));
    border: 1px solid rgb(var(--cor-linha)); border-radius: 12px;
    color: rgb(var(--cor-tinta)); cursor: pointer; text-align: left;
    transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
}
.type-card:hover:not(:disabled) {
    border-color: rgb(var(--cor-marca)); background: rgb(var(--cor-marca-claro));
    transform: translateX(2px);
}
.type-card:disabled { opacity: .4; cursor: not-allowed; }
.type-icon {
    font-size: 1.4rem; width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgb(var(--cor-superficie)); border-radius: 10px;
}
.type-label { flex: 1; font-size: 1rem; font-weight: 600; }
.type-count {
    font-size: .8rem; color: rgb(var(--cor-tinta-2)); font-weight: 600;
    background: rgb(var(--cor-superficie)); border: 1px solid rgb(var(--cor-linha));
    border-radius: 999px; padding: 3px 11px;
}

.browse-panel { display: flex; flex-direction: column; overflow: hidden; flex: 1; }

.browse-panel-header {
    display: flex; flex-direction: column; gap: 8px; padding: 12px;
    border-bottom: 1px solid rgb(var(--cor-linha)); background: rgb(var(--cor-superficie));
}
.status { padding: 2px 2px 0; color: rgb(var(--cor-tinta-2)); font-size: .8rem; }
.channel-panel input[type="search"] { margin: 0; width: 100%; }
.browse-panel-header .link-btn { padding: 0; font-size: .8rem; }

.channel-list { overflow-y: auto; flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 6px; }

.category {
    border: 1px solid rgb(var(--cor-linha));
    border-radius: 10px;
    background: rgb(var(--cor-superficie));
    overflow: hidden;
    /* Sem isso, o overflow:hidden acima tira a altura mínima automática que o
       flexbox dá a item de coluna — daí o flex-shrink (1 por padrão) esmaga as
       categorias fechadas quase a zero quando uma categoria aberta ultrapassa
       a altura da lista, em vez de deixar a lista simplesmente rolar. */
    flex-shrink: 0;
}
.category summary {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px;
    cursor: pointer; list-style: none; font-size: .85rem; font-weight: 600;
    color: rgb(var(--cor-tinta));
    transition: background-color .12s ease, color .12s ease;
}
.category summary:hover { background: rgb(var(--cor-superficie-2)); }
.category summary::-webkit-details-marker { display: none; }
.category summary::before {
    content: '▸'; color: rgb(var(--cor-tinta-3)); transition: transform .15s ease;
    font-size: .75rem; flex-shrink: 0;
}
.category[open] > summary {
    background: rgb(var(--cor-marca-claro)); color: rgb(var(--cor-marca));
    border-bottom: 1px solid rgb(var(--cor-linha-2));
}
.category[open] > summary::before { transform: rotate(90deg); color: rgb(var(--cor-marca)); }
.category-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-count {
    font-size: .72rem; font-weight: 600; color: rgb(var(--cor-tinta-2));
    background: rgb(var(--cor-superficie-3)); border-radius: 999px; padding: 2px 9px;
    flex-shrink: 0;
}
.category[open] > summary .category-count { background: rgb(var(--cor-superficie)); color: rgb(var(--cor-marca)); }
.category-items { padding: 6px; display: flex; flex-direction: column; gap: 4px; }

.subcategory { border-color: rgb(var(--cor-linha-2)); background: rgb(var(--cor-superficie-2)); }
.subcategory summary { font-weight: 500; font-size: .82rem; padding: 9px 12px; }
.subcategory summary .category-name { color: rgb(var(--cor-tinta)); }

.channel-item {
    width: 100%; display: flex; align-items: flex-start; gap: 10px;
    padding: 8px; background: transparent; border: none; border-radius: 8px;
    color: rgb(var(--cor-tinta)); text-align: left; cursor: pointer;
    height: auto;
}
.channel-item:hover { background: rgb(var(--cor-superficie-2)); }
.channel-item img,
.channel-icon {
    width: 34px; height: 34px; flex-shrink: 0; object-fit: contain;
    border-radius: 6px; background: #000;
}
.channel-icon { display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
/* Filmes/séries: pôster em retrato em vez do logo quadrado de canal ao vivo,
   com o texto centralizado ao lado (em vez de alinhado à esquerda). */
.channel-item.is-vod img,
.channel-item.is-vod .channel-icon { width: 42px; height: 58px; object-fit: cover; font-size: 1.3rem; }
.channel-item.is-vod { align-items: center; }
.channel-item.is-vod .channel-text { align-items: center; text-align: center; }
.channel-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.channel-name {
    font-size: .88rem; line-height: 1.32; font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.channel-group {
    font-size: .74rem; color: rgb(var(--cor-tinta-2));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.player-panel { display: flex; flex-direction: column; padding: 16px; gap: 12px; min-width: 0; background: rgb(var(--cor-tela)); }
#player { width: 100%; flex: 1; background: #000; border-radius: 10px; }
.now-playing { color: rgb(var(--cor-tinta-2)); font-size: .9rem; }
.player-back { display: none; align-self: flex-start; }

/* No mobile não faz sentido dividir a tela ao meio entre lista e player: a lista
   fica com a tela toda pra navegação, e o player só assume a tela quando o usuário
   toca em algo pra assistir (classe .player-active, ligada pelo player.js). */
@media (max-width: 720px) {
    .watch-layout { grid-template-columns: 1fr; height: calc(100vh - 56px); }
    .channel-panel { height: 100%; border-right: none; }
    .player-panel { display: none; }

    .watch-layout.player-active .channel-panel { display: none; }
    .watch-layout.player-active .player-panel {
        display: flex;
        position: fixed;
        inset: 56px 0 0 0;
        z-index: 20;
    }
    .watch-layout.player-active .player-back { display: inline-flex; }
}