/* ==========================================================================
   Recarga Free Fire — Design System
   Paletas (SITE_PALETTE no .env):
     brand  — recomendada: preto/branco + laranja só no acento
     mono   — preto/branco + teal (neutro total)
     orange — laranja forte em botões (mais “game”, menos clean)
   ========================================================================== */

:root,
html[data-palette="mono"],
html[data-palette="brand"] {
  color-scheme: light;

  /* Base neutra premium */
  --bg: #f6f7f9;
  --bg-pure: #ffffff;
  --ink: #0b0d12;
  --ink-2: #1c1f26;
  --muted: #3d4654;
  --faint: #525c6a;
  --line: #e6e8ec;
  --line-strong: #d0d5dd;
  /* mono: teal de confiança */
  --accent: #0f766e;
  --accent-hover: #0d9488;
  --accent-soft: #ecfdf8;
  --accent-line: #99f6e4;
  /* CTA preto = conversão limpa e séria */
  --cta: #0b0d12;
  --cta-hover: #1c1f26;
  --cta-fg: #ffffff;
  --ok: #059669;
  --ok-bg: #ecfdf5;
  --ok-fg: #065f46;
  --ok-line: #a7f3d0;
  --warn: #b45309;
  --warn-bg: #fffbeb;
  --warn-fg: #92400e;
  --warn-line: #fde68a;
  --err: #b91c1c;
  --err-bg: #fef2f2;
  --err-fg: #991b1b;
  --err-line: #fecaca;
  --surface-muted: #eef0f3;
  --hover-bg: rgba(11, 13, 18, 0.04);
  --nav-bg: rgba(246, 247, 249, 0.82);
  --nav-drawer-bg: rgba(246, 247, 249, 0.98);
  --sticky-bg: rgba(246, 247, 249, 0.94);
  --media-placeholder: linear-gradient(145deg, #ecfdf8, #f6f7f9);
  --band-bg: #0b0d12;
  --band-fg: #ffffff;
  --band-muted: rgba(255, 255, 255, 0.72);
  --band-btn-bg: #ffffff;
  --band-btn-fg: #0b0d12;
  --band-btn-hover: #f4f4f5;
  --band-line: rgba(255, 255, 255, 0.28);
  --band-line-hover: rgba(255, 255, 255, 0.45);
  --band-ghost-hover: rgba(255, 255, 255, 0.08);
  --pix-qr-bg: #ffffff;
  --theme-color: #f6f7f9;
  /* aliases usados em templates */
  --text: var(--ink);
  --text-2: var(--muted);

  /* Type scale */
  --font: "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --fs-display: clamp(2.4rem, 5vw, 3.75rem);
  --fs-h1: clamp(2rem, 4vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 2.5vw, 1.875rem);
  --fs-h3: 1.125rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;

  /* Space (4px base) */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --s9: 6.5rem;

  /* Layout */
  --container: 1120px;
  --nav-h: 72px;
  --r: 12px;
  --r-lg: 20px;
  --r-full: 999px;
  --shadow-xs: 0 1px 2px rgba(11, 13, 18, 0.04);
  --shadow-sm: 0 4px 16px rgba(11, 13, 18, 0.06);
  --shadow-md: 0 12px 40px rgba(11, 13, 18, 0.08);
  --focus: 0 0 0 3px rgba(15, 118, 110, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/*
  brand (recomendada para loja Free Fire + Pix):
  - Estrutura e tipografia pretas (confiança, “não parece golpe”)
  - Laranja só em acentos: links, focus, mark, detalhes
  - CTA principal continua preto (conversão clean)
*/
html[data-palette="brand"] {
  --accent: #e85d04;
  --accent-hover: #c2410c;
  --accent-soft: #fff7ed;
  --accent-line: #fed7aa;
  --cta: #0b0d12;
  --cta-hover: #1c1f26;
  --cta-fg: #ffffff;
  --hover-bg: rgba(232, 93, 4, 0.05);
  --media-placeholder: linear-gradient(145deg, #fff7ed, #f6f7f9);
  --band-bg: #0b0d12;
  --band-fg: #ffffff;
  --band-muted: rgba(255, 255, 255, 0.72);
  --band-btn-bg: #e85d04;
  --band-btn-fg: #ffffff;
  --band-btn-hover: #f48c06;
  --focus: 0 0 0 3px rgba(232, 93, 4, 0.35);
}

/* orange = laranja dominante (mais “game”, menos premium) */
html[data-palette="orange"] {
  --bg: #f7f5f2;
  --bg-pure: #ffffff;
  --ink: #0b0d12;
  --ink-2: #1a1a1a;
  --muted: #4a453f;
  --faint: #6b635a;
  --line: #ebe6e0;
  --line-strong: #d9d1c7;
  --accent: #e85d04;
  --accent-hover: #f48c06;
  --accent-soft: #fff4eb;
  --accent-line: #ffd4a8;
  --cta: #e85d04;
  --cta-hover: #d45103;
  --cta-fg: #ffffff;
  --hover-bg: rgba(232, 93, 4, 0.06);
  --nav-bg: rgba(247, 245, 242, 0.9);
  --nav-drawer-bg: rgba(247, 245, 242, 0.98);
  --sticky-bg: rgba(247, 245, 242, 0.95);
  --media-placeholder: linear-gradient(145deg, #fff4eb, #f7f5f2);
  --band-bg: #0b0d12;
  --band-fg: #ffffff;
  --band-muted: rgba(255, 255, 255, 0.72);
  --band-btn-bg: #e85d04;
  --band-btn-fg: #ffffff;
  --band-btn-hover: #f48c06;
  --band-line: rgba(255, 255, 255, 0.28);
  --band-line-hover: rgba(255, 255, 255, 0.45);
  --band-ghost-hover: rgba(255, 255, 255, 0.08);
  --theme-color: #f7f5f2;
  --focus: 0 0 0 3px rgba(232, 93, 4, 0.4);
  --shadow-xs: 0 1px 2px rgba(11, 13, 18, 0.05);
  --shadow-sm: 0 4px 16px rgba(232, 93, 4, 0.08);
  --shadow-md: 0 12px 40px rgba(11, 13, 18, 0.1);
}

/* —— Dark theme (base mono/teal) —— */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0c0e12;
  --bg-pure: #14171e;
  --ink: #f2f4f7;
  --ink-2: #e4e7ec;
  --muted: #c4cad4;
  --faint: #a8b0bc;
  --line: #2a2f3a;
  --line-strong: #3d4450;
  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-soft: #0f2a26;
  --accent-line: #1a4d45;
  --cta: #f2f4f7;
  --cta-hover: #ffffff;
  --cta-fg: #0b0d12;
  --ok: #34d399;
  --ok-bg: #052e1c;
  --ok-fg: #6ee7b7;
  --ok-line: #065f46;
  --warn: #fbbf24;
  --warn-bg: #2a1f05;
  --warn-fg: #fcd34d;
  --warn-line: #92400e;
  --err: #f87171;
  --err-bg: #2c0b0b;
  --err-fg: #fca5a5;
  --err-line: #7f1d1d;
  --surface-muted: #1a1e26;
  --hover-bg: rgba(255, 255, 255, 0.06);
  --nav-bg: rgba(12, 14, 18, 0.88);
  --nav-drawer-bg: rgba(12, 14, 18, 0.98);
  --sticky-bg: rgba(12, 14, 18, 0.94);
  --media-placeholder: linear-gradient(145deg, #0f2a26, #14171e);
  --band-bg: #f2f4f7;
  --band-fg: #0b0d12;
  --band-muted: rgba(11, 13, 18, 0.65);
  --band-btn-bg: #0b0d12;
  --band-btn-fg: #f2f4f7;
  --band-btn-hover: #1c1f26;
  --band-line: rgba(11, 13, 18, 0.22);
  --band-line-hover: rgba(11, 13, 18, 0.4);
  --band-ghost-hover: rgba(11, 13, 18, 0.06);
  --pix-qr-bg: #ffffff;
  --theme-color: #0c0e12;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 14px 42px rgba(0, 0, 0, 0.5);
  --focus: 0 0 0 3px rgba(45, 212, 191, 0.4);
}

/* Dark + brand: fundo escuro, CTA claro, acento laranja */
html[data-theme="dark"][data-palette="brand"] {
  --accent: #ff8c2a;
  --accent-hover: #ffb060;
  --accent-soft: #2a1608;
  --accent-line: #5c3010;
  --cta: #f2f4f7;
  --cta-hover: #ffffff;
  --cta-fg: #0b0d12;
  --hover-bg: rgba(255, 140, 42, 0.1);
  --media-placeholder: linear-gradient(145deg, #2a1608, #14171e);
  --band-bg: #1a120c;
  --band-fg: #ffffff;
  --band-btn-bg: #e85d04;
  --band-btn-fg: #ffffff;
  --band-btn-hover: #f48c06;
  --focus: 0 0 0 3px rgba(255, 140, 42, 0.4);
}

/* Dark + orange forte */
html[data-theme="dark"][data-palette="orange"] {
  --accent: #ff8c2a;
  --accent-hover: #ffb060;
  --accent-soft: #2a1608;
  --accent-line: #5c3010;
  --cta: #e85d04;
  --cta-hover: #f48c06;
  --cta-fg: #ffffff;
  --hover-bg: rgba(232, 93, 4, 0.12);
  --media-placeholder: linear-gradient(145deg, #2a1608, #14171e);
  --band-bg: #e85d04;
  --band-fg: #ffffff;
  --band-muted: rgba(255, 255, 255, 0.85);
  --band-btn-bg: #0b0d12;
  --band-btn-fg: #ffffff;
  --band-btn-hover: #1c1f26;
  --band-line: rgba(255, 255, 255, 0.35);
  --band-ghost-hover: rgba(255, 255, 255, 0.1);
  --focus: 0 0 0 3px rgba(255, 140, 42, 0.45);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

:focus { outline: none; }
:focus-visible { box-shadow: var(--focus); border-radius: 8px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--cta);
  color: var(--cta-fg);
  font-weight: 650;
}
.skip-link:focus { left: 0; }

.container {
  width: min(var(--container), calc(100% - 2rem));
  margin-inline: auto;
}
.main-wrap { padding-bottom: var(--s9); }

/* —— Buttons —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-weight: 650;
  font-size: var(--fs-small);
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.18s, border-color 0.18s, box-shadow 0.18s, color 0.18s;
  white-space: nowrap;
  user-select: none;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: scale(0.985); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--cta);
  color: var(--cta-fg);
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover:not(:disabled) {
  background: var(--cta-hover);
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  background: var(--bg-pure);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--bg-pure);
  filter: brightness(1.04);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--ink);
  background: var(--hover-bg);
}

.btn-ok { background: var(--ok); color: var(--cta-fg); }
.btn-block { width: 100%; }
.btn-lg { min-height: 56px; padding: 1rem 1.6rem; font-size: 1rem; }
.btn-sm { min-height: 40px; padding: 0.55rem 1rem; font-size: 0.875rem; }

/* —— Store chrome (Hype layout: topbar + header + cats) —— */
.store-chrome {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bg-pure);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.store-topbar {
  background: #0a0a0a;
  color: #a1a1aa;
  font-size: 0.72rem;
  min-height: 2rem;
  height: auto;
  padding: 0.35rem 0;
}
.store-topbar__inner {
  width: min(1120px, calc(100% - 1rem));
  margin: 0 auto;
  min-height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
}
.store-topbar__trust {
  display: flex;
  align-items: center;
  gap: 0.55rem 0.85rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.store-topbar__trust::-webkit-scrollbar { display: none; }
.store-topbar__trust a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #a1a1aa;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
}
.store-topbar__trust a:hover { color: #fff; }
.store-topbar__social {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  flex-shrink: 0;
}
.store-topbar__soc {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #a1a1aa;
  color: #0a0a0a;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  line-height: 0;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.store-topbar__soc svg {
  display: block;
  width: 0.82rem;
  height: 0.82rem;
  margin: auto;
  flex-shrink: 0;
}
/* Discord: glifo menor no viewBox — aumenta e centraliza */
.store-topbar__soc--discord svg,
.store-topbar__soc svg.icon-discord {
  width: 1.05rem;
  height: 1.05rem;
  transform: translateY(0.5px);
}
.store-topbar__soc:hover {
  background: #fff;
  color: #0a0a0a;
  transform: translateY(-1px);
}
.store-topbar__soc--instagram:hover {
  background: #e1306c;
  color: #fff;
}
.store-topbar__soc--tiktok:hover {
  background: #fff;
  color: #0a0a0a;
}
.store-topbar__soc--discord:hover {
  background: #5865f2;
  color: #fff;
}
.store-topbar__soc--muted { opacity: 0.75; }
.store-topbar__blog {
  display: inline-flex;
  align-items: center;
  margin-left: 0.1rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: #e5e7eb;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.store-topbar__blog:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
}
@media (min-width: 768px) {
  .store-topbar {
    font-size: 0.78rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
  }
  .store-topbar__trust {
    gap: 1rem;
    overflow: visible;
  }
  .store-topbar__trust a {
    font-size: inherit;
  }
  .store-topbar__social { margin-left: 0; }
  .store-topbar__blog {
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
  }
}

.store-header {
  background: var(--bg-pure);
}
/* Modo anúncio: header mínimo (sem busca/menu/conta), foco total na conversão */
.store-header--ad {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 80;
}
.store-header__row--ad {
  width: min(1120px, calc(100% - 1.25rem));
  margin: 0 auto;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
}
.store-header__ad-trust {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .store-header__ad-trust { display: none; }
}
.footer--ad {
  background: var(--bg-pure);
  border-top: 1px solid var(--line);
  padding: 1.1rem 0;
}
.footer--ad .footer-legal p {
  font-size: 0.78rem;
  color: var(--faint);
  text-align: center;
  line-height: 1.6;
}
.footer--ad .footer-legal a {
  color: var(--faint);
  text-decoration: underline;
}

.store-header__row {
  width: min(1120px, calc(100% - 1.25rem));
  margin: 0 auto;
  min-height: 4rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.55rem 0;
}
.store-header__brand {
  flex-shrink: 0;
  min-width: 0;
}
.store-header__brand .brand-text {
  display: none;
}
@media (min-width: 480px) {
  .store-header__brand .brand-text { display: inline; }
}

.store-search {
  width: 100%;
  max-width: 36rem;
  justify-self: center;
  position: relative;
  min-width: 0;
}
.store-search input {
  width: 100%;
  height: 2.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--ink);
  padding: 0 2.7rem 0 1rem;
  font-size: 0.9rem;
  font-family: inherit;
  margin: 0;
}
.store-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}
.store-search__btn {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: var(--cta);
  color: var(--cta-fg);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.store-header__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
/* Parte 20 — atalhos no header */
.store-header__quick {
  display: none;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  padding: 0.4rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.store-header__quick:hover,
.store-header__quick:focus-visible {
  color: var(--accent);
  border-color: var(--line);
  background: var(--accent-soft);
  outline: none;
}
@media (min-width: 900px) {
  .store-header__quick--desktop { display: inline-flex; }
}
.store-header__user {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border-radius: 10px;
  min-height: 2.5rem;
}
.store-header__user:hover {
  background: var(--hover-bg);
}
.store-header__user-txt {
  display: none;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.store-header__user-txt small {
  font-size: 0.68rem;
  color: var(--faint);
  font-weight: 500;
}
.store-header__user-txt strong {
  font-size: 0.8rem;
  font-weight: 750;
  white-space: nowrap;
}
.store-header__user--guest .store-header__user-txt strong {
  font-size: 0.78rem;
}
.store-header__user-ico { font-size: 1.15rem; line-height: 1; }
.store-header__admin { display: none; }
@media (min-width: 720px) {
  .store-header__user-txt { display: flex; }
  .store-header__admin { display: inline-flex; }
}
@media (max-width: 560px) {
  .store-header__row {
    grid-template-columns: auto 1fr auto;
  }
  .store-search {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    order: 3;
  }
  .store-header__row {
    display: flex;
    flex-wrap: wrap;
  }
  .store-header__brand { order: 1; }
  .store-header__actions { order: 2; margin-left: auto; }
  .store-search { order: 3; flex: 1 1 100%; }
}

/* Categoria strip — só desktop/tablet largo (mobile usa 1 menu: hamburger) */
.store-cats {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
@media (min-width: 900px) {
  .store-cats { display: block; }
}
.store-cats__inner {
  width: min(1120px, calc(100% - 1.25rem));
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.15rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 0.35rem 0;
}
.store-cats a {
  flex: 0 0 auto;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.store-cats a:hover {
  color: var(--ink);
  background: var(--hover-bg);
}

/* Home layout shell */
.main-wrap--home {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 3rem !important;
}
.main-wrap--home > .flash {
  width: min(1120px, calc(100% - 2rem));
  margin: 0.75rem auto;
}
.page-home .container,
.home-shelf.container,
.home-headline.container,
.page-home .section.container {
  width: min(1120px, calc(100% - 2rem));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Banner principal — padrão Hype (max 1536px, alturas responsivas, full bleed) */
/* ── Banner principal (réplica Hype) ── */
.page-home .main-wrap--home {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.75rem;
}
.home-embla {
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(0.75rem, 3vw, 1.5rem);
  box-sizing: border-box;
}
.home-embla__viewport-wrap {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.home-embla__viewport {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y pinch-zoom;
  border-radius: 12px;
  /* moldura fina estilo Hype */
  box-shadow:
    0 0 0 2px rgba(0, 230, 118, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.35);
  background: #0b1220;
}
.home-embla__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.home-embla__slide {
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
}
.home-embla__link {
  display: block;
  width: 100%;
  margin: 0 auto;
  line-height: 0;
}
/* Banner 1 — enquadramento 1600×320 (5:1); altura deriva da largura */
.home-embla__img {
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 320;
  object-fit: cover;
  object-position: center;
  display: block;
  color: transparent;
  background: #0b1220;
}

.home-embla__arrow {
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
}
.home-embla__arrow--prev { left: 0.5rem; }
.home-embla__arrow--next { right: 0.5rem; }
@media (min-width: 768px) {
  .home-embla__arrow--prev { left: -0.25rem; }
  .home-embla__arrow--next { right: -0.25rem; }
}
.home-embla__btn {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(12, 18, 24, 0.55);
  color: #f2f4f7;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
  transition: color 0.15s, background 0.15s, transform 0.15s;
}
.home-embla__btn:hover {
  color: #0b0d12;
  background: #00e676;
  transform: scale(1.06);
}
.home-embla__btn-svg {
  width: 1rem;
  height: 1rem;
  display: block;
}

/* Indicadores estilo Hype: bolinha inativa + pílula ativa com fill de progresso */
.home-embla__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
  min-height: 0.85rem;
  list-style: none;
  padding: 0;
}
.home-embla__dot {
  position: relative;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(0, 230, 118, 0.28);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
  vertical-align: middle;
}
.home-embla__dot:hover {
  background: rgba(0, 230, 118, 0.45);
}
.home-embla__dot.is-active {
  width: 1.85rem;
  height: 0.5rem;
  background: rgba(0, 230, 118, 0.22);
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.35);
}
.home-embla__dot-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #00e676;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.home-embla__dot.is-active .home-embla__dot-fill {
  transform: scaleX(1);
}
.home-embla__dot.is-active.is-playing .home-embla__dot-fill {
  animation: home-dot-progress 5.2s linear forwards;
}
.home-embla__dot.is-active.is-playing.is-paused .home-embla__dot-fill {
  animation-play-state: paused;
}
@keyframes home-dot-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .home-embla__dot.is-active.is-playing .home-embla__dot-fill {
    animation: none;
    transform: scaleX(1);
  }
}

/* ── Propagandas multi-card (Hype: 1 / 2 / 3 visíveis) ── */
.home-promo-rail {
  margin-top: 1.75rem;
  width: 100%;
  padding: 0 clamp(0.75rem, 3vw, 1.5rem);
  box-sizing: border-box;
}
.home-promo-rail__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 1280px) {
  .home-promo-rail__inner { max-width: 1120px; }
}
.home-promo-embla {
  width: 100%;
  margin: 0 auto;
}
.home-promo-embla__row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0;
}
.home-promo-embla__viewport {
  overflow: hidden;
  width: 100%;
  flex: 1;
  min-width: 0;
  touch-action: pan-y pinch-zoom;
  /* deixa “vazar” o card vizinho (peek Hype) */
  padding-right: 1.25rem;
}
@media (min-width: 640px) {
  .home-promo-embla__viewport { padding-right: 1.5rem; }
}
@media (min-width: 768px) {
  .home-promo-embla__viewport { padding-right: 2rem; }
}
.home-promo-embla__container {
  display: flex;
  touch-action: pan-y pinch-zoom;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.home-promo-embla__slide {
  flex: 0 0 88%;
  min-width: 0;
  margin-right: 0.85rem;
  box-sizing: border-box;
}
.home-promo-embla__container:has(.home-promo-embla__slide:only-child) .home-promo-embla__slide {
  flex-basis: 100%;
  margin-right: 0;
}
@media (min-width: 640px) {
  .home-promo-embla__slide { flex-basis: calc(50% - 0.5rem); margin-right: 1rem; }
  .home-promo-embla__container:has(.home-promo-embla__slide:only-child) .home-promo-embla__slide {
    flex-basis: 100%;
    margin-right: 0;
  }
}
@media (min-width: 900px) {
  .home-promo-embla__slide { flex-basis: calc(33.333% - 0.7rem); margin-right: 1rem; }
  .home-promo-embla__container:has(.home-promo-embla__slide:only-child) .home-promo-embla__slide {
    flex-basis: 100%;
    margin-right: 0;
  }
}
.home-promo-embla__link {
  display: block;
  line-height: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.home-promo-embla__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
}
/* Banner 2 — enquadramento 640×400 (8:5) */
.home-promo-embla__img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 640 / 400;
  object-fit: cover;
  object-position: center;
  background: #0b1220;
}
.home-promo-embla__arrow {
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-promo-embla__arrow--prev { left: 0.15rem; }
.home-promo-embla__arrow--next { right: 0.15rem; }
.home-promo-embla__arrow .home-embla__btn {
  width: 2rem;
  height: 2rem;
}
.home-promo-embla__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  min-height: 0.85rem;
}
/* Mesmo padrão Hype do hero: bolinha + pílula com progresso */
.home-promo-embla__dot {
  position: relative;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(0, 230, 118, 0.28);
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
  vertical-align: middle;
}
.home-promo-embla__dot:hover {
  background: rgba(0, 230, 118, 0.45);
}
.home-promo-embla__dot.is-active {
  width: 1.85rem;
  height: 0.5rem;
  background: rgba(0, 230, 118, 0.22);
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.35);
}
.home-promo-embla__dot-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #00e676;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.home-promo-embla__dot.is-active .home-promo-embla__dot-fill {
  transform: scaleX(1);
}
.home-promo-embla__dot.is-active.is-playing .home-promo-embla__dot-fill {
  animation: home-promo-dot-progress 5.5s linear forwards;
}
.home-promo-embla__dot.is-active.is-playing.is-paused .home-promo-embla__dot-fill {
  animation-play-state: paused;
}
@keyframes home-promo-dot-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .home-promo-embla__dot.is-active.is-playing .home-promo-embla__dot-fill {
    animation: none;
    transform: scaleX(1);
  }
}

/* Prateleiras por categoria (Hype) */
.home-cat {
  padding: 1.5rem 0 0.5rem;
}
.home-cat--hype {
  width: min(1120px, calc(100% - 2rem));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.home-cat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.home-cat__titles {
  min-width: 0;
  flex: 1;
}
.home-cat__title {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
}
.home-cat__sub {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.4;
  color: var(--muted);
  max-width: 40rem;
}
.home-cat__hl {
  color: var(--accent);
  font-weight: 800;
}
.home-cat__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.home-cat__more:hover {
  filter: brightness(1.08);
}
html[data-theme="dark"] .home-cat__more {
  color: #0b0d12;
}
.home-product-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .home-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 960px) {
  .home-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; }
}
.hprod {
  background: var(--bg-pure);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.hprod:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.hprod__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
  padding: 0.65rem 0.65rem 0.35rem;
  min-height: 0;
}
.hprod__media {
  position: relative;
  /* Anúncios 16:9 — não forçar quadrado (cortava a arte no meio) */
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-muted);
  display: grid;
  place-items: center;
  margin-bottom: 0.55rem;
}
.hprod__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.hprod__emoji { font-size: 2.5rem; }
.hprod__badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 1;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg-pure);
  font-size: 0.65rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.hprod__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.3;
  height: 2.6em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hprod__price-row {
  margin-top: auto;
  padding-top: 0.45rem;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.4rem;
}
.hprod__price {
  margin: 0;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink);
}
.hprod__old {
  margin: 0;
  font-size: 0.75rem;
  color: var(--faint);
  text-decoration: line-through;
}
.hprod__buy {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.35rem 0.65rem 0.65rem;
  min-height: 2.5rem;
  border-radius: 8px;
  background: #00e676;
  color: #0b0d12;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}
.hprod__buy:hover {
  filter: brightness(1.06);
  background: #00e676;
  color: #0b0d12;
}

.page-home .section.container {
  width: min(1120px, calc(100% - 2rem));
  margin-left: auto;
  margin-right: auto;
}
.page-home .cta-band {
  margin-top: 1rem;
}

/* —— Nav (legado / páginas que ainda usem .nav) —— */
.nav {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: var(--nav-h);
  height: auto;
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
/* Store chrome já é sticky — não empilhar .nav antigo */
body.store-shell > .nav:not(.store-header) {
  display: none;
}
.nav-inner {
  min-height: var(--nav-h);
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: 0.35rem 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  z-index: 2;
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--bg-pure);
  background: var(--ink);
  letter-spacing: -0.06em;
  line-height: 1;
}
/* brand: mark com monograma FF */
html[data-palette="brand"] .brand-mark {
  background: #e85d04;
  color: #ffffff;
}
html[data-theme="dark"][data-palette="brand"] .brand-mark {
  background: #e85d04;
  color: #ffffff;
}
/* orange forte: mark também laranja */
html[data-palette="orange"] .brand-mark {
  background: var(--cta);
  color: #ffffff;
}
html[data-theme="dark"][data-palette="orange"] .brand-mark {
  background: var(--cta);
  color: #ffffff;
}
.nav-links {
  display: none;
  align-items: center;
  gap: 0.15rem;
}
.nav-links a:not(.btn) {
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 550;
  transition: color 0.15s, background 0.15s;
}
.nav-links a:not(.btn):hover {
  color: var(--ink);
  background: var(--hover-bg);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* Reserva espaço: evita CLS quando botões/tema/menu montam */
  min-height: 44px;
  flex-shrink: 0;
}
.nav-actions .btn-sm {
  min-width: 4.5rem;
}
.nav-actions .theme-toggle {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.nav-toggle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg-pure);
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-drawer {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 70;
  background: var(--nav-drawer-bg);
  backdrop-filter: blur(20px);
  padding: 0.5rem 1.25rem 2rem;
  overflow-y: auto;
  transform: translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
body.nav-open .nav-drawer {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav-drawer[hidden] { display: none !important; }
body.nav-open .nav-drawer[hidden] { display: block !important; }
.nav-drawer a {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: 550;
  font-size: 1.05rem;
}
/* .nav-drawer a { color } vencia .btn-primary e sumia o texto no tema escuro */
.nav-drawer a.btn {
  display: inline-flex;
  justify-content: center;
  min-height: 48px;
  margin-top: 1rem;
  width: 100%;
  border-bottom: none;
  font-weight: 650;
  font-size: var(--fs-small);
}
.nav-drawer a.btn-primary {
  background: var(--accent);
  color: #0b0d12;
  border-color: transparent;
  box-shadow: var(--shadow-xs);
}
.nav-drawer a.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  color: #0b0d12;
  filter: brightness(1.05);
}
.nav-drawer a.btn-secondary {
  background: var(--bg-pure);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-xs);
}
.nav-drawer a.btn-secondary:hover:not(:disabled) {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg-pure);
}
.nav-drawer__label {
  margin: 1rem 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.nav-drawer__label:first-child { margin-top: 0.35rem; }
.nav-drawer .btn { margin-top: 1rem; width: 100%; }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none !important; }
  .nav-drawer { display: none !important; }
  body.nav-open .nav-drawer { display: none !important; }
}

