/**
 * MotionStorm Members — área de membros.
 * Tudo escopado em .ms-app; as CSS variables vêm das configurações.
 */

/* Reset mínimo ----------------------------------------------------------- */

.ms-body {
	margin: 0;
	padding: 0;
	/*
	 * Vem da configuração "Cor de fundo", não de um valor fixo.
	 * Estava travado em #f8fafc: no tema escuro o fundo obedecia (há uma
	 * regra própria gerada pelas configurações), mas no claro a cor escolhida
	 * no painel nunca chegava à página.
	 */
	background: var(--ms-background, #f8fafc);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.ms-app,
.ms-app *,
.ms-app *::before,
.ms-app *::after {
	box-sizing: border-box;
}

/* As variáveis ficam no :root porque o modal e os toasts vivem fora
   de .ms-app — dentro deles, var(--ms-card) ficava indefinido. */
:root {
	--ms-soft-bg: #f3e8ff;
	--ms-soft-text: #7c3aed;
	/*
	 * Destaques suaves: ícone de estatística, ícone da conta, botão de
	 * download da lista de sons e aviso não lido no sino.
	 *
	 * Antes as quatro coisas usavam --ms-soft-bg, a mesma variável do botão
	 * Download dos cards. Quem trocava a cor do botão via metade da interface
	 * mudar junto, sem nenhum controle para separar.
	 */
	--ms-accent-bg: var(--ms-soft-bg, #f3e8ff);
	--ms-accent-text: var(--ms-soft-text, #7c3aed);
	--ms-active-bg: #f3e8ff;
	--ms-active-text: #7c3aed;
	--ms-primary: #7c3aed;
	--ms-primary-hover: #6d28d9;
	--ms-background: #f8fafc;
	--ms-card: #fff;
	--ms-text: #0f172a;
	--ms-text-muted: #94a3b8;
	--ms-border: #e9edf3;
	--ms-sidebar: #fff;
	--ms-button-text: #fff;
	--ms-radius: 14px;
	--ms-sidebar-width: 256px;
	--ms-card-gap: 20px;
	--ms-banner-height: 170px;
	--ms-grid-columns: 6;
	--ms-soft: color-mix(in srgb, var(--ms-primary) 10%, #fff);
}

.ms-app {
	display: flex;
	min-height: 100vh;
	background: var(--ms-background);
	color: var(--ms-text);
	font-size: 14px;
	line-height: 1.5;
}

/*
 * `:not(.ms-btn)` é o detalhe que importa.
 *
 * Esta regra tem especificidade maior que `.ms-btn-soft`, então em
 * `<a class="ms-btn ms-btn-soft">` era ela quem decidia a cor: o link herdava
 * a cor de texto do card em vez da cor do botão. O `<button>` do mesmo card
 * não era atingido e ficava com a cor certa — era daí que vinha um "Download"
 * de cor diferente do "12 arquivos" bem ao lado.
 */
.ms-app a:not(.ms-btn) {
	color: inherit;
	text-decoration: none;
}

.ms-app a.ms-btn {
	text-decoration: none;
}

.ms-app h1,
.ms-app h2,
.ms-app h3,
.ms-app p,
.ms-app ul {
	margin: 0;
}

.ms-app ul {
	padding: 0;
	list-style: none;
}

.ms-app img {
	max-width: 100%;
	display: block;
}

.ms-icon {
	width: 19px;
	height: 19px;
	flex: none;
}

/* Sidebar ---------------------------------------------------------------- */

.ms-sidebar {
	width: var(--ms-sidebar-width);
	flex: none;
	background: var(--ms-sidebar);
	border-right: 1px solid var(--ms-border);
	display: flex;
	flex-direction: column;
	padding: 18px 14px 12px;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	z-index: 40;
	transition: width 0.2s ease;
}

.ms-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 6px 20px;
}

.ms-brand-mark {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--ms-primary);
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 16px;
	flex: none;
}

.ms-brand-logo {
	width: var(--ms-logo-width, 140px);
	height: auto;
}

.ms-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
	overflow: hidden;
}

.ms-brand-text strong {
	font-size: 14px;
	letter-spacing: 0.02em;
}

.ms-brand-text small {
	font-size: 11px;
	color: var(--ms-text-muted);
}

.ms-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.ms-nav-title {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ms-text-muted);
	padding: 16px 12px 6px;
}

.ms-nav-item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 14px;
	color: var(--ms-text);
	transition: background 0.15s ease, color 0.15s ease;
}

.ms-nav-item:hover {
	background: color-mix(in srgb, var(--ms-active-bg, #f3e8ff) 55%, transparent);
}

.ms-nav-item.is-active {
	background: var(--ms-active-bg, #f3e8ff);
	color: var(--ms-active-text, #7c3aed);
	font-weight: 600;
}

.ms-nav-item .ms-icon {
	color: currentColor;
	opacity: 0.85;
}

.ms-help {
	margin: 18px 4px 10px;
	padding: 16px;
	border-radius: var(--ms-radius);
	background: color-mix(in srgb, var(--ms-primary) 8%, transparent);
}

.ms-help strong {
	display: block;
	font-size: 13px;
	margin-bottom: 4px;
}

.ms-help p {
	font-size: 12px;
	color: var(--ms-text-muted);
	margin-bottom: 12px;
}

.ms-collapse {
	display: flex;
	align-items: center;
	gap: 11px;
	background: none;
	border: 0;
	border-top: 1px solid var(--ms-border);
	padding: 14px 12px 4px;
	color: var(--ms-text-muted);
	font-size: 13px;
	cursor: pointer;
	font-family: inherit;
}

.ms-collapse:hover {
	color: var(--ms-text);
}

/* Estado recolhido */

.ms-app.is-collapsed .ms-sidebar {
	--ms-sidebar-width: 76px;
	padding-left: 10px;
	padding-right: 10px;
}

.ms-app.is-collapsed .ms-brand-text,
.ms-app.is-collapsed .ms-nav-item span,
.ms-app.is-collapsed .ms-nav-title,
.ms-app.is-collapsed .ms-help,
.ms-app.is-collapsed .ms-collapse span {
	display: none;
}

.ms-app.is-collapsed .ms-nav-item {
	justify-content: center;
}

/* Main ------------------------------------------------------------------- */

.ms-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.ms-header {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 26px;
	background: var(--ms-card);
	border-bottom: 1px solid var(--ms-border);
}

.ms-burger {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
}

.ms-burger span {
	width: 18px;
	height: 2px;
	background: var(--ms-text);
	border-radius: 2px;
}

/*
 * A busca é uma superfície "afundada": cor própria (--ms-surface-2), com o
 * cartão como reserva. Assim o campo pode ficar levemente diferente do card
 * sem precisar repintar todos os cards do site.
 */
.ms-search {
	flex: 1;
	max-width: 580px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ms-surface-2, var(--ms-card));
	border: 1px solid var(--ms-border);
	border-radius: 999px;
	padding: 9px 18px;
}

.ms-search .ms-icon {
	color: var(--ms-text-muted);
	width: 17px;
	height: 17px;
}

.ms-search input {
	flex: 1;
	border: 0;
	outline: none;
	font-size: 14px;
	background: transparent;
	color: var(--ms-text);
	font-family: inherit;
}

.ms-search input::placeholder {
	color: var(--ms-text-muted);
}

.ms-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.ms-langs {
	display: flex;
	gap: 2px;
	background: color-mix(in srgb, var(--ms-border) 40%, transparent);
	border-radius: 999px;
	padding: 3px;
}

.ms-lang {
	border: 0;
	background: none;
	font-size: 16px;
	line-height: 1;
	padding: 5px 7px;
	border-radius: 999px;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.ms-lang:hover {
	opacity: 0.8;
}

.ms-lang.is-active {
	opacity: 1;
	background: var(--ms-card);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.ms-icon-btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 0;
	background: none;
	color: var(--ms-text);
	cursor: pointer;
}

.ms-icon-btn:hover {
	background: color-mix(in srgb, var(--ms-primary) 8%, transparent);
}

.ms-badge-count {
	position: absolute;
	top: 3px;
	right: 3px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--ms-primary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.ms-user {
	position: relative;
}

.ms-user-btn {
	display: flex;
	align-items: center;
	gap: 9px;
	background: none;
	border: 0;
	padding: 4px 8px 4px 4px;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	color: var(--ms-text);
}

.ms-user .ms-icon {
	transition: transform 0.18s ease;
}

.ms-user.is-open .ms-icon {
	transform: rotate(180deg);
}

.ms-user-btn:hover {
	background: color-mix(in srgb, var(--ms-primary) 8%, transparent);
}

.ms-avatar {
	border-radius: 50%;
	width: 34px;
	height: 34px;
}

.ms-user-name {
	font-weight: 600;
	white-space: nowrap;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ms-user-menu[hidden] {
	display: none;
}

.ms-user-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 190px;
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
	padding: 6px;
	display: flex;
	flex-direction: column;
	z-index: 50;
}

.ms-user-menu a {
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 13px;
}

.ms-user-menu a:hover {
	background: color-mix(in srgb, var(--ms-primary) 8%, transparent);
}

.ms-user-menu .ms-logout {
	color: #dc2626;
	border-top: 1px solid var(--ms-border);
	margin-top: 4px;
	padding-top: 11px;
	border-radius: 0 0 8px 8px;
}

/* Conteúdo --------------------------------------------------------------- */

.ms-content {
	padding: 30px 26px 60px;
	flex: 1;
	width: 100%;
	min-width: 0;
}

/*
 * Títulos usam a cor "texto em destaque", separada do texto corrido.
 * O fallback é o texto normal: quem nunca mexeu nesse campo não vê diferença.
 */
.ms-page-title h1 {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--ms-text-strong, var(--ms-text));
}

.ms-page-title p {
	color: var(--ms-text-muted);
	font-size: 15px;
	margin-top: 4px;
}

.ms-section-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--ms-text-strong, var(--ms-text));
}

.ms-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 30px 0 14px;
}

.ms-section-head .ms-section-title {
	margin: 0;
}

.ms-link {
	color: var(--ms-primary);
	font-size: 13px;
	font-weight: 500;
}

.ms-card {
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	padding: 18px 20px;
}

/* Banner ----------------------------------------------------------------- */

.ms-banner {
	margin-top: 22px;
	border-radius: var(--ms-radius);
	min-height: var(--ms-banner-height);
	display: flex;
	align-items: center;
	padding: 26px 32px;
	color: #fff;
	background-image: var(--ms-banner-image, none), linear-gradient(100deg, var(--ms-banner-from, #4c1d95), var(--ms-banner-to, #7c3aed));
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
}

.ms-banner-inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
}

.ms-banner h2 {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ms-banner-wave {
	display: block;
	font-size: 22px;
	margin: 8px 0 6px;
}

.ms-banner p {
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
}

.ms-banner .ms-btn-light {
	margin-top: 16px;
	background: #fff;
	color: var(--ms-primary);
}

/* Dashboard -------------------------------------------------------------- */

.ms-dash-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	align-items: start;
	margin-top: 26px;
}

.ms-quick {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 12px;
}

.ms-quick-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.ms-quick-card:hover {
	border-color: color-mix(in srgb, var(--ms-primary) 40%, var(--ms-border));
	transform: translateY(-1px);
}

.ms-quick-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--ms-primary) 12%, transparent);
	color: var(--ms-primary);
	flex: none;
}

