/* Weepley — estilo arcade sobre fundo preto de luxo. */

:root {
  --wp-preto: #060608;
  --wp-ouro: #d4af37;
  --wp-ciano: #00f6ff;
  --wp-magenta: #ff00e5;

  /* Paleta de 7 cores neon, uma por letra de "WEEPLEY" — reaproveitada
     como cor de destaque dos cards (ver config.php, $wp_paleta). */
  --wp-l1: #00f6ff;
  --wp-l2: #ff00e5;
  --wp-l3: #ffd447;
  --wp-l4: #39ff14;
  --wp-l5: #ff6a00;
  --wp-l6: #b026ff;
  --wp-l7: #ffe800;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--wp-preto);
  font-family: 'Press Start 2P', monospace;
  overflow-x: hidden;
  position: relative;
}

/* Textura de scanlines + vinheta "de luxo", fixas atras de toda a pagina
   (nao so de uma secao), pra manter o clima arcade/CRT ao rolar. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(212, 175, 55, 0.06) 0%, rgba(6, 6, 8, 0) 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 246, 255, 0.05) 0%, rgba(6, 6, 8, 0) 55%);
  box-shadow: inset 0 0 18vw rgba(0, 0, 0, 0.9);
  pointer-events: none;
  z-index: 0;
}

#conteudo {
  position: relative;
  z-index: 1;
  min-height: 60vh;
}

.wp-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.wp-fullscreen .wp-container,
.wp-fullscreen .wp-divisor {
  max-width: none;
}

/* Header: logo a esquerda, nav a direita. */

.wp-header {
  position: relative;
  /* higher than #conteudo's z-index: 1 — otherwise, on an equal z-index tie, the
     later-in-DOM #conteudo wins the stack and steals clicks/hover from anything
     that pops out of the header, like the language dropdown, even where #conteudo
     itself paints nothing visible there */
  z-index: 2;
}

.wp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  flex-wrap: wrap;
}

.wp-logo-link {
  display: inline-block;
  text-decoration: none;
}

.wp-logo {
  margin: 0;
  font-size: clamp(1.1rem, 3.2vw, 1.8rem);
  letter-spacing: 0.1em;
}

.wp-logo__letra {
  text-shadow: 0 0 2px currentColor;
  animation: wp-piscar 3.2s ease-in-out infinite;
}

.wp-logo__l1 { color: var(--wp-l1); }
.wp-logo__l2 { color: var(--wp-l2); }
.wp-logo__l3 { color: var(--wp-l3); }
.wp-logo__l4 { color: var(--wp-l4); }
.wp-logo__l5 { color: var(--wp-l5); }
.wp-logo__l6 { color: var(--wp-l6); }
.wp-logo__l7 { color: var(--wp-l7); }

@keyframes wp-piscar {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.92; }
  98% { opacity: 1; }
  99% { opacity: 0.96; }
}

.wp-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/*
 * line-height: 1 is load-bearing here — without it, the box height comes from each
 * font's own line-height metrics (Press Start 2P for the text pill, Bootstrap Icons
 * for the icon-only ones), and those don't match. Fixing it to 1 makes padding the
 * only thing that decides height, so every .wp-nav__link ends up the same size.
 */
.wp-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  line-height: 1;
  color: var(--wp-ouro);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 3px;
  padding: calc(0.7em - 1px) 1em;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.wp-nav__link i {
  font-size: 1rem;
  line-height: 1;
}

.wp-nav__link:hover,
.wp-nav__link:focus-visible {
  background: rgba(212, 175, 55, 0.08);
  border-color: var(--wp-ouro);
}

/*
 * wallet + logout — icon-only, so they don't compete with the nickname pill for
 * attention. Same vertical padding as .wp-nav__link (minus the shared 1px) and the
 * same icon size, so the square button lands at the exact height of the text pill.
 */
.wp-nav__link--icone {
  position: relative;
  padding: calc(0.7em - 1px);
}

.wp-nav__link--icone i {
  font-size: 1rem;
}

/*
 * Unseen-ticket dot, pinned to the corner the same way .wp-card__badge pins itself to
 * a card. Cyan rather than the nav's own gold, so it reads as "new" against the icon
 * instead of blending into it. Animates opacity/scale only — no layout properties — so
 * it never causes reflow while it blinks.
 */
.wp-nav__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp-ciano);
  box-shadow: 0 0 4px var(--wp-ciano);
  animation: wp-nav-badge-piscar 1.4s ease-in-out infinite;
}

@keyframes wp-nav-badge-piscar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* messages icon: present but wired to nothing yet, so it should not invite a click */
.wp-nav__link--em-breve {
  cursor: default;
}

.wp-nav__link--em-breve:hover {
  background: none;
  border-color: rgba(212, 175, 55, 0.4);
}

/* Language switcher — the trigger is a .wp-nav__link--icone, so it already matches the
   height of every other button in the nav; only the dropdown needs styling. */
.wp-nav__lang {
  position: relative;
  display: inline-flex;
}

/* "BR"/"EN" instead of an icon: sized to the icons it sits next to, not to the
   Press Start pill text, so the button stays square like the other icon buttons */
.wp-nav__lang-trigger span {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1rem;
  letter-spacing: 0.02em;
}

.wp-nav__lang-menu {
  position: absolute;
  top: calc(100% + 0.4em);
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 7.5em;
  background-color: var(--wp-preto);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.wp-nav__lang-menu[hidden] {
  display: none;
}

.wp-nav__lang-option {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.7em;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}

.wp-nav__lang-option:hover,
.wp-nav__lang-option:focus-visible {
  color: var(--wp-ouro);
  background: rgba(212, 175, 55, 0.08);
}

.wp-nav__lang-option--active {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.wp-nav__lang-option--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wp-nav__lang-option--disabled:hover {
  color: rgba(255, 255, 255, 0.75);
  background: transparent;
}

/* megadashboard shortcut — ciano, não ouro, pra não se confundir com o resto do
   nav: essa é a única entrada que leva pra fora do site público. */
.wp-nav__link--admin {
  color: var(--wp-ciano);
  border-color: rgba(0, 246, 255, 0.3);
}

.wp-nav__link--admin:hover,
.wp-nav__link--admin:focus-visible {
  background: rgba(0, 246, 255, 0.08);
  border-color: var(--wp-ciano);
}

/* Separador fino e discreto, acabamento "de luxo". */

.wp-divisor {
  height: 1px;
  margin: 0 auto;
  max-width: 1280px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.55) 20%,
    rgba(212, 175, 55, 0.9) 50%,
    rgba(212, 175, 55, 0.55) 80%,
    transparent 100%
  );
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.25);
  position: relative;
  z-index: 1;
}

/* Grade de cards — estilo arcade. */

.wp-secao-cards {
  padding: 2.5rem 1.5rem 4rem;
}

.wp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 480px) {
  .wp-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.wp-card {
  position: relative;
  display: block;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1.9rem 1.25rem 1.25rem;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Acentos de canto, tipo bezel de gabinete de fliperama. */
.wp-card::before,
.wp-card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--wp-card-cor);
  opacity: 0.7;
}

.wp-card::before {
  top: 6px;
  left: 6px;
  border-right: none;
  border-bottom: none;
}

.wp-card::after {
  bottom: 6px;
  right: 6px;
  border-left: none;
  border-top: none;
}

.wp-card__id {
  position: absolute;
  top: 0.5rem;
  right: 0.9rem;
  font-size: 1.2rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

.wp-card__badge {
  position: absolute;
  top: -1px;
  left: -1px;
  font-size: 0.5rem;
  background: var(--wp-preto);
  color: var(--wp-ouro);
  border: 1px solid rgba(212, 175, 55, 0.5);
  padding: 0.35em 0.6em;
  letter-spacing: 0.05em;
}

.wp-card__cabecalho {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0 0.9rem;
}

.wp-card__icone {
  position: relative;
  flex-shrink: 0;
  font-size: 1.6rem;
  color: var(--wp-card-cor);
}

.wp-card__titulo {
  position: relative;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #fff;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wp-card__subtitulo {
  position: relative;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.wp-card:hover {
  transform: translateY(-4px);
  border-color: var(--wp-card-cor);
  box-shadow: 0 0 18px -4px var(--wp-card-cor), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Rodape simplificado. */

.wp-footer {
  position: relative;
  z-index: 1;
  padding: 1.5rem 0;
}

.wp-footer__inner {
  display: flex;
  justify-content: center;
}

.wp-footer__copy {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

/* discreet: reads as plain text until hovered, not an obvious call-to-action link */
.wp-footer__marca {
  color: inherit;
  text-decoration: none;
}

.wp-footer__marca:hover,
.wp-footer__marca:focus-visible {
  color: var(--wp-ouro);
  text-decoration: underline;
}

/* Pagina do briefing. */

.wp-briefing-pagina {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem 4rem;
}

.wp-voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--wp-ouro);
  text-decoration: none;
  margin-bottom: 1.25rem;
}

.wp-voltar:hover,
.wp-voltar:focus-visible {
  text-decoration: underline;
}

.wp-briefing-pagina__titulo {
  font-size: 1rem;
  color: #fff;
  margin: 0 0 1.25rem;
}

.wp-briefing {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 75vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 1.5rem;
  color: rgba(255, 255, 255, 0.85);
}

.wp-briefing-erro {
  font-family: system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.6);
}

/* Paginas de autenticacao (login/cadastro/confirmar). */

.wp-auth-pagina {
  position: relative;
  z-index: 1;
  padding: 3rem 1.5rem 4rem;
  display: flex;
  justify-content: center;
}

.wp-auth-card {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 6px;
  padding: 2rem 1.5rem;
}

.wp-auth-titulo {
  font-size: 0.95rem;
  color: #fff;
  text-align: center;
  margin: 0 0 1.75rem;
}

.wp-auth-campo {
  margin-bottom: 1.1rem;
}

.wp-auth-campo label {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.4rem;
}

.wp-auth-campo input[type="text"],
.wp-auth-campo input[type="email"],
.wp-auth-campo input[type="password"],
.wp-auth-campo input[type="number"],
.wp-auth-campo select {
  width: 100%;
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0.7em 0.85em;
  color: #fff;
}

.wp-auth-campo input:focus {
  outline: none;
  border-color: var(--wp-ciano);
  box-shadow: 0 0 0 3px rgba(0, 246, 255, 0.12);
}

/* Cadastro — campos com feedback ao vivo (apelido, forca da senha, confirmacao). */

.wp-auth-card--signup {
  max-width: 440px;
}

/* explica o ID sequencial que o usuario recebe ao se cadastrar */
.wp-auth-nota {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: -0.75rem 0 1.75rem;
}

.wp-auth-nota strong {
  color: var(--wp-ouro);
}

/* o label divide a linha com o selo de status do campo */
.wp-auth-campo__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.wp-auth-campo__topo label {
  margin-bottom: 0.4rem;
}

.wp-auth-dica {
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0.4rem 0 0;
}

.wp-auth-status {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.5);
}

.wp-auth-status--ok {
  color: var(--wp-l4);
}

.wp-auth-status--erro {
  color: #ff8080;
}

.wp-auth-aviso {
  display: none;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  padding: 0.85em 1em;
  margin: -0.35rem 0 1.25rem;
}

.wp-auth-aviso--visivel {
  display: flex;
}

/* fills the same slot .wp-checkout__math + .wp-moeda-grid take up when there IS
   balance to work with: centered like everything else on that page, instead of
   .wp-auth-aviso's own left-aligned icon-beside-text row (tuned for sitting under a
   form field, where it reads left to right with the input above it) */
.wp-checkout__sem-saldo {
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 0 1.5rem;
}

.wp-auth-aviso svg {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--wp-ouro);
}

/* barra de forca da senha, estilo medidor de power de fliperama */
.wp-auth-medidor {
  display: flex;
  gap: 4px;
  margin-top: 0.5rem;
}

.wp-auth-medidor__bloco {
  flex: 1;
  height: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.18s ease;
}

.wp-auth-medidor[data-nivel="1"] .wp-auth-medidor__bloco:nth-child(-n+1) {
  background: #ff3b3b;
}

.wp-auth-medidor[data-nivel="2"] .wp-auth-medidor__bloco:nth-child(-n+2) {
  background: var(--wp-l5);
}

.wp-auth-medidor[data-nivel="3"] .wp-auth-medidor__bloco:nth-child(-n+3) {
  background: var(--wp-ouro);
}

.wp-auth-medidor[data-nivel="4"] .wp-auth-medidor__bloco {
  background: var(--wp-l4);
  box-shadow: 0 0 8px -1px var(--wp-l4);
}

.wp-auth-oferta {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  padding: 0.85em 1em;
  margin-bottom: 1.25rem;
  cursor: pointer;
}

.wp-auth-oferta input {
  margin-top: 0.2em;
}

.wp-auth-oferta strong {
  color: var(--wp-ouro);
}

.wp-auth-oferta a {
  color: var(--wp-ouro);
}

.wp-auth-oferta__texto {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4em;
}

.wp-auth-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  font-size: 1rem;
  flex-shrink: 0;
  color: var(--wp-ouro);
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-auth-info svg {
  width: 1em;
  height: 1em;
}

.wp-auth-info:hover,
.wp-auth-info:focus-visible {
  color: var(--wp-ciano);
  border-color: var(--wp-ciano);
}

.wp-auth-link {
  display: inline;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: var(--wp-ouro);
  text-decoration: underline;
  cursor: pointer;
}

.wp-auth-link:hover,
.wp-auth-link:focus-visible {
  color: var(--wp-ciano);
}

/* Modal generico (overlay), estreado aqui pelo "?" de perfil publico do cadastro. */

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

.wp-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.wp-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 6, 0.9);
}

