/* ==========================================================================
   Ciranda — estilos base
   Tokens de marca (--brand-*) são injetados pelo layout a partir do painel.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --brand-primary: #5b4bdb;
  --brand-secondary: #0ea5a4;
  --brand-accent: #f2546b;
  --brand-bg: #f6f5fb;
  --brand-on-primary: #ffffff;

  --color-bg: var(--brand-bg);
  --color-surface: #ffffff;
  --color-surface-2: color-mix(in srgb, var(--brand-primary) 5%, #ffffff);
  --color-border: color-mix(in srgb, var(--brand-primary) 12%, #e7e6ee);
  --color-border-strong: color-mix(in srgb, var(--brand-primary) 22%, #d4d2df);
  --color-text: #1d1b2c;
  --color-text-muted: #5d5a73;
  --color-primary: var(--brand-primary);
  --color-primary-hover: color-mix(in srgb, var(--brand-primary) 84%, #000000);
  --color-primary-text: color-mix(in srgb, var(--brand-primary) 88%, #000000);
  --color-primary-soft: color-mix(in srgb, var(--brand-primary) 11%, transparent);
  --color-secondary: var(--brand-secondary);
  --color-secondary-text: color-mix(in srgb, var(--brand-secondary) 62%, #000000);
  --color-secondary-soft: color-mix(in srgb, var(--brand-secondary) 13%, transparent);
  --color-accent: var(--brand-accent);
  --color-accent-text: color-mix(in srgb, var(--brand-accent) 72%, #000000);
  --color-accent-soft: color-mix(in srgb, var(--brand-accent) 12%, transparent);
  --color-success: #157a42;
  --color-success-soft: #e3f4ea;
  --color-warning: #9a5a00;
  --color-warning-soft: #fdf1dc;
  --color-danger: #b42335;
  --color-danger-soft: #fbe6e9;
  --color-focus: var(--brand-primary);

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.78rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --text-display: clamp(2.3rem, 1.6rem + 3.6vw, 4.4rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(29 27 44 / 0.06);
  --shadow: 0 1px 2px rgb(29 27 44 / 0.05), 0 6px 18px -6px rgb(29 27 44 / 0.12);
  --shadow-lg: 0 2px 4px rgb(29 27 44 / 0.04), 0 22px 48px -18px color-mix(in srgb, var(--brand-primary) 38%, rgb(29 27 44 / 0.4));

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
  --container: 1160px;
  --header-h: 4rem;

  color-scheme: light;
}

/* Tema escuro: preferência do sistema, a menos que o usuário tenha escolhido o claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #121119;
    --color-surface: #1a1925;
    --color-surface-2: color-mix(in srgb, var(--brand-primary) 9%, #1a1925);
    --color-border: #2c2a3d;
    --color-border-strong: #3d3a54;
    --color-text: #ecebf5;
    --color-text-muted: #aaa7c1;
    --color-primary-text: color-mix(in srgb, var(--brand-primary) 58%, #ffffff);
    --color-primary-soft: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    --color-secondary-text: color-mix(in srgb, var(--brand-secondary) 70%, #ffffff);
    --color-secondary-soft: color-mix(in srgb, var(--brand-secondary) 20%, transparent);
    --color-accent-text: color-mix(in srgb, var(--brand-accent) 70%, #ffffff);
    --color-accent-soft: color-mix(in srgb, var(--brand-accent) 20%, transparent);
    --color-success: #6fd69b;
    --color-success-soft: #173325;
    --color-warning: #f2b35c;
    --color-warning-soft: #3a2a12;
    --color-danger: #ff8a98;
    --color-danger-soft: #3d1a20;
    --color-focus: color-mix(in srgb, var(--brand-primary) 55%, #ffffff);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px -8px rgb(0 0 0 / 0.55);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 24px 52px -20px rgb(0 0 0 / 0.75);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: #121119;
  --color-surface: #1a1925;
  --color-surface-2: color-mix(in srgb, var(--brand-primary) 9%, #1a1925);
  --color-border: #2c2a3d;
  --color-border-strong: #3d3a54;
  --color-text: #ecebf5;
  --color-text-muted: #aaa7c1;
  --color-primary-text: color-mix(in srgb, var(--brand-primary) 58%, #ffffff);
  --color-primary-soft: color-mix(in srgb, var(--brand-primary) 22%, transparent);
  --color-secondary-text: color-mix(in srgb, var(--brand-secondary) 70%, #ffffff);
  --color-secondary-soft: color-mix(in srgb, var(--brand-secondary) 20%, transparent);
  --color-accent-text: color-mix(in srgb, var(--brand-accent) 70%, #ffffff);
  --color-accent-soft: color-mix(in srgb, var(--brand-accent) 20%, transparent);
  --color-success: #6fd69b;
  --color-success-soft: #173325;
  --color-warning: #f2b35c;
  --color-warning-soft: #3a2a12;
  --color-danger: #ff8a98;
  --color-danger-soft: #3d1a20;
  --color-focus: color-mix(in srgb, var(--brand-primary) 55%, #ffffff);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px -8px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 24px 52px -20px rgb(0 0 0 / 0.75);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-3);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 750;
  text-wrap: balance;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

a {
  color: var(--color-primary-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur) var(--ease);
}

a:hover {
  color: var(--color-primary-hover);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection {
  background: color-mix(in srgb, var(--brand-primary) 28%, transparent);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--brand-on-primary);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-3);
  color: var(--brand-on-primary);
}

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.muted {
  color: var(--color-text-muted);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* ---------- Botões ---------- */
.btn {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-text);
  --btn-border: var(--color-border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 650;
  font-size: var(--text-sm);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}

.btn:hover {
  color: var(--btn-fg);
  border-color: var(--color-primary);
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--brand-on-primary);
  --btn-border: transparent;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand-primary) 80%, transparent);
}

.btn-primary:hover {
  --btn-bg: var(--color-primary-hover);
  border-color: transparent;
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
}

.btn-ghost:hover {
  --btn-bg: var(--color-primary-soft);
  border-color: transparent;
}

.btn-lg {
  min-height: 3.1rem;
  padding: 0.75rem 1.5rem;
  font-size: var(--text-base);
}

.btn-icon {
  width: 2.75rem;
  padding: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

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

.brand-mark {
  width: 2rem;
  height: 2rem;
  flex: none;
}

.brand-mark .mark-ring { stroke: var(--brand-primary); }
.brand-mark .mark-primary { fill: var(--brand-primary); }
.brand-mark .mark-secondary { fill: var(--brand-secondary); }
.brand-mark .mark-accent { fill: var(--brand-accent); }

.brand-logo {
  height: 2rem;
  width: auto;
}

.main-nav ul,
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav ul {
  display: flex;
  gap: var(--space-1);
}

.main-nav a,
.mobile-menu a.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-text);
  background: var(--color-primary-soft);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.menu-toggle {
  display: none;
}

.mobile-menu {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

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

.mobile-menu-inner {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
}

.mobile-menu a.nav-link {
  padding: 0.75rem 0.9rem;
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
}

.mobile-menu a.nav-link[aria-current="page"],
.mobile-menu a.nav-link:hover {
  color: var(--color-text);
  background: var(--color-primary-soft);
}

.mobile-menu-actions {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 760px) {
  .main-nav,
  .header-actions .hide-mobile {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }
}

@media (min-width: 761px) {
  .mobile-menu {
    display: none !important;
  }
}

/* O cabeçalho de visitante tem mais itens (links + Entrar + Criar conta) e não cabe
   entre ~760 e ~900 px: nele o menu compacto entra antes. O cabeçalho logado (.is-app)
   cabe nessa faixa, então segue com o corte padrão de 760 px. */
@media (max-width: 900px) {
  .site-header:not(.is-app) .main-nav,
  .site-header:not(.is-app) .header-actions .hide-mobile {
    display: none;
  }

  .site-header:not(.is-app) .menu-toggle {
    display: inline-flex;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .site-header:not(.is-app) .mobile-menu:not([hidden]) {
    display: block !important;
  }
}

/* ---------- Avisos ---------- */
.notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

.notice > i {
  margin-top: 0.2rem;
}

.notice p:last-child {
  margin-bottom: 0;
}

.notice-warning {
  background: var(--color-warning-soft);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}

.notice-warning > i {
  color: var(--color-warning);
}

.notice-info {
  background: var(--color-primary-soft);
  border-color: color-mix(in srgb, var(--brand-primary) 25%, transparent);
}

.notice-info > i {
  color: var(--color-primary-text);
}

/* ---------- Selos de estado (sempre com ícone + texto, nunca só cor) ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  white-space: nowrap;
}

.status-pending {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.status-approved {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.status-rejected,
.status-hidden {
  color: var(--color-text-muted);
  background: var(--color-surface-2);
}

.status-danger {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

/* ---------- Cartões ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-body {
  padding: var(--space-5);
}

/* ---------- Página inicial ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: min(70vw, 720px);
  aspect-ratio: 1;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--brand-primary) 22%, transparent), transparent 70%),
    radial-gradient(closest-side at 30% 70%, color-mix(in srgb, var(--brand-secondary) 16%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--color-primary-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-title {
  margin-bottom: var(--space-5);
  font-size: var(--text-display);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.hero-title em {
  font-style: normal;
  color: var(--color-primary-text);
  background: linear-gradient(transparent 62%, var(--color-accent-soft) 62%);
  padding-inline: 0.04em;
}

.hero-lead {
  max-width: 34rem;
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.hero-note {
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Mural de recados: elemento-assinatura da página inicial. */
.mural {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: calc(var(--radius-lg) + 6px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.mural-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px dashed var(--color-border-strong);
}

.mural-head strong {
  display: block;
  line-height: 1.2;
}

.mural-head .muted {
  font-size: var(--text-sm);
}

.mural-head .status-swap {
  margin-left: auto;
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  font-weight: 750;
  font-size: var(--text-sm);
  color: #ffffff;
  background: var(--brand-primary);
}

.avatar.tone-secondary {
  background: color-mix(in srgb, var(--brand-secondary) 75%, #000000);
}

.avatar.tone-accent {
  background: color-mix(in srgb, var(--brand-accent) 75%, #000000);
}

.avatar-sm {
  width: 2.1rem;
  height: 2.1rem;
  font-size: var(--text-xs);
}

.recado {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--color-surface-2);
  border: 1px solid transparent;
}

.recado p {
  margin: 0;
  font-size: var(--text-sm);
}

.recado-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}

.recado-meta .muted {
  font-size: var(--text-xs);
}

.recado-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  font-size: var(--text-xs);
  font-weight: 650;
  background: var(--color-surface);
}

.chip-primary {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--brand-on-primary);
}

/* O recado em destaque chega pendente e é aprovado pelo titular. */
.recado-incoming {
  background: var(--color-surface);
  border: 1.5px dashed color-mix(in srgb, var(--color-warning) 55%, transparent);
  transform: rotate(-1.2deg);
  box-shadow: var(--shadow);
}

/* Os dois selos ocupam a mesma célula; a troca é só de opacidade. */
.status-swap {
  display: inline-grid;
}

.status-swap > * {
  grid-area: 1 / 1;
}

.mural .when-approved {
  opacity: 0;
}

.recado-incoming .recado-actions {
  max-height: 3rem;
  overflow: hidden;
}

.recado-incoming {
  animation: recado-arrive 900ms var(--ease) 300ms both, recado-settle 600ms var(--ease) 3.4s forwards;
}

.mural .when-pending {
  animation: fade-out 250ms var(--ease) 3.4s forwards;
}

.mural .when-approved {
  animation: fade-in 250ms var(--ease) 3.5s forwards;
}

.recado-incoming .recado-actions {
  animation: collapse 450ms var(--ease) 3.1s forwards;
}


@keyframes recado-arrive {
  from {
    opacity: 0;
    transform: translateY(-18px) rotate(-4deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(-1.2deg);
  }
}

@keyframes recado-settle {
  to {
    transform: rotate(0deg);
    border-color: transparent;
    background: var(--color-surface-2);
    box-shadow: none;
  }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes fade-in {
  to { opacity: 1; }
}

@keyframes collapse {
  to {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
  }
}

.mural-caption {
  margin: var(--space-3) 0 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}

/* Seções */
.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section-alt {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
}

.section-head {
  max-width: 40rem;
  margin-bottom: var(--space-6);
}

.section-head h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.035em;
  font-weight: 800;
}

.section-head p {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  margin: 0;
}

/* Fluxo do recado: sequência real, por isso numerada. */
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  counter-reset: flow;
  list-style: none;
  margin: 0;
  padding: 0;
}

.flow li {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  counter-increment: flow;
}

.flow li::before {
  content: counter(flow);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--brand-on-primary);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-sm);
}

.flow h3 {
  margin-bottom: var(--space-2);
}

.flow p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.flow .status-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Recursos */
.features {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
}

.feature {
  grid-column: span 2;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.feature:hover {
  border-color: var(--color-border-strong);
}

.feature-wide {
  grid-column: span 3;
}

.feature-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  font-size: 1.15rem;
  color: var(--icon-fg, var(--color-primary-text));
  background: var(--icon-bg, var(--color-primary-soft));
}

.feature-icon.tone-secondary {
  --icon-fg: var(--color-secondary-text);
  --icon-bg: var(--color-secondary-soft);
}

.feature-icon.tone-accent {
  --icon-fg: var(--color-accent-text);
  --icon-bg: var(--color-accent-soft);
}

.feature p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: calc(var(--radius-lg) + 6px);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--brand-accent) 35%, transparent), transparent 55%),
    var(--color-primary);
  color: var(--brand-on-primary);
}

.cta-band h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xl);
  letter-spacing: -0.035em;
}

.cta-band p {
  margin: 0;
  opacity: 0.9;
}

.cta-band .btn {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-text);
  --btn-border: transparent;
}

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

  .mural {
    max-width: 34rem;
  }

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

  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature,
  .feature-wide {
    grid-column: span 1;
  }
}

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

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

  .mural {
    padding: var(--space-4);
  }
}

/* ---------- Páginas de conteúdo ---------- */
.page-head {
  padding-block: clamp(2rem, 5vw, 3.5rem) var(--space-5);
}

.page-head h1 {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
  font-weight: 850;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-3);
}

.page-head p {
  max-width: 42rem;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  margin: 0;
}

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: var(--space-7);
  align-items: start;
  padding-bottom: var(--space-8);
}

.page-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.page-aside h2 {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.page-aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.page-aside a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}

.page-aside a:hover,
.page-aside a[aria-current="page"] {
  color: var(--color-text);
  background: var(--color-primary-soft);
}

.prose {
  max-width: 44rem;
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose h2 {
  margin-top: var(--space-7);
  font-size: var(--text-xl);
}

.prose h3 {
  margin-top: var(--space-5);
}

.prose ul,
.prose ol {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: var(--space-2);
}

.prose p,
.prose li {
  color: color-mix(in srgb, var(--color-text) 88%, var(--color-text-muted));
}

.prose .notice {
  margin-top: 0;
  margin-bottom: var(--space-6);
}

@media (max-width: 860px) {
  .page-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .page-aside {
    position: static;
    order: -1;
  }

  .page-aside ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }
}

/* Lista de status do serviço */
.status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
}

.status-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.status-list li + li {
  border-top: 1px solid var(--color-border);
}

/* ---------- Páginas de erro ---------- */
.error-page {
  display: grid;
  place-items: center;
  padding: clamp(3rem, 10vw, 7rem) 0;
}

.error-card {
  width: min(100%, 34rem);
  text-align: center;
}

.error-code {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
}

.error-card h1 {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  font-weight: 850;
  letter-spacing: -0.04em;
}

.error-card p {
  color: var(--color-text-muted);
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.error-ref {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
}

.debug-trace {
  margin-top: var(--space-5);
  padding: var(--space-4);
  max-height: 24rem;
  overflow: auto;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: var(--radius);
  background: var(--color-danger-soft);
  color: var(--color-text);
}

/* ---------- Rodapé ---------- */
.site-footer {
  margin-top: auto;
  padding-block: var(--space-7) var(--space-5);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.footer-about p {
  max-width: 22rem;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.footer-title {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.footer-links {
  display: grid;
  gap: var(--space-2);
}

.footer-links a {
  color: var(--color-text);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-primary-text);
  text-decoration: underline;
}

.social-links {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.social-links a {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

.social-links a:hover {
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-about {
    grid-column: 1 / -1;
  }
}

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

/* ---------- Skeleton e estado vazio (reutilizáveis nas próximas fases) ---------- */
.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-border) 37%, var(--color-surface-2) 63%);
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
}

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

.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.empty-state > i {
  font-size: 1.6rem;
  color: var(--color-primary-text);
}

/* ---------- Movimento reduzido ----------
 * As animações seguem a preferência do site (html[data-motion], escolhida em "Reduzir animações"),
 * e não a do sistema: no Windows com "efeitos de animação" desligados, os navegadores pedem movimento
 * reduzido e o site ficaria sem nenhuma animação. */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Seção que continua a anterior (mesmo fundo): evita espaçamento dobrado. */
.section-flush-top {
  padding-top: 0;
}

/* ==========================================================================
   Fase 2 — formulários, autenticação e configurações da conta
   ========================================================================== */

.btn-block {
  width: 100%;
}

/* ---------- Formulários ---------- */
.form {
  display: grid;
  gap: var(--space-4);
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field-label {
  font-weight: 650;
  font-size: var(--text-sm);
}

.field-optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.field-help {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.input-wrap {
  position: relative;
}

.input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.input:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--color-border-strong));
}

.input:focus,
.input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.has-toggle .input {
  padding-right: 3rem;
}

.input-toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transform: translateY(-50%);
}

.input-toggle:hover {
  color: var(--color-text);
  background: var(--color-primary-soft);
}

.has-error .input {
  border-color: var(--color-danger);
}

.has-error .input:focus {
  box-shadow: 0 0 0 4px var(--color-danger-soft);
}

.field-error {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  margin: 0;
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: 600;
}

.checkbox {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-sm);
}

.checkbox input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--brand-primary);
}

.form-alert {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--color-danger-soft);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  font-size: var(--text-sm);
}

.form-alert:focus {
  outline: 3px solid color-mix(in srgb, var(--color-danger) 55%, transparent);
  outline-offset: 2px;
}

.form-alert > i {
  margin-top: 0.25rem;
  color: var(--color-danger);
}

.form-alert p {
  margin: 0 0 var(--space-1);
}

.form-alert ul {
  margin: 0;
  padding-left: 1.1rem;
}

.form-alert a {
  color: inherit;
  font-weight: 650;
}

.form-aside-link {
  margin: calc(var(--space-2) * -1) 0 0;
  text-align: right;
  font-size: var(--text-sm);
}

button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.75;
}

/* ---------- Telas de autenticação ---------- */
.auth-shell {
  display: grid;
  justify-content: center;
  grid-template-columns: minmax(0, 27rem);
  gap: var(--space-6);
  align-items: start;
  padding-block: clamp(2rem, 6vw, 4.5rem);
}

.auth-shell.has-aside {
  grid-template-columns: minmax(0, 28rem) minmax(0, 20rem);
}

.auth-card {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: calc(var(--radius-lg) + 4px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.auth-head {
  margin-bottom: var(--space-5);
}

.auth-head h1 {
  margin-bottom: var(--space-2);
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.1rem);
  font-weight: 850;
  letter-spacing: -0.04em;
}

.auth-head p {
  margin: 0;
  color: var(--color-text-muted);
}

.auth-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  font-size: 1.25rem;
}

.auth-switch {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.auth-aside {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border-strong);
  font-size: var(--text-sm);
}

.auth-aside h2 {
  font-size: var(--text-base);
}

.steps {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding-left: 1.2rem;
}

.steps li::marker {
  color: var(--color-primary-text);
  font-family: var(--font-mono);
  font-weight: 700;
}

.checklist {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.checklist i {
  width: 1.2rem;
  color: var(--color-primary-text);
}

@media (max-width: 860px) {
  .auth-shell.has-aside {
    grid-template-columns: minmax(0, 28rem);
  }
}

/* ---------- Mensagens de status ---------- */
.flash-wrap {
  padding-top: var(--space-4);
}

.flash {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: 0.75rem var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
}

.flash p {
  flex: 1;
  margin: 0;
}

.flash-success {
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
  background: var(--color-success-soft);
}

.flash-success > i {
  color: var(--color-success);
}

.flash-warning {
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
  background: var(--color-warning-soft);
}

.flash-warning > i {
  color: var(--color-warning);
}

.flash-danger {
  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
  background: var(--color-danger-soft);
}

.flash-danger > i {
  color: var(--color-danger);
}

.flash-info > i {
  color: var(--color-primary-text);
}

.flash-close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.flash-close:hover {
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.verify-banner {
  background: var(--color-warning-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent);
  font-size: var(--text-sm);
}

.verify-banner .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding-block: 0.55rem;
}

.verify-banner i {
  color: var(--color-warning);
}

.verify-banner a {
  font-weight: 650;
  color: inherit;
}

/* ---------- Menu do usuário ---------- */
.user-menu {
  position: relative;
}

.user-menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.6rem 0.25rem 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 650;
  cursor: pointer;
}