.ms-quick-card strong {
	display: block;
	font-size: 14px;
}

.ms-quick-card small {
	color: var(--ms-text-muted);
	font-size: 12px;
}

.ms-dash-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 88px;
}

/*
 * Coluna de estatísticas do dashboard.
 *
 * É uma PILHA, não uma grade 2x2: os quatro números ficam ao lado do banner,
 * como cartões de papel empilhados, e o cartaz da licença fecha a coluna. A
 * classe é própria (.ms-stat-rail) porque Pedidos e Minha Conta também usam
 * .ms-stat, com ícone e em linha — mudar .ms-stat-grid ali quebraria as duas.
 */
.ms-stat-rail {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ms-stat {
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* Número grande e etiqueta em caixa alta — só na coluna do dashboard. */
.ms-stat-rail .ms-stat {
	padding: 15px 18px;
	gap: 0;
}

.ms-stat-rail .ms-stat-value {
	display: block;
	font-size: 29px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--ms-text-strong, var(--ms-text));
	font-variant-numeric: tabular-nums;
}

.ms-stat-rail .ms-stat-label {
	display: block;
	margin-top: 5px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ms-text-muted);
}

/*
 * Cartaz da licença. Tem cores próprias no painel porque no tema escuro ele NÃO
 * pode herdar as do item selecionado do menu: lá o selecionado é rosa, e o
 * cartaz precisa continuar sendo o bloco quase preto. Uma cor fixa no CSS
 * resolveria e tiraria do administrador o controle — daí os três campos
 * (fundo, texto e título) em Aparência.
 */
.ms-marker-card {
	padding: 16px 18px;
	border-radius: var(--ms-radius);
	background: var(--ms-marker-bg, var(--ms-active-bg));
	color: var(--ms-marker-text, var(--ms-active-text));
}

.ms-marker-card > strong {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--ms-marker-title, inherit);
}

.ms-marker-card > p {
	margin-top: 7px;
	font-size: 12.5px;
	line-height: 1.55;
	color: inherit;
	opacity: 0.82;
}

.ms-marker-card .ms-btn {
	margin-top: 12px;
}

.ms-stat-icon {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--ms-primary) 12%, transparent);
	color: var(--ms-primary);
	margin-bottom: 8px;
}

.ms-stat strong {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ms-stat small {
	font-size: 12px;
	color: var(--ms-text-muted);
}

.ms-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.ms-chip {
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	background: color-mix(in srgb, var(--ms-primary) 10%, transparent);
	color: var(--ms-primary);
}

/* Grid de cards ---------------------------------------------------------- */

.ms-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--ms-card-gap);
	margin-top: 12px;
}

.ms-card-pack {
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.ms-card-pack:hover {
	box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
	transform: translateY(-2px);
}

.ms-card-media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #eef2f7;
	overflow: hidden;
}

.ms-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.ms-card-pack:hover .ms-card-media img {
	transform: scale(1.04);
}

/*
 * Botão "Saber mais" sobre a imagem do produto.
 *
 * As duas variáveis existem para o dia em que essas cores virarem campo no
 * painel; hoje a reserva é uma pastilha de tinta translúcida, que funciona
 * sobre qualquer capa nos dois temas. De propósito NÃO usa --ms-soft-bg: essa
 * é a cor do botão de download, e amarrar as duas faria mudar uma repintar a
 * outra.
 */
.ms-card-more {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 3;
	transform: translate(-50%, -46%);
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--ms-more-bg, rgba(20, 16, 20, 0.86));
	color: var(--ms-more-text, #fff);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	max-width: calc(100% - 24px);
	overflow: hidden;
	text-overflow: ellipsis;
	backdrop-filter: blur(2px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Especificidade: `.ms-app a:not(.ms-btn)` força `color: inherit` e ganharia
   de `.ms-card-more` sozinho. Com o `a` no seletor os pesos empatam. */
.ms-app a.ms-card-more {
	color: var(--ms-more-text, #fff);
	text-decoration: none;
}

/*
 * Só onde existe mouse. Em tela de toque não há "passar o mouse": o hover do
 * navegador só dispara depois do primeiro toque, e o primeiro toque já seria o
 * clique — o botão apareceria e sumiria sem ninguém conseguir usar.
 */
@media (hover: hover) {
	.ms-card-product:hover .ms-card-more,
	.ms-card-more:focus-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translate(-50%, -50%);
	}
}

/* Sem mouse: fica sempre visível, discreto, no rodapé da imagem. */
@media (hover: none) {
	.ms-card-more {
		opacity: 1;
		pointer-events: auto;
		top: auto;
		bottom: 10px;
		transform: translateX(-50%);
		font-size: 11.5px;
		padding: 7px 13px;
	}
}

/* Teclado: o foco tem que revelar o botão mesmo sem mouse nenhum. */
.ms-card-more:focus-visible {
	opacity: 1;
	pointer-events: auto;
	outline: 2px solid var(--ms-primary);
	outline-offset: 2px;
}

.ms-card-media.has-preview {
	cursor: pointer;
}

.ms-card-noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
}

.ms-card-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(15, 23, 42, 0.82);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 4px 8px;
	border-radius: 6px;
	backdrop-filter: blur(4px);
}

.ms-card-play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ms-primary);
	display: grid;
	place-items: center;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ms-card-play svg {
	width: 22px;
	height: 22px;
	margin-left: 3px;
}

.ms-card-media.has-preview:hover .ms-card-play {
	opacity: 1;
}

.ms-fav {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.92);
	color: #64748b;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: color 0.15s ease, transform 0.15s ease;
}

.ms-fav svg {
	width: 15px;
	height: 15px;
}

.ms-fav:hover {
	transform: scale(1.08);
	color: var(--ms-primary);
}

.ms-fav.is-on {
	color: #e11d48;
}

.ms-fav.is-on svg {
	fill: currentColor;
}

/*
 * Título e tamanho empilhados, não lado a lado.
 *
 * Na linha única o tamanho ("9.3 MB") comia uns 55px da largura, e o que
 * sobrava para o nome do pacote não dava nem uma linha: "Dirty Boots Messy
 * Hair" virava "Dirty Boots Mess...". Empilhado, o título usa a largura
 * inteira do card.
 */
.ms-card-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 14px 14px 10px;
}

/*
 * A altura é reservada em linhas, não medida pelo texto.
 *
 * Esse é o ponto: `min-height` garante que um título de uma linha ocupe o
 * mesmo espaço de um de duas. Sem isso, um card com nome curto ficaria mais
 * baixo que o vizinho e os botões de Download desalinhariam dentro da mesma
 * fileira — exatamente o que não pode acontecer.
 *
 * Para dar três linhas ao título, basta trocar o número aqui.
 */
.ms-card-title {
	/* Piso: mesmo um nome de uma palavra ocupa duas linhas de altura. */
	--ms-title-min-lines: 2;
	/* Teto de segurança: a fonte é configurável e os títulos vindos da
	   importação saem de nomes de arquivo, que às vezes são quilométricos.
	   Sem um limite, um único pacote esticaria a fileira inteira. */
	--ms-title-max-lines: 4;
	--ms-title-leading: 1.35;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ms-title-max-lines);
	line-clamp: var(--ms-title-max-lines);
	width: 100%;
	min-height: calc(1em * var(--ms-title-leading) * var(--ms-title-min-lines));
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: var(--ms-title-leading);

	/* Nome sem espaços (um arquivo importado do bucket, por exemplo) quebra
	   dentro do card em vez de estourar a borda. */
	overflow-wrap: anywhere;
}