.wp-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  background: linear-gradient(160deg, #17151c, #0a0a0d);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 6px;
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

.wp-modal__card h2 {
  font-size: 0.95rem;
  color: #fff;
  margin: 0 0 1rem;
}

.wp-modal__card p {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.wp-modal__card p strong {
  color: var(--wp-ouro);
}

.wp-modal__fechar {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-modal__fechar:hover,
.wp-modal__fechar:focus-visible {
  color: var(--wp-ciano);
  border-color: var(--wp-ciano);
}

/* the address being confirmed, printed back big enough to actually proofread */
.wp-modal__destaque {
  font-family: 'Courier New', monospace;
  font-size: 0.95rem !important;
  color: var(--wp-ouro) !important;
  word-break: break-all;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  padding: 0.7em 0.9em;
  margin: 0 0 1rem !important;
}

.wp-modal__acoes {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.wp-modal__btn {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 0.8em 1em;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

.wp-modal__btn:hover,
.wp-modal__btn:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.wp-modal__btn--ok {
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: #0a0a0a;
  background: var(--wp-ciano);
  border-color: var(--wp-ciano);
}

.wp-modal__btn--ok:hover,
.wp-modal__btn--ok:focus-visible {
  color: #0a0a0a;
  border-color: var(--wp-ciano);
  filter: brightness(1.1);
}

.wp-auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  color: #0a0a0a;
  background: var(--wp-ciano);
  border: none;
  border-radius: 4px;
  padding: 0.9em 1em;
  cursor: pointer;
  transition: filter 0.18s ease;
}

.wp-auth-submit svg {
  font-size: 1.2rem;
}

.wp-auth-submit:hover {
  filter: brightness(1.1);
}

.wp-auth-submit:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.35);
  cursor: not-allowed;
}

.wp-auth-submit:disabled:hover {
  filter: none;
}

.wp-auth-rodape {
  text-align: center;
  margin-top: 1.5rem;
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}

.wp-auth-rodape a {
  color: var(--wp-ouro);
  text-decoration: none;
}

.wp-auth-rodape a:hover {
  text-decoration: underline;
}

.wp-auth-flash {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  border-radius: 4px;
  padding: 0.75em 1em;
  margin-bottom: 1.25rem;
}

.wp-auth-flash--erro {
  background: rgba(255, 0, 60, 0.1);
  border: 1px solid rgba(255, 0, 60, 0.4);
  color: #ff8080;
}

.wp-auth-flash--sucesso {
  background: rgba(57, 255, 20, 0.08);
  border: 1px solid rgba(57, 255, 20, 0.35);
  color: #9dffb0;
}

.wp-auth-flash--home {
  margin-top: 1.5rem;
}

/* Paginas de app (grade de ferramentas). */

.wp-app-pagina {
  position: relative;
  z-index: 1;
  padding: 2.5rem 1.5rem 4rem;
}

.wp-app-titulo {
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 0.75rem;
}

.wp-app-atualizado {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 1.5rem;
}

.wp-moeda-simbolo {
  font-size: 0.7rem;
  color: var(--wp-ouro);
  margin-left: 0.5rem;
}

/* Logo + tags de categoria na coluna "moeda" da tabela. */

.wp-moeda-link {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.wp-moeda-logo {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.wp-moeda-tags {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-left: 0.5rem;
}

.wp-moeda-tags__icone {
  display: inline-flex;
  font-size: 0.85em;
  opacity: 0.7;
}

.wp-moeda-titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
}

.wp-moeda-logo--grande {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* Tabela de cotacoes — rola sozinha no mobile, sem estourar a pagina. */

.wp-tabela-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.wp-tabela {
  width: 100%;
  border-collapse: collapse;
  font-family: system-ui, sans-serif;
  font-size: 0.88rem;
}

.wp-tabela th {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  text-align: left;
  color: var(--wp-ouro);
  background: rgba(255, 255, 255, 0.03);
  padding: 1em 0.9em;
  white-space: nowrap;
}

.wp-tabela td {
  padding: 0.85em 0.9em;
  color: rgba(255, 255, 255, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
}

.wp-tabela tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.wp-tabela a {
  color: #fff;
  text-decoration: none;
}

.wp-tabela a:hover {
  text-decoration: underline;
}

.wp-alta  { color: #39ff14; }
.wp-baixa { color: #ff4d6a; }

/* Paginacao da tabela de cotacoes. */

.wp-paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  font-family: system-ui, sans-serif;
}

.wp-paginacao__link {
  padding: 0.5em 1em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.85rem;
}

.wp-paginacao__link:hover {
  color: var(--wp-ouro);
  border-color: var(--wp-ouro);
}

.wp-paginacao__link--desabilitado {
  pointer-events: none;
  color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.07);
}

.wp-paginacao__status {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

/* Pagina de uma moeda. */

.wp-moeda-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.wp-moeda-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1.25rem;
}

.wp-moeda-stat__label {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.wp-moeda-stat__valor {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.8rem;
  color: #fff;
}

/* App window frame — shared chrome for every app (system/views/app_header.php / app_footer.php). */

.wp-app-frame {
  margin-top: -30px;
  padding: 2rem 1.5rem 4rem;
}

.wp-app-frame__janela {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.25));
  overflow: hidden;
}

.wp-app-frame__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.35em 0.7em;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid #303030;
}

/* Faixa de descricao logo abaixo da title bar, tipo status bar de emulador: a cor do
   app diluida, e a frase em fonte de leitura — a Press Start 2P da barra e otima pra
   um nome de tres palavras e pessima pra uma frase inteira.

   Nasce [hidden] no HTML e quem revela e o main.js, depois de conferir o localStorage.
   Assim ela nunca pisca na tela de quem ja apertou o x (ver system/views/app_header.php). */

.wp-app-frame__descricao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.7rem;
  background: color-mix(in srgb, var(--wp-app-cor) 9%, transparent);
  border-bottom: 1px solid #303030;
}

.wp-app-frame__descricao[hidden] {
  display: none;
}

.wp-app-frame__descricao-texto {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  max-width: 62ch;
}

.wp-app-frame__nome {
  /* tambem serve de <h1> na pagina inicial do app, e ai vem com margem e peso do navegador */
  margin: 0;
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.72rem;
  color: #fff;
}

.wp-app-frame__icone {
  display: flex;
  font-size: 1.1rem;
  color: var(--wp-app-cor);
}

.wp-app-frame__acoes {
  display: flex;
  gap: 0.4em;
}

.wp-app-frame__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.wp-app-frame__btn:hover,
.wp-app-frame__btn:focus-visible {
  color: var(--wp-app-cor);
  border-color: var(--wp-app-cor);
  background: rgba(255, 255, 255, 0.04);
}

/* present but wired to nothing yet, same reasoning as .wp-nav__link--em-breve:
   it should not invite a click */
.wp-app-frame__btn--em-breve {
  cursor: default;
}

.wp-app-frame__btn--em-breve:hover,
.wp-app-frame__btn--em-breve:focus-visible {
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.14);
  background: none;
}

.wp-app-frame__btn [data-icon="maximize"] {
  display: flex;
}

.wp-app-frame__btn [data-icon="minimize"] {
  display: none;
}

.wp-fullscreen .wp-app-frame__btn [data-icon="maximize"] {
  display: none;
}

.wp-fullscreen .wp-app-frame__btn [data-icon="minimize"] {
  display: flex;
}

/*
 * Botao de compartilhar — piscada de fliperama (main.js poe a classe --copiado).
 *
 * Os dois icones ficam empilhados, nao lado a lado: o "share" segura o tamanho do
 * botao e o "check" flutua por cima dele. Assim a troca e so opacidade, e o botao
 * nunca muda de largura no meio da animacao.
 *
 * O aviso e inline e empurra os outros botoes pra esquerda mesmo — vem antes do
 * botao no DOM, entao quem anda sao os controles da esquerda e o proprio botao de
 * compartilhar fica parado no canto, servindo de ancora pro olho.
 *
 * O espaco do aviso abre uma vez e fecha uma vez: quem pisca 3x e so a opacidade.
 * Abrir e fechar 3x faria a barra inteira tremer, que e exatamente o carnaval que
 * nao queremos.
 */

.wp-app-frame__share {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* anchors the stacked check icon below — without it, inset:0 would resolve against
   the wrapper and the check would stretch across the notice too */
.wp-app-frame__share .wp-app-frame__btn {
  position: relative;
}

.wp-app-frame__share [data-icon="share"] {
  display: flex;
}

.wp-app-frame__share [data-icon="shared"] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.wp-app-frame__share-aviso {
  display: none;
  white-space: nowrap;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--wp-app-cor);
  border: 1px solid var(--wp-app-cor);
  border-radius: 3px;
  padding: 0.55em 0.6em;
}

.wp-app-frame__share--copiado .wp-app-frame__share-aviso {
  display: block;
}

.wp-app-frame__share--copiado .wp-app-frame__btn {
  color: var(--wp-app-cor);
  border-color: var(--wp-app-cor);
}

/* 3 idas e voltas de 0.6s = 1.8s, o mesmo tempo que o main.js espera pra tirar a classe.
   forwards segura o estado final: sem ele, a opacidade volta ao padrao no instante em
   que a animacao acaba e o aviso da um flash de um quadro antes do JS escode-lo. */
.wp-app-frame__share--copiado [data-icon="share"] {
  animation: wp-share-fora 0.6s 3 forwards;
}

.wp-app-frame__share--copiado [data-icon="shared"],
.wp-app-frame__share--copiado .wp-app-frame__share-aviso {
  animation: wp-share-dentro 0.6s 3 forwards;
}

/* o corte e seco (1% de transicao), nao um fade — e o que faz ler como fliperama */
@keyframes wp-share-dentro {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes wp-share-fora {
  0%, 49%   { opacity: 0; }
  50%, 100% { opacity: 1; }
}

/* quem pediu menos movimento recebe o aviso parado, nao piscando */
@media (prefers-reduced-motion: reduce) {
  .wp-app-frame__share--copiado [data-icon="share"] {
    animation: none;
    opacity: 0;
  }

  .wp-app-frame__share--copiado [data-icon="shared"],
  .wp-app-frame__share--copiado .wp-app-frame__share-aviso {
    animation: none;
    opacity: 1;
  }
}

.wp-app-frame__corpo {
  padding: 1.75rem 1.1em;
}

/* Signup enticements — price alerts / favorites CTAs on app pages. */

.wp-promo {
  display: flex;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  padding: 1em 1.2em;
  margin: 0 0 1.5rem;
}

.wp-promo__icone {
  display: flex;
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--wp-ouro);
}

.wp-promo__texto {
  flex: 1;
  min-width: 200px;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.wp-promo__texto strong {
  color: #fff;
}

.wp-promo__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: #0a0a0a;
  background: var(--wp-ciano);
  border: none;
  border-radius: 4px;
  padding: 0.9em 1.1em;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.18s ease;
}

.wp-promo__cta:hover,
.wp-promo__cta:focus-visible {
  filter: brightness(1.1);
}

/* Ícones de favoritar/alerta por linha da tabela. */

.wp-linha-acoes {
  display: flex;
  gap: 0.35em;
}

/* worn by both <a> (alert, favorite-when-logged-out) and <button> (favorite-when-
   logged-in, inside a form) — the button resets are harmless on an <a>, and keep
   both tags looking identical */
.wp-linha-acoes__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.4);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-linha-acoes__btn:hover,
.wp-linha-acoes__btn:focus-visible {
  color: var(--wp-ouro);
  border-color: var(--wp-ouro);
}

/* already a favorite: gold all the time, not just on hover */
.wp-linha-acoes__btn--ativo {
  color: var(--wp-ouro);
  border-color: rgba(212, 175, 55, 0.5);
}

/* the favorite button is a <form> so it can POST — display:contents takes it out of
   the layout so .wp-linha-acoes' flex row treats the button as a direct child, same
   spacing as the plain <a> next to it */
.wp-linha-acoes__form {
  display: contents;
}

/* Linha expansivel do conversor de preco, logo abaixo da linha da moeda.
   A linha fica sempre no DOM: quem abre e fecha e o grid 0fr -> 1fr abaixo,
   porque um [hidden] no <tr> apareceria seco, sem transicao possivel. */

.wp-conversor-linha td {
  padding: 0;
  border-top: none;
  background: rgba(0, 0, 0, 0.25);
}