/* Mobile: um único menu (hamburger + drawer) */
@media (max-width: 899px) {
  .store-cats { display: none !important; }
  .nav-toggle { display: inline-flex; }
}

/* —— Breadcrumbs —— */
.bc { margin: var(--s5) 0 0; }
.bc__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: var(--fs-caption);
}
.bc__item { display: inline-flex; align-items: center; color: var(--faint); }
.bc__link {
  max-width: min(42ch, 70vw);
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bc__link:hover { color: var(--ink); background: rgba(11,13,18,0.04); }
.bc__current {
  max-width: min(48ch, 80vw);
  padding: 0.2rem 0.35rem;
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bc__sep {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  margin: 0 0.1rem;
  color: var(--faint);
  opacity: 0.8;
}

/* —— Flash —— */
.flash {
  margin-top: var(--s5);
  padding: 0.9rem 1.1rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg-pure);
  font-size: var(--fs-small);
  box-shadow: var(--shadow-xs);
}
.flash.success { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-fg); }
.flash.error { border-color: var(--err-line); background: var(--err-bg); color: var(--err-fg); }
.flash.warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-fg); }

/* —— Hero —— */
.hero {
  padding: clamp(2.75rem, 7vw, 5.5rem) 0 var(--s7);
  display: grid;
  gap: var(--s7);
  align-items: center;
  /* Evita salto de layout no LCP (hero-lead / título) */
  min-height: min(70vh, 34rem);
}
/* Home: hero fica empilhado ACIMA do carrossel (não é o único destaque da
   página) — sem o piso de 70vh, senão sobra vão vazio antes do carrossel
   em telas curtas/mobile. */
.home-hero {
  min-height: auto;
  padding-bottom: clamp(1.5rem, 4vw, 2.25rem);
}
/* .hero h1 nasceu para um título curto (max-width:12ch); o título real da
   home é uma frase inteira — mais larga, fonte um pouco menor, senão vira
   uma torre de 5-6 linhas gigantes. */