.ms-card-size {
	font-size: 12px;
	color: var(--ms-text-muted);
	flex: none;
}

/*
 * `margin-top: auto` empurra o botão para o rodapé do card. Como as fileiras
 * do grid esticam todos os cards à altura do mais alto, é isto que mantém os
 * botões na mesma linha mesmo se algum card ficar mais alto por outro motivo.
 */
.ms-card-pack .ms-btn-block {
	margin: auto 14px 14px;
	width: calc(100% - 28px);
}

/* Botões ----------------------------------------------------------------- */

/*
 * O mesmo botão é desenhado ora como <a> (arquivo único, vai direto para o
 * download), ora como <button> (vários arquivos, abre a janela de escolha),
 * ora como <span> ("Em breve"). Os três precisam ficar idênticos, e o
 * navegador não ajuda: o <button> vem com `line-height: normal` e aparência
 * nativa, o que o deixava 3,5px mais baixo que o <a> e ainda aberto para o
 * CSS do tema do WordPress interferir.
 */
.ms-app .ms-btn,
.ms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--ms-primary, #7c3aed);
	color: var(--ms-button-text, #fff);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.12s ease;
}

.ms-btn:hover {
	/* Sem cor de hover definida, escurecemos a principal automaticamente. */
	background: var(--ms-primary-hover, color-mix(in srgb, var(--ms-primary, #7c3aed) 85%, #000));
	color: var(--ms-button-text, #fff);
}

.ms-btn:active {
	transform: scale(0.985);
}

.ms-btn:focus-visible {
	outline: 2px solid var(--ms-primary);
	outline-offset: 2px;
}

.ms-btn .ms-icon {
	width: 16px;
	height: 16px;
}

.ms-btn-block {
	width: 100%;
}

/*
 * Escopadas em `.ms-app` de propósito.
 *
 * `.ms-app a` (0,1,1) é mais específico que `.ms-btn-soft` (0,1,0) e, por
 * isso, decidia a cor de qualquer botão que fosse um link. O `:not(.ms-btn)`
 * lá em cima já resolve, mas manter as variantes em `.ms-app .ms-btn-*`
 * (0,2,0) garante que nenhuma regra de link — do plugin ou de um tema —
 * volte a sequestrar a cor do botão.
 */
.ms-app .ms-btn-soft,
.ms-btn-soft {
	background: var(--ms-soft-bg, #f3e8ff);
	color: var(--ms-soft-text, #7c3aed);
}

/*
 * A cor de passar o mouse é configurável, como já era a do botão principal.
 *
 * Antes ela era só calculada — 82% do fundo misturado com 18% da cor do
 * texto. Com um botão amarelo e texto quase preto, a conta devolvia um
 * dourado sujo que ninguém escolheu e ninguém conseguia trocar.
 * A mistura continua como reserva, para quem nunca mexer no campo.
 */
.ms-btn-soft:hover {
	background: var(--ms-soft-hover, color-mix(in srgb, var(--ms-soft-bg, #f3e8ff) 82%, var(--ms-soft-text, #7c3aed)));
	color: var(--ms-soft-text, #7c3aed);
}

.ms-app .ms-btn-ghost,
.ms-btn-ghost {
	background: var(--ms-card);
	color: var(--ms-text);
	border-color: var(--ms-border);
}

.ms-btn-ghost:hover {
	background: color-mix(in srgb, var(--ms-primary) 6%, var(--ms-card));
	color: var(--ms-text);
}

.ms-btn.is-disabled {
	opacity: 0.55;
	pointer-events: none;
}

/* Toolbar e filtros ------------------------------------------------------ */

.ms-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 24px 0 6px;
}

.ms-tabs-filter {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ms-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 10px;
	border: 1px solid var(--ms-border);
	background: var(--ms-card);
	font-size: 13px;
	font-weight: 500;
}

.ms-tab em {
	font-style: normal;
	font-size: 11px;
	color: var(--ms-text-muted);
}

.ms-tab.is-active {
	background: var(--ms-primary);
	border-color: var(--ms-primary);
	color: #fff;
}

.ms-tab.is-active em {
	color: rgba(255, 255, 255, 0.75);
}

.ms-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--ms-text-muted);
}

.ms-sort select {
	border: 1px solid var(--ms-border);
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 13px;
	background: var(--ms-card);
	color: var(--ms-text);
	font-family: inherit;
}

.ms-search-info {
	margin-top: 14px;
	font-size: 13px;
	color: var(--ms-text-muted);
}

/* Listas ----------------------------------------------------------------- */

.ms-recent-downloads {
	margin-top: 26px;
}

.ms-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ms-border);
}

.ms-list li:last-child {
	border-bottom: 0;
}

.ms-list-thumb {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	overflow: hidden;
	background: #eef2f7;
	flex: none;
}

.ms-list-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-list-body {
	flex: 1;
	min-width: 0;
}

.ms-list-body strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ms-list-body small {
	font-size: 12px;
	color: var(--ms-text-muted);
}

.ms-list-meta,
.ms-list-date {
	font-size: 12px;
	color: var(--ms-text-muted);
	flex: none;
}

.ms-list-status {
	font-size: 12px;
	font-weight: 600;
	flex: none;
}

.ms-list-status.is-ok {
	color: #16a34a;
}

.ms-list-status.is-warn {
	color: #d97706;
}

/* Paginação -------------------------------------------------------------- */

/*
 * `flex-wrap` aqui não é enfeite: é a garantia de que a paginação nunca
 * volte a empurrar a página inteira para o lado no celular. Mesmo que um dia
 * apareçam botões demais, eles descem de linha em vez de estourar a largura.
 */
.ms-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin-top: 30px;
}

.ms-pagination a {
	min-width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	border: 1px solid var(--ms-border);
	background: var(--ms-card);
	font-size: 13px;
	padding: 0 10px;
}

.ms-pagination a.is-active {
	background: var(--ms-primary);
	border-color: var(--ms-primary);
	color: #fff;
	font-weight: 600;
}

/* Setas de anterior/próxima. */
.ms-pagination .ms-page-nav {
	padding: 0;
	color: var(--ms-text-muted);
}

.ms-pagination .ms-page-nav svg {
	width: 18px;
	height: 18px;
}

.ms-pagination .ms-page-nav:hover {
	color: var(--ms-text);
	border-color: color-mix(in srgb, var(--ms-primary) 45%, var(--ms-border));
}

/*
 * "Página 5 de 12" ocupa a linha inteira, abaixo dos botões. É o que informa
 * o tamanho da lista agora que os números não são mais todos desenhados.
 */
.ms-page-status {
	width: 100%;
	margin: 4px 0 0;
	text-align: center;
	font-size: 12px;
	color: var(--ms-text-muted);
}

/* Estado vazio ----------------------------------------------------------- */

.ms-empty-state {
	background: var(--ms-card);
	border: 1px dashed var(--ms-border);
	border-radius: var(--ms-radius);
	padding: 54px 24px;
	text-align: center;
	margin-top: 18px;
}

.ms-empty-icon {
	width: 54px;
	height: 54px;
	border-radius: 16px;
	display: inline-grid;
	place-items: center;
	background: color-mix(in srgb, var(--ms-primary) 10%, transparent);
	color: var(--ms-primary);
	margin-bottom: 14px;
}

.ms-empty-icon .ms-icon {
	width: 24px;
	height: 24px;
}

.ms-empty-state strong {
	display: block;
	font-size: 16px;
	margin-bottom: 6px;
}

.ms-empty-state p {
	color: var(--ms-text-muted);
	font-size: 13px;
	margin-bottom: 18px;
}

/* Modal ------------------------------------------------------------------ */

.ms-modal[hidden] {
	display: none;
}

.ms-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 20px;
}

.ms-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.78);
	backdrop-filter: blur(4px);
}

.ms-modal,
.ms-toasts {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--ms-text);
	font-size: 14px;
	line-height: 1.5;
	box-sizing: border-box;
}

.ms-modal *,
.ms-modal *::before,
.ms-modal *::after {
	box-sizing: border-box;
}

.ms-modal h3,
.ms-modal p,
.ms-modal ul {
	margin: 0;
}

.ms-modal ul {
	padding: 0;
	list-style: none;
}

.ms-modal a {
	color: inherit;
	text-decoration: none;
}

.ms-modal img {
	max-width: 100%;
	display: block;
}

.ms-modal-card {
	position: relative;
	background: var(--ms-card, #fff);
	border-radius: 16px;
	width: min(860px, 100%);
	max-height: 88vh;
	overflow: auto;
	padding: 22px;
	box-shadow: 0 30px 70px rgba(15, 23, 42, 0.45);
}

.ms-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ms-border) 60%, transparent);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--ms-text);
}

.ms-modal-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 14px;
	padding-right: 40px;
}

.ms-modal video,
.ms-modal iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 12px;
	background: #000;
	display: block;
}

.ms-file-intro {
	font-size: 13px;
	color: var(--ms-text-muted);
	margin-bottom: 10px;
}

.ms-file-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--ms-border);
}

.ms-file-list li:last-child {
	border-bottom: 0;
}

