/* ========================================================================
   MENTE DE JURADO - DESIGN SYSTEM V5.1 (REFINAMENTO DA PÁGINA BATTLE-SETUP)
   Melhorias: Criação de um stepper horizontal para o formulário de
   criação de batalha e container para a página.
   ======================================================================== */

:root {
    /* --- PALETA DE CORES PRINCIPAL --- */
    --azul-principal: #4A90E2;       
    --azul-hover: #357ABD;         
    --dourado-destaque: #FFC700;
    --dourado-hover: #d4a600; 
    --prata-destaque: #C0C0C0;
    --bronze-destaque: #CD7F32;
    --branco-texto: #F0F2F5;       
    --cinza-texto: #A8B2C1;         
    
    --fundo-principal: #0D1117;     
    --fundo-card: #161B22;         
    --fundo-input: #010409;         
    
    --borda-padrao: #30363D;       
    --sucesso: #28a745;
    --perigo: #dc3545;
    --aviso: #ffc107;

    /* --- FONTES E TRANSIÇÕES --- */
    --font-family: 'Inter', sans-serif;
    --transition-fast: 0.2s ease-in-out;
    --transition-smooth: 0.3s ease-in-out;

    /* --- SOMBRAS (para profundidade) --- */
    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.4);
    --shadow-glow-blue: 0 0 25px rgba(74, 144, 226, 0.3);
    --shadow-glow-gold: 0 0 35px rgba(255, 199, 0, 0.4);
}

/* ========================================================================
   ESTILOS GLOBAIS E RESET
   ======================================================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: var(--font-family);
    background-color: var(--fundo-principal);
    color: var(--branco-texto);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    animation: fadeIn 0.5s var(--transition-smooth);
}

body.fade-out { opacity: 0; transition: opacity 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- BARRA DE ROLAGEM ESTILIZADA --- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--fundo-principal); }
::-webkit-scrollbar-thumb { background-color: var(--borda-padrao); border-radius: 5px; border: 2px solid var(--fundo-principal); }
::-webkit-scrollbar-thumb:hover { background-color: #4b5563; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; margin-bottom: 0.75rem; color: var(--branco-texto); text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
h1 { font-size: 2.5rem; font-weight: 900; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; }
p { margin-bottom: 1rem; color: var(--cinza-texto); max-width: 75ch; }
a { color: var(--azul-principal); text-decoration: none; transition: color var(--transition-fast); }
a:hover { text-decoration: underline; color: var(--dourado-destaque); }
.hidden { display: none !important; }

/* ========================================================================
   COMPONENTES REUTILIZÁVEIS - SISTEMA DE BOTÕES V5.0
   ======================================================================== */

/* --- Botão Padrão (Dourado com texto branco - conforme seu último CSS) --- */
button, .nav-button {
    font-family: var(--font-family); padding: 0.8rem 1.5rem; border: none;
    border-radius: 8px; background: linear-gradient(180deg, var(--dourado-destaque), var(--dourado-hover));
    color: white; font-size: 1rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 199, 0, 0.2);
    transition: all var(--transition-fast);
}
button:hover, .nav-button:hover {
    transform: translateY(-3px); box-shadow: 0 6px 20px rgba(74, 144, 226, 0.35);
    filter: brightness(1.1); text-decoration: none;
}

button:active, .nav-button:active { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(74, 144, 226, 0.3); }
button:disabled { background: #30363D; box-shadow: none; cursor: not-allowed; transform: none; filter: grayscale(50%); }
.danger-btn { background: linear-gradient(180deg, #e53935, #c62828); box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2); }
.danger-btn:hover { background: linear-gradient(180deg, #c62828, #b71c1c); box-shadow: 0 6px 20px rgba(220, 53, 69, 0.35); }

/* --- Formulários --- */
.form-group { margin-bottom: 1.5rem; }
label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--cinza-texto); }
input, textarea, select {
    width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--borda-padrao);
    border-radius: 8px; font-size: 1rem; background-color: var(--fundo-input);
    color: var(--branco-texto); font-family: var(--font-family);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--azul-principal); box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.2); }

/* --- Modais --- */
.modal-overlay {
    position: fixed; inset: 0; background-color: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center;
    z-index: 1000; opacity: 0; pointer-events: none;
    transition: opacity var(--transition-smooth);
}
.modal-overlay:not(.hidden) { opacity: 1; pointer-events: all; }
.modal-content {
    background-color: var(--fundo-card); padding: 2.5rem; border-radius: 16px;
    border: 1px solid var(--borda-padrao); width: 90%; max-width: 500px;
    box-shadow: var(--shadow-md); transform: scale(0.95) translateY(10px);
    transition: transform var(--transition-smooth);

    max-height: 85vh;
    overflow-y: auto;
}
.modal-overlay:not(.hidden) .modal-content { transform: scale(1) translateY(0); }
.modal-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; 
    position: sticky;
    bottom: 0;
    background-color: var(--fundo-card);
}
.modal-actions .cancel-btn { background: transparent; border: 1px solid var(--borda-padrao); color: var(--cinza-texto); box-shadow: none; }
.modal-actions .cancel-btn:hover { background: var(--borda-padrao); color: var(--branco-texto); }

/* --- Notificações (compatível com .hidden) --- */
.notification-bell-container { position: relative; z-index: 120; }

.notification-bell-btn{
  position: relative; /* para o “dot” has-unread posicionar certo */
  background: none; border: none; font-size: 1.8rem; cursor: pointer;
  color: var(--dourado-destaque); transition: transform .12s ease, filter .12s ease;
}
.notification-bell-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.notification-bell-btn.has-unread::after{
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 10px; height: 10px; background-color: var(--dourado-destaque);
  border-radius: 50%; border: 2px solid var(--fundo-card);
  animation: pulse 1.5s infinite;
}

/* Painel ancorado ao sino — visível quando NÃO tem .hidden */
.notification-panel{
  position: absolute; top: calc(100% + 12px); right: 0;
  width: min(420px, 92vw); max-height: min(70vh, 620px); overflow: auto;

  background: linear-gradient(180deg, rgba(18,20,26,.92), rgba(12,14,18,.92));
  border: 1px solid var(--borda-padrao); /* mantém sua paleta */
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  transform-origin: top right; z-index: 110;
}

/* Quando abrir (ou seja, quando REMOVER .hidden), anima sutilmente */
.notification-panel:not(.hidden){ animation: notif-drop .18s ease both; }
@keyframes notif-drop{
  from{ opacity:0; transform: translateY(-6px) scale(.98); }
  to  { opacity:1; transform: translateY(0) scale(1); }
}

/* Conteúdo interno (se já tiver nomes diferentes, mantém sem conflito) */
.notification-panel .notification-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08);
}
.notification-panel .notification-panel-header h3{
  margin:0; font-size:1rem; letter-spacing:.2px;
}
.notification-panel .notification-list{
  list-style:none; margin:0; padding:10px 12px; display:grid; gap:10px;
}

/* Scrollbar elegante do painel */
.notification-panel::-webkit-scrollbar{ width:10px; }
.notification-panel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}

/* Mantém compat com seu estado fechado */
.hidden{ display: none !important; }

@keyframes pulse{
  0%,100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(255,199,0,.4); }
  50%{ transform: scale(1.1); box-shadow: 0 0 5px 5px rgba(255,199,0,0); }
}


/* ========================================================================
   LAYOUT E SEÇÕES PRINCIPAIS
   ======================================================================== */

.header-glassmorphism {
    padding: 1rem 2.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky; top: 0; z-index: 100;
    background-color: rgba(16, 21, 28, 0.85);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--borda-padrao);
}
.header-glassmorphism > *:first-child { flex: 1 0 0; }
.header-glassmorphism > *:last-child { flex: 1 0 0; display: flex; justify-content: flex-end; }
.header-glassmorphism h1 { font-size: 1.5rem; margin: 0; text-align: center; }
.header-glassmorphism .back-link-white { color: var(--branco-texto); text-decoration: none; font-weight: 500; }

.header-logo {
  height: 50px;
  max-height: 50px;
  width: auto;
  object-fit: contain;
  transition: transform var(--transition-fast);
}
.header-logo:hover { transform: scale(1.05); }

.main-nav { display: flex; align-items: center; gap: 1.5rem; }
.main-nav a { color: var(--cinza-texto); font-weight: 500; position: relative; padding: 0.5rem 0; }
.main-nav a:hover { color: var(--branco-texto); text-decoration: none; }

/* --- ESTILOS DE BOTÕES NO CABEÇALHO (REFINADO) --- */
.main-nav .nav-button {
    background: linear-gradient(180deg, var(--dourado-destaque), var(--dourado-hover));
    color: var(--fundo-principal);
    box-shadow: 0 4px 15px rgba(255, 199, 0, 0.2);
    padding: 0.6rem 1.2rem;
}
.main-nav .nav-button:hover {
    box-shadow: 0 6px 20px rgba(255, 199, 0, 0.35);
    filter: brightness(1.1);
}
.main-nav a[href="/curso.html"] {
    background: transparent;
    border: 1px solid var(--borda-padrao);
    color: var(--cinza-texto);
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    transition: all var(--transition-fast);
}
.main-nav a[href="/curso.html"]:hover {
    background-color: var(--borda-padrao);
    color: var(--branco-texto);
}
#logout-btn {
    background: transparent; border: 1px solid var(--borda-padrao); color: var(--cinza-texto);
    font-family: var(--font-family); padding: 0.6rem 1.2rem; font-size: 1rem;
    font-weight: 600; border-radius: 8px; cursor: pointer; transition: all var(--transition-fast);
}
#logout-btn:hover { background-color: rgba(220, 53, 69, 0.1); border-color: var(--perigo); color: var(--perigo); }

.main-container { width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.content-main, .admin-main { width: 100%; max-width: 1200px; margin: 2rem auto; padding: 0 1rem; flex-grow: 1; }
.main-footer { position: relative; text-align: center; max-width: 1200px; margin: 3rem auto 0; padding: 2rem 1rem; border-top: 1px solid var(--borda-padrao); }
.main-footer a { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); }

/* ========================================================================
   PÁGINAS ESPECÍFICAS
   ======================================================================== */

/* --- Páginas de Curso e Aulas --- */
@keyframes border-glow {
  0% { border-color: var(--azul-principal); box-shadow: 0 0 15px rgba(74, 144, 226, 0.2); }
  50% { border-color: var(--dourado-destaque); box-shadow: 0 0 25px rgba(255, 199, 0, 0.3); }
  100% { border-color: var(--azul-principal); box-shadow: 0 0 15px rgba(74, 144, 226, 0.2); }
}