.home-hero h1 {
  max-width: 22ch;
  font-size: clamp(1.85rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.08;
}
@media (min-width: 960px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
}
.hero-lead {
  max-width: 38ch;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.6vw, 1.12rem);
  line-height: 1.55;
  margin: 0 0 var(--s5);
  font-weight: 500;
}
/* Caixa com destaque de palavras-chave — mesma ideia do card com termos
   coloridos no meio do texto (referência: gamemarket), mas com o accent
   único do HUD Tático, não um gradiente multi-cor. */
.hero-lead--boxed {
  border: 1px solid var(--line);
  background: var(--bg-pure);
  border-radius: 16px;
  padding: 0.95rem 1.15rem;
  box-shadow: var(--shadow-xs);
}
.hero-lead__hl {
  color: var(--accent);
  font-weight: 700;
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 650;
  margin-bottom: var(--s4);
}
.hero-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  max-width: 12ch;
  margin-bottom: var(--s4);
  color: var(--ink);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: var(--s5);
}
.hero-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
@media (min-width: 520px) {
  .hero-trust-list { grid-template-columns: 1fr 1fr; max-width: 32rem; }
}
.hero-trust-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: 500;
}
.hero-trust-list a {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--ink-2);
}
.trust-ico {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--ok);
  background: var(--ok-bg);
  border: 1px solid #a7f3d0;
  flex-shrink: 0;
}

.hero-panel {
  background: var(--bg-pure);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-md);
}
.hero-panel-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.4rem;
}
.hero-panel-title {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  letter-spacing: -0.025em;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.steps li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0.85rem;
  align-items: start;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.steps strong { color: var(--ink); font-weight: 650; }
.step-num {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 750;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
}
.hero-panel-note {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 550;
}

/* —— Sections —— */
.section { padding: var(--s8) 0 0; }
.section--tight-top { padding-top: var(--s5); }
.section-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
.section-head h2 { font-size: var(--fs-h2); }
.section-head p {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: var(--fs-small);
  max-width: 40ch;
}
.section-head--center {
  justify-content: center;
  text-align: center;
}
.section-head--center > div { max-width: 34rem; margin-inline: auto; }
.section-head--center p { margin-inline: auto; }
.section-link {
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: 650;
  white-space: nowrap;
}
.section-link:hover { color: var(--accent-hover); }
.page-title { font-size: var(--fs-h1); letter-spacing: -0.035em; }
/* Título de subpágina (conta, carteira, suporte, contato, afiliados) — menor que .page-title */
.page-title-sm { font-size: clamp(1.45rem, 2.5vw, 1.75rem); }

/* —— Bento —— */
.bento {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
}
.bento-card {
  padding: 1.5rem 1.35rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-pure);
  box-shadow: var(--shadow-xs);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s;
}
.bento-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong);
}
.bento-ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.bento-card h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.4rem;
}
.bento-card p {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* How */
.how-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .how-grid { grid-template-columns: repeat(4, 1fr); }
  .how-grid--5 { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 720px) and (max-width: 1100px) {
  .how-grid--5 { grid-template-columns: repeat(3, 1fr); }
}
.how-card {
  padding: 1.4rem 1.25rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-pure);
  box-shadow: var(--shadow-xs);
}
.how-card h3 {
  font-size: 1rem;
  margin-bottom: 0.45rem;
}
.how-card p {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* —— Cards —— */
.grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
.grid--blog { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .grid--blog { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--bg-pure);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.15rem;
  box-shadow: var(--shadow-xs);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
.card-link {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  color: inherit;
}
.card-title {
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.card .desc {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.5;
  flex: 1;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}
.card-benefits li {
  color: var(--muted);
  font-size: 0.8rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.card-benefits li::before {
  content: "✓";
  color: var(--ok);
  font-weight: 700;
  font-size: 0.72rem;
}
.card--soft { box-shadow: none; }
.card-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-media picture {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.card-media--placeholder {
  background: var(--media-placeholder);
}
.card-placeholder-emoji {
  font-size: 1.75rem;
  opacity: 0.7;
  color: var(--accent);
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.price {
  font-size: 1.4rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.price-old {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 0.9rem;
  font-weight: 550;
}
.price-save {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ok-fg);
  background: var(--ok-bg);
  border: 1px solid var(--ok-line);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.badge {
  display: inline-flex;
  width: fit-content;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

.product-media {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  margin: 0.75rem 0 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-media picture {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* CMS tiles no dashboard */
.admin-cms-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 720px) {
  .admin-cms-grid { grid-template-columns: repeat(3, 1fr); }
}
.admin-cms-tile {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-pure);
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s;
}
.admin-cms-tile:hover {
  border-color: var(--ink);
  background: var(--hover-bg);
  color: var(--ink);
}

/* Admin produtos */
.admin-products__head { align-items: flex-start; }
.admin-create { margin-bottom: 1rem; }
.admin-create__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.15rem 0;
}
.admin-create__summary::-webkit-details-marker { display: none; }
.admin-create[open] .admin-create__summary { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
.admin-product-form__grid {
  display: grid;
  gap: 0.85rem 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .admin-product-form__grid { grid-template-columns: 1fr 1fr; }
}
.admin-product-form__full { grid-column: 1 / -1; }
.admin-product-form__publish { display: flex; align-items: flex-end; }
.admin-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
  min-height: 2.75rem; /* alinha com inputs de 48px no grid */
  user-select: none;
}
.admin-switch input[type="checkbox"],
.admin-switch input[type="radio"] {
  -webkit-appearance: checkbox;
  appearance: auto;
  width: 1.05rem;
  height: 1.05rem;
  min-width: 1.05rem;
  min-height: 1.05rem;
  max-width: 1.05rem;
  max-height: 1.05rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
  accent-color: var(--accent, #0f766e);
  cursor: pointer;
}
.form-group--check {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 0;
}
.form-group--check .admin-switch {
  min-height: 48px;
  padding: 0 0.15rem;
}
.adm-crm-filter__row {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 720px) {
  .adm-crm-filter__row {
    grid-template-columns: 1.4fr 0.9fr auto auto;
  }
}
/* Barra de filtro genérica (nº de campos varia por módulo — auditoria tem
   5, CRM tem 2 — em vez de fixar colunas, encolhe/agrupa sozinha). */
.adm-filter-row {
  display: grid;
  gap: 0.75rem 1rem;
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 720px) {
  .adm-filter-row { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)) auto; }
}
.adm-crm-filter__check-label,
.adm-crm-filter__spacer {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: transparent;
  line-height: 1.2;
  user-select: none;
}
.adm-crm-filter__check .admin-switch {
  white-space: nowrap;
}
.admin-product-form__actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.admin-product-form__actions--split { justify-content: flex-start; }
.admin-prod-filters { margin: 1rem 0 0.75rem; flex-wrap: wrap; }

/* Lista compacta + drag */
.admin-list-hint {
  margin: 0 0 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.admin-row__handle-hint {
  display: inline-flex;
  width: 1.4rem;
  justify-content: center;
  opacity: 0.7;
  font-size: 0.85rem;
}
.admin-compact-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-width: 920px;
}
.admin-row {
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s, opacity 0.15s;
}
.admin-row--off { opacity: 0.82; border-style: dashed; }
.admin-row.is-dragging {
  opacity: 0.55;
  box-shadow: var(--shadow-md);
}
.admin-row.is-drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-line);
}
.admin-row__summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  user-select: none;
  min-height: 3.25rem;
}
.admin-row__summary::-webkit-details-marker { display: none; }
.admin-row[open] .admin-row__summary {
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}
.admin-row__handle {
  flex-shrink: 0;
  width: 1.5rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--faint);
  cursor: grab;
  font-size: 0.95rem;
  letter-spacing: -0.05em;
  touch-action: none;
}
.admin-row__handle:hover {
  background: var(--hover-bg);
  color: var(--ink);
}
.admin-row__handle:active { cursor: grabbing; }
.admin-row__handle--locked {
  cursor: default;
  opacity: 0.35;
}
.admin-row__media {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.admin-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-row__media--emoji,
.admin-row__emoji {
  font-size: 1.25rem;
  line-height: 1;
}
.admin-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.admin-row__title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-row__sub {
  font-size: var(--fs-caption);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-row__sub code {
  font-size: 0.78em;
}
.admin-row__badges {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
.admin-row__chev {
  flex-shrink: 0;
  color: var(--faint);
  font-size: 0.75rem;
  transition: transform 0.15s;
}
.admin-row[open] .admin-row__chev {
  transform: rotate(180deg);
}
.admin-row__body {
  padding: 0.85rem 0.85rem 1rem;
}
@media (max-width: 560px) {
  .admin-row__sub { display: none; }
  .admin-row__badges .badge { display: none; }
}

/* Grupos home CMS */
.admin-home-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-group {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.admin-group__summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  font-weight: 700;
}
.admin-group__summary::-webkit-details-marker { display: none; }
.admin-group[open] .admin-group__summary {
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}
.admin-group__title { flex: 1; }
.admin-group__count { font-weight: 500; }
.admin-group__body {
  padding: 0.9rem 1rem 1.1rem;
}
.admin-group[open] .admin-row__chev {
  transform: rotate(180deg);
}

/* Toast ordem salva */
.admin-cms-toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 9999;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg-pure);
  font-size: var(--fs-small);
  font-weight: 650;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s, opacity 0.2s;
}
.admin-cms-toast.is-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.admin-cms-toast.is-error {
  background: var(--err);
  color: #fff;
}

/* cards legados (outras páginas) */
.admin-prod-list {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .admin-prod-list { grid-template-columns: 1fr 1fr; }
}
.admin-prod-card { padding: 1rem 1.1rem 0.85rem; }
.admin-prod-card--off { opacity: 0.88; border-style: dashed; }

/* ─── Menus (design comprimido, 1 linha por item) ─── */
.menu-group { margin-bottom: 1.35rem; }
.menu-group__head { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.5rem; }
.menu-group__head h2 { font-size: 0.95rem; margin: 0; }
.menu-group__count { font-size: 0.78rem; color: var(--muted); }
.menu-compact { display: flex; flex-direction: column; gap: 0.35rem; }
.menu-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2, transparent);
}
.menu-row--off { opacity: 0.62; border-style: dashed; }
.menu-row input, .menu-row select {
  padding: 0.35rem 0.5rem; font-size: 0.85rem; height: auto; min-height: 0;
}
.menu-row__loc { flex: 0 0 auto; width: 9.5rem; }
.menu-row__order { flex: 0 0 auto; width: 3.4rem; }
.menu-row__label { flex: 1 1 10rem; min-width: 8rem; }
.menu-row__href { flex: 1.4 1 12rem; min-width: 9rem; font-family: var(--mono, monospace); font-size: 0.82rem; }
.menu-row__switch { flex: 0 0 auto; margin: 0; gap: 0.3rem; }
.menu-row__actions { display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; margin-left: auto; }
@media (max-width: 720px) {
  .menu-row { gap: 0.4rem; }
  .menu-row__loc { width: 100%; order: -1; }
  .menu-row__label, .menu-row__href { flex: 1 1 100%; }
}

/* ─── Estoque de contas (game-market style) ─── */
.admin-stock-stats { display: flex; gap: 1.25rem; margin: 0.75rem 0 1.1rem; flex-wrap: wrap; }
.admin-stock-stat { display: flex; align-items: center; gap: 0.5rem; }
.admin-stock-search {
  display: flex; gap: 0.5rem; align-items: center; margin: 0.75rem 0;
}
.admin-stock-search input[type="search"] {
  flex: 1 1 16rem; max-width: 24rem; padding: 0.4rem 0.6rem; font-size: 0.85rem;
}
.admin-prod-card__top {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1rem;
  align-items: flex-start;
}
.admin-prod-card__media {
  width: 88px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.admin-prod-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-prod-card__emoji { font-size: 1.5rem; }
.admin-prod-card__meta { min-width: 0; flex: 1; }
.admin-prod-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.35rem;
}
.admin-prod-card__name {
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.25;
  word-break: break-word;
}
.admin-prod-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.admin-seo-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  font-size: var(--fs-small);
}
.admin-img-preview {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.admin-img-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: var(--s5);
}
.tab {
  min-height: 40px;
  padding: 0.5rem 1rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 550;
  background: var(--bg-pure);
  transition: all 0.15s var(--ease);
}
.tab:hover { color: var(--ink); border-color: var(--line-strong); }
.tab.active {
  color: var(--cta-fg);
  background: var(--cta);
  border-color: var(--cta);
}

/* Trust / guarantee */
.guarantee {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .guarantee { grid-template-columns: repeat(2, 1fr); }
}
.guarantee article {
  padding: 1.4rem 1.3rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-pure);
  box-shadow: var(--shadow-xs);
}
.guarantee h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.guarantee p {
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.guarantee a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Panel / forms */
.panel {
  background: var(--bg-pure);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem;
  box-shadow: var(--shadow-xs);
}
.two-col {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1.05fr 0.95fr; }
}
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: 600;
}
/* Não aplicar em checkbox/radio — senão ficam gigantes (width 100% + min-height 48px) */
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.form-group textarea,
.form-group select {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg-pure);
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group textarea { min-height: 100px; resize: vertical; }
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
  outline: none;
}
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  min-width: 1.05rem;
  min-height: 0;
  max-width: 1.05rem;
  max-height: 1.05rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex-shrink: 0;
  accent-color: var(--accent, #0f766e);
  cursor: pointer;
}
.hint {
  margin-top: 0.4rem;
  color: var(--faint);
  font-size: var(--fs-caption);
  line-height: 1.45;
}
.hint a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.player-preview {
  display: none;
  margin-top: 0.55rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-size: var(--fs-small);
}
.player-preview.show { display: block; }
.player-preview.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-fg); }
.player-preview.err { background: var(--err-bg); border-color: var(--err-line); color: var(--err-fg); }
.player-preview.load { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

.feature-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.feature-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.55rem;
  color: var(--muted);
  font-size: var(--fs-small);
}
.feature-list li::before {
  content: "✓";
  color: var(--ok);
  font-weight: 700;
}

/* FAQ */
.faq-list { display: grid; gap: 0.6rem; max-width: 720px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-pure);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 1.15rem;
  font-weight: 650;
  font-size: var(--fs-small);
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--faint);
  font-weight: 400;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  margin: 0;
  padding: 0 1.15rem 1.1rem;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.6;
}