.ms-file-name {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ms-file-size {
	font-size: 12px;
	color: var(--ms-text-muted);
}

/* Toasts ----------------------------------------------------------------- */

.ms-toasts {
	position: fixed;
	right: 20px;
	bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 120;
}

.ms-toast {
	background: #0f172a;
	color: #fff;
	padding: 12px 18px;
	border-radius: 12px;
	font-size: 13px;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.25);
	animation: ms-toast-in 0.22s ease;
}

.ms-toast.is-error {
	background: #b91c1c;
}

@keyframes ms-toast-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* Overlay mobile --------------------------------------------------------- */

.ms-overlay[hidden] {
	display: none;
}

.ms-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	z-index: 35;
}

/* Telas de autenticação --------------------------------------------------- */

.ms-auth-body {
	background: var(--ms-background, #f8fafc);
}

.ms-auth-app {
	display: block;
	min-height: 100vh;
}

.ms-auth {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background:
		radial-gradient(900px 420px at 50% -10%, color-mix(in srgb, var(--ms-primary) 14%, transparent), transparent 70%),
		var(--ms-background);
}

.ms-auth-card {
	width: min(420px, 100%);
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: 18px;
	padding: 34px 32px 30px;
	box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.ms-auth-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
}

.ms-auth-brand img {
	max-width: var(--ms-logo-width, 150px);
	height: auto;
}

.ms-auth-brand strong {
	font-size: 15px;
	letter-spacing: 0.02em;
}

.ms-auth-title {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 6px;
}

.ms-auth-sub {
	color: var(--ms-text-muted);
	font-size: 14px;
	margin-bottom: 22px;
}

.ms-auth-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ms-auth-field span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.ms-auth-field input {
	width: 100%;
	border: 1px solid var(--ms-border);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	font-family: inherit;
	background: var(--ms-card);
	color: var(--ms-text);
}

.ms-auth-field input:focus {
	outline: none;
	border-color: var(--ms-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-primary) 18%, transparent);
}

.ms-auth-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	flex-wrap: wrap;
}

.ms-auth-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	color: var(--ms-text-muted);
}

.ms-auth-msg {
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 13px;
	margin-bottom: 14px;
}

.ms-auth-msg.is-error {
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fee2e2;
}

.ms-auth-msg.is-ok {
	background: #ecfdf5;
	color: #047857;
	border: 1px solid #d1fae5;
}

.ms-auth-back {
	margin-top: 18px;
	font-size: 13px;
	text-align: center;
}

.ms-auth-langs {
	margin-top: 4px;
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
}

.ms-auth-langs .ms-lang.is-active {
	background: color-mix(in srgb, var(--ms-primary) 12%, transparent);
	box-shadow: none;
}

.ms-auth-footer {
	margin-top: 22px;
	font-size: 12px;
	color: var(--ms-text-muted);
}

/* Honeypot: invisível para pessoas, atraente para bots. */
.ms-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

html[data-ms-theme="dark"] .ms-auth-msg.is-error {
	background: #3b1418;
	border-color: #7f1d1d;
	color: #fca5a5;
}

html[data-ms-theme="dark"] .ms-auth-msg.is-ok {
	background: #0d2f24;
	border-color: #065f46;
	color: #6ee7b7;
}

/* Barra de administração do WordPress ------------------------------------ */

.admin-bar .ms-sidebar {
	height: calc(100vh - 32px);
	top: 32px;
}

.admin-bar .ms-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ms-sidebar,
	.admin-bar .ms-header {
		top: 46px;
	}

	.admin-bar .ms-sidebar {
		height: calc(100vh - 46px);
	}
}

/* Dark mode -------------------------------------------------------------- */

/*
 * background-COLOR e vindo da variável — não o atalho com a cor escrita à mão.
 *
 * Esta regra nasceu como um remendo e virou dois problemas: o atalho
 * `background` zerava background-image, apagando a textura de fundo da pele no
 * tema escuro, e a cor fixa aqui era mais específica que a variável — a cor
 * escolhida no painel ficava salva no banco e a tela continuava azul-escuro.
 */
html[data-ms-theme="dark"] .ms-body,
html[data-ms-theme="dark"] body {
	background-color: var(--ms-background, #0b1120);
}

html[data-ms-theme="dark"] {
	--ms-background: #0b1120;
	--ms-card: #131c30;
	--ms-sidebar: #101828;
	--ms-text: #e2e8f0;
	--ms-text-muted: #7c8db0;
	--ms-border: #1e293b;
}

html[data-ms-theme="dark"] .ms-card-media,
html[data-ms-theme="dark"] .ms-list-thumb {
	background: #1e293b;
}

html[data-ms-theme="dark"] .ms-fav {
	background: rgba(15, 23, 42, 0.85);
	color: #cbd5e1;
}

html[data-ms-theme="dark"] .ms-card-play {
	background: rgba(19, 28, 48, 0.92);
}

/* Responsivo ------------------------------------------------------------- */

@media (max-width: 1200px) {
	.ms-dash-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-dash-side {
		position: static;
	}

	/*
	 * Sem coluna lateral, a pilha deita e vira fileira.
	 *
	 * A largura é uma fração fixa (um quarto), não `flex: 1 1 200px`: com base
	 * flexível cabiam três por fileira e o quarto cartão sobrava sozinho,
	 * esticado na largura inteira ao lado de três estreitos. Quatro por
	 * fileira mantém todos do mesmo tamanho.
	 */
	.ms-stat-rail {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.ms-stat-rail > .ms-stat {
		flex: 0 1 calc(25% - 10.5px);
	}

	/* O cartaz da licença é texto: ocupa a fileira inteira em vez de espremer. */
	.ms-stat-rail > .ms-marker-card {
		flex-basis: 100%;
	}
}

@media (max-width: 980px) {
	.ms-sidebar {
		position: fixed;
		left: 0;
		top: 0;
		transform: translateX(-100%);
		transition: transform 0.22s ease;
		box-shadow: 0 0 40px rgba(15, 23, 42, 0.18);
	}

	.ms-app.is-menu-open .ms-sidebar {
		transform: translateX(0);
	}

	.ms-burger {
		display: flex;
	}

	.ms-content {
		padding: 22px 16px 50px;
	}

	.ms-header {
		padding: 10px 16px;
	}

	.ms-user-name {
		display: none;
	}

	.ms-page-title h1 {
		font-size: 26px;
	}

	.ms-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.ms-quick {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px) {
	/* Dois por fileira: abaixo disso um quarto de tela não cabe o número. */
	.ms-stat-rail > .ms-stat {
		flex: 0 1 calc(50% - 7px);
	}
}

@media (max-width: 640px) {

	.ms-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--ms-card-gap: 12px;
	}

	.ms-banner {
		padding: 20px;
	}

	.ms-banner h2 {
		font-size: 20px;
	}

	.ms-list-meta,
	.ms-list-date {
		display: none;
	}

	.ms-toasts {
		left: 16px;
		right: 16px;
		bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ms-app *,
	.ms-app *::before,
	.ms-app *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* =======================================================================
   Fase 3 — Loja, carrinho, pedidos e licenças
   ======================================================================= */

.ms-shop-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: start;
	margin-top: 22px;
}

.ms-shop-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 88px;
}

.ms-shop-cats {
	margin-bottom: 18px;
}

.ms-shop-banner {
	margin-top: 0;
	margin-bottom: 22px;
}

.ms-eyebrow {
	display: inline-block;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}

.ms-subtabs {
	display: flex;
	gap: 20px;
	border-bottom: 1px solid var(--ms-border);
	margin-bottom: 4px;
	overflow-x: auto;
}

.ms-subtabs a {
	padding: 10px 2px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ms-text-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	white-space: nowrap;
}

.ms-subtabs a:hover {
	color: var(--ms-text);
}

.ms-subtabs a.is-active {
	color: var(--ms-primary);
	border-bottom-color: var(--ms-primary);
	font-weight: 600;
}

.ms-shop-grid {
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.ms-card-product .ms-card-media {
	aspect-ratio: 1 / 1;
}

.ms-card-body-stack {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.ms-card-tag.is-sale {
	background: #dc2626;
}

.ms-card-off {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #dc2626;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 6px;
}

.ms-card-owned {
	position: absolute;
	bottom: 10px;
	left: 10px;
	background: rgba(255, 255, 255, 0.92);
	color: #15803d;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 6px;
}

.ms-price {
	font-size: 17px;
	font-weight: 700;
	margin-top: 2px;
}

.ms-price del {
	font-size: 13px;
	font-weight: 400;
	color: var(--ms-text-muted);
	margin-right: 6px;
}

.ms-price ins {
	text-decoration: none;
}

/* Carrinho ---------------------------------------------------------------- */

.ms-cart-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--ms-border);
}

.ms-cart-list li:last-child {
	border-bottom: 0;
}

.ms-cart-remove {
	font-size: 20px;
	line-height: 1;
	color: var(--ms-text-muted);
	padding: 0 4px;
}

.ms-cart-remove:hover {
	color: #dc2626;
}

.ms-cart-empty {
	color: var(--ms-text-muted);
	font-size: 13px;
	padding: 14px 0 16px;
}

.ms-cart-totals {
	border-top: 1px solid var(--ms-border);
	padding-top: 12px;
	margin: 12px 0 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
}

.ms-cart-totals span {
	display: flex;
	justify-content: space-between;
	gap: 12px;
}

.ms-cart-totals em {
	font-style: normal;
	color: var(--ms-text-muted);
}

.ms-cart-totals .is-total {
	font-weight: 700;
	font-size: 16px;
}

.ms-cart-totals .is-total em {
	color: var(--ms-text);
}

.ms-why li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
}

.ms-why-icon {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--ms-primary) 12%, transparent);
	color: var(--ms-primary);
	flex: none;
}

