/* ============================================================================
   universo.css — o "universo alienígena" do theVacilos             [2026-09-28]
   ----------------------------------------------------------------------------
   Carregado no <head> DEPOIS de design.css. Junta toda a plataforma (site,
   ferramentas, jogos, modais) na mesma estética, nos modos escuro e claro.
   A cor de destaque continua sendo a do tema ativo (roxo por padrão).

   1. Paleta alienígena (tokens extras)       5. Modais — padrão único
   2. Céu de fundo (estrelas)                 6. Apps (drive, finance, chat…)
   3. Cabeçalho, menu e rodapé                7. Componentes comuns
   4. Ponte das variáveis dos apps

   Especificidade: os CSS das páginas entram no <body> (depois deste arquivo).
   Onde precisamos ganhar deles usamos o prefixo  html:not(#tvu):not(#tvu)
   em vez de espalhar !important.
   ============================================================================ */

/* ---------- 1. Paleta alienígena ------------------------------------------- */
:root {
	--tv-alien: #35c43f;          /* verde do piloto */
	--tv-alien-claro: #8ff08a;
	--tv-luz: #48d0ff;            /* luzes azuis do disco */
	--tv-pouso: #ffd84a;          /* luz de pouso */
	--tv-casco: #6e838f;          /* casco cinza */
	--tv-brilho: 0 0 0 1px color-mix(in srgb, var(--tv-destaque) 35%, transparent), 0 8px 28px color-mix(in srgb, var(--tv-destaque) 22%, transparent);
	--tv-faixa: linear-gradient(90deg, var(--tv-destaque), var(--tv-luz) 55%, var(--tv-alien));
	--tv-fundo-modal: rgba(6, 4, 18, .72);
}
html[data-modo="claro"] {
	--tv-alien: #1f9a2b;
	--tv-alien-claro: #2fb33c;
	--tv-luz: #0f8fc7;
	--tv-pouso: #c78f00;
	--tv-fundo-modal: rgba(24, 18, 48, .45);
}

/* ---------- 2. Céu de fundo -------------------------------------------------
   Estrelas em CSS puro (um bloco de 260px que se repete): zero imagens, zero JS. */
body {
	background-image:
		radial-gradient(1px 1px at 22px 34px, rgba(255, 255, 255, .55), transparent 60%),
		radial-gradient(1px 1px at 140px 90px, rgba(200, 190, 255, .45), transparent 60%),
		radial-gradient(1.5px 1.5px at 210px 180px, rgba(255, 255, 255, .5), transparent 60%),
		radial-gradient(1px 1px at 80px 220px, rgba(160, 230, 255, .35), transparent 60%),
		radial-gradient(1px 1px at 245px 20px, rgba(255, 255, 255, .3), transparent 60%),
		radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--tv-destaque) 10%, transparent), transparent 70%);
	background-size: 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 100% 100%;
	background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
}
html[data-modo="claro"] body {
	background-image:
		radial-gradient(1px 1px at 22px 34px, rgba(106, 69, 216, .22), transparent 60%),
		radial-gradient(1px 1px at 140px 90px, rgba(15, 143, 199, .18), transparent 60%),
		radial-gradient(1.5px 1.5px at 210px 180px, rgba(106, 69, 216, .2), transparent 60%),
		radial-gradient(900px 500px at 85% -10%, color-mix(in srgb, var(--tv-destaque) 9%, transparent), transparent 70%);
	background-size: 260px 260px, 260px 260px, 260px 260px, 100% 100%;
	background-repeat: repeat, repeat, repeat, no-repeat;
}
#wrapper, .content-wrap, #content, section#content { background-color: transparent; }

/* ---------- 3. Cabeçalho, menu e rodapé -------------------------------------- */
#header-wrap { position: relative; }
#header-wrap::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: var(--tv-faixa); opacity: .55; pointer-events: none;
}
#header .menu-link, #header .menu-link div { transition: color .15s ease; }
#header .menu-item:hover > .menu-link, #header .menu-item.current > .menu-link { color: var(--tv-alien-claro) !important; }
/* submenus (Hub): sem overflow escondido — os submenus de 2º nível (CS2, Jogos,
   Financeiro) abrem para o lado e eram cortados; sem barra de rolagem */
#header .sub-menu-container, #header .mega-menu-content, #header .dropdown-menu {
	border-radius: var(--tv-raio) !important; border: 1px solid var(--tv-borda) !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35) !important; overflow: visible !important;
	background-color: var(--tv-superficie) !important;
}
@media (min-width: 992px) {
	#header .sub-menu-container { max-height: none !important; overflow-y: visible !important; }
	#header .sub-menu-container .sub-menu-container { top: -11px !important; left: calc(100% + 6px) !important; }
	#header .sub-menu-container .menu-item > .menu-link { border-radius: 10px; }
	#header .sub-menu-container .menu-item:hover > .menu-link { background: var(--tv-superficie-2) !important; color: var(--tv-destaque) !important; }
}
#footer { position: relative; border-top: 0 !important; }
#footer::before {
	content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--tv-faixa); opacity: .5;
}
#copyrights { position: relative; }
#copyrights::after {
	/* disquinho de assinatura no rodapé */
	content: ''; position: absolute; right: 16px; top: -16px; width: 54px; height: 42px;
	background: url('../../img/tv/disco.png') no-repeat center / contain; image-rendering: pixelated;
	opacity: .85; animation: tv-flutua 4s ease-in-out infinite; pointer-events: none;
}
@keyframes tv-flutua { 50% { transform: translateY(-5px); } }
.app-menu { border-top: 1px solid rgba(255, 255, 255, .08); }
.app-menu a.active, .app-menu .active i { color: var(--tv-alien-claro) !important; }

/* ---------- 4. Ponte das variáveis dos apps ----------------------------------
   drive, galeria, finance, agenda, diário, chat, direct, play e mysql definem
   --theme-* no :root do CSS da própria página, cada um com sua cor. Aqui eles
   passam a usar os tokens do site: mesmo fundo, mesma superfície, mesma cor de
   destaque, nos dois modos. html:root vence :root por especificidade. */