.wp-conversor {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.wp-conversor-linha--aberto .wp-conversor {
  grid-template-rows: 1fr;
}

.wp-conversor__interno {
  overflow: hidden;
  min-height: 0;
}

.wp-conversor__caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9em;
  padding: 1.5rem 3rem;
  font-family: system-ui, sans-serif;
  /* o conteudo sobe junto com a linha em vez de so ser revelado por ela */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.wp-conversor-linha--aberto .wp-conversor__caixa {
  opacity: 1;
  transform: none;
}

.wp-conversor__campos {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9em;
}

.wp-conversor__campo {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.wp-conversor__rotulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  padding-left: 0.2em;
}

.wp-conversor__controle {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: var(--wp-preto);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  padding: 0.55em 0.75em;
  transition: border-color 0.18s ease;
}

.wp-conversor__controle:focus-within {
  border-color: var(--wp-ouro);
}

.wp-conversor__input {
  width: 7.5em;
  background: none;
  border: none;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
}

.wp-conversor__input:focus {
  outline: none;
}

.wp-conversor__moeda {
  color: var(--wp-ouro);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* o select e a unica coisa clicavel dos dois lados, entao carrega a borda
   dourada e a setinha pra nao parecer texto estatico */
.wp-conversor__select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 0.6em;
  color: var(--wp-ouro);
}

.wp-conversor__select-wrap svg {
  width: 0.9em;
  height: 0.9em;
  pointer-events: none;
  opacity: 0.7;
}

.wp-conversor__select {
  background: none;
  color: var(--wp-ouro);
  border: none;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  max-width: 7em;
  padding-right: 0.3em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-overflow: ellipsis;
}

.wp-conversor__select:focus {
  outline: none;
}

.wp-conversor__select option {
  background: #17151c;
  color: #fff;
}

.wp-conversor__seta {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  padding-bottom: 0.75em;
}

.wp-conversor__seta svg {
  width: 1.2em;
  height: 1.2em;
}

/* a frase que traduz os dois campos pra linguagem humana */
.wp-conversor__resumo {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}

.wp-conversor__resumo strong {
  color: var(--wp-ouro);
  font-weight: 600;
}

.wp-conversor__fechar {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  color: rgba(255, 255, 255, 0.4);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-conversor__fechar:hover,
.wp-conversor__fechar:focus-visible {
  color: var(--wp-ciano);
  border-color: var(--wp-ciano);
}

@media (max-width: 640px) {
  .wp-conversor__caixa {
    padding: 1.25rem 1rem 1.25rem;
  }

  .wp-conversor__input {
    width: 6em;
  }

  /* de lado a seta vira uma quebra natural entre os dois campos empilhados */
  .wp-conversor__seta {
    padding-bottom: 0;
    transform: rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-conversor,
  .wp-conversor__caixa {
    transition: none;
  }
}

/* Bloco de alerta na pagina de uma moeda. */

.wp-alerta {
  margin-top: 2rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  padding: 1.5rem;
}

.wp-alerta__titulo {
  font-size: 0.82rem;
  color: #fff;
  margin: 0 0 0.4rem;
}

.wp-alerta__subtitulo {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1.1rem;
}

.wp-favoritar {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0.5em 0.9em;
  text-decoration: none;
  margin-left: 0.75em;
  vertical-align: middle;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-favoritar:hover,
.wp-favoritar:focus-visible {
  color: var(--wp-ouro);
  border-color: var(--wp-ouro);
}

/* Pagina dedicada de alerta de preco (mockup visual, ver plano — sem backend
   ainda). Reaproveita .wp-conversor__controle/moeda/input pro campo de valor.

   A pagina inteira gira em torno de uma unica caixa centralizada (poucas
   infos, sem motivo pra espalhar em colunas) — por isso o cabecalho tambem
   ganha uma variante centralizada so aqui, sem tocar wp-app-titulo global. */

.wp-alerta-cabecalho {
  text-align: center;
  margin: 0 auto;
}

.wp-alerta-cabecalho .wp-app-titulo {
  justify-content: center;
}

.wp-alerta-pagina {
  position: relative;
  margin-top: 1.5rem;
}

.wp-alerta-pagina--bloqueada .wp-alerta-pagina__interno {
  opacity: 0.3;
  filter: blur(1px);
  user-select: none;
}

/* Duas colunas: criar um alerta a esquerda, gerenciar os existentes a direita.
   minmax(0, 1fr) e nao 1fr porque o minimo automatico de um item de grid e o tamanho do
   conteudo — um endereco de e-mail longo esticaria a coluna e estouraria a pagina. */
.wp-alerta-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
  align-items: start;
}

.wp-alerta-col {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 1.5rem 1.35rem 1.75rem;
}

.wp-alerta-pagina__subtitulo {
  font-size: 0.75rem;
  color: #fff;
  margin: 0 0 1.25rem;
}

.wp-alerta-direcao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-bottom: 1rem;
}

.wp-alerta-direcao__opcao {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  background: var(--wp-preto);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  padding: 0.55em 0.9em;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.wp-alerta-direcao__opcao:has(input:checked) {
  color: var(--wp-ouro);
  border-color: rgba(212, 175, 55, 0.5);
}

.wp-alerta-valor-linha {
  display: flex;
  margin-bottom: 1rem;
}

.wp-alerta-valor {
  padding: 0.7em 1em;
}

.wp-alerta-valor .wp-conversor__moeda {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
}

.wp-alerta-valor .wp-conversor__input {
  width: 100%;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
}

/* Campo rotulado, generico da pagina: rotulo em cima, controle embaixo. */

.wp-alerta-campo {
  display: block;
  margin-bottom: 1rem;
}

.wp-alerta-campo__rotulo {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.6em;
}

/* Select nativo repintado. Nativo de proposito, e nao um combobox em JS: as opcoes
   "em breve" sao <option disabled>, o que o navegador torna genuinamente inclicavel —
   por mouse, por teclado e por POST forjado. Um combobox teria que reimplementar isso,
   mais a navegacao por setas e o comportamento mobile, tudo para ficar igual. */
.wp-alerta-select,
.wp-alerta-input {
  display: block;
  width: 100%;
  font-family: system-ui, sans-serif;
  font-size: 0.88rem;
  color: #fff;
  background: var(--wp-preto);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  padding: 0.65em 0.85em;
  transition: border-color 0.18s ease;
}

.wp-alerta-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 2.2em;
  /* chevron desenhado em data URI: nenhum request extra e nenhuma dependencia de fonte */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23d4af37' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 0.85em;
}

.wp-alerta-select:focus-visible,
.wp-alerta-input:focus-visible {
  outline: none;
  border-color: var(--wp-ouro);
}

.wp-alerta-select option {
  background: #17151c;
  color: #fff;
}

.wp-alerta-select option:disabled {
  color: rgba(255, 255, 255, 0.35);
}

.wp-alerta-select optgroup {
  background: #17151c;
  color: var(--wp-ouro);
  font-style: normal;
}

/* Seletor de moeda, no cabecalho e nao dentro do card: trocar de moeda muda de pagina,
   nao e um campo do formulario, e ficar junto dos campos sugeriria o contrario. */
.wp-alerta-troca {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.5rem;
}

.wp-alerta-troca__rotulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}

.wp-alerta-troca .wp-alerta-select {
  width: auto;
  min-width: 13rem;
}

.wp-alerta-destino[hidden] {
  display: none;
}

.wp-alerta-nota {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1rem;
}

.wp-alerta-nota a {
  color: var(--wp-ouro);
}

.wp-alerta-novo-email {
  max-width: 30rem;
  margin: 1.25rem auto 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 6px;
  padding: 1.35rem;
}

.wp-alerta-novo-email[hidden] {
  display: none;
}

/* Lista de alertas ja criados. */

.wp-alerta-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.wp-alerta-item {
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 0.75rem 0.85rem;
}

/* min-width: 0 solta o corpo pra encolher: sem isso um endereco longo se recusa a
   quebrar e empurra os botoes pra fora do card */
.wp-alerta-item__corpo {
  flex: 1 1 10rem;
  min-width: 0;
}

.wp-alerta-item__resumo,
.wp-alerta-item__meta {
  display: block;
  font-family: system-ui, sans-serif;
  overflow-wrap: anywhere;
}

.wp-alerta-item__resumo {
  font-size: 0.85rem;
  color: #fff;
  line-height: 1.4;
}

.wp-alerta-item__meta {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.25em;
}

.wp-alerta-item__acoes {
  display: flex;
  gap: 0.35em;
}

/* Paginas de recado que chegam por link de e-mail (confirm_email.php, unsubscribe.php):
   uma frase, um botao, nada mais — quem chega aqui veio de fora e vai embora em seguida. */

.wp-alerta-recado {
  max-width: 34rem;
  margin: 2rem auto;
  text-align: center;
}

.wp-alerta-recado__titulo {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 1rem;
}

.wp-alerta-recado__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 1rem;
}

.wp-alerta-recado__endereco {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--wp-ouro);
  overflow-wrap: anywhere;
  margin: 0 0 1.5rem;
}

.wp-alerta-recado__form {
  margin-bottom: 1rem;
}

/* botao que se le como link: usado pra "usar outro e-mail" e pra "nao, manter" */
.wp-alerta-recado__link {
  display: inline-block;
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--wp-ouro);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.wp-alerta-pagina .wp-auth-submit {
  display: block;
}

.wp-alerta-pagina .wp-auth-submit:disabled {
  opacity: 0.5;
  cursor: default;
  filter: none;
}

.wp-alerta-pagina__cadeado {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 2rem;
}

.wp-alerta-pagina__cadeado svg {
  font-size: 1.8rem;
  color: var(--wp-ouro);
}

.wp-alerta-pagina__cadeado h2 {
  font-size: 0.8rem;
  color: #fff;
  margin: 0;
}

.wp-alerta-pagina__cadeado p {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 0.6rem;
  max-width: 40ch;
}

/* 900px e nao 640: as duas colunas ficam apertadas demais bem antes da largura de celular,
   porque cada uma carrega selects de largura inteira e enderecos de e-mail. */
@media (max-width: 900px) {
  .wp-alerta-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .wp-alerta-col {
    padding: 1.25rem 1rem 1.5rem;
  }

  .wp-alerta-troca {
    display: flex;
  }

  .wp-alerta-troca .wp-alerta-select {
    width: 100%;
    min-width: 0;
  }
}

/* WeepCoin presentation page (system/apps/weepcoin). */

.wp-coin-secao {
  margin: 0 0 3.5rem;
}

.wp-coin-secao:last-of-type {
  margin-bottom: 2rem;
}

.wp-coin-secao__titulo {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-wrap: wrap;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wp-coin-texto {
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 1.25rem;
  max-width: 70ch;
}

.wp-coin-texto strong {
  color: #fff;
}

.wp-coin-texto--lead {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.9rem;
}

.wp-coin-pendente {
  font-family: system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-style: italic;
}

/* Hero */

.wp-coin-hero {
  position: relative;
  text-align: center;
  padding: 2.5rem 1rem 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wp-coin-hero__moeda {
  display: flex;
  justify-content: center;
  font-size: 3.5rem;
  color: var(--wp-ouro);
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 0 14px rgba(212, 175, 55, 0.45));
}

.wp-coin-hero__nome {
  margin: 0 0 0.9rem;
  font-size: clamp(1.2rem, 5vw, 2.2rem);
  letter-spacing: 0.12em;
}

.wp-coin-hero__ticker {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: var(--wp-ouro);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 3px;
  padding: 0.6em 1em;
  margin-bottom: 1.25rem;
}

.wp-coin-hero__tagline {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: 46ch;
  margin: 0 auto 1.5rem;
}

/* Status badges — every claim on this page carries one. */

.wp-coin-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  letter-spacing: 0.05em;
  line-height: 1;
  border-radius: 3px;
  padding: 0.55em 0.7em;
  white-space: nowrap;
}

.wp-coin-selo--grande {
  font-size: 0.6rem;
  padding: 0.9em 1.1em;
}

.wp-coin-selo--planejado {
  color: var(--wp-ciano);
  background: rgba(0, 246, 255, 0.07);
  border: 1px solid rgba(0, 246, 255, 0.35);
}

.wp-coin-selo--proposta {
  color: var(--wp-ouro);
  background: rgba(212, 175, 55, 0.07);
  border: 1px solid rgba(212, 175, 55, 0.35);
}

/* Trust pillars */

.wp-coin-pilares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.wp-coin-pilar {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1.5rem 1.25rem 1.25rem;
  overflow: hidden;
}

/* corner accents, same bezel language as the home grid cards */
.wp-coin-pilar::before,
.wp-coin-pilar::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--wp-ouro);
  opacity: 0.55;
}

.wp-coin-pilar::before {
  top: 6px;
  left: 6px;
  border-right: none;
  border-bottom: none;
}

.wp-coin-pilar::after {
  bottom: 6px;
  right: 6px;
  border-left: none;
  border-top: none;
}

.wp-coin-pilar__icone {
  display: flex;
  font-size: 1.7rem;
  color: var(--wp-ouro);
  margin-bottom: 1rem;
}

.wp-coin-pilar__titulo {
  font-size: 0.68rem;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 0.8rem;
}

.wp-coin-pilar__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.87rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 1.1rem;
}

.wp-coin-pilar__texto strong {
  color: rgba(255, 255, 255, 0.9);
}

/* Flywheel */

.wp-coin-flywheel {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.wp-coin-flywheel__passo {
  flex: 1;
  min-width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.52rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  padding: 1.1em 0.8em;
}

.wp-coin-flywheel__seta {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  color: rgba(212, 175, 55, 0.5);
}

@media (max-width: 640px) {
  .wp-coin-flywheel {
    flex-direction: column;
  }

  .wp-coin-flywheel__seta {
    justify-content: center;
    transform: rotate(90deg);
  }
}

/* Distribution bars */

.wp-coin-dist__linha {
  margin-bottom: 1.1rem;
}

.wp-coin-dist__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.wp-coin-dist__label {
  font-family: system-ui, sans-serif;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
}

.wp-coin-dist__pct {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  color: #fff;
}

.wp-coin-barra {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.wp-coin-barra__preenchida {
  height: 100%;
  opacity: 0.75;
}

/* Roadmap phases */

.wp-coin-fases {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-coin-fase {
  display: flex;
  gap: 1.1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.wp-coin-fase:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.wp-coin-fase__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  height: 2.6em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  color: var(--wp-ouro);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
}

.wp-coin-fase__titulo {
  font-size: 0.66rem;
  line-height: 1.5;
  color: #fff;
  margin: 0.5rem 0 0.6rem;
}

.wp-coin-fase__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.wp-coin-fase__texto strong {
  color: rgba(255, 255, 255, 0.88);
}

/* Honest status notice — this token does not exist yet. */

.wp-coin-aviso {
  display: flex;
  gap: 1.1rem;
  background: rgba(255, 106, 0, 0.06);
  border: 1px solid rgba(255, 106, 0, 0.35);
  border-radius: 4px;
  padding: 1.5rem;
}

.wp-coin-aviso__icone {
  display: flex;
  flex-shrink: 0;
  font-size: 1.6rem;
  color: #ff6a00;
}

.wp-coin-aviso__titulo {
  font-size: 0.68rem;
  line-height: 1.5;
  color: #ff9d4d;
  margin: 0.2rem 0 0.7rem;
}

.wp-coin-aviso__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.wp-coin-aviso__texto strong {
  color: rgba(255, 255, 255, 0.9);
}

/* weeConsole — floating widget, present on every page (see system/views/footer.php). */

.wp-console {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 100;
}

.wp-console__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.4rem;
  color: var(--wp-l4);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.4));
  border: 1px solid rgba(57, 255, 20, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.wp-console__toggle:hover,
.wp-console__toggle:focus-visible {
  border-color: var(--wp-l4);
  box-shadow: 0 0 16px -2px var(--wp-l4);
}

.wp-console__toggle[hidden] {
  display: none;
}

.wp-console__janela {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: min(340px, calc(100vw - 2.5rem));
  height: min(440px, calc(100vh - 8rem));
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.35));
  border: 1px solid rgba(57, 255, 20, 0.3);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.wp-console__janela[hidden] {
  display: none;
}

.wp-console__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6em 0.8em;
  background: rgba(0, 0, 0, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.wp-console__nome {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  color: #fff;
}

.wp-console__fechar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7em;
  height: 1.7em;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-console__fechar:hover,
.wp-console__fechar:focus-visible {
  color: var(--wp-l4);
  border-color: var(--wp-l4);
}

.wp-console__saida {
  flex: 1;
  overflow-y: auto;
  padding: 0.9em 1em;
  background: rgba(0, 0, 0, 0.9);
  scrollbar-width: thin;
  scrollbar-color: rgba(57, 255, 20, 0.4) rgba(255, 255, 255, 0.05);
}

.wp-console__saida::-webkit-scrollbar {
  width: 8px;
}

.wp-console__saida::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.wp-console__saida::-webkit-scrollbar-thumb {
  background: rgba(57, 255, 20, 0.4);
  border-radius: 4px;
}

.wp-console__saida::-webkit-scrollbar-thumb:hover {
  background: rgba(57, 255, 20, 0.6);
}

.wp-console__linha {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0 0 0.6em;
  word-break: break-word;
}

.wp-console__linha--sistema {
  color: rgba(255, 255, 255, 0.45);
}

.wp-console__linha--comando {
  color: #fff;
}

.wp-console__linha--resposta {
  color: var(--wp-l4);
}

.wp-console__linha--resposta a {
  color: var(--wp-l4);
  text-decoration: underline;
}

.wp-console__form {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 0.9em;
  background: rgba(0, 0, 0, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wp-console__prompt {
  font-family: 'Courier New', monospace;
  color: var(--wp-l4);
}

.wp-console__input {
  flex: 1;
  min-width: 0;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  color: #fff;
  background: transparent;
  border: none;
}

.wp-console__input:focus {
  outline: none;
}

@media (max-width: 480px) {
  .wp-console__janela {
    width: calc(100vw - 1.5rem);
    height: calc(100vh - 6.5rem);
  }
}

/* Paragrafo de abertura de um app, irmao de .wp-app-titulo. */

.wp-app-intro {
  font-family: system-ui, sans-serif;
  font-size: 0.87rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1.75rem;
  max-width: 62ch;
}

/* A marca de um app: o proprio icone dele, grande, logo acima do campo que a pessoa
   veio preencher — o arranjo do Google, logo em cima e caixa embaixo.

   Generico de proposito, e nao .wp-scanner-*: varios apps comecam com "digite uma
   coisa aqui", e todos eles herdam esse mesmo bloco so trocando o icone. A cor sai de
   var(--wp-app-cor), que o frame ja injeta, entao cada app acende na cor dele sozinho.

   drop-shadow e nao text-shadow: o icone e um <svg> inline (ver assets/classes/icon.php),
   e text-shadow desenharia o halo na caixa do elemento em vez de no contorno do desenho. */

.wp-app-marca {
  display: flex;
  justify-content: center;
  /* o svg do Iconify vem com width/height em 1em, entao o tamanho e isto aqui */
  font-size: 4.25rem;
  line-height: 1;
  color: var(--wp-app-cor);
  filter: drop-shadow(0 0 22px var(--wp-app-cor));
  margin: 0 0 1.5rem;
  animation: wp-marca-respirar 4s ease-in-out infinite;
}

/* respiro lento do brilho, no ritmo de um radar — o icone em si nao se mexe */
@keyframes wp-marca-respirar {
  0%, 100% { filter: drop-shadow(0 0 14px var(--wp-app-cor)); }
  50%      { filter: drop-shadow(0 0 30px var(--wp-app-cor)); }
}

@media (prefers-reduced-motion: reduce) {
  .wp-app-marca {
    animation: none;
  }
}

/* Pagina de ajuda de um app (system/views/app_help.php). Deliberadamente sobrio: o
   miolo e texto corrido em .wp-app-intro, e isso aqui so da ritmo entre as secoes. */

.wp-app-help__titulo {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.7rem;
  line-height: 1.5;
  color: #fff;
  margin: 2.25rem 0 1rem;
}

.wp-app-help__titulo svg {
  font-size: 1.1rem;
  color: var(--wp-ouro);
}

.wp-app-help__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 2.5rem;
}

.wp-app-help__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--wp-ouro);
  text-decoration: none;
}

.wp-app-help__links a:hover {
  text-decoration: underline;
}

/* Loteria de Fila (app 9). O sotaque de fliperama vem da fonte pixel nos numeros
   e dos cantos de bezel na grade — o unico brilho de verdade e o do jackpot. */

.wp-loteria-jackpot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.1), rgba(0, 0, 0, 0.3));
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 4px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 2rem;
}

