/* ==========================================================================
   L2SHIELD - TEMA DO PAINEL (UCP)

   ESTRUTURA NOVA. A versao anterior repetia a logica do tema herdado:
   barra horizontal centralizada no topo, arte do jogo em tela cheia atras
   de tudo e uma coluna de cards translucidos flutuando sobre a arte. Isso
   deixava o texto ilegivel e fazia cada pagina parecer a home do site.

   Agora o painel e um CONSOLE de duas colunas:

     .shd-app  (grid 264px | 1fr)
       .shd-side      coluna fixa: conta, carteira, menu agrupado, idioma
       .shd-content   coluna de trabalho
         .shd-bar     barra de contexto (sticky)
         .shd-view    conteudo da pagina
         .shd-foot    rodape enxuto de uma linha

   Decisoes visuais, todas opostas as do tema antigo:
     - superficies OPACAS. Nada de vidro/blur sobre a arte.
     - a arte do jogo virou .shd-backdrop: fixa, escurecida, dessaturada e
       com vinheta. Aparece so nas beiradas, nunca atras de texto.
     - o destaque laranja e usado em FILETES (barra de 2px no item ativo,
       filete no topo das metricas) em vez de areas preenchidas.
     - numeros em fonte tabular, para as colunas nao dancarem.
     - a fonte de titulo (StrongSword) fica so em titulo de pagina e de card.

   Contrato de DOM: os nomes de classe das paginas continuam os mesmos
   (.sup-* nos componentes, mais a camada legado), para nao precisar mexer
   nos arquivos PHP. Somente o shell trocou de .ucp-nav-*/.ucp-footer-*
   para .shd-*.

   Carregado por ultimo (depois de global.css), entao vence no cascade.

   Ordem do arquivo:
      1. fontes              7. botoes             13. resumo do pedido
      2. tokens              8. cards              14. tabelas
      3. base                9. cabecalho          15. personagens
      4. backdrop           10. metricas           16. confirmacao
      5. console            11. formularios        17. camada legado
      6. acesso             12. quantidade         18. responsivo
   ========================================================================== */


/* ==========================================================================
   1. FONTES - as mesmas do site
   ========================================================================== */