.user-menu-button:hover,
.user-menu-button[aria-expanded="true"] {
  border-color: var(--color-border-strong);
}

.user-menu-button .fa-chevron-down {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  transition: transform var(--dur) var(--ease);
}

.user-menu-button[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

.user-menu-name {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 60;
  min-width: 15rem;
  padding: var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.dropdown[hidden] {
  display: none;
}

.dropdown-head {
  display: grid;
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.55rem var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.dropdown-item i {
  width: 1rem;
  color: var(--color-text-muted);
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  color: var(--color-text);
  background: var(--color-primary-soft);
}

.dropdown-form {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.mobile-user {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin: 0 0 var(--space-2);
  padding: var(--space-2) 0.9rem var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Configurações da conta ---------- */
.settings-layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding-bottom: var(--space-8);
}

.settings-nav ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.settings-nav a {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
}

.settings-nav a:hover,
.settings-nav a[aria-current="page"] {
  color: var(--color-text);
  background: var(--color-primary-soft);
}

.settings-content {
  display: grid;
  gap: var(--space-5);
}

.panel {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.panel > h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
}

.panel .form {
  max-width: 28rem;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.panel-head h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.panel-note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
}

.data-list {
  display: grid;
  margin: 0;
}

.data-list > div {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.data-list > div:last-child {
  border-bottom: 0;
}

.data-list dt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.data-list dd {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  overflow-wrap: anywhere;
}

.device-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.device {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.device-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius);
  background: var(--color-surface-2);
  color: var(--color-primary-text);
}

.device-info {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: center;
  min-width: 0;
}

.device-info .muted {
  flex-basis: 100%;
  font-size: var(--text-xs);
}

@media (max-width: 760px) {
  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .settings-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .data-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .device {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   Fase 3 — perfil, amizades, busca e configurações
   ========================================================================== */

/* ---------- Avatares ---------- */
img.avatar {
  object-fit: cover;
  background: var(--color-surface-2);
}

.avatar.tone-primary {
  background: var(--brand-primary);
}

.avatar-lg {
  width: 4rem;
  height: 4rem;
  font-size: 1.15rem;
}

.avatar-xl {
  width: 8rem;
  height: 8rem;
  font-size: 2.4rem;
  letter-spacing: -0.02em;
}

/* ---------- Cabeçalho: busca e contadores ---------- */
.header-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 16rem;
}

.header-search i {
  position: absolute;
  left: 0.85rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  pointer-events: none;
}

.header-search input {
  width: 100%;
  min-height: 2.4rem;
  padding: 0.4rem 0.9rem 0.4rem 2.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
}

.header-search input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.nav-badge,
.count {
  display: inline-grid;
  place-items: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.count {
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
}

.mobile-search {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

@media (max-width: 1000px) {
  .header-search {
    flex-basis: 11rem;
  }
}

/* ---------- Abas ---------- */
.tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 1rem;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-weight: 650;
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}

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

.tabs a[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

.tabs-pill {
  margin-bottom: var(--space-4);
}

.tabs-pill a {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
}

.tabs-pill a[aria-current="page"] {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* ---------- Perfil ---------- */
.profile-hero {
  padding-top: var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.profile-cover {
  position: relative;
  aspect-ratio: 3 / 1;
  max-height: 20rem;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--brand-secondary) 45%, transparent), transparent 60%),
    radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--brand-accent) 40%, transparent), transparent 55%),
    var(--brand-primary);
}

.profile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-5);
  padding: var(--space-3) var(--space-4) var(--space-4);
  position: relative;
}

/* Só o avatar sobe sobre a capa; nome e ações ficam abaixo dela. */
.profile-avatar {
  margin-top: -5.5rem;
}

.profile-avatar .avatar-xl {
  border: 5px solid var(--color-surface);
  box-shadow: var(--shadow);
}

.profile-names {
  flex: 1 1 14rem;
  min-width: 0;
  padding-bottom: var(--space-2);
}

.profile-names h1 {
  margin: 0;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);
  font-weight: 850;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}

.profile-names p {
  margin: var(--space-1) 0 0;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
}

.profile-actions form {
  margin: 0;
}

.more-menu {
  position: relative;
}

.dropdown-form-inline {
  margin: 0;
}

.dropdown-item.item-danger,
.dropdown-item.item-danger i {
  color: var(--color-danger);
}

.profile-body {
  padding-block: var(--space-6) var(--space-8);
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.profile-bio {
  white-space: normal;
  overflow-wrap: anywhere;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.chips .chip {
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--color-surface-2);
  border-color: var(--color-border);
}

.profile-meta {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.profile-meta i {
  width: 1.1rem;
  color: var(--color-primary-text);
}

.profile-meta a {
  overflow-wrap: anywhere;
}

.friend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.friend-grid a {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.friend-grid a:hover {
  background: var(--color-surface-2);
}

.friend-grid span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-state h2,
.empty-state h3 {
  margin: 0;
  font-size: var(--text-lg);
}

.empty-state p {
  margin: 0;
  max-width: 30rem;
}

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

@media (max-width: 560px) {
  /* Mesma proporção das capas enviadas (3:1): a imagem inteira cabe na largura do celular. */
  .profile-cover {
    aspect-ratio: 3 / 1;
    border-radius: var(--radius);
  }

  .profile-identity {
    padding-inline: var(--space-2);
  }

  .profile-avatar {
    margin-top: -2.75rem;
  }

  .avatar-xl {
    width: 5rem;
    height: 5rem;
    font-size: 1.5rem;
  }
}

/* ---------- Listas de pessoas ---------- */
.people-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.person {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.person:last-child {
  border-bottom: 0;
}

.person-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 14rem;
  color: var(--color-text);
  text-decoration: none;
}

a.person-link:hover strong {
  color: var(--color-primary-text);
}

.person-text {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.person-text strong,
.person-text .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-text .muted {
  font-size: var(--text-sm);
}

.person-actions {
  display: flex;
  gap: var(--space-2);
}

.person-actions form {
  margin: 0;
}

.friends-panel {
  margin-bottom: var(--space-8);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
}

/* ---------- Busca ---------- */
.search-form {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.search-form .input-wrap {
  flex: 1;
}

.search-form + .panel {
  margin-bottom: var(--space-8);
}

/* ---------- Formulários extras ---------- */
.textarea {
  min-height: 6rem;
  resize: vertical;
  line-height: 1.5;
}

.btn-danger {
  --btn-bg: var(--color-danger);
  --btn-fg: #ffffff;
  --btn-border: transparent;
}

.btn-danger:hover {
  --btn-bg: color-mix(in srgb, var(--color-danger) 85%, #000000);
  --btn-fg: #ffffff;
  border-color: transparent;
}

.panel-danger {
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
}

.panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.choice-group {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  min-width: 0;
}

fieldset.choice-group {
  border: 1px solid var(--color-border);
}

.form fieldset.choice-group {
  padding: 0;
  border: 0;
}

/* Legenda dentro do painel (não sobre a borda do fieldset). */
.choice-legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-1);
  padding: 0;
  font-size: var(--text-lg);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  cursor: pointer;
}

.choice:hover {
  border-color: var(--color-border-strong);
}

.choice:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.choice input {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--brand-primary);
}

.choice-card > span:last-child {
  display: grid;
  line-height: 1.4;
}

.choice-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-primary-text);
}

/* ---------- Foto e capa ---------- */
.cover-preview {
  position: relative;
  aspect-ratio: 3 / 1;
  margin-bottom: 3.5rem;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--brand-secondary) 45%, transparent), transparent 60%),
    var(--brand-primary);
}

.cover-preview > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.cover-preview-avatar {
  position: absolute;
  left: var(--space-5);
  bottom: -3rem;
}

.cover-preview-avatar .avatar-xl {
  width: 6.5rem;
  height: 6.5rem;
  font-size: 2rem;
  border: 4px solid var(--color-surface);
}

.upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.upload-box {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
}

.upload-box form {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.upload-box-wide {
  grid-column: 1 / -1;
}

.upload-remove {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.file-input {
  max-width: 100%;
  font: inherit;
  font-size: var(--text-sm);
}

.file-input::file-selector-button {
  margin-right: var(--space-3);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.upload-actions {
  display: flex;
  gap: var(--space-2);
}

.range {
  width: 100%;
  accent-color: var(--brand-primary);
}

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

}

/* ---------- Denúncias enviadas ---------- */
.report-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

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

.upload-box form .btn {
  justify-self: start;
}

.choice-legend + * {
  clear: both;
}

/* ==========================================================================
   Fase 4 — linha do tempo, publicações, comentários e notificações
   ========================================================================== */

.select {
  min-height: 2.6rem;
  padding: 0.45rem 2.2rem 0.45rem 0.85rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23716d88' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.85rem center / 0.65rem;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  appearance: none;
  cursor: pointer;
}

.select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary-text);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.inline-form {
  display: inline;
  margin: 0;
}

.section-title {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.narrow-page {
  max-width: 46rem;
  padding-bottom: var(--space-8);
}

.page-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.page-head-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.page-head-actions form {
  margin: 0;
}

.quote {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* ---------- Cabeçalho: sino ---------- */
.bell {
  position: relative;
}

.bell-badge {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  min-width: 1.15rem;
  height: 1.15rem;
  font-size: 0.65rem;
  border: 2px solid var(--color-bg);
}

.bell[aria-current="page"] {
  background: var(--color-primary-soft);
}

/* ---------- Linha do tempo ---------- */
.feed-layout {
  display: grid;
  grid-template-columns: minmax(0, 40rem) minmax(0, 17rem);
  justify-content: center;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-8);
}

.feed-main {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.feed {
  display: grid;
  gap: var(--space-4);
}

.feed[aria-busy="true"] {
  opacity: 0.7;
}

.feed-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  align-self: start;
}

.feed-me {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}

.feed-me span {
  display: grid;
  line-height: 1.3;
}

.feed-me .muted {
  font-size: var(--text-sm);
}

.feed-links {
  display: grid;
  gap: 2px;
  margin: var(--space-4) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.feed-links a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.feed-links a:hover {
  background: var(--color-primary-soft);
}

.feed-links i {
  width: 1.1rem;
  color: var(--color-primary-text);
}

.feed-end {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: var(--text-sm);
}

.load-more .btn[aria-busy="true"] {
  pointer-events: none;
}

.load-more-error {
  margin: 0 0 var(--space-2);
  text-align: center;
  color: var(--color-danger);
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  .feed-layout {
    grid-template-columns: minmax(0, 40rem);
  }

  .feed-aside {
    display: none;
  }
}

/* ---------- Caixa de publicação ---------- */
.composer {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.composer .form-alert {
  margin: 0;
}

.composer-main {
  display: flex;
  gap: var(--space-3);
}

.composer-field {
  flex: 1;
  min-width: 0;
}

.composer-text {
  min-height: 4.5rem;
  border-color: transparent;
  background: var(--color-surface-2);
}

.composer-text:hover {
  border-color: var(--color-border);
}

.composer .field-counter {
  margin-top: var(--space-1);
  text-align: right;
}

.composer-files:empty {
  display: none;
}

.composer-files {
  margin: 0;
  font-size: var(--text-sm);
}

.composer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.composer-attach {
  cursor: pointer;
}

input[data-file-input]:focus-visible + .select,
.composer-attach:has(+ input:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.composer-submit {
  margin-left: auto;
}

/* ---------- Cartão de publicação ---------- */
.post {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.post:target {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.post-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.post-avatar {
  flex: none;
}

.post-meta {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.post-author {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.post-author:hover {
  text-decoration: underline;
}

.post-meta .muted {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.post-time {
  color: inherit;
  text-decoration: none;
}

.post-time:hover {
  text-decoration: underline;
}

.post-visibility i {
  font-size: 0.75rem;
}

.post-body {
  margin-top: var(--space-3);
  font-size: 1.02rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.mention {
  font-weight: 600;
  text-decoration: none;
}

.mention:hover {
  text-decoration: underline;
}

.post-media {
  display: grid;
  gap: 4px;
  margin-top: var(--space-3);
  overflow: hidden;
  border-radius: var(--radius);
}

.post-media a {
  display: block;
  background: var(--color-surface-2);
}

.post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-media.count-1 img {
  height: auto;
  max-height: 32rem;
  object-fit: contain;
  background: var(--color-surface-2);
}

.post-media.count-2,
.post-media.count-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.post-media.count-2 a,
.post-media.count-4 a {
  aspect-ratio: 1;
}

.post-media.count-3 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 3 / 2;
}

.post-media.count-3 a:first-child {
  grid-row: 1 / 3;
}

.post-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.post-actions form {
  margin: 0;
}

.post-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.4rem;
  padding: 0.35rem 0.8rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.post-action:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.post-action.is-active {
  color: var(--color-accent-text);
}

.post-action.is-active i {
  color: var(--color-accent);
}

.post-action.is-static {
  cursor: default;
}

.post-action.is-static:hover {
  background: transparent;
}

.post-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.post-action.is-active i {
  animation: like-pop 320ms var(--ease);
}


@keyframes like-pop {
  40% { transform: scale(1.35); }
}

@media (max-width: 560px) {
  .post {
    padding: var(--space-4);
  }
}

/* ---------- Página da publicação e comentários ---------- */
.post-page {
  display: grid;
  gap: var(--space-4);
  max-width: 42rem;
  padding-block: var(--space-6) var(--space-8);
}

.comments h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
}

.comment-list,
.comment-replies {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--space-3);
}

.comment:target .comment-bubble {
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.comment-removed {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-sm);
}

.comment-replies {
  grid-column: 2;
  margin: var(--space-3) 0 0;
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-border);
}

.comment-bubble {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-surface-2);
}

.comment-author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

.comment-author a {
  color: var(--color-text);
  text-decoration: none;
}

.badge-author {
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
}

.comment-body {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.comment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-1);
  padding-left: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.comment-actions a,
.comment-actions .link-button,
.reply-toggle summary {
  color: var(--color-text-muted);
  font-weight: 650;
  font-size: var(--text-xs);
}

.reply-toggle summary {
  cursor: pointer;
  list-style: none;
}

.reply-toggle summary::-webkit-details-marker {
  display: none;
}

.reply-toggle[open] {
  flex-basis: 100%;
}

.reply-form {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  justify-items: start;
}

.reply-form .textarea {
  min-height: 3.5rem;
}

.comment-form {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.comment-login {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

/* ---------- Notificações ---------- */
.notification-panel {
  padding: var(--space-2);
}

.notification-panel .empty-state {
  border: 0;
}

.notification-panel > .btn {
  margin: var(--space-2) 0 var(--space-1);
}

.notification-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notification-list form {
  margin: 0;
}

.notification {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notification:hover {
  background: var(--color-surface-2);
}

.notification.is-unread {
  background: var(--color-primary-soft);
}

.notification-avatar {
  position: relative;
  flex: none;
}

.notification-icon {
  position: absolute;
  right: -0.3rem;
  bottom: -0.3rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--brand-on-primary);
  font-size: 0.6rem;
}

.notification-icon.type-post_like {
  background: var(--color-accent);
  color: #ffffff;
}

.notification-icon.type-friend_request,
.notification-icon.type-friend_accepted {
  background: color-mix(in srgb, var(--brand-secondary) 80%, #000000);
  color: #ffffff;
}

.notification-text {
  display: grid;
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.notification-text time {
  font-size: var(--text-xs);
}

.unread-dot {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-primary);
}

/* ---------- Perfil: publicações ---------- */
.profile-posts {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.profile-posts .section-title {
  margin: 0;
}

.profile-side {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

/* ==========================================================================
   Fase 5 — recados no perfil
   ========================================================================== */

.btn-sm {
  min-height: 2.1rem;
  padding: 0.35rem 0.8rem;
  font-size: var(--text-xs);
}

.link-muted {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 650;
}

.recados {
  display: grid;
  gap: var(--space-4);
  max-width: 46rem;
}

.recados-head h2 {
  margin-bottom: var(--space-1);
  font-size: var(--text-xl);
}

.recados-head p {
  margin: 0;
  font-size: var(--text-sm);
}

.recados .tabs-pill {
  margin: 0;
}

.recado-compose h2,
.recados .panel > h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
}

.recado-compose .form {
  gap: var(--space-2);
}

.recado-compose .field-help i {
  color: var(--color-primary-text);
}

.recado-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.recado-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--color-surface-2);
  border: 1px solid transparent;
}

.recado-item:target {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

/* Pendente: borda tracejada, como na ilustração da página inicial. */
.recado-item.is-pending {
  background: var(--color-surface);
  border: 1.5px dashed color-mix(in srgb, var(--color-warning) 55%, transparent);
}

.recado-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
}

.recado-head > a {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.recado-head > a:hover {
  text-decoration: underline;
}

.recado-head .muted {
  font-size: var(--text-xs);
}

.recado-body {
  overflow-wrap: anywhere;
}

.recado-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.recado-actions:empty {
  display: none;
}

/* ==========================================================================
   Fase 6 — comunidades e tópicos
   ========================================================================== */

.narrow-content {
  display: grid;
  gap: var(--space-4);
  max-width: 46rem;
}

.subhead {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-base);
}

.community-avatar {
  border-radius: var(--radius);
}

.profile-avatar .community-avatar.avatar-xl {
  border-radius: calc(var(--radius-lg) + 4px);
}

.community-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.post-community {
  color: var(--color-primary-text);
  font-weight: 650;
  text-decoration: none;
}

.post-community:hover {
  text-decoration: underline;
}

.composer-scope {
  font-size: var(--text-sm);
}

.form-fieldset {
  padding: 0;
  border: 0;
}

/* ---------- Descoberta ---------- */
.communities-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: var(--space-6);
  align-items: start;
  padding-bottom: var(--space-8);
}

.community-filters {
  flex-wrap: wrap;
}

.community-filters .input-wrap {
  flex: 1 1 14rem;
}

.community-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color var(--dur) var(--ease);
}

.community-card:hover {
  border-color: var(--color-border-strong);
}

.community-card-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}

.community-card-link:hover strong {
  color: var(--color-primary-text);
}

.community-card-text {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.community-card-text strong {
  overflow-wrap: anywhere;
}

.community-card-text .muted {
  font-size: var(--text-sm);
}

.community-card-desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.community-card .status {
  justify-self: start;
}

.communities-aside {
  display: grid;
  gap: var(--space-4);
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
}

.communities-aside h2 {
  font-size: var(--text-base);
}

.mini-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.mini-list a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: 0.35rem 0.4rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.mini-list a:hover {
  background: var(--color-primary-soft);
}

.mini-list-grid {
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space-2);
}

.mini-list-grid a span {
  display: grid;
  line-height: 1.3;
}

.mini-list-grid .muted {
  font-size: var(--text-xs);
  font-weight: 400;
}

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

  .communities-aside {
    position: static;
    order: -1;
  }
}

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

/* ---------- Regras ---------- */
.rules-heading {
  margin-top: var(--space-2);
  font-size: var(--text-base);
}

.rules-text {
  overflow-wrap: anywhere;
}

.rules-box {
  max-height: 18rem;
  overflow: auto;
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
}

/* ---------- Moderação ---------- */
.invite-form {
  display: flex;
  gap: var(--space-2);
  max-width: 28rem;
}

.invite-form .input {
  flex: 1;
}

.moderation .person-actions {
  flex-wrap: wrap;
}

/* ---------- Tópicos ---------- */
.topics-head {
  align-items: center;
}

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

.topic-panel {
  padding: var(--space-2);
}

.topic-panel .empty-state {
  border: 0;
}

.topic-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
}

.topic-row:hover {
  background: var(--color-surface-2);
}

.topic-link {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
  color: var(--color-text);
  text-decoration: none;
}

.topic-link .muted {
  font-size: var(--text-xs);
}

.topic-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.topic-title strong {
  overflow-wrap: anywhere;
}

.topic-replies {
  flex: none;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.topic-main h2 {
  font-size: var(--text-xl);
  overflow-wrap: anywhere;
}

.topic-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

.topic-mini-list {
  margin-bottom: var(--space-3);
}

.topic-mini-list a {
  flex: 1;
}

.topic-mini-list a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Fase 7 — administração
   ========================================================================== */

.admin-head .eyebrow {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}

.admin-layout .settings-nav a .count {
  margin-left: auto;
  background: var(--color-accent);
  color: #ffffff;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-5);
  align-items: start;
}

.tabs-wrap {
  flex-wrap: wrap;
  overflow: visible;
}

.tabs-pill.tabs {
  gap: var(--space-2);
}

.nowrap {
  white-space: nowrap;
}

/* ---------- Indicadores ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.stat-alert {
  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
  background: var(--color-danger-soft);
}

.stat-alert .stat-value {
  color: var(--color-danger);
}

.bar-chart {
  margin: 0;
}

.bar-chart svg {
  display: block;
  width: 100%;
  height: 9rem;
}

.bar-chart .bar {
  fill: var(--brand-primary);
}

.bar-chart .bar-empty {
  fill: var(--color-border);
}

.bar-chart figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

.health-list,
.audit-list,
.admin-list,
.report-queue {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.health-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

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

/* ---------- Tabelas ---------- */
.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.table th {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table tbody tr:hover {
  background: var(--color-surface-2);
}

.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table td p {
  margin: 0;
}

.table-person {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 12rem;
  color: var(--color-text);
  text-decoration: none;
}

.table-person:hover strong {
  color: var(--color-primary-text);
}

.audit-meta {
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

/* ---------- Filtros ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.filter-bar .input {
  flex: 1 1 14rem;
}

.filter-bar .select {
  flex: 0 1 auto;
  width: auto;
}

/* ---------- Denúncias ---------- */
.report-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
}

.report-row:hover {
  background: var(--color-surface-2);
}

.report-queue li + li {
  border-top: 1px solid var(--color-border);
}

.report-count {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-family: var(--font-mono);
  font-weight: 700;
}

.report-main {
  display: grid;
  flex: 1;
  gap: var(--space-1);
  min-width: 0;
}

.report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: center;
  font-size: var(--text-xs);
}

.report-excerpt {
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
}

.report-date {
  flex: none;
  font-size: var(--text-xs);
}

.reported-content {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-border-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--color-surface-2);
  overflow-wrap: anywhere;
}

.audit-list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

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

.audit-list li p {
  flex-basis: 100%;
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- Comunidades ---------- */
.admin-list-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-list-item:last-child {
  border-bottom: 0;
}

.admin-list-main {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  flex: 1 1 18rem;
  font-size: var(--text-sm);
}

.admin-list-main .status {
  justify-self: start;
  text-decoration: none;
}

.admin-danger-zone summary {
  list-style: none;
  cursor: pointer;
}

.admin-danger-zone summary::-webkit-details-marker {
  display: none;
}

.admin-danger-zone[open] {
  flex-basis: 100%;
}

.admin-danger-zone .form {
  margin-top: var(--space-3);
  max-width: 32rem;
}

/* ---------- Configurações ---------- */
.brand-upload {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
}

.brand-upload > div:last-child {
  display: grid;
  gap: var(--space-2);
  flex: 1 1 16rem;
}

.brand-preview {
  display: grid;
  place-items: center;
  flex: none;
  width: 8rem;
  height: 5rem;
  padding: var(--space-2);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface-2);
}

.brand-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.brand-preview-favicon {
  width: 5rem;
}

.brand-preview-social {
  width: 12rem;
  height: 6.3rem;
  padding: 0;
  overflow: hidden;
}

.brand-preview-social img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.inline-form .input {
  flex: 1 1 14rem;
}

.color-field {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.input-color {
  width: 4rem;
  height: 2.6rem;
  padding: 0.2rem;
  cursor: pointer;
}

/* ---------- Verificação em duas etapas ---------- */
.mfa-steps {
  display: grid;
  gap: var(--space-5);
  margin: 0 0 var(--space-4);
  padding-left: 1.2rem;
}

.mfa-steps > li > strong {
  display: inline-block;
  margin-bottom: var(--space-2);
}

.qr-box {
  display: grid;
  place-items: center;
  width: fit-content;
  margin: var(--space-2) 0;
  padding: var(--space-2);
  border-radius: var(--radius);
  background: #ffffff;
  border: 1px solid var(--color-border);
}

.qr {
  display: block;
  width: 11rem;
  height: 11rem;
}

.secret-key {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
  user-select: all;
}

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.recovery-codes li {
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  text-align: center;
  user-select: all;
}

@media (max-width: 640px) {
  .report-date {
    display: none;
  }

  .filter-bar .select,
  .filter-bar .btn {
    flex: 1 1 auto;
  }
}

/* Conteúdo das telas com tabelas largas: a coluna não cresce além da tela (a tabela rola dentro do .table-wrap). */
.settings-content {
  grid-template-columns: minmax(0, 1fr);
}

.filter-bar .select {
  max-width: 100%;
}

/* ==========================================================================
   Fase 8 — polimento
   ========================================================================== */

/* Cartões provisórios enquanto o "carregar mais" busca a próxima página. */
.skeleton-post {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.skeleton-avatar {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  grid-row: span 2;
}

.skeleton-line {
  height: 0.85rem;
  align-self: center;
}

.skeleton-short {
  width: 55%;
}

/* Avisos do sistema (moderação) na central de notificações: sem autor. */
.notification-system {
  display: inline-grid;
  place-items: center;
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
}

.moderation-case p {
  overflow-wrap: anywhere;
}

.appeal-form summary {
  list-style: none;
  cursor: pointer;
  width: fit-content;
}

.appeal-form summary::-webkit-details-marker {
  display: none;
}

.appeal-form .form {
  margin-top: var(--space-4);
}

/* ==========================================================================
   Redesenho 2026-10 — app em três colunas, cabeçalho com ícones, idiomas
   ========================================================================== */

:root {
  --radius-xl: 24px;
  --card-pad: 1.25rem;
  --app-width: 1320px;
}

/* ---------- Cabeçalho ---------- */
.site-header.is-app .header-inner {
  gap: var(--space-4);
}

.site-header.is-app .header-search {
  flex: 1 1 22rem;
  max-width: 30rem;
}

.header-search input {
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
}

.icon-nav ul {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.icon-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: 1.15rem;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.icon-link:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

.icon-link[aria-current="page"] {
  color: var(--color-primary-text);
  background: var(--color-primary-soft);
}

.icon-link .nav-badge {
  position: absolute;
  top: 0.2rem;
  right: 0.15rem;
  min-width: 1.15rem;
  height: 1.15rem;
  font-size: 0.65rem;
  box-shadow: 0 0 0 2px var(--color-surface);
}

.header-divider {
  width: 1px;
  height: 1.75rem;
  background: var(--color-border-strong);
}

.lang-button {
  gap: 0.35rem;
  min-height: 2.5rem;
  padding-inline: 0.65rem;
}

.lang-code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lang-menu {
  position: relative;
}

.dropdown-compact {
  min-width: 12rem;
}

.dropdown-item[aria-current="true"] {
  font-weight: 700;
}

.dropdown-spacer {
  display: inline-block;
  width: 1em;
}

.mobile-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.mobile-langs a[aria-current="true"] {
  font-weight: 700;
  color: var(--color-text);
}

.show-mobile {
  display: none;
}

@media (max-width: 760px) {
  .show-mobile {
    display: inline-flex;
  }
}

/* ---------- Grade do app ---------- */
.container.app-grid {
  max-width: var(--app-width);
}

.app-grid {
  display: grid;
  grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-5) var(--space-8);
}

.app-left,
.app-right {
  display: grid;
  gap: var(--space-4);
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  max-height: calc(100vh - var(--header-h) - var(--space-5));
  overflow-y: auto;
  scrollbar-width: none;
}

.app-left::-webkit-scrollbar,
.app-right::-webkit-scrollbar {
  display: none;
}

.app-main {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.app-grid .card {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.card-head h2 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 750;
}

.card-head > a.muted {
  font-size: var(--text-sm);
  text-decoration: none;
}

.card-head > a.muted:hover {
  color: var(--color-primary-text);
}

/* ---------- Cartão do perfil ---------- */
.me-card {
  overflow: hidden;
  padding: 0 0 var(--space-4);
}

.me-card-cover {
  height: 5.75rem;
  background:
    radial-gradient(120% 140% at 0% 100%, transparent 54%, rgb(255 255 255 / 0.22) 55%, transparent 57%),
    radial-gradient(120% 140% at 0% 100%, transparent 64%, rgb(255 255 255 / 0.16) 65%, transparent 67%),
    radial-gradient(120% 140% at 0% 100%, transparent 74%, rgb(255 255 255 / 0.12) 75%, transparent 77%),
    linear-gradient(120deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 55%, var(--brand-accent)) 60%, var(--brand-secondary));
}

.me-card-cover.has-image {
  background: var(--color-surface-2);
}

.me-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.me-card-identity {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin-top: -2rem;
  padding-inline: var(--card-pad);
  color: var(--color-text);
  text-decoration: none;
}

.me-card-avatar .avatar {
  box-shadow: 0 0 0 4px var(--color-surface);
}

.me-card-names {
  display: grid;
  min-width: 0;
  padding-bottom: 0.15rem;
  line-height: 1.3;
}

.me-card-names strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-card-names .muted {
  font-size: var(--text-sm);
}

.me-card-identity:hover strong {
  color: var(--color-primary-text);
}

.me-card-bio {
  margin: var(--space-3) var(--card-pad) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.me-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-4) var(--card-pad) 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.me-stats > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.1rem;
}

.me-stats dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.me-stats dd {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.me-stats a {
  color: var(--color-text);
  text-decoration: none;
}

.me-stats a:hover {
  color: var(--color-primary-text);
}

/* ---------- Navegação lateral ---------- */
.side-nav {
  padding: var(--space-3);
}

.side-nav ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius);
  color: var(--color-text);
  font-weight: 650;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.side-nav a > i {
  width: 1.15rem;
  color: var(--color-text-muted);
  text-align: center;
}

.side-nav a > span:not(.count):not(.sr-only) {
  flex: 1;
}

.side-nav a:hover {
  background: var(--color-surface-2);
}

.side-nav a[aria-current="page"] {
  background: var(--color-text);
  color: var(--color-bg);
}

.side-nav a[aria-current="page"] > i {
  color: inherit;
}

.side-nav .count {
  background: var(--color-accent);
  color: #ffffff;
}

/* ---------- Faixa de amigos ---------- */
.people-strip {
  padding: var(--card-pad);
}

.people-strip-list {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0 0 var(--space-1);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  list-style: none;
  scrollbar-width: thin;
}

.people-strip-list > li {
  flex: none;
  scroll-snap-align: start;
}

.strip-person {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  width: 4.75rem;
  color: var(--color-text);
  text-decoration: none;
}

.strip-ring {
  display: grid;
  place-items: center;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--brand-primary), var(--brand-accent), color-mix(in srgb, var(--brand-accent) 50%, #f5b544), var(--brand-secondary), var(--brand-primary));
  transition: transform var(--dur) var(--ease);
}

.strip-ring .avatar {
  box-shadow: 0 0 0 3px var(--color-surface);
}

.strip-person:hover .strip-ring {
  transform: translateY(-2px);
}

.strip-add .strip-ring {
  background: var(--color-border-strong);
}

.strip-plus {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--color-surface-2);
  box-shadow: 0 0 0 3px var(--color-surface);
  color: var(--color-primary-text);
  font-size: 1.2rem;
}

.strip-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: 650;
}

.strip-empty {
  align-self: center;
  max-width: 24rem;
  font-size: var(--text-sm);
}

/* ---------- Filtros do feed ---------- */
.feed-tabs {
  display: flex;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  overflow-x: auto;
}

.feed-tabs a {
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.feed-tabs a:hover {
  color: var(--color-text);
}

.feed-tabs a[aria-current="page"] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* ---------- Publicações e caixa de publicar ---------- */
.app-main .composer,
.app-main .post,
.app-main .empty-state {
  border-radius: var(--radius-xl);
}

.app-main .post {
  padding: var(--card-pad) calc(var(--card-pad) + 0.25rem);
  transition: box-shadow var(--dur) var(--ease);
}

.app-main .post:hover {
  box-shadow: var(--shadow);
}

.post-media {
  border-radius: calc(var(--radius-xl) - 8px);
}

.post-actions {
  border-top-style: dashed;
}

.post-action.is-active {
  color: var(--color-accent-text);
  background: var(--color-accent-soft);
}

/* ---------- Colunas laterais ---------- */
.side-card {
  padding: var(--card-pad);
}

.side-empty {
  margin: 0;
  font-size: var(--text-sm);
}

.mini-people,
.mini-communities {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-people li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mini-person,
.mini-communities a {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: var(--color-text);
  text-decoration: none;
}

.mini-person > span,
.mini-communities a > span {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.mini-person strong,
.mini-communities strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

.mini-person .muted,
.mini-communities .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
}

.mini-person:hover strong,
.mini-communities a:hover strong {
  color: var(--color-primary-text);
}

.mini-actions {
  display: flex;
  gap: var(--space-1);
}

.mini-actions form,
.mini-people form {
  margin: 0;
}

.mini-people .btn-pill {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-bg);
}

.mini-people .btn-pill:hover {
  background: color-mix(in srgb, var(--color-text) 85%, var(--brand-primary));
}

.mini-communities .community-avatar {
  border-radius: 14px;
}

.dot-live {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--color-success);
  vertical-align: 0.1em;
}

/* ---------- Explore por interesse ---------- */
.interest-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.interest-tile {
  --tile: var(--brand-primary);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.2rem;
  min-height: 6.5rem;
  padding: var(--space-3) var(--space-2);
  border-radius: 22px;
  background: color-mix(in srgb, var(--tile) 14%, var(--color-surface));
  color: color-mix(in srgb, var(--tile) 70%, var(--color-text));
  text-align: center;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.interest-tile > i {
  font-size: 1.35rem;
  margin-bottom: 0.2rem;
}

.interest-tile strong {
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.2;
}

.interest-tile span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.interest-tile:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--tile) 22%, var(--color-surface));
}