.wp-loteria-jackpot__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.wp-loteria-jackpot__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  color: var(--wp-ouro);
}

.wp-loteria-jackpot__nota {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}

.wp-loteria-jackpot__valor {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--wp-ouro);
  text-shadow: 0 0 14px rgba(212, 175, 55, 0.45);
}

/* Cards das quatro filas. */

.wp-loteria-filas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.wp-loteria-fila {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1.25rem;
  transition: border-color 0.18s ease;
}

.wp-loteria-fila:hover {
  border-color: var(--wp-app-cor);
}

.wp-loteria-fila__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.wp-loteria-fila__preco {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  color: #fff;
}

.wp-loteria-fila__vagas {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}

.wp-loteria-fila__premio {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wp-loteria-fila__premio-label {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}

.wp-loteria-fila__premio-valor {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.8rem;
  color: var(--wp-l4);
}

.wp-loteria-fila__split {
  font-family: system-ui, sans-serif;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

.wp-loteria-fila__fila {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.wp-loteria-fila__fila-label {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.wp-loteria-fila__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  margin-top: auto;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.58rem;
  line-height: 1.5;
  color: #0a0a0a;
  background: var(--wp-ciano);
  border-radius: 4px;
  padding: 0.9em 1em;
  text-decoration: none;
  transition: filter 0.18s ease;
}

.wp-loteria-fila__btn svg {
  font-size: 1.1rem;
}

.wp-loteria-fila__btn:hover {
  filter: brightness(1.1);
}

.wp-loteria-fila__btn--off {
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
  cursor: default;
}

/* Grade de numeros. Livre e clicavel, vendido e apagado, o seu ganha a cor do app. */

.wp-loteria-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.6rem;
  margin: 0 0 2.5rem;
}

.wp-loteria-num {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  aspect-ratio: 1;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.wp-loteria-num small {
  font-size: 0.4rem;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

/* cantos de bezel, o mesmo acabamento dos cards da home */
.wp-loteria-num::before,
.wp-loteria-num::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  opacity: 0.5;
}

.wp-loteria-num::before {
  top: 4px;
  left: 4px;
  border-right: none;
  border-bottom: none;
}

.wp-loteria-num::after {
  bottom: 4px;
  right: 4px;
  border-left: none;
  border-top: none;
}

.wp-loteria-num--livre {
  color: var(--wp-ciano);
  background: rgba(0, 246, 255, 0.05);
}

.wp-loteria-num--livre:hover,
.wp-loteria-num--livre:focus-visible {
  transform: translateY(-3px);
  border-color: var(--wp-ciano);
  box-shadow: 0 0 16px -4px var(--wp-ciano);
}

.wp-loteria-num--off {
  color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.02);
}

.wp-loteria-num--meu {
  color: var(--wp-app-cor);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--wp-app-cor);
}

/* Titulos de secao e blocos de apoio. */

.wp-loteria-secao {
  margin-top: 2.5rem;
}

.wp-loteria-secao__titulo {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.7rem;
  line-height: 1.5;
  color: #fff;
  margin: 2.25rem 0 1rem;
}

.wp-loteria-secao__titulo svg {
  font-size: 1.1rem;
  color: var(--wp-ouro);
}

.wp-loteria-sub {
  display: block;
  margin-top: 0.5rem;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.wp-loteria-split {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 1.5rem 0 0;
}

.wp-loteria-split strong {
  color: var(--wp-l4);
}

.wp-loteria-rotulo {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 1.5rem 0 0.5rem;
}

.wp-loteria-chunk {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: var(--wp-ouro);
}

.wp-loteria-nota {
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
}

.wp-loteria-podio {
  margin-bottom: 2rem;
}

.wp-loteria-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 2.5rem;
}

.wp-loteria-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--wp-ouro);
  text-decoration: none;
}

.wp-loteria-links a:hover {
  text-decoration: underline;
}

/* Confirmacao da compra. */

.wp-loteria-compra {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid var(--wp-app-cor);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.wp-loteria-compra__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.4em;
  height: 3.4em;
  font-family: 'Press Start 2P', monospace;
  font-size: 1.1rem;
  color: var(--wp-app-cor);
  border: 1px solid var(--wp-app-cor);
  border-radius: 4px;
}

.wp-loteria-compra__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.wp-loteria-compra__texto strong {
  color: #fff;
}

.wp-loteria-saldo {
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  padding: 1.1rem 1.25rem;
  margin: 2rem 0 1.5rem;
}

.wp-loteria-saldo__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: var(--wp-ouro);
}

.wp-loteria-saldo__nota {
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0.75rem 0 0;
}

@media (max-width: 480px) {
  .wp-loteria-filas {
    grid-template-columns: 1fr;
  }

  .wp-loteria-grade {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  }

  .wp-loteria-jackpot__valor {
    font-size: 0.95rem;
  }
}


/* Carteira — /u/wallet. Tres saldos lado a lado, duas acoes, e os dois extratos
   em duas colunas embaixo. */

.wp-carteira-saldos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.wp-carteira-saldo {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  padding: 1.3rem;
}

/* the dollar balance is the real money, so it gets the gold treatment and the
   other two stay quiet next to it */
.wp-carteira-saldo--principal {
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.1), rgba(0, 0, 0, 0.3));
  border-color: rgba(212, 175, 55, 0.45);
}

.wp-carteira-saldo__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

.wp-carteira-saldo__label svg {
  font-size: 1rem;
  flex-shrink: 0;
}

.wp-carteira-saldo--principal .wp-carteira-saldo__label {
  color: var(--wp-ouro);
}

.wp-carteira-saldo__valor {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.15rem;
  line-height: 1.35;
  color: #fff;
  word-break: break-word;
}

.wp-carteira-saldo--principal .wp-carteira-saldo__valor {
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}

/* pushed to the bottom so the three cards line their footers up even when the
   headings above them wrap to different heights */
.wp-carteira-saldo__linhas {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: auto;
  padding-top: 0.3rem;
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
}

.wp-carteira-saldo__linhas strong {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.wp-carteira-saldo__link {
  align-self: flex-start;
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--wp-ciano);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

.wp-carteira-saldo__link:hover {
  color: var(--wp-ouro);
}

/* Os dois extratos: dolares a esquerda (5 colunas, entao ganha mais espaco),
   tickets a direita. Cada um rola sozinho no que sobrar da sua coluna. */
.wp-carteira-tabelas {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.wp-carteira-tabela {
  min-width: 0;
}

.wp-carteira-tabela .wp-app-titulo {
  margin-top: 0;
}

@media (max-width: 900px) {
  .wp-carteira-tabelas {
    grid-template-columns: 1fr;
  }
}

.wp-carteira-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.wp-carteira-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: #fff;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0.95em 1.4em;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.18s ease, color 0.18s ease, filter 0.18s ease;
}

.wp-carteira-btn svg {
  font-size: 1.2rem;
}

.wp-carteira-btn:hover {
  border-color: var(--wp-ciano);
  color: var(--wp-ciano);
}

.wp-carteira-btn--primario {
  color: #0a0a0a;
  background: var(--wp-ciano);
  border-color: var(--wp-ciano);
}

.wp-carteira-btn--primario:hover {
  color: #0a0a0a;
  filter: brightness(1.1);
}

@media (max-width: 480px) {
  .wp-carteira-saldo__valor {
    font-size: 1.05rem;
  }

  .wp-carteira-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}


/* Card favoritavel — so os 4 apps live tem a estrela. O card vira um <div> em vez de
   <a>, porque o botao de favoritar nao pode ficar aninhado dentro de um link; o link
   pra abrir o app passa a ser .wp-card__corpo, um filho que cobre o resto do card. */

.wp-card--live {
  padding: 0;
}

.wp-card__corpo {
  display: block;
  padding: 1.9rem 1.25rem 2.75rem;
  text-decoration: none;
  color: inherit;
}

/* Bare icon, no circle behind it: background is transparent and the button is only
   as big as the star itself. tabler:star is outline-only — the filled variant was
   dropped, so the icon never gets a solid fill, only a color change. */
.wp-card__favorito {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.wp-card__favorito svg {
  font-size: 1.3rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* only appears while the mouse is over the card, unless it's already a favorite */
.wp-card:hover .wp-card__favorito,
.wp-card__favorito:focus-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wp-card__favorito--ativo {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  color: var(--wp-ouro);
}

.wp-card__favorito:hover,
.wp-card__favorito:focus-visible {
  color: var(--wp-ouro);
}

/* hovering an already-favorited star hints that a click removes it */
.wp-card__favorito--ativo:hover {
  color: #ff4d6a;
}

/* the same star reused in the app bar (system/views/app_header.php), next to
   fullscreen/share: square button chrome from .wp-app-frame__btn instead of the
   always-absolute, hover-to-reveal treatment the card version needs */
.wp-app-frame__btn.wp-card__favorito {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  /* .wp-card__favorito's own border:none/background:none would otherwise win this
     tie (same specificity, but it comes later in the sheet) */
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
}

.wp-app-frame__btn.wp-card__favorito svg {
  font-size: 1rem;
  filter: none;
}

/* light touch on purpose: a full gold border+fill (like .wp-app-frame__btn--premium)
   would read as "you're paying for this", which favoriting isn't */
.wp-app-frame__btn.wp-card__favorito--ativo {
  color: rgba(212, 175, 55, 0.75);
}

.wp-app-frame__btn.wp-card__favorito--ativo:hover,
.wp-app-frame__btn.wp-card__favorito--ativo:focus-visible {
  color: #ff4d6a;
  border-color: #ff4d6a;
}

/* Tooltip generico via data-tooltip: so o favorito da barra usa isto por enquanto
   (os outros botoes da barra ainda dependem do title nativo do navegador). Um
   ::after em vez de title porque title tem aquele delay de quase 1s que, num botao
   que muda de rotulo a cada clique (favoritar / desfavoritar), deixa a resposta do
   clique dessincronizada do que o mouse ainda esta mostrando. */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.4em 0.7em;
  background: #131313;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  white-space: nowrap;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* the star's "something just happened" feedback: a quick pop-and-settle on the icon
   plus, in the bar (where there's a visible square to ring), a gold pulse fading out
   from its border. Transform/box-shadow only: the button's own box never resizes,
   so the square stays exactly the size of its neighbours before, during and after. */
@keyframes wp-favorito-pop {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.5) rotate(-14deg); }
  55%  { transform: scale(0.85) rotate(8deg); }
  80%  { transform: scale(1.08) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.wp-card__favorito--pop svg {
  animation: wp-favorito-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wp-favorito-flash {
  0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55); }
  70%  { box-shadow: 0 0 0 11px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.wp-app-frame__btn.wp-card__favorito--pop {
  animation: wp-favorito-flash 0.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .wp-card__favorito--pop svg,
  .wp-app-frame__btn.wp-card__favorito--pop {
    animation: none;
  }
}


/* Grafico de linha generico, plain SVG (sem lib). Uma cor so, a do proprio app. */

.wp-grafico-linha {
  display: block;
  width: 100%;
  height: 200px;
  margin: 1rem 0 0.5rem;
}

.wp-grafico-linha polyline {
  fill: none;
  stroke: var(--wp-app-cor, var(--wp-ouro));
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}


/* ---------------------------------------------------------------------------
   Megadashboard — a área de admin.

   Moldura própria, deliberadamente parecida com a janela de app (wp-app-frame)
   mas separada dela: admin não é um card do grid, e não deve herdar as ações da
   barra de app. Cor de acento é o ciano, não a cor do app, justamente pra ficar
   óbvio quando você está numa tela interna.
   --------------------------------------------------------------------------- */

.wp-admin {
  margin: 1.5rem auto 3rem;
}

.wp-admin__janela {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.25));
  overflow: hidden;
}

.wp-admin__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.45em 0.8em;
  background: rgba(0, 246, 255, 0.05);
  border-bottom: 1px solid rgba(0, 246, 255, 0.25);
}

.wp-admin__marca {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--wp-ciano);
  text-decoration: none;
}

.wp-admin__crumb {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
}

.wp-admin__crumb::before {
  content: "/";
  margin-right: 0.5em;
  color: rgba(255, 255, 255, 0.25);
}

/* empurrado pra direita, longe da marca e do crumb */
.wp-admin__user {
  margin-left: auto;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: var(--wp-ouro);
}

.wp-admin__corpo {
  padding: 1.5rem 1.25rem;
}

.wp-admin__titulo {
  font-size: 1.05rem;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 0.75rem;
}

.wp-admin__intro {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1.5rem;
}

/* aviso neutro — .wp-auth-flash só tem os variantes de erro e sucesso */
.wp-admin__aviso {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  border-radius: 4px;
  padding: 0.75em 1em;
  margin: 0 0 1.5rem;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #e8cf7a;
}

.wp-admin__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.wp-admin__link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7em 0.9em;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.wp-admin__link:hover {
  border-color: rgba(0, 246, 255, 0.5);
  background: rgba(0, 246, 255, 0.04);
}

.wp-admin__item-id {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.35);
  min-width: 2.5em;
}