@font-face {
	font-display: swap;
	font-family: "SegoeUI";
	font-style: normal;
	font-weight: 400;
	src: url(../../assets/site/templates/default/fonts/SegoeUI-Regular.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "SegoeUI";
	font-style: normal;
	font-weight: 600;
	src: url(../../assets/site/templates/default/fonts/SegoeUI-SemiBold.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "StrongSword";
	font-style: normal;
	font-weight: 400;
	src: url(../../assets/site/templates/default/fonts/StrongSword-Regular.woff2) format("woff2");
}

@font-face {
	font-display: swap;
	font-family: "AlbertusMedium";
	font-style: normal;
	font-weight: 400;
	src: url(../../assets/site/templates/default/fonts/AlbertusMedium-Regular.woff2) format("woff2");
}


/* ==========================================================================
   2. TOKENS
   ========================================================================== */
/* --------------------------------------------------------------------------
   Os tokens abaixo ESPELHAM os do site, nao sao invencao do painel.

   Fonte da verdade: assets/site/templates/default/css/app.css, que e a
   primeira folha que o site carrega (ordem real: app.css -> addition.css ->
   theme.css). Atencao: existe um main.css no mesmo diretorio, com outra
   paleta (accent #d3b681, raio 0), mas ele NAO e carregado pelo site -- e
   sobra do template rippado. Nao use aquele arquivo como referencia.

   Mapa site -> painel:
     --accent-color        #ed9f4d   -> NAO usado como accent (ver abaixo)
     --primary-color       #1b2f3b   -> base das superficies
     --bg-secondary-color  #2b2b2b   -> --shield-panel-2
     --accordion-bg        #2e343b   -> superficie elevada
     --success-color       #71a40f   -> --shield-ok
     --danger-color        #ed2b2b   -> --shield-bad
     --font-primary        SegoeUI         -> --shield-font
     --font-secondary      StrongSword     -> --shield-display
     --font-tertiary       AlbertusMedium  -> --shield-button
     --border-radius       10px      -> --shield-radius
     --border-radius-md    8px       -> --shield-radius-sm

   A borda e a superficie vem do tratamento de card do site (.files-card):
     background-color: rgba(19, 21, 27, .55)
     border: 1px solid rgba(55, 48, 43, .9)

   O ACCENT nao e o laranja do site: e o ciano da logo (#35c1e0). O laranja
   #ed9f4d do --accent-color continua sendo a cor de destaque do SITE, mas no
   painel ele dominava a tela (item ativo, saldo, totais, filetes) e o
   conjunto lia como quente, quando o L2Shield e azul. O ciano foi escolhido
   por medicao: 8.56:1 sobre a superficie do painel, contra 8.40:1 do
   laranja -- mesmo peso, familia certa.

   Unico desvio consciente: o painel usa a superficie mais opaca (.86 em vez
   de .55). Com .55 sobre a arte de fundo, tabela e formulario ficavam
   ilegiveis -- o site usa aquele alpha em cards curtos sobre area escura,
   nao em paginas densas de dados.
   -------------------------------------------------------------------------- */
:root {
	/* Destaque - identico ao --accent-color do site */
	--shield-accent: #35c1e0;
	--shield-accent-hi: #6fd6ee;
	--shield-accent-soft: rgba(53, 193, 224, .13);

	/* Superficies: familia azul-esverdeada do site (#1b2f3b / #2e343b),
	   nao o quase-preto neutro que o painel usava antes */
	--shield-void: #10161c;
	--shield-bg: #141b22;
	--shield-side: #121820;
	--shield-panel: rgba(19, 21, 27, .86);
	--shield-panel-2: #2b2b2b;
	--shield-panel-3: #2e343b;
	--shield-panel-soft: rgba(255, 255, 255, .04);
	--shield-panel-solid: #191d24;

	/* Tracos - o marrom quente do site, nao branco transparente */
	--shield-line: rgba(55, 48, 43, .9);
	--shield-line-2: rgba(90, 78, 66, .95);
	--shield-line-strong: rgba(53, 193, 224, .45);

	/* Texto - --font-primary-color do site e #fff */
	--shield-ink: #fff;
	--shield-muted: #c7ced6;
	--shield-dim: #8b95a1;

	/* Estado - iguais aos do site */
	--shield-ok: #71a40f;
	--shield-bad: #ed2b2b;
	/* O #ed2b2b do site nao alcanca AA como texto sobre a superficie do
	   painel (3.45:1). Fica para borda, icone e preenchimento; texto de
	   erro usa este tom claro derivado dele. */
	--shield-bad-text: #ff9a95;
	/* O site nao define cor de aviso; este ambar fica entre o accent e o ok */
	--shield-warn: #e0a52c;

	/* Tipografia - os tres papeis do site */
	--shield-font: "SegoeUI", system-ui, -apple-system, sans-serif;
	--shield-display: "StrongSword", "SegoeUI", sans-serif;
	--shield-button: "AlbertusMedium", "SegoeUI", sans-serif;

	/* Formas - --border-radius e --border-radius-md do site */
	--shield-radius: 10px;
	--shield-radius-sm: 8px;

	/* Arte de botao do site. Nao e resquicio do tema antigo: sao os
	   arquivos que o proprio site usa em .btn / .btn--accent /
	   .btn--secondary, e foi erro meu ter removido antes. */
	--shield-btn: url(../../assets/site/templates/default/img/btn-bg.png);
	--shield-btn-accent: url(../../assets/site/templates/default/img/btn-accent-bg.png);
	--shield-btn-alt: url(../../assets/site/templates/default/img/btn-secondary.png);

	/* Medidas do console */
	--shield-side-w: 264px;
	--shield-bar-h: 56px;
	--shield-shell: 1180px;
	--shield-gut: 30px;

	--shield-trans: color .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease, filter .18s ease;

	/* ----------------------------------------------------------------------
	   ESCALA TIPOGRAFICA

	   Nove passos, todos inteiros. Antes eram 33 tamanhos diferentes, 78
	   declaracoes em px fracionado. Qualquer tamanho novo deve entrar aqui,
	   nao no componente.
	   ---------------------------------------------------------------------- */
	--fz-xs: 11px;
	--fz-sm: 12px;
	--fz-md: 13px;
	--fz-base: 14px;
	--fz-lg: 16px;
	--fz-h3: 18px;
	--fz-h2: 22px;
	--fz-h1: 26px;
	--fz-hero: 28px;

	/* Dois espacamentos de letra, em vez de quinze valores avulsos */
	--ls-wide: .08em;
	--ls-tight: .01em;

	/* Escala de espacamento */
	--sp-1: 6px;
	--sp-2: 10px;
	--sp-3: 16px;
	--sp-4: 22px;
}


/* ==========================================================================
   3. BASE
   ========================================================================== */
body.ucp-body {
	background-color: var(--shield-bg);
	color: var(--shield-ink);
	font-family: var(--shield-font);
	font-size: var(--fz-base);
	line-height: 1.6;
	margin: 0;
	min-height: 100vh;
	/* O padding-top do tema antigo compensava a navbar fixa. Nao existe mais. */
	padding: 0;
}

/* Trava o scroll do fundo quando a gaveta do menu esta aberta */
body.shd-locked {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Estas regras de base sao escritas SEM o prefixo .ucp-body de proposito.

   Com o prefixo, ".ucp-body a" tinha especificidade (0,1,1) e vencia
   qualquer componente escrito com uma classe (0,1,0). O resultado pratico:
   a cor de link laranja se aplicava a TODO link do painel, inclusive os
   itens do menu lateral, que deveriam ser neutros e so acender no ativo.
   O mesmo acontecia com ".ucp-body h2", cujo "margin: 0 0 10px" atropelava
   o "margin: 0" do .sup-card__title.

   Como esta folha e carregada apenas dentro do painel, o prefixo nao
   protegia nada: so quebrava a hierarquia base < componente.
   -------------------------------------------------------------------------- */
a {
	color: var(--shield-accent);
	text-decoration: none;
	transition: var(--shield-trans);
}
a:hover {
	color: var(--shield-accent-hi);
}
h1,
h2,
h3 {
	font-family: var(--shield-display);
	font-weight: 400;
	letter-spacing: var(--ls-tight);
	line-height: 1.3;
	margin: 0 0 10px;
}
h1 {
	font-size: var(--fz-h1);
}
h2 {
	font-size: var(--fz-h3);
}
h3 {
	font-size: var(--fz-lg);
}
img {
	max-width: 100%;
}

/* Todo numero do painel usa largura fixa de digito */
input,
table,
td {
	font-variant-numeric: tabular-nums;
}
::selection {
	background-color: var(--shield-accent);
	color: #10131a;
}

/* Barra de rolagem alinhada ao tema */
* {
	scrollbar-color: var(--shield-line-2) transparent;
	scrollbar-width: thin;
}
*::-webkit-scrollbar {
	height: 8px;
	width: 8px;
}
*::-webkit-scrollbar-thumb {
	background-color: var(--shield-line-2);
	border-radius: 4px;
}
*::-webkit-scrollbar-track {
	background-color: transparent;
}


/* ==========================================================================
   4. BACKDROP

   A arte do jogo era o fundo da pagina toda e competia com o conteudo.
   Agora ela e FIXA, escura e desfocada, so para o painel nao ficar chapado.
   ========================================================================== */
.shd-backdrop {
	background-color: var(--shield-void);
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
	z-index: 0;
}
.shd-backdrop::before {
	background-image: url(../../assets/site/templates/default/img/modern/newbg.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	/* Era saturate(.35) brightness(.5) blur(3px) com opacity .3: a arte
	   praticamente desaparecia. Agora ela e visivel; a legibilidade fica
	   por conta dos paineis, que sao opacos. */
	filter: saturate(.85) brightness(.92) blur(1px);
	inset: -6px;
	opacity: .72;
	position: absolute;
}

/* Vinheta: escurece as beiradas e o rodape, deixando o miolo da arte
   aparecer. Antes fechava em .92 de preto ja em 62% do raio. */
.shd-backdrop::after {
	background:
		radial-gradient(125% 95% at 50% 12%, rgba(7, 9, 16, 0) 0%, rgba(7, 9, 16, .32) 55%, rgba(7, 9, 16, .78) 100%),
		linear-gradient(to bottom, rgba(7, 9, 16, .18) 0%, rgba(7, 9, 16, .1) 40%, rgba(7, 9, 16, .8) 100%);
	content: "";
	inset: 0;
	position: absolute;
}


/* ==========================================================================
   5. CONSOLE
   ========================================================================== */
.shd-app {
	display: grid;
	grid-template-columns: var(--shield-side-w) minmax(0, 1fr);
	min-height: 100vh;
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------- coluna fixa (esquerda) */
.shd-side {
	align-self: start;
	background-color: var(--shield-side);
	border-right: 1px solid var(--shield-line);
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100vh;
	overflow-y: auto;
	padding: 18px 14px 20px;
	position: sticky;
	top: 0;
}
.shd-side__head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 0 6px;
}
.shd-brand {
	display: inline-block;
	line-height: 0;
}
.shd-brand__img {
	height: auto;
	width: 128px;
}


/* ==========================================================================
   5b. HOVER DA LOGO

   Contido de proposito: um pulso curto de escala e um brilho que acompanha
   o contorno da marca. Nada mais.

   O que estava aqui antes e saiu:
     - um clarao radial em ::before com 240% da caixa
     - um anel de onda de choque em ::after com 130% da caixa
   Alem de exagerados, os dois ficavam ELIPTICOS: eu dimensionei em
   porcentagem da caixa da logo, que e larga e baixa (150x55), entao o
   "circulo" saia como um oval achatado bem maior que a marca.

   O brilho agora e drop-shadow na propria imagem, que segue o recorte do
   PNG. Sem pseudo elemento, sem geometria para dar errado e sem risco de
   cobrir o <a> e engolir o clique.
   ========================================================================== */
.shd-brand img,
.shd-guest__brand img {
	transition: var(--shield-trans);
}
.shd-brand:hover img,
.shd-brand:focus-visible img,
.shd-guest__brand:hover img,
.shd-guest__brand:focus-visible img {
	animation: shd-logo-pulse .5s ease-out;
	filter: brightness(1.15) drop-shadow(0 0 6px rgba(53, 193, 224, .45));
}

@keyframes shd-logo-pulse {
	0% {
		transform: scale(1);
	}

	30% {
		transform: scale(1.035);
	}

	100% {
		transform: scale(1);
	}
}

/* Quem pede menos animacao fica so com o brilho, sem o pulso de escala. */
@media (prefers-reduced-motion: reduce) {
.shd-brand:hover img,
.shd-brand:focus-visible img,
.shd-guest__brand:hover img,
.shd-guest__brand:focus-visible img {
		animation: none;
	}
}

/* Botao de fechar: so aparece quando a coluna e gaveta */
.shd-side__close {
	background: none;
	border: 0;
	color: var(--shield-muted);
	cursor: pointer;
	display: none;
	font-size: var(--fz-h3);
	line-height: 1;
	padding: 6px;
}

/* ------------------------------------------------------- cartao da conta */
.shd-me {
	align-items: center;
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius);
	display: flex;
	gap: 11px;
	padding: 11px 12px;
}
.shd-me__pic {
	flex: none;
	line-height: 0;
	position: relative;
}
.shd-me__av {
	border-radius: var(--shield-radius-sm);
	display: block;
	height: 40px;
	object-fit: cover;
	width: 40px;
}

/* Pontinho de online no canto do avatar */
.shd-me__pic_on::after {
	background-color: var(--shield-ok);
	border: 2px solid var(--shield-panel);
	border-radius: 50%;
	bottom: -2px;
	content: "";
	height: 10px;
	position: absolute;
	right: -2px;
	width: 10px;
}
.shd-me__id {
	display: grid;
	min-width: 0;
}
.shd-me__name {
	color: var(--shield-ink);
	font-size: var(--fz-base);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.shd-me__meta {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------- carteira */
.shd-wallet {
	align-items: center;
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-left: 2px solid var(--shield-accent);
	border-radius: var(--shield-radius);
	display: flex;
	gap: 10px;
	justify-content: space-between;
	padding: 10px 12px;
	transition: var(--shield-trans);
}
.shd-wallet:hover {
	background-color: var(--shield-panel-2);
}
.shd-wallet__text {
	display: grid;
	min-width: 0;
}
.shd-wallet__label {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.shd-wallet__value {
	color: var(--shield-accent);
	font-family: var(--shield-display);
	font-size: var(--fz-h3);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.shd-wallet__add {
	align-items: center;
	border: 1px solid var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-accent);
	display: flex;
	flex: none;
	font-size: var(--fz-xs);
	height: 26px;
	justify-content: center;
	width: 26px;
}

/* ----------------------------------------------------- menu por assunto */
.shd-nav {
	display: grid;
	gap: 16px;
}
.shd-nav__group {
	display: grid;
	gap: 1px;
}
.shd-nav__title {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	letter-spacing: var(--ls-wide);
	margin: 0 0 6px;
	padding-left: 12px;
	text-transform: uppercase;
}
.shd-nav__item {
	align-items: center;
	border-left: 2px solid transparent;
	border-radius: 0 var(--shield-radius-sm) var(--shield-radius-sm) 0;
	color: var(--shield-muted);
	display: flex;
	font-size: var(--fz-md);
	gap: 11px;
	padding: 9px 12px 9px 10px;
	transition: var(--shield-trans);
}
.shd-nav__item:hover {
	background-color: var(--shield-panel-soft);
	color: var(--shield-ink);
}

/* Item ativo: filete no lado, sem pilula colorida */
.shd-nav__item_on {
	background-color: var(--shield-accent-soft);
	border-left-color: var(--shield-accent);
	color: var(--shield-accent);
}

/* Slot fixo para o icone, senao os rotulos nao alinham entre si */
.shd-nav__ico {
	flex: none;
	font-size: var(--fz-md);
	opacity: .85;
	text-align: center;
	width: 18px;
}
.shd-nav__label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.shd-nav__out {
	color: var(--shield-dim);
	flex: none;
	font-size: var(--fz-xs);
}

/* --------------------------------------------------- pe da coluna fixa */
.shd-side__foot {
	border-top: 1px solid var(--shield-line);
	display: grid;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
}
.shd-langs {
	display: flex;
	gap: 6px;
}
.shd-lang {
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-dim);
	flex: 1;
	font-size: var(--fz-xs);
	letter-spacing: var(--ls-wide);
	padding: 6px 0;
	text-align: center;
	transition: var(--shield-trans);
}
.shd-lang:hover {
	border-color: var(--shield-line-2);
	color: var(--shield-ink);
}
.shd-lang_on {
	border-color: var(--shield-accent);
	color: var(--shield-accent);
}
.shd-out {
	align-items: center;
	color: var(--shield-dim);
	display: flex;
	font-size: var(--fz-sm);
	gap: 9px;
	padding: 4px 10px;
	transition: var(--shield-trans);
}
.shd-out:hover {
	color: var(--shield-bad-text);
}

/* ------------------------------------------------ coluna de conteudo */
.shd-content {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-width: 0;
}

/* Barra de contexto: diz onde voce esta, no lugar do titulo flutuando na arte */
.shd-bar {
	align-items: center;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background-color: rgba(12, 15, 22, .92);
	border-bottom: 1px solid var(--shield-line);
	display: flex;
	gap: 12px;
	min-height: var(--shield-bar-h);
	padding: 0 var(--shield-gut);
	position: sticky;
	top: 0;
	z-index: 20;
}
.shd-bar__burger {
	background: none;
	border: 1px solid var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-ink);
	cursor: pointer;
	display: none;
	font-size: var(--fz-base);
	height: 34px;
	width: 34px;
}
.shd-bar__where {
	align-items: center;
	display: flex;
	gap: 9px;
	margin: 0;
	min-width: 0;
}
.shd-bar__crumb {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}
.shd-bar__where > i {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
}
.shd-bar__now {
	color: var(--shield-ink);
	font-size: var(--fz-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Saldo compacto: util quando a coluna da esquerda esta fechada */
.shd-bar__coins {
	align-items: center;
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-accent);
	display: none;
	font-size: var(--fz-sm);
	font-variant-numeric: tabular-nums;
	gap: 7px;
	margin-left: auto;
	padding: 6px 11px;
}
.shd-view {
	flex: 1;
	margin: 0;
	max-width: var(--shield-shell);
	padding: 26px var(--shield-gut) 46px;
	width: 100%;
}
.shd-foot {
	align-items: center;
	border-top: 1px solid var(--shield-line);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	margin-top: auto;
	padding: 16px var(--shield-gut);
}
.shd-foot__txt {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
	margin: 0;
}
.shd-foot__scl {
	display: flex;
	gap: 6px;
}
.shd-foot__scl a {
	align-items: center;
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-dim);
	display: flex;
	font-size: var(--fz-sm);
	height: 28px;
	justify-content: center;
	transition: var(--shield-trans);
	width: 28px;
}
.shd-foot__scl a:hover {
	border-color: var(--shield-accent);
	color: var(--shield-accent);
}

/* Cortina atras da gaveta */
.shd-scrim {
	background-color: rgba(4, 6, 10, .7);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity .18s ease;
	z-index: 40;
}
.shd-scrim_on {
	opacity: 1;
	pointer-events: auto;
}

/* Compatibilidade: as paginas continuam envoltas nestas classes */
.ucp-shell,
.full-dashboard,
.container {
	width: 100%;
}


/* ==========================================================================
   6. ACESSO (visitante)

   Sem coluna lateral: uma unica coluna estreita e centrada, com a marca
   acima do cartao. Nada de card de vidro sobre a arte.
   ========================================================================== */
.shd-guest {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 100vh;
	padding: 40px 18px;
	position: relative;
	z-index: 1;
}
.shd-guest__inner {
	display: grid;
	gap: 22px;
	justify-items: center;
	max-width: 460px;
	padding: 0;
}
.shd-guest__brand {
	line-height: 0;
}
.shd-guest__brand img {
	height: auto;
	width: 150px;
}
.shd-guest__links {
	align-items: center;
	display: flex;
	gap: 6px;
	justify-content: center;
	width: 100%;
}
.shd-guest__links .shd-lang {
	flex: none;
	min-width: 44px;
}
.shd-guest__back {
	align-items: center;
	color: var(--shield-dim);
	display: inline-flex;
	font-size: var(--fz-sm);
	gap: 6px;
	margin-left: auto;
}
.login-form-container {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius);
	padding: 26px 24px 24px;
	width: 100%;
}
.register-header {
	border-bottom: 1px solid var(--shield-line);
	margin-bottom: 20px;
	padding-bottom: 16px;
}
.register-header h1 {
	font-size: var(--fz-h2);
	margin: 0 0 4px;
}
.register-header p {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
	margin: 0;
}
.login-form {
	display: grid;
	gap: 12px;
}

/* -------------------------------------------------------- campos comuns */
.form-group {
	display: block;
	position: relative;
}
.form-group input,
.form-group select,
.form-group textarea {
	background-color: var(--shield-void);
	border: 1px solid var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-ink);
	font-family: inherit;
	font-size: var(--fz-base);
	padding: 11px 13px;
	transition: var(--shield-trans);
	width: 100%;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
	color: var(--shield-dim);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	border-color: var(--shield-accent);
	outline: none;
}

/* -------------------------------------------------- retorno da validacao

   O login-effects.js injetava estas regras pelo <head>, com paleta de outro
   projeto e position:absolute (a mensagem caia sobre o botao de entrar).
   Agora elas moram aqui, no fluxo normal e com os tokens do tema.
   -------------------------------------------------------------------------- */
.error-message,
.success-message {
	align-items: center;
	border-left: 2px solid currentColor;
	display: flex;
	font-size: var(--fz-sm);
	gap: 7px;
	line-height: 1.45;
	margin: 5px 0 0;
	padding: 6px 10px;
}
.error-message {
	background-color: rgba(237, 43, 43, .08);
	color: var(--shield-bad);
}
.success-message {
	background-color: rgba(113, 164, 15, .07);
	color: var(--shield-ok);
}
.error-message i,
.success-message i {
	flex: none;
	font-size: var(--fz-xs);
}

/* O estado do campo e so a borda: sem sombra colorida, sem fundo claro
   (o tema antigo pintava o input de #fef2f2 no erro, quase branco). */
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
	border-color: var(--shield-bad);
}
.form-group.success input,
.form-group.success select,
.form-group.success textarea {
	border-color: var(--shield-ok);
}

/* Botao de acesso: login, cadastro e recuperacao.

   Usa AlbertusMedium (--shield-button), a mesma fonte de botao do site e do
   resto do painel. Antes o global.css forcava --font-display por um seletor
   button[type="submit"], de especificidade maior que esta classe.

   Escrito como button.login-button / input.login-button de proposito: sobe a
   especificidade para (0,1,1) e blinda a regra caso algum seletor por
   elemento+atributo volte a aparecer numa folha carregada depois. */
.login-button,
button.login-button,
input.login-button {
	background-color: transparent;
	background-image: var(--shield-btn-accent);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	font-family: var(--shield-button);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	transition: var(--shield-trans);
	font-size: var(--fz-base);
	line-height: 1.2;
	margin-top: 6px;
	text-align: center;
	align-items: center;
	display: inline-flex;
	flex: none;
	height: 58px;
	justify-content: center;
	padding: 2px 26px 0;
	width: 244px;
}
.login-button:hover,
button.login-button:hover,
input.login-button:hover {
	filter: brightness(1.14);
}
.login-links {
	border-top: 1px solid var(--shield-line);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	margin-top: 6px;
	padding-top: 14px;
}
.login-links a {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.login-links a:hover {
	color: var(--shield-accent);
}

/* ------------------------------------------------------------- captcha */
.captcha-container {
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius-sm);
	display: grid;
	gap: 10px;
	padding: 13px;
}
.captcha-header h3 {
	color: var(--shield-dim);
	font-family: var(--shield-font);
	font-size: var(--fz-xs);
	letter-spacing: var(--ls-wide);
	margin: 0;
	text-transform: uppercase;
}
.captcha-row {
	align-items: center;
	display: flex;
	gap: 10px;
}
.captcha-image {
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius-sm);
	display: block;
	height: auto;
	max-height: none;
	width: 130px;
}
.captcha-refresh {
	align-items: center;
	border: 1px solid var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-muted);
	display: flex;
	flex: none;
	height: 32px;
	justify-content: center;
	width: 32px;
}
.captcha-input-container {
	display: block;
}
.captcha-input-container .form-group {
	margin: 0;
}