.progress-section {
    background-color: var(--fundo-card); border-radius: 12px; padding: 1.5rem 2rem;
    margin-bottom: 2.5rem; border: 2px solid var(--azul-principal); position: relative;
    animation: border-glow 5s infinite linear; transition: transform var(--transition-fast);
}
.progress-section:hover { transform: scale(1.02); }
.progress-section h2 { font-size: 1.2rem; color: var(--cinza-texto); text-transform: uppercase; letter-spacing: 1px; }
.progress-bar-container { height: 12px; background-color: var(--fundo-input); border-radius: 6px; overflow: hidden; margin: 1rem 0; }
.progress-bar-fill { height: 100%; width: 0%; border-radius: 6px; background: linear-gradient(90deg, var(--azul-principal), var(--dourado-destaque)); transition: width 1s cubic-bezier(0.25, 1, 0.5, 1); }
.progress-text { font-size: 1.2rem; font-weight: 700; color: var(--branco-texto); }

.courses-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem; max-width: 1100px; margin: 0 auto;
}
.course-card {
    background-color: var(--fundo-card); border: 1px solid var(--borda-padrao); border-radius: 12px;
    overflow: hidden; text-decoration: none; color: inherit;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    position: relative;
}
.course-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-glow-blue); border-color: var(--azul-principal); }
.course-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--transition-smooth); }
.course-card:hover img { transform: scale(1.05); }
.course-card-content { padding: 1.25rem; }
.course-card-content h3 { font-size: 1.1rem; margin-bottom: 0; }

/* --- PÁGINA DE PERFIL (PROFILE.HTML) --- */

/* --- PERFIL: Últimas Avaliações (colapsável) --- */
#recent-battles-view{ position: relative; }
#recent-battles-fade{
    position:absolute;
    left:0; right:0;
    bottom: 54px; /* espaço para o botão */
    height: 90px;
    background: linear-gradient(180deg, rgba(22,27,34,0), rgba(22,27,34,1));
    pointer-events:none;
    display:none;
    border-radius: 12px;
}
#recent-battles-view.collapsed #recent-battles-fade{ display:block; }
#recent-battles-view.collapsed #recent-battles-list{
    max-height: 320px;
    overflow: hidden;
}
#recent-battles-view.expanded #recent-battles-list{
    max-height: none;
    overflow: visible;
}
#recent-battles-toggle{
    width: 100%;
    margin-top: 14px;
    padding: 0.7rem 1rem;
    background: transparent;
    border: 1px solid var(--borda-padrao);
    color: var(--cinza-texto);
    box-shadow: none;
}
#recent-battles-toggle:hover{
    background: var(--borda-padrao);
    color: var(--branco-texto);
    transform: none;
}


.profile-container {
    display: grid; grid-template-columns: 320px 1fr; gap: 2.5rem;
    background: var(--fundo-card); padding: 2.5rem; border-radius: 16px;
    border: 1px solid var(--borda-padrao); box-shadow: var(--shadow-md);
}
@media (max-width: 900px) { .profile-container { grid-template-columns: 1fr; } }
.profile-view { display: flex; flex-direction: column; text-align: center; }
#profile-pic, .initials-avatar {
    width: 150px; height: 150px; margin: 0 auto 1.5rem auto; border-radius: 50%;
    object-fit: cover; border: 4px solid var(--dourado-destaque); box-shadow: var(--shadow-glow-gold);
}
#profile-vulgo { font-size: 2rem; font-weight: 900; margin-bottom: 0.5rem; }
#profile-title-badge {
    display: inline-block; background-color: var(--fundo-input); color: var(--dourado-destaque);
    padding: 4px 12px; border-radius: 15px; font-size: 0.8rem;
    font-weight: 600; margin-bottom: 1.5rem; border: 1px solid var(--borda-padrao);
}
.profile-info-grid {
    display: flex; flex-direction: column; gap: 1rem; text-align: left;
    background: var(--fundo-principal); padding: 1rem; border-radius: 8px; margin-bottom: 2rem;
}
.profile-social-icons { display: flex; gap: 1rem; margin-top: 0.5rem; }
.profile-social-icons a { color: var(--cinza-texto); transition: color var(--transition-fast); }
.profile-social-icons a:hover { color: var(--branco-texto); }
#edit-profile-btn {
    background: linear-gradient(180deg, var(--dourado-destaque), var(--dourado-hover));
    color: var(--fundo-principal); box-shadow: 0 4px 15px rgba(255, 199, 0, 0.2);
    border: none; width: 100%;
}
#edit-profile-btn:hover { box-shadow: 0 6px 20px rgba(255, 199, 0, 0.35); }
.profile-right-column h3 {
    font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--cinza-texto); margin-bottom: 1.5rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--borda-padrao);
}
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1rem; }
.achievement-card {
    padding: 1rem; text-align: center; background-color: var(--fundo-principal);
    border-radius: 8px; border: 1px solid var(--borda-padrao);
    transition: all var(--transition-fast); filter: grayscale(80%); opacity: 0.7;
}
.achievement-card.unlocked {
    background: var(--dourado-destaque); color: var(--fundo-principal); border-color: var(--dourado-hover);
    transform: translateY(-3px); box-shadow: 0 0 15px rgba(255, 199, 0, 0.3);
    filter: grayscale(0); opacity: 1;
}
.achievement-icon, .achievement-name { font-weight: 600; }
.achievement-icon { font-size: 1.8rem; }
.achievement-name { font-size: 0.8rem; }
#recent-battles-view { margin-top: 3rem; }
.history-list { display: flex; flex-direction: column; gap: 0.75rem; }
#recent-battles-list .history-row {
    display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
    padding: 0.75rem 1rem; background-color: var(--fundo-principal);
    border: 1px solid var(--borda-padrao); border-radius: 8px; transition: all var(--transition-fast);
}
#recent-battles-list .history-row:hover { border-color: var(--azul-principal); background-color: var(--fundo-card); }
.history-row-link { display: contents; text-decoration: none; }
.history-row-left { flex-shrink: 1; min-width: 0; }
.history-title {
    font-size: 0.9rem; font-weight: 600; color: var(--branco-texto);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-meta { font-size: 0.8rem; color: var(--cinza-texto); }
.history-row-center {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 0.9rem; flex-shrink: 0;
}
.history-row-center .team-name { max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-row-center .score-num { font-weight: 900; font-size: 1.1rem; color: var(--dourado-destaque); }

/* --- PÁGINA DE RANKING (RANKING.HTML) --- */
@keyframes respect-animation {
  0% { transform: scale(1.1) rotate(0); } 30% { transform: scale(1.4) rotate(-8deg); }
  60% { transform: scale(1.0) rotate(8deg); } 80% { transform: scale(1.2) rotate(-4deg); }
  100% { transform: scale(1.1) rotate(0); }
}
.ranking-list-header, .ranking-item {
    display: grid; grid-template-columns: 50px 2.5fr 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center; gap: 1.5rem; padding: 0 1.5rem; text-align: center;
}
.ranking-list-header {
    height: 50px; font-weight: 600; color: var(--cinza-texto); text-transform: uppercase;
    font-size: 0.8rem; letter-spacing: 0.5px; border-bottom: 1px solid var(--borda-padrao);
    background-color: var(--fundo-input); border-radius: 12px 12px 0 0;
}
.ranking-list-header span:nth-child(2) { text-align: left; }
#ranking-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
.ranking-item {
    min-height: 80px; background-color: var(--fundo-card);
    border: 1px solid var(--borda-padrao); border-left-width: 4px;
    border-radius: 8px; transition: all var(--transition-fast);
}
.ranking-item:hover {
    background-color: #1f242c; border-color: var(--azul-principal);
    transform: scale(1.02); z-index: 2; position: relative;
}
.ranking-item:nth-child(1) { border-left-color: var(--dourado-destaque); }
.ranking-item:nth-child(2) { border-left-color: var(--prata-destaque); }
.ranking-item:nth-child(3) { border-left-color: var(--bronze-destaque); }
.ranking-position { font-size: 1.5rem; font-weight: 700; color: var(--cinza-texto); }
.ranking-item:nth-child(1) .ranking-position { color: var(--dourado-destaque); }
.ranking-item:nth-child(2) .ranking-position { color: var(--prata-destaque); }
.ranking-item:nth-child(3) .ranking-position { color: var(--bronze-destaque); }
.ranking-jurado { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; text-align: left; }
.ranking-avatar, .initials-avatar.small {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    flex-shrink: 0; border: 2px solid var(--borda-padrao);
}
.jurado-info { display: flex; flex-direction: column; }
.jurado-vulgo { font-weight: 600; color: var(--branco-texto); font-size: 1.1rem; }
.jurado-location { font-size: 0.85rem; color: var(--cinza-texto); }
.jurado-badges { margin-top: 4px; display: flex; gap: 4px; }
.badge { font-size: 0.65rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; }
.badge-admin { background-color: var(--perigo); color: var(--branco-texto); }
.badge-premium { background-color: var(--dourado-destaque); color: var(--fundo-principal); }
.badge-comunidade { background-color: var(--borda-padrao); color: var(--cinza-texto); }
.ranking-stats { font-weight: 500; font-size: 1rem; }
.ranking-stats .points-strong { font-weight: 900; font-size: 1.2rem; color: var(--dourado-destaque); }
.ranking-respect { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.respect-icon {
    font-family: inherit; font-size: 1.5rem; background: none; border: none;
    cursor: pointer; padding: 0; filter: grayscale(1);
    transition: all var(--transition-fast);
}
.respect-icon:hover { transform: scale(1.2); }
.respect-icon.active { filter: grayscale(0); text-shadow: 0 0 10px var(--dourado-destaque); }
.respect-icon.animate { animation: respect-animation 0.6s cubic-bezier(0.25, 1, 0.5, 1); }

/* --- PÁGINA DE HISTÓRICO (HISTORY.HTML) --- */
.history-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; padding: 1.25rem 1.5rem; background-color: var(--fundo-card); border: 1px solid var(--borda-padrao); border-radius: 12px; transition: all var(--transition-fast); }
.history-row:hover { border-color: var(--azul-principal); transform: translateY(-5px); box-shadow: var(--shadow-glow-blue); }
.history-btn.history-btn--delete {
  background: transparent; border: 1px solid var(--borda-padrao); color: var(--cinza-texto);
  padding: 0.4rem 0.8rem; font-size: 0.85rem; font-weight: 500;
  border-radius: 6px; box-shadow: none;
}
.history-btn.history-btn--delete:hover {
  background-color: rgba(220, 53, 69, 0.1); border-color: var(--perigo);
  color: var(--perigo); transform: none;
}

/* --- PÁGINA DE ADMIN (ADMIN.HTML) --- REFORMULAÇÃO --- */
.admin-main { max-width: 1000px; }
.admin-main-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--borda-padrao);
}
.admin-main-header h2 { margin: 0; }
.admin-main-header .nav-button {
    background: linear-gradient(180deg, var(--dourado-destaque), var(--dourado-hover));
    color: var(--fundo-principal);
    box-shadow: 0 4px 15px rgba(255, 199, 0, 0.2);
}
#courses-list-container { display: flex; flex-direction: column; gap: 1rem; }
.course-admin-item {
    display: flex; flex-direction: column; /* Alterado para coluna para o conteúdo expandido */
    background-color: var(--fundo-card);
    border: 1px solid var(--borda-padrao);
    border-left: 4px solid var(--borda-padrao);
    border-radius: 12px;
    transition: all var(--transition-fast);
}
.course-admin-item:hover {
    border-left-color: var(--azul-principal);
    box-shadow: var(--shadow-sm);
}
.course-admin-header-row { /* Novo container para a linha superior */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}
.course-admin-header {
    display: flex; align-items: center; flex-grow: 1; gap: 1rem;
    cursor: pointer; padding: 0;
}
.course-admin-header h3 { margin: 0; }
.drag-handle { cursor: grab; color: var(--cinza-texto); font-size: 1.5rem; transition: color var(--transition-fast); }
.drag-handle:hover { color: var(--branco-texto); }
.admin-item-actions { display: flex; gap: 0.75rem; flex-shrink: 0; margin-left: auto; }
.admin-item-actions button {
    padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500;
    box-shadow: none; background: transparent; transition: all var(--transition-fast);
}
.admin-item-actions button.edit-btn { border: 1px solid var(--azul-principal); color: var(--azul-principal); }
.admin-item-actions button.edit-btn:hover { background-color: var(--azul-principal); color: var(--branco-texto); }
.admin-item-actions button.delete-btn { border: 1px solid var(--perigo); color: var(--perigo); }
.admin-item-actions button.delete-btn:hover { background-color: var(--perigo); color: var(--branco-texto); }



