/**
 * Woo Members — pele "Mural Monkey".
 *
 * Carregada só quando o tema está selecionado em Configurações → Aparência.
 * Tudo aqui é escopado em [data-ms-skin="mural"]: com a pele desligada, este
 * arquivo nem chega ao navegador, e se chegar não pinta nada.
 *
 * A REGRA QUE GUIOU O ARQUIVO
 * A colagem mora no entorno — cabeçalho, barra lateral, cartaz, adesivos,
 * coluna de estatísticas. A GRADE DE PACOTES CONTINUA RETA. São centenas de
 * itens abertos todo dia para trabalhar: card inclinado atrapalha comparar
 * tamanhos na vertical e desalinha os botões dentro da fileira.
 *
 * As cores NÃO estão aqui. Elas vêm das configurações de sempre, pelas
 * variáveis --ms-*. Este arquivo cuida de textura, forma e tipografia, e
 * deriva os próprios acentos das variáveis do admin — troque a cor principal
 * no painel e a fita, o adesivo e o traço de pincel acompanham.
 */

/*
 * AS QUATRO CORES DA COLAGEM SÃO CONFIGURÁVEIS, UMA A UMA.
 *
 * Antes todas saíam de --ms-primary. Era prático e estava errado: mudar a cor
 * principal repintava de uma vez o brilho do mural, a fita, a sombra dura do
 * item ativo no menu lateral, o traço à mão e os números das estatísticas.
 * Não havia como ter dois botões parecidos com cores diferentes.
 *
 * Cada uma agora tem campo próprio em Configurações → Aparência, com a cor
 * principal só como reserva para quem nunca mexeu nesses campos.
 */