html:root {
	--theme-bg-body: var(--tv-fundo);
	--theme-bg-card: var(--tv-superficie);
	--theme-bg-input: var(--tv-superficie-2);
	--theme-border: var(--tv-borda);
	--theme-border-hover: color-mix(in srgb, var(--tv-texto) 22%, transparent);
	--theme-text-main: var(--tv-texto);
	--theme-text-muted: var(--tv-texto-2);
	--theme-primary: var(--tv-destaque);
	--theme-primary-hover: color-mix(in srgb, var(--tv-destaque) 85%, #fff);
	--theme-success: var(--tv-ok);
	--theme-warning: var(--tv-alerta);
	--theme-danger: var(--tv-erro);
	--theme-danger-bg: color-mix(in srgb, var(--tv-erro) 14%, transparent);
}

/* ---------- 5. Modais — padrão único -------------------------------------------
   Famílias que existiam: Magnific (.modal1/.modal2), Bootstrap (.modal-content),
   .agenda-modal (apps), .custom-modal-box, .crop-modal-content, confirmações.
   Todas ficam com: fundo escurecido com desfoque, caixa na superfície do tema,
   raio grande, faixa de cor no topo, cabeçalho/rodapé com a mesma divisória
   e botão de fechar redondo. */
.mfp-bg, .mfp-bg.mfp-ready { background: var(--tv-fundo-modal) !important; opacity: 1 !important; backdrop-filter: blur(6px); }
html:not(#tvu):not(#tvu) :is(.agenda-backdrop, .custom-modal-overlay, .crop-modal-overlay, .custom-confirm-overlay, .emoji-backdrop) {
	background: var(--tv-fundo-modal) !important; backdrop-filter: blur(6px);
}

/* a caixa */
html:not(#tvu):not(#tvu) :is(
	.modal1 > .block, .modal2 > .block, .modal1 .modal-content, .modal2 .modal-content, .modal .modal-content,
	.agenda-modal, .custom-modal-box, .crop-modal-content, .confirm-modal, .modal-confirm, .note-modal-content
) {
	/* faixa de cor no topo como camada de FUNDO: acompanha o arredondamento da caixa
	   (o contorno recorta o fundo), sem sobrar pelas quinas como o ::before de antes */
	background: var(--tv-faixa) 0 0 / 100% 3px no-repeat border-box, var(--tv-superficie) !important;
	color: var(--tv-texto);
	border: 1px solid var(--tv-borda) !important;
	border-top-color: transparent !important;
	border-radius: var(--tv-raio-lg) !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .02) !important;
}
/* só as caixas do Magnific precisam virar referência de posição; as dos apps já são fixed */
html:not(#tvu):not(#tvu) :is(.modal1 > .block, .modal2 > .block, .custom-modal-box, .crop-modal-content, .modal-confirm, .note-modal-content) { position: relative; }
html[data-modo="claro"]:not(#tvu):not(#tvu) :is(.modal1 > .block, .modal2 > .block, .modal1 .modal-content, .modal2 .modal-content, .modal .modal-content, .agenda-modal, .custom-modal-box, .crop-modal-content, .confirm-modal, .modal-confirm) {
	box-shadow: 0 24px 60px rgba(30, 20, 70, .22) !important;
}
/* camadas internas que pintavam o próprio fundo (#212529 fixo) ficam transparentes */
html:not(#tvu):not(#tvu):not(#tvu) :is(.modal1, .modal2) .modal-content > :is(div, form).shadow-lg,
html:not(#tvu):not(#tvu):not(#tvu) :is(.modal1, .modal2) .modal-content > :is(div, form)[class*="tvs-"] {
	background: transparent !important; box-shadow: none !important;
}
.mfp-content .modal-dialog { margin: 1.25rem auto; }

/* cabeçalho / corpo / rodapé */
html:not(#tvu):not(#tvu) :is(.am-header, .modal-header, .custom-modal-header, .crop-modal-header) {
	padding: 16px 20px; border-bottom: 1px solid var(--tv-borda) !important; background: transparent !important;
	display: flex; align-items: center; gap: 10px;
}
html:not(#tvu):not(#tvu) :is(.am-title, .modal-title, .am-header h3, .am-header h4, .am-header h5) { color: var(--tv-texto) !important; font-weight: 800; letter-spacing: -.01em; }
html:not(#tvu):not(#tvu) :is(.am-footer, .modal-footer, .custom-modal-footer, .cv-modal-buttons) {
	border-top: 1px solid var(--tv-borda) !important; background: transparent !important; gap: 10px;
}
/* botão fechar redondo */
html:not(#tvu):not(#tvu) :is(.am-close, .close-popup, .modal .btn-close, .butao-fechar > a, .tv-modal-fechar) {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 36px; height: 36px; padding: 0 !important; border-radius: 50% !important;
	color: var(--tv-texto-2) !important; background: var(--tv-superficie-2) !important; border: 1px solid var(--tv-borda) !important;
	font-size: 16px !important; line-height: 1; text-decoration: none !important; transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
html:not(#tvu):not(#tvu) :is(.am-close, .close-popup, .modal .btn-close, .butao-fechar > a, .tv-modal-fechar):hover {
	color: #fff !important; background: var(--tv-erro) !important; border-color: transparent !important; transform: rotate(90deg);
}
html:not(#tvu):not(#tvu) .butao-fechar > a i { font-size: 16px !important; }

/* formulários dentro de modais */
html:not(#tvu):not(#tvu) :is(.agenda-modal, .custom-modal-box, .modal1, .modal2, .modal-content) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
	background-color: var(--tv-superficie-2); color: var(--tv-texto); border-color: var(--tv-borda);
}
html:not(#tvu):not(#tvu) :is(.agenda-modal, .custom-modal-box, .modal1, .modal2, .modal-content) :is(input, select, textarea):focus {
	border-color: var(--tv-destaque) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tv-destaque) 25%, transparent) !important; outline: 0;
}

/* ---------- 5b. Modais no celular: TELA CHEIA (padrão do viannanogueira) -----------
   Até 560px nenhum modal flutua: ele ocupa a tela inteira com o fundo da página e o
   conteúdo vira um cartão (raio 14px, 10px de respiro). Rodapé no fim do conteúdo, botões
   em grade de 2. Até 920px, com modal aberto, a página de trás fica parada (só CSS, :has).
   Só visual: nenhum id, classe, HTML ou função mudou — abrir/fechar continuam iguais. */
@media (max-width: 560px) {
	/* fundo: a própria página, sem transparência */
	.mfp-bg, .mfp-bg.mfp-ready { background: var(--tv-fundo) !important; backdrop-filter: none; }
	html:not(#tvu):not(#tvu) :is(.agenda-backdrop, .custom-modal-overlay, .crop-modal-overlay, .custom-confirm-overlay) { background: var(--tv-fundo) !important; backdrop-filter: none; }

	/* Magnific (.modal1 / .modal2: login, perfil, personagens, seguidores...) */
	.mfp-wrap .mfp-container { padding: 0 !important; }
	.mfp-wrap .mfp-container::before { display: none; }
	.mfp-wrap .mfp-content { width: 100% !important; max-width: none !important; vertical-align: top; }
	html:not(#tvu):not(#tvu) .mfp-content :is(.modal1, .modal2) {
		width: auto !important; max-width: none !important; margin: 0 !important; padding: 10px !important;
		min-height: 100dvh; display: flex; flex-direction: column;
	}
	html:not(#tvu):not(#tvu) .mfp-content :is(.modal1, .modal2) > :is(.block, .modal-dialog) {
		width: 100% !important; max-width: none !important; margin: 0 !important; flex: 1 1 auto; display: flex; flex-direction: column;
	}
	html:not(#tvu):not(#tvu) .mfp-content :is(.modal1, .modal2) > .block,
	html:not(#tvu):not(#tvu) .mfp-content :is(.modal1, .modal2) .modal-content {
		flex: 1 1 auto; min-width: 0; min-height: calc(100dvh - 20px); border-radius: 14px !important; box-shadow: none !important;
		overflow-wrap: break-word; padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	/* modais dos apps (drive, galeria, finance, agenda, diário, play, direct, mysql) */
	html:not(#tvu):not(#tvu):not(#tvu):not(#tvu) .agenda-modal {
		top: 10px !important; left: 10px !important; right: 10px !important; bottom: 10px !important;
		width: auto !important; max-width: none !important; height: auto !important; max-height: none !important;
		transform: none !important; border-radius: 14px !important; box-shadow: none !important;
	}
	html:not(#tvu):not(#tvu) .agenda-modal .am-body { max-height: none !important; flex: 1 1 auto; overflow-y: auto; }

	/* modais montados por script (recorte de foto, editor de artigo, confirmações) */
	html:not(#tvu):not(#tvu) :is(.custom-modal-overlay, .crop-modal-overlay, .custom-confirm-overlay) { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
	html:not(#tvu):not(#tvu) :is(.custom-modal-box, .crop-modal-content) {
		width: auto !important; max-width: none !important; max-height: none !important; flex: 1 1 auto;
		margin: 10px !important; min-height: calc(100dvh - 20px); border-radius: 14px !important; box-shadow: none !important; overflow-y: auto;
	}
	html:not(#tvu):not(#tvu) :is(.confirm-modal, .modal-confirm) {
		position: fixed !important; top: 10px !important; left: 10px !important; right: 10px !important; bottom: 10px !important;
		width: auto !important; max-width: none !important; transform: none !important; justify-content: center; border-radius: 14px !important;
	}
	html:not(#tvu):not(#tvu) .modal .modal-dialog { margin: 0; max-width: none; min-height: 100dvh; padding: 10px; }
	html:not(#tvu):not(#tvu) .modal .modal-content { min-height: calc(100dvh - 20px); border-radius: 14px !important; }

	/* rodapés: no fim do conteúdo, separados por um fio, botões em grade de 2 */
	html:not(#tvu):not(#tvu) :is(.am-footer, .modal-footer, .custom-modal-footer, .cv-modal-buttons, .crop-actions) {
		position: static; flex-wrap: wrap; align-items: stretch; justify-content: stretch; gap: 8px;
	}
	html:not(#tvu):not(#tvu) :is(.am-footer, .modal-footer, .custom-modal-footer, .cv-modal-buttons, .crop-actions) > :is(button, a, .btn, .button) {
		flex: 1 1 calc(50% - 4px); min-width: 0; min-height: 42px; margin: 0 !important; justify-content: center; text-align: center;
	}

	/* modelo novo (.tv-modal) e jogo do perfil */
	.tv-modal-topo { padding: 14px 14px 8px; }
	.tv-modal-corpo { padding: 0 12px 14px; }
}
/* com modal aberto, a página de trás não rola (até 920px) */
@media (max-width: 920px) {
	/* trava só o body: travar o <html> junto fazia a página pular para o topo */
	html:has(.agenda-modal.show, .confirm-modal.show, .modal-confirm.show, .modal.show,
		:is(.custom-modal-overlay, .crop-modal-overlay, .custom-confirm-overlay)[style*="flex"],
		:is(.custom-modal-overlay, .crop-modal-overlay, .custom-confirm-overlay)[style*="block"]) body { overflow: hidden; }
	:is(.agenda-modal, .mfp-wrap, .custom-modal-overlay, .crop-modal-overlay) { overscroll-behavior: contain; }
}

/* modelo novo (.tv-modal) — usado pelo jogo do perfil e por modais novos */
.tv-modal-topo { display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px; }
.tv-modal-selo {
	display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
	font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
	color: var(--tv-alien-claro); background: color-mix(in srgb, var(--tv-alien) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--tv-alien) 35%, transparent);
}
.tv-modal-titulo { margin: 0; font-size: 22px; font-weight: 800; color: var(--tv-texto); letter-spacing: -.01em; }
.tv-modal-acao { color: var(--tv-texto-2); font-size: 17px; }
.tv-modal-acao:hover { color: var(--tv-destaque); }
.tv-modal-fechar { margin-left: auto; }
.tv-modal-corpo { padding: 0 20px 20px; }
.tv-modal-texto { margin: 0 0 12px; font-size: 14px; color: var(--tv-texto-2); }
@media (max-width: 575.98px) { .tv-modal-topo { padding: 16px 14px 10px; } .tv-modal-corpo { padding: 0 14px 16px; } .tv-modal-titulo { font-size: 19px; } }

/* ---------- 6. Apps: pequenos ajustes de coerência ------------------------------ */
html:not(#tvu):not(#tvu) :is(.btn-action, .btn-primary-app) { box-shadow: 0 3px 0 color-mix(in srgb, var(--theme-primary) 55%, #000); }

/* ---------- 7. Componentes comuns -------------------------------------------------- */
.card { background-color: var(--tv-superficie); }
.badge.bg-success, .bg-success { background-color: var(--tv-alien) !important; }
.text-success { color: var(--tv-alien-claro) !important; }
html[data-modo="claro"] .text-success { color: var(--tv-alien) !important; }
a:not(.button):not(.btn):not(.menu-link):hover { text-decoration-color: var(--tv-alien-claro); }
::selection { background: color-mix(in srgb, var(--tv-alien) 45%, transparent); color: #fff; }
.css3-spinner, #page-loader { background-color: var(--tv-fundo) !important; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--tv-texto); --bs-table-border-color: var(--tv-borda); }
@media (prefers-reduced-motion: reduce) { #copyrights::after { animation: none; } }

/* ---------- 8. 404: o disco abduzindo a página ------------------------------------- */
.tv-404 { position: relative; padding-top: 70px; }
.tv-404-disco {
	position: absolute; left: 50%; top: 0; width: 108px; height: 84px; margin-left: -54px;
	background: url('../../img/tv/disco.png') no-repeat center / contain; image-rendering: pixelated;
	animation: tv-flutua 3s ease-in-out infinite; z-index: 2;
}
.tv-404-raio {
	position: absolute; left: 50%; top: 74px; width: 220px; height: calc(100% - 60px); margin-left: -110px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--tv-pouso) 45%, transparent), transparent 85%);
	clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); opacity: .55; animation: tv-raio 2.4s ease-in-out infinite; pointer-events: none;
}
@keyframes tv-raio { 50% { opacity: .3; } }
.tv-404 .error404 { position: relative; color: var(--tv-texto); animation: tv-abduz 3s ease-in-out infinite; }
@keyframes tv-abduz { 50% { transform: translateY(-8px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .tv-404-disco, .tv-404-raio, .tv-404 .error404 { animation: none; } }

/* ---------- 9. Texto branco sobre fundo colorido no modo claro ---------------------
   O modo claro troca "branco" por "quase preto" (cores.css) para o texto das páginas.
   Em botões/etiquetas com fundo colorido o texto precisa continuar branco. Lista gerada
   a partir dos CSS das páginas (regras com fundo saturado + texto branco). */
html[data-modo="claro"]:not(#tvu) :is(
	.am-btn-delete:hover,
	.am-btn-save,
	.badge-alert,
	.badge-unread,
	.blot-selected::after,
	.btn-action,
	.btn-adm:hover,
	.btn-adquirido,
	.btn-blue-outline:hover,
	.btn-crop-confirm,
	.btn-delete:hover,
	.btn-edit:hover,
	.btn-filter.active,
	.btn-icon-danger:hover,
	.btn-nova-pagina,
	.btn-orange-outline:hover,
	.btn-red-outline:hover,
	.btn-remove-preview,
	.btn-req-accept,
	.btn-revogar:hover,
	.btn-save,
	.btn-send,
	.chat-media-file:hover,
	.chk-add-btn,
	.chk-edit-btn:hover,
	.currency-tab.active,
	.fc-day-today .fc-daygrid-day-number,
	.folders-grid .item-selected::before,
	.images-grid .item-selected::before,
	.item-selected::before,
	.list-view .item-selected::before,
	.mc-btn-confirm,
	.mobile-event-badge,
	.mp-btn,
	.msg-row.evento_epico .msg-bubble,
	.msg-row.mine .msg-bubble,
	.nav-segmented .nav-btn.active,
	.period-btn.active,
	.preview-grid .remove-btn,
	.ql-editor .btn-add-image,
	.ql-editor .btn-remove-image,
	.slider-add-btn,
	.slider-remove-btn,
	.spell-fogo:hover,
	.spell-veneno:hover,
	.sv-btn:hover,
	.tab-btn.active,
	.tool-btn.ban:hover,
	.tool-btn.danger:hover,
	.tool-btn.interact:hover,
	.tool-btn.spell:hover,
	.tvs-0624abfa:not(#tv):not(#tv),
	.tvs-51c07e95:not(#tv):not(#tv),
	.vm-btn.active
) { color: #fff !important; }

/* ---------- 10. Modo claro por inteiro (2026-09-28) ---------------------------------
   Cor dos links (custom.css usa --tv-cor-link com !important) e componentes do tema
   que tinham cores fixas de fundo escuro. */
:root { --tv-cor-link: #fff; }
html[data-modo="claro"] { --tv-cor-link: var(--tv-texto); }
/* links que são botões/etiquetas coloridos: texto branco nos dois modos */
html[data-modo="claro"]:not(#tvu) :is(
	a.button:not(.button-border):not(.button-light):not(.button-white):not(.bg-white):not(.bg-light):not(.button-transparent),
	a.btn-primary, a.btn-success, a.btn-danger, a.btn-dark, a.btn-info, a.btn-secondary, a.btn-warning,
	a.badge:not(.bg-light):not(.bg-white), a[class*=" bg-"]:not(.bg-light):not(.bg-white):not(.bg-transparent):not(.bg-opacity-10),
	a.tvh-botao-principal, a.page-link.active, .page-item.active > a.page-link, a.btn-action, .pagination .active a
) { color: #fff !important; }
html[data-modo="claro"] a:hover { color: var(--tv-destaque) !important; }
html[data-modo="claro"] :is(a.button, a.btn, a.badge, a.tvh-botao, a.tvh-card, a.tvh-jogo, .menu-link, .app-menu-link, a.list-group-item):hover { color: inherit; }

/* títulos e metadados de artigos */
html[data-modo="claro"] {
	--cnvs-post-title-font-color: var(--tv-texto);
	--cnvs-post-meta-color: var(--tv-texto-2);
	--cnvs-link-color: var(--tv-texto);
	--bs-link-color-rgb: 22, 22, 29;
	--bs-list-group-bg: var(--tv-superficie);
	--bs-list-group-color: var(--tv-texto);
	--bs-list-group-action-color: var(--tv-texto);
	--bs-list-group-border-color: var(--tv-borda);
	--bs-list-group-action-hover-bg: var(--tv-superficie-2);
	--bs-list-group-action-hover-color: var(--tv-texto);
	--bs-pagination-bg: var(--tv-superficie);
	--bs-pagination-color: var(--tv-texto);
	--bs-pagination-border-color: var(--tv-borda);
	--bs-pagination-disabled-bg: var(--tv-superficie-2);
	--bs-pagination-disabled-color: var(--tv-texto-2);
	--bs-pagination-active-bg: var(--tv-destaque);
	--bs-pagination-active-border-color: var(--tv-destaque);
	--bs-breadcrumb-item-active-color: var(--tv-texto-2);
	--bs-table-color: var(--tv-texto);
	--bs-secondary-color: var(--tv-texto-2);
}
html[data-modo="claro"] .list-group-item { background-color: var(--tv-superficie); color: var(--tv-texto); border-color: var(--tv-borda); }
html[data-modo="claro"] .list-group-item :is(i, div, span) { color: inherit; }
html[data-modo="claro"] .tagcloud a {
	background-color: var(--tv-superficie) !important; border-color: var(--tv-borda) !important; color: var(--tv-texto) !important; border-radius: 999px;
}
html[data-modo="claro"] .tagcloud a:hover { background-color: var(--tv-destaque) !important; border-color: var(--tv-destaque) !important; color: #fff !important; }
html[data-modo="claro"] .top-cart-title :is(h4, h5) { color: var(--tv-texto) !important; }
html[data-modo="claro"] .close-notification { color: var(--tv-texto-2); }
html[data-modo="claro"] :is(.page-title, .page-title h1, .page-title span) { color: var(--tv-texto); }
html[data-modo="claro"] .comment-author :is(span, a), html[data-modo="claro"] .comment-content { color: var(--tv-texto-2); }
html[data-modo="claro"] label, html[data-modo="claro"] .form-label { color: var(--tv-texto); }

/* apps com variáveis próprias: PerfectKey, Agenda (FullCalendar), Notas */
html:not(#tvu):not(#tvu) #cryptovault-root {
	--cv-bg-body: var(--tv-fundo); --cv-bg-card: var(--tv-superficie); --cv-bg-input: var(--tv-superficie-2);
	--cv-border: var(--tv-borda); --cv-text-main: var(--tv-texto); --cv-text-muted: var(--tv-texto-2);
	--cv-accent: var(--tv-destaque); --cv-accent-hover: color-mix(in srgb, var(--tv-destaque) 85%, #fff);
}
html:root {
	--fc-page-bg-color: var(--tv-superficie); --fc-neutral-bg-color: var(--tv-superficie-2); --fc-neutral-text-color: var(--tv-texto-2);
	--fc-border-color: var(--tv-borda); --fc-theme-standard-border-color: var(--tv-borda);
	--fc-today-bg-color: color-mix(in srgb, var(--tv-destaque) 12%, transparent);
	--fc-button-bg-color: var(--tv-superficie-2); --fc-button-border-color: var(--tv-borda); --fc-button-text-color: var(--tv-texto);
	--fc-button-hover-bg-color: var(--tv-destaque); --fc-button-hover-border-color: var(--tv-destaque);
	--fc-button-active-bg-color: var(--tv-destaque); --fc-button-active-border-color: var(--tv-destaque);
	--fc-list-event-hover-bg-color: var(--tv-superficie-2);
	--notepad-bg: var(--tv-superficie); --notepad-border: var(--tv-borda); --header-bg: var(--tv-superficie-2);
	--toolbar-bg: var(--tv-superficie-2); --hover-bg: var(--tv-superficie-2); --text-color: var(--tv-texto); --icon-color: var(--tv-texto-2);
	--border-color: var(--tv-borda);
}
html:not(#tvu) .fc :is(.fc-col-header-cell-cushion, .fc-daygrid-day-number, .fc-list-day-text, .fc-list-day-side-text, .fc-toolbar-title) { color: var(--tv-texto) !important; }
html:not(#tvu) .fc .fc-button-primary:not(:disabled).fc-button-active, html:not(#tvu) .fc .fc-button-primary:hover { color: #fff !important; }

/* abas escuras do Canvas (#carousel-tabs-dark) usadas em Notas/Adicionar */
html[data-modo="claro"] #carousel-tabs-dark { --cnvs-tabs-bg-color: var(--tv-superficie-2); }
html[data-modo="claro"] #carousel-tabs-dark .nav-link { color: var(--tv-texto) !important; }
html[data-modo="claro"] #carousel-tabs-dark .nav-link.active { color: #fff !important; background: var(--tv-destaque) !important; }

/* painel lateral de opções (engrenagem à direita) */
html[data-modo="claro"] :is(.scw-trigger-icon, .scw-switcher-wrap) { background-color: var(--tv-superficie) !important; border-color: var(--tv-borda) !important; color: var(--tv-texto); }
html:not([data-modo="claro"]) :is(.scw-trigger-icon, .scw-switcher-wrap) { background-color: var(--tv-superficie) !important; border-color: var(--tv-borda) !important; }
.scw-trigger-icon { border-radius: 12px 0 0 12px !important; }

/* ícones em imagem branca dentro de menus (ex.: logo "CS" do Hub) */
html[data-modo="claro"] #header .sub-menu-container img { filter: brightness(0) !important; }
@media (min-width: 992px) { #header .subcs2 { width: 270px !important; } }

/* ---------- 11. Layout geral: tabelas de admin, abas, etiquetas (2026-09-28) --------
   Mesmo acabamento nos dois modos: cartões na superfície, bordas finas, raio do tema. */
/* tabelas (gerenciar-*, log, mysql, atividade) */
html:not(#tvu) :is(.content-wrap .table-responsive:has(> table.table, > .dataTables_wrapper), .content-wrap .tab-content-area > .dataTables_wrapper) {
	background: var(--tv-superficie); border: 1px solid var(--tv-borda); border-radius: var(--tv-raio);
	box-shadow: var(--tv-sombra); padding: 14px;
}
html:not(#tvu) .dataTables_wrapper .row { --bs-gutter-x: 1rem; }
html:not(#tvu) .dataTables_wrapper table.table { font-family: inherit; }
html:not(#tvu) table.table {
	--bs-table-bg: transparent; --bs-table-color: var(--tv-texto);
	--bs-table-striped-bg: color-mix(in srgb, var(--tv-texto) 3.5%, transparent); --bs-table-striped-color: var(--tv-texto);
	--bs-table-hover-bg: color-mix(in srgb, var(--tv-destaque) 7%, transparent); --bs-table-hover-color: var(--tv-texto);
	--bs-table-border-color: var(--tv-borda);
	border-color: var(--tv-borda) !important; margin-bottom: .5rem !important;
}
html:not(#tvu) table.table.table-bordered { border-collapse: separate; border-spacing: 0; border-radius: var(--tv-raio-sm); overflow: hidden; }
html:not(#tvu) table.table.table-bordered > :not(caption) > * > * { border-width: 0 0 1px 0; }
html:not(#tvu) table.table > :is(thead, tfoot) th {
	background: var(--tv-superficie-2) !important; color: var(--tv-texto-2) !important;
	font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
html:not(#tvu) table.table > tbody > tr > td { vertical-align: middle; }
html:not(#tvu) table.table > tbody > tr:hover > * { background-color: color-mix(in srgb, var(--tv-destaque) 7%, transparent) !important; }
html:not(#tvu) table.table td img.img-circle { border-radius: 50%; border: 1px solid var(--tv-borda); }
/* botões de ação dentro das tabelas: ícone quadrado arredondado */
html:not(#tvu):not(#tvu) table.table td .button.button-mini {
	display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-height: 34px;
	padding: 0; margin: 0; border-radius: 10px !important; box-shadow: none !important; text-shadow: none;
	background: var(--tv-superficie-2) !important; border: 1px solid var(--tv-borda) !important; color: var(--tv-texto) !important;
	transition: background-color .15s, color .15s, border-color .15s;
}
html:not(#tvu):not(#tvu) table.table td .button.button-mini:hover { background: var(--tv-destaque) !important; border-color: var(--tv-destaque) !important; color: #fff !important; }
html:not(#tvu):not(#tvu) table.table td .button.button-mini:has(.fa-trash-alt, .fa-trash, .bi-trash):hover { background: #dc3545 !important; border-color: #dc3545 !important; }
html:not(#tvu):not(#tvu) table.table td .button.button-mini i { margin: 0 !important; color: inherit !important; }
/* controles do DataTables */
html:not(#tvu) .dataTables_wrapper :is(.dataTables_length select, .dataTables_filter input) {
	background-color: var(--tv-superficie-2); color: var(--tv-texto); border: 1px solid var(--tv-borda); border-radius: 10px; min-height: 36px;
}
html:not(#tvu) .dataTables_wrapper .dataTables_filter input { padding: 4px 12px; }
html:not(#tvu) .dataTables_wrapper :is(.dataTables_length, .dataTables_filter, .dataTables_info) { color: var(--tv-texto-2); font-size: .9rem; }
html:not(#tvu) .dataTables_wrapper .pagination { gap: 4px; }
html:not(#tvu) .dataTables_wrapper .pagination .page-link { border-radius: 10px !important; background: var(--tv-superficie-2); border-color: var(--tv-borda); color: var(--tv-texto); }
html:not(#tvu) .dataTables_wrapper .pagination .active .page-link { background: var(--tv-destaque); border-color: var(--tv-destaque); color: #fff !important; }

/* título de página (page-title-mini) */
html:not(#tvu) .page-title.page-title-mini { border-bottom: 1px solid var(--tv-borda); }
html:not(#tvu) .page-title .breadcrumb-item a { color: var(--tv-texto-2) !important; }
html:not(#tvu) .page-title .breadcrumb-item a:hover { color: var(--tv-destaque) !important; }

/* abas segmentadas (finance, diário, play): ativa = pílula no destaque */
html:not(#tvu):not(#tvu) .nav-segmented .nav-btn.active { background: var(--tv-destaque) !important; color: #fff !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--tv-destaque) 35%, transparent); }
html:not(#tvu):not(#tvu) .nav-segmented .nav-btn.active :is(i, svg, span) { color: #fff !important; }
html[data-modo="claro"] .nav-segmented .nav-btn:not(.active):hover { color: var(--tv-texto) !important; }

/* etiquetas (tagcloud) como pílulas nos dois modos */
html:not([data-modo="claro"]) .tagcloud a {
	background-color: var(--tv-superficie) !important; border-color: var(--tv-borda) !important; color: var(--tv-texto) !important; border-radius: 999px;
}
html:not([data-modo="claro"]) .tagcloud a:hover { background-color: var(--tv-destaque) !important; border-color: var(--tv-destaque) !important; color: #fff !important; }

/* ---------- 12. Ajustes finos do modo claro (auditoria de contraste) ---------------- */
/* botões "escuros" com texto branco fixo: no claro viram botão invertido (fundo texto) */
html[data-modo="claro"] :is(.tvs-6481304e, .tvs-1fa5f805, [style*="--tvc-212529"][style*="--tvc-ffffff"]):not(input, select, textarea):not(#tv):not(#tv):not(#tv) { background-color: var(--tv-texto) !important; color: #fff !important; border-color: var(--tv-texto) !important; }
html[data-modo="claro"] :is(.tvs-6481304e, .tvs-1fa5f805, [style*="--tvc-212529"][style*="--tvc-ffffff"]):not(#tv):not(#tv):not(#tv) i { color: #fff !important; }
/* campos com o mesmo estilo escuro fixo: campo normal do tema */
html[data-modo="claro"] :is(input, select, textarea):is(.tvs-6481304e, .tvs-1fa5f805, [style*="--tvc-212529"][style*="--tvc-ffffff"]):not(#tv):not(#tv):not(#tv) { background-color: var(--tv-superficie-2) !important; color: var(--tv-texto) !important; border-color: var(--tv-borda) !important; }
/* botões/campos na cor de input com texto branco fixo: texto do tema */
html[data-modo="claro"] :is(.tvs-27d19e8a, .tvs-4939171a, .tvs-8291c461, .tvs-c23ce5e3, .tvs-ecab538b, [style*="--theme-bg-input"][style*="--tvc-ffffff"], [style*="transparent"][style*="--theme-border"][style*="--tvc-ffffff"]):not(#tv):not(#tv):not(#tv) { color: var(--tv-texto) !important; }
html[data-modo="claro"] :is(.tvs-27d19e8a, .tvs-4939171a, .tvs-8291c461, .tvs-c23ce5e3, .tvs-ecab538b, [style*="--theme-bg-input"][style*="--tvc-ffffff"], [style*="transparent"][style*="--theme-border"][style*="--tvc-ffffff"]):not(#tv):not(#tv):not(#tv) :is(span, i, svg) { color: inherit !important; }
/* PerfectKey: modo ativo */
html:not(#tvu) :is(.tvs-86ba5d20, .cv-mode-btn.active[style*="--cv-border"]):not(#tv):not(#tv):not(#tv) { background: var(--tv-destaque) !important; color: #fff !important; }
/* Agenda: dia de hoje em pílula no destaque */
html:not(#tvu) .fc .fc-day-today .fc-daygrid-day-number { background: var(--tv-destaque); color: #fff !important; border-radius: 999px; min-width: 26px; text-align: center; margin: 4px; padding: 2px 7px; }
/* Jogo multiplayer: botão admin continua escuro */
html[data-modo="claro"] .mp-btn-admin { color: #fff !important; background: linear-gradient(145deg, #4b4b57, #34343d) !important; box-shadow: 0 4px 0 #1d1d23 !important; }
/* verde de sucesso e vermelho de estado legíveis no claro */
html:not(#tvu) .btn-action.success { background: #15803d !important; }
html[data-modo="claro"] table.table td:is([style*="248, 113, 113"], [style*="F87171"], [style*="f87171"]) { color: #dc2626 !important; }
html[data-modo="claro"] table.table td:is([style*="34, 197, 94"], [style*="22C55E"], [style*="22c55e"]) { color: #15803d !important; }
/* metadados, placeholders e separadores com contraste suficiente */
html[data-modo="claro"] :is(.entry-meta li, .entry-meta li a, #contador-meta, .copyright-links, label#form-username) { color: var(--tv-texto-2) !important; }
html[data-modo="claro"] :is(.select2-selection__placeholder, .file-drop-zone-title, .filter-option-inner-inner, ::placeholder) { color: #6b6b7b !important; }
/* botão "Salvar" do gerenciar-coldboy (CSS antigo cinza com texto #333) */
html:not(#tvu):not(#tvu) #submit-button.button.button-3d:not(.button-mini) { background: var(--tv-destaque) !important; color: #fff !important; border-color: transparent !important; }
/* Earth: estilo novo no §21 (acompanha o tema) */

/* ---------- 13. Rolagem sem "pulo" (2026-09-28) ------------------------------------
   Antes: ao passar do topo o Canvas fixava o #header-wrap (sticky-header) e, como o
   custom.css zera o .header-wrap-clone, o #header caía de 62px para 0 — o conteúdo subia
   62px e a página encolhia. Perto do limite isso ligava/desligava sem parar: rolagem
   "travando" e pulando. Agora o próprio #header é "sticky" (fica no fluxo e gruda no
   topo) e o #header-wrap nunca vira fixed: nada muda de altura ao rolar. */
html:not(#tvu) #header { position: sticky !important; top: 0; z-index: 399; }
html:not(#tvu) #header #header-wrap,
html:not(#tvu) body:not(.is-expanded-menu) #header.sticky-header #header-wrap { position: relative !important; top: auto !important; }
/* celular: o botão do painel lateral descia sobre títulos e ícones — vai para perto do menu inferior */
@media (max-width: 767.98px) {
	html:not(#tvu) .scw-trigger-icon { top: auto !important; bottom: 84px; right: 0 !important; width: 38px; height: 38px; opacity: .92; }
	html:not(#tvu) .scw-switcher-wrap.scw-switcher-open .scw-trigger-icon { right: min(349px, calc(100vw - 38px)) !important; }
}
/* celular: com o #header "sticky", o painel de notificações (fixo e fora da tela, à direita)
   alargava a página — o menu inferior sumia e algumas páginas não rolavam. */
@media (max-width: 991.98px) { html:not(#tvu) #header { overflow-x: clip; } }
/* abas do Log: ativa com texto branco sobre o destaque */
html:not(#tvu):not(#tvu) .btn-toggle-tab.active, html:not(#tvu):not(#tvu) .btn-toggle-tab.active i { color: #fff !important; }

/* ---------- 14. Perfil do usuário (u.php) — 2026-09-28 --------------------------------
   Capa, cartão do conteúdo, cartões Steam/GitHub e cartão do QR com as cores do tema
   nos dois modos (antes: cinzas fixos que no claro ficavam lavados). */
/* capa */
html[data-modo="claro"] section.page-title.bg-colorr {
	background:
		radial-gradient(700px 260px at 18% 0%, color-mix(in srgb, var(--tv-destaque) 16%, transparent), transparent 70%),
		radial-gradient(600px 240px at 90% 100%, color-mix(in srgb, #0f8fc7 12%, transparent), transparent 70%),
		color-mix(in srgb, var(--tv-destaque) 5%, var(--tv-superficie)) !important;
	border-bottom: 1px solid var(--tv-borda) !important;
}
html[data-modo="claro"] section.page-title.bg-colorr #particles-nasa { filter: invert(1) opacity(.28); }
html[data-modo="claro"] section.page-title.bg-colorr img.rounded-circle.border-white { box-shadow: 0 8px 24px rgba(30, 20, 70, .18); }

/* cartão que envolve o conteúdo das abas do perfil */
html:not(#tvu) body:has(.tvp-perfil) .tab-content-area {
	background: var(--tv-superficie) !important; border: 1px solid var(--tv-borda) !important;
	border-radius: var(--tv-raio-lg, 18px) !important; box-shadow: var(--tv-sombra);
}
html:not(#tvu) .tvp-dados > li.text-larger { color: var(--tv-texto-2); }
html:not(#tvu) .tvp-dados > li.text-larger strong { color: var(--tv-texto); }

/* Steam e GitHub */
html:not(#tvu) :is(.steam_widget_card, .github_widget_card) {
	font-family: inherit; background: var(--tv-superficie-2) !important; border: 1px solid var(--tv-borda);
	border-radius: 16px; padding: 14px; gap: 14px; color: var(--tv-texto); box-shadow: none; margin-top: 14px;
}
html:not(#tvu) :is(.steam_widget_card, .github_widget_card):hover { border-color: color-mix(in srgb, var(--tv-destaque) 40%, var(--tv-borda)); }
html:not(#tvu) :is(.steam_avatar_box, .github_avatar_box) { width: 78px; height: 78px; }
html:not(#tvu) .steam_img { border-radius: 12px; }
html:not(#tvu) .github_img { border: 2px solid var(--tv-borda); background: var(--tv-superficie); }
html:not(#tvu) .steam_level_badge { background: var(--tv-superficie); border: 2px solid #d9534f; color: var(--tv-texto); }
html:not(#tvu) :is(.steam_username, .github_username) { color: var(--tv-texto); font-size: 17px; }
html:not(#tvu) :is(.steam_status_txt, .github_status_txt) { color: var(--tv-texto-2); }
html:not(#tvu):not(#tvu) .steam_status_txt.steam_txt_online { color: #57cbde; }
html:not(#tvu):not(#tvu) .steam_status_txt.steam_txt_ingame { color: #90ba3c; }
html[data-modo="claro"]:not(#tvu) .steam_status_txt.steam_txt_online { color: #0e7490; }
html[data-modo="claro"]:not(#tvu) .steam_status_txt.steam_txt_ingame { color: #4d7c0f; }
html:not(#tvu) :is(.steam_meta_row, .github_meta_row) { color: var(--tv-texto-2); font-size: 11px; }
html:not(#tvu) :is(.steam_meta_item, .github_meta_item) {
	background: var(--tv-superficie); border: 1px solid var(--tv-borda); border-radius: 999px; padding: 2px 9px; color: var(--tv-texto-2);
}
html:not(#tvu):not(#tvu) :is(a.steam_action_btn, a.github_action_btn) {
	background: var(--tv-superficie); border: 1px solid var(--tv-borda); border-radius: 10px; color: var(--tv-texto) !important;
	padding: 8px 12px; font-size: 11px; letter-spacing: .06em;
}
html:not(#tvu):not(#tvu) :is(a.steam_action_btn, a.github_action_btn):hover { background: var(--tv-destaque); border-color: var(--tv-destaque); color: #fff !important; }
html:not(#tvu):not(#tvu) :is(a.steam_action_btn, a.github_action_btn):hover i { color: #fff !important; }

/* cartão do QR */
.tvp-qr {
	display: flex; align-items: center; gap: 18px; height: 100%;
	background: var(--tv-superficie-2); border: 1px solid var(--tv-borda); border-radius: 18px; padding: 18px;
	background-image: radial-gradient(260px 160px at 100% 0%, color-mix(in srgb, var(--tv-destaque) 12%, transparent), transparent 70%);
}
.tvp-qr-img { flex: 0 0 auto; width: 150px; height: 150px; border-radius: 14px; overflow: hidden; border: 1px solid var(--tv-borda); background: #fff; padding: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.tvp-qr-img img { display: block; width: 100%; height: 100%; }
html[data-modo="claro"] .tvp-qr-img { box-shadow: 0 6px 18px rgba(30, 20, 70, .10); }
.tvp-qr-texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tvp-qr-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tv-destaque); }
html:not([data-modo="claro"]) .tvp-qr-rotulo { color: color-mix(in srgb, var(--tv-destaque) 60%, #fff); }
.tvp-qr-texto strong { font-size: 1.15rem; color: var(--tv-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvp-qr-dica { font-size: .85rem; line-height: 1.4; color: var(--tv-texto-2); }
html:not(#tvu):not(#tvu) a.tvp-qr-link {
	align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: .8rem; font-weight: 600; color: var(--tv-texto) !important; text-decoration: none;
	background: var(--tv-superficie); border: 1px solid var(--tv-borda); border-radius: 999px; padding: 4px 12px; margin-top: 2px;
}
html:not(#tvu):not(#tvu) a.tvp-qr-link:hover { border-color: var(--tv-destaque); color: var(--tv-destaque) !important; }
@media (min-width: 992px) { .tvp-qr { align-self: flex-start; height: auto; } }
@media (max-width: 420px) {
	.tvp-qr { gap: 14px; padding: 14px; }
	.tvp-qr-img { width: 118px; height: 118px; }
}
@media (max-width: 420px) { html:not(#tvu):not(#tvu) a.tvp-qr-link { white-space: normal; overflow-wrap: anywhere; border-radius: 10px; font-size: .75rem; } }

/* ---------- 15. Rodapé sem sobrepor o conteúdo (2026-09-28) ---------------------------
   Antes: #footer absoluto no fim do #wrapper com 88px reservados; entre 768 e 991px o
   rodapé quebra em duas linhas (~142px) e cobria o fim das páginas. Agora o #wrapper é
   uma coluna flexível com altura mínima da tela e o rodapé fica no fluxo, sempre embaixo. */
@media (min-width: 768px) {
	html:not(#tvu) #wrapper { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 0 !important; }
	html:not(#tvu) #wrapper > * { flex-shrink: 0; }
	html:not(#tvu) #wrapper > #footer { position: relative !important; bottom: auto; margin-top: auto; }
}

/* ---------- 16. Espaço entre o cabeçalho e o conteúdo (2026-09-28) ------------------
   Antes: cada página somava o próprio padding-top (50 a 110px) — sobra de quando o
   cabeçalho ficava por cima do conteúdo. Agora é um ritmo único: 32px no computador e
   20px no celular; 28/18px logo depois de uma barra de título. O <body> recebe data-tvpg
   (nome da página) para as exceções de tela cheia (jogos, mapa, chat/direct no celular). */
:root { --tv-respiro: 32px; --tv-respiro-titulo: 28px; }
@media (max-width: 767.98px) { :root { --tv-respiro: 20px; --tv-respiro-titulo: 18px; } }
html:not(#tvu):not(#tvu) body[data-tvpg]:not([data-tvpg="home"], [data-tvpg="game"], [data-tvpg="vacbird"], [data-tvpg="alaska"], [data-tvpg="earth"], [data-tvpg="jogos"]) #content > .content-wrap {
	padding-top: var(--tv-respiro) !important;
}
html:not(#tvu):not(#tvu) body[data-tvpg]:not([data-tvpg="home"], [data-tvpg="game"], [data-tvpg="vacbird"], [data-tvpg="alaska"], [data-tvpg="earth"], [data-tvpg="jogos"]) .page-title ~ #content > .content-wrap {
	padding-top: var(--tv-respiro-titulo) !important;
}
@media (max-width: 767.98px) {
	html:not(#tvu):not(#tvu) body[data-tvpg]:is([data-tvpg="chat"], [data-tvpg="direct"]):not([data-tvpg="x"]) #content > .content-wrap { padding-top: 0 !important; }
}
/* blog/categoria: a grade de posts tinha margem negativa e o 1º post subia acima da barra lateral */
html:not(#tvu) body:is([data-tvpg="blog"], [data-tvpg="categoria"]) .postcontent > .row.gutter-30:first-child { margin-top: 0 !important; }
html:not(#tvu) body:is([data-tvpg="blog"], [data-tvpg="categoria"]) .postcontent > .row.gutter-30:first-child > .entry:first-child { margin-top: 0 !important; }
/* barras de título: o .container-mobile somava 58–65px de "folga" herdada do cabeçalho antigo */
html:not(#tvu):not(#tvu) .page-title .container-mobile { padding-top: 0 !important; }
html:not(#tvu):not(#tvu) body[data-tvpg]:not([data-tvpg="u"]) .page-title { padding-top: 28px !important; padding-bottom: 26px !important; }
@media (max-width: 767.98px) { html:not(#tvu):not(#tvu) body[data-tvpg]:not([data-tvpg="u"]) .page-title { padding-top: 22px !important; padding-bottom: 20px !important; } }
/* capa do perfil mais enxuta */
/* perfil, configurações, editar-usuário, notas: o container das abas tinha margem de -45 a +27px */
html:not(#tvu) #content > .content-wrap > .container.col-md-12.pt-0 { margin-top: 0 !important; }
html:not(#tvu) #content > .content-wrap > .container.col-md-12.pt-0 .tab-pane > .row:first-child { margin-top: 0 !important; }
html:not(#tvu) body[data-tvpg="u"] section.page-title { padding-top: 40px !important; padding-bottom: 36px !important; }
@media (max-width: 767.98px) { html:not(#tvu) body[data-tvpg="u"] section.page-title { padding-top: 28px !important; padding-bottom: 24px !important; } }
/* ajustes finos da verificação: busca, abas de configurações/editar-usuário, moeda do extrato */
html:not(#tvu) body[data-tvpg="busca"] .header-wrap-clone { height: 0 !important; }
html:not(#tvu) body[data-tvpg="busca"] #content > .content-wrap .row > form:first-child { margin-top: 0 !important; }
html:not(#tvu) #content > .content-wrap > .container.col-md-12.pt-0 > .tab-content { margin-top: 0 !important; }
html:not(#tvu) body[data-tvpg="editar-usuario"] .tab-pane > .row:first-child > .col-md-12:first-child { margin-top: 0 !important; }
html[data-modo="claro"] .card-text img[src$="arquivos/imagens/icone.png"] { filter: brightness(0) !important; }

/* ---------- 17. Menu do perfil, ferramentas CS2, Steam Insight e Spinner (2026-09-28) --- */
:root {
	--tv-destaque-txt: color-mix(in srgb, var(--tv-destaque) 55%, #fff);
	--tv-destaque-borda: color-mix(in srgb, var(--tv-destaque) 45%, transparent);
	--tv-destaque-suave: color-mix(in srgb, var(--tv-destaque) 16%, transparent);
	--tv-hover: color-mix(in srgb, var(--tv-texto) 9%, var(--tv-superficie-2));
}
html[data-modo="claro"] { --tv-destaque-txt: var(--tv-destaque); }

/* menu do avatar: itens em pílula dentro da caixa, com respiro nas bordas */
html:not(#tvu):not(#tvu) #header .profile-image .dropdown-menu {
	padding: 6px !important; min-width: 214px; border-radius: 14px; overflow: hidden;
	background: var(--tv-superficie) !important; border: 1px solid var(--tv-borda) !important; box-shadow: var(--tv-sombra);
}
html:not(#tvu):not(#tvu) #header .profile-image .dropdown-item {
	display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; margin: 1px 0;
	font-size: .92rem; font-weight: 500; color: var(--tv-texto) !important; background: transparent;
	transition: background-color .15s, color .15s;
}
html:not(#tvu):not(#tvu) #header .profile-image .dropdown-item :is(i, img) { width: 18px; margin: 0 !important; text-align: center; color: var(--tv-texto-2); flex: 0 0 18px; }
html:not(#tvu):not(#tvu) #header .profile-image .dropdown-item:is(:hover, :focus-visible) { background: var(--tv-destaque-suave); color: var(--tv-destaque-txt) !important; }
html:not(#tvu):not(#tvu) #header .profile-image .dropdown-item:is(:hover, :focus-visible) i { color: inherit; }
html:not(#tvu):not(#tvu) #header .profile-image .dropdown-item[href="sair"] { margin-top: 5px; position: relative; }
html:not(#tvu):not(#tvu) #header .profile-image .dropdown-item[href="sair"]::before {
	content: ""; position: absolute; left: 6px; right: 6px; top: -4px; height: 1px; background: var(--tv-borda);
}
html:not(#tvu):not(#tvu) #header .profile-image .dropdown-item[href="sair"]:is(:hover, :focus-visible) { background: color-mix(in srgb, #dc3545 14%, transparent); color: #ef6b77 !important; }
html[data-modo="claro"]:not(#tvu):not(#tvu) #header .profile-image .dropdown-item[href="sair"]:is(:hover, :focus-visible) { color: #c0283a !important; }

/* Bind Generator e Crosshair Converter (React + Tailwind): cartões e botões do tema */
html:not(#tvu) :is(#bind_cs2-bind-generator-root, #cross_cs2-crosshair-root, [id^="cross_"][id$="-root"]) { font-family: inherit; }
html:not(#tvu) [id$="-root"] :is([class*="bind_rounded-2xl"], [class*="cross_rounded-2xl"]) { border-radius: var(--tv-raio-lg, 18px) !important; }
html:not(#tvu) [id$="-root"] :is([class*="bind_shadow-xl"], [class*="cross_shadow-xl"]) { box-shadow: var(--tv-sombra) !important; }
html:not(#tvu) [id$="-root"] :is(input, select, textarea) { color: var(--tv-texto); }
html:not(#tvu) [id$="-root"] :is(input, textarea)::placeholder { color: var(--tv-texto-2) !important; opacity: .8; }
html:not(#tvu) [id$="-root"] button:disabled { opacity: .55; cursor: not-allowed; }
html:not(#tvu) [id$="-root"] button[class*="bg-[var(--tv-destaque)]"]:not(:disabled):hover { filter: brightness(1.1); }

/* Steam Insight */
html:not(#tvu) #steam-viewer-app {
	font-family: inherit; color: var(--tv-texto);
	background: radial-gradient(520px 220px at 0% 0%, color-mix(in srgb, #1b6fa8 16%, transparent), transparent 70%), var(--tv-superficie);
	border: 1px solid var(--tv-borda); border-radius: var(--tv-raio-lg, 18px); box-shadow: var(--tv-sombra); padding: 22px;
}
html:not(#tvu):not(#tvu) #steam-viewer-app > .my1 { gap: 14px !important; margin-bottom: 18px !important; }
html:not(#tvu):not(#tvu) #steam-viewer-app > .my1 > i.fa-steam {
	width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
	font-size: 24px !important; color: #fff !important; background: linear-gradient(145deg, #1b6fa8, #0f3a5c); border-radius: 12px;
	box-shadow: 0 6px 18px rgba(27, 111, 168, .35);
}
html:not(#tvu):not(#tvu) #steam-viewer-app > .my1 h2 { color: var(--tv-texto) !important; font-size: 1.35rem !important; font-weight: 800 !important; letter-spacing: -.01em; margin: 0; }
html:not(#tvu):not(#tvu) #steam-viewer-app > .my1 h2 + div { color: var(--tv-texto-2) !important; font-size: .82rem !important; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-search-box { gap: 10px; margin-bottom: 0; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-input {
	background: var(--tv-superficie-2); border: 1px solid var(--tv-borda); color: var(--tv-texto); border-radius: 12px; min-height: 44px; padding: 10px 40px 10px 14px;
}
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-input:focus { border-color: #1b8fd6; box-shadow: 0 0 0 3px color-mix(in srgb, #1b8fd6 22%, transparent); }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-btn {
	min-height: 44px; border-radius: 12px; padding: 10px 18px; font-weight: 700; text-shadow: none;
	background: var(--tv-superficie-2); border: 1px solid var(--tv-borda); color: var(--tv-texto);
}
html:not(#tvu):not(#tvu) #steam-viewer-app #sv-btn-search { background: linear-gradient(145deg, #1b8fd6, #155f96); border-color: transparent; color: #fff; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-btn:hover { background: #1b8fd6; border-color: #1b8fd6; color: #fff; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-glass-panel { background: var(--tv-superficie-2); border: 1px solid var(--tv-borda); border-radius: 16px; box-shadow: none; backdrop-filter: none; margin-top: 18px; }
html:not(#tvu):not(#tvu) #steam-viewer-app :is(.sv-title) { color: var(--tv-texto); text-shadow: none; }
html:not(#tvu):not(#tvu) #steam-viewer-app :is(.sv-subtitle, .sv-loader) { color: var(--tv-texto-2); }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-loader { margin-top: 18px; }
html[data-modo="claro"] #steam-viewer-app .sv-white { color: var(--tv-texto); }
html[data-modo="claro"] #steam-viewer-app .sv-highlight { color: #0f6fae; }

/* Spinner: no computador o palco ocupa a tela toda (sem rodapé abaixo) */
@media (min-width: 768px) { html:not(#tvu) body[data-tvpg="spinner"] #footer { display: none !important; } }
/* Spinner: céu escuro sobre a paisagem, barra com nome e altura exata da tela */
html:not(#tvu) body[data-tvpg="spinner"] #slider.slider-element { min-height: calc(100vh - 62px) !important; height: calc(100vh - 62px); }
html:not(#tvu):not(#tvu) body[data-tvpg="spinner"] #slider .slider-inner {
	background-image:
		radial-gradient(800px 420px at 50% 40%, color-mix(in srgb, var(--tv-destaque) 22%, transparent), transparent 70%),
		linear-gradient(180deg, rgba(9, 9, 14, .78), rgba(9, 9, 14, .55) 45%, rgba(9, 9, 14, .85)),
		url('../../../../arquivos/imagens/spinner/05.jpg') !important;
	background-size: cover !important; background-position: 50% 60% !important;
}
body[data-tvpg="spinner"] .tvsp-topo {
	position: absolute; z-index: 5; top: 18px; left: 50%; transform: translateX(-50%); width: min(1140px, calc(100% - 32px));
	display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px;
	background: rgba(18, 18, 26, .55); border: 1px solid rgba(255, 255, 255, .10); backdrop-filter: blur(10px); color: #f4f4f7;
}
html:not(#tvu):not(#tvu) body[data-tvpg="spinner"] a.tvsp-voltar {
	width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px;
	background: rgba(255, 255, 255, .08); color: #fff !important; font-size: 18px; text-decoration: none;
}
html:not(#tvu):not(#tvu) body[data-tvpg="spinner"] a.tvsp-voltar:hover { background: var(--tv-destaque); color: #fff !important; }
body[data-tvpg="spinner"] .tvsp-titulo { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
body[data-tvpg="spinner"] .tvsp-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--tv-destaque) 55%, #fff); }
body[data-tvpg="spinner"] .tvsp-titulo strong { font-size: 1.2rem; color: #fff; text-transform: capitalize; }
body[data-tvpg="spinner"] .tvsp-dica { margin-left: auto; font-size: .85rem; color: rgba(255, 255, 255, .7); white-space: nowrap; }
body[data-tvpg="spinner"] .everything { margin-top: 30px !important; }
body[data-tvpg="spinner"] .spinner img { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55)); }
html:not(#tvu):not(#tvu) body[data-tvpg="spinner"] .floating-btn { background: var(--tv-superficie); color: var(--tv-texto); border: 1px solid var(--tv-borda); }
html:not(#tvu):not(#tvu) body[data-tvpg="spinner"] .floating-btn-wrap { opacity: 1; }
@media (max-width: 767.98px) {
	html:not(#tvu) body[data-tvpg="spinner"] #slider.slider-element { min-height: calc(100vh - 60px - 58px) !important; height: calc(100vh - 60px - 58px); }
	body[data-tvpg="spinner"] .tvsp-topo { top: 12px; }
	body[data-tvpg="spinner"] .tvsp-dica { display: none; }
}

/* ---------- 18. Steam Insight — painel completo no tema (2026-09-28) ----------------
   Antes: o painel de perfil e o de CS2 usavam cinzas/pretos fixos e cores inline; no modo
   claro os números ficavam escuros sobre escuro. Agora tudo sai dos tokens, nos dois modos. */
#steam-viewer-app {
	--sv-azul: #66c0f4; --sv-laranja: #e3a340; --sv-verde: #9cc84a; --sv-verm: #e8645f;
}
html[data-modo="claro"] #steam-viewer-app {
	--sv-azul: #0f6fae; --sv-laranja: #b45f06; --sv-verde: #3f7d10; --sv-verm: #c0392b;
}
html:not(#tvu):not(#tvu) #steam-viewer-app :is(.sv-highlight, .sv-map-val, .sv-game-hours) { color: var(--sv-azul) !important; }
html:not(#tvu):not(#tvu) #steam-viewer-app :is(.sv-orange, .sv-weapon-val) { color: var(--sv-laranja) !important; }
html:not(#tvu):not(#tvu) #steam-viewer-app :is(.sv-green, .sv-ok) { color: var(--sv-verde) !important; font-weight: 700; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-red { color: var(--sv-verm) !important; }
html:not(#tvu):not(#tvu) #steam-viewer-app :is(.sv-white, .sv-map-name, .sv-weapon-name, .sv-list-val, .sv-stat-val, .sv-game-name, .sv-title) { color: var(--tv-texto) !important; }
html:not(#tvu):not(#tvu) #steam-viewer-app :is(.sv-muted, .sv-vazio, .sv-weapon-pct, .sv-stat-lbl, .sv-list-lbl, .sv-subtitle) { color: var(--tv-texto-2) !important; }
#steam-viewer-app .sv-weapon-pct { font-size: 10px; font-weight: 500; }
#steam-viewer-app .sv-vazio { font-size: 12px; }
#steam-viewer-app .sv-vazio-centro { width: 100%; text-align: center; padding: 20px; }
#steam-viewer-app .sv-game-hours { font-size: 11px; font-weight: 600; }

/* status e selo de nível */
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-status-text.online { color: var(--sv-azul); }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-status-text.ingame { color: var(--sv-verde); }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-status-text.offline { color: var(--tv-texto-2); }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-level-badge { background: var(--tv-superficie); color: var(--tv-texto); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-avatar-holder { border-radius: 14px; padding: 3px; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-avatar-img { border-radius: 11px; padding: 0; }
html:not(#tvu):not(#tvu) #steam-viewer-app a#sv-link { min-height: 40px; }

/* caixas de números do perfil */
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-grid-4 { gap: 10px; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-stat-box {
	background: var(--tv-superficie) !important; border: 1px solid var(--tv-borda); border-radius: 12px; padding: 12px 10px;
}
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-stat-lbl { font-size: 10px; font-weight: 700; letter-spacing: .06em; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-stat-val { font-size: 16px; margin-top: 2px; }

/* painel CS2: mesma família de cartões, com a assinatura laranja do CS */
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-glass-panel:has(> .sv-cs2-header) {
	background: radial-gradient(520px 200px at 100% 0%, color-mix(in srgb, var(--sv-laranja) 12%, transparent), transparent 70%), var(--tv-superficie-2) !important;
	border: 1px solid color-mix(in srgb, var(--sv-laranja) 35%, var(--tv-borda)) !important; padding: 20px;
}
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-cs2-header {
	background: color-mix(in srgb, var(--sv-laranja) 8%, transparent) !important; border-bottom: 1px solid color-mix(in srgb, var(--sv-laranja) 25%, var(--tv-borda)) !important;
	margin: -20px -20px 20px -20px; padding: 14px 20px; border-radius: 16px 16px 0 0;
}
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-cs2-header .sv-flex + div > div:first-child { color: var(--tv-texto-2) !important; font-weight: 700; letter-spacing: .06em; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-cs2-header .sv-flex + div > div:last-child { font-size: 1.1rem; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-cs-card {
	background: var(--tv-superficie) !important; border: 1px solid var(--tv-borda); border-top-width: 3px; border-radius: 12px; padding: 16px 12px;
}
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-cs-card:hover { background: var(--tv-superficie) !important; box-shadow: var(--tv-sombra); }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-cs-val { font-size: 24px; font-weight: 800; }
html:not(#tvu):not(#tvu) #steam-viewer-app #sv-cs-private { color: var(--tv-texto-2) !important; }

/* listas e colunas */
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-detail-col h4 {
	color: var(--tv-texto-2) !important; border-bottom: 1px solid var(--tv-borda) !important; font-weight: 700; letter-spacing: .06em;
}
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-list-item { border-bottom: 1px solid color-mix(in srgb, var(--tv-borda) 70%, transparent) !important; padding: 6px 0; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-list-item:last-child { border-bottom: 0 !important; }
#steam-viewer-app .sv-map-row {
	display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px;
	border-bottom: 1px solid color-mix(in srgb, var(--tv-borda) 70%, transparent);
}
#steam-viewer-app .sv-map-row:last-child { border-bottom: 0; }
#steam-viewer-app .sv-map-val { font-weight: 800; }

/* arsenal */
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-weapon-item { background: var(--tv-superficie) !important; border: 1px solid var(--tv-borda) !important; border-radius: 10px; padding: 9px 12px; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-weapon-track { background: var(--tv-superficie-2) !important; height: 6px; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-weapon-fill { background: linear-gradient(90deg, var(--sv-laranja), color-mix(in srgb, var(--sv-laranja) 60%, #fff)) !important; }

/* atividade recente */
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-glass-panel > h3 { color: var(--tv-texto) !important; border-bottom: 1px solid var(--tv-borda) !important; font-weight: 700; padding-bottom: 8px; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-game-card { background: var(--tv-superficie) !important; border: 1px solid var(--tv-borda) !important; border-radius: 12px; }
html:not(#tvu):not(#tvu) #steam-viewer-app .sv-game-img { opacity: 1; }
html[data-modo="claro"] #steam-viewer-app #sv-error { color: #b42318 !important; }

/* ---------- 19. Mascote alienígena e a vaquinha abduzida (2026-09-28) ----------------
   O disquinho que flutuava no rodapé deu lugar ao mascote (mascote.js). */
#copyrights::after { content: none !important; display: none !important; }
.tv-mascote {
	position: fixed; left: 14px; bottom: 14px; z-index: 1001; /* acima do rodapé (999), abaixo dos modais */ display: flex; flex-direction: column; align-items: flex-start;
	pointer-events: none; animation: tv-mascote-entra .5s ease-out both;
}
.tv-mascote > * { pointer-events: auto; }
html:not(#tvu) .tv-mascote-et {
	appearance: none; background: none !important; border: 0 !important; padding: 0; margin: 0; min-height: 0 !important;
	cursor: pointer; line-height: 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
	animation: tv-mascote-respira 2.8s ease-in-out infinite;
}
.tv-mascote-et img { display: block; image-rendering: pixelated; width: auto; height: auto; max-width: none !important; max-height: none !important; }   /* [2026-10-03] sem max-width: o quadro largo do taco (31 px) não encolhe o boneco */
.tv-mascote-et:focus-visible { outline: 2px solid var(--tv-destaque); outline-offset: 4px; border-radius: 12px; }
.tv-mascote-calmo .tv-mascote-et { animation: none; }
.tv-mascote-balao {
	position: absolute; left: 6px; bottom: calc(100% + 8px); width: max-content; max-width: 220px;
	padding: 8px 12px; border-radius: 14px 14px 14px 4px; font-size: 13px; font-weight: 600; line-height: 1.35;
	background: var(--tv-superficie); color: var(--tv-texto); border: 1px solid var(--tv-borda); box-shadow: var(--tv-sombra);
	opacity: 0; transform: translateY(6px) scale(.96); transform-origin: left bottom; transition: opacity .2s, transform .2s; pointer-events: none;
}
.tv-mascote-falando .tv-mascote-balao { opacity: 1; transform: none; }
html:not(#tvu) .tv-mascote-fechar {
	position: absolute; top: -6px; right: -10px; width: 20px; height: 20px; min-height: 0 !important; padding: 0; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
	background: var(--tv-superficie); color: var(--tv-texto-2); border: 1px solid var(--tv-borda); cursor: pointer;
	opacity: 0; transition: opacity .15s;
}
.tv-mascote:hover .tv-mascote-fechar, .tv-mascote:focus-within .tv-mascote-fechar { opacity: 1; }
html:not(#tvu) .tv-mascote-fechar:hover { color: #fff; background: var(--tv-destaque); border-color: var(--tv-destaque); }
.tv-mascote-coracao { position: absolute; bottom: 40%; color: #ff6fa8; font-size: 16px; pointer-events: none; text-shadow: 0 2px 4px rgba(0, 0, 0, .3); }
.tv-mascote-saindo { transition: opacity .35s, transform .35s; opacity: 0; transform: translateY(20px); }
@keyframes tv-mascote-respira { 50% { transform: translateY(-3px); } }
@keyframes tv-mascote-entra { from { opacity: 0; transform: translateY(24px); } }
@media (max-width: 991.98px) { .tv-mascote { bottom: 70px; left: 10px; } }
@media (min-width: 992px) { body:has(#footer) .tv-mascote { bottom: 16px; } }

/* [2026-09-30 k] "espiando": nos jogos de tela cheia (VacBird, Alaska) e durante a partida do
   Noctacilo o mascote fica escondido na borda e só desliza para dentro quando vai comentar. */
.tv-mascote.tv-mascote-espia { animation: none; transform: translateX(calc(-100% - 24px)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.tv-mascote.tv-mascote-espia.tv-mascote-visivel { transform: none; }
.tv-mascote-espia .tv-mascote-fechar { display: none; }
body[data-tvpg="portal-noctacilo"] .tv-mascote.tv-mascote-espia { bottom: 96px; }
@media (prefers-reduced-motion: reduce) { .tv-mascote.tv-mascote-espia { transition: none; } }

.tv-abducao { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden; }
.tv-abducao img { position: absolute; image-rendering: pixelated; max-width: none; }
.tv-abducao-vaca { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
.tv-abducao-nave { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); z-index: 2; }
.tv-abducao-raio {
	position: absolute; opacity: 0; transition: opacity .3s; z-index: 1;
	background: linear-gradient(180deg, rgba(255, 216, 74, .65), rgba(255, 216, 74, .08));
	clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}
.tv-abducao-raio-on { opacity: 1; animation: tv-raio-pulsa .5s ease-in-out infinite alternate; }
@keyframes tv-raio-pulsa { to { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .tv-mascote, .tv-mascote-et { animation: none !important; } }

/* ---------- 20. Calculadora de juros compostos e Finanças (2026-09-29) ------------- */
/* calculadora: cores do tema via tailwind.config (var(--tv-*)); aqui só o acabamento */
.tvcj-destaque {
	background: linear-gradient(140deg, var(--tv-destaque), color-mix(in srgb, var(--tv-destaque) 62%, #1b1030)) !important;
	border: 1px solid color-mix(in srgb, var(--tv-destaque) 70%, #fff 0%) !important; color: #fff;
	box-shadow: 0 12px 28px color-mix(in srgb, var(--tv-destaque) 30%, transparent) !important;
}
.tvcj-destaque .tvcj-rotulo { color: rgba(255, 255, 255, .82); }
.tvcj-destaque .tvcj-valor { color: #fff; }
html:not(#tvu) :is(#resFinalTotal, #resFinalInvestido, #resFinalJuros) { font-size: clamp(1.15rem, 1.6vw, 1.6rem) !important; line-height: 1.2; white-space: nowrap; }
html:not(#tvu):not(#tvu) .tvcj-form { padding: 26px !important; }
html:not(#tvu) .tvcj-form input, html:not(#tvu) .tvcj-form select { min-height: 50px; }
@media (max-width: 639.98px) { html:not(#tvu) .tvcj-grafico { height: 320px !important; } }

/* finanças: o painel não ocupa mais uma tela inteira vazia; estado vazio mais simpático */
@media (min-width: 768px) { html:not(#tvu):not(#tvu) #fin-app { min-height: calc(100vh - 62px - 32px - 150px) !important; } }
html:not(#tvu) #fin-app .empty-state { padding: 56px 20px 48px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
html:not(#tvu) #fin-app .empty-state .empty-ico {
	width: 64px; height: 64px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px;
	background: var(--tv-destaque-suave); color: var(--tv-destaque-txt); border: 1px solid var(--tv-destaque-borda);
}
html:not(#tvu) #fin-app .empty-state .empty-ico :is(i, svg) { width: 28px !important; height: 28px !important; margin: 0 !important; opacity: 1 !important; }
html:not(#tvu):not(#tvu) #fin-app .empty-state h3 { color: var(--tv-texto) !important; font-size: 1.15rem !important; font-weight: 700; margin: 0; }
html:not(#tvu) #fin-app .empty-state p { color: var(--tv-texto-2); font-size: .92rem; margin: 0; max-width: 340px; }
/* finanças no celular: as 4 abas cabem na largura (antes rolavam para fora da tela) */
@media (max-width: 767.98px) {
	html:not(#tvu):not(#tvu) #fin-app .nav-segmented { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; overflow: visible; }
	html:not(#tvu):not(#tvu) #fin-app .nav-segmented .nav-btn {
		flex-direction: column !important; justify-content: center; gap: 3px; padding: 8px 4px !important; min-width: 0; font-size: .72rem !important; border-radius: 12px;
	}
	html:not(#tvu):not(#tvu) #fin-app .nav-segmented .nav-btn :is(i, svg) { margin: 0 !important; width: 16px !important; height: 16px !important; }
}

/* ---------- 21. Earth — mapa em tela de app, controles no tema (2026-09-29) ------------
   Antes: posições "empurradas" (top: 55px / top: -85px), controles sempre escuros com
   emojis. Agora: palco com cantos arredondados que ocupa a tela, busca e controles em
   vidro que seguem o modo claro/escuro. Só aparência — o Cesium e as ações são os mesmos. */
@media (min-width: 768px) { html:not(#tvu) body[data-tvpg="earth"] #footer { display: none !important; } }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] #content > .content-wrap { padding-top: 20px !important; padding-bottom: 20px !important; margin-bottom: 0 !important; }
html:not(#tvu) body[data-tvpg="earth"] .gx-5 { margin-bottom: 0 !important; }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .col-md-12:has(> #cesiumContainer) {
	position: relative; overflow: hidden; padding: 0 !important; margin: 0 calc(var(--bs-gutter-x) * .5);
	width: calc(100% - var(--bs-gutter-x)); height: calc(100vh - 62px - 40px); min-height: 460px;
	border-radius: 22px; border: 1px solid var(--tv-borda); box-shadow: var(--tv-sombra); background: #05060a;
	isolation: isolate;
}
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] #cesiumContainer {
	position: absolute !important; inset: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
	max-width: none !important; margin: 0 !important;
}
/* vidro dos controles */
body[data-tvpg="earth"] {
	--ea-vidro: color-mix(in srgb, var(--tv-superficie) 82%, transparent);
	--ea-vidro-2: color-mix(in srgb, var(--tv-superficie-2) 90%, transparent);
}
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .search-container {
	position: absolute !important; top: 16px !important; left: 16px !important; z-index: 5;
	width: min(440px, calc(100% - 100px)) !important; max-width: none; gap: 10px;
}
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .search-box {
	height: 50px; padding: 0 6px 0 16px; border-radius: 16px; gap: 10px;
	background: var(--ea-vidro); border: 1px solid var(--tv-borda); box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .search-icon { color: var(--tv-texto-2); font-size: 16px; margin: 0; }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .search-input { color: var(--tv-texto); font-family: inherit; font-size: 15px; font-weight: 500; }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .search-input::placeholder { color: var(--tv-texto-2); }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .search-action {
	background: var(--tv-destaque); color: #fff; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 11px;
	min-width: 48px; text-align: center; transition: filter .15s;
}
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .search-action:hover { filter: brightness(1.12); }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .chip {
	background: var(--ea-vidro); border: 1px solid var(--tv-borda); color: var(--tv-texto); font-family: inherit; font-weight: 600;
	font-size: 13px; padding: 7px 16px; border-radius: 999px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	transition: background-color .15s, color .15s, border-color .15s;
}
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .chip:hover { border-color: var(--tv-destaque-borda); }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .chip.active { background: var(--tv-destaque); border-color: var(--tv-destaque); color: #fff; }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .nav-controls { position: absolute; right: 16px !important; bottom: 16px !important; top: auto; gap: 10px; z-index: 5; }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .nav-group {
	background: var(--ea-vidro); border: 1px solid var(--tv-borda); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .nav-btn {
	width: 44px; height: 44px; min-height: 0; color: var(--tv-texto); border-bottom: 1px solid var(--tv-borda); font-family: inherit;
	font-size: 17px; font-weight: 800; transition: background-color .15s, color .15s;
}
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .nav-btn:last-child { border-bottom: 0; }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .nav-btn:hover { background: var(--tv-destaque-suave); color: var(--tv-destaque-txt); }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .nav-btn :is(i) { color: inherit; }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] #btn3D { font-size: 13px; letter-spacing: .02em; }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] #compass { color: #e5484d !important; font-size: 15px; font-weight: 900; }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .nav-btn.active-3d { background: var(--tv-destaque); color: #fff; }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .nav-btn.active-ruler { background: #f5b301; color: #1b1400; }
/* carregando */
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] #loadingOverlay {
	position: absolute; inset: 0; z-index: 10; gap: 14px; font-weight: 600; color: var(--tv-texto-2);
	background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tv-destaque) 22%, transparent), transparent 55%), var(--tv-fundo);
}
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] #loadingOverlay > div:last-child { font-family: inherit !important; }
html:not(#tvu):not(#tvu) body[data-tvpg="earth"] #loadingOverlay .spinner { border-color: var(--tv-borda); border-top-color: var(--tv-destaque); margin: 0; }
/* celular: mapa de ponta a ponta, controles compactos acima do menu */
@media (max-width: 767.98px) {
	html:not(#tvu):not(#tvu) body[data-tvpg="earth"] #content > .content-wrap { padding-top: 12px !important; padding-bottom: 12px !important; }
	html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .col-md-12:has(> #cesiumContainer) {
		height: calc(100svh - 60px - 58px - 24px); min-height: 380px; border-radius: 18px;
	}
	html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .search-container { top: 12px !important; left: 12px !important; width: calc(100% - 24px) !important; }
	html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .nav-controls { right: 12px !important; bottom: 12px !important; gap: 8px; }
	html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .nav-btn { width: 40px; height: 40px; }
}
@media (max-width: 767.98px) {
	/* o botão do painel lateral fica à direita, embaixo: no Earth os controles vão para a esquerda */
	html:not(#tvu):not(#tvu) body[data-tvpg="earth"] .nav-controls { right: auto !important; left: 12px !important; }
}
html[data-modo="claro"] body[data-tvpg="earth"] { --ea-vidro: color-mix(in srgb, var(--tv-superficie) 95%, transparent); }

/* ============================================================================
   20. [2026-09-30 q] Vacilinho — arrastar, quedas, nave, paraquedas (mascote-vacilinho.js)
   Tudo por transform (GPU); nenhum laço rodando quando ele está parado.
   ============================================================================ */
html:not(#tvu) .tv-mascote-et.tv-vac-pega { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.tv-vac-arrastando, html.tv-vac-arrastando * { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; }
.tv-mascote.tv-vac-ativo { animation: none; will-change: transform; }
html:not(#tvu) .tv-vac-ativo .tv-mascote-et { animation: none; }
.tv-vac-ativo .tv-mascote-fechar { display: none; }
.tv-vac-ativo .tv-mascote-et img { will-change: transform; }
.tv-mascote-et { position: relative; }
/* sombra no chão: fica atrás dele (z-index menor) e encolhe com a altura */
.tv-vac-sombra { position: fixed; left: 0; top: 0; z-index: 1000; height: 7px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); opacity: 0; pointer-events: none; will-change: transform, width, opacity; }
/* camada de efeitos: poeira, estrelinhas, nave e raio (na frente dele, sem receber clique) */
.tv-vac-fx { position: fixed; inset: 0; z-index: 1002; pointer-events: none; overflow: hidden; }
.tv-vac-poeira { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: rgba(214, 206, 190, .85); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); will-change: transform, opacity; }
.tv-vac-poeira-forte { width: 14px; height: 14px; left: -7px; top: -7px; background: rgba(226, 214, 190, .9); }
html[data-modo="claro"] .tv-vac-poeira { background: rgba(150, 138, 118, .75); }
.tv-vac-estrela { position: absolute; left: 0; top: 0; image-rendering: pixelated; will-change: transform; }
.tv-vac-nave { position: absolute; left: 0; top: 0; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(127, 214, 242, .55)); will-change: transform; }
.tv-vac-raio { position: absolute; left: 0; top: 0; height: 0; opacity: 0; transition: opacity .2s ease; will-change: transform, height;
	background: linear-gradient(180deg, rgba(255, 243, 166, .75), rgba(127, 214, 242, .28) 70%, rgba(127, 214, 242, 0));
	clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); animation: tv-vac-raio 0.5s linear infinite; }
.tv-vac-raio-on { opacity: 1; }
@keyframes tv-vac-raio { 50% { filter: brightness(1.35); } }
/* paraquedas preso na cabeça (dentro do botão, acompanha o balanço) */
.tv-vac-paraq { position: absolute; left: 50%; bottom: calc(100% - 4px); transform: translateX(-50%); image-rendering: pixelated; pointer-events: none; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { .tv-vac-raio { animation: none; } }
/* enquanto anima, o Vacilinho (e o balão dele) fica na frente da nave e da poeira */
.tv-mascote.tv-vac-ativo { z-index: 1003; }

/* ============================================================================
   21. [2026-10-03] Vacilinho: taco de beisebol, sono e a tripulação do disco
   (mascote-vacilinho.js + mascote-tripulacao.js). Posição pelo transform inline;
   animação nos pseudo-elementos (não briga com o transform do JS).
   ============================================================================ */
.tv-vac-varre, .tv-vac-pow { position: absolute; left: 0; top: 0; pointer-events: none; }
.tv-vac-varre::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border-top: 4px solid rgba(255, 255, 255, .9); border-right: 3px solid rgba(255, 255, 255, .45);
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .55)); transform-origin: 30% 60%; animation: tv-vac-varre .32s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes tv-vac-varre { from { transform: rotate(-75deg) scale(.8); opacity: .95; } to { transform: rotate(35deg) scale(1.05); opacity: 0; } }
.tv-vac-pow::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #fff 0 22%, #ffd84a 23% 48%, #ff8a2a 49% 62%, transparent 63%);
	clip-path: polygon(50% 0, 61% 32%, 96% 22%, 70% 50%, 96% 78%, 61% 68%, 50% 100%, 39% 68%, 4% 78%, 30% 50%, 4% 22%, 39% 32%); animation: tv-vac-pow .46s ease-out forwards; }
.tv-vac-pow::after { content: "POW!"; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font: 900 13px/1 system-ui, sans-serif; color: #ff4d6d; letter-spacing: .5px;
	text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0 2px 4px rgba(0, 0, 0, .35); animation: tv-vac-pow-txt .46s ease-out forwards; }
@keyframes tv-vac-pow { from { transform: scale(.25) rotate(0); opacity: 1; } 60% { opacity: 1; } to { transform: scale(1.15) rotate(20deg); opacity: 0; } }
@keyframes tv-vac-pow-txt { from { opacity: 0; margin-top: 6px; } 25% { opacity: 1; margin-top: 0; } 75% { opacity: 1; } to { opacity: 0; margin-top: -8px; } }
/* dormindo (sem laço de JS): Zz subindo e respiração lenta */
.tv-vac-dorme .tv-mascote-et::before, .tv-vac-dorme .tv-mascote-et::after { content: "z"; position: absolute; right: 2px; top: 0; font: 800 12px/1 system-ui, sans-serif; color: var(--tv-texto-2, #9aa); opacity: 0; pointer-events: none; animation: tv-vac-zz 2.6s ease-out infinite; }
.tv-vac-dorme .tv-mascote-et::after { content: "Z"; font-size: 15px; animation-delay: 1.3s; }
.tv-vac-dorme .tv-mascote-et img { transform-origin: 50% 100%; animation: tv-vac-ronca 2.6s ease-in-out infinite; }
@keyframes tv-vac-zz { from { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } to { transform: translate(14px, -26px); opacity: 0; } }
@keyframes tv-vac-ronca { 50% { transform: scale(1.03, .97); } }
/* tripulação: nave (botão), balão e bola */
.tv-trip { position: fixed; left: 0; top: 0; z-index: 1002; pointer-events: none; will-change: transform; }
html:not(#tvu) .tv-trip-nave { appearance: none; display: block; background: none !important; border: 0 !important; padding: 0; margin: 0; min-height: 0 !important; line-height: 0; cursor: pointer; pointer-events: auto;
	filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tv-trip-cor, #7fd6f2) 55%, transparent)); }
.tv-trip-nave img { display: block; image-rendering: pixelated; max-width: none; }
.tv-trip-nave:focus-visible { outline: 2px solid var(--tv-destaque); outline-offset: 4px; border-radius: 12px; }
.tv-trip-balao { position: absolute; left: 50%; bottom: calc(100% + 6px); width: max-content; max-width: 230px; padding: 8px 12px; border-radius: 14px;
	font-size: 13px; font-weight: 600; line-height: 1.35; background: var(--tv-superficie); color: var(--tv-texto); border: 1px solid var(--tv-borda);
	border-bottom: 3px solid var(--tv-trip-cor, var(--tv-borda)); box-shadow: var(--tv-sombra); opacity: 0; transform: translate(-50%, 6px) scale(.96); transform-origin: 50% 100%;
	transition: opacity .2s, transform .2s; pointer-events: none; }
.tv-trip-balao.tv-trip-on { opacity: 1; transform: translate(-50%, 0); }
.tv-trip-nome { color: var(--tv-trip-cor); font-weight: 800; }
html[data-modo="claro"] .tv-trip-nome { color: color-mix(in srgb, var(--tv-trip-cor) 70%, #000); }
.tv-trip-ficha { width: 230px; font-weight: 500; }
.tv-trip-ficha-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tv-trip-ficha-topo img { image-rendering: pixelated; flex: 0 0 auto; }
.tv-trip-ficha-topo small { display: block; font-size: 11.5px; color: var(--tv-texto-2); }
.tv-trip-ficha p { margin: 0 0 4px; font-size: 12.5px; }
.tv-trip-ficha p:last-child { margin: 0; }
.tv-trip-jeito { color: var(--tv-texto-2); font-style: italic; }
.tv-trip-bola { position: fixed; left: 0; top: 0; z-index: 1002; image-rendering: pixelated; pointer-events: none; will-change: transform; max-width: none; }
@media (max-width: 575.98px) { .tv-trip-balao { max-width: 190px; font-size: 12.5px; } .tv-trip-ficha { width: 200px; } }