.wp-admin__item-nome {
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  color: #fff;
}

.wp-admin__item-status {
  margin-left: auto;
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}

.wp-admin__voltar {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  margin: 2rem 0 0;
}

.wp-admin__voltar a {
  color: var(--wp-ciano);
  text-decoration: none;
}

.wp-admin__voltar a:hover {
  text-decoration: underline;
}


/* ---------------------------------------------------------------------------
   Endless Run (app 12) — jogo à esquerda, ranking da semana à direita.
   Empilha no mobile, com o ranking indo pra baixo do canvas.
   --------------------------------------------------------------------------- */

.wp-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 720px) {
  .wp-run {
    grid-template-columns: 1fr;
  }
}

/* o overlay é posicionado em relação a este bloco */
.wp-run__jogo {
  position: relative;
  min-width: 0;
}

.wp-run__canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(0, 246, 255, 0.04), rgba(0, 0, 0, 0.3));
  touch-action: none;
}

/* som à esquerda, pontuação à direita, na mesma linha acima do canvas */
.wp-run__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.wp-run__som {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  user-select: none;
}

.wp-run__som:hover {
  color: rgba(255, 255, 255, 0.75);
}

.wp-run__som input {
  accent-color: var(--wp-ciano);
  cursor: pointer;
}

.wp-run__placar {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.wp-run__placar-label {
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}

.wp-run__placar-valor {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.9rem;
  color: var(--wp-ciano);
}

.wp-run__overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.9rem;
  bottom: 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1rem;
  background: rgba(6, 6, 8, 0.72);
  border-radius: 3px;
  pointer-events: none;
}

.wp-run__overlay[hidden] {
  display: none;
}

.wp-run__overlay-titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #fff;
  margin: 0;
}

.wp-run__overlay-nota {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--wp-ciano);
  margin: 0;
  min-height: 1.2em;
}

.wp-run__controles {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0.6rem 0 0;
}

.wp-run__login {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0.75rem 0 0;
}

.wp-run__login a {
  color: var(--wp-ouro);
  margin-left: 0.3em;
}

/* ranking */

.wp-run__lado-titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  line-height: 1.6;
  color: var(--wp-ouro);
  margin: 0 0 0.25rem;
}

.wp-run__lado-nota {
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 0.75rem;
}

.wp-run__rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.wp-run__rank-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4em 0.5em;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
}

.wp-run__rank-item--eu {
  border-color: rgba(0, 246, 255, 0.45);
  background: rgba(0, 246, 255, 0.05);
}

.wp-run__rank-pos {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.35);
  min-width: 1.6em;
}

.wp-run__rank-nome {
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-run__rank-pontos {
  margin-left: auto;
  color: var(--wp-ciano);
}

.wp-run__rank-vazio {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.4);
}

/* segundo título da coluna (o ranking), que vem depois do log de jogadas */
.wp-run__lado-titulo--rank {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* log das últimas jogadas do próprio usuário */
.wp-run__log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}

.wp-run__log-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3em 0.5em;
  border-left: 2px solid rgba(0, 246, 255, 0.3);
  background: rgba(255, 255, 255, 0.02);
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
}

.wp-run__log-quando {
  color: rgba(255, 255, 255, 0.5);
}

.wp-run__log-seg {
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.7rem;
}

.wp-run__log-pontos {
  margin-left: auto;
  color: var(--wp-ciano);
}

.wp-run__meu {
  margin: 0 0 0.75rem;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
}

.wp-run__meu p {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  color: rgba(255, 255, 255, 0.5);
}

.wp-run__meu strong {
  color: var(--wp-ouro);
}

/* Subdomain Scanner (app 6). Accents come from var(--wp-app-cor), injected by the app
   frame, except inside the terminal — that one is green on black on purpose. */

/* Front page: title, pitch, search box and the paid-mode teaser read as one centred
   block. Scoped to .wp-scanner-hero rather than applied to the pieces themselves,
   because the same form partial also sits on a scan's permalink, where it is a
   secondary control and stays where it is. */

.wp-scanner-hero {
  max-width: 62ch;
  text-align: center;
  margin: 0 auto 2.75rem;
}

.wp-scanner-hero .wp-auth-flash {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* the box is centred, its contents are not — a domain is typed left to right */
.wp-scanner-hero .wp-scanner-form {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.wp-scanner-hero .wp-scanner-visibility {
  justify-content: center;
}

.wp-scanner-hero .wp-scanner-visibility__note {
  text-align: center;
}

.wp-scanner-form {
  max-width: 46ch;
  margin: 0 0 1.5rem;
}

.wp-scanner-form__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.wp-scanner-form__acoes .wp-auth-submit,
.wp-scanner-form__acoes .wp-carteira-btn {
  flex: 1 1 auto;
  justify-content: center;
}

.wp-scanner-visibility {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  margin: 0.9rem 0 1rem;
}

.wp-scanner-visibility input {
  width: 1.05em;
  height: 1.05em;
  accent-color: var(--wp-app-cor);
  cursor: inherit;
}

/* anonymous visitors: checked, and not theirs to change */
.wp-scanner-visibility--locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.wp-scanner-visibility__note {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin: -0.5rem 0 1rem;
}

/* Paid-mode teaser. Gold, because on this site gold is what costs money. */

.wp-scanner-premium {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  padding: 0.8em 1em;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.wp-scanner-premium:hover,
.wp-scanner-premium:focus-visible {
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--wp-ouro);
}

.wp-scanner-premium svg {
  font-size: 1.2rem;
  color: var(--wp-ouro);
}

.wp-scanner-premium__nome {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: var(--wp-ouro);
}

.wp-scanner-premium__pitch {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
}

/* The two history lists. Side by side and each in its own bordered panel, because
   stacked and unframed they read as one long list with a heading stuck in the middle.
   Logged out there is only the public panel, and auto-fit lets it take the full row. */

.wp-scanner-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.wp-scanner-panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
}

.wp-scanner-panel__title {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.6rem;
  line-height: 1.5;
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  padding: 1.1em 1.1em;
  margin: 0;
}

.wp-scanner-panel__title svg {
  font-size: 1.1rem;
  color: var(--wp-ouro);
}

.wp-scanner-panel__empty {
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  padding: 1.4em 1.2em;
  margin: 0;
}

.wp-scanner-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-scanner-list__item + .wp-scanner-list__item {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* two lines per entry: the domain (plus its badge) on top, the numbers below. In a
   column this narrow a single row would wrap into something unreadable. */
.wp-scanner-list__link {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9em 1.1em;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.wp-scanner-list__link:hover {
  background: rgba(255, 255, 255, 0.03);
  border-left-color: var(--wp-app-cor);
}

.wp-scanner-list__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.wp-scanner-list__domain {
  font-family: 'Courier New', monospace;
  font-size: 0.92rem;
  color: #fff;
  word-break: break-all;
}

.wp-scanner-list__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
}

.wp-scanner-list__count {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: var(--wp-app-cor);
}

.wp-scanner-list__when,
.wp-scanner-list__who {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}

.wp-scanner-list__who {
  flex-shrink: 0;
  white-space: nowrap;
}

.wp-scanner-score {
  font-size: 1.6rem;
  color: var(--wp-app-cor);
}

/* The result, dressed as a terminal. */

.wp-scanner-terminal {
  position: relative;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(57, 255, 20, 0.25);
  border-radius: 4px;
  padding: 2.4rem 1.1rem 1.1rem;
  margin: 1.5rem 0;
}

/* bezel corners, the same arcade-cabinet trick .wp-card uses */
.wp-scanner-terminal::before,
.wp-scanner-terminal::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--wp-app-cor);
  opacity: 0.7;
}

.wp-scanner-terminal::before {
  top: 6px;
  left: 6px;
  border-right: none;
  border-bottom: none;
}

.wp-scanner-terminal::after {
  bottom: 6px;
  right: 6px;
  border-left: none;
  border-top: none;
}

.wp-scanner-terminal__copy {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 0.7em 0.8em;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.wp-scanner-terminal__copy:hover {
  color: #fff;
  border-color: var(--wp-app-cor);
}

.wp-scanner-terminal__copy--done {
  color: #39ff14;
  border-color: rgba(57, 255, 20, 0.5);
}

.wp-scanner-terminal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 26rem;
  overflow: auto;
}

.wp-scanner-terminal__line {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.9;
  color: #39ff14;
  word-break: break-all;
}

.wp-scanner-terminal__line::before {
  content: "> ";
  color: rgba(57, 255, 20, 0.4);
}

/* the IP (or dead-CNAME target) riding along a hostname line — dimmer than the name
   itself so the eye still reads the list of names first */
.wp-scanner-terminal__ip {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.78rem;
}

.wp-scanner-terminal--empty {
  padding: 2.4rem 1.1rem;
  border-color: rgba(255, 255, 255, 0.12);
}

.wp-scanner-terminal__empty {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  line-height: 1.9;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* Advanced-mode page: everything in it centered, title through the back link, instead
   of the left-aligned flow .wp-app-titulo/.wp-app-intro default to everywhere else. */

.wp-scanner-premium-page {
  text-align: center;
}

.wp-scanner-premium-page .wp-app-intro {
  margin-left: auto;
  margin-right: auto;
}

.wp-scanner-premium-page .wp-loteria-links {
  justify-content: center;
}

.wp-scanner-premium-page .wp-scanner-benefits__item {
  text-align: left;
}

.wp-scanner-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}

.wp-scanner-benefits__item {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1.4rem 1.25rem;
}

.wp-scanner-benefits__icon {
  display: flex;
  font-size: 1.5rem;
  color: var(--wp-app-cor);
  margin-bottom: 0.9rem;
}

.wp-scanner-benefits__title {
  font-size: 0.6rem;
  line-height: 1.6;
  color: #fff;
  margin: 0 0 0.7rem;
}

.wp-scanner-benefits__body {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.wp-scanner-price {
  max-width: 40ch;
  text-align: center;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  padding: 2rem 1.5rem;
  margin: 0 auto 1.5rem;
}

.wp-scanner-price__value {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 1.3rem;
  color: var(--wp-ouro);
  margin-bottom: 0.8rem;
}

.wp-scanner-price__note {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.5rem;
}

/* the button is disabled on purpose — it looks the part and does nothing */
.wp-scanner-price .wp-auth-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.wp-scanner-price__soon {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0.9rem 0 0;
}

@media (max-width: 480px) {
  .wp-scanner-premium {
    flex-wrap: wrap;
    justify-content: center;
  }

  .wp-scanner-terminal {
    padding-top: 3.4rem;
  }

  .wp-scanner-score {
    font-size: 1.2rem;
  }

  .wp-scanner-price__value {
    font-size: 1rem;
  }
}

/* Self-Destruct Note (app 52) — landing page only, nothing here is wired up. Every
   interactive-looking element (.wp-note-mock__*, the CTA button) is disabled in the
   markup; the styling below still gives them a real hover/focus look so the mock
   reads as "coming soon", not "broken". */

.wp-note-hero {
  max-width: 62ch;
  text-align: center;
  margin: 0 auto 2.5rem;
}

.wp-note-hero__intro {
  margin-left: auto;
  margin-right: auto;
}

/* The mock composer — a preview of the product, not the product. */

.wp-note-mock {
  position: relative;
  max-width: 46ch;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  padding: 1.5rem 1.25rem 1.25rem;
  margin: 0 auto 2.5rem;
}

.wp-note-mock__badge {
  position: absolute;
  top: -1px;
  right: -1px;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: var(--wp-app-cor);
  background: var(--wp-preto);
  border: 1px solid var(--wp-app-cor);
  padding: 0.5em 0.7em;
}

.wp-note-mock__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.wp-note-mock__label {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

.wp-note-mock__formats {
  display: flex;
  gap: 0.4rem;
}

.wp-note-mock__format {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  padding: 0.55em 0.7em;
  cursor: not-allowed;
}

.wp-note-mock__format--active {
  color: var(--wp-app-cor);
  border-color: var(--wp-app-cor);
  background: rgba(255, 255, 255, 0.06);
}

.wp-note-mock__textarea {
  width: 100%;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 0.8em 0.9em;
  resize: none;
  cursor: not-allowed;
}

.wp-note-mock__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1rem;
}

.wp-note-mock__expiry {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.wp-note-mock__expiry select {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 0.4em 0.6em;
  cursor: not-allowed;
}

.wp-note-mock__generate {
  width: auto;
  opacity: 0.55;
  cursor: not-allowed;
}

/* The four "how it works" steps. */

.wp-note-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}

.wp-note-step {
  text-align: center;
  padding: 0 0.5rem;
}

.wp-note-step__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.2rem;
  color: var(--wp-app-cor);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  margin-bottom: 0.9rem;
}

.wp-note-step__titulo {
  font-size: 0.62rem;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 0.6rem;
}