/* CTA — mesma paleta de “Grandes Parceiros” (#061016 + teal) */
.cta-band-wrap {
  margin-top: var(--s8);
  padding: var(--s7) 0;
  background: #061016;
  color: #e2e8f0;
  border-top: 1px solid rgba(45, 212, 191, 0.25);
}
.cta-band {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: 16px;
  border: 1px solid rgba(45, 212, 191, 0.55);
  background: rgba(0, 0, 0, 0.25);
  color: #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  box-shadow: none;
}
.cta-band h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  margin: 0 0 0.4rem;
  color: #fff;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.cta-band p {
  color: rgba(226, 232, 240, 0.72);
  max-width: 36ch;
  font-size: var(--fs-small);
  margin: 0;
}
.cta-band .btn-primary {
  background: #00e676;
  color: #0b0d12;
  border-color: transparent;
}
.cta-band .btn-primary:hover:not(:disabled) {
  background: #34f08e;
  filter: none;
}
.cta-band .btn-secondary {
  background: transparent;
  color: #e2e8f0;
  border-color: rgba(45, 212, 191, 0.55);
}
.cta-band .btn-secondary:hover:not(:disabled) {
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.85);
  color: #fff;
}

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.panel--warn { border-color: var(--warn-line, #c90); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
th, td {
  text-align: left;
  padding: 0.8rem 0.55rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
th {
  color: var(--faint);
  font-weight: 650;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Coluna de ações (Ver / Ajuda / botões admin) — largura estável, sem “pulo” de linha
   NÃO usar display:flex no <td> (quebra table-layout). */
td.account-actions,
td.table-actions {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
  text-align: right;
}
/* Botões/forms lado a lado, mesma altura visual */
td.account-actions > .btn,
td.account-actions > form,
td.account-actions > a,
td.table-actions > .btn,
td.table-actions > form,
td.table-actions > a {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0.1rem 0 0.1rem 0.3rem;
}
td.account-actions > form,
td.table-actions > form {
  margin-left: 0.3rem;
}
td.account-actions > :first-child,
td.table-actions > :first-child {
  margin-left: 0;
}
/* Cards / containers (não são td) podem usar flex */
.account-order-card__actions,
.table-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
@media (max-width: 720px) {
  td.account-actions,
  td.table-actions {
    white-space: normal;
    text-align: left;
  }
}
.status {
  display: inline-flex;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
.status.paid, .status.delivered, .status.resolved { background: var(--ok-bg); color: var(--ok-fg); }
.status.pending, .status.processing, .status.awaiting_manual, .status.scheduled,
.status.open, .status.pending_admin, .status.pending_customer {
  background: var(--warn-bg); color: var(--warn-fg);
}
.status.failed, .status.refunded, .status.closed, .status.cancelled {
  background: var(--err-bg); color: var(--err-fg);
}

/* —— Account / support —— */
.account-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}
@media (min-width: 720px) {
  .account-stats { grid-template-columns: repeat(4, 1fr); }
}
.account-stat {
  background: var(--bg-pure);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.9rem 1rem;
  box-shadow: var(--shadow-xs);
}
.account-stat__label {
  display: block;
  font-size: var(--fs-caption);
  color: var(--faint);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.account-stat__value {
  font-size: 1.45rem;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.account-grid {
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 1000px) {
  .account-grid { grid-template-columns: 1.45fr 1fr; align-items: start; }
}
.account-table {
  table-layout: fixed;
  width: 100%;
}
.account-table th:nth-child(1),
.account-table td:nth-child(1) { width: 22%; }
.account-table th:nth-child(2),
.account-table td:nth-child(2) { width: 24%; }
.account-table th:nth-child(3),
.account-table td:nth-child(3) { width: 26%; }
.account-table th:nth-child(4),
.account-table td:nth-child(4) { width: 12%; }
.account-table th:nth-child(5),
.account-table td:nth-child(5) { width: 16%; }
.account-table td {
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.account-table td.account-actions {
  overflow-wrap: normal;
  word-break: normal;
}
.account-table .account-likes-progress {
  margin-top: 0.35rem;
}
.empty-cell { text-align: center; padding: 1.5rem 1rem !important; }
.stack-cards { display: grid; gap: 0.65rem; }
.ticket-card {
  display: block;
  background: var(--bg-pure);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.95rem 1.05rem;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, transform 0.15s var(--ease), box-shadow 0.15s;
}
.ticket-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.ticket-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.ticket-card__subject {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: var(--ink);
}
.ticket-card__meta { margin: 0 0 0.35rem; }
.ticket-card__preview {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.form-row-2 {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .form-row-2 { grid-template-columns: 1fr 1fr; }
}
.stack { display: grid; gap: 0.85rem; }
.thread { display: grid; gap: 0.75rem; }
.thread-msg {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.85rem 1rem;
  background: var(--bg-pure);
}
.thread-msg--customer { border-left: 3px solid var(--accent); }
.thread-msg--admin { border-left: 3px solid var(--ink); background: var(--accent-soft); }
.thread-msg--system {
  border-left: 3px solid var(--line-strong);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: var(--fs-small);
}
.thread-msg__head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  font-size: var(--fs-small);
}
.thread-msg__body {
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--ink-2);
}
.help-box { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), var(--bg-pure) 70%); }

/* Prose */
.blog-content, .prose {
  line-height: 1.7;
  color: var(--ink-2);
}
.blog-content h2, .prose h2 {
  font-size: 1.2rem;
  margin: 1.5rem 0 0.6rem;
  color: var(--ink);
}
.blog-content h3, .prose h3 {
  font-size: 1.05rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--ink);
}
.blog-content h4, .prose h4 {
  font-size: 1rem;
  margin: 1rem 0 0.35rem;
  color: var(--ink);
  font-weight: 650;
}
.blog-content p, .prose p {
  margin: 0 0 0.85rem;
  color: var(--muted);
}
.blog-content a, .prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-content ul, .prose ul {
  margin: 0 0 0.9rem;
  padding-left: 1.2rem;
  color: var(--muted);
}
.blog-content li, .prose li { margin-bottom: 0.35rem; }
.blog-content table, .prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  margin: 0.75rem 0 1.1rem;
}
.blog-content td, .blog-content th,
.prose td, .prose th {
  border: 1px solid var(--line);
  padding: 0.5rem 0.65rem;
  text-align: left;
}
.author-line { color: var(--faint); font-size: var(--fs-small); margin: 0.5rem 0 0; }
.author-line a { color: var(--accent); }
.legal-page { max-width: 720px; padding-top: var(--s5); }
.legal-page h1 { font-size: var(--fs-h1); margin-bottom: 0.4rem; }
.legal-lead { color: var(--muted); margin-bottom: var(--s5); font-size: var(--fs-small); }

/* Likes progress (Discord-style tracking) */
.likes-track__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.likes-track__title {
  font-size: 1.15rem;
  margin: 0;
}
.likes-meter {
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin-bottom: 1rem;
}
.likes-meter__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #059669, #34d399);
  transition: width 0.4s var(--ease);
}
.likes-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
  margin: 0;
}
@media (min-width: 640px) {
  .likes-stats { grid-template-columns: repeat(4, 1fr); }
}
.likes-stats dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.2rem;
}
.likes-stats dd {
  margin: 0;
  font-weight: 650;
  font-size: var(--fs-small);
  color: var(--ink);
}

/* Pix */
.pix-box {
  margin-top: 1.25rem;
  padding: 1.35rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), var(--bg-pure) 55%);
}
.pix-title { font-size: 1.15rem; margin: 0 0 0.35rem; }
.pix-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 720px) {
  .pix-grid { grid-template-columns: auto 1fr; }
}
.pix-qr {
  width: 220px;
  height: 220px;
  border-radius: 14px;
  background: var(--pix-qr-bg);
  padding: 10px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.pix-textarea {
  width: 100%;
  min-height: 110px;
  margin-top: 0.4rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg-pure);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  word-break: break-all;
  resize: vertical;
}

.offer {
  border: 1px solid var(--line);
  background: var(--bg-pure);
  border-radius: var(--r-lg);
  padding: 1.4rem;
  margin: 1rem 0;
  box-shadow: var(--shadow-sm);
}
.offer h3, .offer h2 { font-size: 1.2rem; margin: 0.4rem 0; }
.offer p { color: var(--muted); margin: 0 0 1rem; }

/* Login social (Google + Discord) — layout tipo marketplace */
.login-page {
  max-width: 440px;
  margin: var(--s6) auto var(--s7);
}
.social-login {
  padding: 1.75rem 1.5rem 1.5rem;
}
/* Parte 17 — destino pós-login */
.login-next-banner {
  margin: 0 0 1.15rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--r);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--accent-soft);
  text-align: center;
}
.login-next-banner__label {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 0.2rem;
}
.login-next-banner__detail {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}
.login-benefits {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  display: grid;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.login-benefits li {
  display: flex;
  gap: 0.4rem;
  line-height: 1.35;
}
.login-benefits li::before {
  content: "✓";
  color: var(--ok);
  font-weight: 800;
  flex-shrink: 0;
}
.social-login__lead {
  margin: 0.4rem 0 0;
  line-height: 1.45;
}
.social-login__header {
  text-align: center;
  margin-bottom: 1.25rem;
}
.social-login__title {
  font-size: clamp(1.25rem, 2.5vw, 1.45rem);
  margin: 0;
  letter-spacing: -0.02em;
}
.social-login__subtitle {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  text-align: center;
}
.social-login__buttons {
  display: grid;
  gap: 0.65rem;
}
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 1rem;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: var(--bg-pure);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s var(--ease);
}
.social-btn:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--ink);
  color: var(--ink);
}
.social-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.social-btn__icon {
  display: flex;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
}
.social-btn__icon svg { width: 1.25rem; height: 1.25rem; }
.social-btn__label { line-height: 1.2; }
.social-btn--discord {
  background: #5865f2;
  border-color: #5865f2;
  color: #fff;
}
.social-btn--discord:hover:not(:disabled) {
  background: #4752c4;
  border-color: #4752c4;
  color: #fff;
}
.social-btn--google {
  background: var(--bg-pure);
  border-color: var(--line-strong);
  color: var(--ink);
}
html[data-theme="dark"] .social-btn--google {
  background: var(--bg-pure);
  border-color: var(--line-strong);
}
.social-login__desc {
  margin: 1rem 0 0;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.5;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  color: var(--faint);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: lowercase;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.login-divider span { flex-shrink: 0; }
.social-login__alt { text-align: center; }
.login-wrap { max-width: 420px; margin: var(--s7) auto 0; }

/* Parte 23 — erro, contato, fila admin */
.error-page__panel { text-align: center; }
.error-page__actions {
  display: grid;
  gap: 0.45rem;
  max-width: 280px;
  margin: 0 auto;
}
.contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
@media (min-width: 560px) {
  .contact-cards { grid-template-columns: 1fr 1fr; }
}
.contact-card {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-pure);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.contact-card:hover,
.contact-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
  outline: none;
}
.contact-card--primary {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-soft);
}
.contact-card strong { font-size: 1rem; }
.contact-card span { font-size: 0.85rem; color: var(--muted); line-height: 1.35; }
.admin-support-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  align-items: center;
}
.admin-support-search input[type="search"] {
  flex: 1 1 14rem;
  min-height: 2.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-pure);
  color: var(--ink);
  font: inherit;
}
.ticket-card--hot {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: inset 3px 0 0 var(--accent);
}
.ticket-card--warm {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
}

/* Parte 24 — ops velocity: fila de pedidos + painel no pedido */
.adm-ops-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0.25rem;
}
.adm-ops-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 6.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface, var(--bg-pure));
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.adm-ops-chip:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.adm-ops-chip strong {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
}
.adm-ops-chip span {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.25;
}
.adm-ops-chip--danger {
  border-color: color-mix(in srgb, #e55555 50%, var(--line));
  background: color-mix(in srgb, #e55555 10%, transparent);
}
.adm-ops-chip--info {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.adm-ops-chip--warn {
  border-color: color-mix(in srgb, #e6a23c 45%, var(--line));
  background: color-mix(in srgb, #e6a23c 10%, transparent);
}
.adm-orders-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 1.25rem 0 0.55rem;
}
.adm-order-filters {
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}
.adm-filter-count {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--surface-muted, rgba(255,255,255,0.06));
  color: var(--muted);
}
.tab.active .adm-filter-count {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: inherit;
}
.adm-row--hot td:first-child {
  box-shadow: inset 3px 0 0 #e55555;
}
.adm-row--muted {
  opacity: 0.92;
}
.order-admin-ops__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.order-admin-ops {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
}
@media (max-width: 640px) {
  .adm-ops-chip { min-width: calc(50% - 0.35rem); flex: 1 1 calc(50% - 0.35rem); }
}

/* Parte 25 — UID recente no checkout + CRM quick */
.uid-recent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.45rem 0 0.15rem;
}
.uid-recent__label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-right: 0.15rem;
}
.uid-chip {
  appearance: none;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--surface-muted, rgba(255,255,255,0.04));
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
}
.uid-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.crm-quick-actions {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r, 12px);
  background: var(--surface, transparent);
}

/* Parte 26 — bulk admin + recompra conta */
.adm-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0 0 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  position: sticky;
  top: 0.35rem;
  z-index: 5;
}
.adm-bulk-bar__count {
  font-size: 0.85rem;
  font-weight: 600;
  margin-right: 0.25rem;
}
.adm-check-col {
  width: 2rem;
  text-align: center;
  vertical-align: middle;
}
.adm-check-col input {
  width: 1.05rem;
  height: 1.05rem;
  cursor: pointer;
}
.account-rebuy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.55rem;
}
.account-rebuy-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface, transparent);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.account-rebuy-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.account-rebuy-card strong {
  font-size: 0.92rem;
  line-height: 1.25;
}
.account-rebuy-card__cta {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}

/* Reservas de passe (conta) */
.account-stat--reserve .account-stat__value {
  color: var(--accent);
}
.account-reserve-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.account-reserve-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.account-reserve-card__main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 12rem;
}
.account-reserve-card__when {
  font-size: 0.88rem;
}
.account-reserve-card__actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-items: center;
}
.account-schedule-hint,
.adm-schedule-hint {
  color: var(--accent);
  font-weight: 600;
}

/* Mega A+C — SLA badges + macros sugeridas */
.sla-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--surface-muted, rgba(255,255,255,0.05));
  color: var(--muted);
  vertical-align: middle;
}
.sla-badge--ok {
  border-color: color-mix(in srgb, var(--ok, #3ecf8e) 40%, var(--line));
  color: var(--ok, #3ecf8e);
}
.sla-badge--warn {
  border-color: color-mix(in srgb, #e6a23c 50%, var(--line));
  color: #e6a23c;
  background: color-mix(in srgb, #e6a23c 12%, transparent);
}
.sla-badge--danger {
  border-color: color-mix(in srgb, #e55555 55%, var(--line));
  color: #ff8a8a;
  background: color-mix(in srgb, #e55555 14%, transparent);
}
.ticket-card--sla-danger {
  border-color: color-mix(in srgb, #e55555 45%, var(--line));
}
.support-macro-chip.is-suggested {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  font-weight: 600;
}
.wa-templates .btn { max-width: 100%; }

/* Mega B — home rebuy + loja conversion */
.home-rebuy {
  margin: 1rem auto 0.5rem;
  padding: 0 1rem 0.25rem;
  max-width: var(--container, 1100px);
}
.home-rebuy__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
.home-rebuy__title {
  font-size: 1.1rem;
  margin: 0;
}
.home-rebuy__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.5rem;
}
.home-rebuy__card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface, transparent);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.home-rebuy__card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.home-rebuy__card strong {
  font-size: 0.9rem;
  line-height: 1.25;
}
.home-rebuy__cta {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}
.shop-promos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}
.shop-promo-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.4rem 0.7rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: inherit;
  text-decoration: none;
  font-size: 0.8rem;
  line-height: 1.2;
}
.shop-promo-chip strong { font-size: 0.88rem; }
.shop-promo-chip span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--muted);
}
.shop-promo-chip.is-active,
.shop-promo-chip:hover {
  border-color: var(--accent);
}
.shop-promos__hint { margin-left: 0.15rem; }
.shop-rebuy {
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.85rem;
}
.shop-rebuy__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.shop-rebuy__chip {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-muted, transparent);
  color: inherit;
  text-decoration: none;
  font-size: 0.82rem;
}
.shop-rebuy__chip:hover { border-color: var(--accent); }
.shop-uid-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 1px dashed var(--line);
}
.shop-uid-chips { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.uid-chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.sticky-cta__info { min-width: 0; }
.sticky-cta__promo {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 0.1rem;
}
.sticky-cta__uid {
  display: block;
  font-size: 0.72rem;
  margin-top: 0.05rem;
}

/* Hub /conta — abas (pedidos · carteira · suporte) */
.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0.35rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-muted, rgba(255,255,255,0.03));
}
.account-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.2;
}
.account-tab:hover { color: inherit; background: rgba(255,255,255,0.04); }
.account-tab.is-active {
  color: inherit;
  background: var(--surface, #12151c);
  box-shadow: 0 0 0 1px var(--line);
}
.account-tab__badge {
  display: inline-flex;
  min-width: 1.25rem;
  justify-content: center;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: inherit;
}
.account-tab__soft {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.account-panel[hidden] { display: none !important; }
.account-panel.is-active { display: block; }
.account-grid--single { display: block; }
.account-jump {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.account-jump.section-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--muted);
}
.account-jump.section-link:hover { color: var(--accent); }

/* Filtro ao vivo — Meus pedidos */
.account-orders-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.85rem;
}
.account-orders-search input[type="search"] {
  flex: 1 1 14rem;
  min-height: 2.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--line-strong, var(--line));
  background: var(--bg-pure, var(--surface));
  color: inherit;
  font: inherit;
}
.account-orders-search input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.account-orders-search__meta {
  white-space: nowrap;
}
[data-order-row][hidden] {
  display: none !important;
}