.ms-why strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
}

.ms-why small {
	font-size: 12px;
	color: var(--ms-text-muted);
}

/* Mini-cart --------------------------------------------------------------- */

.ms-minicart {
	position: relative;
}

.ms-minicart-panel[hidden] {
	display: none;
}

.ms-minicart-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	width: 300px;
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: 14px;
	box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
	padding: 14px 16px;
	z-index: 60;
}

/* Pedidos ----------------------------------------------------------------- */

.ms-order-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 22px 0 24px;
}

.ms-orders {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ms-order-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ms-border);
}

.ms-order-head > div {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.ms-order-head strong {
	font-size: 16px;
}

.ms-order-head small {
	color: var(--ms-text-muted);
	font-size: 12px;
}

.ms-order-total {
	font-weight: 600;
}

.ms-order-status {
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #475569;
	text-transform: capitalize;
}

.ms-order-status.is-completed {
	background: #dcfce7;
	color: #15803d;
}

.ms-order-status.is-processing {
	background: #dbeafe;
	color: #1d4ed8;
}

.ms-order-status.is-pending,
.ms-order-status.is-on-hold {
	background: #fef3c7;
	color: #b45309;
}

.ms-order-status.is-cancelled,
.ms-order-status.is-failed,
.ms-order-status.is-refunded {
	background: #fee2e2;
	color: #b91c1c;
}

.ms-order-items li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ms-border);
}

.ms-order-items li:last-child {
	border-bottom: 0;
}

.ms-order-detail {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	border-top: 1px solid var(--ms-border);
	padding-top: 14px;
	margin-top: 4px;
}

.ms-order-detail em {
	display: block;
	font-style: normal;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ms-text-muted);
	margin-bottom: 3px;
}

.ms-order-detail span {
	font-size: 14px;
	font-weight: 500;
}

.ms-order-links {
	margin-top: 12px;
	font-size: 13px;
}

/* Licenças ---------------------------------------------------------------- */

.ms-license-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--ms-border);
	flex-wrap: wrap;
}

.ms-license-list li:last-child {
	border-bottom: 0;
}

.ms-license-key {
	background: color-mix(in srgb, var(--ms-primary) 8%, transparent);
	border: 1px dashed color-mix(in srgb, var(--ms-primary) 35%, transparent);
	border-radius: 10px;
	padding: 8px 14px;
	cursor: pointer;
	font-family: inherit;
}

.ms-license-key code {
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--ms-primary);
	font-weight: 600;
}

.ms-license-key:hover {
	background: color-mix(in srgb, var(--ms-primary) 14%, transparent);
}

.ms-license-date {
	font-size: 12px;
	color: var(--ms-text-muted);
}

.ms-license-status {
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f1f5f9;
	color: #475569;
	margin-left: auto;
}

.ms-license-status.is-active {
	background: #dcfce7;
	color: #15803d;
}

.ms-license-status.is-expired,
.ms-license-status.is-revoked,
.ms-license-status.is-cancelled {
	background: #fee2e2;
	color: #b91c1c;
}

@media (max-width: 1200px) {
	.ms-shop-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-shop-side {
		position: static;
	}
}

@media (max-width: 780px) {
	.ms-order-stats,
	.ms-order-detail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-minicart-panel {
		width: min(300px, calc(100vw - 32px));
	}

	.ms-shop-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}
}

/* Fase 4 — baixar todos ---------------------------------------------------- */

.ms-file-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.ms-file-head .ms-file-intro {
	margin-bottom: 0;
}

.ms-btn-small {
	padding: 7px 13px;
	font-size: 12px;
	border-radius: 9px;
}

.ms-btn[disabled] {
	opacity: 0.65;
	cursor: progress;
}

/* =======================================================================
   Fase 5 — Biblioteca de efeitos sonoros
   ======================================================================= */

.ms-sfx-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 24px;
	align-items: start;
	margin-top: 22px;
}

.ms-sfx-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 88px;
}

.ms-sfx-list {
	padding: 6px 18px;
}

.ms-sfx-row {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ms-border);
}

.ms-sfx-row:last-child {
	border-bottom: 0;
}

.ms-sfx-lead {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.ms-sfx-thumb {
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	overflow: hidden;
	background: #eef2f7;
	flex: none;
}

.ms-sfx-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms-sfx-play {
	position: absolute;
	inset: 0;
	border: 0;
	background: rgba(15, 23, 42, 0.55);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.ms-sfx-row:hover .ms-sfx-play,
.ms-sfx-row.is-playing .ms-sfx-play {
	opacity: 1;
}

.ms-sfx-row.is-playing .ms-sfx-play {
	background: color-mix(in srgb, var(--ms-primary) 82%, transparent);
}

.ms-sfx-play svg {
	width: 18px;
	height: 18px;
}

.ms-sfx-info {
	min-width: 0;
}

.ms-sfx-info strong {
	display: block;
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ms-sfx-cat {
	display: inline-block;
	margin-top: 3px;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--ms-primary) 10%, transparent);
	color: var(--ms-primary);
}

/* Waveform ---------------------------------------------------------------- */

.ms-wave {
	position: relative;
	height: 42px;
	min-width: 0;
	overflow: hidden;
}

.ms-wave.is-playable {
	cursor: pointer;
}

.ms-wave-bars {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 2px;
	width: 100%;
}

.ms-wave-bars i {
	flex: 1;
	min-width: 1px;
	border-radius: 1px;
	background: color-mix(in srgb, var(--ms-text-muted) 45%, transparent);
}

.ms-wave.is-placeholder .ms-wave-bars i {
	background: color-mix(in srgb, var(--ms-text-muted) 28%, transparent);
}

.ms-wave-progress {
	position: absolute;
	inset: 0;
	width: 0;
	overflow: hidden;
	transition: width 0.1s linear;
}

.ms-wave-progress .ms-wave-bars {
	width: var(--ms-wave-width, 100%);
}

.ms-wave-progress .ms-wave-bars i {
	background: var(--ms-primary);
}

/* Meta e ações ------------------------------------------------------------ */

.ms-sfx-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

.ms-sfx-size,
.ms-sfx-time {
	font-size: 12px;
	color: var(--ms-text-muted);
	font-variant-numeric: tabular-nums;
	min-width: 52px;
	text-align: right;
}

.ms-fav-inline {
	position: static;
	width: 30px;
	height: 30px;
	background: transparent;
}

.ms-sfx-download {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 9px;
	display: grid;
	place-items: center;
	background: var(--ms-accent-bg, var(--ms-soft-bg, #f3e8ff));
	color: var(--ms-accent-text, var(--ms-soft-text, #7c3aed));
	cursor: pointer;
}

/*
 * Este botão passou a usar as cores de "destaque suave" na 2.24.4, mas o
 * hover tinha ficado para trás, ainda derivado da cor do botão Download.
 * Resultado: mudava de família ao passar o mouse.
 */
.ms-sfx-download:hover {
	background: color-mix(in srgb, var(--ms-accent-bg, var(--ms-soft-bg, #f3e8ff)) 82%, var(--ms-accent-text, var(--ms-soft-text, #7c3aed)));
	color: var(--ms-accent-text, var(--ms-soft-text, #7c3aed));
}

.ms-sfx-download.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Coluna lateral ---------------------------------------------------------- */

.ms-side-head {
	margin: 0 0 12px;
}

.ms-side-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ms-side-field span {
	display: block;
	font-size: 12px;
	color: var(--ms-text-muted);
	margin-bottom: 5px;
}

.ms-side-field select {
	width: 100%;
	border: 1px solid var(--ms-border);
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 13px;
	font-family: inherit;
	background: var(--ms-card);
	color: var(--ms-text);
}

.ms-license-card {
	background: linear-gradient(150deg, var(--ms-primary), color-mix(in srgb, var(--ms-primary) 60%, #4c1d95));
	border: 0;
	color: #fff;
}

.ms-license-card h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 8px;
}

.ms-license-card p {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 16px;
}

.ms-license-card .ms-btn-light {
	background: #fff;
	color: var(--ms-primary);
}

@media (max-width: 1200px) {
	.ms-sfx-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-sfx-side {
		position: static;
	}
}

@media (max-width: 900px) {
	.ms-sfx-row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 12px;
	}

	.ms-wave {
		grid-column: 1 / -1;
		height: 34px;
		order: 3;
	}

	.ms-sfx-size {
		display: none;
	}
}

@media (max-width: 520px) {
	.ms-sfx-list {
		padding: 6px 14px;
	}

	.ms-sfx-meta {
		gap: 8px;
	}
}

/* =======================================================================
   Fase 7 — acessibilidade e acabamento
   ======================================================================= */

.ms-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--ms-primary, #7c3aed);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 10px 0;
	font-size: 14px;
	font-weight: 600;
}

.ms-skip:focus {
	left: 0;
}

.ms-content:focus {
	outline: none;
}

/* Foco visível e consistente em tudo que é interativo */

.ms-app a:focus-visible,
.ms-app button:focus-visible,
.ms-app select:focus-visible,
.ms-app input:focus-visible,
.ms-wave:focus-visible {
	outline: 2px solid var(--ms-primary);
	outline-offset: 2px;
	border-radius: 6px;
}

.ms-app ::selection {
	background: color-mix(in srgb, var(--ms-primary) 26%, transparent);
}

/* Skeleton de carregamento ------------------------------------------------ */

.ms-skeleton {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 0;
}

.ms-skeleton span {
	display: block;
	height: 44px;
	border-radius: 10px;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--ms-border) 60%, transparent) 25%,
		color-mix(in srgb, var(--ms-border) 30%, transparent) 37%,
		color-mix(in srgb, var(--ms-border) 60%, transparent) 63%
	);
	background-size: 400% 100%;
	animation: ms-shimmer 1.3s ease infinite;
}

@keyframes ms-shimmer {
	from {
		background-position: 100% 50%;
	}
	to {
		background-position: 0 50%;
	}
}

/* Barras de rolagem discretas --------------------------------------------- */

.ms-sidebar,
.ms-modal-card,
.ms-subtabs {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--ms-text-muted) 40%, transparent) transparent;
}

.ms-sidebar::-webkit-scrollbar,
.ms-modal-card::-webkit-scrollbar,
.ms-subtabs::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.ms-sidebar::-webkit-scrollbar-thumb,
.ms-modal-card::-webkit-scrollbar-thumb,
.ms-subtabs::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--ms-text-muted) 35%, transparent);
	border-radius: 999px;
}

/* Impressão: a área de membros não faz sentido no papel, mas pedidos sim */

@media print {
	.ms-sidebar,
	.ms-header,
	.ms-toasts,
	.ms-skip {
		display: none !important;
	}

	.ms-app {
		display: block;
	}

	.ms-card {
		break-inside: avoid;
	}
}

/* =======================================================================
   Janela de preview (vídeo e áudio)
   ======================================================================= */

.ms-modal-card.is-media {
	padding: 0;
	overflow: hidden;
	width: min(560px, 100%);
}

.ms-modal-card.is-media .ms-modal-close {
	background: rgba(15, 23, 42, 0.55);
	color: #fff;
	top: 14px;
	right: 16px;
	z-index: 2;
}

.ms-preview-media {
	position: relative;
	background: #000;
	line-height: 0;
}

.ms-preview-media video,
.ms-preview-media iframe {
	border-radius: 0;
	aspect-ratio: 16 / 9;
}

/* Cabeçalho de áudio: capa desfocada + onda + player */

.ms-preview-media.is-audio {
	background: linear-gradient(150deg, var(--ms-primary), color-mix(in srgb, var(--ms-primary) 55%, #3b0764));
	padding: 26px 24px 20px;
	line-height: normal;
	overflow: hidden;
}

.ms-preview-cover {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.28;
	filter: blur(3px);
}

/* Véu escuro sobre a capa: garante contraste da onda e do player. */
.ms-preview-media.is-audio::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(30, 10, 60, 0.35), rgba(30, 10, 60, 0.6));
}

.ms-preview-media.is-audio > * {
	position: relative;
	z-index: 1;
}

.ms-preview-wave {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
	height: 74px;
	margin-bottom: 18px;
}

.ms-preview-wave i {
	flex: 1;
	min-width: 1px;
	border-radius: 1px;
	background: rgba(255, 255, 255, 0.72);
}

.ms-sound-player {
	position: relative;
	width: 100%;
	height: 44px;
	display: block;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
}

.ms-sound-noaudio {
	position: relative;
	color: rgba(255, 255, 255, 0.9);
	font-size: 13px;
	text-align: center;
	padding: 10px 0 4px;
}

/* Corpo: título, meta e ações */

.ms-preview-body {
	padding: 22px 24px 24px;
}

.ms-preview-title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}