/* ==========================================================================
   7. BOTOES

   As artes em PNG do site (btn-bg.png e companhia) sairam: elas traziam a
   silhueta do tema antigo. Aqui os botoes sao retangulos com 1px de borda.
   ========================================================================== */
.sup-btn,
.btn {
	align-items: center;
	background-color: transparent;
	background-image: var(--shield-btn);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--shield-button);
	font-size: var(--fz-md);
	gap: 8px;
	justify-content: center;
	letter-spacing: var(--ls-wide);
	line-height: 1.2;
	text-transform: uppercase;
	transition: var(--shield-trans);
	flex: none;
	height: 52px;
	padding: 2px 22px 0;
	width: 212px;
}
.sup-btn:hover,
.btn:hover {
	filter: brightness(1.18);
}
.sup-btn_ghost {
	background-color: transparent;
}
.sup-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}


/* ==========================================================================
   8. CARDS

   Sem blur e sem badge redondo grande no cabecalho. O cabecalho e um
   filete: numero/icone da etapa num quadrado de 26px, titulo, subtitulo.
   ========================================================================== */
.sup-card {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius);
	margin-bottom: 18px;
	overflow: hidden;
}
.sup-card__head {
	align-items: center;
	border-bottom: 1px solid var(--shield-line);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 15px 20px;
}

/* O terceiro filho do head (saldo, tag de plano) vai para a direita */
.sup-card__head > :last-child:not(:nth-child(-n+2)) {
	margin-left: auto;
}
.sup-step {
	align-items: center;
	border: 1px solid var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-accent);
	display: flex;
	flex: none;
	font-family: var(--shield-display);
	font-size: var(--fz-md);
	height: 28px;
	justify-content: center;
	width: 28px;
}
.sup-card__title {
	font-size: var(--fz-lg);
	margin: 0;
}
.sup-card__sub {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
	margin: 2px 0 0;
}
.sup-card__body {
	display: grid;
	gap: 18px;
	padding: 20px;
}
.sup-empty {
	color: var(--shield-dim);
	display: grid;
	gap: 8px;
	justify-items: center;
	padding: 34px 16px;
	text-align: center;
}
.sup-empty i {
	font-size: var(--fz-h1);
	opacity: .5;
}
.sup-empty p {
	font-size: var(--fz-md);
	margin: 0;
}


/* ==========================================================================
   9. CABECALHO DE PAGINA
   ========================================================================== */
.pg-page {
	display: block;
}
.pg-head {
	align-items: flex-end;
	border-bottom: 1px solid var(--shield-line);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 22px;
	padding-bottom: 16px;
}
.pg-head__text {
	min-width: 0;
}
.pg-head__title {
	font-size: var(--fz-h1);
	margin: 0;
}
.pg-head__sub {
	color: var(--shield-dim);
	font-size: var(--fz-md);
	margin: 4px 0 0;
}


/* ==========================================================================
   10. METRICAS

   Cada bloco tem um filete de 2px no topo em vez de fundo colorido, e o
   numero em fonte de titulo. Grid auto-fit: nunca sobra celula meia-larga.
   ========================================================================== */