/* Parte 22 — abrir chamado de suporte */
.support-new__head {
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.support-trust {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.85rem;
  display: grid;
  gap: 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  font-size: 0.82rem;
  color: var(--muted);
}
.support-trust li {
  display: flex;
  gap: 0.4rem;
  line-height: 1.35;
}
.support-trust li::before {
  content: "✓";
  color: var(--ok);
  font-weight: 800;
  flex-shrink: 0;
}
.support-shortcuts {
  flex-wrap: wrap;
}
.support-order-pick {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--bg-pure);
  color: var(--ink);
  font: inherit;
}

/* Parte 21 — dock mobile de conversão */
.mobile-dock {
  display: none;
}
@media (max-width: 899px) {
  body:not(.admin-shell-active):not(.has-sticky-cta) .mobile-dock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    min-height: 3.6rem;
    padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    background: var(--sticky-bg, var(--bg-pure));
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(12px);
  }
  body:not(.admin-shell-active):not(.has-sticky-cta) {
    padding-bottom: calc(4.1rem + env(safe-area-inset-bottom, 0px));
  }
}
.mobile-dock__item {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.3rem 0.2rem;
  text-decoration: none;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 10px;
  line-height: 1.15;
}
.mobile-dock__item:hover,
.mobile-dock__item:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}
.mobile-dock__item.is-active {
  color: var(--accent);
}
.mobile-dock__item--accent .mobile-dock__lbl {
  color: inherit;
}
.mobile-dock__ico {
  font-size: 1.1rem;
  line-height: 1;
}
.mobile-dock__lbl {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Parte 19 — home: atalhos + trust */
/* Sempre em 1 linha (4 colunas), mesmo no mobile — pedido explícito: "menu
   um ao lado do outro". Compacta padding/fonte pra caber em telas estreitas
   em vez de empilhar 2x2. */
.home-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin: 1rem auto 0.75rem;
  max-width: var(--content-max, 1120px);
  padding-left: var(--page-pad, 1rem);
  padding-right: var(--page-pad, 1rem);
}
@media (min-width: 720px) {
  .home-quick { gap: 0.75rem; }
}
.home-quick__item {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-pure);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
@media (min-width: 720px) {
  .home-quick__item { gap: 0.15rem; padding: 0.75rem 0.85rem; }
}
.home-quick__item:hover,
.home-quick__item:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  outline: none;
}
.home-quick__item--primary {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-soft);
}
.home-quick__title {
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-quick__desc {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 720px) {
  .home-quick__title { font-size: 0.95rem; white-space: normal; }
  .home-quick__desc { font-size: 0.78rem; white-space: normal; }
}
.home-trust-strip {
  list-style: none;
  margin: 0 auto 1.25rem;
  max-width: var(--content-max, 1120px);
  padding: 0.55rem var(--page-pad, 1rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.home-trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.home-trust-strip li::before {
  content: "✓";
  color: var(--ok);
  font-weight: 800;
}
.cta-band__actions {
  flex-wrap: wrap;
}

/* Parte 18 — loja: busca + trust */
.shop-head {
  align-items: flex-end;
  gap: 1rem;
}
.shop-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.shop-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-pure);
}
.shop-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
  align-items: center;
}
.shop-search input[type="search"] {
  flex: 1 1 12rem;
  min-height: 2.6rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: var(--bg-pure);
  color: var(--ink);
  font: inherit;
}
.shop-trust {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0.55rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.shop-trust--center {
  justify-content: center;
  text-align: center;
}
.home-trust-strip--center {
  justify-content: center;
  text-align: center;
}
.shop-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.shop-trust li::before {
  content: "✓";
  color: var(--ok);
  font-weight: 800;
}
.shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1.5rem 1rem;
}
.shop-tabs {
  margin-bottom: 0.85rem;
}
@media (max-width: 560px) {
  .shop-head { flex-direction: column; align-items: flex-start; }
}

/* Parte 16 — buscar pedido (convidado) */
.order-lookup {
  max-width: 440px;
  margin: 0 auto;
}
.order-lookup__panel { padding: 1.25rem 1.15rem 1.35rem; }
.order-lookup__tips {
  margin-top: 1.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.order-lookup__recent { margin-top: 0.25rem; }
.order-lookup__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.order-lookup__chip {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
}
.order-lookup__chip:hover,
.order-lookup__chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}
.login-grid { display: grid; gap: 0.75rem; }

/* ── Blog editorial (referência de artigo marketplace) ── */
.blog-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 0 3rem;
}
.blog-article__header { margin-bottom: 1.5rem; }
.blog-article__kicker {
  font-size: var(--fs-caption);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.blog-article__kicker a { color: var(--accent); text-decoration: none; }
.blog-article__kicker a:hover { text-decoration: underline; }
.blog-article__title {
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 0.85rem;
}
.blog-article__lead {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 1rem;
}
.blog-article__meta { margin: 0; }
.blog-article__cover {
  margin: 0 0 1.75rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
/* Capa no artigo: mesma proporção da lista (378×570), limitada na largura */
.blog-article__cover img {
  width: 100%;
  max-width: 378px;
  height: auto;
  display: block;
  margin: 0 auto;
  aspect-ratio: 378 / 570;
  object-fit: cover;
}
.blog-article__emoji {
  font-size: 2.5rem;
  margin-bottom: 1.25rem;
  line-height: 1;
}
.blog-article__body {
  margin-bottom: 2.5rem;
}
.blog-article__body h2 {
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem;
}
.blog-article__body h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem;
}
.blog-article__body a {
  color: var(--accent);
  font-weight: 600;
}
.blog-article__related {
  margin: 2.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.blog-article__cta {
  margin: 1.5rem 0 2.5rem;
}
.blog-article__more {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* =====================================================================
   Blog layout (estrutura Hype) + cores do design system do site
   Tokens: --bg, --bg-pure, --ink, --muted, --accent, --cta, --line, etc.
   Respeita data-theme e data-palette (mono / brand / orange)
   ===================================================================== */
html.hypeblog-html {
  scroll-behavior: smooth;
  scroll-padding-top: 150px;
}
body.hypeblog-body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-weight: 400;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.8;
  background: var(--bg) !important;
}
body.hypeblog-body *,
body.hypeblog-body *::before,
body.hypeblog-body *::after {
  box-sizing: border-box;
}
body.hypeblog-body a {
  color: var(--ink);
  outline: none;
  text-decoration: none;
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
body.hypeblog-body a:hover,
body.hypeblog-body a:focus {
  text-decoration: none;
}
body.hypeblog-body .screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
}
body.hypeblog-body .clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
body.hypeblog-body .clearfix { display: block; }
body.hypeblog-body .mx-2 { margin: 0 20px; }

/* Header fixo — mesma família da nav da loja */
body.hypeblog-body .site-header {
  background: var(--bg-pure);
  border-bottom: 1px solid var(--line);
}
body.hypeblog-body .container--header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.2s;
  width: 100%;
  background-color: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 999;
  padding: 0 16px;
  min-height: 70px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
}
body.hypeblog-body .hypeblog-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  padding: 10px 0;
  color: var(--ink) !important;
  text-decoration: none;
}
body.hypeblog-body .hypeblog-logo__mark {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg-pure);
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: -0.04em;
}
body.hypeblog-body .hypeblog-logo__text {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
body.hypeblog-body .hypeblog-logo__text em {
  font-style: normal;
  color: var(--muted);
  font-weight: 600;
}
body.hypeblog-body .hypeblog-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}
body.hypeblog-body .hypeblog-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 1rem;
  border-radius: var(--r-full);
  background: var(--cta);
  color: var(--cta-fg) !important;
  font-weight: 650;
  font-size: var(--fs-small);
  text-decoration: none !important;
  white-space: nowrap;
}
body.hypeblog-body .hypeblog-cta:hover {
  background: var(--cta-hover);
}
body.hypeblog-body .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--bg-pure);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
body.hypeblog-body .theme-toggle:hover {
  border-color: var(--line-strong);
  background: var(--surface-muted);
}
body.hypeblog-body .theme-toggle svg {
  width: 18px;
  height: 18px;
}
html[data-theme="dark"] body.hypeblog-body .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] body.hypeblog-body .theme-toggle .icon-sun { display: block; }
html:not([data-theme="dark"]) body.hypeblog-body .theme-toggle .icon-moon { display: block; }
html:not([data-theme="dark"]) body.hypeblog-body .theme-toggle .icon-sun { display: none; }

/* Nav */
body.hypeblog-body #main-navigation {
  clear: both;
  display: flex;
  align-items: center;
}
body.hypeblog-body .sf-menu ul,
body.hypeblog-body .sf-menu .menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
body.hypeblog-body .sf-menu li {
  float: left;
  position: relative;
  list-style: none;
}
body.hypeblog-body #main-navigation li a {
  margin: 0;
  padding: 0 16px;
  color: var(--muted);
  font-size: 0.85em;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 50px;
  background: transparent;
  display: block;
  border-radius: 8px;
}
body.hypeblog-body #main-navigation li a:hover,
body.hypeblog-body #main-navigation li.current-menu-item > a {
  color: var(--ink);
  background: var(--hover-bg);
}
body.hypeblog-body #menu__checkbox { display: none; }
body.hypeblog-body .menu-icon {
  display: none;
  cursor: pointer;
  width: 30px;
  height: 23px;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
body.hypeblog-body .menu-icon__bar {
  display: block;
  height: 3px;
  background-color: var(--ink);
  width: 100%;
  transition: all 0.2s;
  border-radius: 3px;
  position: absolute;
}
body.hypeblog-body .menu-icon__bar:nth-child(1) { top: 0; }
body.hypeblog-body .menu-icon__bar:nth-child(2) { top: 50%; }
body.hypeblog-body .menu-icon__bar:nth-child(3) { top: 100%; }

/* Search */
body.hypeblog-body .search-submit { display: none; }
body.hypeblog-body .search-form {
  height: 44px;
  margin: 0;
}
body.hypeblog-body .search-label {
  height: 100%;
  background-color: var(--surface-muted);
  position: relative;
  display: block;
  margin: 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
}
body.hypeblog-body input[type="search"].search-field {
  margin: 0;
  height: 100%;
  outline: none;
  border: none;
  background: transparent;
  padding: 0 14px;
  color: var(--ink);
  width: 180px;
  max-width: 32vw;
  border-radius: 0;
  font-size: 0.9rem;
  font-family: inherit;
}
body.hypeblog-body .search-field::placeholder {
  color: var(--faint);
  opacity: 1;
}

/* Layout 980px + sidebar 300px */
body.hypeblog-body .container {
  width: 980px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
body.hypeblog-body .site-main {
  padding: 100px 0 40px;
}
body.hypeblog-body .content-area {
  width: 100%;
  float: left;
}
body.hypeblog-body .site-content {
  margin: 0 340px 0 0;
}
body.hypeblog-body .site-sidebar {
  width: 300px;
  float: left;
  margin: 0 0 0 -300px;
  font-size: 0.9em;
}

/* Breadcrumb padrão do site (mesmas classes .bc) */
body.hypeblog-body .bc {
  margin: 0 0 1.25rem;
}
body.hypeblog-body .bc__link {
  color: var(--muted);
}
body.hypeblog-body .bc__link:hover {
  color: var(--ink);
  background: var(--hover-bg);
}
body.hypeblog-body .bc__current {
  color: var(--ink-2);
}
body.hypeblog-body .bc__item,
body.hypeblog-body .bc__sep {
  color: var(--faint);
}

/* Page title — ink do site (não verde neon do Hype) */
body.hypeblog-body .page__title {
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.75em;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  line-height: 1.2;
}

/* Post card */
body.hypeblog-body .hentry {
  margin: 0 0 20px;
  word-wrap: break-word;
}
body.hypeblog-body .post-not-single {
  display: flex;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-pure);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
body.hypeblog-body .wrapper-thumb {
  flex-shrink: 0;
}
/* Lista do blog — capa 378×570 (retrato) */
body.hypeblog-body .entry-thumbnail {
  overflow: hidden;
  width: 189px; /* metade visual; proporção 378:570 */
  flex-shrink: 0;
  margin: 0 20px 0 0;
  background: var(--surface-muted);
  aspect-ratio: 378 / 570;
  border-radius: 0;
}
body.hypeblog-body .entry-thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}
body.hypeblog-body .entry-thumbnail img {
  display: block;
  margin: 0;
  object-position: center;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 378 / 570;
  transition: 0.2s;
}
body.hypeblog-body .entry-thumbnail img:hover {
  transform: scale(1.05);
}
body.hypeblog-body .entry-thumbnail__fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  aspect-ratio: 378 / 570;
  background: var(--media-placeholder);
  font-size: 3rem;
}
body.hypeblog-body .wrapper-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 0 16px;
}
body.hypeblog-body .entry-meta {
  color: var(--faint);
  font-size: 12px;
  margin: 20px 20px 0 0;
  font-weight: 550;
}
body.hypeblog-body .entry-meta a {
  color: var(--faint);
  text-decoration: none;
}
body.hypeblog-body .entry-meta a:hover {
  color: var(--accent);
}
body.hypeblog-body .cat-links a {
  padding: 3px 8px;
  background-color: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 6px;
  color: var(--accent);
  margin-right: 4px;
  display: inline-block;
  font-weight: 650;
}
body.hypeblog-body .cat-links a:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--cta-fg);
}
body.hypeblog-body .cat-links--dark a {
  background-color: var(--surface-muted);
}
body.hypeblog-body .entry-title {
  margin: 12px 20px 6px 0;
  font-size: 1.4em;
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
}
body.hypeblog-body .entry-title a {
  color: var(--ink);
  text-decoration: none;
}
body.hypeblog-body .entry-title a:hover {
  color: var(--accent);
}
body.hypeblog-body .entry-title--single {
  margin: 12px 0;
  font-size: 2em;
}
body.hypeblog-body .entry-summary {
  margin: 0 20px 20px 0;
  color: var(--muted);
}
body.hypeblog-body .entry-summary p {
  margin: 0 0 0.5em;
  line-height: 1.65;
}
body.hypeblog-body .more-link {
  display: inline-block;
  background-color: var(--cta);
  padding: 10px 18px;
  width: max-content;
  border-radius: 10px;
  font-weight: 700;
  line-height: initial;
  color: var(--cta-fg) !important;
  margin-top: 12px;
  text-decoration: none !important;
  border: 1px solid transparent;
}
body.hypeblog-body .more-link:hover {
  background-color: var(--cta-hover);
  color: var(--cta-fg) !important;
}
body.hypeblog-body .entry-summary .more-link {
  display: inline-block;
  margin-top: 10px;
}