/* --- Página Personalizar Avaliador (customize-evaluator.html) --- */
.config-row { display: grid; grid-template-columns: 1fr 120px 120px; gap: 1.5rem; align-items: center; background: var(--fundo-principal); border: 1px solid var(--borda-padrao); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }

/* --- Páginas de Batalha (vote, performance, details) --- */
.arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; }
#performance-cards-container { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 2rem; }
.performance-stat-card { background-color: var(--fundo-card); border: 1px solid var(--borda-padrao); border-radius: 16px; overflow: hidden; }
.performance-stat-card.winner { border-color: var(--dourado-destaque); box-shadow: var(--shadow-glow-gold); }

/* --- Fundos de Seção da Página Inicial (index.html) --- */
.hero-section::before, #comunidade-section::before, #diferenciais-section::before, .ranking-section::before, #sobre::before, #mvv-section::before, #preview-section::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-attachment: fixed; background-size: cover; background-position: center;
}
.hero-section::before { background-image: linear-gradient(rgba(13, 17, 23, 0.8), var(--fundo-principal)), url('/assets/fundos/fundo-hero.jpg'); }

/* --- PÁGINA DE CONFIGURAÇÃO DE BATALHA (BATTLE-SETUP.HTML) --- */
.setup-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2.5rem 3rem;
    background-color: var(--fundo-card);
    border: 1px solid var(--borda-padrao);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}

.stepper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto 3rem auto;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--cinza-texto);
    transition: color var(--transition-fast);
}

.step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--borda-padrao);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    margin-bottom: 0.5rem;
    transition: all var(--transition-smooth);
}

.step-label {
    font-size: 0.9rem;
    font-weight: 500;
}

.step-connector {
    height: 2px;
    background-color: var(--borda-padrao);
    flex-grow: 1;
    margin: 20px 1rem 0 1rem;
    transition: background-color var(--transition-smooth);
}

/* Estilos dos estados do Stepper */
.step.active .step-icon {
    border-color: var(--azul-principal);
    color: var(--azul-principal);
}
.step.active .step-label {
    color: var(--branco-texto);
}

.step.completed .step-icon {
    background-color: var(--azul-principal);
    border-color: var(--azul-principal);
    color: var(--branco-texto);
    font-size: 1.5rem; /* Tamanho do check */
}
.step.completed .step-icon::before {
    content: '✔'; /* Ícone de check */
}
.step.completed .step-label {
    color: var(--cinza-texto);
}
.step.completed + .step-connector {
    background-color: var(--azul-principal);
}

/* Layout dos campos de competidores */
.team-input-group {
    background-color: var(--fundo-principal);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--borda-padrao);
    margin-bottom: 1.5rem;
}
.team-input-group h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--borda-padrao);
}
.mc-input {
    margin-bottom: 1rem;
}
.mc-input:last-child {
    margin-bottom: 0;
}

/* Botões de navegação do formulário */
.setup-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--borda-padrao);
}
#prev-step-btn {
    background: transparent;
    border: 1px solid var(--borda-padrao);
    color: var(--cinza-texto);
    box-shadow: none;
}
#prev-step-btn:hover {
    background-color: var(--borda-padrao);
    color: var(--branco-texto);
}



/* ========================================================================
   BATTLE VOTE — LUX GAME UI (ADD-ON, NON-BREAKING)
   Mantém todo o CSS acima e adiciona somente os estilos da tela de votação.
   Classes/IDs respeitam sua lógica: .vote-header, .arena, .team-column.selected
   data-team-index, .mc-display img, #team-score-1/2, .actions-panel-bottom, .action-btn
   ======================================================================== */

/* ------------------ HEADER (logo à esquerda / textos à direita) ------------------ */
.vote-header,.header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 0 10px;
}

.vote-header .logo,.header .logo{height:clamp(28px,3.6vw,44px);flex:0 0 auto}
.vote-header .header-text,.header .header-text{margin-left:auto;text-align:right}
.vote-header h1,.header h1{margin:0 0 4px 0;font-size:clamp(18px,2.4vw,28px)}
.vote-header p,.header p{margin:0;font-size:clamp(12px,1.4vw,16px);opacity:.92}
/* Fallback: se não tiver .logo/.header-text, usa o 1º IMG como logo e o resto vira texto à direita */
.vote-header>img:first-child{order:1}
.vote-header>:not(img:first-child){order:2;margin-left:auto;text-align:right}

/* ------------------ ARENA: fotos + placar central ------------------ */
.arena{
  --photoSize:clamp(160px,24vw,200px);
  display:grid;
  grid-template-columns:minmax(var(--photoSize),1fr) clamp(26px,26vw,44px) minmax(var(--photoSize),1fr);
  align-items:center;
  gap:clamp(14px,3.8vw,30px);
  margin:10px 0 16px;
}
.team-column{display:grid;grid-auto-rows:auto;gap:10px}
.mc-display{background:transparent;border:0;padding:0;text-align:center}
.mc-display img{
  width:var(--photoSize);height:var(--photoSize);object-fit:cover;
  border-radius:9999px;display:block;margin:0 auto 10px;
  box-shadow:0 12px 30px rgba(0,0,0,.32);
}

.mc-avatar-fallback{
  width:var(--photoSize);
  height:var(--photoSize);
  border-radius:9999px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
  font-weight:800;
  font-size:calc(var(--photoSize) * .45);
  text-transform:uppercase;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.32);
}
.team-column.selected .mc-avatar-fallback{
  outline:3px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 6px rgba(255,255,255,.1),0 12px 30px rgba(0,0,0,.35);
}

.mc-display p{margin:6px 0 0;font-weight:800}

/* SELEÇÃO: esquerda azul, direita vermelha, bem visível */

/* animação suave */
.team-column .mc-display img,
.team-column .mc-display > *:first-child {
  transition: outline .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* estado padrão (não selecionado) */
.team-column:not(.selected) .mc-display img,
.team-column:not(.selected) .mc-display > *:first-child {
  outline: none;
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
}

/* leve “subida” quando selecionado */
.team-column.selected .mc-display img,
.team-column.selected .mc-display > *:first-child {
  transform: translateY(-2px);
}

/* 👉 TIME DA ESQUERDA (index 0) = AZUL */
#team-column-1.selected .mc-display img,
#team-column-1.selected .mc-display > *:first-child {
  outline: 3px solid var(--azul-principal);
  box-shadow: 0 0 0 6px rgba(74,144,226,.20),
               0 12px 30px rgba(0,0,0,.35);
}

/* 👉 TIME DA DIREITA (index 1) = VERMELHO */
#team-column-2.selected .mc-display img,
#team-column-2.selected .mc-display > *:first-child {
  outline: 3px solid #ff6b70;
  box-shadow: 0 0 0 6px rgba(255,107,112,.20),
               0 12px 30px rgba(0,0,0,.35);
}
/* ------------------ PLACAR central ------------------ */
.center-scoreboard{
  grid-column:2;justify-self:center;
  width:clamp(280px,28vw,440px);
  min-height:clamp(92px,10.5vw,120px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:18px 16px;border-radius:18px;
  background:linear-gradient(180deg,rgba(16,20,27,.75),rgba(10,14,20,.92));
  box-shadow:0 8px 28px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter:blur(6px);position:relative;z-index:3;
}
.arena-divider{font-weight:900;letter-spacing:2px;color:#aab1bb;opacity:.9}
#team-score-1,#team-score-2{font-weight:900;line-height:1;text-align:center;font-size:clamp(28px,6.6vw,60px);color:#e8edf5;text-shadow:0 2px 18px rgba(0,0,0,.35)}
body:has(.team-column[data-team-index="0"].selected) #team-score-1{color:var(--azul-principal)}
body:has(.team-column[data-team-index="0"].selected) #team-score-2{color:#ff6b70}
body:has(.team-column[data-team-index="1"].selected) #team-score-2{color:#ff6b70}
body:has(.team-column[data-team-index="1"].selected) #team-score-1{color:var(--azul-principal)}

/* ------------------ RIBBON dos botões (game HUD) ------------------ */
.actions-panel-bottom{
  grid-column:1 / -1;
  width:100%;margin:16px auto 0;padding:18px 16px;border-radius:18px;
  background:
    radial-gradient(120% 110% at 50% -10%,rgba(255,255,255,.06),transparent 40%),
    linear-gradient(180deg,rgba(16,20,27,.65),rgba(9,12,17,.85));
  border:1px solid var(--borda-padrao);
  box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter:blur(6px);
  position:relative;z-index:2;display:grid;grid-template-columns:1fr;
}
.actions-panel-bottom .actions-tier{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(clamp(170px,22vw,240px),1fr));
  gap:clamp(10px,1.5vw,18px);
  width:min(1200px,100%);margin:0 auto;

}

/* espaço vertical entre fileiras (tiers) */
.actions-panel-bottom .actions-tier + .actions-tier{
  margin-top: clamp(10px, 1.2vw, 18px);
}

.action-btn{
  height:clamp(48px,6vw,58px);
  padding:0 clamp(14px,1.4vw,18px);
  border-radius:clamp(10px,1.2vw,14px);
  font-weight:900;font-size:clamp(.92rem,1.2vw,1rem);letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(23,29,38,.90),rgba(15,20,28,.96));
  color:#e7edf6;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  position:relative;overflow:hidden;cursor:pointer;
  transition:transform .14s ease,box-shadow .22s ease,border-color .2s ease,filter .2s ease,opacity .2s;
}
.action-btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.42);border-color:rgba(255,255,255,.16)}
.action-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.action-btn::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;translate:-50% -50%;border-radius:999px;background:currentColor;opacity:.18;transition:width .45s ease,height .45s ease,opacity .45s ease}
.action-btn:active::after{width:220%;height:220%;opacity:0}
.action-btn.negative{border-color:rgba(255,107,112,.35)}