.sup-stats {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.sup-stat {
	background-color: var(--shield-panel-2);
	border: 1px solid var(--shield-line);
	border-radius: 0 0 var(--shield-radius-sm) var(--shield-radius-sm);
	display: grid;
	gap: 5px;
	padding: 14px 16px;
}
.sup-stat__label {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.sup-stat__value {
	align-items: center;
	color: var(--shield-ink);
	display: flex;
	font-family: var(--shield-display);
	font-size: var(--fz-h1);
	font-variant-numeric: tabular-nums;
	gap: 8px;
	line-height: 1.15;
}
.sup-stat__value img {
	height: auto;
	max-height: none;
	width: 20px;
}
.sup-stat__value_sm {
	font-size: var(--fz-h3);
}
.sup-stat__sub {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
}
.sup-stat__link {
	align-items: center;
	display: inline-flex;
	font-size: var(--fz-sm);
	gap: 5px;
}
.pg-hint {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}


/* ==========================================================================
   12b. PAGINA DE COMPRA DE COINS

   Namespace proprio .buy-*. Esta pagina nao usa mais nenhuma classe .sup-*,
   que era o conjunto herdado do tema antigo.

   Desenho: caixas de conteudo a esquerda, pedido em trilho fixo a direita.
   Os pacotes sao a escolha primaria; o campo numerico e a alternativa.
   Nao ha slider nem botoes de passo.
   ========================================================================== */
.buy {
	align-items: start;
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(0, 1fr) 296px;
}
.buy__main {
	display: grid;
	gap: 20px;
	min-width: 0;
}

/* ---------------------------------------------------------------- caixas */
.buy-box {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius);
	display: grid;
	gap: 15px;
	padding: 17px 19px 19px;
}
.buy-box__head {
	align-items: baseline;
	border-bottom: 1px solid var(--shield-line);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	padding-bottom: 11px;
}
.buy-box__title {
	color: var(--shield-ink);
	font-family: var(--shield-font);
	font-size: var(--fz-xs);
	font-weight: 600;
	letter-spacing: var(--ls-wide);
	margin: 0;
	text-transform: uppercase;
}
.buy-box__hint {
	align-items: center;
	color: var(--shield-dim);
	display: flex;
	font-size: var(--fz-sm);
	gap: 6px;
	margin: 0;
}

/* Ligado pelo JS quando a quantidade digitada fica abaixo do minimo */
.buy-box__hint_warn {
	color: var(--shield-warn);
}

/* --------------------------------------------------------------- pacotes */
.buy-packs {
	display: grid;
	gap: 9px;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

/* Sao <button>: anulam o estilo padrao do navegador */
.buy-pack {
	background-color: transparent;
	border: 1px solid var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-ink);
	cursor: pointer;
	display: grid;
	font-family: inherit;
	gap: 2px;
	justify-items: center;
	padding: 14px 10px 12px;
	position: relative;
	transition: var(--shield-trans);
}
.buy-pack:hover {
	border-color: var(--shield-line-strong);
}
.buy-pack_on {
	background-color: var(--shield-accent-soft);
	border-color: var(--shield-accent);
}
.buy-pack__bonus {
	background-color: var(--shield-ok);
	border-radius: 0 var(--shield-radius-sm) 0 3px;
	color: #fff;
	font-size: var(--fz-xs);
	font-weight: 600;
	letter-spacing: var(--ls-wide);
	padding: 2px 6px;
	position: absolute;
	right: -1px;
	top: -1px;
}
.buy-pack__qty {
	color: var(--shield-ink);
	font-family: var(--shield-display);
	font-size: var(--fz-h2);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.buy-pack_on .buy-pack__qty {
	color: var(--shield-accent);
}
.buy-pack__price {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------- campo de quantidade */
.buy-field {
	align-items: center;
	border-top: 1px solid var(--shield-line);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 15px;
}
.buy-field__label {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}

/* Campo sublinhado, nao caixa: destaca que e entrada livre e nao um
   controle de valor pre-definido como os pacotes. */
.buy-field__input {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--shield-line-2);
	color: var(--shield-accent);
	flex: 1;
	font-family: var(--shield-display);
	font-size: var(--fz-h2);
	font-variant-numeric: tabular-nums;
	min-width: 90px;
	padding: 4px 2px;
	transition: var(--shield-trans);
}
.buy-field__input:focus {
	border-bottom-color: var(--shield-accent);
	outline: none;
}
.buy-field__input_warn {
	border-bottom-color: var(--shield-warn);
	color: var(--shield-warn);
}
.buy-field__range {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* -------------------------------------------------- metodos de pagamento */
.buy-ways {
	display: grid;
	gap: 9px;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.buy-way {
	background-color: transparent;
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-muted);
	cursor: pointer;
	display: grid;
	font-family: inherit;
	gap: 3px;
	justify-items: start;
	padding: 13px 14px;
	position: relative;
	text-align: left;
	transition: var(--shield-trans);
}
.buy-way:hover {
	border-color: var(--shield-line-2);
}
.buy-way_on {
	background-color: var(--shield-accent-soft);
	border-color: var(--shield-accent);
}
.buy-way__ico {
	color: var(--shield-dim);
	font-size: var(--fz-lg);
	margin-bottom: 3px;
}
.buy-way_on .buy-way__ico {
	color: var(--shield-accent);
}
.buy-way__name {
	color: var(--shield-ink);
	font-size: var(--fz-md);
	font-weight: 600;
}
.buy-way__desc {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
}
.buy-way__tag {
	border: 1px solid rgba(113, 164, 15, .45);
	border-radius: 3px;
	color: var(--shield-ok);
	font-size: var(--fz-xs);
	letter-spacing: var(--ls-wide);
	padding: 2px 5px;
	position: absolute;
	right: 10px;
	text-transform: uppercase;
	top: 11px;
}

/* --------------------------------------------------- trilho de pedido */
.buy__rail {
	min-width: 0;
	position: sticky;
	/* a barra de contexto e sticky no topo, o trilho para logo abaixo dela */
	top: calc(var(--shield-bar-h) + 16px);
}
.buy-order {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius);
	display: grid;
	gap: 13px;
	padding: 15px 17px 17px;
}
.buy-order__title {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	letter-spacing: var(--ls-wide);
	margin: 0;
	text-transform: uppercase;
}
.buy-order__lines {
	display: grid;
	margin: 0;
}
.buy-order__line {
	align-items: baseline;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 7px 0;
}
.buy-order__line + .buy-order__line {
	border-top: 1px solid var(--shield-line);
}
.buy-order__line dt {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.buy-order__line dd {
	color: var(--shield-ink);
	font-size: var(--fz-base);
	font-variant-numeric: tabular-nums;
	margin: 0;
	text-align: right;
}
.buy-order__line_bonus dd {
	color: var(--shield-ok);
	font-size: var(--fz-md);
}
.buy-order__line_get dd {
	color: var(--shield-ink);
	font-weight: 600;
}
.buy-order__total {
	align-items: baseline;
	border-top: 1px solid var(--shield-line-2);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	padding-top: 12px;
}
.buy-order__total-label {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.buy-order__total-value {
	color: var(--shield-accent);
	font-family: var(--shield-display);
	font-size: var(--fz-h1);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.buy-order__go {
	background-color: transparent;
	background-image: var(--shield-btn-accent);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	font-family: var(--shield-button);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	transition: var(--shield-trans);
	font-size: var(--fz-base);
	line-height: 1.2;
	text-align: center;
	align-items: center;
	display: inline-flex;
	flex: none;
	height: 58px;
	justify-content: center;
	padding: 2px 26px 0;
	width: 244px;
}
.buy-order__go:hover {
	filter: brightness(1.14);
}
.buy-order__terms {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	text-align: center;
}
.buy-order__balance {
	border-top: 1px solid var(--shield-line);
	color: var(--shield-dim);
	display: flex;
	font-size: var(--fz-xs);
	gap: 8px;
	justify-content: space-between;
	margin: 0;
	padding-top: 11px;
}
.buy-order__balance strong {
	color: var(--shield-muted);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* ------------------------------------------------------ trilha de bonus */
.buy-bonus {
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius-sm);
	display: grid;
	gap: 8px;
	padding: 11px 13px;
}
.buy-bonus__head {
	align-items: baseline;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}
.buy-bonus__label {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.buy-bonus__now {
	color: var(--shield-dim);
	font-family: var(--shield-display);
	font-size: var(--fz-lg);
	font-variant-numeric: tabular-nums;
	transition: var(--shield-trans);
}
.buy-bonus__now_on {
	color: var(--shield-ok);
}
.buy-bonus__track {
	background-color: var(--shield-void);
	border-radius: 2px;
	display: block;
	height: 3px;
	overflow: hidden;
}
.buy-bonus__fill {
	background-color: var(--shield-accent);
	display: block;
	height: 100%;
	transition: width .18s ease;
	width: 0;
}
.buy-bonus__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	justify-content: space-between;
}
.buy-bonus__step {
	border-left: 2px solid var(--shield-line-2);
	display: grid;
	gap: 1px;
	opacity: .4;
	padding-left: 7px;
	transition: var(--shield-trans);
}
.buy-bonus__step_on {
	border-left-color: var(--shield-ok);
	opacity: 1;
}
.buy-bonus__pct {
	color: var(--shield-ink);
	font-size: var(--fz-xs);
	font-style: normal;
	font-variant-numeric: tabular-nums;
}
.buy-bonus__step_on .buy-bonus__pct {
	color: var(--shield-ok);
}
.buy-bonus__min {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	font-variant-numeric: tabular-nums;
}
.buy-bonus__hint {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	font-variant-numeric: tabular-nums;
	margin: 0;
	min-height: 1em;
}


/* ==========================================================================
   14. TABELAS
   ========================================================================== */
.sup-table-wrap {
	overflow-x: auto;
}
.sup-table {
	border-collapse: collapse;
	font-size: var(--fz-md);
	min-width: 560px;
	width: 100%;
}
.sup-table th {
	border-bottom: 1px solid var(--shield-line-2);
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	font-weight: 600;
	letter-spacing: var(--ls-wide);
	padding: 10px 14px;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}
.sup-table td {
	border-bottom: 1px solid var(--shield-line);
	padding: 12px 14px;
	vertical-align: middle;
}
.sup-table tr:last-child td {
	border-bottom: 0;
}
.sup-table tbody tr {
	transition: var(--shield-trans);
}
.sup-table tbody tr:hover {
	background-color: var(--shield-panel-soft);
}
.sup-td_muted {
	color: var(--shield-dim);
}
.sup-td_strong {
	color: var(--shield-ink);
	font-weight: 600;
}
.paginate {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: center;
	margin-top: 18px;
}
.paginate a,
.paginate span {
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-muted);
	font-size: var(--fz-sm);
	font-variant-numeric: tabular-nums;
	padding: 6px 11px;
}
.paginate .atual {
	border-color: var(--shield-accent);
	color: var(--shield-accent);
}


/* ==========================================================================
   15. PERSONAGENS, BADGES E LINHAS
   ========================================================================== */
.sup-chars {
	display: grid;
	gap: 8px;
}
.sup-char {
	align-items: center;
	background-color: var(--shield-panel-2);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius-sm);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 12px 14px;
}
.sup-char__avatar {
	border-radius: var(--shield-radius-sm);
	flex: none;
	height: 40px;
	max-height: none;
	object-fit: cover;
	width: 40px;
}
.sup-char__id {
	display: grid;
	flex: 1;
	gap: 2px;
	min-width: 130px;
}
.sup-char__name {
	align-items: center;
	color: var(--shield-ink);
	display: flex;
	font-size: var(--fz-base);
	font-weight: 600;
	gap: 7px;
}
.sup-char__class {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}

/* Colunas de numero com largura fixa, para os personagens alinharem */
.sup-char__stat {
	border-left: 1px solid var(--shield-line);
	display: grid;
	flex: none;
	gap: 1px;
	padding-left: 14px;
	width: 76px;
}
.sup-char__stat-val {
	color: var(--shield-ink);
	font-size: var(--fz-base);
	font-variant-numeric: tabular-nums;
}
.sup-char__stat-key {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.sup-char__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-left: auto;
}

/* ------------------------------------------------------ badges e tags */
.sup-badge,
.sup-tag {
	align-items: center;
	border: 1px solid var(--shield-line-2);
	border-radius: 3px;
	color: var(--shield-muted);
	display: inline-flex;
	font-size: var(--fz-xs);
	gap: 5px;
	letter-spacing: var(--ls-wide);
	padding: 4px 9px;
	text-transform: uppercase;
}
.sup-badge_ok {
	border-color: rgba(113, 164, 15, .45);
	color: var(--shield-ok);
}
.sup-badge_wait {
	border-color: rgba(240, 180, 41, .45);
	color: var(--shield-warn);
}
.sup-tag_on {
	border-color: var(--shield-accent);
	color: var(--shield-accent);
}
.sup-dot {
	background-color: currentColor;
	border-radius: 50%;
	color: var(--shield-ok);
	display: inline-block;
	font-size: 0;
	height: 7px;
	width: 7px;
}

/* --------------------------------------------------- linhas chave/valor */
.sup-rows {
	display: grid;
}
.sup-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	padding: 11px 2px;
}
.sup-row + .sup-row {
	border-top: 1px solid var(--shield-line);
}
.sup-row__key {
	align-items: center;
	color: var(--shield-muted);
	display: flex;
	font-size: var(--fz-md);
	font-variant-numeric: tabular-nums;
	gap: 8px;
}
.sup-row__val {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Imagens que o painel injeta e que nao podem esticar */
.payment-qr-code,
.QRCodeIMG,
.captcha-image {
	max-height: none;
}


/* ==========================================================================
   16b. ESTADOS APLICADOS EM TEMPO DE EXECUCAO

   Classes que so aparecem via JS e por isso passavam despercebidas: o
   inventario de classes lia apenas os atributos class="..." do PHP.
   ========================================================================== */

/* global.js: botao de envio durante e depois do POST por AJAX */
input.loading,
button.loading,
input.sucesso,
button.sucesso,

/* register.php: alterna a exibicao do sufixo do login */
.escondido {
	display: none;
}

/* ------------------------------------------- alert-simple.js: caixa modal

   O script posiciona #backblack e #alerta por style inline e deixa a
   aparencia para ca. Sem estas regras a caixa saia sem fundo nem borda,
   com o botao OK no estilo padrao do navegador.
   -------------------------------------------------------------------------- */
#backblack {
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	background-color: rgba(4, 6, 10, .74);
}
#alerta {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line-2);
	border-radius: var(--shield-radius);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
	max-width: calc(100vw - 32px);
	min-width: 300px;
	padding: 22px 24px 18px;
	text-align: center;
	width: 400px;
}
.alerta-msg {
	color: var(--shield-ink);
	font-size: var(--fz-base);
	line-height: 1.55;
	margin-bottom: 18px;
}
.alerta-msg a {
	color: var(--shield-accent);
}
.alerta-ok {
	background-color: var(--shield-accent);
	border: 0;
	border-radius: var(--shield-radius-sm);
	color: #fff;
	cursor: pointer;
	font-family: var(--shield-button);
	font-size: var(--fz-sm);
	letter-spacing: var(--ls-wide);
	min-width: 130px;
	padding: 11px 22px;
	text-transform: uppercase;
	transition: var(--shield-trans);
}
.alerta-ok:hover {
	background-color: var(--shield-accent-hi);
}


/* ==========================================================================
   17. CAMADA LEGADO

   Paginas que nunca foram convertidas para os componentes .sup-*:
   accinfo, stats/olympiad, 404, recuperacao de senha, termos. Elas usam
   .pddInner, .twoBox, .box, .lines, table.default, .horMenu.

   Estas regras precisam morar AQUI e nao no donate-shield.css, porque essa
   folha e carregada apenas nas 8 paginas de doacao e loja.
   ========================================================================== */
.breadcrumb {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	letter-spacing: var(--ls-wide);
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	text-transform: uppercase;
}
.breadcrumb li {
	display: inline;
}
.indexTitle {
	font-family: var(--shield-display);
	font-size: var(--fz-h1);
	margin-bottom: 18px;
}
.pddInner {
	color: var(--shield-muted);
	font-size: var(--fz-md);
	line-height: 1.75;
}
.pddInner h1,
.pddInner h2,
.pddInner h3 {
	font-family: var(--shield-display);
	font-weight: 400;
	margin-bottom: 10px;
}
.pddInner p,
.pddInner ul,
.pddInner ol {
	margin-bottom: 13px;
}
.pddInner ul,
.pddInner ol {
	padding-left: 20px;
}
.twoBox {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Card legado, mesmo desenho do .sup-card */
.box {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius);
	overflow: hidden;
}
.box > h1 {
	align-items: center;
	border-bottom: 1px solid var(--shield-line);
	display: flex;
	font-family: var(--shield-display);
	font-size: var(--fz-base);
	font-weight: 400;
	margin: 0;
	padding: 14px 18px;
}
.lines {
	display: block;
}
.lines > div {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--fz-sm);
	gap: 10px;
	justify-content: space-between;
	padding: 10px 18px;
}
.lines > div + div {
	border-top: 1px solid var(--shield-line);
}
.lines > div > span {
	color: var(--shield-ink);
	font-variant-numeric: tabular-nums;
	text-align: right;
	word-break: break-word;
}
.lines.logs > div > span {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}