.interest-tile.tone-pink { --tile: #e0457b; }
.interest-tile.tone-violet { --tile: #7c5cf0; }
.interest-tile.tone-amber { --tile: #d98a12; }
.interest-tile.tone-blue { --tile: #2f7fe0; }
.interest-tile.tone-green { --tile: #1f9d68; }

/* ---------- Responsivo ---------- */
@media (max-width: 1200px) {
  .app-grid {
    grid-template-columns: minmax(0, 16.5rem) minmax(0, 1fr);
    grid-template-areas: "left main" "right main";
  }

  .app-left {
    grid-area: left;
    position: static;
    max-height: none;
  }

  .app-right {
    grid-area: right;
    position: static;
    max-height: none;
  }

  .app-main {
    grid-area: main;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 900px) {
  .app-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "right";
    padding-top: var(--space-4);
  }

  .app-left {
    display: none;
  }

  .app-main {
    grid-row: auto;
  }

  .app-right {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    align-items: start;
  }
}

@media (max-width: 1100px) {
  .site-header.is-app .user-menu-name {
    display: none;
  }
}

.container.app-grid {
  width: min(100% - 2rem, var(--app-width));
}

@media (max-width: 760px) {
  .icon-nav,
  .site-header .header-search,
  .header-divider {
    display: none;
  }
}

.me-card-identity {
  align-items: flex-start;
}

.me-card-names {
  padding-top: 2.35rem;
}

.post-avatar,
.post-avatar:hover {
  text-decoration: none;
}

@media (max-width: 1200px) and (min-width: 901px) {
  .app-grid {
    grid-template-rows: auto 1fr;
  }

  .app-left,
  .app-right {
    align-self: start;
  }
}

@media (max-width: 900px) {
  .app-grid {
    grid-template-areas: none;
  }

  .app-main,
  .app-right {
    grid-area: auto;
  }
}

.app-main,
.app-left,
.app-right {
  grid-template-columns: minmax(0, 1fr);
}

@media (hover: none) {
  .people-strip-list {
    scrollbar-width: none;
  }
}

/* ---------- Página inicial: vitrine ---------- */
.hero-art {
  position: relative;
}

.hero-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: 700;
}

.hero-float-a {
  top: 18%;
  left: -1.5rem;
  color: var(--color-accent-text);
}

.hero-float-b {
  bottom: 14%;
  right: -1rem;
  color: var(--color-primary-text);
}

.hero-float {
  animation: float-soft 6s ease-in-out infinite;
}

.hero-float-b {
  animation-delay: -3s;
}


@keyframes float-soft {
  50% { transform: translateY(-6px); }
}

@media (max-width: 900px) {
  .hero-float {
    display: none;
  }
}

.hero-proof {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
}

.hero-proof:hover {
  color: var(--color-primary-text);
}

.avatar-stack {
  display: inline-flex;
}

.avatar-stack .avatar {
  box-shadow: 0 0 0 3px var(--color-bg);
}

.avatar-stack .avatar + .avatar {
  margin-left: -0.6rem;
}

.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.showcase-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.showcase-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow);
}

.showcase-card .community-avatar {
  flex: none;
  border-radius: 18px;
}

.showcase-text {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding-right: 4.5rem;
}

.showcase-text strong {
  font-size: var(--text-lg);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.showcase-text .muted {
  font-size: var(--text-sm);
}

.showcase-desc {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.showcase-type {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

.interest-tiles-wide {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-4);
}

.interest-tiles-wide .interest-tile {
  min-height: 8.5rem;
  border-radius: var(--radius-xl);
}

.interest-tiles-wide .interest-tile > i {
  font-size: 1.6rem;
}

.hero-float-a {
  top: -1.1rem;
  right: 2.5rem;
  left: auto;
}

.hero-float-b {
  right: auto;
  bottom: 3.5rem;
  left: -2.25rem;
}

.section-head.section-head-row {
  max-width: none;
}

.interest-tiles-wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .interest-tiles-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.footer-langs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.footer-langs a {
  color: inherit;
  text-decoration: none;
}

.footer-langs a:hover,
.footer-langs a[aria-current="true"] {
  color: var(--color-text);
  text-decoration: underline;
}

/* ---------- Administração: idiomas ---------- */
.lang-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}

.lang-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.lang-progress progress {
  width: 10rem;
  max-width: 100%;
  height: 0.5rem;
  accent-color: var(--brand-primary);
}

.lang-manage .form + .form {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.lang-manage fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.lang-new {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
}

.lang-new .btn {
  margin-top: 1.75rem;
}

.lang-strings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.lang-strings > li {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.lang-source {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

@media (max-width: 640px) {
  .lang-new {
    grid-template-columns: minmax(0, 1fr);
  }

  .lang-new .btn {
    margin-top: 0;
    justify-self: start;
  }
}

/* ==========================================================================
   Reações animadas e cartões em tons pastel
   ========================================================================== */
:root {
  --r-like: #e11d48;
  --r-love: #db2777;
  --r-haha: #d97706;
  --r-wow: #ea7a0c;
  --r-sad: #0284c7;
  --r-fire: #dc2626;
  --r-like-text: #be123c;
  --r-love-text: #be185d;
  --r-haha-text: #92400e;
  --r-wow-text: #9a3412;
  --r-sad-text: #075985;
  --r-fire-text: #991b1b;
  --tone-sky: #e3edff;
  --tone-sun: #fff4dc;
  --tone-rose: #ffe6ee;
  --tone-mint: #e0f6ec;
  --tone-lilac: #efe7ff;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --r-like-text: #fb7185;
    --r-love-text: #f472b6;
    --r-haha-text: #fbbf24;
    --r-wow-text: #fb923c;
    --r-sad-text: #38bdf8;
    --r-fire-text: #f87171;
    --tone-sky: #1b2236;
    --tone-sun: #2a2416;
    --tone-rose: #2c1a24;
    --tone-mint: #15281f;
    --tone-lilac: #231c36;
  }
}

:root[data-theme="dark"] {
  --r-like-text: #fb7185;
  --r-love-text: #f472b6;
  --r-haha-text: #fbbf24;
  --r-wow-text: #fb923c;
  --r-sad-text: #38bdf8;
  --r-fire-text: #f87171;
  --tone-sky: #1b2236;
  --tone-sun: #2a2416;
  --tone-rose: #2c1a24;
  --tone-mint: #15281f;
  --tone-lilac: #231c36;
}

.r-like { --r: var(--r-like); --r-text: var(--r-like-text); }
.r-love { --r: var(--r-love); --r-text: var(--r-love-text); }
.r-haha { --r: var(--r-haha); --r-text: var(--r-haha-text); }
.r-wow { --r: var(--r-wow); --r-text: var(--r-wow-text); }
.r-sad { --r: var(--r-sad); --r-text: var(--r-sad-text); }
.r-fire { --r: var(--r-fire); --r-text: var(--r-fire-text); }

/* Cartão: fundo pastel, cantos grandes, sem borda. */
.post {
  --post-bg: var(--color-surface);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 0;
  border-radius: 28px;
  background: var(--post-bg);
  box-shadow: none;
}

.post-tone-sky { --post-bg: var(--tone-sky); }
.post-tone-sun { --post-bg: var(--tone-sun); }
.post-tone-rose { --post-bg: var(--tone-rose); }
.post-tone-mint { --post-bg: var(--tone-mint); }
.post-tone-lilac { --post-bg: var(--tone-lilac); }

.post:target {
  box-shadow: 0 0 0 3px var(--color-primary);
}

.post .more-menu > .btn-icon {
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
}

.post-body {
  font-size: 1.05rem;
}

.post-media {
  border-radius: 20px;
  gap: 8px;
}

.post-media a {
  border-radius: 18px;
  overflow: hidden;
}

.post-actions {
  position: relative;
  flex-wrap: wrap;
  align-items: center;
  border-top: 0;
  padding-top: 0;
  gap: var(--space-1) var(--space-2);
}

.post-action:hover {
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}

/* Resumo das reações: ícones empilhados + total */
.reaction-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.4rem;
  padding-inline: 0.3rem 0.6rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.reaction-summary.is-empty .reaction-stack {
  display: none;
}

.reaction-stack {
  display: inline-flex;
}

.reaction-chip {
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-left: -0.35rem;
  border: 2px solid var(--post-bg, var(--color-surface));
  border-radius: 50%;
  background: var(--r);
  color: #ffffff;
  font-size: 0.7rem;
}

.reaction-chip:first-child {
  margin-left: 0;
}

/* Botão principal + seletor */
.reaction {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.reaction-trigger.is-active {
  color: var(--r-text);
}

.reaction-trigger.is-active i {
  color: var(--r);
  animation: none;
}

.reaction-trigger i {
  font-size: 1.05rem;
}

.reaction-trigger[aria-busy="true"] {
  opacity: 0.7;
}

.reaction-picker {
  display: inline-block;
}

.reaction-picker > summary {
  list-style: none;
  padding-inline: 0.55rem;
}

.reaction-picker > summary::-webkit-details-marker {
  display: none;
}

.reaction-menu {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 0.4rem);
  left: -0.25rem;
  margin: 0;
}

.reaction-menu > div {
  display: flex;
  gap: 0.15rem;
  padding: 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 2px 6px rgb(29 27 44 / 0.08), 0 16px 34px -12px rgb(29 27 44 / 0.35);
}

.reaction-option {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.reaction-face {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--r);
  color: #ffffff;
  font-size: 1.15rem;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.12);
}

.reaction-option[aria-pressed="true"] .reaction-face {
  box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--r);
}

.reaction-tip {
  position: absolute;
  bottom: calc(100% + 0.35rem);
  left: 50%;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}

.reaction-option:hover .reaction-tip,
.reaction-option:focus-visible .reaction-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.reaction-option:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
}

/* Ícone que voa do seletor até o botão */
.reaction-float {
  position: fixed;
  z-index: 200;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  margin: -1.15rem 0 0 -1.15rem;
  border-radius: 50%;
  background: var(--r);
  color: #ffffff;
  font-size: 1.1rem;
  pointer-events: none;
  animation: reaction-fly 620ms cubic-bezier(0.5, 0, 0.3, 1) forwards;
}

.reaction-picker[open] .reaction-menu > div {
  animation: reaction-menu-in 260ms var(--ease-spring) both;
  transform-origin: 1.5rem 100%;
}

.reaction-picker[open] .reaction-option {
  animation: reaction-option-in 380ms var(--ease-spring) both;
}

.reaction-picker[open] .reaction-option:nth-child(2) { animation-delay: 30ms; }
.reaction-picker[open] .reaction-option:nth-child(3) { animation-delay: 60ms; }
.reaction-picker[open] .reaction-option:nth-child(4) { animation-delay: 90ms; }
.reaction-picker[open] .reaction-option:nth-child(5) { animation-delay: 120ms; }
.reaction-picker[open] .reaction-option:nth-child(6) { animation-delay: 150ms; }

.reaction-face {
  transition: transform 220ms var(--ease-spring);
}

.reaction-option:hover .reaction-face,
.reaction-option:focus-visible .reaction-face {
  transform: translateY(-7px) scale(1.32);
}

/* Cada reação tem um gesto próprio enquanto está em destaque. */
.reaction-option.r-like:hover i,
.reaction-option.r-like:focus-visible i { animation: r-beat 700ms ease-in-out infinite; }
.reaction-option.r-love:hover i,
.reaction-option.r-love:focus-visible i { animation: r-wobble 900ms ease-in-out infinite; }
.reaction-option.r-haha:hover i,
.reaction-option.r-haha:focus-visible i { animation: r-shake 500ms ease-in-out infinite; }
.reaction-option.r-wow:hover i,
.reaction-option.r-wow:focus-visible i { animation: r-gasp 900ms ease-in-out infinite; }
.reaction-option.r-sad:hover i,
.reaction-option.r-sad:focus-visible i { animation: r-droop 1100ms ease-in-out infinite; }
.reaction-option.r-fire:hover i,
.reaction-option.r-fire:focus-visible i { animation: r-flicker 650ms ease-in-out infinite; }

/* Ao escolher: o ícone do botão salta e um anel se expande. */
.reaction-trigger {
  position: relative;
}

.reaction-trigger.is-popping i {
  animation: reaction-pop 520ms var(--ease-spring);
}

.reaction-trigger.is-popping::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: -0.55rem;
  border: 2px solid var(--r);
  border-radius: 50%;
  pointer-events: none;
  animation: reaction-ring 520ms ease-out forwards;
}


html[data-motion="reduced"] .reaction-float {
  display: none;
}

@keyframes reaction-menu-in {
  from { opacity: 0; transform: translateY(10px) scale(0.6); }
  to { opacity: 1; transform: none; }
}

@keyframes reaction-option-in {
  from { opacity: 0; transform: translateY(14px) scale(0.3); }
  to { opacity: 1; transform: none; }
}

@keyframes reaction-pop {
  0% { transform: scale(0.4) rotate(-15deg); }
  55% { transform: scale(1.5) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes reaction-ring {
  from { opacity: 0.9; transform: scale(0.6); }
  to { opacity: 0; transform: scale(2.8); }
}

@keyframes reaction-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(1.3); }
  45% { opacity: 1; transform: translate(calc(var(--dx) * 0.45), calc(var(--dy) * 0.45 - 40px)) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.45); }
}