/* Cores dinâmicas por lado selecionado (sem !important) */
body:has(.team-column[data-team-index="0"].selected) .actions-panel-bottom{box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 0 0 1px rgba(74,144,226,.12),0 0 24px rgba(74,144,226,.12)}
body:has(.team-column[data-team-index="1"].selected) .actions-panel-bottom{box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,107,112,.12),0 0 24px rgba(255,107,112,.10)}
body:has(.team-column[data-team-index="0"].selected) .action-btn{border-color:rgba(74,144,226,.45)}
body:has(.team-column[data-team-index="1"].selected) .action-btn{border-color:rgba(255,107,112,.45)}
.action-btn.is-selected{animation:voteGlow 1.15s ease-in-out infinite alternate}
@keyframes voteGlow{from{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}to{filter:drop-shadow(0 0 12px rgba(255,255,255,.18))}}
body:has(.team-column[data-team-index="0"].selected) .action-btn.is-selected,
body:has(.team-column[data-team-index="0"].selected) .action-btn.for-team-0{
  background:linear-gradient(180deg,#5aa1f0,#2f6ebf);color:#fff;border-color:transparent;text-shadow:0 1px 6px rgba(0,0,0,.35);
}
body:has(.team-column[data-team-index="1"].selected) .action-btn.is-selected,
body:has(.team-column[data-team-index="1"].selected) .action-btn.for-team-1{
  background:linear-gradient(180deg,#ff6b70,#d94a50);color:#fff;border-color:transparent;text-shadow:0 1px 6px rgba(0,0,0,.35);
}

/* ------------------ Botão finalizar ------------------ */
#finish-round-btn {
  display:block;
  margin:16px 0 0 auto;
  min-width:240px;
  height:56px;
  border-radius:14px;
  font-weight:900;
  background:linear-gradient(180deg,#ffd045,#e7b600);
  color:#151515;
  border:0;
  box-shadow:0 16px 40px rgba(255,208,69,.25);
}
#finish-round-btn:hover {
  filter:brightness(1.06);
  transform:translateY(-2px);
}
/* Botões do rodapé do BATTLE PERFORMANCE (mesmo estilo do finalizar round) */
#next-round-btn,
#finalize-battle-btn {
  min-width:240px;
  height:56px;
  border-radius:14px;
  font-weight:900;
  background:linear-gradient(180deg,#ffd045,#e7b600);
  color:#151515;
  border:0;
  box-shadow:0 16px 40px rgba(255,208,69,.25);
  cursor:pointer;
}

#next-round-btn:hover,
#finalize-battle-btn:hover {
  filter:brightness(1.06);
  transform:translateY(-2px);
}

/* alinhamento lado a lado, à direita */
.performance-footer {
  display:flex;
  justify-content:flex-end;
  gap:12px;
}

/* ------------------ Responsividade ------------------ */
@media (max-width:1024px){
  .arena{
    --photoSize:clamp(140px,28vw,220px);
    grid-template-columns:1fr minmax(240px,36vw) 1fr;
  }
}
@media (max-width:820px){
  .actions-panel-bottom .actions-tier{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:720px){
  .arena{grid-template-columns:1fr;gap:clamp(12px,3vw,16px);--photoSize:clamp(120px,42vw,180px)}
  .center-scoreboard{order:-1;width:min(460px,100%)}
  .vote-header,.header{align-items:flex-start}
}

/* ——— Centralização robusta do placar ——— */

/* Desktop: 3 colunas -> fica na coluna do meio e se auto-centra */
.center-scoreboard{
  grid-column: 2;           /* garante a coluna central */
  justify-self: center;     /* alinha no centro da coluna */
  align-self: center;
  margin-inline: auto;      /* fallback extra */
}

/* Mobile/Tablet: quando empilha, o placar vem primeiro e 100% central */
@media (max-width: 820px){
  .arena{
    grid-template-columns: 1fr;   /* empilha tudo */
    justify-items: center;        /* centra todos os itens da arena */
  }
  .center-scoreboard{
    grid-column: 1;               /* única coluna */
    order: -1;                    /* sobe para antes das fotos */
    width: min(420px, 92vw);      /* largura fluida */
    margin: 0 auto 8px;           /* central absoluto */
    justify-self: center;
    align-self: center;
  }
}

/* evita herança de alinhamento à direita de algum pai */
.center-scoreboard, .center-scoreboard *{
  text-align: center;
}

/* ====== Arena SEMPRE em 3 colunas (lado esq | placar | lado dir) e tudo escala ====== */

/* Base já usa 3 colunas — só garantindo centralização */
.arena{
  /* diâmetro das fotos: diminui junto com a tela */
  --photoSize: clamp(120px, 22vw, 260px);
  display: grid;
  grid-template-columns:
    minmax(var(--photoSize), 1fr)
    minmax(260px, 28vw)
    minmax(var(--photoSize), 1fr);
  align-items: center;
  gap: clamp(5px, 3vw, 28px);
}
.center-scoreboard{
  grid-column: 2;
  justify-self: center;
  width: clamp(240px, 28vw, 440px);
  min-height: clamp(84px, 10vw, 116px);
}

/* Tablets – mantém 3 colunas, tudo menor */
@media (max-width: 820px){
  .arena{
    --photoSize: clamp(100px, 24vw, 200px);
    grid-template-columns:
      minmax(var(--photoSize), 1fr)
      minmax(220px, 32vw)
      minmax(var(--photoSize), 1fr);
    gap: clamp(8px, 2.6vw, 18px);
  }
  .center-scoreboard{
    width: clamp(220px, 32vw, 360px);
  }
}

/* Celulares – continua 3 colunas, só reduzindo */
@media (max-width: 480px){
  .arena{
    --photoSize: clamp(90px, 28vw, 160px);
    grid-template-columns:
      minmax(var(--photoSize), 1fr)
      minmax(200px, 36vw)
      minmax(var(--photoSize), 1fr);
    gap: clamp(6px, 2.8vw, 14px);
  }
  .center-scoreboard{
    width: clamp(200px, 36vw, 300px);
    min-height: clamp(72px, 12vw, 100px);
  }
  #team-score-1, #team-score-2{
    font-size: clamp(22px, 6vw, 42px);
  }
}

/* ===== FIX: fotos sempre esquerda/direita e placar no centro ===== */

/* grade de 3 colunas SEMPRE, com áreas nomeadas */
.arena{
  --photoSize: clamp(96px, 24vw, 220px);
  display: grid;
  grid-template-columns:
    minmax(var(--photoSize), 1fr)
    minmax(200px, 32vw)
    minmax(var(--photoSize), 1fr) !important;
  grid-template-areas: "left center right" !important;
  align-items: center;
  justify-items: center;
  gap: clamp(8px, 2.5vw, 24px);
}

/* garante que nada herdado jogue itens para outra linha/coluna */
.team-column{ grid-column: auto !important; grid-row: auto !important; }

/* mapeia explicitamente cada lado */
.team-column[data-team-index="0"]{ grid-area: left !important; }
.team-column[data-team-index="1"]{ grid-area: right !important; }

/* placar sempre no meio e centralizado */
.center-scoreboard{
  grid-area: center !important;
  justify-self: center !important;
  margin-inline: auto;
  width: clamp(220px, 30vw, 420px);
  min-height: clamp(80px, 10vw, 116px);
}

/* o ribbon de botões continua abaixo ocupando toda a largura */
.actions-panel-bottom{ grid-column: 1 / -1 !important; }

/* breakpoints: reduz tudo, mas mantém as 3 colunas */
@media (max-width: 820px){
  .arena{
    --photoSize: clamp(90px, 26vw, 180px);
    grid-template-columns:
      minmax(var(--photoSize), 1fr)
      minmax(190px, 36vw)
      minmax(var(--photoSize), 1fr) !important;
    gap: clamp(6px, 2.2vw, 16px);
  }
  .center-scoreboard{ width: clamp(200px, 36vw, 340px); }
}

@media (max-width: 480px){
  .arena{
    --photoSize: clamp(82px, 30vw, 150px);
    grid-template-columns:
      minmax(var(--photoSize), 1fr)
      minmax(180px, 40vw)
      minmax(var(--photoSize), 1fr) !important;
    gap: clamp(6px, 2vw, 12px);
  }
  .center-scoreboard{ width: clamp(186px, 40vw, 300px); }
}
/* ==== VÍDEO DO MODO ONLINE — largura total + responsivo ==== */
/* Containers de vídeo (online): voto, detalhes, performance */
#video-container,
.details-video-container,
.performance-video-container{
  grid-column: 1 / -1;                 /* atravessa da esquerda à direita (igual os botões) */
  width: 100%;
  margin: 14px 0 18px;                 /* espaçamento do topo e de baixo */
  padding: 18px 16px;
  border-radius: 18px;
  background:
    radial-gradient(120% 110% at 50% -10%, rgba(255,255,255,.06), transparent 40%),
    linear-gradient(180deg, rgba(16,20,27,.65), rgba(9,12,17,.85));
  border: 1px solid var(--borda-padrao);
  box-shadow: 0 12px 34px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(6px);
  display: flex;                        /* centraliza o iframe dentro */
  justify-content: center;
  align-items: center;
  position: relative;                   /* para overlay no voto */
}