/* Tabela legada, alinhada com a .sup-table */
table.default {
	border-collapse: collapse;
	font-size: var(--fz-md);
	width: 100%;
}
table.default th {
	border-bottom: 1px solid var(--shield-line-2);
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	font-weight: 600;
	letter-spacing: var(--ls-wide);
	padding: 10px 14px;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}
table.default td {
	border-bottom: 1px solid var(--shield-line);
	padding: 11px 14px;
	vertical-align: middle;
}
table.default tr.two > td {
	background-color: var(--shield-panel-soft);
}
table.default tr:hover > td {
	background-color: var(--shield-accent-soft);
}

/* Separador entre grupos de classe no ranking da olimpiada */
table.default tr.ctype2 > td {
	background-color: transparent;
	border-bottom: 1px solid var(--shield-line-2);
	height: 8px;
	padding: 0;
}
table.default .pos {
	color: var(--shield-dim);
	text-align: center;
	white-space: nowrap;
	width: 56px;
}
.foco {
	color: var(--shield-accent);
}

/* Abas horizontais (ranking / herois / historico) */
.horMenu {
	border-bottom: 1px solid var(--shield-line);
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: 20px;
}
.horMenu > a {
	border-bottom: 2px solid transparent;
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	letter-spacing: var(--ls-wide);
	padding: 10px 15px;
	text-transform: uppercase;
	transition: var(--shield-trans);
}
.horMenu > a:hover {
	color: var(--shield-ink);
}
.horMenu > a.act {
	border-bottom-color: var(--shield-accent);
	color: var(--shield-accent);
}

/* Campo de formulario legado: .formpadrao > .desc + .camp */
.formpadrao {
	display: block;
	margin-bottom: 13px;
}
.camp {
	display: block;
	margin-top: 5px;
}
.camp input,
.camp select,
.camp textarea {
	background-color: var(--shield-void);
	border: 1px solid var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-ink);
	font-family: inherit;
	font-size: var(--fz-base);
	padding: 11px 13px;
	width: 100%;
}
.camp input:focus,
.camp select:focus,
.camp textarea:focus {
	border-color: var(--shield-accent);
	outline: none;
}
.camp input:disabled {
	color: var(--shield-dim);
	cursor: not-allowed;
}

/* Botao de envio legado (forgot_confirm2 usa input.default.big).
   Precisa do desenho completo: a regra generica de button/input[type=submit]
   saiu do global.css, entao nao ha mais nada estilizando este controle. */
input.default,
input.default.big,
.btn.default {
	background-color: transparent;
	background-image: var(--shield-btn-accent);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	font-family: var(--shield-button);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	transition: var(--shield-trans);
	font-size: var(--fz-base);
	line-height: 1.2;
	text-align: center;
	align-items: center;
	display: inline-flex;
	flex: none;
	height: 58px;
	justify-content: center;
	padding: 2px 26px 0;
	width: 244px;
}
input.default:hover,
input.default.big:hover,
.btn.default:hover {
	filter: brightness(1.14);
}

/* Par rotulo/valor dos blocos de pagamento. Escopado no .data-row porque
   ".label" e ".value" sao nomes genericos demais para regra global. */