.ms-preview-meta {
	margin-top: 14px;
}

.ms-preview-meta em {
	display: block;
	font-style: normal;
	font-size: 12px;
	color: var(--ms-text-muted);
	margin-bottom: 2px;
}

.ms-preview-meta strong {
	font-size: 15px;
	font-weight: 600;
}

.ms-preview-actions {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-top: 20px;
}

.ms-preview-actions .ms-btn {
	flex: 1;
	padding: 14px 20px;
	font-size: 14px;
}

.ms-preview-fav {
	width: 52px;
	flex: none;
	border: 1px solid var(--ms-border);
	border-radius: 10px;
	background: var(--ms-card);
	color: var(--ms-text-muted);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.ms-preview-fav svg {
	width: 20px;
	height: 20px;
}

.ms-preview-fav:hover {
	color: var(--ms-primary);
	border-color: color-mix(in srgb, var(--ms-primary) 40%, var(--ms-border));
}

.ms-preview-fav.is-on {
	color: #e11d48;
	border-color: #fecdd3;
}

.ms-preview-fav.is-on svg {
	fill: currentColor;
}

/* Linha da lista continua clicável */

.ms-sfx-info[role="button"] {
	cursor: pointer;
}

.ms-sfx-info[role="button"]:hover strong {
	color: var(--ms-primary);
}

.ms-sfx-row {
	cursor: pointer;
}

.ms-sfx-row .ms-wave,
.ms-sfx-row button,
.ms-sfx-row a {
	cursor: pointer;
}

@media (max-width: 520px) {
	.ms-preview-actions {
		flex-wrap: wrap;
	}

	.ms-preview-actions .ms-btn {
		flex: 1 1 100%;
	}

	.ms-preview-fav {
		width: 100%;
		height: 46px;
	}
}

/* =======================================================================
   Header no mobile: duas linhas (ações em cima, busca embaixo)
   ======================================================================= */

@media (max-width: 980px) {
	.ms-body {
		overflow-x: hidden;
	}

	.ms-header {
		flex-wrap: wrap;
		row-gap: 10px;
		column-gap: 8px;
		padding: 10px 14px;
	}

	/* Primeira linha: menu à esquerda, ações à direita. */
	.ms-burger {
		order: 1;
		margin-right: auto;
		border: 1px solid var(--ms-border);
		border-radius: 10px;
		padding: 10px;
		background: var(--ms-card);
	}

	.ms-header-actions {
		order: 2;
		margin-left: 0;
		gap: 4px;
		flex-wrap: nowrap;
		min-width: 0;
	}

	/* Segunda linha: busca ocupando a largura toda. */
	.ms-search {
		order: 3;
		flex: 1 1 100%;
		max-width: none;
		width: 100%;
		min-width: 0;
	}

	.ms-search input {
		min-width: 0;
	}

	/* As bandeiras encolhem em vez de empurrar o resto para fora. */
	.ms-langs {
		padding: 2px;
		gap: 0;
	}

	.ms-lang {
		font-size: 14px;
		padding: 4px 5px;
	}

	.ms-icon-btn {
		width: 34px;
		height: 34px;
	}

	.ms-user-btn {
		padding: 2px;
		gap: 4px;
	}

	.ms-avatar {
		width: 30px;
		height: 30px;
	}

	.ms-user-menu {
		right: 0;
		min-width: 200px;
	}
}

@media (max-width: 420px) {
	.ms-header-actions {
		gap: 0;
	}

	/* Tudo encolhe um pouco para o botão de tema continuar visível. */
	.ms-lang {
		font-size: 13px;
		padding: 3px 4px;
	}

	.ms-icon-btn {
		width: 32px;
		height: 32px;
	}

	.ms-icon-btn .ms-icon {
		width: 17px;
		height: 17px;
	}

	.ms-avatar {
		width: 28px;
		height: 28px;
	}

	.ms-user-btn .ms-icon {
		width: 15px;
		height: 15px;
	}

	.ms-header {
		padding: 10px 12px;
	}
}

/* Abaixo disso o espaço é mínimo: o carrinho vai para a sidebar,
   mas o tema e os idiomas continuam ao alcance do polegar. */
@media (max-width: 340px) {
	.ms-langs {
		padding: 1px;
	}

	.ms-lang {
		padding: 3px;
	}
}

/* =======================================================================
   Tipografia configurável
   ======================================================================= */

.ms-body,
.ms-app,
.ms-modal,
.ms-toasts {
	font-family: var(--ms-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif);
	font-size: var(--ms-font-size, 14px);
}

.ms-app input,
.ms-app select,
.ms-app textarea,
.ms-app button,
.ms-modal button,
.ms-modal input {
	font-family: inherit;
}

/* =======================================================================
   Elementos do tema que vazam pelo wp_footer
   ======================================================================= */

.ms-body #ast-scroll-top,
.ms-body .ast-scroll-top-icon,
.ms-body .ast-scroll-to-top-right,
.ms-body #scroll-to-top,
.ms-body .scroll-to-top,
.ms-body .back-to-top,
.ms-body #back-to-top,
.ms-body .go-top,
.ms-body .elementor-location-footer,
.ms-body .site-footer,
.ms-body #colophon,
.ms-body .ast-above-header,
.ms-body .site-header,
.ms-body #masthead,
.ms-body .wp-block-template-part {
	display: none !important;
}

/* =======================================================================
   Minha Conta
   ======================================================================= */

.ms-account-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: var(--ms-radius);
	padding: 24px 26px;
	margin: 22px 0 20px;
}

.ms-account-avatar {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.ms-avatar-wrap {
	position: relative;
	flex: none;
}

.ms-avatar-lg {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--ms-card);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ms-primary) 35%, transparent);
}

.ms-avatar-hint {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
}