.wp-note-step__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* Free vs Premium — two cards, the paid one visually heavier so it wins the eye
   without shouting; the whole point of the layout is the comparison, not a sales page. */

.wp-note-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0 2.5rem;
}

.wp-note-plan {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1.5rem 1.4rem;
}

.wp-note-plan--premium {
  border-color: rgba(212, 175, 55, 0.4);
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.07), rgba(0, 0, 0, 0.25));
}

.wp-note-plan__badge {
  position: absolute;
  top: -12px;
  right: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #0a0a0a;
  background: var(--wp-ouro);
  border-radius: 50%;
  font-size: 0.9rem;
}

.wp-note-plan__topo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5em 0.7em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.wp-note-plan__nome {
  font-size: 0.75rem;
  color: #fff;
  margin: 0;
}

.wp-note-plan__preco {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
}

.wp-note-plan__preco--ouro {
  color: var(--wp-ouro);
}

.wp-note-plan__preco-nota {
  flex-basis: 100%;
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
}

.wp-note-plan__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.wp-note-plan__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.wp-note-plan__lista li svg {
  flex-shrink: 0;
  margin-top: 0.2em;
  color: var(--wp-app-cor);
}

.wp-note-plan__item--limite {
  color: rgba(255, 255, 255, 0.4);
}

.wp-note-plan__item--limite svg {
  color: rgba(255, 255, 255, 0.3);
}

.wp-note-plan--premium .wp-note-plan__lista li svg {
  color: var(--wp-ouro);
}

/* The advanced-features grid — the four wild ideas. */

.wp-note-wild {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}

.wp-note-wild__item {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1.5rem 1.25rem;
  overflow: hidden;
}

/* the same arcade-cabinet bezel corners .wp-card uses, in the app's own color */
.wp-note-wild__item::before,
.wp-note-wild__item::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--wp-app-cor);
  opacity: 0.6;
}

.wp-note-wild__item::before {
  top: 6px;
  left: 6px;
  border-right: none;
  border-bottom: none;
}

.wp-note-wild__item::after {
  bottom: 6px;
  right: 6px;
  border-left: none;
  border-top: none;
}

.wp-note-wild__icon {
  display: flex;
  font-size: 1.5rem;
  color: var(--wp-app-cor);
  margin-bottom: 0.9rem;
}

.wp-note-wild__title {
  font-size: 0.62rem;
  line-height: 1.6;
  color: #fff;
  margin: 0 0 0.7rem;
}

.wp-note-wild__body {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.wp-note-wild__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.wp-note-wild__chips .wp-coin-selo svg {
  font-size: 0.85em;
}

/* Honesty note — deliberately styled like a neutral flash, not an error, even though
   it borrows .wp-auth-flash: this isn't bad news, it's a promise we intend to keep. */

.wp-note-honesty {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
  text-align: center;
}

.wp-note-cta {
  max-width: 40ch;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  padding: 2rem 1.5rem;
  margin: 0 auto 1.5rem;
}

.wp-note-cta__titulo {
  font-size: 0.7rem;
  color: #fff;
  margin: 0 0 0.8rem;
}

.wp-note-cta__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 1.4rem;
}

.wp-note-cta .wp-auth-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .wp-note-mock__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .wp-note-mock__generate {
    width: 100%;
  }

  .wp-note-plan__badge {
    right: 0.9rem;
  }
}

/* ------------------------------------------------------------------ PPC (app ppc)
   Landing page for the pay-per-click system. Everything here is presentation for a
   product that has no engine yet — see system/apps/ppc/views/landing.php. */

.wp-ppc-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.wp-ppc-hero__texto {
  max-width: 62ch;
}

/* The loud one. Same shape as .wp-auth-submit, but it sits in a corner instead of
   filling a form, so it drops the full width and gains a glow. */
.wp-ppc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  flex-shrink: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  color: #0a0a0a;
  background: var(--wp-ciano);
  border: none;
  border-radius: 4px;
  padding: 1.1em 1.4em;
  box-shadow: 0 0 22px rgba(0, 246, 255, 0.35);
  transition: filter 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.wp-ppc-cta svg {
  font-size: 1.2rem;
}

.wp-ppc-cta:hover,
.wp-ppc-cta:focus-visible {
  filter: brightness(1.12);
  box-shadow: 0 0 34px rgba(0, 246, 255, 0.55);
  transform: translateY(-1px);
}

/* third line of a .wp-moeda-stat, under the big number */
.wp-ppc-stat__nota {
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
}

/* Two sides */

.wp-ppc-lados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.wp-ppc-lado {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1.5rem 1.35rem;
}

.wp-ppc-lado__icone {
  display: inline-flex;
  color: var(--wp-app-cor);
  margin-bottom: 0.9rem;
}

.wp-ppc-lado__icone svg {
  font-size: 1.6rem;
}

.wp-ppc-lado__titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 0.75rem;
}

.wp-ppc-lado__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* How it will work */

.wp-ppc-passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.wp-ppc-passo {
  border-left: 2px solid var(--wp-app-cor);
  padding: 0.25rem 0 0.25rem 1rem;
}

.wp-ppc-passo__icone {
  display: inline-flex;
  color: var(--wp-app-cor);
  margin-bottom: 0.6rem;
}

.wp-ppc-passo__icone svg {
  font-size: 1.3rem;
}

.wp-ppc-passo__titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 0.6rem;
}

.wp-ppc-passo__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* Notes under the two tables */

.wp-ppc-nota {
  max-width: 72ch;
  line-height: 1.6;
  margin: 0.9rem 0 0;
}

/* The disabled buy button under the pricing table */

.wp-ppc-compra {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.wp-ppc-compra__btn {
  width: auto;
  opacity: 0.45;
  cursor: not-allowed;
}

/* Both "Comprar anúncio" buttons jump here, so leave the heading some air instead
   of pinning it flush against the top of the viewport. */
#ppc-pacotes {
  scroll-margin-top: 1.5rem;
}

/* Rules */

.wp-ppc-regras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.wp-ppc-regras li {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

.wp-ppc-regras svg {
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--wp-app-cor);
}

.wp-ppc-honestidade {
  margin-top: 2.5rem;
}

@media (max-width: 720px) {
  .wp-ppc-hero {
    flex-direction: column;
    gap: 1.5rem;
  }

  .wp-ppc-cta {
    width: 100%;
  }
}

/* ------------------------------------------------------------ weeNetwork (app wee_network)
   Landing page for the referral system. No real link, no tracking, no commission math —
   see system/apps/wee_network/views/landing.php. */

/* Mock referral link box */

.wp-network-linkbox {
  position: relative;
  display: flex;
  gap: 0.75rem;
  max-width: 46ch;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  padding: 1.5rem 1.25rem 1.25rem;
  margin: 0 0 2.5rem;
}

.wp-network-linkbox__badge {
  position: absolute;
  top: -1px;
  right: -1px;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  color: var(--wp-app-cor);
  background: var(--wp-preto);
  border: 1px solid var(--wp-app-cor);
  padding: 0.5em 0.7em;
}

.wp-network-linkbox input[type="text"] {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.55);
}

.wp-network-linkbox__btn {
  width: auto;
  flex-shrink: 0;
  opacity: 0.45;
  cursor: not-allowed;
}

/* How it works */

.wp-network-passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}

.wp-network-passo {
  border-left: 2px solid var(--wp-app-cor);
  padding: 0.25rem 0 0.25rem 1rem;
}

.wp-network-passo__icone {
  display: inline-flex;
  color: var(--wp-app-cor);
  margin-bottom: 0.6rem;
}

.wp-network-passo__icone svg {
  font-size: 1.3rem;
}

.wp-network-passo__titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 0.6rem;
}

.wp-network-passo__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* Where the commission comes from — example participating apps */

.wp-network-fontes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.wp-network-fonte {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1.35rem 1.25rem;
}

.wp-network-fonte__badge {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
}

.wp-network-fonte__icone {
  display: inline-flex;
  color: var(--wp-app-cor);
  margin-bottom: 0.75rem;
}

.wp-network-fonte__icone svg {
  font-size: 1.4rem;
}

.wp-network-fonte__titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 0.6rem;
  padding-right: 4.5rem;
}

.wp-network-fonte__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

/* Two levels, not a pyramid */

.wp-network-niveis {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  flex-wrap: wrap;
}

.wp-network-nivel {
  flex: 1 1 200px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1.25rem;
  text-align: center;
}

.wp-network-nivel--voce {
  border-color: var(--wp-app-cor);
}

.wp-network-nivel__label {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: var(--wp-app-cor);
  margin-bottom: 0.6rem;
}

.wp-network-nivel__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.wp-network-nivel__seta {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  flex: 0 0 auto;
}

.wp-network-nivel__seta svg {
  font-size: 1.4rem;
}

.wp-network-amplitude {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  max-width: 72ch;
  margin: 1.5rem 0 0;
}

.wp-network-amplitude strong {
  color: var(--wp-ouro);
}

/* Rules */

.wp-network-regras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.wp-network-regras li {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

.wp-network-regras svg {
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--wp-app-cor);
}

.wp-network-honestidade {
  margin-top: 2.5rem;
}

@media (max-width: 720px) {
  .wp-network-linkbox {
    flex-direction: column;
  }

  .wp-network-linkbox__btn {
    width: 100%;
  }

  .wp-network-niveis {
    flex-direction: column;
  }

  .wp-network-nivel__seta {
    transform: rotate(90deg);
  }
}

@media (max-width: 480px) {
  .wp-network-fonte__titulo {
    padding-right: 0;
  }
}


/* ---------------------------------------------------------------------------
   weeXonix (app 23) — jogo à esquerda com d-pad embaixo do canvas, stats e
   rankings à direita. Empilha no mobile, com a coluna lateral indo pra baixo.
   Prefixo próprio (wp-xonix), independente do bloco Endless Run (wp-run) acima.
   --------------------------------------------------------------------------- */

.wp-xonix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 720px) {
  .wp-xonix {
    grid-template-columns: 1fr;
  }
}

.wp-xonix__jogo {
  position: relative;
  min-width: 0;
}

.wp-xonix__canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  background: #0a0a0d;
  touch-action: none;
}

.wp-xonix__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 0.4rem;
}

.wp-xonix__som {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  user-select: none;
}

.wp-xonix__som:hover {
  color: rgba(255, 255, 255, 0.75);
}

.wp-xonix__som input {
  accent-color: var(--wp-ciano);
  cursor: pointer;
}

.wp-xonix__placar {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.wp-xonix__placar-label {
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}

.wp-xonix__placar-valor {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.9rem;
  color: var(--wp-ciano);
}

.wp-xonix__overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.9rem;
  bottom: 3.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1rem;
  background: rgba(6, 6, 8, 0.78);
  border-radius: 3px;
  pointer-events: none;
  overflow-y: auto;
}

.wp-xonix__overlay[hidden] {
  display: none;
}

.wp-xonix__overlay-titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  line-height: 1.6;
  color: #fff;
  margin: 0;
}

.wp-xonix__overlay-nota {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--wp-ciano);
  margin: 0;
  min-height: 1.2em;
}

/* tempo por fase, uma linha por fase jogada nessa corrida — só aparece depois
   que o /finish responde, fica vazio (sem altura) antes disso */
.wp-xonix__overlay-fases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
  font-family: system-ui, sans-serif;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.5);
  max-width: 320px;
}

.wp-xonix__controles {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0.6rem 0 0;
}

/* d-pad: escondido por padrão em ponteiro fino (mouse) — só existe pra quem
   está no touch, onde swipe não dá a precisão de direção que o jogo cobra */
.wp-xonix__dpad {
  display: none;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 4px;
  margin: 0.75rem auto 0;
  width: fit-content;
}

@media (pointer: coarse) {
  .wp-xonix__dpad {
    display: grid;
  }
}

.wp-xonix__dpad-btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  touch-action: manipulation;
}

.wp-xonix__dpad-btn:active {
  background: rgba(0, 246, 255, 0.18);
  border-color: rgba(0, 246, 255, 0.45);
}

.wp-xonix__dpad-btn--up    { grid-column: 2; grid-row: 1; }
.wp-xonix__dpad-btn--left  { grid-column: 1; grid-row: 2; }
.wp-xonix__dpad-btn--right { grid-column: 3; grid-row: 2; }
.wp-xonix__dpad-btn--down  { grid-column: 2; grid-row: 3; }

.wp-xonix__login {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0.75rem 0 0;
}

.wp-xonix__login a {
  color: var(--wp-ouro);
  margin-left: 0.3em;
}

/* coluna lateral */

.wp-xonix__lado-titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  line-height: 1.6;
  color: var(--wp-ouro);
  margin: 0 0 0.25rem;
}

.wp-xonix__lado-titulo--rank {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wp-xonix__lado-nota {
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 0.75rem;
}

.wp-xonix__meu {
  margin: 0 0 0.75rem;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  display: grid;
  gap: 0.15rem;
}

.wp-xonix__meu strong {
  color: var(--wp-ciano);
  margin-left: 0.4em;
}

.wp-xonix__log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}

.wp-xonix__log-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3em 0.5em;
  border-left: 2px solid rgba(0, 246, 255, 0.3);
  background: rgba(255, 255, 255, 0.02);
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  flex-wrap: wrap;
}

.wp-xonix__log-quando {
  color: rgba(255, 255, 255, 0.5);
}

.wp-xonix__log-seg {
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.68rem;
}

.wp-xonix__log-nivel {
  color: rgba(255, 255, 255, 0.4);
}

.wp-xonix__log-pontos {
  margin-left: auto;
  color: var(--wp-ciano);
}

.wp-xonix__rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.wp-xonix__rank-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4em 0.5em;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
}

.wp-xonix__rank-item--eu {
  border-color: rgba(0, 246, 255, 0.45);
  background: rgba(0, 246, 255, 0.05);
}

.wp-xonix__rank-pos {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.35);
  min-width: 1.6em;
}

.wp-xonix__rank-nome {
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wp-xonix__rank-pontos {
  margin-left: auto;
  color: var(--wp-ciano);
}

.wp-xonix__rank-vazio {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.4);
}

/* recordes da comunidade */

.wp-xonix__destaques {
  display: grid;
  gap: 0.5rem;
}

.wp-xonix__destaque {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  margin: 0;
}

.wp-xonix__destaque span {
  color: rgba(255, 255, 255, 0.4);
}

.wp-xonix__destaque strong {
  color: var(--wp-ouro);
  font-size: 0.8rem;
}

.wp-xonix__destaque-vazio {
  color: rgba(255, 255, 255, 0.35) !important;
  font-weight: normal;
}