.data-row > .label {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.data-row > .value {
	color: var(--shield-ink);
	font-size: var(--fz-sm);
	font-weight: 600;
	word-break: break-all;
}

/* ----------------------------------------- textos e mensagens de retorno */
.txtmin,
.smallCenter,
.desc {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.smallCenter {
	text-align: center;
}
.rmsg,
.rmsg2 {
	border-left: 2px solid var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	font-size: var(--fz-sm);
	margin-bottom: 14px;
	padding: 11px 14px;
}
.rmsg {
	background-color: rgba(113, 164, 15, .1);
	border-left-color: var(--shield-ok);
	/* Tom claro derivado do verde-oliva do site (#71a40f), nao do verde-menta
	   que o painel usava antes */
	color: #dcefb0;
}
.rmsg2,
.error {
	background-color: rgba(237, 43, 43, .08);
	border-left: 2px solid var(--shield-bad);
	border-radius: var(--shield-radius-sm);
	color: #ffd6d5;
	font-size: var(--fz-sm);
	padding: 11px 14px;
}
.warn {
	background-color: rgba(240, 180, 41, .08);
	border-left: 2px solid var(--shield-warn);
	border-radius: var(--shield-radius-sm);
	color: #ffe6b8;
	font-size: var(--fz-sm);
	padding: 11px 14px;
}
.invis {
	display: none;
}

/* Item desabilitado: setas mortas da paginacao, botoes bloqueados */
.desatived {
	cursor: not-allowed;
	filter: grayscale(.7);
	opacity: .5;
}
.cancelarExclusao,
.orderdelete1,
.orderdelete2 {
	cursor: pointer;
}


/* ==========================================================================
   18. RESPONSIVO
   ========================================================================== */

/* Coluna lateral mais estreita antes de virar gaveta */
@media (max-width: 1280px) {
:root {
		--shield-side-w: 234px;
		--shield-gut: 22px;
	}
.shd-brand__img {
		width: 112px;
	}
}

/* A coluna da esquerda vira gaveta */
@media (max-width: 1024px) {
.shd-app {
		grid-template-columns: minmax(0, 1fr);
	}
.shd-side {
		bottom: 0;
		height: auto;
		left: 0;
		position: fixed;
		top: 0;
		transform: translateX(-100%);
		transition: transform .22s ease;
		width: 280px;
		z-index: 50;
	}
.shd-side_open {
		transform: translateX(0);
	}
.shd-side__close,
.shd-bar__burger,
.shd-bar__coins {
		display: flex;
	}
.shd-bar__burger {
		align-items: center;
		justify-content: center;
	}
.twoBox {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Sem coluna lateral, o pedido vira o ultimo bloco da pagina e para de
	   ser sticky (nao faz sentido colar algo que ja e o fim). */
.buy {
		grid-template-columns: minmax(0, 1fr);
	}
.buy__rail {
		position: static;
		top: auto;
	}
}

@media (max-width: 760px) {
.sup-char__stat {
		border-left: 0;
		padding-left: 0;
		width: 66px;
	}
.sup-char__tags {
		margin-left: 0;
		width: 100%;
	}
}

@media (max-width: 560px) {
:root {
		--shield-gut: 15px;
	}
.shd-view {
		padding-bottom: 34px;
		padding-top: 20px;
	}
.pg-head__title {
		font-size: var(--fz-h2);
	}
.sup-card__body,
.sup-card__head {
		padding-inline: 15px;
	}
.sup-stats {
		grid-template-columns: minmax(0, 1fr);
	}
.buy-box {
		padding-inline: 15px;
	}
.buy-packs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
.buy-pack__qty {
		font-size: var(--fz-h3);
	}
.buy-ways {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
.buy-order {
		padding-inline: 15px;
	}
.box > h1,
.lines > div {
		padding-inline: 15px;
	}

	/* Tabelas legadas rolam em vez de estourar a largura da tela */
table.default {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
.horMenu > a {
		padding: 9px 11px;
	}
input.default,
input.default.big,
.btn.default {
		min-width: 0;
		width: 100%;
	}
.login-form-container {
		padding: 22px 18px 20px;
	}
}


/* ==========================================================================
   BOTOES COM ARTE: CENTRALIZACAO

   A moldura em PNG tem proporcao fixa (~4:1). Onde o botao fica dentro de
   um bloco largo, ele NAO deve esticar: fica no tamanho natural e
   centralizado.
   ========================================================================== */
/* --- centralizacao dos botoes com arte --- */
.buy-order__go,
.login-button,
button.login-button,
input.login-button {
	margin-inline: auto;
}
.buy-order,
.login-form {
	justify-items: center;
}

/* os campos do formulario continuam ocupando a largura toda */
.login-form .form-group,
.login-form .captcha-container,
.login-form .login-links {
	justify-self: stretch;
	width: 100%;
}
.buy-order > *:not(.buy-order__go) {
	justify-self: stretch;
	width: 100%;
}


/* ==========================================================================
   TRANSFERENCIA DE COINS

   Namespace .tr-*, sem nenhuma classe .sup-*. Abas para escolher o destino,
   formulario da aba visivel, e trilho a direita com o saldo disponivel.
   ========================================================================== */
.tr {
	align-items: start;
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(0, 1fr) 252px;
}
.tr__main {
	display: grid;
	gap: 0;
	min-width: 0;
}

/* ------------------------------------------------------------------ abas */
.tr-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}
.tr-tab {
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--shield-line);
	border-bottom: 0;
	border-radius: var(--shield-radius) var(--shield-radius) 0 0;
	color: var(--shield-dim);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--shield-font);
	font-size: var(--fz-sm);
	gap: 8px;
	letter-spacing: var(--ls-wide);
	padding: 11px 18px;
	text-transform: uppercase;
	transition: var(--shield-trans);
}
.tr-tab:hover {
	color: var(--shield-muted);
}

/* A aba ativa se conecta ao painel: mesmo fundo, sem linha entre os dois */
.tr-tab_on {
	background-color: var(--shield-panel);
	color: var(--shield-accent);
}
.tr-tab i {
	font-size: var(--fz-sm);
}

/* --------------------------------------------------------------- paineis */
.tr-panel {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: 0 var(--shield-radius) var(--shield-radius) var(--shield-radius);
	display: none;
	gap: 16px;
	padding: 20px 22px 22px;
}
.tr-panel_on {
	display: grid;
}

/* Sem abas (apenas uma operacao habilitada): cantos normais e sempre visivel */
.tr-panel_solo {
	border-radius: var(--shield-radius);
	display: grid;
}
.tr-panel__title {
	font-size: var(--fz-h3);
	margin: 0;
}

/* ------------------------------------------------------------- avisos */
.tr-note {
	align-items: flex-start;
	background-color: rgba(53, 193, 224, .08);
	border-left: 2px solid var(--shield-accent);
	color: var(--shield-muted);
	display: flex;
	font-size: var(--fz-sm);
	gap: 9px;
	line-height: 1.6;
	margin: 0;
	padding: 11px 14px;
}
.tr-note i {
	color: var(--shield-accent);
	flex: none;
	font-size: var(--fz-sm);
	margin-top: 3px;
}
.tr-note b,
.tr-note strong {
	color: var(--shield-ink);
	font-weight: 600;
}

/* ----------------------------------------------------------- formulario */
.tr-form {
	display: grid;
	gap: 15px;
	justify-items: start;
}
.tr-row {
	display: grid;
	gap: 6px;
	width: 100%;
}
.tr-label {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.tr-input {
	background-color: var(--shield-void);
	border: 1px solid var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-ink);
	font-family: inherit;
	font-size: var(--fz-base);
	padding: 11px 13px;
	transition: var(--shield-trans);
	width: 100%;
}
.tr-input:focus {
	border-color: var(--shield-accent);
	outline: none;
}
.tr-input::placeholder {
	color: var(--shield-dim);
}

/* Quantidade: numero em fonte de titulo, com a unidade ao lado */
.tr-amount {
	align-items: center;
	display: flex;
	gap: 11px;
}
.tr-input_num {
	color: var(--shield-accent);
	font-family: var(--shield-display);
	font-size: var(--fz-h3);
	font-variant-numeric: tabular-nums;
	max-width: 190px;
}
.tr-amount__unit {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
	white-space: nowrap;
}

/* Seta do select desenhada em CSS, sem imagem */
.tr-select {
	appearance: none;
	-webkit-appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--shield-muted) 50%),
		linear-gradient(135deg, var(--shield-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
	background-repeat: no-repeat;
	background-size: 5px 5px, 5px 5px;
	padding-right: 34px;
}

/* --------------------------------------------------- bloco de conferencia */
.tr-confirm {
	border: 1px dashed var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	display: grid;
	gap: 13px;
	padding: 14px 16px 16px;
	width: 100%;
}
.tr-confirm__why {
	align-items: flex-start;
	color: var(--shield-dim);
	display: flex;
	font-size: var(--fz-sm);
	gap: 8px;
	line-height: 1.5;
	margin: 0;
}
.tr-confirm__why i {
	flex: none;
	margin-top: 2px;
}
.tr-confirm__msg {
	background-color: rgba(237, 43, 43, .1);
	border-left: 2px solid var(--shield-bad);
	color: #ffd6d5;
	font-size: var(--fz-sm);
	margin: 0;
	padding: 8px 12px;
}

/* -------------------------------------------------------------- captcha */
.tr-captcha {
	display: grid;
	gap: 6px;
	width: 100%;
}
.tr-captcha__row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tr-captcha__img {
	border: 1px solid var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	display: block;
	flex: none;
	height: 44px;
	max-height: none;
	width: 130px;
}
.tr-captcha__reload {
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-muted);
	cursor: pointer;
	display: flex;
	flex: none;
	height: 40px;
	justify-content: center;
	transition: var(--shield-trans);
	width: 40px;
}
.tr-captcha__reload:hover {
	border-color: var(--shield-accent);
	color: var(--shield-accent);
}
.tr-captcha__field {
	flex: 1;
	min-width: 140px;
}

/* ---------------------------------------------------------------- acao */
.tr-go {
	background-color: transparent;
	background-image: var(--shield-btn-accent);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	flex: none;
	font-family: var(--shield-button);
	font-size: var(--fz-base);
	height: 58px;
	letter-spacing: var(--ls-wide);
	margin-top: 4px;
	padding: 2px 26px 0;
	text-transform: uppercase;
	transition: var(--shield-trans);
	width: 244px;
}
.tr-go:hover {
	filter: brightness(1.14);
}
.tr-go:disabled {
	cursor: progress;
	filter: grayscale(.6);
	opacity: .6;
}

/* --------------------------------------------------------------- trilho */
.tr__rail {
	min-width: 0;
	position: sticky;
	top: calc(var(--shield-bar-h) + 16px);
}
.tr-side {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius);
	display: grid;
	gap: 4px;
	padding: 15px 17px 17px;
}
.tr-side__label {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
	margin: 0;
}
.tr-side__value {
	color: var(--shield-accent);
	font-family: var(--shield-display);
	font-size: var(--fz-hero);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	margin: 0;
}
.tr-side__links {
	border-top: 1px solid var(--shield-line);
	display: grid;
	gap: 2px;
	margin-top: 12px;
	padding-top: 12px;
}
.tr-side__link {
	align-items: center;
	color: var(--shield-muted);
	display: flex;
	font-size: var(--fz-sm);
	gap: 9px;
	padding: 7px 0;
	transition: var(--shield-trans);
}
.tr-side__link i {
	color: var(--shield-dim);
	flex: none;
	font-size: var(--fz-sm);
	width: 15px;
}
.tr-side__link:hover {
	color: var(--shield-accent);
}
.tr-side__link:hover i {
	color: var(--shield-accent);
}