.ms-avatar-edit {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ms-primary);
	color: var(--ms-button-text, #fff);
	display: grid;
	place-items: center;
	cursor: pointer;
	border: 2px solid var(--ms-card);
	transition: background 0.15s ease;
}

.ms-avatar-edit:hover {
	background: var(--ms-primary-hover, color-mix(in srgb, var(--ms-primary) 85%, #000));
}

.ms-avatar-edit svg {
	width: 16px;
	height: 16px;
}

.ms-avatar-edit input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
}

.ms-account-identity {
	min-width: 0;
}

.ms-account-identity strong {
	display: block;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ms-account-identity span {
	display: block;
	color: var(--ms-text-muted);
	font-size: 14px;
	margin-top: 2px;
}

.ms-account-identity small {
	display: block;
	color: var(--ms-text-muted);
	font-size: 12px;
	margin-top: 6px;
}

.ms-avatar-remove {
	background: none;
	border: 0;
	padding: 0;
	margin-top: 8px;
	font-size: 12px;
	color: var(--ms-text-muted);
	cursor: pointer;
	font-family: inherit;
	text-decoration: underline;
}

.ms-avatar-remove:hover {
	color: #dc2626;
}

.ms-account-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(96px, 1fr));
	gap: 12px;
}

.ms-account-stat {
	background: var(--ms-background);
	border: 1px solid var(--ms-border);
	border-radius: 12px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

a.ms-account-stat:hover {
	border-color: color-mix(in srgb, var(--ms-primary) 45%, var(--ms-border));
	transform: translateY(-1px);
}

.ms-account-stat strong {
	font-size: 20px;
	font-weight: 700;
}

.ms-account-stat small {
	font-size: 12px;
	color: var(--ms-text-muted);
}

.ms-account-stat .ms-stat-icon {
	margin-bottom: 6px;
}

/* Cartões de formulário --------------------------------------------------- */

.ms-account-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-items: start;
}

.ms-account-grid .ms-card {
	padding: 22px 24px;
}

.ms-account-grid .ms-section-title {
	margin-bottom: 16px;
}

.ms-account-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ms-form-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.ms-form-row .ms-auth-field {
	flex: 1 1 160px;
}

.ms-account-form .ms-btn {
	align-self: flex-start;
}

.ms-auth-field select {
	width: 100%;
	border: 1px solid var(--ms-border);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	font-family: inherit;
	background: var(--ms-card);
	color: var(--ms-text);
}

.ms-auth-field input:disabled {
	background: var(--ms-background);
	color: var(--ms-text-muted);
	cursor: not-allowed;
}

.ms-auth-field small {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: var(--ms-text-muted);
}

.ms-account-sessions {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--ms-border);
}

.ms-account-sessions p {
	font-size: 13px;
	color: var(--ms-text-muted);
	margin-bottom: 12px;
}

/* Atalhos ----------------------------------------------------------------- */

.ms-account-links li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ms-border);
	font-size: 14px;
}

.ms-account-links li:last-child a {
	border-bottom: 0;
}