/* player fluido (sem distorcer) */
#video-container iframe,
.details-video-container iframe,
.performance-video-container iframe{
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;                /* mantém 16:9 em qualquer largura */
  height: auto;                        /* deixa o aspect-ratio definir a altura */
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* breakpoints — só ajusta o “respiro” */
@media (max-width: 820px){
  #video-container,
  .details-video-container,
  .performance-video-container{
    padding: 14px 12px;
    margin: 12px 0 16px;
  }
}
@media (max-width: 480px){
  #video-container,
  .details-video-container,
  .performance-video-container{
    padding: 12px 10px;
    margin: 10px 0 14px;
  }
}

/* FOTOS MENORES (mantém sempre 3 colunas: esq | centro | dir) */
.arena{
  /* ↓ diâmetro das fotos (desktop) */
  --photoSize: clamp(120px, 18vw, 180px);
  gap: clamp(8px, 2.2vw, 18px);               /* um pouco menos de espaço */
}

/* Placar um tiquinho mais estreito para caber tudo confortável */
.center-scoreboard{
  width: clamp(220px, 24vw, 360px);
  min-height: clamp(80px, 9vw, 110px);
}

/* Tablet */
@media (max-width: 1024px){
  .arena{
    --photoSize: clamp(110px, 20vw, 170px);
    gap: clamp(8px, 2.4vw, 16px);
  }
  .center-scoreboard{
    width: clamp(210px, 28vw, 340px);
  }
}

/* Celular “grande” */
@media (max-width: 820px){
  .arena{
    --photoSize: clamp(100px, 22vw, 160px);
    gap: clamp(6px, 2.6vw, 14px);
  }
  .center-scoreboard{
    width: clamp(200px, 32vw, 320px);
    min-height: clamp(72px, 10vw, 100px);
  }
}

/* Celular “pequeno” */
@media (max-width: 480px){
  .arena{
    --photoSize: clamp(90px, 26vw, 150px);
    gap: clamp(6px, 3vw, 12px);
  }
  .center-scoreboard{
    width: clamp(186px, 36vw, 300px);
  }
}

/* Opcional: dar um pouco menos de respiro antes do ribbon de botões */
.actions-panel-bottom{
  margin-top: clamp(10px, 1.6vw, 14px);
  padding: clamp(12px, 1.4vw, 16px);
}

/* ===== Vídeo com moldura dourada ===== */
#video-container{
  grid-column: 1 / -1;
  width: 100%;
  margin: clamp(10px, 1.6vw, 18px) 0 clamp(12px, 1.6vw, 18px);
  padding: clamp(12px, 1.6vw, 18px);
  border-radius: 18px;

  /* dourado lux */
  background:
    radial-gradient(120% 110% at 50% -10%, rgba(255, 230, 150, .25), transparent 45%),
    linear-gradient(180deg, #2a2210, #1b160b);          /* base escura quente */
  border: 1px solid rgba(255, 215, 80, .65);
  box-shadow:
    0 14px 40px rgba(0,0,0,.45),
    0 0 0 1px rgba(255, 215, 80, .35) inset,
    0 0 32px rgba(255, 208, 69, .25);                   /* glow dourado */
  backdrop-filter: blur(6px);

  display: flex;
  justify-content: center;
  align-items: center;
}

#video-container iframe{
  width: min(1200px, 80%);
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

/* toques em breakpoints */
@media (max-width: 820px){
  #video-container{ padding: 14px 12px; }
}
@media (max-width: 480px){
  #video-container{ padding: 12px 10px; }
}

/* ================================
   FORÇAR LAYOUT DE TABLET SEMPRE
   ================================ */

/* largura geral “de tablet” e centralizado */
body.tablet-mode .vote-container{
  max-width: 820px;
  margin: 0 auto;
  padding-left: 12px;
  padding-right: 12px;
}

/* header compacto */
body.tablet-mode .vote-header{
  gap: 12px;
}
body.tablet-mode .vote-header .logo{ height: 40px; }
body.tablet-mode .vote-header h1{ font-size: 24px; }
body.tablet-mode .vote-header p{  font-size: 14px; }

/* arena com proporções de tablet (continua 3 colunas, só menor) */
body.tablet-mode .arena{
  --photoSize: clamp(110px, 24vw, 170px);
  display: grid;
  grid-template-columns:
    minmax(var(--photoSize), 1fr)
    minmax(220px, 32vw)
    minmax(var(--photoSize), 1fr) !important;
  align-items: center;
  justify-items: center;
  gap: 14px;
}

/* placar central mais estreito */
body.tablet-mode .center-scoreboard{
  grid-column: 2;
  justify-self: center;
  width: clamp(210px, 32vw, 340px);
  min-height: clamp(76px, 10vw, 100px);
  padding: 14px 12px;
}

/* fotos proporcionais de tablet */
body.tablet-mode .mc-display img{
  width: var(--photoSize) !important;
  height: var(--photoSize) !important;
}

/* ribbon de botões do tamanho do “tablet” */
body.tablet-mode .actions-panel-bottom{
  grid-column: 1 / -1 !important;
  width: 100%;
  margin-top: 14px;
  padding: 14px 12px;
}
body.tablet-mode .actions-panel-bottom .actions-tier{
  grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) ) !important;
  gap: 12px !important;
}
body.tablet-mode .action-btn{
  height: 52px;
  font-size: 0.95rem;
  border-radius: 12px;
  padding: 0 14px;
}

/* vídeo dourado no mesmo “respiro” de tablet */
body.tablet-mode #video-container{
  margin: 12px 0 14px;
  padding: 14px 12px;
}
body.tablet-mode #video-container iframe{
  width: 100%;
  max-width: 780px;   /* cabe dentro do container de 820px */
}

/* botão finalizar alinhado à direita mantendo escala */
body.tablet-mode #finish-round-btn{
  display: block;
  margin: 16px 0 0 auto;
  height: 52px;
  min-width: 220px;
  border-radius: 12px;
}

/* ================================================
   BATTLE PERFORMANCE — visual “stats de futebol”
   ================================================ */

/* container geral */
.performance-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px);
}

/* título principal e header compacto */
.performance-page-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom: clamp(8px, 1.4vw, 14px);
}
.battle-main-title{
  text-align:center;
  font-weight:900; font-size: clamp(20px, 3vw, 34px);
  margin: 6px 0 10px;
}

/* navegação dos rounds (pills) */
.round-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin: 8px 0 14px;
}
.round-nav .nav-pill{
  padding: 8px 14px; border-radius: 999px;
  background: var(--fundo-card);
  border: 1px solid var(--borda-padrao);
  color: var(--cinza-texto); font-weight:700; letter-spacing:.2px;
  transition: .2s ease;
}
.round-nav .nav-pill:hover{ transform: translateY(-2px); border-color: var(--azul-principal); color:#fff }
.round-nav .nav-pill.is-active{
  background: linear-gradient(180deg, #ffd045, #e7b600);
  color:#151515; border-color: transparent; box-shadow: 0 8px 22px rgba(255,208,69,.25);
}

/* placar geral do confronto (opcional se você preencher esse container) */
.overall-score-container{
  display:flex; align-items:center; justify-content:center;
  padding: 12px 14px; margin: 4px 0 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(16,20,27,.7), rgba(8,12,18,.92));
  border:1px solid var(--borda-padrao);
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
}

/* grade das duas colunas e linha dourada central */
.performance-arena{
  position:relative;
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px);
  align-items: start;
}
.performance-arena::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background: linear-gradient(180deg, rgba(255,215,80,.0), rgba(255,215,80,.45), rgba(255,215,80,.0));
  box-shadow: 0 0 22px rgba(255,208,69,.35);
  pointer-events:none;
}

/* cartão de estatísticas do MC */
#performance-cards-container > *, .perf-card{
  background: var(--fundo-card);
  border: 1px solid var(--borda-padrao);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: clamp(14px, 2vw, 20px);
  display:flex; flex-direction:column; gap:12px;
}

/* “vencedor” com moldura dourada */
.perf-card.winner{
  border-color: var(--dourado-destaque);
  box-shadow: 0 0 0 2px rgba(255,215,80,.25) inset, 0 0 36px rgba(255,208,69,.25);
}

/* header do MC: foto + nome + nota grande */
.perf-card .mc-head{
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:12px;
}
.perf-card .mc-photo{
  width: clamp(64px, 8vw, 96px); height: clamp(64px, 8vw, 96px);
  border-radius:999px; object-fit:cover; border:3px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.perf-card .mc-name{ font-weight:900; font-size: clamp(16px,2.2vw,22px) }
.perf-card .score-badge{
  font-weight: 900; font-size: clamp(18px,3vw,30px);
  padding: 6px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(16,20,27,.7), rgba(10,14,20,.92));
  border:1px solid var(--borda-padrao);
}

/* blocos de estatística */
.stat-block{
  background: rgba(255,255,255,.02);
  border: 1px solid var(--borda-padrao);
  border-radius: 12px;
  padding: 10px 12px;
}
.stat-block h4{
  margin: 0 0 8px; font-size: .9rem; letter-spacing:.5px;
  color: var(--cinza-texto); text-transform: uppercase;
}

/* linhas de estatística (label + contador) */
.stat-list{ list-style:none; display:flex; flex-direction:column; gap:8px; margin:0; padding:0; }
.stat-row{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px;
  padding: 6px 8px; border-radius:8px;
  background: rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.04);
}
.stat-row .label{ font-weight:600; color:#e9edf6 }
.stat-row .value{ font-weight:900; color: var(--dourado-destaque) }

/* barras de desempenho (se você quiser exibir porcentagens) */
.progress-line{
  height: 8px; background: #0d1117; border-radius: 999px; overflow:hidden;
  border:1px solid var(--borda-padrao); margin-top:6px;
}
.progress-line > span{ display:block; height:100%;
  background: linear-gradient(90deg, var(--azul-principal), var(--dourado-destaque));
  width: var(--w, 0%);
}

/* tags POSITIVOS/NEGATIVOS */
.tag-title{
  display:inline-block; padding: 4px 10px; border-radius: 999px;
  font-weight:800; letter-spacing:.4px; font-size:.78rem;
  background: rgba(74,144,226,.12); color: #b9d6ff; border: 1px solid rgba(74,144,226,.35);
}
.tag-title.neg{ background: rgba(255,107,112,.12); color: #ffd0d2; border-color: rgba(255,107,112,.35) }

/* rodapé com ação */
.performance-footer{
  display:flex; justify-content:flex-end; margin-top: 16px;
}

/* responsivo */
@media (max-width: 900px){
  .performance-arena{ grid-template-columns: 1fr; }
  .performance-arena::before{ display:none; }
}

/* ==========================================================
   BATTLE PERFORMANCE — design de “placar/estatísticas”
   (compatível com a estrutura gerada por battle-performance.js)
   ========================================================== */

/* Container central */
.performance-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px);
}

/* Título / Header */
.performance-page-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom: clamp(8px,1.4vw,14px);
}
.battle-main-title{ text-align:center; font-weight:900; font-size: clamp(20px,3vw,34px); }