/* Single post content */
body.hypeblog-body .single-thumbnail {
  margin-bottom: 20px;
  width: 100%;
  min-height: auto;
  background: transparent;
}
body.hypeblog-body .single-thumbnail img {
  width: 100%;
  height: auto;
  min-height: 0;
  border-radius: var(--r-lg);
  object-fit: cover;
  border: 1px solid var(--line);
}
body.hypeblog-body .entry-content {
  margin: 0 0 20px;
  color: var(--ink);
}
body.hypeblog-body .entry-content h2 {
  font-weight: 750;
  margin: 2em 0 0.5em;
  font-size: 1.45em;
  color: var(--ink);
  letter-spacing: -0.02em;
}
body.hypeblog-body .entry-content h3 {
  color: var(--ink);
  font-size: 1.2em;
  margin: 1.5em 0 0.5em;
}
body.hypeblog-body .entry-content p {
  margin: 0 0 1em;
  line-height: 1.75;
  color: var(--ink-2);
}
body.hypeblog-body .entry-content a {
  color: var(--accent);
  text-decoration: underline;
}
body.hypeblog-body .entry-content ul,
body.hypeblog-body .entry-content ol {
  margin: 0 0 1em 1.25em;
  color: var(--ink-2);
}
body.hypeblog-body .entry-content li { margin: 0 0 0.5em; }
/* Imagens no corpo do artigo: 819×1024, 506×282, 506×632 (respeitam proporção natural) */
body.hypeblog-body .entry-content img {
  max-width: min(100%, 819px);
  width: auto;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: 8px;
  object-fit: contain;
}
body.hypeblog-body .entry-header { margin: 0 0 20px; }
body.hypeblog-body .single-post-article {
  background: var(--bg-pure);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.75rem 2rem;
  box-shadow: var(--shadow-xs);
}
body.hypeblog-body .page-header {
  margin: 0 0 30px;
  padding: 15px 0 5px;
  border-bottom: none;
  color: var(--ink);
}

/* Widgets sidebar */
body.hypeblog-body .widget {
  margin: 0 0 24px;
  background: var(--bg-pure);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
body.hypeblog-body .widget-title {
  background-color: var(--surface-muted);
  padding: 16px 14px;
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.1em;
  border-bottom: 2px solid var(--accent);
  position: relative;
  line-height: 1.2;
}
body.hypeblog-body .widget ul {
  margin: 0;
  padding: 0 16px 8px;
  list-style: none;
  background: transparent;
}
body.hypeblog-body .widget li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
body.hypeblog-body .widget li:last-child {
  border-bottom: none;
  padding-bottom: 12px;
}
body.hypeblog-body .widget li a {
  color: var(--muted);
  font-weight: 550;
}
body.hypeblog-body .widget li a:hover {
  color: var(--accent);
}
body.hypeblog-body .widget.popular-posts,
body.hypeblog-body .widget.related_posts_by_taxonomy {
  padding-bottom: 16px;
}
body.hypeblog-body .widget.related_posts_by_taxonomy .see-all,
body.hypeblog-body .widget.popular-posts .see-all {
  display: block;
  margin: 4px auto 0;
  line-height: initial;
  padding: 10px 0;
  text-align: center;
  width: calc(100% - 28px);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  background: var(--bg);
}
body.hypeblog-body .widget.related_posts_by_taxonomy .see-all:hover {
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--cta-fg);
}
body.hypeblog-body .widget_media_image img,
body.hypeblog-body .widget_block img {
  transition: all 0.2s;
  width: 100%;
  height: auto;
  display: block;
}
body.hypeblog-body .widget_media_image img:hover,
body.hypeblog-body .widget_block img:hover {
  transform: scale(1.03);
}
body.hypeblog-body .widget_media_image a,
body.hypeblog-body .widget_block > a {
  overflow: hidden;
  display: block;
}
body.hypeblog-body .hypeblog-sidebar-cta {
  text-align: center;
  padding: 14px 12px 16px;
  margin: 0;
}

/* Pagination */
body.hypeblog-body .pagination {
  margin: 0 0 30px;
}
body.hypeblog-body a.page-numbers,
body.hypeblog-body span.page-numbers {
  display: inline-block;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--bg-pure);
  padding: 12px 16px;
  margin-right: 8px;
  margin-top: 28px;
  line-height: initial;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 650;
}
body.hypeblog-body a.page-numbers:hover {
  color: var(--ink);
  border-color: var(--ink);
}
body.hypeblog-body .page-numbers.current {
  background-color: var(--ink);
  color: var(--bg-pure);
  border-color: var(--ink);
}
body.hypeblog-body .page-numbers.dots {
  border: none;
  background: transparent;
}

/* Extra banner + footer — contraste fixo (CTA ink/fg inverte no dark) */
body.hypeblog-body .site-extra {
  padding: 28px 0;
  font-size: 0.95em;
  background: var(--bg);
  border-top: 1px solid var(--line);
  clear: both;
}
body.hypeblog-body .site-extra .widget {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
  overflow: visible;
}
body.hypeblog-body .site-extra .widget-title {
  display: none;
}
body.hypeblog-body .hypeblog-extra-banner {
  margin: 0;
  text-align: center;
}
body.hypeblog-body .hypeblog-extra-banner a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25em;
  max-width: 100%;
  margin: 0 auto;
  padding: 14px 22px;
  border-radius: var(--r-full);
  background: var(--cta);
  color: var(--cta-fg) !important;
  font-weight: 550;
  line-height: 1.4;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s var(--ease), transform 0.15s var(--ease);
}
body.hypeblog-body .hypeblog-extra-banner a:hover {
  background: var(--cta-hover);
  color: var(--cta-fg) !important;
  transform: translateY(-1px);
}
body.hypeblog-body .hypeblog-extra-banner strong {
  color: inherit;
  font-weight: 750;
}
body.hypeblog-body .site-footer {
  padding: 24px 0 40px;
  text-align: end;
  background: var(--bg);
  clear: both;
  border-top: 1px solid var(--line);
}
body.hypeblog-body .site-footer a {
  color: var(--muted);
  text-decoration: none;
}
body.hypeblog-body .site-footer a:hover {
  color: var(--accent);
}
body.hypeblog-body .site-info {
  color: var(--faint);
  font-size: 0.9em;
  margin: 0;
}

/* Responsive */
@media screen and (max-width: 1120px) {
  body.hypeblog-body .content-area { float: none; }
  body.hypeblog-body .site-content {
    margin: 0 auto;
    width: 80%;
  }
  body.hypeblog-body .post-not-single {
    flex-direction: column;
  }
  body.hypeblog-body .entry-thumbnail {
    margin: 0;
    width: 100%;
    max-width: 378px;
    aspect-ratio: 378 / 570;
  }
  body.hypeblog-body .entry-thumbnail img,
  body.hypeblog-body .entry-thumbnail__fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 378 / 570;
    min-height: 0;
  }
  body.hypeblog-body .entry-summary { margin-left: 0; }
  body.hypeblog-body .site-sidebar {
    width: 80%;
    float: none;
    margin: 24px auto 0;
  }
  body.hypeblog-body .entry-meta,
  body.hypeblog-body .entry-title,
  body.hypeblog-body .entry-summary {
    padding: 0 15px;
    margin-right: 0;
  }
  body.hypeblog-body .wrapper-info.mx-2 { margin: 0; }
}
@media (max-width: 1000px) {
  body.hypeblog-body .menu-icon { display: flex; }
  body.hypeblog-body #main-navigation {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
  body.hypeblog-body #main-navigation .sf-menu li { display: none; }
  body.hypeblog-body #menu__checkbox:checked ~ #main-navigation {
    position: absolute;
    top: 70px;
    right: 0;
    left: 0;
    transform: none;
    background: var(--bg-pure);
    border-bottom: 1px solid var(--line);
    z-index: 1000;
    display: block;
    padding: 0 0 12px;
  }
  body.hypeblog-body #menu__checkbox:checked ~ #main-navigation .sf-menu li {
    float: none;
    display: block;
    width: 100%;
  }
  body.hypeblog-body #menu__checkbox:checked ~ #main-navigation .sf-menu ul {
    flex-direction: column;
  }
  body.hypeblog-body #menu__checkbox:checked ~ #main-navigation li a {
    width: 100%;
    display: block;
  }
  body.hypeblog-body #menu__checkbox:checked ~ #main-navigation .menu-icon__bar:nth-child(1) {
    transform: rotate(45deg);
    top: 50%;
  }
  body.hypeblog-body #menu__checkbox:checked ~ #main-navigation .menu-icon__bar:nth-child(2) {
    opacity: 0;
  }
  body.hypeblog-body #menu__checkbox:checked ~ #main-navigation .menu-icon__bar:nth-child(3) {
    transform: rotate(-45deg);
    top: 50%;
  }
}
@media (max-width: 960px) {
  body.hypeblog-body .container { width: 90%; }
}
@media (max-width: 600px) {
  body.hypeblog-body a.page-numbers,
  body.hypeblog-body span.page-numbers {
    padding: 8px 12px;
    margin-right: 4px;
  }
  body.hypeblog-body .site-content,
  body.hypeblog-body .site-sidebar { width: 90%; }
  body.hypeblog-body .post-not-single { font-size: 14px; }
  body.hypeblog-body .more-link { font-size: 13px; }
  body.hypeblog-body .entry-title { font-size: 1.2em; }
  body.hypeblog-body .entry-content { font-size: 14px; }
  body.hypeblog-body .desktop-form { display: none; }
  body.hypeblog-body .site-footer { text-align: center; }
  body.hypeblog-body .single-post-article {
    padding: 1.1rem 1rem 1.5rem;
  }
}
@media (max-width: 430px) {
  body.hypeblog-body .entry-title--single { font-size: 1.5em; }
  body.hypeblog-body .entry-content h2 { font-size: 1.25em; }
  body.hypeblog-body .widget-title { font-size: 1.05em; }
  body.hypeblog-body .hypeblog-logo__text { font-size: 0.85rem; }
}

/* índice antigo (fallback, páginas da loja) */
.blog-index__hero { max-width: 40rem; margin-bottom: 2rem; }
.blog-index__title {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  margin: 0.35rem 0 0.65rem;
  letter-spacing: -0.03em;
}
.blog-index__lead {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}
.blog-index__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
.blog-index__footer { margin-top: 2rem; text-align: center; }
.checkout-title { font-size: 1.05rem; margin: 0 0 1rem; }
.product-price { font-size: 1.85rem; }

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.75rem 1.5rem;
}
.empty-state h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }

/* Grandes Parceiros (acima do rodapé) */
.partners {
  margin-top: var(--s8);
  padding: var(--s7) 0 var(--s6);
  background: #061016;
  color: #e2e8f0;
  border-top: 1px solid rgba(45, 212, 191, 0.25);
}
.partners__title {
  margin: 0 0 1.25rem;
  text-align: center;
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 750;
  color: #fff;
  letter-spacing: -0.02em;
}
.partners__box {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  border: 1px solid rgba(45, 212, 191, 0.55);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.25);
}
.partners__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 1.75rem;
}
.partners__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(226, 232, 240, 0.72);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.partners__mark {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 1.65rem;
  padding: 0 0.4rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}
.partners__mark--ff { background: #ea580c; color: #fff; }
.partners__mark--garena { background: #0ea5e9; color: #fff; }
.partners__mark--mp { background: #009EE3; color: #fff; }
.partners__mark--pix { background: #32BCAD; color: #fff; font-size: 0.65rem; }

/* Footer Hype-like */
.footer {
  margin-top: 0;
  border-top: 1px solid rgba(45, 212, 191, 0.35);
  padding: var(--s7) 0 var(--s6);
  color: #94a3b8;
  font-size: var(--fs-small);
  background: #040a0e;
}
.footer--hype {
  color: #94a3b8;
}
.footer-cols {
  display: grid;
  gap: 1.75rem 1.5rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.75rem;
}
@media (min-width: 720px) {
  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .footer-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1100px) {
  .footer-cols {
    /* Parte 20: Sobre · Conta · Suporte · Afiliados · Redes */
    grid-template-columns: 1fr 1.15fr 1fr 0.95fr 1.1fr;
  }
}
.footer-col__title {
  display: block;
  color: #22c55e;
  font-size: 1rem;
  font-weight: 750;
  margin: 0 0 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid rgba(34, 197, 94, 0.45);
  width: fit-content;
}
.footer-grid {
  display: grid;
  gap: 1.75rem;
  margin-bottom: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-small);
  margin-bottom: 0.75rem;
}
.footer--hype strong,
.footer--hype .footer-col__title {
  color: #22c55e;
}
.footer-text {
  margin: 0 0 0.5rem;
  line-height: 1.55;
  max-width: 34ch;
  color: #94a3b8;
  font-size: var(--fs-caption);
  font-weight: 550;
}
.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.footer-list a {
  color: #94a3b8;
  transition: color 0.15s;
  text-decoration: none;
  font-size: 0.9rem;
}
.footer-list a:hover { color: #fff; }

.footer-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.footer-social-ico {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #e2e8f0;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.footer-social-ico:hover {
  border-color: #22c55e;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
}
.footer-social-ico svg {
  display: block;
  margin: auto;
  width: 1rem;
  height: 1rem;
}
.footer-social-ico--discord svg,
.footer-social-ico svg.icon-discord {
  width: 1.2rem;
  height: 1.2rem;
  transform: translateY(0.5px);
}

.footer-payments--block {
  margin-top: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}
.footer--hype .footer-payments__title {
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 0.85rem;
}
.footer--hype .footer-pay__name {
  color: #cbd5e1;
}
.footer--hype .footer-payments__hint {
  color: #64748b;
}

.footer-legal {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 0.78rem;
  line-height: 1.55;
  color: #64748b;
}
.footer-legal p {
  margin: 0 0 0.65rem;
  max-width: 72rem;
}
.footer-legal a {
  color: #94a3b8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-legal a:hover { color: #22c55e; }

/* Redes sociais */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s var(--ease);
}
.social-link:hover {
  border-color: var(--ink);
  background: var(--hover-bg);
  transform: translateY(-1px);
}
.social-link svg { flex-shrink: 0; }
.social-link--instagram:hover { border-color: #e1306c; color: #e1306c; }
.social-link--tiktok:hover { border-color: var(--ink); }
.social-link--discord:hover { border-color: #5865f2; color: #5865f2; }

/* Formas de pagamento (rodapé, abaixo das redes) */
.footer-payments {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.footer-payments__title {
  display: block;
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--ink);
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.footer-payments__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.85rem;
  align-items: flex-end;
}
.footer-pay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 3.5rem;
}
.footer-pay__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.footer-pay__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.footer-pay__name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
}
.footer-payments__hint {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  color: var(--faint);
  line-height: 1.4;
  max-width: 22rem;
}

.footer-bottom {
  /* legado */
}
.footer-bottom-legacy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: var(--fs-caption);
}

.sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
  background: var(--sticky-bg);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
  gap: 0.75rem;
  align-items: center;
}
@media (max-width: 700px) {
  .sticky-cta { display: flex; }
  body.has-sticky-cta { padding-bottom: 5.5rem; }
}

/* Utils */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.mb-4 { margin-bottom: var(--s4); }
.text-muted { color: var(--muted); }

/* —— Theme toggle —— */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--bg-pure);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s var(--ease);
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--hover-bg);
  border-color: var(--ink);
}
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Transição de tema SÓ no clique do toggle — nunca no carregamento da página (evita piscada) */
@media (prefers-reduced-motion: no-preference) {
  html.theme-anim body,
  html.theme-anim .nav,
  html.theme-anim .footer,
  html.theme-anim .panel,
  html.theme-anim .card,
  html.theme-anim .btn {
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  }
}