.ms-account-linkicon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: var(--ms-accent-bg, var(--ms-soft-bg, #f3e8ff));
	color: var(--ms-accent-text, var(--ms-soft-text, #7c3aed));
	flex: none;
}

.ms-account-chevron {
	margin-left: auto;
	color: var(--ms-text-muted);
	font-size: 18px;
}

.ms-account-links li a:hover .ms-account-chevron {
	color: var(--ms-primary);
}

.ms-account-logout {
	margin-top: 18px;
	color: #dc2626;
}

.ms-account-logout:hover {
	color: #b91c1c;
	border-color: #fecaca;
}

@media (max-width: 1100px) {
	.ms-account-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.ms-account-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	.ms-account-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ms-account-avatar {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
}

/* =======================================================================
   Notificações
   ======================================================================= */

.ms-notify {
	position: relative;
}

.ms-notify-panel[hidden] {
	display: none;
}

.ms-notify-panel {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	width: 330px;
	max-height: 420px;
	overflow-y: auto;
	background: var(--ms-card);
	border: 1px solid var(--ms-border);
	border-radius: 14px;
	box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
	z-index: 60;
}

.ms-notify-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ms-border);
	position: sticky;
	top: 0;
	background: var(--ms-card);
}

.ms-notify-head strong {
	font-size: 14px;
}

.ms-notify-head button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	color: var(--ms-primary);
}

.ms-notify-list li {
	border-bottom: 1px solid var(--ms-border);
}

.ms-notify-list li:last-child {
	border-bottom: 0;
}

.ms-notify-list li > * {
	display: block;
	padding: 12px 16px;
}

.ms-notify-list li.is-unread > * {
	background: color-mix(in srgb, var(--ms-accent-bg, var(--ms-soft-bg, #f3e8ff)) 60%, transparent);
}

.ms-notify-list li a:hover {
	background: color-mix(in srgb, var(--ms-accent-bg, var(--ms-soft-bg, #f3e8ff)) 90%, transparent);
}

.ms-notify-list strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 2px;
}

.ms-notify-list span {
	display: block;
	font-size: 13px;
	color: var(--ms-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ms-notify-list small {
	display: block;
	font-size: 11px;
	color: var(--ms-text-muted);
	margin-top: 4px;
}

.ms-notify-empty {
	padding: 28px 16px;
	text-align: center;
	color: var(--ms-text-muted);
	font-size: 13px;
}

@media (max-width: 520px) {
	.ms-notify-panel {
		width: min(330px, calc(100vw - 24px));
		right: -60px;
	}
}

/* =======================================================================
   Categorias em linha + refinamento visual do dashboard
   ======================================================================= */

/*
 * A fila de categorias quebra em várias linhas, como os filtros de Meus
 * Pacotes, da Loja e dos Efeitos Sonoros.
 *
 * Antes ela era um trilho horizontal com a barra de rolagem escondida
 * (`overflow-x: auto` + `scrollbar-width: none`). No papel era um carrossel;
 * na prática, quem estava no desktop com mouse não tinha nem como saber que
 * havia mais categorias à direita, nem como chegar até elas — a última
 * aparecia cortada na borda e ponto final. Esconder a barra só faz sentido
 * onde o dedo arrasta, então o trilho ficou restrito ao celular.
 */
.ms-cat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 2px 10px;
	margin: 22px 0 4px;
}

.ms-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 9px 15px;
	border-radius: 999px;
	border: 1px solid var(--ms-border);
	background: var(--ms-card);
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	scroll-snap-align: start;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.ms-cat-pill:hover {
	border-color: color-mix(in srgb, var(--ms-cat-color, var(--ms-primary)) 55%, var(--ms-border));
	background: color-mix(in srgb, var(--ms-cat-color, var(--ms-primary)) 7%, var(--ms-card));
	transform: translateY(-1px);
}

.ms-cat-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
	background: var(--ms-cat-color, var(--ms-primary));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-cat-color, var(--ms-primary)) 18%, transparent);
}

.ms-cat-pill em {
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	color: var(--ms-text-muted);
	background: color-mix(in srgb, var(--ms-border) 55%, transparent);
	padding: 2px 7px;
	border-radius: 999px;
}

.ms-cat-pill.is-all .ms-cat-dot {
	background: var(--ms-text-muted);
	box-shadow: none;
}

/* Títulos de seção com mais presença ------------------------------------- */

.ms-section-title {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ms-section-head {
	margin: 26px 0 12px;
}

/* Cards de pacote mais elegantes ----------------------------------------- */

.ms-card-pack {
	border-radius: calc(var(--ms-radius) + 2px);
	overflow: hidden;
}

.ms-card-media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.ms-card-pack:hover .ms-card-media::after {
	opacity: 1;
}

.ms-card-pack:hover {
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.12);
	border-color: color-mix(in srgb, var(--ms-primary) 30%, var(--ms-border));
}

.ms-card-tag {
	background: rgba(15, 23, 42, 0.7);
	backdrop-filter: blur(6px);
	letter-spacing: 0.06em;
}

.ms-card-body {
	padding: 14px 14px 8px;
}

.ms-card-title {
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Estatísticas laterais --------------------------------------------------- */

.ms-stat {
	position: relative;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.ms-stat:hover {
	border-color: color-mix(in srgb, var(--ms-primary) 35%, var(--ms-border));
}

.ms-stat strong {
	font-size: 26px;
	letter-spacing: -0.03em;
}

.ms-stat-icon {
	background: var(--ms-accent-bg, color-mix(in srgb, var(--ms-primary) 12%, transparent));
	color: var(--ms-accent-text, var(--ms-primary));
}

/* Banner com leve profundidade ------------------------------------------- */

.ms-banner {
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
	overflow: hidden;
	position: relative;
}

.ms-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.12) 45%, transparent 70%);
	pointer-events: none;
}

.ms-banner-inner {
	z-index: 2;
}

/* Lista de downloads recentes -------------------------------------------- */

.ms-recent-downloads {
	border-radius: calc(var(--ms-radius) + 2px);
}

.ms-list-thumb {
	border-radius: 12px;
}

html[data-ms-theme="dark"] .ms-card-pack:hover {
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

html[data-ms-theme="dark"] .ms-banner {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

@media (max-width: 640px) {
	/*
	 * Botões um pouco menores para a janela inteira (setas + seis números +
	 * atalhos das pontas) caber numa linha só na tela do celular.
	 */
	.ms-pagination {
		gap: 4px;
	}

	.ms-pagination a {
		min-width: 32px;
		height: 32px;
		padding: 0 6px;
		font-size: 12px;
	}


	/*
	 * No celular volta a ser trilho: dezesseis categorias empilhadas
	 * empurrariam os pacotes para fora da primeira tela, e aqui o arraste
	 * com o dedo é gesto natural — a barra escondida não esconde nada.
	 */
	.ms-cat-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
		margin: 18px -16px 4px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.ms-cat-row::-webkit-scrollbar {
		display: none;
	}
}

/* =======================================================================
   Cantos mais retos, no mesmo padrão dos botões
   ======================================================================= */

/* Categorias do dashboard */
.ms-cat-pill {
	border-radius: 10px;
}

.ms-cat-pill em {
	border-radius: 6px;
}

/* Filtros de Meus Pacotes, Efeitos Sonoros e Loja */
.ms-tab {
	border-radius: 10px;
}

.ms-chip {
	border-radius: 10px;
}

/* Etiquetas e status */
.ms-eyebrow,
.ms-badge-count,
.ms-order-status,
.ms-license-status,
.ms-card-owned,
.ms-sfx-cat {
	border-radius: 7px;
}

.ms-card-tag,
.ms-card-off {
	border-radius: 6px;
}

/* Cards voltam ao raio base, sem o acréscimo */
.ms-card-pack,
.ms-recent-downloads {
	border-radius: var(--ms-radius);
}

/* Paginação e player alinhados ao mesmo padrão */
.ms-pagination a {
	border-radius: 10px;
}

.ms-sound-player {
	border-radius: 10px;
}

.ms-license-key {
	border-radius: 8px;
}

/* Favoritar e ações redondas ficam quadradas com canto suave */
.ms-fav {
	border-radius: 9px;
}

.ms-card-play {
	border-radius: 12px;
}

/* Ícone SVG das categorias ------------------------------------------------ */

.ms-cat-svg,
.ms-cat-img {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--ms-cat-color, var(--ms-primary));
}

.ms-cat-svg svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ms-cat-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 4px;
}

.ms-tab .ms-cat-svg,
.ms-tab .ms-cat-img,
.ms-tab .ms-cat-dot {
	margin-right: -2px;
}

.ms-tab.is-active .ms-cat-svg,
.ms-tab.is-active .ms-cat-img {
	color: #fff;
}

.ms-tab.is-active .ms-cat-dot {
	background: #fff;
	box-shadow: none;
}

/* Ícone de categoria: herdar a cor quando pedido ------------------------- */

.ms-cat-svg.is-recolor svg [fill]:not([fill="none"]),
.ms-cat-svg.is-recolor svg path:not([fill]),
.ms-cat-svg.is-recolor svg circle:not([fill]),
.ms-cat-svg.is-recolor svg rect:not([fill]) {
	fill: currentColor;
}

.ms-cat-svg.is-recolor svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.ms-cat-svg svg {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

/* Cor da categoria por tema ----------------------------------------------- */

.ms-cat-pill,
.ms-tab,
.ms-cat-card {
	--ms-cat-color: var(--ms-cat-light, var(--ms-primary));
}

html[data-ms-theme="dark"] .ms-cat-pill,
html[data-ms-theme="dark"] .ms-tab,
html[data-ms-theme="dark"] .ms-cat-card {
	/* Sem cor escura definida, usa a clara. */
	--ms-cat-color: var(--ms-cat-dark, var(--ms-cat-light, var(--ms-primary)));
}

/* Cor configurável dos filtros não selecionados --------------------------- */

/*
 * Mesma armadilha do menu lateral: abas e categorias são <a>, e
 * `.ms-app a:not(.ms-btn) { color: inherit }` pesa (0,2,1). O fundo pegava
 * (background não está em disputa), a COR DO TEXTO não — "Texto do filtro não
 * selecionado" era um campo que gravava e não pintava nada.
 */
.ms-app a.ms-tab,
.ms-app a.ms-cat-pill,
.ms-app .ms-tab,
.ms-app .ms-cat-pill,
.ms-tab,
.ms-cat-pill {
	background: var(--ms-tab-bg, var(--ms-card));
	color: var(--ms-tab-text, var(--ms-text));
}

.ms-app .ms-tab.is-active,
.ms-tab.is-active {
	background: var(--ms-primary);
	color: var(--ms-button-text, #fff);
}

/* Texto do menu lateral, independente do texto principal ------------------ */

/*
 * O prefixo `.ms-app` aqui não é enfeite — é a mesma armadilha que já tinha
 * deixado o botão "Download" de duas cores.
 *
 * Os itens do menu são <a>, e lá em cima existe `.ms-app a:not(.ms-btn) {
 * color: inherit }`. Esse seletor pesa (0,2,1) por causa do :not(); um
 * `.ms-nav-item.is-active` sozinho pesa (0,2,0) e PERDE — e `.ms-app` na
 * frente ainda não basta para o item NÃO ativo, porque (0,2,0) continua
 * perdendo de (0,2,1); só com o `a` no seletor os pesos empatam e vence quem
 * vem depois no arquivo. Resultado do bug: a cor
 * escolhida em "Texto do item selecionado" era calculada, gravada, enviada
 * para a página... e descartada na cascata. O item ativo continuava com a cor
 * do texto normal da barra lateral, fosse qual fosse o valor no painel.
 *
 * Com `.ms-app` na frente os pesos ficam (0,3,1) e (0,2,1) — o primeiro ganha
 * por especificidade, o segundo por vir depois no arquivo.
 */
.ms-app a.ms-nav-item,
.ms-app .ms-nav-item,
.ms-nav-item,
.ms-app .ms-brand-text strong,
.ms-brand-text strong,
.ms-app .ms-collapse,
.ms-collapse {
	color: var(--ms-sidebar-text, var(--ms-text));
}

.ms-app .ms-nav-item.is-active,
.ms-nav-item.is-active {
	color: var(--ms-active-text, var(--ms-primary));
}

.ms-collapse {
	opacity: 0.75;
}

.ms-collapse:hover {
	opacity: 1;
	color: var(--ms-sidebar-text, var(--ms-text));
}

/* =======================================================================
   Pacotes recentes: sempre uma linha cheia, sem buraco à direita
   ======================================================================= */

.ms-grid-recent {
	/* auto-fit colapsa as colunas vazias; auto-fill as mantém e deixa o vão. */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	grid-auto-rows: 0;
	overflow: hidden;
}

/* Mostramos apenas o que cabe em uma linha, conforme a largura. */
.ms-grid-recent > * {
	visibility: visible;
}

.ms-grid-recent > :nth-child(n + 5) {
	display: none;
}

@media (min-width: 1100px) {
	.ms-grid-recent > :nth-child(-n + 5) {
		display: flex;
	}

	.ms-grid-recent > :nth-child(n + 6) {
		display: none;
	}
}

@media (min-width: 1400px) {
	.ms-grid-recent > :nth-child(-n + 6) {
		display: flex;
	}

	.ms-grid-recent > :nth-child(n + 7) {
		display: none;
	}
}

@media (min-width: 1750px) {
	.ms-grid-recent > :nth-child(-n + 7) {
		display: flex;
	}

	.ms-grid-recent > :nth-child(n + 8) {
		display: none;
	}
}

@media (min-width: 2050px) {
	.ms-grid-recent > :nth-child(-n + 8) {
		display: flex;
	}
}

@media (max-width: 640px) {
	.ms-grid-recent > :nth-child(-n + 4) {
		display: flex;
	}

	.ms-grid-recent > :nth-child(n + 5) {
		display: none;
	}
}

.ms-grid-recent {
	grid-auto-rows: auto;
}

/* =======================================================================
   Sanfona de categorias no menu lateral
   ======================================================================= */

.ms-nav-group {
	margin-top: 14px;
}

.ms-nav-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: 0;
	padding: 6px 12px;
	cursor: pointer;
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ms-text-muted);
}

.ms-nav-toggle:hover {
	color: var(--ms-sidebar-text, var(--ms-text));
}

.ms-nav-chevron {
	width: 14px;
	height: 14px;
	transition: transform 0.2s ease;
}

.ms-nav-group.is-closed .ms-nav-chevron {
	transform: rotate(-90deg);
}

.ms-nav-sub {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 4px;
	max-height: 320px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.ms-nav-group.is-closed .ms-nav-sub {
	display: none;
}

.ms-nav-cat {
	font-size: 13px;
	padding: 8px 12px;
}

.ms-nav-cat .ms-cat-svg,
.ms-nav-cat .ms-cat-img {
	width: 16px;
	height: 16px;
}

.ms-nav-cat .ms-cat-dot {
	width: 8px;
	height: 8px;
	margin: 0 4px;
}

.ms-nav-cat em {
	margin-left: auto;
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	color: var(--ms-text-muted);
}

.ms-nav-cat.is-active em {
	color: inherit;
	opacity: 0.75;
}

/* Sidebar recolhida: a sanfona some junto com os rótulos. */
.ms-app.is-collapsed .ms-nav-group {
	display: none;
}

/* Banner da biblioteca de áudio ------------------------------------------ */

.ms-sfx-banner {
	margin-top: 22px;
	margin-bottom: 0;
	min-height: auto;
	padding: 24px 30px;
}

.ms-sfx-banner h2 {
	font-size: 22px;
}

.ms-sfx-banner p {
	font-size: 14px;
}