/* Navegação de rounds (pills) */
.round-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin: 10px 0 16px;
}
.round-nav .round-nav-btn{
  padding: 8px 14px; border-radius: 999px; border:1px solid var(--borda-padrao);
  background: var(--fundo-card); color: var(--cinza-texto); font-weight:800;
  transition: .2s ease;
}
.round-nav .round-nav-btn:hover{ transform: translateY(-2px); border-color: var(--azul-principal); color:#fff }
.round-nav .round-nav-btn.active{
  background: linear-gradient(180deg,#ffd045,#e7b600); color:#151515; border-color: transparent;
  box-shadow: 0 8px 22px rgba(255,208,69,.25);
}

/* Placar geral opcional (se você popular overall-score-display) */
.overall-score-container{
  display:flex; align-items:center; justify-content:center;
  gap:12px; padding: 10px 12px; margin-bottom: 14px;
  border-radius: 14px; border:1px solid var(--borda-padrao);
  background: linear-gradient(180deg,rgba(16,20,27,.7),rgba(8,12,18,.92));
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
}

/* Arena de stats: 2 colunas + linha central sutil */
.performance-arena{
  position:relative;
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,2vw,24px);
  align-items: start;
}
.performance-arena::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background: linear-gradient(180deg, rgba(255,215,80,0), rgba(255,215,80,.45), rgba(255,215,80,0));
  box-shadow: 0 0 22px rgba(255,208,69,.25);
  pointer-events:none;
}

/* === CARD DE ESTATÍSTICA — estrutura gerada no JS (.performance-stat-card) === */
.performance-stat-card{
  background: var(--fundo-card);
  border: 1px solid var(--borda-padrao);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  padding: clamp(14px, 2vw, 20px);
  display:flex; flex-direction:column; gap:12px;
}

/* Destaque do vencedor */
.performance-stat-card.winner{
  border-color: #FFC700;
  box-shadow: 0 0 0 2px rgba(255,215,80,.22) inset, 0 0 36px rgba(255,208,69,.22);
}

/* Header do card: foto(s) pequena(s) + nome + nota grande à direita */
.performance-stat-card .stat-card-header{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px;
}
.performance-stat-card .stat-card-mc-info{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* >>> AQUI: FOTOS PEQUENAS (corrige o “gigante”) */
.performance-stat-card .stat-card-mc-info img{
  width: clamp(48px, 6vw, 72px);
  height: clamp(48px, 6vw, 72px);
  border-radius: 999px; object-fit: cover;
  border: 2px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Nome do(s) MC(s) ao lado das fotos */
.performance-stat-card .stat-card-mc-info > span{
  font-weight: 900; font-size: clamp(14px, 2vw, 18px); color:#e9edf6;
}

/* Nota do card (pontuação daquele round ou total) */
.performance-stat-card .stat-card-round-score{
  font-weight: 900; font-size: clamp(20px, 3vw, 30px);
  padding: 6px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(16,20,27,.7), rgba(10,14,20,.92));
  border:1px solid var(--borda-padrao);
}

/* Corpo do card: blocos Positivos/Negativos com listas legíveis */
.performance-stat-card .stat-card-body{ display:grid; gap: 10px; }
.performance-stat-card .stats-group-title{
  margin: 8px 0 2px; font-size: .9rem; letter-spacing:.5px; color: var(--cinza-texto); text-transform: uppercase;
}
.performance-stat-card .stat-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:8px;
}
.performance-stat-card .stat-list li{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06);
}
.performance-stat-card .stat-list li span:first-child{ font-weight:600; color:#e9edf6 }
.performance-stat-card .stat-list li .action-count{ font-weight:900; color:#FFC700 }

/* Rodapé (próximo round / finalizar) já está no seu HTML */
.performance-footer{ display:flex; justify-content:flex-end; margin-top: 16px; }

/* Responsivo: empilha os cards abaixo de ~900px */
@media (max-width: 900px){
  .performance-arena{ grid-template-columns: 1fr; }
  .performance-arena::before{ display:none; }
}
/* === Battle Performance: score abaixo da foto === */

/* Header em 3 colunas: [foto+nome] [preenche] [coroa] */
.performance-stat-card .stat-card-header{
  display: grid;
  grid-template-columns: auto 1fr auto; /* foto/infos | espaço | coroa */
  align-items: center;
  gap: 10px;
}

/* bloco que já contém foto + nome */
.performance-stat-card .stat-card-mc-info{
  grid-column: 1 / 3;   /* ocupa da 1ª até a 2ª coluna */
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* coroa (se existir) continua na 3ª coluna do header */
.performance-stat-card .stat-card-header .crown,
.performance-stat-card .stat-card-header .winner-crown,
.performance-stat-card .stat-card-header [data-crown]{
  grid-column: 3; justify-self: end;
}

/* PONTUAÇÃO: vai para uma NOVA LINHA abaixo do header */
.performance-stat-card .stat-card-round-score{
  grid-column: 1 / -1;   /* ocupa as 3 colunas na linha de baixo */
  justify-self: start;   /* alinha à esquerda, logo abaixo da foto */
  margin-top: 8px;       /* respiro entre header e score */
}

/* rodapé da performance com espaço entre botões */
.performance-footer{
  display: flex;                 /* você já deve ter isso */
  justify-content: flex-end;
  gap: 12px;                     /* ← espaçamento entre Próximo Round e Finalizar Batalha */
}

/* Footer específico do Battle Performance:
   botões em cima e frase embaixo, tudo centralizado */
.protection-footer {
  display: flex;
  flex-direction: column;   /* coluna: botões em cima, frase embaixo */
  align-items: center;      /* centraliza o conteúdo na horizontal */
  gap: 8px;
  padding-top: 12px;
  width: 100%;
}

/* Botões lado a lado, centralizados */
.protection-footer .performance-footer {
  display: flex;
  justify-content: center;  /* centraliza os botões */
  gap: 12px;
  width: 100%;
}

/* Frase centralizada logo abaixo */
.protection-footer p {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* ==========================================================
   CUSTOMIZE EVALUATOR — layout profissional e organizado
   usa o HTML existente (header, preview, form e barra fixa)
   ========================================================== */

/* largura e respiro da página */
.page--evaluator .evaluator-main{
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px);
}

/* ---------- HEADER (logo + título à esquerda / ações à direita) ---------- */
.evaluator-header{
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px; padding: clamp(8px, 1.6vw, 14px) 0;
  border-bottom: 1px solid var(--borda-padrao);
  margin-bottom: clamp(12px, 2vw, 20px);
}
.evaluator-header__left{ display:flex; align-items:center; gap: 14px; }
.evaluator-logo{ height: clamp(40px, 5vw, 64px); width:auto; display:block; }
.evaluator-title{ margin:0; font-size: clamp(22px, 3vw, 34px); font-weight: 900; }
.evaluator-subtitle{ margin:.25rem 0 0; color: var(--cinza-texto); }

/* selo premium + botão Voltar */
.evaluator-header__right{ display:flex; align-items:center; gap:10px; }
.pill.pill--premium{
  background: linear-gradient(180deg,#7a5cff,#5b42d6);
  color:#fff; border:none; font-weight:800; padding:6px 10px; border-radius:999px;
}

/* ---------- CARDS GENÉRICOS (você já usa .card/.card--shadow) ---------- */
.card{ border-radius:16px; border:1px solid var(--borda-padrao); background: var(--fundo-card); }
.card--shadow{ box-shadow: var(--shadow-md); }
.card__head{ padding: 16px 16px 8px; }
.card__title{ margin:0; font-size: clamp(18px,2.2vw,24px); font-weight:900; }
.card__subtitle{ margin:6px 0 0; color: var(--cinza-texto); }

/* ---------- PRÉ-VISUALIZAÇÃO ---------- */
.preview-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 20px);
  padding: 0 clamp(12px, 2vw, 16px) clamp(14px, 2vw, 20px);
}
.preview-group h3{ margin:0 0 8px; color: var(--cinza-texto); letter-spacing:.5px; text-transform:uppercase; }

.btn-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

/* “pílulas” da pré-visualização (vale para QUALQUER elemento dentro de .btn-grid) */
.btn-grid > *{
  display:flex; align-items:center; justify-content:center;
  gap:8px; height:48px;
  border-radius:12px; border: 1px solid var(--borda-padrao);
  background: linear-gradient(180deg, #232931, #171b22);
  color:#e9edf6; font-weight:800;
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.03);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn-grid > *:hover{
  transform: translateY(-1px);
  border-color: var(--azul-principal);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* ---------- FORM (configuração) ---------- */
.form-grid{
  display:grid; gap: clamp(12px, 2vw, 16px);
  padding: 0 clamp(12px, 2vw, 16px) clamp(16px, 2vw, 24px);
}
.form-group-title{
  margin: 8px 0 6px;
  color: var(--cinza-texto); text-transform: uppercase; letter-spacing:.5px; font-weight:800;
}

/* duas colunas responsivas para os blocos de configuração */
.grid-2{
  display:grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 820px){
  .preview-grid{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}

/* linha de configuração de um botão (texto, pontos, ícone) — você já tem .config-row */
.config-row{
  display:grid; grid-template-columns: 1fr 120px 120px; align-items:center; gap: 14px;
  background: var(--fundo-principal); border: 1px solid var(--borda-padrao);
  border-radius: 12px; padding: 14px;
}

/* inputs mais elegantes */
.config-row input[type="text"],
.config-row input[type="number"]{
  width:100%; height:44px; border-radius:10px;
  border:1px solid var(--borda-padrao); background: var(--fundo-input);
  color:#fff; padding:0 12px; font-weight:600;
}
.config-row input[type="text"]::placeholder{ color: #9aa4b2; }

/* pré-visualização do ícone (se houver) */
.config-row .icon-preview{
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.04); border:1px dashed var(--borda-padrao);
  color:#9aa4b2; font-weight:700;
}

/* ---------- BARRA FIXA DE AÇÕES ---------- */
.evaluator-actions{
  position: sticky; bottom: 12px; z-index: 30;
  max-width: 1080px; margin: 16px auto 0;
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(16,20,27,.72), rgba(8,12,18,.92));
  border: 1px solid var(--borda-padrao);
  box-shadow: 0 16px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}
.save-status{ color: var(--cinza-texto); font-weight:700; }
.evaluator-actions__buttons{ display:flex; align-items:center; gap: 10px; }
.evaluator-actions__buttons .btn{ height: 44px; border-radius: 12px; padding: 0 16px; font-weight:900; }

/* estados dos botões genéricos (reaproveita sua paleta) */
.btn.btn--primary{
  background: linear-gradient(180deg, #ffd045, #e7b600);
  color:#151515; border:none; box-shadow: 0 10px 28px rgba(255,208,69,.25);
}
.btn.btn--ghost{
  background: transparent; color: #e9edf6;
  border: 1px solid var(--borda-padrao);
}
.btn.btn--ghost:hover{ background: rgba(255,255,255,.06); }

/* === ESTILIZAÇÃO MODAL DE CADASTRO (Signup) === */
#signup-modal .auth-container {
  max-width: 900px;
  background-color: var(--bg-dark-primary, #111);
  color: var(--text-primary, #fff);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  text-align: center;
}

/* --- Cabeçalho com logo e texto --- */
#signup-modal .plans-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem;
}

#signup-modal .plans-header .logo {
  width: 110px; /* deixa pequena */
  height: auto;
  margin-bottom: 0.75rem;
}

#signup-modal .plans-header h1 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.2;
  margin: 0.25rem 0 0.5rem;
  color: var(--text-primary, #fff);
}

#signup-modal .plans-header p {
  font-size: 1rem;
  color: var(--text-secondary, #ccc);
  margin: 0;
  max-width: 520px;
}

/* --- Container de planos lado a lado --- */
#signup-modal .plans-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 2rem auto;
  max-width: 800px;
}

#signup-modal .plan-card {
  background: var(--bg-surface, #1a1a1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#signup-modal .plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

#signup-modal .plan-card.featured {
  border: 2px solid var(--primary-accent, #007bff);
  background: rgba(0, 123, 255, 0.1);
}

/* --- Texto e botões dentro dos planos --- */
#signup-modal .plan-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

#signup-modal .plan-features {
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 1rem 0 1.5rem;
}

#signup-modal .plan-features li {
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

#signup-modal .select-plan-btn {
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

#signup-modal .select-plan-btn.btn--primary {
  background: var(--primary-accent, #007bff);
  color: #fff;
  border: none;
}

#signup-modal .select-plan-btn.btn--primary:hover {
  background: #0088ff;
}

#signup-modal .select-plan-btn.btn--ghost {
  background: transparent;
  color: var(--primary-accent, #007bff);
  border: 1px solid var(--primary-accent, #007bff);
}

#signup-modal .select-plan-btn.btn--ghost:hover {
  background: rgba(0, 123, 255, 0.1);
}

/* --- Responsividade --- */
@media (max-width: 768px) {
  #signup-modal .plans-container {
    grid-template-columns: 1fr;
  }

  #signup-modal .plans-header .logo {
    width: 90px;
  }

  #signup-modal .plans-header h1 {
    font-size: 1.5rem;
  }
}
/* === AJUSTE: alinhar planos abaixo do texto do cabeçalho === */
#signup-modal .auth-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#signup-modal .plans-header {
  margin-bottom: 2.5rem;
  text-align: center;
}