/* causa de morte, agregada — uma barrinha só (rastro), o resto é bola por dedução */

.wp-xonix__causas {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 0, 229, 0.35); /* bola, cor de fundo */
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.wp-xonix__causas-trilha {
  display: block;
  height: 100%;
  background: var(--wp-ciano);
}

/* Disposable Emails (app 31). Reuses the scanner's hero/panels/list/benefits/price
   skeleton (.wp-scanner-*) as-is — it's pure layout with nothing scanner-specific in
   it, and the file above already notes that scoping as debt to generalize later.
   Only the pieces with no equivalent get new classes below. */

.wp-mail-blocked {
  max-width: 46ch;
  margin: 0 auto 1.5rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1.2em 1.3em;
}

.wp-mail-blocked__title {
  font-family: system-ui, sans-serif;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.4em;
}

.wp-mail-blocked__body {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 1em;
}

.wp-mail-buydomain {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  margin: 0 0 1.2rem;
}

.wp-mail-buydomain:hover,
.wp-mail-buydomain:focus-visible {
  color: var(--wp-app-cor);
}

.wp-mail-countdown {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: var(--wp-app-cor);
  white-space: nowrap;
}

.wp-mail-address {
  font-family: 'Courier New', monospace;
  word-break: break-all;
}

.wp-mail-attachment-note {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
}

.wp-mail-body {
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}


/* ---------------------------------------------------------------------------
   Corrida na Terra (app earth_racing) — canvas WebGL em tela cheia, sem
   coluna lateral: não há placar nem ranking ainda, só o carro e a estrada.
   --------------------------------------------------------------------------- */

.wp-race {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 246, 255, 0.04), rgba(0, 0, 0, 0.3));
}

.wp-race__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.wp-race__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1rem;
  background: rgba(6, 6, 8, 0.72);
  pointer-events: none;
}

.wp-race__overlay[hidden] {
  display: none;
}

.wp-race__overlay-titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #fff;
  margin: 0;
}

.wp-race__overlay-nota {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--wp-app-cor);
  margin: 0;
  min-height: 1.2em;
}

.wp-race__controles {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0.6rem 0 0;
  text-align: center;
}


/* ---------------------------------------------------------------------------
   Checkout — /subscribe/{app id}, the one page that sells any app's paid plan.

   English BEM, following the .wp-scanner-* family rather than the older Portuguese
   blocks: this is new surface and that is where the file has been heading.

   Almost everything here is composition — .wp-moeda-grid does the detail stats,
   .wp-auth-aviso the low-balance warning, .wp-auth-submit the CTA. What is defined
   below is only what had no equivalent: the gold hero, the price, the arithmetic
   strip and the "you already own this" panel.

   Gold is value, cyan is action. That split is the whole site's convention and it
   holds here even though the page is about money from top to bottom: the confirm
   button stays cyan inside a gold page.
   --------------------------------------------------------------------------- */

.wp-checkout {
  max-width: 46rem;
  margin: 0 auto;
}

/* the arcade-cabinet bezel: gold gradient panel with L-shaped corner brackets, the
   same device .wp-coin-pilar uses to make a box feel like a machine */
.wp-checkout__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.1), rgba(0, 0, 0, 0.3));
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 6px;
  padding: 2rem 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}

.wp-checkout__hero::before,
.wp-checkout__hero::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--wp-ouro);
  opacity: 0.55;
}

.wp-checkout__hero::before {
  top: 6px;
  left: 6px;
  border-right: none;
  border-bottom: none;
}

.wp-checkout__hero::after {
  bottom: 6px;
  right: 6px;
  border-left: none;
  border-top: none;
}

.wp-checkout__app {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #fff;
  margin: 0;
}

.wp-checkout__plan {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: var(--wp-ouro);
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
  margin: 0;
}

.wp-checkout__subtitle {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  max-width: 48ch;
  margin: 0.3rem 0 0;
}

.wp-checkout__price {
  text-align: center;
  margin-bottom: 1.5rem;
}

.wp-checkout__price-valor {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 2rem;
  color: var(--wp-ouro);
  text-shadow: 0 0 22px rgba(212, 175, 55, 0.4);
  margin-bottom: 0.6rem;
}

.wp-checkout__price-nota {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* The arithmetic: balance − cost = what's left. Laid out as an equation on purpose,
   because that is the one question the visitor actually came here with. */
.wp-checkout__math {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 1.25rem 1rem;
  margin-bottom: 1.25rem;
}

.wp-checkout__math-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 7rem;
}

.wp-checkout__math-label {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.wp-checkout__math-valor {
  font-family: 'Courier New', monospace;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}

.wp-checkout__math-valor--ok {
  color: var(--wp-ouro);
}

.wp-checkout__math-op {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
}

.wp-checkout__form {
  max-width: 24rem;
  margin: 1.5rem auto 0;
}

.wp-checkout__fine {
  max-width: 52ch;
  margin: 0.9rem auto 0;
  text-align: center;
}

.wp-checkout__acoes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 24rem;
  margin: 0 auto 1rem;
}

.wp-checkout__acoes .wp-auth-submit,
.wp-checkout__acoes .wp-carteira-btn {
  width: 100%;
  justify-content: center;
}

/* the "back to the app" corner icon, replacing the old footer link — every checkout
   page has one and it belongs where the eye lands first, not at the bottom */
.wp-checkout__hero-voltar {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.wp-checkout__hero-voltar:hover,
.wp-checkout__hero-voltar:focus-visible {
  color: var(--wp-ouro);
  border-color: var(--wp-ouro);
  background: rgba(212, 175, 55, 0.1);
}

/* Already paid. The one panel on the site that is allowed to look expensive. */
.wp-checkout__active {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.16), rgba(0, 0, 0, 0.35));
  border: 1px solid var(--wp-ouro);
  border-radius: 6px;
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 28px -8px rgba(212, 175, 55, 0.5), inset 0 0 40px -30px var(--wp-ouro);
}

.wp-checkout__active-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--wp-ouro);
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.45);
}

.wp-checkout__active-selo svg {
  font-size: 1.1rem;
  animation: wp-brilho-ouro 3.5s ease-in-out infinite;
}

.wp-checkout__active-data {
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.wp-checkout__active-data strong {
  color: #fff;
}

.wp-checkout__active-dias {
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

@keyframes wp-brilho-ouro {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.5)); }
  50%      { filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.9)); }
}

/* an <a> wearing the submit button's clothes (the checkout CTA on premium.php) */
.wp-auth-submit {
  text-decoration: none;
}

/* The paying subscriber's mark, on the app frame's own bar — visible from every page
   of the app, not just the one that sold it. */
.wp-app-frame__btn--premium {
  color: var(--wp-ouro);
  border-color: rgba(212, 175, 55, 0.5);
  background: rgba(212, 175, 55, 0.1);
}

.wp-app-frame__btn--premium:hover,
.wp-app-frame__btn--premium:focus-visible {
  color: var(--wp-ouro);
  border-color: var(--wp-ouro);
  background: rgba(212, 175, 55, 0.18);
}

/* the scanner's home pill, once it is reassuring rather than selling */
.wp-scanner-premium--ativo {
  background: rgba(212, 175, 55, 0.14);
  border-color: var(--wp-ouro);
}

@media (prefers-reduced-motion: reduce) {
  .wp-checkout__active-selo svg {
    animation: none;
  }
}

/* --- weechat --- */

.wp-weechat {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 1.25rem;
  height: 70vh;
  min-height: 420px;
}

@media (max-width: 720px) {
  .wp-weechat {
    grid-template-columns: 1fr;
    height: 75vh;
  }

  /* WhatsApp-Web-style: only one pane at a time on narrow screens. Which one shows
     is decided server-side (conversation.php adds --mostrando-conversa), so no JS is
     needed just to pick the initial view — only the "back" link needs to navigate. */
  .wp-weechat__conversa {
    display: none;
  }

  .wp-weechat--mostrando-conversa .wp-weechat__lista {
    display: none;
  }

  .wp-weechat--mostrando-conversa .wp-weechat__conversa {
    display: flex;
  }

  .wp-weechat__voltar {
    display: inline-flex;
  }
}

.wp-weechat__lista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.02);
  overflow-x: hidden;
  overflow-y: auto;
}

.wp-weechat__lista-topo {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.6em 0.7em;
  border-bottom: 1px solid #303030;
  position: sticky;
  top: 0;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(4px);
}

.wp-weechat__icone-topo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.18s ease, color 0.18s ease;
}

.wp-weechat__icone-topo svg {
  width: 1.1rem;
  height: 1.1rem;
}

.wp-weechat__icone-topo:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.wp-weechat__lista-vazia {
  padding: 1.5rem 1.1em;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

.wp-weechat__contatos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wp-weechat__contatos li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.wp-weechat__contato {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.8em 1em;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.wp-weechat__contato:hover {
  background: rgba(255, 255, 255, 0.03);
  border-left-color: var(--wp-app-cor);
}

.wp-weechat__contato--ativo {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--wp-app-cor);
}

.wp-weechat__contato-nome {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wp-weechat__contato--nao-lida .wp-weechat__contato-nome {
  font-weight: bold;
}

.wp-weechat__contato--nao-lida .wp-weechat__contato-nome::before {
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--wp-ciano);
}

.wp-weechat__contato-preview {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wp-weechat__conversa {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.02);
}

.wp-weechat__conversa--vazia {
  align-items: center;
  justify-content: center;
}

.wp-weechat__voltar {
  display: none;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 0.9em;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-bottom: 1px solid #303030;
  flex-shrink: 0;
}

.wp-weechat__voltar svg {
  width: 1rem;
  height: 1rem;
}

.wp-weechat__conversa-cabecalho {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7em 1em;
  flex-shrink: 0;
}

.wp-weechat__conversa-titulo {
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  color: #fff;
}

.wp-weechat__conversa-atividade {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.wp-weechat__separador {
  margin: 0;
  border: none;
  border-top: 1px solid #303030;
  flex-shrink: 0;
}

.wp-weechat__mensagens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.wp-weechat__mensagens-vazio {
  margin: auto;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.wp-weechat__bolha {
  max-width: 72%;
  padding: 0.5em 0.75em;
  border-radius: 6px;
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1.4;
}

.wp-weechat__bolha--minha {
  align-self: flex-end;
  background: color-mix(in srgb, var(--wp-app-cor) 20%, rgba(255, 255, 255, 0.06));
  border: 1px solid color-mix(in srgb, var(--wp-app-cor) 35%, transparent);
}

.wp-weechat__bolha--dele {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wp-weechat__bolha-texto {
  margin: 0;
  color: #fff;
  word-break: break-word;
}

.wp-weechat__bolha-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

.wp-weechat__bolha-hora {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.45);
}

/* Delivered-but-not-read: dim double check. Read: the same icon in the app's accent
   color — toggled by weechat.js on every poll tick, comparing each of my own bubbles'
   timestamp against the other participant's read cursor. */
.wp-weechat__bolha-status {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.4);
}

.wp-weechat__bolha-status svg {
  width: 0.85rem;
  height: 0.85rem;
}

.wp-weechat__bolha--lida .wp-weechat__bolha-status {
  color: var(--wp-ciano);
}

.wp-weechat__erro {
  margin: 0;
  padding: 0.5em 1em 0;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: #ff6a6a;
  flex-shrink: 0;
}

.wp-weechat__composer {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 0.8em 1em;
  flex-shrink: 0;
}

.wp-weechat__composer-campo {
  flex: 1;
  resize: none;
  min-height: 2.6em;
  max-height: 8em;
  padding: 0.6em 0.8em;
  font-family: system-ui, sans-serif;
  font-size: 0.88rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}

.wp-weechat__composer-enviar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  height: 2.6em;
  flex-shrink: 0;
  color: var(--wp-app-cor);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  cursor: pointer;
}

.wp-weechat__composer-enviar:hover {
  background: color-mix(in srgb, var(--wp-app-cor) 14%, transparent);
}

.wp-weechat__composer-enviar svg {
  width: 1.1rem;
  height: 1.1rem;
}

.wp-weechat__vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 2rem;
  font-family: system-ui, sans-serif;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.wp-weechat__vazio-icone svg {
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0.6;
}

.wp-weechat__busca {
  padding: 1.25rem;
  overflow-y: auto;
}

.wp-weechat__busca-form {
  display: flex;
  gap: 0.6rem;
  margin: 0.75rem 0 1.25rem;
}

.wp-weechat__busca-form input {
  flex: 1;
  padding: 0.6em 0.8em;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}

.wp-weechat__busca-form button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0 1em;
  font-family: system-ui, sans-serif;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  cursor: pointer;
}

.wp-weechat__busca-vazio {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ICQ-style country browse — deliberately styled inert (dimmed, not-allowed cursor),
   since there is no logic behind it yet. See views/partials/browse_pane.php. */
.wp-weechat__paises {
  padding: 1.25rem;
}

.wp-weechat__paises-aviso {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

.wp-weechat__paises-form {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  opacity: 0.55;
}

.wp-weechat__paises-form select,
.wp-weechat__paises-form button {
  padding: 0.6em 0.8em;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: not-allowed;
}

.wp-weechat__paises-form select {
  flex: 1;
}

.wp-weechat__paises-form button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   weeGalaxyWar — shooter espacial mirado a mouse.

   Canvas de resolução fixa (960x600) esticado por CSS, igual o weeXonix: num
   jogo mirado a mouse, canvas elástico faria cada tela ver uma quantidade
   diferente de céu, o que é diferença de dificuldade, não de estética.

   Prefixo próprio (wp-galaxy), independente do wp-xonix e do wp-run. A cor de
   acento é o roxo do card, não o ciano do resto do site.
   --------------------------------------------------------------------------- */

.wp-galaxy {
  --wp-galaxy-cor: #B026FF;
}

.wp-galaxy__campo {
  position: relative;
  min-width: 0;
}

.wp-galaxy__canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  /* quase preto, não preto: o blending aditivo do jogo precisa de um piso pra
     somar em cima, e #000 puro faz as estrelas mais fracas sumirem */
  background: #05050a;
  touch-action: none;
  /* o cursor vira a mira — a nave já diz onde o mouse está */
  cursor: crosshair;
}

.wp-galaxy__barra {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.wp-galaxy__som {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  user-select: none;
}

.wp-galaxy__som:hover {
  color: rgba(255, 255, 255, 0.75);
}

.wp-galaxy__som input {
  accent-color: var(--wp-galaxy-cor);
  cursor: pointer;
}

/* empurrado pra direita, longe dos toggles */
.wp-galaxy__placar {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-left: auto;
}

.wp-galaxy__placar-label {
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}

.wp-galaxy__placar-valor {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.9rem;
  color: var(--wp-galaxy-cor);
}

.wp-galaxy__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1rem;
  background: rgba(5, 5, 10, 0.72);
  border-radius: 3px;
  /* cliques têm que atravessar até o canvas: o mesmo clique que reinicia é o
     que atira, e o overlay fica por cima da área toda */
  pointer-events: none;
}

.wp-galaxy__overlay[hidden] {
  display: none;
}

.wp-galaxy__overlay-titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  line-height: 1.6;
  color: #fff;
  margin: 0;
}