@keyframes r-beat {
  0%, 100% { transform: scale(1); }
  20% { transform: scale(1.25); }
  40% { transform: scale(0.95); }
  60% { transform: scale(1.15); }
}

@keyframes r-wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg) scale(1.08); }
  75% { transform: rotate(12deg) scale(1.08); }
}

@keyframes r-shake {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-2px) rotate(-8deg); }
  75% { transform: translateY(1px) rotate(8deg); }
}

@keyframes r-gasp {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2) translateY(-1px); }
}

@keyframes r-droop {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(2px) rotate(-6deg); }
}

@keyframes r-flicker {
  0%, 100% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.12, 0.94) rotate(-4deg); }
  60% { transform: scale(0.96, 1.12) rotate(4deg); }
}

@media (max-width: 560px) {
  .post {
    padding: var(--space-4);
    border-radius: 22px;
  }

  .reaction-option {
    width: 2.45rem;
    height: 2.45rem;
  }

  .reaction-face {
    width: 2.05rem;
    height: 2.05rem;
    font-size: 1rem;
  }
}

@media (max-width: 560px) {
  /* No celular o seletor se ancora na barra de ações inteira, para não sair da tela. */
  .reaction {
    position: static;
  }

  .reaction-menu {
    left: 0;
  }
}

/* ==========================================================================
   Linha do tempo em painel único (referência de design 4)
   ========================================================================== */