#signup-modal #plans-view {
  width: 100%;
  display: flex;
  justify-content: center;
}

#signup-modal .plans-container {
  margin-top: 1rem; /* espaço entre o texto e os planos */
}

/* responsivo: garantir espaçamento no mobile também */
@media (max-width: 768px) {
  #signup-modal .plans-header {
    margin-bottom: 1.5rem;
  }
}
/* === CORREÇÃO DO RODAPÉ === */
footer {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
  border-top: 1px solid var(--border-color, #333);
  background-color: var(--bg-dark-primary, #0d0d0d);
  color: var(--text-secondary, #ccc);
  display: flex;
  justify-content: center;
  align-items: center;
}

footer p {
  margin: 0;
  font-size: 0.95rem;
}

/* ==== FIX DEFINITIVO: grid das Aulas sem encavalar ==== */
body.bg-lessons #lessons-grid {
  display: grid !important;                 /* vence .lessons-list { display:flex } */
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
  align-content: start;
  align-items: start;
  padding: 8px 10px 16px;
  box-sizing: border-box;
  overflow: auto;                            /* rolagem só do grid */
}

/* Escopo a regra de Admin para não afetar as Aulas */
.admin-main .lessons-list { display: flex; flex-direction: column; }

/* ==== Card 9:16 estilo “stories” (altura fixa, nada empurra) ==== */
body.bg-lessons #lessons-grid .episode-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 12;                      /* altura fixa */
  border-radius: 18px;
  overflow: hidden;
  background: #121317;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 24px rgba(0,0,0,0.30);
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
body.bg-lessons #lessons-grid .episode-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

/* Tudo absoluto dentro do card (não altera a altura) */
body.bg-lessons #lessons-grid .episode-card .episode-thumbnail,
body.bg-lessons #lessons-grid .episode-card .episode-thumbnail img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
body.bg-lessons #lessons-grid .episode-card .episode-thumbnail img {
  object-fit: cover; display: block; margin: 0 !important;
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.04) contrast(1.02);
}
body.bg-lessons #lessons-grid .episode-card:hover .episode-thumbnail img {
  transform: scale(1.06); filter: saturate(1.08);
}

/* Remove textos/ícones dentro do card (somente capa visual) */
body.bg-lessons #lessons-grid .episode-card .episode-title,
body.bg-lessons #lessons-grid .episode-card .play-icon,
body.bg-lessons #lessons-grid .episode-card h1,
body.bg-lessons #lessons-grid .episode-card h2,
body.bg-lessons #lessons-grid .episode-card h3,
body.bg-lessons #lessons-grid .episode-card .duration,
body.bg-lessons #lessons-grid .episode-card button,
body.bg-lessons #lessons-grid .episode-card svg { display: none !important; }

/* Brilho sutil */
body.bg-lessons #lessons-grid .episode-card::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(140% 90% at 10% -10%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%);
  mix-blend-mode: screen; opacity: .55;
}

/* Breakpoints do grid */
@media (min-width: 1100px) {
  body.bg-lessons #lessons-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 700px) {
  body.bg-lessons #lessons-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ==== Comentários (espaço entre botões) ==== */
#comments-container .comment-item .comment-actions,
#comments-container .comment-item .actions { display: inline-flex; gap: 10px; margin-top: 8px; }
#comments-container .comment-item button + button { margin-left: 10px; } /* fallback */

/* ================= WATCH: Player sempre 16:9 (1920x1080) ================= */
/* ================= WATCH: Player — mostrar SEMPRE completo no quadro 9:16 ================= */
.bg-watch .video-player-container{
   position: relative;
-  width: min(100%, 1100px);
+  width: min(100%, 480px);        /* opcional: largura estilo celular no desktop */
   margin: 12px auto;
-  aspect-ratio: 16 / 9;           /* antes: 16:9 */
+  aspect-ratio: 9 / 16;           /* agora: stories/reels */
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,.12);
   background: #000;
   box-shadow: 0 12px 40px rgba(0,0,0,.55);
   overflow: hidden;
}

#lesson-video-player{
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
-  object-fit: cover;              /* antes: corta para caber */
+  object-fit: contain;            /* agora: SEM CORTE (letterbox onde precisar) */
   object-position: center;
   background: #000;
   border: none;
   outline: none;
}

/* ================= WATCH: Comentários – ações menores e com espaçamento ================= */
/* O JS cria .admin-actions com .reply-comment-btn e .delete-comment-btn */
.bg-watch #comments-container .admin-actions{
  display: inline-flex;
  gap: 10px;                    /* espaço real entre os botões */
  margin-top: 8px;
}

.bg-watch .reply-comment-btn,
.bg-watch .delete-comment-btn{
  padding: 6px 10px;            /* menores */
  font-size: .90rem;
  line-height: 1;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: #d6d9e2;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}

.bg-watch .reply-comment-btn:hover,
.bg-watch .delete-comment-btn:hover{
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}

/* estética de “perigo” caso você deseje diferenciar o Excluir */
.bg-watch .delete-comment-btn{
  border-color: rgba(255,90,90,.35);
  color: #ffbaba;
  background: rgba(255,255,255,.03);
}
.bg-watch .delete-comment-btn:hover{
  background: rgba(255,90,90,.12);
  border-color: rgba(255,90,90,.58);
  color: #ffdede;
}

/* Ocultar sino e painel nas páginas Curso e Ranking */
.bg-curso .notification-bell-container,
.bg-curso #notification-panel,
.bg-ranking .notification-bell-container,
.bg-ranking #notification-panel,
.ranking-main .notification-bell-container,
.ranking-main #notification-panel {
  display: none !important;
}

/* ===== THEME SYSTEM (ativa o botão Tema) ===== */
:root {
  /* tema escuro padrão */
  --bg: #0b0d10;
  --surface-1: #111318;
  --surface-2: #171a21;
  --surface-3: #1d222b;
  --text-primary: #e8ecf1;
  --text-secondary: #b6c0ce;
  --border: #2a2f36;
  --accent: #f5b300;
}
:root.theme-night {
  --bg: #0b0d10;
  --surface-1: #111318;
  --surface-2: #171a21;
  --surface-3: #1d222b;
  --text-primary: #e8ecf1;
  --text-secondary: #a7b0be;
  --border: #2a2f36;
  --accent: #f5b300;
}
:root.theme-day {
  --bg: #f6f7fb;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f1f3f7;
  --text-primary: #101318;
  --text-secondary: #3d4553;
  --border: #e3e7ee;
  --accent: #f5b300;
}
html, body { background: var(--bg); color: var(--text-primary); }

/* ===== LAYOUT BASE ===== */
:root { --header-h: 64px; }
body { padding-top: var(--header-h); line-height: 1.45; }
.container { max-width: 1200px; margin: 0 auto; padding-inline: 5%; }
.section { padding-block: 56px; }
.center { text-align: center; }

/* Header fixo + contraste */
.landing-header {
  position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 100;
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--surface-1) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-content { display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text-primary); text-decoration:none; font-weight:900; letter-spacing:.4px; }
.brand .logo { width: 32px; height: 32px; object-fit: contain; }
.main-menu { display:flex; gap:1.25rem; list-style:none; margin:0; padding:0; }
.main-menu a { color:var(--text-secondary); text-decoration:none; font-weight:500; }
.main-menu a:hover { color:var(--text-primary); }
.header-actions { display:flex; gap:.5rem; }