/* Fundo estável no html (navegação MPA) — sem transition no body/html */
html {
  background-color: var(--bg);
  transition: none;
}
body {
  background-color: var(--bg);
  color: var(--ink);
  transition: none;
}

/* Carteira / pagamento */
.wallet-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.wallet-balance {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-top: 0.2rem;
}
.wallet-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* ── SEO categoria (estilo Dafiti: texto longo + expandir) ── */
.banner-sections {
  padding: 2rem 0 3rem;
}
.banner-sections .limit-width {
  width: min(var(--container), calc(100% - 2rem));
  margin: 0 auto;
}
.text-seo {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
}
.text-seo-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.text-seo-content {
  max-height: 11.5rem;
  overflow: hidden;
  position: relative;
  transition: max-height 0.35s var(--ease);
}
.text-seo-content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.5rem;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
  transition: opacity 0.25s;
}
.text-seo-toggle:checked ~ .text-seo-content {
  max-height: 2000px;
}
.text-seo-toggle:checked ~ .text-seo-content::after {
  opacity: 0;
}
.more-info-seo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  padding: 0.45rem 0;
  font-size: var(--fs-small);
  font-weight: 650;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
}
.more-info-seo:hover { color: var(--accent-hover); }
.more-info-seo__less { display: none; }
.text-seo-toggle:checked ~ .more-info-seo .more-info-seo__more { display: none; }
.text-seo-toggle:checked ~ .more-info-seo .more-info-seo__less { display: inline; }
.more-info-seo::after {
  content: "↓";
  font-size: 0.75em;
  opacity: 0.85;
}
.text-seo-toggle:checked ~ .more-info-seo::after {
  content: "↑";
}
.wallet-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.wallet-mini-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--fs-small);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}
.wallet-mini-list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Parte 15 — carteira: depósitos pendentes + extrato mobile */
.wallet-pending {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--accent-soft);
}
.wallet-pending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.wallet-pending-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg-pure);
}
.wallet-pending-item__amount {
  display: block;
  color: var(--accent);
  margin: 0.15rem 0;
}
.wallet-how-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.wallet-tx-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  gap: 0.45rem;
}
.wallet-tx-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-pure);
}
.wallet-tx-card div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
@media (max-width: 640px) {
  .wallet-tx-desktop { display: none; }
  .wallet-tx-mobile { display: grid; }
}
.text-ok { color: var(--ok); }
.account-stat--wallet .account-stat__value { color: var(--accent); }

/* Parte 14 — conta: atenção + cards mobile */
.account-attention {
  margin-bottom: 1.25rem;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-soft);
}
.account-order-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.account-order-card {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-pure);
}
.account-order-card--attention {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}
.account-order-card__main {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.account-order-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.account-order-card__price {
  color: var(--accent);
  font-size: 0.95rem;
}
.account-order-card__status {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}
.account-order-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.account-orders-total {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}
/* Progresso de likes embutido em Meus pedidos */
.account-likes-progress {
  min-width: 7.5rem;
  max-width: 14rem;
}
.account-likes-progress__meter.likes-meter {
  height: 8px;
  margin-bottom: 0.25rem;
}
.account-likes-progress__meta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--faint);
  line-height: 1.2;
}
.account-order-card .account-likes-progress {
  max-width: none;
  width: 100%;
  margin-top: 0.25rem;
}
.account-row--attention td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.account-orders-mobile { display: none; }
@media (max-width: 720px) {
  .account-orders-desktop { display: none; }
  .account-orders-mobile { display: grid; }
}
.pay-methods {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.75rem 0.9rem;
  margin: 0;
}
.pay-option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0.25rem;
  cursor: pointer;
}
.pay-option + .pay-option { border-top: 1px solid var(--line); }
.pay-option input { margin-top: 0.25rem; }
.pay-option span { display: grid; gap: 0.15rem; }
.pay-option.is-disabled { opacity: 0.55; cursor: not-allowed; }

/* Indicador ao vivo na página do pedido */
.order-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-pure);
  margin-left: auto;
}
.order-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.45);
  animation: order-live-pulse 1.6s ease-out infinite;
}
@keyframes order-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(5, 150, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

/* Timeline do pedido */
.order-timeline {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg);
}
.order-timeline__step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.order-timeline__step:last-child { border-bottom: 0; }
.order-timeline__dot {
  width: 14px;
  height: 14px;
  margin-top: 0.25rem;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--bg-pure);
  justify-self: center;
}
.order-timeline__step.is-done .order-timeline__dot {
  background: var(--ok);
  border-color: var(--ok);
}
.order-timeline__step.is-current .order-timeline__dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.order-timeline__step.is-todo { opacity: 0.55; }
.order-timeline__step.is-current { background: var(--accent-soft); }
.order-timeline__step.is-done strong { color: var(--ok-fg); }

/* Macros de resposta no suporte (admin) */
.support-macros {
  margin: 0 0 0.65rem;
}
.support-macros__label {
  margin: 0 0 0.4rem;
  font-weight: 600;
}
.support-macros__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.support-macro-chip {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: var(--bg-pure);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.support-macro-chip:hover,
.support-macro-chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}
.support-macro-chip.is-used {
  border-color: var(--ok);
  color: var(--ok-fg, var(--ok));
  background: color-mix(in srgb, var(--ok) 12%, var(--bg-pure));
}

/* Anexos (print) no thread de suporte */
.thread-msg__attach {
  margin: 0.65rem 0 0;
  padding: 0;
}
.thread-msg__attach a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  max-width: min(100%, 420px);
  background: var(--bg);
}
.thread-msg__attach img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
  background: var(--bg-pure);
}
.thread-msg__attach figcaption {
  margin-top: 0.35rem;
}
#attachment {
  display: block;
  width: 100%;
  max-width: 100%;
  font-size: 0.85rem;
}

/* Parte 8 — abaixo da dobra: menos trabalho de layout no 1º paint */
.home-below-fold {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}
.home-promo-rail {
  content-visibility: auto;
  contain-intrinsic-size: 1px 280px;
}

/* Pedido — estágio de entrega (spinner / sucesso / agendado) */
.delivery-stage {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 1rem 0 1.15rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-muted, color-mix(in srgb, var(--bg) 70%, var(--bg-pure)));
}
.delivery-stage.is-done {
  border-color: color-mix(in srgb, var(--ok-line, #86efac) 70%, var(--line));
  background: color-mix(in srgb, var(--ok-bg, #ecfdf5) 55%, transparent);
}
.delivery-stage.is-scheduled {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.delivery-stage__visual {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  position: relative;
  display: grid;
  place-items: center;
}
.delivery-spinner {
  width: 3.1rem;
  height: 3.1rem;
  position: relative;
  display: grid;
  place-items: center;
}
.delivery-spinner[hidden],
.delivery-success[hidden],
.delivery-scheduled-icon[hidden] {
  display: none !important;
}
.delivery-spinner__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-right-color: color-mix(in srgb, var(--accent) 35%, transparent);
  animation: delivery-spin 0.9s linear infinite;
}
.delivery-spinner__ring--delay {
  inset: 0.28rem;
  animation-duration: 1.35s;
  animation-direction: reverse;
  border-top-color: color-mix(in srgb, var(--accent) 55%, white);
}
.delivery-spinner__core {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-pure);
  border: 1px solid var(--line);
  z-index: 1;
}
.delivery-spinner__icon {
  font-size: 0.95rem;
  line-height: 1;
}
.delivery-success {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ok-bg, #ecfdf5) 80%, var(--bg-pure));
  border: 2px solid color-mix(in srgb, var(--ok-fg, #15803d) 45%, transparent);
  position: relative;
}
.delivery-success__check {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ok-fg, #15803d);
  line-height: 1;
}
.delivery-success__burst {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ok-fg, #15803d) 25%, transparent);
  opacity: 0.55;
}
.delivery-scheduled-icon {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-pure));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}
.delivery-stage__copy {
  flex: 1 1 auto;
  min-width: 0;
}
.delivery-stage__title {
  display: block;
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
}
.delivery-stage__detail {
  margin: 0 0 0.65rem;
}
.delivery-progress {
  display: grid;
  gap: 0.35rem;
}
.delivery-progress[hidden] {
  display: none !important;
}
.delivery-progress__track {
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 80%, transparent);
  overflow: hidden;
}
.delivery-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, white));
  transition: width 0.45s ease;
}
.delivery-progress.is-complete .delivery-progress__fill {
  background: linear-gradient(90deg, #16a34a, #4ade80);
}
.delivery-progress.is-scheduled .delivery-progress__fill {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #93c5fd));
}
.delivery-progress.is-running .delivery-progress__fill {
  animation: delivery-pulse 1.4s ease-in-out infinite;
}
.delivery-progress__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}
.delivery-progress.is-complete .delivery-progress__label {
  color: var(--ok-fg, #15803d);
}
@keyframes delivery-spin {
  to { transform: rotate(360deg); }
}
@keyframes delivery-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* Parte 7 — confiança no checkout */
/* Modal de confirmação do checkout */
.checkout-confirm {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.checkout-confirm[hidden] {
  display: none !important;
}
.checkout-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, 0.62);
  backdrop-filter: blur(2px);
}
.checkout-confirm__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 24rem);
  max-height: min(90vh, 36rem);
  overflow: auto;
  padding: 1.15rem 1.2rem 1.1rem;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--bg-pure);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  color: var(--ink);
}
.checkout-confirm__title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}
.checkout-confirm__lead {
  margin: 0 0 0.85rem;
}
.checkout-confirm__facts {
  margin: 0 0 1rem;
  display: grid;
  gap: 0.65rem;
}
.checkout-confirm__facts > div {
  display: grid;
  gap: 0.12rem;
}
.checkout-confirm__facts dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  font-weight: 600;
}
.checkout-confirm__facts dd {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.35;
  word-break: break-word;
}
.checkout-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}
body.checkout-confirm-open {
  overflow: hidden;
}

.checkout-trust {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  display: grid;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.checkout-trust--center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 0.45rem 1rem;
}
.checkout-trust li {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  line-height: 1.35;
}
.checkout-trust--center li {
  align-items: center;
}
.checkout-trust li::before {
  content: "✓";
  color: var(--ok);
  font-weight: 800;
  flex-shrink: 0;
}

/* Barra de confiança global (Fase 2 — E-E-A-T) — home/loja/produto, partials/trust_bar.html */
.trust-bar {
  list-style: none;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--accent-line, var(--line));
  background: var(--accent-soft, var(--bg));
  border-radius: var(--r);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 0.8rem;
  color: var(--ink);
}
.trust-bar--center { justify-content: center; text-align: center; }
.trust-bar li { display: flex; align-items: center; gap: 0.4rem; line-height: 1.3; }
.trust-bar li:not(.trust-bar__stat)::before {
  content: "✓";
  color: var(--ok);
  font-weight: 800;
  flex-shrink: 0;
}
.trust-bar__stat { color: var(--ink); }
.trust-bar__stat b {
  font-family: var(--mono);
  color: var(--accent);
  margin-right: 0.15rem;
}
.microcopy-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  color: var(--faint);
  margin: 0.6rem 0 0;
}
.microcopy-pay strong { color: var(--muted); }

/* Página Sobre (Fase 2 — E-E-A-T) */
.about-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.9rem 0 1.1rem;
}
.about-facts__item {
  flex: 1 1 180px;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-pure);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.about-facts__item strong { font-family: var(--font-display, inherit); font-size: 1.05rem; }
.about-facts__item span { color: var(--muted); font-size: 0.82rem; }
.about-facts__item--stat {
  border-color: var(--accent-line, var(--line));
  background: var(--accent-soft, var(--bg-pure));
}
.about-facts__item--stat strong { color: var(--accent); font-family: var(--mono); font-size: 1.3rem; }

/* Parte 6 — afiliados: share + links por produto */
.aff-share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.aff-share-btn--wa {
  border-color: #25d366;
  color: #128c7e;
}
.aff-share-btn--tg {
  border-color: #2aabee;
  color: #229ed9;
}
.aff-product-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.aff-product-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.55rem 0.15rem;
  border-bottom: 1px solid var(--line);
}
.aff-product-row:last-child { border-bottom: 0; }
.aff-product-row__emoji {
  font-size: 1.15rem;
  text-align: center;
}
.aff-product-row__body {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}
.aff-product-row__name {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aff-product-row__price {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
}
.aff-product-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}
@media (max-width: 520px) {
  .aff-product-row {
    grid-template-columns: 28px 1fr;
  }
  .aff-product-row__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

.product-faq .faq-item { margin-bottom: 0.35rem; }
.product-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-small);
  padding: 0.45rem 0;
}
.product-faq details p {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* Botão Admin na topbar — sempre legível */
.nav-admin-link {
  font-weight: 700 !important;
  color: var(--accent) !important;
}

/* Parte 3 — cupons em destaque + upsell */
.store-promos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}
.store-promo-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  transition: border-style 0.15s ease, transform 0.12s ease;
}
.store-promo-chip:hover,
.store-promo-chip:focus-visible {
  border-style: solid;
  outline: none;
  transform: translateY(-1px);
}
.store-promo-chip.is-active {
  border-style: solid;
  border-color: var(--ok);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 25%, transparent);
}
.store-promo-chip strong {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.store-promo-chip__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.72rem;
  opacity: 0.9;
}

.upsell-section { margin-top: 0.25rem; }
.upsell-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
@media (min-width: 560px) {
  .upsell-grid { grid-template-columns: 1fr 1fr; }
}
.upsell-card {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-pure);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.upsell-card:hover,
.upsell-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
  outline: none;
}
.upsell-card__emoji {
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
}
.upsell-card__body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.upsell-card__name {
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upsell-card__price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}
.upsell-card__cta {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
#nav-admin {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
#nav-admin:hover {
  border-color: var(--accent);
  color: var(--ink);
}