.wp-galaxy__overlay-nota {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--wp-galaxy-cor);
  margin: 0;
  min-height: 1.2em;
}

.wp-galaxy__controles {
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0.6rem 0 0;
}

/* V1 é só mouse. Num ponteiro grosso o campo inteiro sai e sobra o aviso —
   melhor dizer que precisa de mouse do que entregar um jogo injogável. */
.wp-galaxy__aviso-mouse {
  display: none;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  padding: 1.5rem 1rem;
  text-align: center;
  margin: 0;
}

@media (pointer: coarse) {
  .wp-galaxy__campo,
  .wp-galaxy__barra,
  .wp-galaxy__controles {
    display: none;
  }

  .wp-galaxy__aviso-mouse {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
   Profile editing (/u/edit). A long form, so the layout does the organising:
   a player card up top, then a tab strip with one panel each.

   Everything here is drawn but unwired (see system/views/edit.php). Inputs are
   disabled, which browsers grey out by default, so the rules below deliberately
   keep disabled controls looking normal: this is a mockup of a working screen,
   not a screen full of dead fields.
   --------------------------------------------------------------------------- */

.wp-edit-mock {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  margin-bottom: 2rem;
}

.wp-edit-mock__icone {
  display: flex;
  font-size: 1.4rem;
  color: var(--wp-ouro);
  flex-shrink: 0;
}

.wp-edit-mock__titulo {
  font-size: 0.7rem;
  color: var(--wp-ouro);
  margin: 0 0 0.5rem;
}

.wp-edit-mock__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  max-width: 72ch;
}

/* ----------------------------------------------------------- the player card */

.wp-edit-player {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.3));
  padding: 1.5rem;
  overflow: hidden;
}

.wp-edit-player__avatar {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.wp-edit-player__inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: 'Press Start 2P', monospace;
  font-size: 2rem;
  color: var(--wp-app-cor);
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid var(--wp-app-cor);
  border-radius: 4px;
  box-shadow: 0 0 20px -6px var(--wp-app-cor);
}

.wp-edit-player__camera {
  position: absolute;
  right: -8px;
  bottom: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 0.95rem;
  color: #0a0a0a;
  background: var(--wp-app-cor);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.wp-edit-player__id {
  flex: 1 1 200px;
  min-width: 0;
}

.wp-edit-player__handle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.95rem;
  color: #fff;
  word-break: break-all;
}

.wp-edit-player__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.6rem;
}

.wp-edit-player__num {
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--wp-ouro);
}

.wp-edit-player__selos {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}

.wp-edit-player__nivel {
  flex: 0 1 260px;
  min-width: 200px;
}

.wp-edit-player__nivel-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.wp-edit-player__lv {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: var(--wp-app-cor);
}

.wp-edit-player__patente {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0.4rem 0 0.6rem;
}

.wp-edit-player__xp {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.5rem;
}

.wp-edit-player__xp small {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
}

/* the XP / completion bar, same power-meter language as the signup strength bar */
.wp-edit-barra {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.wp-edit-barra__fill {
  display: block;
  height: 100%;
  background: var(--wp-app-cor);
  box-shadow: 0 0 10px -2px var(--wp-app-cor);
}

/* ------------------------------------------------------------ badges (pills) */

.wp-edit-badge {
  display: inline-flex;
  align-items: center;
  font-family: system-ui, sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 0.25em 0.5em;
  border: 1px solid;
  white-space: nowrap;
}

.wp-edit-badge--ok {
  color: var(--wp-l4);
  border-color: rgba(57, 255, 20, 0.4);
  background: rgba(57, 255, 20, 0.08);
}

.wp-edit-badge--warn {
  color: var(--wp-l5);
  border-color: rgba(255, 106, 0, 0.4);
  background: rgba(255, 106, 0, 0.08);
}

.wp-edit-badge--off {
  color: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.wp-edit-badge--ouro {
  color: var(--wp-ouro);
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.08);
}

/* ------------------------------------------------------------------- the tabs */

.wp-edit-tabs {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin: 2.5rem 0 0;
  padding-bottom: 1px;
  scrollbar-width: thin;
}

.wp-edit-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  flex-shrink: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.58rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  padding: 0.9em 1em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.wp-edit-tab svg {
  width: 1.15em;
  height: 1.15em;
}

.wp-edit-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.wp-edit-tab--on {
  color: var(--wp-app-cor);
  background: color-mix(in srgb, var(--wp-app-cor) 10%, transparent);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 -2px 0 var(--wp-app-cor);
}

.wp-edit-panel {
  padding-top: 2rem;
}

.wp-edit-panel[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ sections */

.wp-edit-secao + .wp-edit-secao {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wp-edit-secao__titulo {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.68rem;
  color: #fff;
  margin: 0 0 0.9rem;
}

.wp-edit-secao__titulo svg {
  color: var(--wp-app-cor);
  width: 1.2em;
  height: 1.2em;
}

.wp-edit-secao__nota {
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 1.3rem;
  max-width: 72ch;
}

.wp-edit-sublabel {
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
  margin: 1.6rem 0 0.7rem;
}

/* -------------------------------------------------------------------- fields */

.wp-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
}

.wp-edit-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wp-edit-field--full {
  grid-column: 1 / -1;
}

.wp-edit-field__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.4rem;
}

.wp-edit-field__hint {
  font-family: system-ui, sans-serif;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 0.4rem;
}

/* the prefix ("@", "+55", "https://") lives inside the box, so the box is what
   carries the border and the input inside it goes borderless */
.wp-edit-control {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.wp-edit-control__prefix {
  display: flex;
  align-items: center;
  font-family: system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 0.7em;
  white-space: nowrap;
}

.wp-edit-input {
  width: 100%;
  min-width: 0;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  color: #fff;
  background: transparent;
  border: none;
  padding: 0.7em 0.85em;
}

/* a disabled input here means "not built yet", not "forbidden", so it keeps the
   colours of a live field instead of the browser's grey */
.wp-edit-input:disabled {
  color: #fff;
  opacity: 1;
  -webkit-text-fill-color: #fff;
  cursor: default;
}

.wp-edit-input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.wp-edit-input--area {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  resize: vertical;
  line-height: 1.6;
}

select.wp-edit-input {
  appearance: none;
  cursor: default;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.4) 50%),
                    linear-gradient(135deg, rgba(255, 255, 255, 0.4) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

select.wp-edit-input option {
  background: #14141a;
  color: #fff;
}

/* --------------------------------------------------------------------- chips */

.wp-edit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wp-edit-chip {
  font-family: system-ui, sans-serif;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0.4em 0.9em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.wp-edit-chip:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.wp-edit-chip--on {
  color: #0a0a0a;
  font-weight: 600;
  background: var(--wp-app-cor);
  border-color: var(--wp-app-cor);
}

/* ------------------------------------------------------------------ switches */

.wp-edit-switches {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.wp-edit-switch {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.8rem 0.6rem;
  border-radius: 3px;
  cursor: pointer;
}

.wp-edit-switch:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* the real checkbox stays in the DOM for the label and the keyboard, but the
   track next to it is what gets drawn */
.wp-edit-switch input,
.wp-edit-master__toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.wp-edit-switch__track {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 22px;
  margin-top: 0.1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.wp-edit-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  transition: transform 0.15s ease, background 0.15s ease;
}

input:checked + .wp-edit-switch__track {
  background: color-mix(in srgb, var(--wp-app-cor) 28%, transparent);
  border-color: var(--wp-app-cor);
}

input:checked + .wp-edit-switch__track .wp-edit-switch__knob {
  transform: translateX(20px);
  background: var(--wp-app-cor);
  box-shadow: 0 0 8px -1px var(--wp-app-cor);
}

input:focus-visible + .wp-edit-switch__track {
  outline: 2px solid var(--wp-app-cor);
  outline-offset: 2px;
}

.wp-edit-switch__texto {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: system-ui, sans-serif;
}

.wp-edit-switch__texto strong {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.wp-edit-switch__texto small {
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.4);
}

/* ------------------------------------------------- visibility: master + rows */

.wp-edit-master {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  border: 1px solid rgba(0, 246, 255, 0.3);
  border-radius: 4px;
  background: rgba(0, 246, 255, 0.05);
  padding: 1.1rem;
  margin-bottom: 1.8rem;
}

.wp-edit-master__toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  cursor: pointer;
}

.wp-edit-master__texto {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: system-ui, sans-serif;
}

.wp-edit-master__texto strong {
  font-size: 0.9rem;
  color: #fff;
}

.wp-edit-master__texto small {
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

.wp-edit-master__acoes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wp-edit-master__contador {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.52rem;
  color: rgba(255, 255, 255, 0.45);
  margin-right: 0.3rem;
}

.wp-edit-minibtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  padding: 0.5em 0.8em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.wp-edit-minibtn svg {
  width: 1em;
  height: 1em;
}

.wp-edit-minibtn:hover {
  color: var(--wp-app-cor);
  border-color: var(--wp-app-cor);
}

.wp-edit-vis + .wp-edit-vis {
  margin-top: 1.6rem;
}

.wp-edit-vis__grupo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0.4rem;
}

.wp-edit-vis__linha {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.6rem;
  border-radius: 3px;
  cursor: pointer;
}

.wp-edit-vis__linha:hover {
  background: rgba(255, 255, 255, 0.03);
}

.wp-edit-vis__linha--travada {
  cursor: default;
  opacity: 0.75;
}

/* square arcade checkbox: the native one cannot be styled into this */
.wp-edit-check {
  appearance: none;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.wp-edit-check:checked {
  background: var(--wp-app-cor);
  border-color: var(--wp-app-cor);
}

.wp-edit-check:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #0a0a0a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.wp-edit-check:disabled {
  cursor: default;
}

.wp-edit-check:focus-visible {
  outline: 2px solid var(--wp-app-cor);
  outline-offset: 2px;
}

.wp-edit-vis__icone {
  display: flex;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

.wp-edit-vis__linha:has(.wp-edit-check:checked) .wp-edit-vis__icone {
  color: var(--wp-app-cor);
}

.wp-edit-vis__texto {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: system-ui, sans-serif;
  flex: 1;
  min-width: 0;
}

.wp-edit-vis__texto strong {
  font-size: 0.87rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.wp-edit-vis__texto small {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.38);
}

/* ------------------------------------------------------- layout: swatches etc */

.wp-edit-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.wp-edit-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.65);
  background: var(--wp-swatch);
  border: 2px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-edit-swatch:hover {
  transform: translateY(-2px);
}

.wp-edit-swatch--on {
  border-color: #fff;
  box-shadow: 0 0 14px -2px var(--wp-swatch);
}

.wp-edit-temas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.9rem;
}

.wp-edit-tema {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
  font-family: system-ui, sans-serif;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  padding: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.wp-edit-tema:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

.wp-edit-tema--on {
  border-color: var(--wp-app-cor);
  background: color-mix(in srgb, var(--wp-app-cor) 8%, transparent);
}

.wp-edit-tema strong {
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
}

.wp-edit-tema small {
  font-size: 0.74rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.4);
}

/* tiny wireframe of each layout, four bars arranged differently per variant */
.wp-edit-tema__preview {
  display: grid;
  gap: 3px;
  height: 54px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  padding: 5px;
  margin-bottom: 0.4rem;
}

.wp-edit-tema__preview i {
  background: color-mix(in srgb, var(--wp-app-cor) 45%, transparent);
  border-radius: 1px;
}

.wp-edit-tema__preview--classic {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.wp-edit-tema__preview--classic i:first-child {
  grid-column: 1 / -1;
}

.wp-edit-tema__preview--arcade {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.wp-edit-tema__preview--terminal {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
}

.wp-edit-tema__preview--card {
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 1fr;
}

.wp-edit-tema__preview--card i:first-child {
  grid-row: 1 / -1;
}

.wp-edit-slider {
  margin-top: 1.5rem;
  max-width: 340px;
}

.wp-edit-slider__linha {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

.wp-edit-slider__linha input[type="range"] {
  flex: 1;
  accent-color: var(--wp-app-cor);
}

.wp-edit-slider__valor {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: var(--wp-app-cor);
  min-width: 2.5em;
  text-align: right;
}

/* -------------------------------------------------------------- danger block */

.wp-edit-perigo {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 77, 106, 0.35);
  border-radius: 4px;
  background: rgba(255, 77, 106, 0.05);
  padding: 1.1rem;
  margin-top: 1.8rem;
}

.wp-edit-perigo__icone {
  display: flex;
  font-size: 1.5rem;
  color: #ff4d6a;
  flex-shrink: 0;
}

.wp-edit-perigo__texto {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: system-ui, sans-serif;
  flex: 1 1 240px;
}

.wp-edit-perigo__texto strong {
  font-size: 0.9rem;
  color: #ff8095;
}

.wp-edit-perigo__texto small {
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.45);
}

.wp-edit-perigo__btn {
  font-family: system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: #ff8095;
  background: transparent;
  border: 1px solid rgba(255, 77, 106, 0.5);
  border-radius: 3px;
  padding: 0.6em 1.2em;
  cursor: pointer;
}

/* ------------------------------------------------------------- action footer */

.wp-edit-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}

.wp-edit-acoes__btns {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.wp-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 0.75em 1.3em;
  cursor: pointer;
}

.wp-edit-btn--primario {
  color: #0a0a0a;
  background: var(--wp-app-cor);
  border-color: var(--wp-app-cor);
}

/* both buttons are disabled on purpose, so they read as "not yet" rather than
   "broken": dimmed a little, but still clearly the buttons they will be */
.wp-edit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .wp-edit-player {
    gap: 1rem;
  }

  .wp-edit-player__nivel {
    flex-basis: 100%;
  }

  .wp-edit-acoes__btns {
    width: 100%;
  }

  .wp-edit-btn {
    flex: 1;
    justify-content: center;
  }
}