/* Botões rápidos (mantém suas classes) */
.btn { border-radius: 10px; padding:.7rem 1rem; border:1px solid var(--border); background:var(--surface-2); color:var(--text-primary); cursor:pointer; }
.btn.small{ padding:.5rem .8rem; font-size:.9rem; }
.btn.gold { background: var(--accent); color:#251a00; border-color: #d4a200; }
.btn.clear { background: transparent; border-color: var(--border); }

/* ===== HERO ===== */
.hero-section { padding-block: 72px; }
.hero .display { font-size: clamp(28px, 4vw, 44px); margin: 0 0 12px; }
.hero .lead { color: var(--text-secondary); margin: 0 0 18px; }
.hero .actions { display:flex; gap:12px; flex-wrap:wrap; }

/* ===== GRID 2 COLUNAS (vídeo x painel) ===== */
.grid-2 { display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }

/* Vídeo responsivo */
.video-wrap { position: relative; width: 100%; }
.video-wrap video, .video-wrap iframe { width:100%; aspect-ratio: 16/9; height:auto; border-radius: 12px; border:1px solid var(--border); background:#000; }

/* Painel preview em card */
.preview-frame { border:1px solid var(--border); background: var(--surface-1); border-radius: 16px; padding: 10px; }
.preview-frame img { width: 100%; display:block; border-radius: 10px; }

/* ===== DIFERENCIAIS ===== */
.card { background: var(--surface-1); border:1px solid var(--border); border-radius: 16px; }
.card.mini { background: var(--surface-2); }
.section-title { display:flex; align-items:center; gap:10px; margin-bottom: 16px; }
.section-title .bar { display:inline-block; width:8px; height:24px; border-radius:4px; background: var(--accent); }
.mini-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width: 900px){ .mini-grid { grid-template-columns: 1fr; } }

/* ===== RANKING ===== */
.ranking-section .stack > * + * { margin-top: 10px; }

/* ===== FOOTER ===== */
.site-footer { padding: 28px 0; border-top: 1px solid var(--border); background: var(--surface-1); }

/* ===== MODAIS (seus auth-*) ===== */
.auth-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
.auth-modal-overlay.open { display:flex; }
.auth-container { width:min(820px,92vw); max-height:90vh; overflow:auto; border:1px solid var(--border); background:var(--surface-2); border-radius:14px; padding:20px; box-shadow:0 15px 50px rgba(0,0,0,.35); position:relative; }
.auth-modal-close-btn { position:absolute; top:10px; right:12px; background:transparent; border:0; font-size:1.2rem; cursor:pointer; opacity:.9; }

/* ===== UTIL ===== */
.muted { color: var(--text-secondary); }

/* ===== THEME SYSTEM (ativa o botão Tema) ===== */
:root {
  /* tema escuro padrão */
  --bg: #0b0d10;
  --surface-1: #111318;
  --surface-2: #171a21;
  --surface-3: #1d222b;
  --text-primary: #e8ecf1;
  --text-secondary: #b6c0ce;
  --border: #2a2f36;
  --accent: #f5b300;
}
:root.theme-night {
  --bg: #0b0d10;
  --surface-1: #111318;
  --surface-2: #171a21;
  --surface-3: #1d222b;
  --text-primary: #e8ecf1;
  --text-secondary: #a7b0be;
  --border: #2a2f36;
  --accent: #f5b300;
}
:root.theme-day {
  --bg: #f6f7fb;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f1f3f7;
  --text-primary: #101318;
  --text-secondary: #3d4553;
  --border: #e3e7ee;
  --accent: #f5b300;
}
html, body { background: var(--bg); color: var(--text-primary); }

/* ===== LAYOUT BASE ===== */
:root { --header-h: 64px; }
body { padding-top: var(--header-h); line-height: 1.45; }
.container { max-width: 1200px; margin: 0 auto; padding-inline: 5%; }
.section { padding-block: 56px; }
.center { text-align: center; }

/* Header fixo + contraste */
.landing-header {
  position: fixed; inset: 0 0 auto 0; height: var(--header-h); z-index: 100;
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--surface-1) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-content { display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text-primary); text-decoration:none; font-weight:900; letter-spacing:.4px; }
.brand .logo { width: 32px; height: 32px; object-fit: contain; }
.main-menu { display:flex; gap:1.25rem; list-style:none; margin:0; padding:0; }
.main-menu a { color:var(--text-secondary); text-decoration:none; font-weight:500; }
.main-menu a:hover { color:var(--text-primary); }
.header-actions { display:flex; gap:.5rem; }

/* Botões rápidos (mantém suas classes) */
.btn { border-radius: 10px; padding:.7rem 1rem; border:1px solid var(--border); background:var(--surface-2); color:var(--text-primary); cursor:pointer; }
.btn.small{ padding:.5rem .8rem; font-size:.9rem; }
.btn.gold { background: var(--accent); color:#251a00; border-color: #d4a200; }
.btn.clear { background: transparent; border-color: var(--border); }

/* ===== HERO ===== */
.hero-section { padding-block: 72px; }
.hero .display { font-size: clamp(28px, 4vw, 44px); margin: 0 0 12px; }
.hero .lead { color: var(--text-secondary); margin: 0 0 18px; }
.hero .actions { display:flex; gap:12px; flex-wrap:wrap; }

/* ===== GRID 2 COLUNAS (vídeo x painel) ===== */
.grid-2 { display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
@media (max-width: 1000px) { .grid-2 { grid-template-columns: 1fr; } }

/* Vídeo responsivo */
.video-wrap { position: relative; width: 100%; }
.video-wrap video, .video-wrap iframe { width:100%; aspect-ratio: 16/9; height:auto; border-radius: 12px; border:1px solid var(--border); background:#000; }

/* Painel preview em card */
.preview-frame { border:1px solid var(--border); background: var(--surface-1); border-radius: 16px; padding: 10px; }
.preview-frame img { width: 100%; display:block; border-radius: 10px; }

/* ===== DIFERENCIAIS ===== */
.card { background: var(--surface-1); border:1px solid var(--border); border-radius: 16px; }
.card.mini { background: var(--surface-2); }
.section-title { display:flex; align-items:center; gap:10px; margin-bottom: 16px; }
.section-title .bar { display:inline-block; width:8px; height:24px; border-radius:4px; background: var(--accent); }
.mini-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width: 900px){ .mini-grid { grid-template-columns: 1fr; } }

/* ===== RANKING ===== */
.ranking-section .stack > * + * { margin-top: 10px; }

/* ===== FOOTER ===== */
.site-footer { padding: 28px 0; border-top: 1px solid var(--border); background: var(--surface-1); }

/* ===== MODAIS (seus auth-*) ===== */
.auth-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
.auth-modal-overlay.open { display:flex; }
.auth-container { width:min(820px,92vw); max-height:90vh; overflow:auto; border:1px solid var(--border); background:var(--surface-2); border-radius:14px; padding:20px; box-shadow:0 15px 50px rgba(0,0,0,.35); position:relative; }
.auth-modal-close-btn { position:absolute; top:10px; right:12px; background:transparent; border:0; font-size:1.2rem; cursor:pointer; opacity:.9; }

/* ===== UTIL ===== */
.muted { color: var(--text-secondary); }

/* ===== Diferenciais: mais espaço no container e melhor grid ===== */
#diferenciais-section .container.card{
  padding: 24px;                 /* +respiro */
  border-radius: 16px;
}
@media (min-width: 1100px){
  #diferenciais-section .container.card{ padding: 28px 28px 32px; }
}
#diferenciais-section .section-title{ margin-bottom: 18px; }
#diferenciais-section .mini-grid{
  gap: 20px;                     /* cards mais folgados */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* melhor quebra */
}
#diferenciais-section .card.mini{ padding: 18px 20px; }

/* ===== Idealizador: 2 colunas no desktop (imagem | texto) ===== */
.mosaic-idealizador{
  display: grid;
  grid-template-columns: 1fr 1.05fr; /* foto | texto */
  gap: 22px;
  align-items: start;
}
.mosaic-idealizador .photo-main{
  border-radius: 16px; overflow: hidden; background:#000; min-height: 320px;
}
.mosaic-idealizador .photo-main img{ width:100%; height:100%; object-fit: cover; display:block; }
.mosaic-idealizador .text-card{
  border:1px solid var(--border);
  background: var(--surface-2);
  border-radius: 16px;
  padding: 22px;
}
.mosaic-idealizador .text-card .h3{ margin-top: 0; }
@media (max-width: 900px){
  .mosaic-idealizador{ grid-template-columns: 1fr; }
}




/* Overlay flutuante no player (modo online - battle-vote) */
.vote-overlay-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.vote-overlay-bubble{
  margin-top:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.88);
  color:#fff;
  font-size:.85rem;
  font-weight:600;
  box-shadow:0 8px 20px rgba(0,0,0,.6);
  opacity:0;
  animation:vote-overlay-fade 1.4s ease-out forwards;
  white-space:nowrap;
}

@keyframes vote-overlay-fade{
  0%   { opacity:0; transform:translateY(-4px); }
  15%  { opacity:1; transform:translateY(0);    }
  80%  { opacity:1; }
  100% { opacity:0; transform:translateY(-4px); }
}

/* 🔥 Ajuste de largura dos blocos internos no modal */
.security-points-list p {
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.4;
  opacity: 0.9;
}

/* 🔥 override do limite global de 75ch só dentro do modal */
.security-modal-content p {
  max-width: none;
}

  
  /* 🎯 Novos ajustes */
  max-width: 950px;     /* limita a largura do texto */
  width: 100%;
  margin-left: auto;    /* centraliza */
  margin-right: auto;   /* centraliza */
}



/* =================== HISTÓRICO (otimização + ações) =================== */
.history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0 0.75rem 0;
  flex-wrap: wrap;
}

.history-range-label {
  color: var(--cinza-texto);
  font-size: 0.9rem;
}

.history-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.history-btn {
  cursor: pointer;
}

.history-btn--ghost {
  background: transparent;
  border: 1px solid var(--borda-padrao);
  color: var(--cinza-texto);
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: none;
}
.history-btn--ghost:hover {
  border-color: var(--azul-principal);
  color: var(--branco-texto);
  transform: none;
}

.history-btn--loadmore {
  background: var(--fundo-card);
  border: 1px solid var(--borda-padrao);
  color: var(--branco-texto);
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: none;
}
.history-btn--loadmore:hover {
  border-color: var(--azul-principal);
  box-shadow: var(--shadow-glow-blue);
  transform: none;
}

.history-btn--download {
  background: rgba(255, 199, 0, 0.12);
  border: 1px solid rgba(255, 199, 0, 0.35);
  color: var(--dourado-destaque);
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: none;
}
.history-btn--download:hover {
  background: rgba(255, 199, 0, 0.18);
  border-color: rgba(255, 199, 0, 0.55);
  transform: none;
}

.history-pagination {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}
.history-pagination.hidden { display: none; }

.history-score-pending { opacity: 0.7; }

.history-video-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--borda-padrao);
  font-size: 0.75rem;
  color: var(--cinza-texto);
  background: rgba(255,255,255,0.04);
}

.history-list.is-loading { opacity: 0.98; }


/* ===== Modal de vídeo (History → Assistir) ===== */
.modal-content--video {
  max-width: 1100px;
  padding: 1rem;
}
.video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.video-embed-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-embed-fallback {
  padding: 1rem;
  word-break: break-word;
}