/* —— Admin navigation —— */
.admin-nav {
  position: sticky;
  top: var(--nav-h);
  z-index: 70;
  background: var(--bg-pure);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.admin-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  min-height: 52px;
  padding: 0.55rem 0;
}
.admin-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-right: 0.25rem;
}
.admin-nav__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-full);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--bg-pure);
}
.admin-nav__title {
  font-size: var(--fs-small);
  font-weight: 650;
  color: var(--muted);
}
.admin-nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}
.admin-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0.35rem 0.75rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.admin-nav__link:hover {
  color: var(--ink);
  background: var(--hover-bg);
}
.admin-nav__link.is-active {
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}
.admin-nav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: var(--r-full);
  font-size: 0.68rem;
  font-weight: 800;
  background: var(--err);
  color: #fff;
}
.admin-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.admin-nav__backup { margin: 0; }
.admin-page {
  padding-top: 1rem;
}
@media (max-width: 700px) {
  .admin-nav__title { display: none; }
  .admin-nav__inner { gap: 0.45rem; }
  .admin-nav__link { padding: 0.3rem 0.55rem; font-size: 0.8rem; }
}
.text-sm { font-size: var(--fs-small); }
.stack { display: grid; gap: 0.6rem; }

/* Icon helper (legacy) */
.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   Admin shell estilo WordPress (sidebar + topbar + mobile)
   ═══════════════════════════════════════════════════════════ */
body.admin-shell-active {
  overflow-x: hidden;
}
body.admin-shell-active .store-shell {
  min-height: 100vh;
}
body.wp-no-scroll {
  overflow: hidden;
}
.main-wrap--admin {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-admin .main-wrap--admin {
  min-height: 100vh;
}

.wp {
  --wp-sidebar: 260px;
  --wp-topbar: 56px;
  --wp-bg: #1d2327;
  --wp-bg-2: #23282d;
  --wp-text: #f0f0f1;
  --wp-muted: #a7aaad;
  --wp-accent: #2271b1;
  --wp-hover: #2c3338;
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: var(--bg);
  color: var(--ink);
}
.wp__overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.45);
}
.wp__sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: var(--wp-sidebar);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--wp-bg);
  color: var(--wp-text);
  overflow: hidden;
  transition: transform 0.22s ease;
}
.wp__brand {
  flex-shrink: 0;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wp__logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
}
.wp__logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.8rem;
  background: #00e676;
  color: #0b0d12;
}
.wp__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.wp__logo-text strong {
  font-size: 0.95rem;
  font-weight: 750;
}
.wp__logo-text small {
  font-size: 0.7rem;
  color: var(--wp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11rem;
}
.wp__nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0 1rem;
  -webkit-overflow-scrolling: touch;
}
.wp__group-label {
  margin: 0.85rem 1rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp-muted);
}
.wp__link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 40px;
  padding: 0.4rem 1rem;
  margin: 0 0.4rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 550;
  color: #dcdcde;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.wp__link:hover {
  background: var(--wp-hover);
  color: #fff;
}
.wp__link.is-active {
  background: var(--wp-accent);
  color: #fff;
  font-weight: 650;
}
.wp__link--muted {
  color: var(--wp-muted);
  font-size: 0.82rem;
}
.wp__ico {
  width: 1.35rem;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.9;
}
.wp__badge {
  margin-left: auto;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #d63638;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wp__sidebar-foot {
  flex-shrink: 0;
  padding: 0.5rem 0 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.wp__main {
  flex: 1;
  min-width: 0;
  margin-left: var(--wp-sidebar);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.wp__topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  height: var(--wp-topbar);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  background: var(--bg-pure);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.wp__menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-pure);
  cursor: pointer;
}
.wp__menu-btn span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 1px;
}
.wp__topbar-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}
.wp__crumb {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wp__topbar-title strong {
  font-size: 1rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp__topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.wp__backup { margin: 0; }
.wp__search-btn {
  display: none;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  background: var(--bg-pure);
  color: var(--muted);
  border-radius: var(--r);
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
  cursor: pointer;
}
.wp__search-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.wp__search-btn kbd {
  font-family: var(--mono, ui-monospace);
  font-size: 0.68rem;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  color: var(--faint);
}
@media (min-width: 720px) {
  .wp__search-btn { display: inline-flex; }
}

/* Fase E — busca global (Ctrl/⌘K) */
.adm-gsearch {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 1rem;
}
.adm-gsearch[hidden] { display: none !important; }
.adm-gsearch__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, 0.62);
  backdrop-filter: blur(2px);
}
.adm-gsearch__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  max-height: min(75vh, 32rem);
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--bg-pure);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.adm-gsearch__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}
.adm-gsearch__input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  outline: none;
}
.adm-gsearch__results {
  overflow-y: auto;
  padding: 0.5rem;
}
.adm-gsearch__hint { padding: 0.75rem; margin: 0; }
.adm-gsearch__group-label {
  margin: 0.5rem 0.6rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
}
.adm-gsearch__item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
}
.adm-gsearch__item:hover,
.adm-gsearch__item.is-active {
  background: var(--hover-bg, rgba(57, 255, 143, 0.06));
}
.wp__user {
  display: none;
  align-items: center;
  gap: 0.5rem;
  max-width: 12rem;
}
.wp__user-ava {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  background: var(--accent-soft);
  color: var(--ink);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.wp__user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.wp__user-meta strong {
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp__user-meta small {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp__content {
  flex: 1;
  padding: 1.25rem 1.25rem 2.5rem;
  width: 100%;
  max-width: 1280px;
  box-sizing: border-box;
}
.wp__content .section {
  padding-top: 0;
}
.wp__content .section-head {
  margin-bottom: 1rem;
}
.wp__content .admin-page {
  padding-top: 0;
}

@media (min-width: 720px) {
  .wp__user { display: inline-flex; }
}

/* Mobile: sidebar drawer */
@media (max-width: 960px) {
  .wp {
    --wp-sidebar: min(280px, 86vw);
  }
  .wp__sidebar {
    transform: translateX(-105%);
    box-shadow: 8px 0 28px rgba(0, 0, 0, 0.35);
  }
  .wp.is-sidebar-open .wp__sidebar {
    transform: translateX(0);
  }
  .wp.is-sidebar-open .wp__overlay {
    display: block;
  }
  .wp__main {
    margin-left: 0;
  }
  .wp__menu-btn {
    display: flex;
  }
  .wp__content {
    padding: 1rem 0.85rem 2rem;
  }
  .wp__topbar-actions .wp__backup {
    display: none;
  }
  .wp__content .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wp__content table {
    min-width: 560px;
  }
  .wp__content .admin-product-form__grid {
    grid-template-columns: 1fr !important;
  }
  .wp__content .account-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .wp__topbar-title .wp__crumb { display: none; }
  .wp__user-meta { display: none; }
  .wp__content .account-stats {
    grid-template-columns: 1fr;
  }
}


/* ═══ Dashboard Master ═══ */
.adm-master__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 1.15rem;
}
.adm-master__title {
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  margin: 0.15rem 0 0;
  letter-spacing: -0.02em;
}
.adm-master__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.adm-range {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--surface-muted, rgba(127,127,127,0.12));
  border: 1px solid var(--line, rgba(127,127,127,0.2));
}
.adm-range__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted, #8b93a7);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.adm-range__btn:hover { color: var(--text, inherit); }
.adm-range__btn.is-active {
  background: var(--surface, #12141a);
  color: var(--text, #f2f4f7);
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
[data-theme=light] .adm-range__btn.is-active,
body:not(.theme-dark) .adm-range__btn.is-active {
  background: #fff;
  color: #0c0e12;
}

.adm-alert-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.adm-alert {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--surface, transparent);
  color: inherit;
}
.adm-alert__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #5b8def;
  flex-shrink: 0;
}
.adm-alert--warn .adm-alert__dot { background: #e6a23c; }
.adm-alert--danger .adm-alert__dot { background: #e55; }
.adm-alert--ok .adm-alert__dot { background: #00c853; }
.adm-alert--info .adm-alert__dot { background: #5b8def; }

.adm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}
.adm-kpi {
  background: var(--surface, rgba(255,255,255,0.03));
  border: 1px solid var(--line, rgba(127,127,127,0.18));
  border-radius: 14px;
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 5.5rem;
}
.adm-kpi--hero {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(0,230,118,0.08), rgba(91,141,239,0.06));
  border-color: rgba(0,230,118,0.25);
}
.adm-kpi--warn { border-color: rgba(230,162,60,0.45); }
.adm-kpi--danger { border-color: rgba(229,85,85,0.5); }
.adm-kpi__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #8b93a7);
}
.adm-kpi__value {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.adm-kpi__hint {
  font-size: 0.75rem;
  color: var(--muted, #8b93a7);
  margin-top: auto;
}
.adm-kpi__hint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.adm-panels-2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
}
.adm-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.adm-panel-head h2 {
  font-size: 1.05rem;
  margin: 0;
}
.adm-section-title {
  font-size: 1.05rem;
  margin: 1.35rem 0 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.adm-chart {
  min-height: 180px;
  display: flex;
  align-items: flex-end;
}
.adm-chart__empty {
  margin: 2rem auto;
  text-align: center;
}
.adm-chart svg { width: 100%; height: 198px; display: block; overflow: visible; }
.adm-chart__grid { stroke: var(--line, rgba(127,127,127,0.18)); stroke-width: 1; }
.adm-chart__area { }
.adm-chart__line {
  stroke: var(--accent, #00e676);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.adm-chart__dot { fill: var(--accent, #00e676); }
.adm-chart__pt { cursor: pointer; }
.adm-chart__label {
  fill: var(--muted, #8b93a7);
  font-size: 9px;
  font-family: var(--mono, ui-monospace, monospace);
}

.adm-kpi__delta {
  font-size: 0.76rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.adm-kpi__delta--up { color: var(--ok-fg, #22c55e); }
.adm-kpi__delta--down { color: var(--err-fg, #ff6b6b); }
.adm-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  width: 100%;
  height: 180px;
  padding: 0.25rem 0 0;
}
.adm-bars__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 0.35rem;
}
.adm-bars__bar {
  width: 100%;
  max-width: 36px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #00e676 0%, #00a854 100%);
  min-height: 2px;
  transition: height 0.25s ease;
}
.adm-bars__label {
  font-size: 0.65rem;
  color: var(--muted, #8b93a7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.adm-events {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow: auto;
}
.adm-events__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line, rgba(127,127,127,0.15));
  font-size: 0.86rem;
}
.adm-events__item:last-child { border-bottom: none; }
.adm-events__action {
  font-size: 0.78rem;
  grid-column: 1 / -1;
}
.adm-events__time { grid-column: 2; grid-row: 2; }

.adm-master.is-loading .adm-kpi-grid,
.adm-master.is-loading .adm-chart-panel {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s;
}

@media (max-width: 960px) {
  .adm-panels-2 { grid-template-columns: 1fr; }
  .adm-kpi--hero { grid-column: span 1; }
}
@media (max-width: 560px) {
  .adm-kpi-grid { grid-template-columns: 1fr 1fr; }
  .adm-master__actions { width: 100%; }
  .adm-range { width: 100%; justify-content: space-between; }
}


/* ═══ CRM 360 ═══ */
.crm-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.crm-hero__main {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}
.crm-hero__ava {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-muted, rgba(127,127,127,0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  flex-shrink: 0;
  overflow: hidden;
}
.crm-hero__balance {
  text-align: right;
  padding: 0.5rem 0.85rem;
  border-radius: 12px;
  background: var(--surface-muted, rgba(127,127,127,0.1));
  border: 1px solid var(--line, rgba(127,127,127,0.15));
}


/* ═══ Media library ═══ */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem;
}
.media-card { padding: 0; overflow: hidden; }
.media-card__preview {
  display: block;
  aspect-ratio: 16/10;
  background: var(--surface-muted, rgba(0,0,0,0.2));
  overflow: hidden;
}
.media-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-card__body { padding: 0.65rem 0.75rem 0.75rem; }
.media-card__name {
  display: block;
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-card__url {
  width: 100%;
  font-size: 0.72rem;
  font-family: var(--mono, monospace);
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-muted, transparent);
  color: inherit;
}
.media-card--thumb { opacity: 0.85; }


/* ═══ Geo analytics ═══ */
.geo-heat { display:flex; flex-direction:column; gap:0.35rem; max-height:360px; overflow:auto; }
.geo-heat__cell {
  position:relative; display:grid; grid-template-columns:2.5rem minmax(0, 1fr) auto; gap:0.4rem; align-items:center;
  padding:0.35rem 0.5rem; border-radius:8px; text-decoration:none; color:var(--ink);
  border:1px solid var(--line, rgba(127,127,127,0.15)); overflow:hidden;
}
.geo-heat__bar {
  position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg,rgba(91,141,239,0.35),rgba(0,230,118,0.2));
  z-index:0; pointer-events:none;
}
.geo-heat__code, .geo-heat__name, .geo-heat__n {
  position:relative; z-index:1; font-size:0.85rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.geo-heat__code { font-family:var(--mono,monospace); font-weight:700; color:var(--ink); }
.geo-heat__name { color:var(--ink); }
.geo-heat__n { font-weight:600; text-align:right; color:var(--ink); }
.geo-hours {
  display:flex; align-items:flex-end; gap:0.2rem; height:100px; width:100%;
}
.geo-hours__col {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:0.2rem;
}
.geo-hours__bar {
  width:100%; max-width:14px; border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg,#7c5cff,#5b8def); min-height:0;
}
.geo-hours__lab { font-size:0.55rem; color:var(--muted,#8b93a7); }

/* ═══ Admin image crop editor ═══ */
body.imgcrop-open { overflow: hidden; }
.imgcrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}
.imgcrop[hidden] { display: none !important; }
.imgcrop__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}
.imgcrop__panel {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: min(92vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--bg-pure, #14171e);
  color: var(--ink, #f2f4f7);
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.imgcrop__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line, #2a2f3a);
}
.imgcrop__title { font-size: 1.05rem; display: block; }
.imgcrop__sub {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--muted, #a8b0bc);
  line-height: 1.35;
}
.imgcrop__x {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 0.15rem 0.4rem;
}
.imgcrop__x:hover { opacity: 1; }
.imgcrop__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 280px;
  height: min(52vh, 420px);
  background: #0a0c10;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
.imgcrop__img {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
}
.imgcrop__shade {
  position: absolute;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
}
.imgcrop__box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #00e676;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  cursor: move;
  touch-action: none;
}
.imgcrop__handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #00e676;
  border: 2px solid #0b0d12;
  border-radius: 2px;
  box-sizing: border-box;
}
.imgcrop__handle--nw { left: -7px; top: -7px; cursor: nwse-resize; }
.imgcrop__handle--ne { right: -7px; top: -7px; cursor: nesw-resize; }
.imgcrop__handle--sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.imgcrop__handle--se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.imgcrop__preview-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--line, #2a2f3a);
  background: var(--surface-muted, #1a1e26);
}
.imgcrop__preview {
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid rgba(0, 230, 118, 0.45);
  background-color: #0a0c10;
  overflow: hidden;
}
.imgcrop__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted, #a8b0bc);
  line-height: 1.4;
}
.imgcrop__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.75rem 1.1rem 0.9rem;
  border-top: 1px solid var(--line, #2a2f3a);
}
.imgcrop__foot-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}
[data-crop-status] {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #00e676;
}
.imgcrop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
@media (max-width: 640px) {
  .imgcrop__stage { height: min(48vh, 340px); min-height: 220px; }
  .imgcrop__foot { flex-direction: column; align-items: stretch; }
  .imgcrop__foot-right { margin-left: 0; }
  .imgcrop__foot-right .btn { flex: 1; }
}