@media (max-width: 1024px) {
.tr {
		grid-template-columns: minmax(0, 1fr);
	}
.tr__rail {
		position: static;
		top: auto;
	}
}

@media (max-width: 560px) {
.tr-panel {
		padding-inline: 15px;
	}
.tr-tab {
		flex: 1;
		justify-content: center;
		padding-inline: 10px;
	}
.tr-tab span {
		display: none;
	}
.tr-go {
		max-width: 100%;
	}
}


/* ==========================================================================
   PECAS COMPARTILHADAS DAS PAGINAS REFEITAS

   As tres paginas (loja, historico, configuracoes) usam a mesma caixa de
   conteudo, o mesmo trilho e as mesmas abas. As regras ficam agrupadas por
   pagina abaixo, mas a medida e o desenho sao os mesmos, para as telas nao
   divergirem entre si.
   ========================================================================== */


/* ==========================================================================
   LOJA DE ITENS
   ========================================================================== */
.shop {
	align-items: start;
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(0, 1fr) 268px;
}
.shop__main {
	display: grid;
	gap: 20px;
	min-width: 0;
}
.shop-box {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius);
	display: grid;
	gap: 15px;
	padding: 17px 19px 19px;
}
.shop-box__head {
	align-items: baseline;
	border-bottom: 1px solid var(--shield-line);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	padding-bottom: 11px;
}
.shop-box__title {
	color: var(--shield-ink);
	font-family: var(--shield-font);
	font-size: var(--fz-xs);
	font-weight: 600;
	letter-spacing: var(--ls-wide);
	margin: 0;
	text-transform: uppercase;
}
.shop-box__hint {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
	margin: 0;
}

/* ------------------------------------------------------- grade de itens */
.shop-grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

/* Sao <button>: anulam o estilo padrao do navegador */
.shop-item {
	background-color: transparent;
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-ink);
	cursor: pointer;
	display: grid;
	font-family: inherit;
	gap: 5px;
	justify-items: center;
	padding: 15px 12px 13px;
	position: relative;
	text-align: center;
	transition: var(--shield-trans);
}
.shop-item:hover:not(:disabled) {
	border-color: var(--shield-line-2);
}
.shop-item_on {
	background-color: var(--shield-accent-soft);
	border-color: var(--shield-accent);
}
.shop-item_off,
.shop-item:disabled {
	cursor: not-allowed;
	opacity: .45;
}