[data-ms-skin="mural"] {
	/* Brilho do fundo do mural. */
	--msk-glow: var(--ms-skin-glow, var(--ms-primary, #F23DB3));

	/* Sombra dura de "adesivo colado": menu ativo, abas, paginação, botão. */
	--msk-sticker: var(--ms-skin-sticker, var(--ms-primary, #F23DB3));

	/* Traço à mão: títulos de seção do menu e números grandes. */
	--msk-marker: var(--ms-skin-marker, var(--ms-primary, #F23DB3));

	/* Fita adesiva. Translúcida de propósito: fita opaca vira etiqueta. */
	--msk-tape-color: var(--ms-skin-tape, #FFECBE);
	--msk-tape: color-mix(in srgb, var(--msk-tape-color) 82%, transparent);
	--msk-tape-2: color-mix(in srgb, var(--msk-sticker) 62%, transparent);

	--msk-ink: #141014;
	--msk-offset: 3px 3px 0 var(--msk-sticker);

	--msk-display: 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif;
	--msk-hand: 'Permanent Marker', 'Comic Sans MS', cursive;

	/* Grão de papel (claro): ruído escuro sobre o fundo, por opacidade. */
	--msk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .25 0 0 0 0 .3 1.6 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--msk-grain-op: .42;

	/*
	 * Fundo do mural claro — as mesmas cinco camadas do HTML de referência.
	 *
	 * As duas quentes (amarelo e laranja) são fixas: elas são a luz do papel.
	 * As duas frias saem do "brilho do mural", e a faixa de baixo termina
	 * numa mistura do brilho com a cor de fundo, que é o que dá o rosado do
	 * rodapé sem precisar de mais um campo no painel.
	 *
	 * A posição vai DENTRO do gradiente (`at x y`), nunca em background-position:
	 * assim a lista continua sendo só imagens e cabe em background-image.
	 */
	--msk-ground:
		radial-gradient(48% 42% at 100% 4%, rgba(255, 200, 52, .85) 0%, transparent 70%),
		radial-gradient(52% 44% at 0% 100%, color-mix(in srgb, var(--msk-glow) 55%, transparent) 0%, transparent 72%),
		radial-gradient(40% 40% at 100% 100%, color-mix(in srgb, var(--msk-glow) 32%, transparent) 0%, transparent 70%),
		radial-gradient(42% 40% at 0% 6%, rgba(255, 170, 110, .42) 0%, transparent 70%),
		linear-gradient(180deg, #FFF0C4 0%, var(--ms-background, #FFEBC6) 55%, color-mix(in srgb, var(--msk-glow) 16%, var(--ms-background, #FFEBC6)) 100%);
}

/*
 * Tema escuro: só o que a paleta de cor não expressa.
 *
 * A sombra dura NÃO é mais calculada aqui. Ela vem de dark_skin_sticker, que
 * nasce amarela — como no HTML de referência, onde o item ativo é rosa e a
 * sombra amarela. Calcular deixava o campo do admin sem efeito no escuro.
 */
[data-ms-skin="mural"][data-ms-theme="dark"] {
	--msk-ink: #0B070A;
	--msk-tape: color-mix(in srgb, var(--msk-tape-color) 72%, transparent);
	--msk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .95 1.2 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--msk-grain-op: .40;
	/*
	 * Fundo do mural escuro. No HTML de referência são dois halos grandes que
	 * sangram para fora da tela — um rosa em cima à esquerda, um âmbar embaixo
	 * à direita — sobre um preto que clareia de leve para baixo.
	 */
	--msk-ground:
		radial-gradient(350px 350px at -220px 390px, color-mix(in srgb, var(--msk-glow) 22%, transparent) 0%, color-mix(in srgb, var(--msk-glow) 6%, transparent) 55%, transparent 100%),
		radial-gradient(310px 310px at calc(100% - 150px) calc(100% - 70px), rgba(255, 196, 64, .14) 0%, rgba(255, 196, 64, .04) 55%, transparent 100%),
		linear-gradient(180deg, var(--ms-background, #050505) 0%, #0A0509 100%);
}

/* =======================================================================
   Fundo do mural
   ======================================================================= */

/*
 * O mural fica atrás por CAMADA, não por posicionamento.
 *
 * A tentativa anterior empurrava o conteúdo para cima da textura dando
 * `position: relative; z-index: 1` à barra lateral e à coluna principal.
 * Funcionou no desktop e quebrou o celular: abaixo de 980px o app.css põe a
 * barra lateral em `position: fixed` para escondê-la fora da tela, e a regra
 * da pele — mais específica — desfazia isso. A barra voltava para o fluxo,
 * ocupava a largura dela e espremia o catálogo na metade direita da tela.
 *
 * Agora nada aqui mexe em `position` de elemento do layout. Os brilhos vão
 * para o fundo do body, e o grão para um pseudo-elemento em `z-index: -1`,
 * que por definição pinta atrás de todo o conteúdo. Para o grão não ficar
 * encoberto, .ms-app deixa de pintar a própria cor de fundo — quem pinta
 * passa a ser o body, que já lê a mesma variável.
 */
[data-ms-skin="mural"] .ms-body {
	background-image: var(--msk-ground);
	background-attachment: fixed;
}

[data-ms-skin="mural"] .ms-app {
	background-color: transparent;
}

/*
 * `position: fixed` mantém a textura parada enquanto a página rola, em vez de
 * repintar uma imagem enorme a cada quadro. E nada de `mix-blend-mode`:
 * mesclar uma camada do tamanho da janela obriga o navegador a recompor tudo
 * embaixo o tempo todo — opacidade simples chega ao mesmo visual por uma
 * fração do custo.
 */
[data-ms-skin="mural"] .ms-app::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--msk-grain);
	opacity: var(--msk-grain-op);
}

/* =======================================================================
   Tipografia de cartaz
   ======================================================================= */

[data-ms-skin="mural"] .ms-page-title h1,
[data-ms-skin="mural"] .ms-section-title,
[data-ms-skin="mural"] .ms-banner h2,
[data-ms-skin="mural"] .ms-auth-card h1 {
	font-family: var(--msk-display);
	font-weight: 400;
	font-style: normal;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-wrap: balance;
}

[data-ms-skin="mural"] .ms-page-title h1 {
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1;
}

[data-ms-skin="mural"] .ms-section-title {
	font-size: 20px;
	line-height: 1.1;
}

/*
 * Contido de propósito: a altura do banner é configurável no admin
 * (--ms-banner-height), e um título de cartaz solto estoura a caixa em quem
 * deixou a altura baixa.
 */
[data-ms-skin="mural"] .ms-banner h2 {
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1;
	margin-bottom: 4px;
}

/* Números grandes também ganham a fonte de cartaz. */
[data-ms-skin="mural"] .ms-stat-value,
[data-ms-skin="mural"] .ms-stat strong,
[data-ms-skin="mural"] .ms-account-stat b,
[data-ms-skin="mural"] .ms-order-stats b {
	font-family: var(--msk-display);
	font-weight: 400;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
}

/* =======================================================================
   Barra lateral: tira de papel colada
   ======================================================================= */

[data-ms-skin="mural"] .ms-brand-mark {
	box-shadow: 3px 3px 0 var(--msk-tape-color);
	transform: rotate(-3deg);
}

[data-ms-skin="mural"] .ms-brand-text strong {
	font-family: var(--msk-display);
	font-weight: 400;
	letter-spacing: .03em;
	text-transform: uppercase;
}

[data-ms-skin="mural"] .ms-nav-title {
	font-family: var(--msk-hand);
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: none;
	color: var(--msk-marker);
}

[data-ms-skin="mural"] .ms-nav-item {
	border-radius: 9px;
}

[data-ms-skin="mural"] .ms-nav-item.is-active {
	box-shadow: var(--msk-offset);
}

/* =======================================================================
   Cabeçalho
   ======================================================================= */

[data-ms-skin="mural"] .ms-header {
	border-bottom: 1px solid var(--ms-border);
}

[data-ms-skin="mural"] .ms-badge-count {
	box-shadow: 0 0 0 2px var(--ms-card);
}

/* =======================================================================
   Banner: cartaz com fita adesiva
   ======================================================================= */

[data-ms-skin="mural"] .ms-banner {
	position: relative;
	overflow: hidden;
}

/* a fita que "prende" o cartaz no mural */
[data-ms-skin="mural"] .ms-banner::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: -11px;
	left: 50%;
	width: 124px;
	height: 24px;
	margin-left: -62px;
	background: var(--msk-tape);
	transform: rotate(-3deg);
	clip-path: polygon(0 12%, 4% 0, 96% 8%, 100% 0, 97% 50%, 100% 100%, 4% 92%, 0 100%, 3% 50%);
}

[data-ms-skin="mural"] .ms-banner-inner {
	position: relative;
	z-index: 1;
}

[data-ms-skin="mural"] .ms-banner-wave {
	font-family: var(--msk-hand);
}

/* =======================================================================
   Categorias e filtros: adesivos
   ======================================================================= */

[data-ms-skin="mural"] .ms-cat-pill,
[data-ms-skin="mural"] .ms-tab {
	border-radius: 10px;
	box-shadow: 0 6px 12px -10px rgba(110, 20, 70, .6);
}

[data-ms-skin="mural"] .ms-cat-pill:hover,
[data-ms-skin="mural"] .ms-tab:hover {
	transform: translateY(-1px);
}

[data-ms-skin="mural"] .ms-tab.is-active {
	box-shadow: var(--msk-offset);
}

/* =======================================================================
   Cards de pacote
   -----------------------------------------------------------------------
   Sem rotação, sem fita: só papel, etiqueta adesiva e uma sombra mais
   quente. O alinhamento da fileira é intocável.
   ======================================================================= */

[data-ms-skin="mural"] .ms-card-pack {
	box-shadow: 0 14px 26px -16px rgba(110, 20, 70, .55);
}

[data-ms-skin="mural"] .ms-card-pack:hover {
	box-shadow: 0 22px 38px -18px color-mix(in srgb, var(--msk-glow) 55%, transparent);
}

/* etiqueta da categoria vira adesivo torto */
[data-ms-skin="mural"] .ms-card-tag {
	border-radius: 4px;
	font-family: inherit;
	letter-spacing: .12em;
	transform: rotate(-2deg);
}

[data-ms-skin="mural"] .ms-card-title {
	letter-spacing: -.01em;
}

/* o botão ganha o deslocamento de adesivo só no hover do card */
[data-ms-skin="mural"] .ms-card-pack:hover .ms-btn-block {
	box-shadow: var(--msk-offset);
}

/* =======================================================================
   Estatísticas do dashboard: papéis colados
   -----------------------------------------------------------------------
   Aqui a inclinação é bem-vinda — são três blocos fixos, não uma grade de
   leitura. O do meio ganha fita.
   ======================================================================= */

[data-ms-skin="mural"] .ms-stat {
	position: relative;
}

[data-ms-skin="mural"] .ms-stat-rail .ms-stat:nth-child(1) { transform: rotate(-1.4deg); }
[data-ms-skin="mural"] .ms-stat-rail .ms-stat:nth-child(2) { transform: rotate(1deg); }
[data-ms-skin="mural"] .ms-stat-rail .ms-stat:nth-child(3) { transform: rotate(-.6deg); }
[data-ms-skin="mural"] .ms-stat-rail .ms-stat:nth-child(4) { transform: rotate(1.2deg); }

[data-ms-skin="mural"] .ms-stat-rail .ms-stat:nth-child(2)::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 58px;
	height: 17px;
	margin-left: -29px;
	background: var(--msk-tape-2);
	transform: rotate(-4deg);
	clip-path: polygon(0 12%, 4% 0, 96% 8%, 100% 0, 97% 50%, 100% 100%, 4% 92%, 0 100%, 3% 50%);
}

[data-ms-skin="mural"] .ms-stat-value {
	color: var(--msk-marker);
}

/*
 * Cartaz da licença: o bloco escuro que fecha a coluna de estatísticas.
 * Título à mão em cima da cor do adesivo, e o mesmo deslocamento duro dos
 * outros elementos "colados" — um pouco maior, porque o bloco também é.
 */
[data-ms-skin="mural"] .ms-marker-card {
	box-shadow: 4px 4px 0 var(--msk-sticker);
}

[data-ms-skin="mural"] .ms-marker-card > strong {
	font-family: var(--msk-hand);
	font-weight: 400;
	font-size: 19px;
	line-height: 1.2;
	transform: rotate(-1.5deg);
	transform-origin: left center;
}

/*
 * Papel colado, não caixa com contorno: os cartões da coluna trocam a borda
 * por uma sombra quente. Com a leve rotação, a borda de 1px marcava o
 * retângulo torto e entregava o truque.
 */
[data-ms-skin="mural"] .ms-stat-rail .ms-stat {
	border-color: transparent;
	box-shadow: 0 14px 26px -16px rgba(110, 20, 70, .55);
}

[data-ms-skin="mural"][data-ms-theme="dark"] .ms-stat-rail .ms-stat {
	box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .9);
}

/* =======================================================================
   Efeitos sonoros
   ======================================================================= */

[data-ms-skin="mural"] .ms-sfx-play {
	box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--msk-glow) 55%, transparent);
}

[data-ms-skin="mural"] .ms-sfx-lead,
[data-ms-skin="mural"] .ms-license-card h2 span {
	font-family: var(--msk-hand);
}

/* =======================================================================
   Paginação
   ======================================================================= */

[data-ms-skin="mural"] .ms-pagination a.is-active {
	box-shadow: var(--msk-offset);
}

[data-ms-skin="mural"] .ms-page-status {
	font-family: var(--msk-hand);
	font-size: 13px;
	letter-spacing: .02em;
}

/* =======================================================================
   Estado vazio e avisos
   ======================================================================= */

[data-ms-skin="mural"] .ms-empty-state {
	border-style: dashed;
	border-color: color-mix(in srgb, var(--msk-glow) 38%, var(--ms-border));
}

[data-ms-skin="mural"] .ms-empty-state h2,
[data-ms-skin="mural"] .ms-empty-state h3 {
	font-family: var(--msk-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* =======================================================================
   Telas de login
   ======================================================================= */

[data-ms-skin="mural"] .ms-auth-card {
	position: relative;
	box-shadow: 0 24px 48px -24px rgba(110, 20, 70, .55);
}

[data-ms-skin="mural"] .ms-auth-card::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 50%;
	width: 130px;
	height: 25px;
	margin-left: -65px;
	background: var(--msk-tape);
	transform: rotate(-2.5deg);
	clip-path: polygon(0 12%, 4% 0, 96% 8%, 100% 0, 97% 50%, 100% 100%, 4% 92%, 0 100%, 3% 50%);
}

/* =======================================================================
   Respeito a quem pediu menos movimento e a telas pequenas
   ======================================================================= */

@media (max-width: 600px) {
	/* No celular a inclinação come largura útil e desalinha a leitura. */
	[data-ms-skin="mural"] .ms-stat-rail .ms-stat,
	[data-ms-skin="mural"] .ms-brand-mark {
		transform: none;
	}

	[data-ms-skin="mural"] .ms-banner::after {
		width: 92px;
		margin-left: -46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-ms-skin="mural"] .ms-cat-pill:hover,
	[data-ms-skin="mural"] .ms-tab:hover {
		transform: none;
	}
}

/*
 * Impressão: a textura vira tinta desperdiçada e o cartaz escuro come o
 * cartucho inteiro. A folha de pedidos sai limpa.
 */
@media print {
	[data-ms-skin="mural"] .ms-app::before,
	[data-ms-skin="mural"] .ms-banner::after,
	[data-ms-skin="mural"] .ms-stat-rail .ms-stat:nth-child(2)::before {
		display: none;
	}

	[data-ms-skin="mural"] .ms-app {
		background-image: none;
	}
}