:root {
  --dash-bg: linear-gradient(135deg, #e9e4f2 0%, #dfe3ee 45%, #e6e1ef 100%);
  --dash-shell: #ffffff;
  --dash-ink: #111014;
  --dash-on-ink: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dash-bg: linear-gradient(135deg, #15131d 0%, #12141c 50%, #17131f 100%);
    --dash-shell: #1a1925;
    --dash-ink: #ecebf5;
    --dash-on-ink: #15141c;
  }
}

:root[data-theme="dark"] {
  --dash-bg: linear-gradient(135deg, #15131d 0%, #12141c 50%, #17131f 100%);
  --dash-shell: #1a1925;
  --dash-ink: #ecebf5;
  --dash-on-ink: #15141c;
}

body.has-dash {
  background: var(--dash-bg);
}

.dash {
  width: min(100% - 2rem, 1380px);
  margin-inline: auto;
  padding-block: var(--space-5) var(--space-7);
}

.dash-shell {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 16.5rem;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-5);
  border-radius: 40px;
  background: var(--dash-shell);
  box-shadow: 0 30px 80px -40px rgb(40 30 80 / 0.45), 0 2px 8px rgb(40 30 80 / 0.06);
}

/* ---------- Coluna da esquerda ---------- */
.dash-left {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: grid;
  gap: var(--space-5);
}

.dash-me {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
}

.dash-me-art {
  position: relative;
  display: inline-grid;
  margin-bottom: var(--space-2);
  padding-left: 2.6rem;
}

.dash-me-art .avatar {
  position: relative;
  width: 5.6rem;
  height: 5.6rem;
  border: 4px solid var(--dash-shell);
  font-size: 1.8rem;
}

/* Mancha colorida atrás da foto, como na referência. */
.dash-blob {
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 5rem;
  height: 5rem;
  border-radius: 58% 42% 55% 45% / 50% 60% 40% 50%;
  background:
    radial-gradient(circle at 30% 30%, #ffd166 0 18%, transparent 19%),
    radial-gradient(circle at 70% 65%, #06d6a0 0 16%, transparent 17%),
    conic-gradient(from 200deg, #a78bfa, #f472b6, #60a5fa, #34d399, #a78bfa);
  filter: saturate(1.1);
  opacity: 0.85;
}

.dash-me-name {
  font-size: var(--text-lg);
  font-weight: 750;
}

.dash-me-handle {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.dash-me:hover .dash-me-name {
  text-decoration: underline;
}

.dash-nav ul {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.1rem;
  padding: 0.45rem 0.9rem 0.45rem 0.55rem;
  border-radius: 18px;
  color: var(--color-text);
  font-weight: 650;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.dash-nav a:hover {
  background: var(--color-surface-2);
}

.dash-nav-icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  font-size: 1rem;
}

.dash-nav-label {
  flex: 1;
  min-width: 0;
}

.dash-badge {
  display: grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding-inline: 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--dash-ink);
  color: var(--dash-on-ink);
  font-size: var(--text-xs);
  font-weight: 750;
}

.dash-nav a[aria-current="page"] {
  background: var(--dash-ink);
  color: var(--dash-on-ink);
}

.dash-nav a[aria-current="page"] .dash-nav-icon {
  background: var(--dash-on-ink);
  color: var(--dash-ink);
  font-size: 0.85rem;
}

.dash-nav a[aria-current="page"] .dash-badge {
  background: var(--dash-on-ink);
  color: var(--dash-ink);
}

.dash-promo {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4) var(--space-5);
  border: 2px dashed var(--color-border-strong);
  border-radius: 26px;
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
}

.dash-promo:hover {
  border-color: var(--color-primary);
}

.dash-promo .muted {
  font-size: var(--text-xs);
}

.dash-promo-art {
  position: relative;
  margin-bottom: var(--space-3);
}

.dash-promo-app {
  display: grid;
  place-items: center;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 24px;
  background: linear-gradient(135deg, #f472b6 0%, #a78bfa 45%, #38bdf8 100%);
  color: #ffffff;
  font-size: 2rem;
  box-shadow: 0 14px 30px -14px rgb(167 139 250 / 0.9);
}

.dash-promo-face {
  position: absolute;
}

.dash-promo-face .avatar {
  border: 3px solid var(--dash-shell);
}

.dash-promo-face.face-1 {
  left: -1rem;
  top: -0.8rem;
}

.dash-promo-face.face-2 {
  right: -1.1rem;
  bottom: -0.7rem;
}

/* ---------- Coluna central ---------- */
.dash-main {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-inline: var(--space-1);
}

.dash-head h1 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.dash-tabs {
  display: flex;
  gap: var(--space-4);
}

.dash-tabs a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.dash-tabs a:hover {
  color: var(--color-text);
}

.dash-tabs a[aria-current="page"] {
  color: var(--color-text);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.has-dash .feed {
  gap: var(--space-4);
}

/* Caixa de publicação: painel cinza com campo arredondado e botão preto. */
.composer {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 0;
  border-radius: 28px;
  background: var(--color-surface-2);
  box-shadow: none;
}

.composer-main {
  align-items: flex-start;
}

.composer-text {
  min-height: 3.2rem;
  border: 0;
  border-radius: 20px;
  background: var(--color-surface);
}

.composer-bar {
  gap: var(--space-1) var(--space-3);
}

.composer-attach {
  padding-inline: 0.4rem;
  color: var(--color-text);
  font-weight: 650;
}

.composer-bar .select {
  width: auto;
  min-height: 2.4rem;
  border: 0;
  background-color: transparent;
  font-weight: 650;
}

.composer-submit {
  min-width: 6.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--dash-ink);
  color: var(--dash-on-ink);
}

.composer-submit:hover {
  background: color-mix(in srgb, var(--dash-ink) 82%, var(--color-primary));
  color: var(--dash-on-ink);
}

/* ---------- Coluna da direita ---------- */
.dash-right {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

.dash-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.dash-block-head h2 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.dash-block-head a,
.dash-more {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.dash-block-head a:hover,
.dash-more:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.dash-more {
  display: inline-block;
  margin-top: var(--space-3);
}

.dash-stories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-story {
  position: relative;
  display: grid;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  color: var(--color-text);
  text-decoration: none;
}

.dash-story.tone-violet {
  background: linear-gradient(160deg, #c4b5fd, #f0abfc);
}

.dash-story.tone-amber {
  background: linear-gradient(160deg, #fcd34d, #fb923c);
}

.dash-story > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}

.dash-story:hover > img {
  transform: scale(1.05);
}

.dash-story-art {
  display: grid;
  place-items: center;
  color: rgb(255 255 255 / 0.9);
  font-size: 2.4rem;
}

.dash-story-tag {
  position: absolute;
  left: 0.45rem;
  right: 0.45rem;
  bottom: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem 0.25rem 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 700;
}

.dash-story-tag .avatar {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.7rem;
}

.dash-story-tag > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-people {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-people li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.dash-person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: var(--color-text);
  text-decoration: none;
}

.dash-person .avatar {
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
}

.dash-person > span {
  display: grid;
  min-width: 0;
}

.dash-person strong {
  font-size: var(--text-sm);
  line-height: 1.3;
}

.dash-person .muted {
  font-size: var(--text-xs);
}

.dash-person:hover strong {
  text-decoration: underline;
}

.dash-person-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.dash-people form {
  margin: 0;
}

.dash-pill {
  min-height: 2rem;
  padding: 0.3rem 0.85rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--dash-ink);
  color: var(--dash-on-ink);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 750;
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
}

.dash-pill:hover {
  transform: translateY(-1px);
}

.dash-icon-btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.dash-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-tile {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.35rem;
  aspect-ratio: 1;
  padding: var(--space-2);
  color: var(--tile-ink);
  text-align: center;
  text-decoration: none;
  background: var(--tile-bg);
  transition: transform 260ms var(--ease-spring);
}

.dash-tile:hover {
  transform: rotate(-4deg) scale(1.04);
}

.dash-tile i {
  font-size: 1.3rem;
}

.dash-tile strong {
  font-size: var(--text-xs);
  line-height: 1.2;
}

.shape-circle {
  border-radius: 50%;
}

.shape-square {
  border-radius: 24px;
}

/* Forma orgânica ("mancha"), como o primeiro quadro da referência. */
.shape-flower {
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
}

.tile-sky { --tile-bg: #dbe7ff; --tile-ink: #1e3a8a; }
.tile-rose { --tile-bg: #ff7aa2; --tile-ink: #4a0b20; }
.tile-mint { --tile-bg: #bdf0d6; --tile-ink: #0f3d2a; }
.tile-lilac { --tile-bg: #c9b2ff; --tile-ink: #2e1065; }

/* ---------- Responsivo ---------- */
@media (max-width: 1240px) {
  .dash-shell {
    grid-template-columns: 13.5rem minmax(0, 1fr);
    padding: var(--space-5);
  }

  .dash-right {
    grid-column: 2;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-5);
    align-items: start;
  }
}

@media (max-width: 900px) {
  .dash {
    width: min(100% - 1rem, 1380px);
    padding-block: var(--space-3) var(--space-6);
  }

  .dash-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-4);
    border-radius: 28px;
  }

  .dash-left {
    position: static;
    gap: var(--space-3);
    /* Coluna única 0..1fr: a faixa de atalhos (.dash-nav ul) rola dentro dela
       em vez de empurrar a largura da página (telas de tablet, ~760–900 px). */
    grid-template-columns: minmax(0, 1fr);
  }

  .dash-me {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    column-gap: var(--space-3);
    text-align: left;
  }

  .dash-me-art {
    grid-row: span 2;
    margin: 0;
    padding-left: 1.4rem;
  }

  .dash-me-art .avatar {
    width: 3.6rem;
    height: 3.6rem;
    border-width: 3px;
    font-size: 1.2rem;
  }

  .dash-blob {
    width: 3.2rem;
    height: 3.2rem;
    top: 0.2rem;
  }

  .dash-me-name {
    align-self: end;
  }

  .dash-me-handle {
    align-self: start;
  }

  /* Navegação vira uma faixa rolável de pílulas. */
  .dash-nav ul {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-1);
    scrollbar-width: none;
  }

  .dash-nav ul::-webkit-scrollbar {
    display: none;
  }

  .dash-nav a {
    min-height: 2.6rem;
    padding: 0.3rem 0.8rem 0.3rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }

  .dash-nav a[aria-current="page"] {
    border-color: var(--dash-ink);
  }

  .dash-nav-icon {
    width: 1.9rem;
    height: 1.9rem;
  }

  .dash-promo {
    display: none;
  }

  .dash-right {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .dash-head h1 {
    font-size: var(--text-xl);
  }

  .composer {
    padding: var(--space-3) var(--space-4);
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .dash-tabs {
    gap: var(--space-3);
  }
}

.reaction-summary.is-empty {
  display: none;
}

/* ==========================================================================
   Página inicial de visitantes (mesma linguagem da linha do tempo)
   ========================================================================== */
.home {
  display: grid;
  gap: var(--space-5);
}

.home .dash-shell {
  display: block;
}

.dash-shell.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-7) var(--space-7) var(--space-7) var(--space-7);
  overflow: hidden;
}

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.home-kicker .dash-blob {
  position: static;
  width: 1.4rem;
  height: 1.4rem;
}

.home-title {
  margin: 0;
  font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.home-title em {
  font-style: normal;
  background: linear-gradient(100deg, #a78bfa, #f472b6 55%, #fb923c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-lead {
  max-width: 34rem;
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.home-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 3.1rem;
  padding: 0.6rem 1.4rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--dash-shell);
  color: var(--color-text);
  font-weight: 750;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.home-btn:hover {
  border-color: var(--color-text);
  transform: translateY(-1px);
}

.home-btn-ink {
  border-color: var(--dash-ink);
  background: var(--dash-ink);
  color: var(--dash-on-ink);
}

.home-hero .hero-proof {
  margin-top: var(--space-5);
}

/* Prévia: cartões pastel, rostos flutuando e seletor de reações em movimento. */
.home-preview {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4) var(--space-4) var(--space-6);
}

.home-post {
  pointer-events: none;
  user-select: none;
}

.home-post .post-meta .muted {
  font-size: var(--text-xs);
}

.home-post .post-body {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

.home-post-small {
  width: 82%;
  justify-self: end;
}

.home-post-small .status {
  margin-top: var(--space-2);
}

.home-photos {
  display: grid;
  grid-template-columns: 1fr 1fr 1.7fr;
  gap: 8px;
  height: 8.5rem;
  margin-top: var(--space-3);
}

.home-photo {
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: rgb(255 255 255 / 0.85);
  font-size: 2rem;
}

.photo-a {
  background: linear-gradient(170deg, #fbbf77 0%, #c2410c 100%);
}

.photo-b {
  background: linear-gradient(170deg, #fde68a 0%, #65a30d 100%);
}

.photo-c {
  background: linear-gradient(170deg, #c7d2fe 0%, #475569 100%);
}

.home-post-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.home-picker {
  position: absolute;
  right: 0.5rem;
  bottom: 2.4rem;
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 16px 30px -14px rgb(29 27 44 / 0.45);
}

.home-picker .reaction-face {
  width: 1.9rem;
  height: 1.9rem;
  font-size: 0.95rem;
}

.home-wow {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--r) 16%, var(--color-surface));
  color: var(--r-text);
  font-weight: 750;
}

.home-face {
  position: absolute;
  z-index: 2;
  width: 3.4rem;
  height: 3.4rem;
  border: 4px solid var(--dash-shell);
  box-shadow: 0 12px 26px -12px rgb(29 27 44 / 0.5);
  font-size: 1rem;
}

.home-face.face-a {
  left: -0.4rem;
  top: 38%;
}

.home-face.face-b {
  right: -0.6rem;
  top: -0.4rem;
}

.home-face.face-c {
  left: 12%;
  bottom: -0.6rem;
}

.home-face {
  animation: home-float 6s ease-in-out infinite;
}

.home-face.face-b {
  animation-delay: -2s;
}

.home-face.face-c {
  animation-delay: -4s;
}

.home-picker .reaction-face {
  animation: home-bob 2.4s ease-in-out infinite;
}

.home-picker .reaction-face:nth-child(2) { animation-delay: 0.15s; }
.home-picker .reaction-face:nth-child(3) { animation-delay: 0.3s; }
.home-picker .reaction-face:nth-child(4) { animation-delay: 0.45s; }
.home-picker .reaction-face:nth-child(5) { animation-delay: 0.6s; }
.home-picker .reaction-face:nth-child(6) { animation-delay: 0.75s; }

.home-wow i {
  animation: r-flicker 900ms ease-in-out infinite;
}


@keyframes home-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes home-bob {
  0%, 60%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-6px) scale(1.15); }
}

/* Seções */
.dash-shell.home-section {
  padding: var(--space-6);
}

.home-head {
  margin-bottom: var(--space-5);
}

.home-head h2 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.home-head-stack p {
  max-width: 40rem;
  margin: var(--space-2) 0 0;
}

.home-stories {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-tiles {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-tiles .dash-tile span {
  font-size: 0.7rem;
  opacity: 0.8;
}

.home-flow,
.home-features {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-features {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.home-features > article {
  grid-column: span 2;
}

.home-features > article:nth-child(-n + 2) {
  grid-column: span 3;
}

.home-flow > li,
.home-features > article {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: 28px;
  background: var(--post-bg);
}

.home-flow h3,
.home-features h3 {
  margin: 0;
  font-size: var(--text-lg);
}

.home-flow p,
.home-features p {
  margin: 0;
  color: var(--color-text-muted);
}

.home-flow .status-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.home-flow .status {
  justify-self: start;
}

.home-step,
.home-feature-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--dash-ink);
  color: var(--dash-on-ink);
  font-weight: 800;
}

.home-feature-icon {
  border-radius: 16px;
}

.home-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: 40px;
  background: var(--dash-ink);
  color: var(--dash-on-ink);
}

.home-cta h2 {
  margin: 0;
  font-size: var(--text-xl);
}

.home-cta p {
  margin: var(--space-1) 0 0;
  opacity: 0.8;
}

.home-cta .home-btn {
  border-color: var(--dash-on-ink);
  background: var(--dash-on-ink);
  color: var(--dash-ink);
}

@media (max-width: 1100px) {
  .dash-shell.home-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-6);
  }

  .home-preview {
    max-width: 36rem;
  }

  .home-stories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .home-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-features > article,
  .home-features > article:nth-child(-n + 2) {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .dash-shell.home-hero,
  .dash-shell.home-section {
    padding: var(--space-5) var(--space-4);
    border-radius: 28px;
  }

  .home-preview {
    padding: var(--space-4) 0 var(--space-3) var(--space-3);
  }

  .home-picker {
    right: 0;
    bottom: 2.6rem;
  }

  .home-picker .reaction-face {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.8rem;
  }

  .home-face {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 0.8rem;
  }

  .home-photos {
    height: 6rem;
  }

  .home-stories,
  .home-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-features > article:last-child {
    grid-column: 1 / -1;
  }

  .home-cta {
    padding: var(--space-5);
    border-radius: 28px;
  }
}

/* ==========================================================================
   Rolagem suave, cabeçalho em pílula, rodapé e página inicial (referência Plann)
   ========================================================================== */
html {
  scroll-behavior: smooth;
}


html {
  scroll-padding-top: calc(var(--header-h) + 2.5rem);
}

/* ---------- Cabeçalho flutuante ---------- */
.site-header {
  padding-top: 0.6rem;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

.site-header > * {
  pointer-events: auto;
}

.site-header .header-inner {
  min-height: 3.6rem;
  padding: 0.35rem 0.5rem 0.35rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(16px);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: 0 1px 2px rgb(29 27 44 / 0.04), 0 10px 30px -18px rgb(29 27 44 / 0.35);
  transition: box-shadow 240ms var(--ease), border-color 240ms var(--ease), background-color 240ms var(--ease);
}

.site-header.is-scrolled .header-inner {
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  box-shadow: 0 1px 2px rgb(29 27 44 / 0.05), 0 16px 36px -18px rgb(29 27 44 / 0.45);
}

.site-header .main-nav a {
  font-size: 0.92rem;
  color: var(--color-text);
}

.site-header .main-nav a:hover,
.site-header .main-nav a[aria-current="page"] {
  background: var(--color-surface-2);
}

.btn-outline-pill,
.btn-ink-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0.45rem 1.15rem;
  border-radius: 14px;
  font-weight: 750;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn-outline-pill {
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
}

.btn-outline-pill:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn-ink-pill {
  border: 1.5px solid var(--dash-ink);
  background: var(--dash-ink);
  color: var(--dash-on-ink);
}

.btn-ink-pill:hover {
  color: var(--dash-on-ink);
  transform: translateY(-1px);
}

.btn-sparkle {
  font-size: 0.8em;
}

.mobile-menu {
  margin: 0.5rem 1rem 0;
  border: 1px solid var(--color-border);
  border-radius: 20px;
}

/* ---------- Rodapé ---------- */
.site-footer {
  position: relative;
  padding-block: var(--space-6) var(--space-5);
  background: var(--color-surface);
}

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  padding: var(--space-5) var(--space-6);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, #a78bfa 35%, transparent), transparent 45%),
    radial-gradient(circle at 88% 80%, color-mix(in srgb, #7dd3fc 35%, transparent), transparent 45%),
    var(--color-surface-2);
}

.footer-cta-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.footer-cta-text {
  margin: 0.2rem 0 0;
  color: var(--color-text-muted);
}

.footer-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}

.footer-links a {
  color: var(--color-text-muted);
}

.footer-links a:hover {
  color: var(--color-text);
}

.footer-bottom {
  align-items: center;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-weight: 650;
  text-decoration: none;
}

.back-to-top:hover {
  border-color: var(--color-text);
}

/* ---------- Página inicial ---------- */
body.has-landing {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
}

body.has-landing .site-footer {
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
}

.landing {
  position: relative;
  overflow-x: clip;
}

.landing::before,
.landing::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 38rem;
  height: 38rem;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
  pointer-events: none;
}

.landing::before {
  top: -10rem;
  right: -8rem;
  background: #c4b5fd;
}

.landing::after {
  top: 30rem;
  left: -14rem;
  background: #a5f3fc;
}

.landing-container {
  width: min(100% - 2rem, 1240px);
  margin-inline: auto;
}

.landing-hero {
  padding-block: var(--space-7) var(--space-6);
}

.landing-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--space-7);
  align-items: center;
}

.landing-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.landing-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 650;
}

.chip-violet {
  background: color-mix(in srgb, #8b5cf6 14%, var(--color-surface));
  color: color-mix(in srgb, #6d28d9 80%, var(--color-text));
}

.chip-mint {
  background: color-mix(in srgb, #10b981 14%, var(--color-surface));
  color: color-mix(in srgb, #047857 85%, var(--color-text));
}

.landing-chip-arrow {
  color: var(--color-text-muted);
}

.landing-title {
  margin: 0;
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.4rem);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.landing-title em {
  font-style: normal;
}

/* Sublinhado "feito à mão" sob o destaque do título. */
.scribble {
  position: relative;
  white-space: nowrap;
  color: color-mix(in srgb, #7c3aed 85%, var(--color-text));
}

.scribble::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.12em;
  height: 0.32em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 14 C 40 4, 80 4, 120 10 S 180 16, 198 6' fill='none' stroke='%23f472b6' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.landing-lead {
  max-width: 34rem;
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: 1.12rem;
  line-height: 1.65;
}

.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.6rem 1.4rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}

.landing-btn:hover {
  border-color: var(--color-text);
  color: var(--color-text);
  transform: translateY(-2px);
}

.landing-btn-ink {
  border-color: var(--dash-ink);
  background: var(--dash-ink);
  color: var(--dash-on-ink);
  box-shadow: 0 14px 28px -16px rgb(17 16 20 / 0.7);
}

.landing-btn-ink:hover {
  color: var(--dash-on-ink);
  box-shadow: 0 18px 32px -14px rgb(17 16 20 / 0.75);
}

.landing-btn-sm {
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  font-size: var(--text-sm);
}

/* Cadastro rápido */
.quick-signup {
  display: grid;
  gap: var(--space-3);
  max-width: 34rem;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: 0 24px 50px -30px rgb(60 40 120 / 0.45);
}

.quick-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 750;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.quick-field {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.quick-field label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.quick-field .input {
  min-height: 2.9rem;
  border-color: transparent;
  border-radius: 14px;
  background: var(--color-surface-2);
}

.quick-field .input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.quick-at {
  position: relative;
}

.quick-at > span {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-weight: 700;
}

.quick-at .input {
  padding-left: 1.9rem;
}

.quick-help {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.quick-terms {
  font-size: var(--text-xs);
}

.quick-submit {
  width: 100%;
}

.quick-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: var(--text-xs);
}

.quick-closed {
  justify-items: start;
}

/* Molduras de navegador e celular com as capturas reais */
.landing-hero-art {
  position: relative;
  padding: var(--space-5) var(--space-6) var(--space-7) 0;
}

.browser-frame {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: 0 40px 80px -40px rgb(40 30 90 / 0.5), 0 2px 6px rgb(40 30 90 / 0.06);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 2.2rem;
  padding-inline: 0.85rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.browser-dots {
  display: inline-flex;
  gap: 0.35rem;
}

.browser-dots i {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: #ff5f57;
}

.browser-dots i:nth-child(2) { background: #febc2e; }
.browser-dots i:nth-child(3) { background: #28c840; }

.browser-url {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline: auto;
  padding: 0.15rem 1rem;
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.browser-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.phone-frame {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 30%;
  margin: 0;
  padding: 6px;
  border-radius: 30px;
  background: #121118;
  box-shadow: 0 30px 60px -24px rgb(20 10 50 / 0.6);
}

.phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.float-bubble {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 14px 30px -14px rgb(40 30 90 / 0.45);
  font-size: 1.3rem;
}

.bubble-a { top: -0.4rem; left: 8%; color: #e11d48; }
.bubble-b { top: 22%; right: 0; color: #7c3aed; }
.bubble-c { bottom: 18%; left: -1.4rem; color: #0ea5e9; }
.bubble-d { top: 4%; right: 26%; color: #f59e0b; width: 2.8rem; height: 2.8rem; font-size: 1.05rem; }

.float-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 18px 36px -16px rgb(40 30 90 / 0.5);
}

.card-reactions {
  left: 12%;
  bottom: 1.2rem;
  gap: 0.2rem;
}

.card-reactions .reaction-face {
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1rem;
}

.card-recado {
  top: 46%;
  left: -2.2rem;
  max-width: 17rem;
  padding: 0.6rem 0.9rem 0.6rem 0.6rem;
  border-radius: 18px;
  font-size: var(--text-xs);
  line-height: 1.35;
}

/* Recursos em linha, abaixo do topo */
.landing-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.landing-features li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  font-weight: 700;
  font-size: var(--text-sm);
}

.feature-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 14px;
  font-size: 1.1rem;
}

.feature-badge.tone-lilac { background: var(--tone-lilac); color: #6d28d9; }
.feature-badge.tone-sun { background: var(--tone-sun); color: #b45309; }
.feature-badge.tone-rose { background: var(--tone-rose); color: #be185d; }
.feature-badge.tone-mint { background: var(--tone-mint); color: #047857; }

/* Seções */
.landing-section {
  padding-block: var(--space-8) var(--space-6);
}

.landing-h2 {
  margin: 0;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.landing-h2 .accent {
  display: block;
  color: color-mix(in srgb, #38bdf8 75%, #1e3a8a);
}

.landing-center {
  text-align: center;
}

.landing-split-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-5);
  align-items: end;
  margin-bottom: var(--space-6);
}

.landing-side-note {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  margin: 0;
}

.landing-side-note p {
  margin: 0;
}

/* Faixa de comunidades em movimento */
.marquee {
  overflow: hidden;
  padding-block: var(--space-3) var(--space-5);
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee-track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  margin: 0;
  padding: 0 var(--space-4);
  list-style: none;
}

.people-card {
  display: grid;
  gap: 0.25rem;
  width: 13rem;
  padding: 0.6rem 0.6rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  box-shadow: 0 16px 30px -24px rgb(40 30 90 / 0.5);
  transition: transform 260ms var(--ease-spring);
}

.people-card:nth-child(odd) {
  transform: rotate(-1.5deg);
}

.marquee-track li:nth-child(even) .people-card {
  transform: translateY(14px) rotate(1.5deg);
}

.people-card:hover,
.marquee-track li:nth-child(even) .people-card:hover {
  transform: translateY(-4px) rotate(0);
}

.people-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 0.45rem;
  border-radius: 16px;
  object-fit: cover;
}

.people-card-art {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #c4b5fd, #f0abfc);
  color: #ffffff;
  font-size: 2.4rem;
}

.people-card-name {
  padding-inline: 0.3rem;
  font-weight: 750;
}

.people-card-meta {
  padding-inline: 0.3rem;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Passos com capturas */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps-grid > li {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 28px;
  background: var(--color-surface);
}

.steps-grid h3 {
  margin: 0;
  font-size: var(--text-lg);
}

.steps-grid p {
  margin: 0;
}

.step-num {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--dash-ink);
  color: var(--dash-on-ink);
  font-weight: 800;
}

.step-shot {
  margin: var(--space-3) calc(var(--space-5) * -0.2) 0 0;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  transform: translateY(8px) rotate(-1deg);
  transform-origin: left bottom;
  transition: transform 400ms var(--ease);
}

.steps-grid > li:hover .step-shot {
  transform: translateY(0) rotate(0);
}

/* Mosaico de recursos */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.bento-card {
  display: grid;
  align-content: end;
  gap: var(--space-2);
  min-height: 18rem;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: 28px;
  background: var(--color-surface);
}

.bento-card h3 {
  margin: 0;
  font-size: var(--text-lg);
}

.bento-card p {
  margin: 0;
}

.bento-orbit { grid-column: span 3; grid-row: span 2; }
.bento-recados { grid-column: span 3; grid-row: span 2; background: var(--tone-sun); }
.bento-reactions { grid-column: span 2; background: var(--tone-rose); }
.bento-privacy { grid-column: span 2; background: var(--tone-mint); }
.bento-safety { grid-column: span 2; background: var(--tone-sky); }

.orbit {
  position: relative;
  width: min(100%, 20rem);
  aspect-ratio: 1;
  margin: 0 auto var(--space-4);
}

.orbit-center {
  position: absolute;
  inset: 34%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-2);
  box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 0 0 30px color-mix(in srgb, var(--color-primary) 4%, transparent);
}

.orbit-center .brand-mark {
  width: 55%;
  height: 55%;
}

.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  margin: -1.6rem 0 0 -1.6rem;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 10px 24px -12px rgb(40 30 90 / 0.5);
  color: var(--color-primary-text);
  font-size: 1.15rem;
  transform: rotate(calc(var(--i) * 45deg)) translate(8.2rem) rotate(calc(var(--i) * -45deg));
}

.orbit-1 { --i: 0; }
.orbit-2 { --i: 1; color: #db2777; }
.orbit-3 { --i: 2; color: #0ea5e9; }
.orbit-4 { --i: 3; color: #16a34a; }
.orbit-5 { --i: 4; color: #f59e0b; }
.orbit-6 { --i: 5; color: #7c3aed; }
.orbit-7 { --i: 6; color: #e11d48; }
.orbit-8 { --i: 7; color: #0d9488; }

.mini-recado {
  display: flex;
  gap: var(--space-3);
  max-width: 26rem;
  padding: var(--space-3) var(--space-4);
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: 0 14px 30px -20px rgb(80 50 10 / 0.5);
  font-size: var(--text-sm);
}

.mini-recado p {
  margin: 0.2rem 0 0.5rem;
}

.mini-recado-ok {
  margin-left: auto;
  margin-bottom: var(--space-4);
  transform: rotate(1.5deg);
}

.mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.bento-reaction-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: auto;
}

.bento-reaction-row .reaction-face {
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.2rem;
}

.mini-toggles {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.mini-toggles li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.45rem 0.7rem;
  border-radius: 12px;
  background: var(--color-surface);
}

.mini-switch {
  position: relative;
  flex: none;
  width: 2.3rem;
  height: 1.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.mini-switch::after {
  content: "";
  position: absolute;
  top: 0.18rem;
  left: 0.2rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 300ms var(--ease-spring);
}

.mini-switch.is-on {
  background: #10b981;
}

.mini-switch.is-on::after {
  transform: translateX(0.9rem);
}

.bento-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: auto;
  border-radius: 16px;
  background: var(--dash-ink);
  color: var(--dash-on-ink);
  font-size: 1.2rem;
}

.landing-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
}

/* Chamada final */
.landing-final {
  padding-bottom: var(--space-7);
}

.final-card {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  border-radius: 36px;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, #f9a8d4 45%, transparent), transparent 50%),
    radial-gradient(circle at 80% 100%, color-mix(in srgb, #93c5fd 45%, transparent), transparent 50%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  text-align: center;
}

.final-card p {
  margin: 0;
}

.final-faces {
  display: flex;
}

.final-faces .avatar {
  width: 3.2rem;
  height: 3.2rem;
  margin-left: -0.7rem;
  border: 3px solid var(--color-surface);
}

.final-faces .avatar:first-child {
  margin-left: 0;
}

.final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* ---------- Movimento (só quando a pessoa não pediu para reduzir) ---------- */
/* Revelar ao rolar: só ativa quando o JavaScript marca a página (sem JS, tudo visível). */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.float-bubble {
  animation: home-float 6s ease-in-out infinite;
}

.bubble-b { animation-delay: -1.5s; }
.bubble-c { animation-delay: -3s; }
.bubble-d { animation-delay: -4.5s; }

.card-reactions .reaction-face,
.bento-reaction-row .reaction-face {
  animation: home-bob 2.6s ease-in-out infinite;
}

.card-reactions .reaction-face:nth-child(2),
.bento-reaction-row .reaction-face:nth-child(2) { animation-delay: 0.15s; }
.card-reactions .reaction-face:nth-child(3),
.bento-reaction-row .reaction-face:nth-child(3) { animation-delay: 0.3s; }
.card-reactions .reaction-face:nth-child(4),
.bento-reaction-row .reaction-face:nth-child(4) { animation-delay: 0.45s; }
.card-reactions .reaction-face:nth-child(5),
.bento-reaction-row .reaction-face:nth-child(5) { animation-delay: 0.6s; }
.card-reactions .reaction-face:nth-child(6),
.bento-reaction-row .reaction-face:nth-child(6) { animation-delay: 0.75s; }

.card-recado {
  animation: home-float 7s ease-in-out infinite;
  animation-delay: -2s;
}

.orbit-item {
  animation: orbit-spin 40s linear infinite;
}

.orbit:hover .orbit-item {
  animation-play-state: paused;
}

.marquee.is-running .marquee-track {
  animation: marquee 45s linear infinite;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

.scribble::after {
  animation: scribble-draw 1.2s 400ms var(--ease) both;
  transform-origin: left center;
}

.is-visible .mini-switch.is-on::after,
.mini-switch.is-on::after {
  animation: switch-on 900ms 300ms var(--ease-spring) both;
}

[data-parallax] {
  will-change: transform;
}


@keyframes orbit-spin {
  from { transform: rotate(calc(var(--i) * 45deg)) translate(8.2rem) rotate(calc(var(--i) * -45deg)); }
  to { transform: rotate(calc(var(--i) * 45deg + 360deg)) translate(8.2rem) rotate(calc(var(--i) * -45deg - 360deg)); }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@keyframes scribble-draw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes switch-on {
  from { transform: translateX(0); }
  to { transform: translateX(0.9rem); }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .landing-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-hero-art {
    max-width: 44rem;
  }

  .landing-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 40rem;
  }

  .bento-orbit,
  .bento-recados {
    grid-column: span 6;
    grid-row: auto;
  }

  .bento-reactions,
  .bento-privacy,
  .bento-safety {
    grid-column: span 3;
  }

  .bento-safety {
    grid-column: span 6;
  }
}

@media (max-width: 760px) {
  .site-header .header-inner {
    width: min(100% - 1rem, 1240px);
    padding-left: 0.75rem;
  }

  .landing-hero {
    padding-top: var(--space-5);
  }

  .landing-split-head {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .quick-signup {
    padding: var(--space-4);
  }

  .landing-hero-art {
    padding: var(--space-4) var(--space-4) var(--space-6) 0;
  }

  .card-recado {
    display: none;
  }

  .float-bubble {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1rem;
  }

  .bubble-c {
    left: -0.4rem;
  }

  .card-reactions {
    left: 4%;
    bottom: 0.4rem;
  }

  .card-reactions .reaction-face {
    width: 1.7rem;
    height: 1.7rem;
    font-size: 0.85rem;
  }

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

  .landing-section {
    padding-block: var(--space-7) var(--space-4);
  }

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

  .bento > .bento-card {
    grid-column: auto;
    min-height: 0;
  }

  .orbit-item {
    width: 2.6rem;
    height: 2.6rem;
    margin: -1.3rem 0 0 -1.3rem;
    font-size: 0.95rem;
    transform: rotate(calc(var(--i) * 45deg)) translate(6.6rem) rotate(calc(var(--i) * -45deg));
  }

  .orbit {
    width: min(100%, 16rem);
  }

  .footer-cta {
    padding: var(--space-5);
  }
}

@media (max-width: 760px) {
  .orbit-item {
    animation-name: orbit-spin-sm;
  }
}

@keyframes orbit-spin-sm {
  from { transform: rotate(calc(var(--i) * 45deg)) translate(6.6rem) rotate(calc(var(--i) * -45deg)); }
  to { transform: rotate(calc(var(--i) * 45deg + 360deg)) translate(6.6rem) rotate(calc(var(--i) * -45deg - 360deg)); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.has-landing .landing::before,
  :root:not([data-theme="light"]) body.has-landing .landing::after {
    opacity: 0.18;
  }
}

:root[data-theme="dark"] body.has-landing .landing::before,
:root[data-theme="dark"] body.has-landing .landing::after {
  opacity: 0.18;
}

/* Na página inicial a chamada final já existe: o rodapé não repete. */
.has-landing .footer-cta {
  display: none;
}

.has-landing .landing-final {
  padding-bottom: var(--space-6);
}

/* ==========================================================================
   Largura total e mesma largura em todas as páginas (desktop)
   ========================================================================== */
:root {
  --gutter: clamp(1rem, 2.6vw, 2.75rem);
  --container: 2400px;
}

.container,
.container.app-grid,
.dash,
.landing-container {
  width: min(100% - 2 * var(--gutter), var(--container));
  max-width: none;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .dash {
    width: min(100% - 1rem, var(--container));
  }
}

/* Linha do tempo: colunas laterais crescem um pouco em telas largas. */
.dash-shell {
  grid-template-columns: clamp(15rem, 15vw, 19rem) minmax(0, 1fr) clamp(16.5rem, 19vw, 23rem);
}

@media (max-width: 1240px) {
  .dash-shell {
    grid-template-columns: 13.5rem minmax(0, 1fr);
  }
}

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

/* Texto corrido continua com largura de leitura confortável, mesmo em telas largas. */
.post-body,
.topic-main .prose,
.recado p {
  max-width: 78ch;
}

/* Páginas que antes ficavam numa coluna estreita */
.narrow-page,
.narrow-content,
.recados {
  max-width: none;
}

/* Comunidade: painéis lado a lado (sobre/regras, moderação, configurações). */
.narrow-content {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  align-items: start;
}

.narrow-content > .page-head-row,
.narrow-content > .topic-panel {
  grid-column: 1 / -1;
}

.narrow-content.topic-page {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

@media (max-width: 1000px) {
  .narrow-content.topic-page {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Membros e listas de pessoas em grade */
.panel.narrow-content {
  display: block;
}

.panel.narrow-content .people-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-3);
}

/* Mural de recados: cartões em duas colunas em telas largas */
.recado-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* Publicação: cartão à esquerda, comentários à direita */
.post-page {
  max-width: none;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
}

.post-page > .comments {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
  max-height: calc(100vh - var(--header-h) - var(--space-7));
  overflow-y: auto;
}

@media (max-width: 1000px) {
  .post-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-page > .comments {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* Página com lateral (ex.: notificações) */
.page-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(17rem, 22vw, 24rem);
  gap: var(--space-6);
  align-items: start;
  padding-bottom: var(--space-8);
}

.page-split-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
  display: grid;
  gap: var(--space-4);
}

.page-split-aside h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.page-split-aside p {
  margin: 0 0 var(--space-3);
}

.notif-summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.notif-summary-count {
  font-size: 2.4rem;
  font-weight: 850;
  line-height: 1;
}

@media (max-width: 900px) {
  .page-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-split-aside {
    position: static;
  }
}

/* ---------- Menu do sino ---------- */
.notif-menu {
  position: relative;
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: -4rem;
  z-index: 60;
  width: min(25rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 6rem));
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
  box-shadow: 0 24px 50px -20px rgb(29 27 44 / 0.45);
}

.notif-menu-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.notif-menu-head form {
  margin: 0;
}

.notif-menu-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-primary-text);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.notif-menu-action:hover {
  background: var(--color-primary-soft);
}

.notif-menu-loading,
.notif-menu-empty {
  margin: 0;
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
}

.notif-menu-empty p {
  margin: var(--space-2) 0 0;
}

.notification-list.is-compact {
  padding: var(--space-1);
}

.notification-list.is-compact .notification {
  padding: 0.55rem 0.65rem;
  font-size: var(--text-sm);
}

.notif-menu-all {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 700;
  text-decoration: none;
}

.notif-menu-all:hover {
  background: var(--color-surface-2);
}

/* ---------- Telas de formulário em tela dividida (entrar, criar conta...) ---------- */
body.has-auth .site-footer .footer-cta {
  display: none;
}

.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-5);
  width: min(100% - 2 * var(--gutter), var(--container));
  min-height: calc(100vh - var(--header-h) - 2rem);
  margin: var(--space-4) auto var(--space-7);
}

.auth-main {
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
}

.auth-form-wrap {
  width: min(100%, 30rem);
}

.auth-form-wrap.is-wide {
  width: min(100%, 40rem);
}

.auth-split .auth-head h1 {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem);
  font-weight: 850;
  letter-spacing: -0.03em;
}

.auth-split .auth-head p {
  font-size: var(--text-lg);
}

.auth-split .input {
  min-height: 3rem;
  border-radius: 14px;
}

.auth-split .btn-primary {
  min-height: 3.1rem;
  border-color: var(--dash-ink);
  border-radius: 16px;
  background: var(--dash-ink);
  color: var(--dash-on-ink);
}

.auth-split .btn-primary:hover {
  background: color-mix(in srgb, var(--dash-ink) 85%, var(--color-primary));
  color: var(--dash-on-ink);
}

.auth-visual {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--space-6);
  overflow: hidden;
  padding: var(--space-7) var(--space-6);
  border-radius: 32px;
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, #c4b5fd 70%, transparent), transparent 45%),
    radial-gradient(circle at 85% 85%, color-mix(in srgb, #a5f3fc 70%, transparent), transparent 45%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, #fbcfe8 60%, transparent), transparent 40%),
    var(--color-surface-2);
}

.auth-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-text) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 6%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.auth-visual > * {
  position: relative;
}

.auth-showcase {
  position: relative;
  padding: 0 var(--space-6) var(--space-6) 0;
}

.auth-showcase .browser-frame {
  transform: rotate(-1.5deg);
}

.auth-phone {
  width: 28%;
}

.auth-reactions {
  left: 6%;
  bottom: 0.2rem;
}

.auth-visual-copy {
  display: grid;
  gap: var(--space-3);
  max-width: 34rem;
}

.auth-visual-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 800;
}

.auth-visual-kicker .brand-mark {
  width: 1.6rem;
  height: 1.6rem;
}

.auth-visual-title {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.auth-points {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 650;
}

.auth-points li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.auth-points i {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-primary-text);
}

.auth-aside-card {
  padding: var(--space-5);
  border-radius: 24px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: 0 20px 40px -24px rgb(40 30 90 / 0.4);
}

.auth-aside-card h2 {
  margin-top: 0;
  font-size: var(--text-lg);
}

.auth-showcase .browser-frame {
  animation: auth-float 8s ease-in-out infinite;
}

.auth-phone {
  animation: auth-float 8s ease-in-out infinite;
  animation-delay: -4s;
}


@keyframes auth-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@media (max-width: 980px) {
  .auth-split {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .auth-main {
    padding: var(--space-5) 0;
  }

  /* No celular: só o formulário (o painel com as capturas some; o cartão de ajuda fica embaixo). */
  .auth-showcase,
  .auth-split:not(:has(.auth-aside-card)) .auth-visual {
    display: none;
  }

  .auth-visual {
    padding: var(--space-5);
    border-radius: 24px;
  }
}

/* Painel visual fixo enquanto o formulário rola; emblema com o ícone da página. */
@media (min-width: 981px) {
  .auth-visual {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    align-self: start;
    min-height: calc(100vh - var(--header-h) - 3rem);
  }
}

.auth-emblem {
  position: relative;
  width: 13rem;
  height: 13rem;
  margin-inline: auto;
}

.auth-emblem-icon {
  position: absolute;
  inset: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 36px;
  background: linear-gradient(135deg, #f472b6 0%, #a78bfa 50%, #38bdf8 100%);
  color: #ffffff;
  font-size: 3.2rem;
  box-shadow: 0 30px 50px -24px rgb(124 58 237 / 0.7);
  transform: rotate(-6deg);
}

.auth-emblem .reaction-face {
  position: absolute;
  width: 2.8rem;
  height: 2.8rem;
  font-size: 1.3rem;
  box-shadow: 0 10px 20px -10px rgb(40 30 90 / 0.6);
}

.auth-emblem .emblem-1 { top: 0; left: 0.5rem; }
.auth-emblem .emblem-2 { top: 1rem; right: 0; }
.auth-emblem .emblem-3 { bottom: 0.5rem; left: 0; }
.auth-emblem .emblem-4 { bottom: 0; right: 1rem; }

.auth-emblem .reaction-face {
  animation: home-float 5s ease-in-out infinite;
}

.auth-emblem .emblem-2 { animation-delay: -1.2s; }
.auth-emblem .emblem-3 { animation-delay: -2.5s; }
.auth-emblem .emblem-4 { animation-delay: -3.7s; }


@media (max-width: 980px) {
  .auth-emblem {
    display: none;
  }
}

/* A lista do menu do sino fica dentro da barra de ícones: anula o "flex" da barra. */
.icon-nav .notif-dropdown ul {
  display: grid;
  gap: 2px;
}

.icon-nav .notif-dropdown {
  text-align: left;
}

/* Configurações da comunidade: imagem e capa uma embaixo da outra, com pré-visualização. */
.media-rows {
  display: grid;
  gap: var(--space-4);
}

.media-row {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: 20px;
  background: var(--color-surface-2);
}

.media-preview {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-surface);
}

.media-preview-avatar {
  justify-self: start;
  width: 8rem;
  height: 8rem;
  border-radius: 24px;
}

.media-preview-avatar .avatar {
  width: 100%;
  height: 100%;
  border-radius: 24px;
}

.media-preview-cover {
  aspect-ratio: 5 / 2;
}

.media-preview-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-empty {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.media-form {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.media-form .field-help {
  margin: 0 0 var(--space-2);
}

.media-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.media-actions .file-input {
  flex: 1 1 14rem;
  min-width: 0;
}

/* Logotipo enviado: a imagem substitui o nome do site. */
.brand-logo {
  height: 2.2rem;
  max-width: 12rem;
  object-fit: contain;
}

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

/* ==========================================================================
   Selo de verificação e comunidade oficial
   ========================================================================== */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.selo-cor-a { stop-color: var(--brand-primary); }
.selo-cor-b { stop-color: var(--brand-accent); }

.verified-badge {
  display: inline-block;
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.25em;
  vertical-align: -0.14em;
  filter: drop-shadow(0 1px 1px rgb(91 75 219 / 0.25));
}

.verified-badge.is-md { width: 1.25em; height: 1.25em; }
.verified-badge.is-lg { width: 0.85em; height: 0.85em; margin-left: 0.2em; vertical-align: -0.06em; }

.name-line {
  display: inline-flex;
  align-items: center;
  gap: 0;
  max-width: 100%;
}

/* Comunidade oficial (verificada): nome em degradê da marca. */
.is-official .community-title {
  background: linear-gradient(100deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 45%, var(--brand-accent)) 55%, var(--brand-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h1.is-official .community-title {
  padding-bottom: 0.05em;
}

@media (forced-colors: active) {
  .is-official .community-title {
    background: none;
    color: CanvasText;
  }
}

/* Requisitos e painel de verificação */
.verification-checklist {
  display: grid;
  gap: 0.35rem;
  margin: var(--space-3) 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.verification-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.verification-checklist .is-ok i {
  color: var(--color-success);
}

.verification-checklist .is-pending i {
  color: var(--color-text-muted);
}

.verification-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--space-3);
}

.verification-status .verified-badge {
  margin-left: 0;
}

.verification-admin .inline-form .input {
  flex: 1 1 16rem;
}

.verified-badge.is-muted {
  filter: grayscale(1);
  opacity: 0.45;
}

/* ==========================================================================
   Modal, seletor de fotos, editor de Markdown e caixa de publicação
   ========================================================================== */
html.has-modal {
  overflow: hidden;
}

.modal {
  width: min(42rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  color: var(--color-text);
  overflow: visible;
}

.modal::backdrop {
  background: rgb(20 16 40 / 0.45);
  backdrop-filter: blur(4px);
}

.modal-card {
  position: relative;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: var(--space-6);
  border-radius: 28px;
  background: var(--color-surface);
  box-shadow: 0 40px 90px -30px rgb(20 16 40 / 0.6);
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: 1.05rem;
  cursor: pointer;
}

.modal-close:hover {
  background: var(--color-primary-soft);
}

.modal .auth-form-wrap {
  width: 100%;
}

.modal .auth-head {
  padding-right: var(--space-7);
}

.modal .auth-head h1 {
  font-size: var(--text-2xl);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.modal .auth-icon {
  margin-bottom: var(--space-2);
}

.modal-loading {
  margin: 0;
  padding: var(--space-7) 0;
  color: var(--color-text-muted);
  text-align: center;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.modal .auth-switch {
  text-align: right;
}

.modal[open] .modal-card {
  animation: modal-in 260ms var(--ease-spring);
}

.modal[open]::backdrop {
  animation: modal-fade 200ms ease-out;
}


@keyframes modal-in {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes modal-fade {
  from { opacity: 0; }
}

@media (max-width: 640px) {
  .modal {
    width: 100vw;
    max-width: none;
    max-height: 100vh;
    margin: auto 0 0;
  }

  .modal-card {
    max-height: 92vh;
    padding: var(--space-5) var(--space-4);
    border-radius: 24px 24px 0 0;
  }
}

/* ---------- Seletor de fotos ---------- */
.image-picker {
  display: grid;
  gap: var(--space-2);
}

.image-existing,
.image-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.image-previews:empty {
  display: none;
}

.image-existing-item,
.image-preview {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--color-surface-2);
}

.image-existing-item img,
.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 200ms var(--ease), opacity 200ms var(--ease);
}

.image-existing-item.is-removed img {
  filter: grayscale(1);
  opacity: 0.35;
}

.image-existing-toggle {
  position: absolute;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0.4rem;
  display: flex;
  justify-content: center;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.image-existing-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.image-existing-toggle:has(input:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.image-existing-toggle .when-removed,
.image-existing-item.is-removed .when-keep {
  display: none;
}

.image-existing-item.is-removed .when-removed {
  display: inline;
}

.image-existing-item:not(.is-removed) .when-keep {
  color: var(--color-danger);
}

.image-preview-remove {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 50%;
  background: rgb(20 16 40 / 0.7);
  color: #ffffff;
  cursor: pointer;
}

.image-preview-remove:hover {
  background: var(--color-danger);
}

.image-picker-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.image-picker-button,
.composer-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 650;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.image-picker-button:hover,
.composer-chip:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.image-picker-button i,
.composer-chip > i {
  color: var(--color-primary-text);
}

.image-picker.is-full .image-picker-button,
.composer:has(.image-picker.is-full) label[for="composer-imagens"] {
  opacity: 0.5;
  pointer-events: none;
}

.image-picker-button:has(+ input:focus-visible),
.composer-chip:has(+ input:focus-visible) {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.image-picker-status {
  font-size: var(--text-xs);
}

.image-picker.is-compact .image-picker-button {
  display: none;
}

.image-picker.is-compact .image-picker-bar:has(.image-picker-status:empty) {
  display: none;
}

/* ---------- Editor de Markdown ---------- */
.md-editor {
  display: grid;
  gap: var(--space-2);
}

.md-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.md-tabs {
  display: inline-flex;
  margin-left: auto;
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
}

.md-tabs button {
  padding: 0.25rem 0.8rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.md-tabs button[aria-selected="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.md-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.md-toolbar[hidden] {
  display: none;
}

.md-tool {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.md-tool:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.md-preview {
  min-height: 6rem;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: 14px;
  background: var(--color-surface);
}

.md-help {
  margin: 0;
  font-size: var(--text-xs);
}

/* Conteúdo em Markdown (publicações de comunidade, Sobre, regras, visualização) */
.is-markdown > :first-child {
  margin-top: 0;
}

.is-markdown > :last-child {
  margin-bottom: 0;
}

.is-markdown p {
  margin: 0 0 0.7em;
}

.is-markdown h3,
.is-markdown h4,
.is-markdown h5 {
  margin: 0.9em 0 0.4em;
  line-height: 1.25;
}

.is-markdown h3 { font-size: 1.3em; }
.is-markdown h4 { font-size: 1.15em; }
.is-markdown h5 { font-size: 1em; }

.is-markdown ul,
.is-markdown ol {
  margin: 0 0 0.7em;
  padding-left: 1.4em;
}

.is-markdown li + li {
  margin-top: 0.2em;
}

.is-markdown blockquote {
  margin: 0 0 0.7em;
  padding: 0.4em 0.9em;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
}

.is-markdown code {
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.is-markdown pre {
  overflow-x: auto;
  margin: 0 0 0.7em;
  padding: 0.8em 1em;
  border-radius: 12px;
  background: #16141f;
  color: #f4f2fc;
}

.is-markdown pre code {
  padding: 0;
  background: none;
  color: inherit;
}

.is-markdown hr {
  margin: 1em 0;
  border: 0;
  border-top: 1px solid var(--color-border-strong);
}

/* ---------- Caixa de publicação ---------- */
.composer {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 28px;
  background: var(--color-surface);
  box-shadow: 0 16px 40px -30px rgb(40 30 90 / 0.5);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.composer:focus-within {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
  box-shadow: 0 0 0 4px var(--color-primary-soft), 0 16px 40px -30px rgb(40 30 90 / 0.5);
}

.composer-main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.composer-avatar {
  flex: none;
  padding-top: 0.15rem;
}

.composer-field {
  display: grid;
  flex: 1;
  gap: var(--space-3);
  min-width: 0;
}

.composer-text {
  min-height: 3.2rem;
  padding: 0.7rem 0.2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 1.08rem;
  resize: vertical;
}

.composer-text:focus {
  outline: none;
  box-shadow: none;
}

.composer .md-text {
  min-height: 5rem;
  border-color: var(--color-border);
  background: var(--color-surface-2);
}

.composer .field-counter {
  margin: 0;
}

.composer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.composer-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.composer-visibility select {
  padding: 0 0.2rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.composer-visibility select:focus-visible {
  outline: 2px solid var(--color-focus);
  border-radius: 6px;
}

.composer-scope {
  font-size: var(--text-sm);
}

.composer-submit {
  min-width: 7.5rem;
  min-height: 2.6rem;
  margin-left: auto;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(120deg, var(--dash-ink), color-mix(in srgb, var(--dash-ink) 70%, var(--brand-primary)));
  color: var(--dash-on-ink);
  font-weight: 750;
}

.composer-submit:hover {
  color: var(--dash-on-ink);
  filter: brightness(1.1);
}

@media (max-width: 560px) {
  .composer-avatar {
    display: none;
  }

  .composer-chip span {
    display: none;
  }

  .composer-visibility select {
    max-width: 8rem;
  }
}

.dash-pill {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.dash-pill:hover {
  color: var(--dash-on-ink);
}

.composer-visibility select {
  width: auto;
  min-height: 0;
}

/* ---------- Configurações da comunidade: duas colunas alinhadas ---------- */
.community-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(18rem, 24vw, 24rem);
  gap: var(--space-5);
  align-items: start;
}

.cs-main,
.cs-aside {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.cs-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
}

.community-settings .panel {
  margin: 0;
}

.community-settings .panel > h2 {
  margin-top: 0;
}

/* Campos ocupam a largura do painel (antes ficavam com larguras diferentes). */
.community-settings .form {
  max-width: none;
}

.community-settings .input,
.community-settings .select,
.community-settings .textarea {
  width: 100%;
  max-width: none;
}

.community-settings .media-row {
  grid-template-columns: 11rem minmax(0, 1fr);
}

.community-settings .media-preview-cover {
  aspect-ratio: 2 / 1;
}

@media (max-width: 1000px) {
  .community-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-aside {
    position: static;
  }
}

@media (max-width: 640px) {
  .community-settings .media-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Publicações: contorno e sombra leve ---------- */
.post {
  border: 1px solid color-mix(in srgb, var(--color-text) 9%, var(--post-bg));
  box-shadow: 0 1px 2px rgb(29 27 44 / 0.04), 0 10px 26px -18px rgb(29 27 44 / 0.35);
  transition: box-shadow 220ms var(--ease), transform 220ms var(--ease);
}

.post:hover {
  box-shadow: 0 1px 2px rgb(29 27 44 / 0.05), 0 16px 34px -18px rgb(29 27 44 / 0.42);
}

/* ---------- Compartilhar ---------- */
.share-menu {
  position: relative;
}

.share-dropdown {
  left: 0;
  right: auto;
  min-width: 13rem;
}

.share-whatsapp i { color: #25d366; }
.share-facebook i { color: #1877f2; }
.share-instagram i { color: #e1306c; }

/* ---------- Visualizador de imagens ---------- */
.image-zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.profile-avatar .image-zoom {
  width: auto;
  height: auto;
  border-radius: inherit;
}

.post-media a[data-lightbox] {
  cursor: zoom-in;
}

.post-media img,
.image-zoom img {
  -webkit-user-drag: none;
  user-select: none;
}

.viewer {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(10 8 20 / 0.92);
  color: #ffffff;
}

.viewer::backdrop {
  background: transparent;
}

.viewer-stage {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-7) var(--space-8);
}

.viewer-img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  border-radius: 12px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.8);
  transition: opacity 200ms var(--ease);
}

.viewer.is-loading .viewer-img {
  opacity: 0.35;
}

.viewer-caption {
  max-width: 50rem;
  margin: 0;
  color: rgb(255 255 255 / 0.75);
  font-size: var(--text-sm);
  text-align: center;
}

.viewer-count {
  position: absolute;
  top: var(--space-4);
  left: 50%;
  margin: 0;
  padding: 0.25rem 0.8rem;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.12);
  font-size: var(--text-sm);
  font-weight: 700;
  transform: translateX(-50%);
}

.viewer-count:empty {
  display: none;
}

.viewer-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  color: #ffffff;
  font-size: 1.2rem;
  cursor: pointer;
}

.viewer-btn:hover {
  background: rgb(255 255 255 / 0.26);
}

.viewer-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.viewer-close { top: var(--space-4); right: var(--space-4); }
.viewer-prev { top: 50%; left: var(--space-4); transform: translateY(-50%); }
.viewer-next { top: 50%; right: var(--space-4); transform: translateY(-50%); }

.viewer.is-single .viewer-prev,
.viewer.is-single .viewer-next {
  display: none;
}

.viewer[open] {
  animation: modal-fade 200ms ease-out;
}


@media (max-width: 640px) {
  .viewer-stage {
    padding: var(--space-7) var(--space-2);
  }

  .viewer-prev,
  .viewer-next {
    top: auto;
    bottom: var(--space-4);
    transform: none;
  }
}

/* ---------- Toasts ---------- */
.toast-region {
  position: fixed;
  z-index: 300;
  right: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  gap: var(--space-2);
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  overflow: hidden;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--toast-color);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 20px 40px -20px rgb(20 16 40 / 0.5);
  pointer-events: auto;
}

.toast > i {
  margin-top: 0.15rem;
  color: var(--toast-color);
  font-size: 1.1rem;
}

.toast p {
  flex: 1;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.toast-success { --toast-color: var(--color-success); }
.toast-info { --toast-color: var(--color-primary); }
.toast-warning { --toast-color: var(--color-warning); }
.toast-danger { --toast-color: var(--color-danger); }

.toast-close {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.toast-close:hover {
  background: var(--color-surface-2);
}

.toast-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--toast-color);
  opacity: 0.5;
  transform-origin: left;
  animation: toast-timer linear forwards;
}

.toast.is-paused .toast-timer {
  animation-play-state: paused;
}

.toast {
  animation: toast-in 320ms var(--ease-spring);
}

.toast.is-leaving {
  animation: toast-out 220ms ease-in forwards;
}


html[data-motion="reduced"] .toast-timer {
  display: none;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(30px); }
}

@keyframes toast-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (max-width: 640px) {
  .toast-region {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    width: auto;
  }
}

/* ---------- App Android (WebView com barra inferior nativa; ver app/Support/AppClient.php) ---------- */
/* A barra nativa já leva a Início, Comunidades, Publicar, Notificações e Perfil. */
.in-app .site-header .bell { display: none; }
.in-app .site-footer .footer-cta,
.in-app .dash-nav { display: none; }
.in-app body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
/* Espaço para a barra inferior (66 dp) não cobrir o fim da página nem os avisos. */
.has-app-nav .site-footer { padding-block-end: calc(4.75rem + var(--space-4)); }
.has-app-nav .toast-region { bottom: calc(4.75rem + var(--space-2)); }

/* ---------- Login: "lembrar de mim" ao lado de "esqueci minha senha" ---------- */
.login-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: calc(var(--space-2) * -1);
}
.login-options .checkbox { margin: 0; }
.login-options .form-aside-link { margin: 0; text-align: right; }

/* ==========================================================================
   Ajustes: abas das configurações, tópicos organizados, aprovação prévia,
   "sobre" da comunidade, logotipo do tema escuro, aviso de cookies.
   ========================================================================== */

/* ---------- Configurações da conta em abas ---------- */
.settings-tabs {
  position: sticky;
  top: calc(var(--header-h) + var(--space-2));
  z-index: 20;
  margin-bottom: var(--space-5);
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.settings-tabs ul {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.settings-tabs ul::-webkit-scrollbar { display: none; }
.settings-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.settings-tabs a:hover { color: var(--color-text); background: var(--color-surface-2); }
.settings-tabs a[aria-current="page"] {
  color: var(--color-primary-text);
  background: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.settings-content-full { display: grid; gap: var(--space-5); min-width: 0; padding-bottom: var(--space-8); }
@media (max-width: 760px) {
  .settings-tabs { border-radius: var(--radius-lg); }
  .settings-tabs a { padding: 0.4rem 0.8rem; }
}

/* ---------- Linha do tempo no celular ---------- */
@media (max-width: 760px) {
  /* Os mesmos atalhos estão no menu do topo (e na barra inferior do app). */
  .dash-nav { display: none; }
  .dash-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
  .dash-tile { padding: 0.35rem; gap: 0.2rem; }
  .dash-tile i { font-size: 1rem; }
  .dash-tile strong { font-size: 0.62rem; line-height: 1.15; }
}

/* ---------- Comunidade: "sobre" logo abaixo do nome ---------- */
.community-about {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem var(--space-3);
  max-width: 62ch;
  margin-top: var(--space-2);
}
.community-about-text {
  flex: 1 1 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.community-about-text > * { margin: 0; }
.community-about-text > * + * { margin-top: 0.35rem; }
.community-about-more { font-size: var(--text-sm); font-weight: 600; }

/* ---------- Tópicos: lista em seções ---------- */
.topics-page { display: grid; gap: var(--space-4); }
.topics-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.topic-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-text);
}
.topic-section-title::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.topic-list .topic-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}
.topic-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  color: var(--color-primary-text);
  background: var(--color-primary-soft);
}
.topic-link { display: grid; gap: 0.15rem; min-width: 0; }
.topic-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.topic-title strong { overflow-wrap: anywhere; }
.topic-meta { font-size: var(--text-xs); }

/* ---------- Página do tópico: coluna única e cabeçalho alinhado ---------- */
.topic-page { display: grid; gap: var(--space-4); max-width: none; }
.topic-back { margin: 0; }
.topic-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.topic-heading h2 { margin: 0; font-size: var(--text-xl); line-height: 1.25; overflow-wrap: anywhere; }
.topic-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin: 0.2rem 0 0; font-size: var(--text-sm); }
.topic-body { margin-top: var(--space-2); }
.topic-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.topic-pending { margin: 0 0 var(--space-3); }

/* ---------- Organizador de tópicos (arrastar e soltar) ---------- */
.topic-organizer { display: grid; gap: var(--space-4); }
.organizer-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.organizer-head h3 { margin: 0 0 0.25rem; }
.organizer-head p { margin: 0; max-width: 60ch; font-size: var(--text-sm); }
.organizer-groups { display: grid; gap: var(--space-3); }
.organizer-group {
  padding: var(--space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
.organizer-group.is-general { border-style: solid; background: transparent; }
.organizer-general { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.organizer-group-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.organizer-section-input { flex: 1; min-width: 0; font-weight: 700; }
.organizer-list { display: grid; gap: var(--space-2); min-height: 3rem; margin: 0; padding: 0; list-style: none; }
.organizer-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: 0.45rem 0.5rem 0.45rem 0.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.organizer-handle {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: grab;
  touch-action: none;
}
.organizer-handle:hover { color: var(--color-primary-text); background: var(--color-primary-soft); }
.organizer-section-icon { color: var(--color-primary-text); cursor: default; }
.organizer-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.organizer-moves { display: flex; gap: 0.15rem; }
.organizer-item.is-dragging {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  cursor: grabbing;
  transform: rotate(-1.5deg) scale(1.02);
  box-shadow: var(--shadow-lg);
}
.organizer-item.is-dropped { animation: organizer-drop 380ms var(--ease); }
.organizer-placeholder {
  border: 2px dashed color-mix(in srgb, var(--color-primary) 55%, transparent);
  border-radius: var(--radius);
  background: var(--color-primary-soft);
}
.organizer-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
@keyframes organizer-drop {
  0% { transform: scale(1.03); box-shadow: var(--shadow-lg); }
  100% { transform: none; }
}

/* ---------- Fila de aprovação prévia ---------- */
.review-queue { grid-column: 1 / -1; }
.review-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.review-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.review-content > p { margin: 0 0 0.3rem; }
.review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: var(--text-sm); }
.review-title { font-weight: 700; }
.review-excerpt { color: var(--color-text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.review-links { font-size: var(--text-sm); }
.review-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
@media (max-width: 640px) {
  .review-item { grid-template-columns: auto minmax(0, 1fr); }
  .review-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.post-pending { margin-top: 0.3rem; max-width: 100%; white-space: normal; text-align: left; }

/* ---------- Logotipo claro no tema escuro ---------- */
.logo-on-dark { display: none; }
:root[data-theme="dark"] .logo-on-light { display: none; }
:root[data-theme="dark"] .logo-on-dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-on-light { display: none; }
  :root:not([data-theme="light"]) .logo-on-dark { display: inline-block; }
}
.brand-preview-logo-escuro { background: #121119; }

/* Ícone do site no centro da órbita "Comunidades por interesse". */
.orbit-center img { width: 52%; height: 52%; object-fit: contain; }

/* ---------- Rodapé: preferência de animações ---------- */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.motion-toggle:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.motion-toggle[aria-pressed="true"] { color: var(--color-primary-text); background: var(--color-primary-soft); }

/* ---------- Aviso de cookies (página inicial) ---------- */
.cookie-banner {
  position: fixed;
  z-index: 400;
  right: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  width: min(30rem, calc(100vw - 2 * var(--space-4)));
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 380ms var(--ease), transform 480ms var(--ease);
}
.cookie-banner.is-visible { opacity: 1; transform: none; }
.cookie-banner-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 1.25rem;
  color: #8a5a00;
  background: #ffe7a3;
  animation: cookie-wobble 2.4s var(--ease) 600ms 2;
}
.cookie-banner-text p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.cookie-banner-text .cookie-banner-title { margin-bottom: 0.2rem; font-weight: 700; color: var(--color-text); }
.cookie-banner .btn { grid-column: 1 / -1; justify-self: end; }
@media (max-width: 640px) {
  .cookie-banner { right: var(--space-3); left: var(--space-3); bottom: var(--space-3); width: auto; }
  .cookie-banner .btn { justify-self: stretch; }
}
@keyframes cookie-wobble {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); }
}

/* ---------- App Android: nova publicação em painel e login mínimo ---------- */
.composer-sheet-cancel { margin: var(--space-3) 0 0; text-align: center; font-size: var(--text-sm); }
.modal .composer-sheet-cancel { display: none; }
@media (max-width: 640px) {
  /* No app, os modais sobem de baixo, ocupando a largura da tela (como uma folha do Android). */
  .in-app .modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
  }
  .in-app .modal-card {
    max-height: 92vh;
    padding: var(--space-5) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
  }
  .in-app .modal-card::before {
    content: "";
    display: block;
    width: 2.75rem;
    height: 0.3rem;
    margin: calc(var(--space-2) * -1) auto var(--space-3);
    border-radius: 999px;
    background: var(--color-border-strong);
  }
  .in-app .modal[open] { animation: sheet-up 320ms var(--ease); }
}
@keyframes sheet-up {
  from { transform: translateY(40%); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}
.modal .composer { box-shadow: none; }

.auth-minimal .site-header,
.auth-minimal .site-footer { display: none; }
.auth-minimal-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-6) var(--space-4);
}
.auth-minimal-card {
  display: grid;
  gap: var(--space-4);
  width: min(24rem, 100%);
}
.auth-minimal-logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-4);
  color: var(--color-text);
  font-size: 1.9rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  text-decoration: none;
  animation: auth-logo-in 520ms var(--ease) both;
}
.auth-minimal-logo .brand-mark { width: 3rem; height: 3rem; }
.auth-minimal-logo .brand-logo { height: 3rem; width: auto; }
.auth-minimal .auth-switch { text-align: center; }
@keyframes auth-logo-in {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Páginas institucionais: cabeçalho, menu em grupos, índice "Nesta página",
   resumos, tabelas, cartões e perguntas frequentes.
   ========================================================================== */
.legal-hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-7) 0 var(--space-6);
  background:
    radial-gradient(60% 120% at 100% 0%, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent 70%),
    radial-gradient(50% 120% at 0% 100%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 70%);
  border-bottom: 1px solid var(--color-border);
}
.legal-hero-inner { display: grid; gap: var(--space-2); max-width: 52rem; }
.legal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin: 0;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  font-size: var(--text-sm);
  font-weight: 700;
}
.legal-hero h1 {
  margin: var(--space-2) 0 0;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.legal-lead { margin: 0; max-width: 44rem; font-size: var(--text-lg); color: var(--color-text-muted); }
.legal-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.legal-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }

.legal-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr) 13rem;
  align-items: start;
  gap: var(--space-6);
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}
.legal-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: grid;
  gap: var(--space-4);
}
.legal-nav-title { margin: 0 0 var(--space-1); padding-left: 0.75rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.legal-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.legal-nav a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.legal-nav a i { width: 1.1rem; color: var(--color-text-muted); text-align: center; }
.legal-nav a:hover { background: var(--color-surface-2); }
.legal-nav a[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary-text); }
.legal-nav a[aria-current="page"] i { color: var(--color-primary-text); }

.legal-prose { max-width: 48rem; min-width: 0; }
.legal-prose h2 { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
.legal-intro { font-size: var(--text-lg); }

.legal-toc { position: sticky; top: calc(var(--header-h) + var(--space-4)); font-size: var(--text-sm); }
.legal-toc-title { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.legal-toc ol { display: grid; gap: 2px; margin: 0; padding: 0 0 0 var(--space-3); list-style: none; border-left: 2px solid var(--color-border); }
.legal-toc a { display: block; padding: 0.3rem 0; color: var(--color-text-muted); text-decoration: none; line-height: 1.35; }
.legal-toc a:hover { color: var(--color-text); }
.legal-toc a.is-active { color: var(--color-primary-text); font-weight: 700; }

.legal-summary {
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-soft), transparent 70%), var(--color-surface);
}
.legal-summary-title { margin: 0 0 var(--space-3); font-weight: 800; font-size: var(--text-lg); }
.prose .legal-summary ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.prose .legal-summary li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-2); margin: 0; }
.legal-summary li > i { margin-top: 0.25rem; color: var(--color-primary-text); }

.table-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.legal-table th, .legal-table td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.legal-table thead th { background: var(--color-surface-2); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.legal-table tbody tr:last-child > * { border-bottom: 0; }
.legal-table tbody th { font-weight: 700; color: var(--color-text); white-space: nowrap; }

.legal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-3); }
.legal-card {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.legal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.legal-card > i {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.25rem;
  border-radius: var(--radius);
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
}
.legal-card strong { font-size: var(--text-base); }
.legal-card span { color: var(--color-text-muted); font-size: var(--text-sm); }
.legal-card a { font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }

.legal-identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.legal-identity dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
.legal-identity dd { margin: 0.2rem 0 0; font-weight: 600; overflow-wrap: anywhere; }

.prose .faq + .faq { margin-top: var(--space-2); }
.faq {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.faq[open] { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); box-shadow: var(--shadow-sm); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-surface-2);
  font-size: 1.1rem;
  transition: transform 220ms var(--ease);
}
.faq[open] summary::after { transform: rotate(45deg); background: var(--color-primary-soft); color: var(--color-primary-text); }
.faq-body { padding: 0 var(--space-4) var(--space-4); }
.faq-body p { margin: 0; }
.faq[open] .faq-body { animation: faq-open 260ms var(--ease); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.prose .check-list { padding: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--space-2); }
.check-list li > i { margin-top: 0.25rem; color: var(--color-primary-text); }

.legal-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
}
.legal-callout > i { font-size: 1.5rem; color: var(--color-primary-text); }
.legal-callout p { margin: 0.2rem 0 0; }

@media (max-width: 1180px) {
  .legal-layout { grid-template-columns: 14rem minmax(0, 1fr); }
  .legal-toc { display: none; }
}
@media (max-width: 860px) {
  .legal-hero { padding: var(--space-6) 0 var(--space-5); }
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-top: var(--space-4); }
  /* Celular e app: o menu vira uma faixa rolável de pílulas, com a página atual em destaque. */
  .legal-nav {
    position: static;
    display: flex;
    gap: var(--space-2);
    margin-inline: calc(var(--space-4) * -1);
    padding: 0 var(--space-4) var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .legal-nav::-webkit-scrollbar { display: none; }
  .legal-nav-group { display: contents; }
  .legal-nav-title { display: none; }
  .legal-nav ul { display: contents; }
  .legal-nav a { white-space: nowrap; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); }
  .legal-nav a[aria-current="page"] { border-color: color-mix(in srgb, var(--color-primary) 40%, transparent); }
  .legal-table tbody th { white-space: normal; }
}
.legal-prose > h2:first-child { margin-top: 0; }

/* App Android 1.1 (sem esconder a barra): o painel sobe acima da barra inferior nativa (66 dp). */
@media (max-width: 640px) {
  .has-app-nav:not(.native-nav-hides) .modal {
    margin-bottom: 66px;
    max-height: calc(92vh - 66px);
  }
  .has-app-nav:not(.native-nav-hides) .modal-card { max-height: calc(92vh - 66px); }
}

/* Destaques no celular e no app: só a foto e o nome de cada comunidade, sem a capa. */
@media (max-width: 760px) {
  .dash-stories {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-1);
    scrollbar-width: none;
  }
  .dash-stories::-webkit-scrollbar { display: none; }
  .dash-stories > li { flex: 0 0 5rem; }
  .dash-story,
  .dash-story.tone-violet,
  .dash-story.tone-amber {
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
    background: none;
  }
  .dash-story > img,
  .dash-story-art { display: none; }
  .dash-story-tag {
    position: relative;
    inset: auto;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0;
    background: none;
    text-align: center;
    line-height: 1.2;
  }
  .dash-story-tag .avatar {
    width: 4rem;
    height: 4rem;
    font-size: 1.1rem;
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px color-mix(in srgb, var(--color-primary) 55%, transparent);
    transition: transform 220ms var(--ease);
  }
  .dash-story:hover .avatar { transform: scale(1.05); }
  .dash-story-tag > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }
  .dash-story-tag .verified-badge {
    position: absolute;
    top: 2.9rem;
    right: 0.35rem;
  }
}

/* Cadastro rápido: data de nascimento ocupa a linha inteira. */
.quick-field-wide { grid-column: 1 / -1; }

/* ==========================================================================
   Layout de painel nas áreas logadas (layouts/dash): menu da linha do tempo à
   esquerda e a página ao lado, sem a coluna da direita.
   ========================================================================== */
.dash-shell.dash-shell-page {
  grid-template-columns: clamp(15rem, 15vw, 19rem) minmax(0, 1fr);
}

/* As páginas trazem os próprios .container: dentro do painel eles ocupam a coluna toda. */
.dash-page-main .container,
.dash-page-main .container.app-grid {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.dash-page-main > :first-child {
  margin-top: 0;
}

@media (max-width: 1240px) {
  .dash-shell.dash-shell-page {
    grid-template-columns: 13.5rem minmax(0, 1fr);
  }
}

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

/* Itens do grid não crescem além da coluna (faixas de abas rolam dentro dela). */
.dash-page-main > *,
.dash-page-main .container {
  min-width: 0;
}

/* Configurações no painel: no desktop todas as abas ficam visíveis (quebram linha); no celular rolam. */
@media (min-width: 901px) {
  .dash-page-main .settings-tabs {
    border-radius: 22px;
  }

  .dash-page-main .settings-tabs ul {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Páginas com coluna lateral própria: no painel, ela desce para baixo do conteúdo antes de apertar. */
@media (max-width: 1240px) {
  .dash-page-main .communities-layout,
  .dash-page-main .page-split,
  .dash-page-main .profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Perfil público: "sobre" logo abaixo do nome ---------- */
/* Com o bloco, a foto fica alinhada ao topo do nome (não à base do texto). */
.profile-identity:has(.profile-about) {
  align-items: flex-start;
}

.profile-identity:has(.profile-about) .profile-names,
.profile-identity:has(.profile-about) .profile-actions {
  padding-top: var(--space-3);
}

.profile-about {
  max-width: 68ch;
  margin-top: var(--space-2);
}

.profile-about > p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
}

.profile-about-bio {
  color: var(--color-text);
}

.profile-about .chips {
  margin: var(--space-2) 0 0;
}

.profile-meta.profile-meta-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-2);
}

.profile-about-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

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

@media (max-width: 560px) {
  .profile-identity:has(.profile-about) .profile-names,
  .profile-identity:has(.profile-about) .profile-actions {
    padding-top: 0;
  }
}

/* ==========================================================================
   Página inicial: as grades mantêm as mesmas linhas do desktop em qualquer
   largura (3 etapas, 4 destaques, mosaico 3+3 e 2+2+2); em telas menores o
   conteúdo de cada cartão encolhe em vez de os cartões irem para baixo.
   ========================================================================== */
.steps-grid > li,
.landing-features li,
.bento > .bento-card {
  min-width: 0;
}

@media (max-width: 1100px) {
  .steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: var(--space-3);
  }

  .steps-grid > li {
    padding: var(--space-4) var(--space-4) 0;
    border-radius: 22px;
  }

  .steps-grid h3 {
    font-size: var(--text-base);
  }

  .steps-grid p {
    font-size: var(--text-sm);
  }

  .landing-features {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .landing-features li {
    padding: var(--space-3);
  }

  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .bento > .bento-orbit,
  .bento > .bento-recados {
    grid-column: span 3;
    grid-row: span 2;
  }

  .bento > .bento-reactions,
  .bento > .bento-privacy,
  .bento > .bento-safety {
    grid-column: span 2;
    grid-row: auto;
  }

  .bento > .bento-card {
    padding: var(--space-4);
    border-radius: 22px;
  }

  .orbit {
    width: min(100%, 15rem);
  }

  .orbit-item {
    width: 2.6rem;
    height: 2.6rem;
    margin: -1.3rem 0 0 -1.3rem;
    font-size: 0.95rem;
    transform: rotate(calc(var(--i) * 45deg)) translate(6rem) rotate(calc(var(--i) * -45deg));
  }
}

@media (max-width: 760px) {
  /* Etapas: três colunas estreitas. */
  .steps-grid {
    gap: var(--space-2);
  }

  .steps-grid > li {
    gap: 0.3rem;
    padding: 0.7rem 0.7rem 0;
    border-radius: 16px;
  }

  .step-num {
    width: 1.7rem;
    height: 1.7rem;
    font-size: 0.8rem;
  }

  .steps-grid h3 {
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .steps-grid p {
    font-size: 0.7rem;
    line-height: 1.35;
  }

  .step-shot {
    margin-top: 0.4rem;
    border-radius: 8px 8px 0 0;
  }

  .step-shot .browser-bar {
    padding: 0.25rem 0.4rem;
  }

  /* Destaques: ícone em cima, texto embaixo, os quatro na mesma linha. */
  .landing-features {
    gap: var(--space-2);
  }

  .landing-features li {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 0.65rem 0.35rem;
    border-radius: 16px;
    font-size: 0.68rem;
    line-height: 1.2;
    text-align: center;
  }

  .feature-badge {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    font-size: 0.85rem;
  }

  /* Mosaico: mesma disposição, conteúdo menor. */
  .bento {
    gap: var(--space-2);
  }

  .bento > .bento-card {
    gap: 0.3rem;
    min-height: 0;
    padding: 0.75rem;
    border-radius: 16px;
    overflow: hidden;
  }

  .bento-card h3 {
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .bento-card p {
    font-size: 0.7rem;
    line-height: 1.35;
  }

  .orbit {
    width: min(100%, 9.5rem);
    margin-bottom: var(--space-2);
  }

  .orbit-center {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 8%, transparent), 0 0 0 12px color-mix(in srgb, var(--color-primary) 4%, transparent);
  }

  .orbit-item {
    width: 1.6rem;
    height: 1.6rem;
    margin: -0.8rem 0 0 -0.8rem;
    font-size: 0.65rem;
    transform: rotate(calc(var(--i) * 45deg)) translate(3.8rem) rotate(calc(var(--i) * -45deg));
  }

  .mini-recado {
    gap: 0.4rem;
    padding: 0.45rem 0.55rem;
    border-radius: 12px;
    font-size: 0.62rem;
    line-height: 1.3;
  }

  .mini-recado .avatar {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.55rem;
  }

  .mini-recado p {
    margin: 0.1rem 0 0.3rem;
  }

  .mini-recado .chip,
  .mini-recado .status {
    padding: 0.1rem 0.35rem;
    font-size: 0.55rem;
  }

  .mini-recado-ok {
    margin-bottom: var(--space-2);
  }

  .bento-reaction-row {
    gap: 0.2rem;
  }

  .bento-reaction-row .reaction-face {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.7rem;
  }

  .mini-toggles li {
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    border-radius: 8px;
    font-size: 0.58rem;
  }

  .mini-toggles {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }

  .mini-switch {
    width: 1.6rem;
    height: 0.95rem;
  }

  .mini-switch::after {
    top: 0.13rem;
    left: 0.14rem;
    width: 0.7rem;
    height: 0.7rem;
  }

  .mini-switch.is-on::after {
    transform: translateX(0.62rem);
  }

  .bento-icon {
    width: 2rem;
    height: 2rem;
    font-size: 0.85rem;
  }

  .landing-link {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .steps-grid h3 {
    font-size: 0.74rem;
  }

  .steps-grid p,
  .bento-card p {
    font-size: 0.64rem;
  }

  .bento-card h3 {
    font-size: 0.74rem;
  }

  .landing-features li {
    font-size: 0.62rem;
  }

  /* Na faixa mais estreita, a segunda mensagem do exemplo de recados sai para caber. */
  .mini-recado-ok {
    display: none;
  }
}

/* Etapas: a captura fica sempre no pé do cartão, alinhada entre os três. */
.steps-grid > li {
  grid-template-rows: auto auto 1fr auto;
}

.step-shot {
  align-self: end;
}

@media (max-width: 480px) {
  /* Cartão de privacidade: dois interruptores bastam para ilustrar; a linha fica mais baixa. */
  .mini-toggles li:nth-child(3) {
    display: none;
  }
}

/* Cartões do mosaico e das etapas: a coluna interna nunca passa da largura do cartão
   (os interruptores e as mensagens de exemplo encolhem; o texto quebra linha). */
.bento > .bento-card,
.steps-grid > li {
  grid-template-columns: minmax(0, 1fr);
}

.bento-card p,
.steps-grid p {
  overflow-wrap: anywhere;
}

.mini-toggles li > span:first-child {
  min-width: 0;
}

/* Órbita do mosaico: raio cabendo no cartão estreito (3 de 6 colunas). */
@media (max-width: 760px) {
  .orbit-item {
    transform: rotate(calc(var(--i) * 45deg)) translate(3.5rem) rotate(calc(var(--i) * -45deg));
  }
}

@media (max-width: 480px) {
  .orbit {
    width: min(100%, 7rem);
  }

  .orbit-item {
    width: 1.3rem;
    height: 1.3rem;
    margin: -0.65rem 0 0 -0.65rem;
    font-size: 0.55rem;
    transform: rotate(calc(var(--i) * 45deg)) translate(2.75rem) rotate(calc(var(--i) * -45deg));
  }
}

/* ==========================================================================
   Mensageiro (docs/MENSAGEIRO.md)
   ========================================================================== */
.settings-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Temas da conversa: lista fechada no servidor; aqui só as cores (texto branco com contraste AA). */
.msg-chat,
.msg-swatch {
  --chat-accent: #6d28d9;
  --chat-soft: color-mix(in srgb, var(--chat-accent) 12%, var(--color-surface));
}
[data-chat-theme="azul"], .msg-swatch.theme-azul { --chat-accent: #1d4ed8; }
[data-chat-theme="rosa"], .msg-swatch.theme-rosa { --chat-accent: #be185d; }
[data-chat-theme="verde"], .msg-swatch.theme-verde { --chat-accent: #047857; }
[data-chat-theme="laranja"], .msg-swatch.theme-laranja { --chat-accent: #c2410c; }
[data-chat-theme="neutro"], .msg-swatch.theme-neutro { --chat-accent: #374151; }

.messenger {
  display: grid;
  grid-template-columns: minmax(16rem, 19rem) minmax(0, 1fr) minmax(13rem, 15rem);
  height: max(32rem, calc(100dvh - var(--header-h) - 7rem));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
}

.messenger .notice {
  grid-column: 1 / -1;
  margin: var(--space-3);
}

/* ---------- Coluna das conversas ---------- */
.msg-side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-right: 1px solid var(--color-border);
}

.msg-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4) var(--space-2);
}

.msg-side-head h1 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.msg-side-actions {
  display: flex;
  gap: 0.15rem;
}

.msg-search {
  position: relative;
  margin: 0 var(--space-4) var(--space-2);
}

.msg-search > i {
  position: absolute;
  top: 50%;
  left: 0.85rem;
  color: var(--color-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.msg-search .input {
  width: 100%;
  padding-left: 2.3rem;
  border-radius: var(--radius-pill);
}

.msg-tabs {
  display: flex;
  gap: var(--space-1);
  margin: 0 var(--space-4);
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
}

.msg-tabs button {
  flex: 1;
  min-height: 2.2rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 650;
  cursor: pointer;
}

.msg-tabs button[aria-selected="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.08);
}

.msg-online-count:not(:empty) {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.2rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-pill);
  background: #15803d;
  color: #fff;
  font-size: 0.7rem;
}

.msg-panel {
  flex: 1;
  min-height: 0;
  margin-top: var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
}

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

.msg-list,
.msg-friends-list {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  margin: 0;
  padding: 0 var(--space-2) var(--space-3);
  list-style: none;
}

.msg-item,
.msg-friend-button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0.6rem var(--space-2);
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.msg-item:hover,
.msg-friend-button:hover,
.msg-item:focus-visible,
.msg-friend-button:focus-visible {
  background: var(--color-surface-2);
}

.msg-item[aria-current="page"] {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}

.msg-item-body,
.msg-friend-names {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 0.1rem;
}

.msg-item-top,
.msg-item-bottom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.msg-item-name,
.msg-friend-names strong {
  overflow: hidden;
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-item-time {
  flex: none;
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.msg-item-preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-item.has-unread .msg-item-name,
.msg-item.has-unread .msg-item-preview {
  color: var(--color-text);
  font-weight: 750;
}

.msg-item-muted {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.msg-unread {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--brand-on-primary, #fff);
  font-size: 0.7rem;
  font-weight: 750;
}

.msg-friend {
  margin: 0;
}

.msg-friend-status {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.msg-friend-status.is-online { color: #15803d; }
.msg-friend-status.is-away { color: #b45309; }

.msg-friend-go {
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 150ms ease;
}

.msg-friend-button:hover .msg-friend-go,
.msg-friend-button:focus-visible .msg-friend-go {
  opacity: 1;
}

.msg-friends-none {
  padding: var(--space-2);
  font-size: var(--text-sm);
}

.msg-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.msg-empty[hidden] {
  display: none;
}

.msg-empty > i {
  color: var(--color-text-muted);
  font-size: 1.6rem;
}

.msg-empty p {
  margin: 0;
}

/* Avatar com bolinha de presença (verde online, âmbar ausente; offline sem bolinha). */
.msg-avatar {
  position: relative;
  display: inline-flex;
  flex: none;
}

.msg-avatar[data-presence="online"]::after,
.msg-avatar[data-presence="away"]::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: #16a34a;
}

.msg-avatar[data-presence="away"]::after {
  background: #f59e0b;
}

/* ---------- Conversa ---------- */
.msg-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: linear-gradient(180deg, var(--chat-soft), var(--color-surface) 42%);
}

.msg-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-6);
  text-align: center;
}

.msg-placeholder h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.msg-placeholder p {
  max-width: 26rem;
  margin: 0;
}

.msg-placeholder-art {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 24px;
  background: var(--chat-soft);
  color: var(--chat-accent);
  font-size: 1.8rem;
}

.msg-chat-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
}

.msg-back {
  display: none;
}

.msg-chat-person {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  color: var(--color-text);
  text-decoration: none;
}

.msg-chat-names {
  display: grid;
  min-width: 0;
}

.msg-chat-names strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-chat-names .muted {
  font-size: var(--text-xs);
}

.msg-chat-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.msg-chat-actions form {
  margin: 0;
}

.msg-theme-menu {
  right: 0;
  left: auto;
}

.msg-theme-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.msg-theme-menu .dropdown-item[aria-current="true"] {
  font-weight: 750;
}

.msg-swatch {
  display: inline-block;
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--chat-accent);
}

.msg-connection {
  margin: 0;
  padding: 0.35rem var(--space-4);
  background: #fef3c7;
  color: #78350f;
  font-size: var(--text-xs);
  font-weight: 650;
  text-align: center;
}

.msg-connection[hidden] {
  display: none;
}

.msg-scroll {
  flex: 1;
  min-height: 0;
  padding: var(--space-3) var(--space-4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.msg-older {
  display: flex;
  margin: 0 auto var(--space-3);
}

.msg-older[hidden] {
  display: none;
}

.msg-log {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.msg-day {
  align-self: center;
  margin: var(--space-3) 0 var(--space-1);
  padding: 0.2rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 650;
}

.msg {
  display: grid;
  justify-items: start;
  max-width: min(78%, 36rem);
}

.msg.is-mine {
  align-self: flex-end;
  justify-items: end;
}

.msg-bubble {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.55rem 0.85rem;
  border-radius: 18px 18px 18px 6px;
  background: var(--color-surface-2);
  color: var(--color-text);
}

.msg.is-mine .msg-bubble {
  border-radius: 18px 18px 6px 18px;
  background: var(--chat-accent);
  color: #fff;
}

.msg-text {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.msg.is-mine .msg-text a {
  color: #fff;
  text-decoration: underline;
}

.msg-bubble.is-emoji {
  padding: 0;
  background: transparent;
}

.msg.is-mine .msg-bubble.is-emoji {
  background: transparent;
  color: var(--color-text);
}

.msg-bubble.is-emoji .msg-text {
  font-size: 2.4rem;
  line-height: 1.15;
}

.msg-bubble.is-deleted,
.msg.is-mine .msg-bubble.is-deleted {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px dashed var(--color-border-strong);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

.msg-photo,
.msg-photo-local {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}

.msg-photo img,
.msg-photo-local {
  display: block;
  width: 100%;
  max-width: 18rem;
  height: auto;
  max-height: 20rem;
  object-fit: cover;
}

.msg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.5rem;
  padding: 0.1rem 0.3rem 0;
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.msg-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.msg-status.is-read { color: var(--chat-accent); font-weight: 700; }
.msg-status.is-failed { color: #b91c1c; font-weight: 700; }

.msg-retry {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-primary-text);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.msg-tools {
  display: inline-flex;
  gap: 0.1rem;
  opacity: 0;
  transition: opacity 150ms ease;
}

.msg:hover .msg-tools,
.msg:focus-within .msg-tools {
  opacity: 1;
}

@media (hover: none) {
  .msg-tools { opacity: 1; }
}

.msg-tool {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.msg-tool:hover,
.msg-tool:focus-visible {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.msg-system {
  display: flex;
  align-self: center;
  align-items: center;
  gap: 0.4rem;
  max-width: 90%;
  margin: var(--space-2) 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: center;
}

.msg-system i {
  color: var(--chat-accent);
}

/* Efeitos discretos: entrada suave, leve escala ao enviar, realce que some e emoji que "salta". */
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes msg-send {
  from { opacity: 0.4; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

@keyframes msg-glow {
  from { box-shadow: 0 0 0 4px color-mix(in srgb, var(--chat-accent) 22%, transparent); }
  to { box-shadow: 0 0 0 0 transparent; }
}

@keyframes msg-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.msg.is-new { animation: msg-in 260ms ease-out both; }
.msg.is-new .msg-bubble { animation: msg-glow 1.8s ease-out both; }
.msg.is-sent-anim { transform-origin: right bottom; animation: msg-send 220ms ease-out both; }
.msg.is-emoji-pop .msg-bubble.is-emoji .msg-text { display: inline-block; animation: msg-pop 420ms ease-out both; }
.msg-chat,
.msg.is-mine .msg-bubble { transition: background-color 300ms ease; }

/* Movimento: segue a preferência do site (html[data-motion], botão "Reduzir animações"; decisão D81). */
html[data-motion="reduced"] .msg,
html[data-motion="reduced"] .msg *,
html[data-motion="reduced"] .msg-chat {
  animation: none !important;
  transition: none !important;
}


.msg-readonly {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ---------- Compositor ---------- */
.msg-composer {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.msg-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 0.2rem;
}

.msg-input {
  flex: 1;
  min-width: 0;
  min-height: 2.6rem;
  max-height: 10rem;
  padding: 0.6rem 0.9rem;
  border-radius: 20px;
  line-height: 1.4;
  resize: none;
}

.msg-send {
  flex: none;
  border-color: var(--chat-accent);
  background: var(--chat-accent);
  color: #fff;
}

.msg-attach {
  position: relative;
  cursor: pointer;
}

.msg-attach:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.msg-photo-preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-2);
}

.msg-photo-preview[hidden] {
  display: none;
}

.msg-photo-preview img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 10px;
  object-fit: cover;
}

.msg-photo-preview .muted {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-composer-error {
  margin: 0;
  color: #b91c1c;
  font-size: var(--text-sm);
  font-weight: 650;
}

.msg-composer-error[hidden] {
  display: none;
}

/* ---------- Emojis ---------- */
.msg-emoji {
  position: relative;
}

.emoji-panel {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 30;
  display: grid;
  gap: var(--space-2);
  width: min(21rem, calc(100vw - 2rem));
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

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

.emoji-search {
  width: 100%;
  border-radius: var(--radius-pill);
}

.emoji-cats {
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.emoji-cat {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 1.15rem;
  cursor: pointer;
}

.emoji-cat[aria-selected="true"] {
  background: var(--color-surface-2);
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  max-height: 13rem;
  overflow-y: auto;
}

.emoji-cell {
  aspect-ratio: 1;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.emoji-cell:hover,
.emoji-cell:focus-visible {
  background: var(--color-surface-2);
}

.emoji-empty {
  margin: 0;
  font-size: var(--text-sm);
  text-align: center;
}

.emoji-empty[hidden] {
  display: none;
}

/* ---------- Amigos online (painel largo) ---------- */
.msg-presence {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--color-border);
}

.msg-presence h2 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: var(--space-4) var(--space-4) var(--space-2);
  font-size: var(--text-sm);
}

.msg-dot-online {
  color: #16a34a;
  font-size: 0.6rem;
}

.msg-presence .msg-friends-list {
  flex: 1;
  overflow-y: auto;
}

.msg-presence-note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
}

/* ---------- Responsivo ---------- */
@media (max-width: 1400px) {
  .messenger {
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
  }

  .msg-presence {
    display: none;
  }
}

@media (max-width: 900px) {
  .messenger {
    grid-template-columns: minmax(0, 1fr);
    height: calc(100dvh - var(--header-h) - 2.5rem);
    min-height: 26rem;
    border-radius: 18px;
  }

  .messenger.is-open .msg-side,
  .messenger:not(.is-open) .msg-chat {
    display: none;
  }

  .msg-side {
    border-right: 0;
  }

  .msg-back {
    display: inline-flex;
  }

  /* Conversa aberta no celular: tela cheia, sem o cartão do painel por cima. */
  .messenger-has-open .dash-left {
    display: none;
  }

  .msg {
    max-width: 88%;
  }

  .msg-scroll {
    padding: var(--space-3);
  }

  .msg-composer {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
}

/* Mensageiro: atalho no cabeçalho do celular continua visível no app (a barra nativa não tem a aba). */
.in-app .site-header .msg-header-link.bell { display: inline-flex; }

.msg-input::placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Mensageiro: responder, reagir e editar ---------- */
.msg {
  position: relative;
}

.msg-quote {
  display: grid;
  gap: 0.05rem;
  max-width: 100%;
  padding: 0.35rem 0.6rem;
  border: 0;
  border-left: 3px solid var(--chat-accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
}

.msg.is-mine .msg-quote {
  border-left-color: rgb(255 255 255 / 0.85);
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}

.msg-quote span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  opacity: 0.85;
}

.msg.is-target .msg-bubble {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 35%, transparent);
}

.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: -0.35rem;
  padding: 0 0.4rem;
}

.msg-reaction {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-height: 1.6rem;
  padding: 0.1rem 0.45rem 0.1rem 0.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.msg-reaction[aria-pressed="true"] {
  border-color: var(--chat-accent);
  background: color-mix(in srgb, var(--chat-accent) 10%, var(--color-surface));
}

.msg-reaction:disabled {
  cursor: default;
}

.msg-reaction .reaction-face,
.msg-react-option .reaction-face {
  width: 1.3rem;
  height: 1.3rem;
  font-size: 0.7rem;
}

.msg-react-picker {
  position: absolute;
  bottom: calc(100% - 0.6rem);
  z-index: 20;
  display: flex;
  gap: 0.15rem;
  padding: 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.msg.is-mine .msg-react-picker {
  right: 0;
}

.msg.is-theirs .msg-react-picker {
  left: 0;
}

.msg-react-option {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.msg-react-option .reaction-face {
  width: 1.8rem;
  height: 1.8rem;
  font-size: 0.95rem;
}

.msg-react-option:hover,
.msg-react-option:focus-visible,
.msg-react-option[aria-pressed="true"] {
  background: var(--color-surface-2);
}

.msg-edited {
  font-style: italic;
}

.msg-context {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
  border-left: 3px solid var(--chat-accent);
  border-radius: 10px;
  background: var(--color-surface-2);
  font-size: var(--text-xs);
}

.msg-context[hidden] {
  display: none;
}

.msg-context > i {
  color: var(--chat-accent);
}

.msg-context-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.msg-context-text span {
  overflow: hidden;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msg-attach:has(input:disabled) {
  opacity: 0.4;
  pointer-events: none;
}

/* App 1.4+: Mensagens está na barra nativa; Notificações volta ao sino do cabeçalho. */
.in-app.app-messages-tab .site-header .bell:not(.msg-header-link) { display: inline-flex; }
.in-app.app-messages-tab .site-header .msg-header-link.bell { display: none; }