/* Icone com os selos de quantidade e enchant nos cantos */
.shop-item__art {
	display: block;
	line-height: 0;
	position: relative;
}
.shop-item__ico {
	height: 42px;
	image-rendering: -webkit-optimize-contrast;
	max-height: none;
	object-fit: contain;
	width: 42px;
}
.shop-item__qty,
.shop-item__ench {
	border-radius: 3px;
	font-size: var(--fz-xs);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1;
	padding: 2px 4px;
	position: absolute;
}
.shop-item__qty {
	background-color: rgba(0, 0, 0, .8);
	bottom: -3px;
	color: var(--shield-ink);
	right: -8px;
}
.shop-item__ench {
	background-color: var(--shield-accent);
	color: #062430;
	right: -8px;
	top: -4px;
}
.shop-item__name {
	color: var(--shield-ink);
	font-size: var(--fz-sm);
	font-weight: 600;
	line-height: 1.3;
}
.shop-item__desc {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	line-height: 1.4;
}
.shop-item__price {
	align-items: baseline;
	color: var(--shield-accent);
	display: flex;
	font-family: var(--shield-display);
	font-size: var(--fz-lg);
	font-variant-numeric: tabular-nums;
	gap: 4px;
	margin-top: 2px;
}
.shop-item__price small {
	color: var(--shield-dim);
	font-family: var(--shield-font);
	font-size: var(--fz-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}
.shop-item__lock {
	align-items: center;
	color: var(--shield-dim);
	display: flex;
	font-size: var(--fz-xs);
	gap: 4px;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

/* ------------------------------------------------------- personagem */
.shop-who {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.shop-who__label {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.shop-select {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--shield-void);
	background-image:
		linear-gradient(45deg, transparent 50%, var(--shield-muted) 50%),
		linear-gradient(135deg, var(--shield-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
	background-repeat: no-repeat;
	background-size: 5px 5px, 5px 5px;
	border: 1px solid var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-ink);
	flex: 1;
	font-family: inherit;
	font-size: var(--fz-base);
	min-width: 180px;
	padding: 11px 34px 11px 13px;
}
.shop-select:focus {
	border-color: var(--shield-accent);
	outline: none;
}
.shop-warn {
	align-items: center;
	background-color: rgba(224, 165, 44, .1);
	border-left: 2px solid var(--shield-warn);
	color: #ffe6b8;
	display: flex;
	font-size: var(--fz-sm);
	gap: 8px;
	margin: 0;
	padding: 9px 13px;
}

/* --------------------------------------------------------- pedido */
.shop__rail {
	min-width: 0;
	position: sticky;
	top: calc(var(--shield-bar-h) + 16px);
}
.shop-order {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius);
	display: grid;
	gap: 13px;
	justify-items: center;
	padding: 15px 17px 17px;
}
.shop-order > *:not(.shop-go) {
	justify-self: stretch;
	width: 100%;
}
.shop-order__title {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	letter-spacing: var(--ls-wide);
	margin: 0;
	text-transform: uppercase;
}
.shop-order__pick {
	align-items: center;
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius-sm);
	display: grid;
	gap: 9px;
	grid-template-columns: auto minmax(0, 1fr) auto;
	padding: 10px 12px;
}
.shop-order__ico {
	height: 30px;
	max-height: none;
	object-fit: contain;
	width: 30px;
}
.shop-order__name {
	color: var(--shield-ink);
	font-size: var(--fz-sm);
	font-weight: 600;
	line-height: 1.3;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.shop-order__qty {
	color: var(--shield-accent);
	font-family: var(--shield-display);
	font-size: var(--fz-base);
	font-variant-numeric: tabular-nums;
}
.shop-order__lines {
	display: grid;
	margin: 0;
}
.shop-order__line {
	align-items: baseline;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	padding: 7px 0;
}
.shop-order__line + .shop-order__line {
	border-top: 1px solid var(--shield-line);
}
.shop-order__line dt {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.shop-order__line dd {
	color: var(--shield-ink);
	font-size: var(--fz-md);
	font-variant-numeric: tabular-nums;
	margin: 0;
	text-align: right;
}
.shop-order__cost {
	color: var(--shield-bad-text);
}
.shop-order__line_rest {
	border-top: 1px solid var(--shield-line-2);
}
.shop-order__line_rest dd {
	color: var(--shield-accent);
	font-family: var(--shield-display);
	font-size: var(--fz-lg);
}
.shop-go {
	background-color: transparent;
	background-image: var(--shield-btn-accent);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	flex: none;
	font-family: var(--shield-button);
	font-size: var(--fz-base);
	height: 58px;
	letter-spacing: var(--ls-wide);
	padding: 2px 20px 0;
	text-transform: uppercase;
	transition: var(--shield-trans);
	width: 244px;
}
.shop-go:hover:not(:disabled) {
	filter: brightness(1.14);
}
.shop-go:disabled {
	cursor: not-allowed;
	filter: grayscale(.75);
	opacity: .5;
}
.shop-order__note {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	margin: 0;
	min-height: 1em;
	text-align: center;
}
.shop-order__links {
	border-top: 1px solid var(--shield-line);
	display: grid;
	gap: 2px;
	padding-top: 11px;
}
.shop-order__link {
	align-items: center;
	color: var(--shield-muted);
	display: flex;
	font-size: var(--fz-sm);
	gap: 9px;
	padding: 6px 0;
	transition: var(--shield-trans);
}
.shop-order__link i {
	color: var(--shield-dim);
	flex: none;
	font-size: var(--fz-sm);
	width: 15px;
}
.shop-order__link:hover,
.shop-order__link:hover i {
	color: var(--shield-accent);
}

/* --------------------------------------------------- sem personagem */
.shop-empty {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius);
	color: var(--shield-dim);
	display: grid;
	gap: 12px;
	justify-items: center;
	padding: 44px 20px;
	text-align: center;
}
.shop-empty i {
	font-size: var(--fz-hero);
	opacity: .5;
}
.shop-empty p {
	font-size: var(--fz-md);
	margin: 0;
	max-width: 42ch;
}
.shop-empty__go {
	color: var(--shield-accent);
	font-size: var(--fz-sm);
}


/* ==========================================================================
   HISTORICO DE PEDIDOS
   ========================================================================== */
.hist {
	display: grid;
	gap: 18px;
}

/* ------------------------------------------------------------- resumo */
.hist-sum {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.hist-sum__item {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius-sm);
	display: grid;
	gap: 3px;
	padding: 13px 15px;
}
.hist-sum__item_coins {
}
.hist-sum__n {
	color: var(--shield-ink);
	font-family: var(--shield-display);
	font-size: var(--fz-h2);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.hist-sum__n_ok { color: var(--shield-ok); }
.hist-sum__n_wait { color: var(--shield-warn); }
.hist-sum__n_coins { color: var(--shield-accent); }
.hist-sum__l {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}

/* --------------------------------------------------------------- lista */
.hist-list {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius);
	overflow: hidden;
}

/* Uma unica definicao de colunas para cabecalho e linhas: se mudar aqui,
   os dois acompanham. */
.hist-head,
.hist-item {
	align-items: center;
	display: grid;
	gap: 12px;
	grid-template-columns:
		minmax(72px, .8fr)
		minmax(70px, .7fr)
		minmax(84px, .8fr)
		minmax(96px, .9fr)
		minmax(80px, .8fr)
		minmax(150px, 1.1fr);
	padding: 11px 18px;
}
.hist-head {
	border-bottom: 1px solid var(--shield-line-2);
	color: var(--shield-dim);
	font-size: var(--fz-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}
.hist-item + .hist-item {
	border-top: 1px solid var(--shield-line);
}
.hist-item:hover {
	background-color: var(--shield-panel-soft);
}
.hist-cell {
	font-size: var(--fz-md);
	font-variant-numeric: tabular-nums;
	min-width: 0;
}
.hist-cell_prot {
	color: var(--shield-muted);
}
.hist-cell_coins {
	color: var(--shield-ink);
	font-weight: 600;
}
.hist-cell_dim {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.hist-cell_act {
	justify-self: end;
}
.hist-act {
	align-items: center;
	display: flex;
	gap: 8px;
}

/* Selo de situacao */
.hist-tag {
	align-items: center;
	border: 1px solid var(--shield-line-2);
	border-radius: 3px;
	color: var(--shield-muted);
	display: inline-flex;
	font-size: var(--fz-xs);
	letter-spacing: var(--ls-wide);
	padding: 5px 9px;
	text-transform: uppercase;
	transition: var(--shield-trans);
	white-space: nowrap;
}
.hist-tag:hover {
	border-color: var(--shield-accent);
}
.hist-tag_ok {
	border-color: rgba(113, 164, 15, .5);
	color: var(--shield-ok);
}
.hist-tag_wait {
	border-color: rgba(224, 165, 44, .5);
	color: var(--shield-warn);
}
.hist-tag_off {
	border-color: var(--shield-line);
	color: var(--shield-dim);
}
.hist-del {
	background: none;
	border: 0;
	color: var(--shield-dim);
	cursor: pointer;
	font-size: var(--fz-md);
	line-height: 1;
	padding: 4px;
	transition: var(--shield-trans);
}
.hist-del:hover {
	color: var(--shield-bad-text);
}

/* Confirmacao dentro da propria linha */
.hist-confirm {
	align-items: center;
	display: flex;
	gap: 6px;
}
.hist-confirm__yes,
.hist-confirm__no {
	background-color: transparent;
	border: 1px solid var(--shield-line-2);
	border-radius: 3px;
	cursor: pointer;
	font-family: var(--shield-font);
	font-size: var(--fz-xs);
	letter-spacing: var(--ls-wide);
	padding: 6px 10px;
	text-transform: uppercase;
	transition: var(--shield-trans);
	white-space: nowrap;
}
.hist-confirm__yes {
	border-color: rgba(237, 43, 43, .5);
	color: var(--shield-bad-text);
}
.hist-confirm__yes:hover {
	border-color: var(--shield-bad);
}
.hist-confirm__no {
	color: var(--shield-muted);
}
.hist-confirm__no:hover {
	color: var(--shield-ink);
}

/* ----------------------------------------------------------- vazio */
.hist-empty {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius);
	color: var(--shield-dim);
	display: grid;
	gap: 12px;
	justify-items: center;
	padding: 44px 20px;
	text-align: center;
}
.hist-empty i {
	font-size: var(--fz-hero);
	opacity: .5;
}
.hist-empty p {
	font-size: var(--fz-md);
	margin: 0;
	max-width: 46ch;
}
.hist-empty__go {
	color: var(--shield-accent);
	font-size: var(--fz-sm);
}
.hist-links {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}
.hist-link {
	align-items: center;
	color: var(--shield-muted);
	display: inline-flex;
	font-size: var(--fz-sm);
	gap: 8px;
	transition: var(--shield-trans);
}
.hist-link i {
	color: var(--shield-dim);
	font-size: var(--fz-xs);
}
.hist-link:hover,
.hist-link:hover i {
	color: var(--shield-accent);
}


/* ==========================================================================
   CONFIGURACOES DA CONTA
   ========================================================================== */
.cfg {
	display: grid;
	gap: 0;
	max-width: 720px;
}

/* Dados atuais, uma vez so */
.cfg-id {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: var(--shield-radius);
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin-bottom: 18px;
	padding: 15px 18px;
}
.cfg-id__item {
	display: grid;
	gap: 3px;
	min-width: 0;
}
.cfg-id__item_coins {
	justify-items: start;
}
.cfg-id__label {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.cfg-id__value {
	color: var(--shield-ink);
	font-size: var(--fz-md);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cfg-id__value_coins {
	color: var(--shield-accent);
	font-family: var(--shield-display);
	font-size: var(--fz-h3);
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- abas */
.cfg-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}
.cfg-tab {
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--shield-line);
	border-bottom: 0;
	border-radius: var(--shield-radius) var(--shield-radius) 0 0;
	color: var(--shield-dim);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--shield-font);
	font-size: var(--fz-sm);
	gap: 8px;
	letter-spacing: var(--ls-wide);
	padding: 11px 18px;
	text-transform: uppercase;
	transition: var(--shield-trans);
}
.cfg-tab:hover {
	color: var(--shield-muted);
}
.cfg-tab_on {
	background-color: var(--shield-panel);
	color: var(--shield-accent);
}
.cfg-tab i {
	font-size: var(--fz-sm);
}

/* --------------------------------------------------------------- paineis */
.cfg-panel {
	background-color: var(--shield-panel);
	border: 1px solid var(--shield-line);
	border-radius: 0 var(--shield-radius) var(--shield-radius) var(--shield-radius);
	display: none;
	padding: 20px 22px 22px;
}
.cfg-panel_on {
	display: block;
}
.cfg-form {
	display: grid;
	gap: 15px;
}
.cfg-pair {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.cfg-row {
	display: grid;
	gap: 6px;
	min-width: 0;
}
.cfg-label {
	color: var(--shield-dim);
	font-size: var(--fz-sm);
}
.cfg-input {
	background-color: var(--shield-void);
	border: 1px solid var(--shield-line-2);
	border-radius: var(--shield-radius-sm);
	color: var(--shield-ink);
	font-family: inherit;
	font-size: var(--fz-base);
	padding: 11px 13px;
	transition: var(--shield-trans);
	width: 100%;
}
.cfg-input:focus {
	border-color: var(--shield-accent);
	outline: none;
}
.cfg-msg {
	background-color: rgba(237, 43, 43, .1);
	border-left: 2px solid var(--shield-bad);
	color: #ffd6d5;
	font-size: var(--fz-sm);
	margin: 0;
	padding: 9px 13px;
}
.cfg-foot {
	align-items: center;
	border-top: 1px solid var(--shield-line);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	margin-top: 2px;
	padding-top: 16px;
}
.cfg-cost {
	align-items: baseline;
	color: var(--shield-dim);
	display: inline-flex;
	font-size: var(--fz-xs);
	gap: 7px;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}
.cfg-cost strong {
	color: var(--shield-accent);
	font-family: var(--shield-display);
	font-size: var(--fz-lg);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	text-transform: none;
}

/* Sem saldo: o custo aparece em aviso e o botao vira atalho para comprar */
.cfg-cost_no strong {
	color: var(--shield-bad-text);
}
.cfg-go {
	align-items: center;
	background-color: transparent;
	background-image: var(--shield-btn-accent);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font-family: var(--shield-button);
	font-size: var(--fz-base);
	height: 58px;
	justify-content: center;
	letter-spacing: var(--ls-wide);
	padding: 2px 22px 0;
	text-align: center;
	text-transform: uppercase;
	transition: var(--shield-trans);
	width: 244px;
}
.cfg-go:hover {
	filter: brightness(1.14);
}
.cfg-go:disabled {
	cursor: progress;
	filter: grayscale(.6);
	opacity: .6;
}
.cfg-go_alt {
	background-image: var(--shield-btn);
}


/* ==========================================================================
   RESPONSIVO DAS PAGINAS REFEITAS
   ========================================================================== */
@media (max-width: 1024px) {
.shop {
		grid-template-columns: minmax(0, 1fr);
	}
.shop__rail {
		position: static;
		top: auto;
	}
}

@media (max-width: 860px) {
	/* A tabela do historico deixa de rolar na horizontal: cada pedido vira
	   um bloco, com o rotulo da coluna vindo do atributo data-hist-l. */
.hist-head {
		display: none;
	}
.hist-item {
		gap: 7px;
		grid-template-columns: minmax(0, 1fr);
		padding: 14px 16px;
	}
.hist-cell {
		align-items: baseline;
		display: flex;
		gap: 12px;
		justify-content: space-between;
	}
.hist-cell::before {
		color: var(--shield-dim);
		content: attr(data-hist-l);
		font-size: var(--fz-xs);
		letter-spacing: var(--ls-wide);
		text-transform: uppercase;
	}
.hist-cell_act {
		border-top: 1px solid var(--shield-line);
		justify-self: stretch;
		margin-top: 4px;
		padding-top: 10px;
	}
}

@media (max-width: 560px) {
.shop-box,
.shop-order,
.cfg-panel,
.cfg-id {
		padding-inline: 15px;
	}
.shop-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
.cfg-tab {
		flex: 1;
		justify-content: center;
		padding-inline: 10px;
	}
.cfg-tab span {
		display: none;
	}
.cfg-foot,
.shop-go,
.cfg-go {
		max-width: 100%;
	}
.hist-sum {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}