@import "tokens.css";

/*
 * styles.css — app principal (index.html), visual v3 "app nativo".
 *
 * Fonte do sistema, superfícies chapadas, UMA cor de ação (amarelo com texto
 * quase preto), verde só para estados. Cores sempre dos tokens (tokens.css):
 * o tema escuro funciona sozinho.
 *
 * Contrato com chat.css / map.css (não renomear):
 *   --app-top     altura ocupada no topo pela casca (barra do topo + área segura)
 *   --app-bottom  altura ocupada embaixo pelo dock flutuante (+ área segura)
 *   --sidebar-w   largura da barra lateral (0 no celular)
 *   body[data-route], body.is-immersive, body.layout-full, body.no-appbar,
 *   body.no-dock, html.jpd-chat-route, html.jpd-chat-thread-open
 *
 * Sumário
 *   1. Base            6. Avatares, fotos, blocos     11. Busca e filtros
 *   2. Casca           7. Estados e esqueletos        12. Perfil
 *   3. Botões          8. Diálogos, menu, avisos      13. Seguir em sequência
 *   4. Selos e chips   9. Formulários                 14. Entrar (passos)
 *   5. Listas         10. Descobrir                   15. Configurações
 *                                                     16. Recortador, cidade, Turnstile
 *                                                     17. Animações
 */

/* Variáveis derivadas (mesmo esquema de seletores de tokens.css). */
:root {
  --appbar-h: 56px;
  --dock-h: 64px;
  --dock-gap: 12px;
  --content-w: 640px;
  --sidebar-w: 0px;
  --app-top: calc(var(--appbar-h) + env(safe-area-inset-top, 0px));
  --app-bottom: calc(var(--dock-h) + var(--dock-gap) * 2 + env(safe-area-inset-bottom, 0px));

  --dock-bg: #ffffff;
  --dock-border: rgba(16, 18, 24, .06);
  --group-bg: #ffffff;
  --group-border: var(--border);
  --seg-on: #ffffff;
  --switch-on: var(--ink);
  --tab-indicator: var(--ink);
  --check: var(--ink);
  --toast-bg: #16181d;
  --toast-text: #ffffff;
  --scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .18) 35%, rgba(0, 0, 0, .7) 100%);
  --fab-shadow: 0 6px 16px rgba(204, 160, 0, .38);
  --avatar-gap: var(--bg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dock-bg: #2a2d36;
    --dock-border: rgba(255, 255, 255, .06);
    --group-bg: var(--surface);
    --group-border: transparent;
    --seg-on: var(--surface-3);
    --switch-on: var(--primary);
    --tab-indicator: var(--primary);
    --check: var(--primary);
    --toast-bg: #3a3e49;
    --fab-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --dock-bg: #2a2d36;
  --dock-border: rgba(255, 255, 255, .06);
  --group-bg: var(--surface);
  --group-border: transparent;
  --seg-on: var(--surface-3);
  --switch-on: var(--primary);
  --tab-indicator: var(--primary);
  --check: var(--primary);
  --toast-bg: #3a3e49;
  --fab-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

/* ================================================================ 1. BASE */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Página não rola por trás de um diálogo aberto. */
html:has(dialog[open]) {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: var(--app-top);
  padding-bottom: var(--app-bottom);
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
}

a {
  color: inherit;
  text-underline-offset: .18em;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--primary-soft);
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Foco visível consistente (outline transparente mantém o foco no alto contraste). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

:where([tabindex="-1"]):focus:not(:focus-visible),
:where(h1, h2, h3, h4, section, main)[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus {
  transform: none;
}

.noscript,
.boot-error {
  position: fixed;
  inset: auto 16px 16px;
  z-index: 300;
  margin: 0;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--warning-soft);
  color: var(--text);
  text-align: center;
  font-weight: 600;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font: 600 var(--fs-xs)/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center;
}

.hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ================================================================ 2. CASCA */

.app {
  min-height: 100vh;
  min-height: 100dvh;
}

.app-main {
  min-width: 0;
  outline: none;
}

.app-outlet {
  min-height: calc(100dvh - var(--app-top) - var(--app-bottom));
}

.view {
  min-width: 0;
}

.page {
  width: 100%;
  max-width: calc(var(--content-w) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 8px var(--gutter) 32px;
}

/* Mapa e mensagens ocupam a área inteira. */
.view--full,
html.jpd-chat-route .app-outlet {
  max-width: none;
  padding: 0;
}

body.layout-full .app-outlet {
  min-height: 0;
}

/* Rotas sem barra do topo/dock (a tela tem cabeçalho próprio). */
body.no-appbar {
  --app-top: env(safe-area-inset-top, 0px);
}

body.no-dock {
  --app-bottom: 0px;
}

body.is-immersive {
  --app-top: 0px;
  --app-bottom: 0px;
}

body.no-appbar .appbar,
body.no-dock .dock,
body.is-immersive .appbar,
body.is-immersive .dock {
  display: none;
}

@media (max-width: 1023.98px) {
  html.jpd-chat-thread-open body {
    --app-top: 0px;
    --app-bottom: 0px;
  }

  html.jpd-chat-thread-open .appbar,
  html.jpd-chat-thread-open .dock {
    display: none;
  }
}

/* ---------------------------------------------------- marca (logo + nome) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  min-width: 0;
  color: var(--text);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  border-radius: var(--r-sm);
}

.brand__mark {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
}

.brand__name {
  white-space: nowrap;
}

/* ------------------------------------------------------------ barra do topo */
.appbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--app-top);
  padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  background: var(--surface-glass);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  backdrop-filter: saturate(1.8) blur(18px);
}

.appbar__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.appbar__login {
  margin-left: 6px;
}

/* ------------------------------------------------------- dock flutuante */
.dock {
  position: fixed;
  left: max(var(--dock-gap), env(safe-area-inset-left, 0px));
  right: max(var(--dock-gap), env(safe-area-inset-right, 0px));
  bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr 68px 1fr 1fr;
  align-items: center;
  max-width: 440px;
  height: var(--dock-h);
  margin: 0 auto;
  padding: 0 6px;
  border: 1px solid var(--dock-border);
  border-radius: var(--r-full);
  background: var(--dock-bg);
  box-shadow: var(--shadow-lg);
}

.dock__item {
  display: grid;
  place-items: center;
  height: 100%;
  min-width: 0;
  color: var(--text-muted);
  text-decoration: none;
}

.dock__pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 60px;
  height: 50px;
  border-radius: 18px;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.dock__item:active .dock__pill {
  transform: scale(.94);
}

.dock .icon {
  width: 24px;
  height: 24px;
}

.dock__label {
  display: none;
  max-width: 100%;
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dock__item[aria-current="page"] {
  color: var(--text);
}

.dock__item[aria-current="page"] .dock__pill {
  background: var(--surface-2);
}

.dock__item[aria-current="page"] .dock__label {
  display: block;
}

.dock__item[aria-current="page"] .icon {
  stroke-width: 2.2;
}

.dock__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}

.dock__badge {
  position: absolute;
  top: -5px;
  right: -11px;
  border: 2px solid var(--dock-bg);
  box-sizing: content-box;
}

.dock__item[aria-current="page"] .dock__badge {
  border-color: var(--surface-2);
}

.dock__item[aria-current="page"] .avatar--nav .avatar__inner {
  box-shadow: 0 0 0 1.5px var(--surface-2), 0 0 0 3px var(--text);
}

.dock__center {
  display: grid;
  place-items: center;
}

.dock__fab {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--fab-shadow);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.dock__fab:hover {
  background: var(--primary-hover);
}

.dock__fab:active {
  transform: scale(.92);
}

.dock__fab .icon {
  width: 26px;
  height: 26px;
  stroke-width: 2.4;
}

/* ------------------------------------------------- barra lateral (desktop) */
.sidebar {
  display: none;
}

.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text);
  font: 500 1rem/1.2 var(--font-body);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}

.side-link:hover {
  background: var(--surface-2);
}

.side-link[aria-current="page"] {
  background: var(--surface-2);
  font-weight: 700;
}

.side-link[aria-current="page"] .icon {
  stroke-width: 2.3;
}

.side-link .icon {
  width: 24px;
  height: 24px;
}

.side-link__avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.side-link__count {
  margin-left: auto;
}

.side-theme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.side-theme .icon {
  width: 18px;
  height: 18px;
}

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

@media (min-width: 1024px) {
  :root {
    --sidebar-w: 248px;
    --app-top: 0px;
    --app-bottom: 0px;
  }

  body.no-appbar,
  body.is-immersive {
    --app-top: 0px;
  }

  .appbar,
  .dock {
    display: none !important;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: var(--sidebar-w);
    padding: 20px 12px 16px;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    background: var(--bg);
  }

  .sidebar__brand {
    margin: 0 0 18px;
    padding: 0 10px;
    font-size: 1.5rem;
  }

  .sidebar__brand .brand__mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .sidebar__cta {
    margin: 18px 4px 0;
  }

  .sidebar__foot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding: 16px 12px 0;
  }

  .sidebar__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    font-size: var(--fs-xs);
  }

  .sidebar__legal a {
    color: var(--text-muted);
    text-decoration: none;
  }

  .sidebar__legal a:hover {
    color: var(--text);
    text-decoration: underline;
  }

  .sidebar__copy {
    color: var(--text-subtle);
    font-size: 11px;
    line-height: 1.4;
  }

  .app-main {
    margin-left: var(--sidebar-w);
  }

  .page {
    padding-top: 24px;
  }
}

/* Carregando entre páginas: barrinha no topo. */
html.is-navigating::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  width: 40%;
  height: 2px;
  background: var(--primary);
  animation: nav-progress 1s var(--ease) infinite;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 160ms;
}

.boot {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

.boot__logo {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  animation: boot-pulse 1.2s var(--ease) infinite alternate;
}

/* Cabeçalho de tela "empilhada" (voltar · título · ação). */
.stack-head {
  position: sticky;
  top: var(--app-top);
  z-index: 20;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  height: 52px;
  margin: -8px calc(-1 * var(--gutter)) 0;
  padding: 0 4px;
  background: var(--surface-glass);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  backdrop-filter: saturate(1.8) blur(18px);
}

.stack-head__title {
  overflow: hidden;
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stack-head__end {
  justify-self: end;
}

@media (min-width: 1024px) {
  .stack-head {
    margin-top: -24px;
  }
}

/* ============================================================== 3. BOTÕES */

.btn {
  --btn-h: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text);
  font: 600 var(--fs-base)/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast);
}

.btn:active:not(:disabled) {
  transform: scale(.97);
}

.btn:disabled {
  opacity: .5;
}

.btn.is-loading {
  cursor: progress;
  opacity: .85;
}

.btn .icon {
  width: 1.2em;
  height: 1.2em;
}

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn--primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.btn--secondary {
  background: var(--surface-2);
  color: var(--text);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--surface-3);
}

.btn--ink {
  background: var(--ink);
  color: var(--on-ink);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--surface-2);
}

.btn--danger {
  background: var(--danger);
  color: #fff;
}

.btn--danger:hover:not(:disabled) {
  filter: brightness(.94);
}

.btn--sm {
  --btn-h: 36px;
  padding: 0 14px;
  font-size: var(--fs-sm);
}

/* Área de toque de 44px mesmo em botões menores. */
.btn--sm::after {
  content: "";
  position: absolute;
  inset: -4px -2px;
}

.btn--lg {
  --btn-h: 52px;
  padding: 0 24px;
  font-size: var(--fs-md);
}

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

/* "Seguir" no Instagram já aberto: continua link, mas neutro. */
.btn--follow.is-visited {
  background: var(--surface-2);
  color: var(--text);
}

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast);
}

.icon-btn .icon {
  width: 24px;
  height: 24px;
}

.icon-btn:hover:not(:disabled) {
  background: var(--surface-2);
}

.icon-btn:active:not(:disabled) {
  transform: scale(.94);
}

.icon-btn:disabled {
  opacity: .4;
}

.icon-btn--filled {
  width: 40px;
  height: 40px;
  background: var(--surface-2);
}

.icon-btn--filled .icon {
  width: 20px;
  height: 20px;
}

.icon-btn--filled:hover:not(:disabled) {
  background: var(--surface-3);
}

.icon-btn--primary {
  width: 40px;
  height: 40px;
  background: var(--primary);
  color: var(--on-primary);
}

.icon-btn--primary .icon {
  width: 20px;
  height: 20px;
}

.icon-btn--primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.icon-btn--glass {
  width: 40px;
  height: 40px;
  background: var(--surface-glass);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
}

.icon-btn--glass .icon {
  width: 22px;
  height: 22px;
}

.icon-btn--glass:hover:not(:disabled) {
  background: var(--surface);
}

.icon-btn--sm {
  width: 36px;
  height: 36px;
}

.icon-btn--sm .icon {
  width: 18px;
  height: 18px;
}

.icon-btn.is-loading {
  opacity: .6;
  cursor: progress;
}

.icon-btn__badge {
  position: absolute;
  top: 3px;
  right: 1px;
  border: 2px solid var(--bg);
  box-sizing: content-box;
}

.dot-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface-2);
  border-radius: 50%;
  background: var(--primary);
  box-sizing: content-box;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: .22em;
}

.link-btn:hover {
  text-decoration-color: currentColor;
}

.link-btn .icon {
  width: 18px;
  height: 18px;
  text-decoration: none;
}

.spinner {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.spinner--lg {
  width: 28px;
  height: 28px;
  border-width: 3px;
  color: var(--text-muted);
}

/* ======================================================= 4. SELOS E CHIPS */

.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge--accent {
  background: var(--accent-soft);
  color: var(--accent);
}

.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* Chips selecionáveis (checkbox/radio escondido + rótulo). */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-check {
  position: relative;
  display: inline-flex;
}

.chip-check__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip-check__label {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.chip-check:hover .chip-check__label {
  background: var(--surface-3);
}

.chip-check__input:checked + .chip-check__label {
  background: var(--ink);
  color: var(--on-ink);
}

.chip-check__input:focus-visible + .chip-check__label {
  box-shadow: var(--focus-ring);
}

.chip-check.is-disabled .chip-check__label {
  opacity: .4;
}

.chip-check.is-disabled .chip-check__input {
  cursor: not-allowed;
}

/* Filtros ativos: uma fileira compacta. */
.filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-row::-webkit-scrollbar {
  display: none;
}

.filter-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 8px 0 12px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.filter-pill .icon {
  width: 15px;
  height: 15px;
  opacity: .8;
}

.filter-row__clear {
  flex: none;
  height: 32px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ================================================================ 5. LISTAS */

/* Linha de pessoa (busca, listas, aniversariantes). */
.person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
}

.person__main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 0;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--r-md);
}

.person__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.person__name {
  overflow: hidden;
  font-size: var(--fs-base);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person__sub {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.people-list > * + * .person,
.search__results > [role="listitem"] + [role="listitem"] .person {
  border-top: 1px solid var(--border);
}

/* Linhas "ícone · rótulo · valor" (Sobre). */
.info-list,
.link-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-row {
  display: grid;
  grid-template-columns: 22px auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

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

.info-row__icon .icon {
  width: 20px;
  height: 20px;
}

.info-row__label {
  font-size: var(--fs-base);
}

.info-row__value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-base);
  text-align: right;
}

.link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.link-row__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--surface-2);
}

.link-row__icon .icon {
  width: 20px;
  height: 20px;
}

.link-row__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.link-row__title {
  font-weight: 600;
}

.link-row__sub {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-row__chev {
  width: 18px;
  height: 18px;
  color: var(--text-subtle);
}

.panel-title {
  margin: 24px 0 10px;
  font-size: var(--fs-md);
  font-weight: 700;
}

.panel-empty {
  padding: 32px 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.panel-loading {
  display: grid;
  place-items: center;
  padding: 32px 0;
  color: var(--text-muted);
}

/* Texto (abas) com indicador sublinhado. */
.tabs {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs__tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}

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

.tabs__tab[aria-selected="true"] {
  color: var(--text);
  font-weight: 700;
}

.tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--tab-indicator);
}

.tabs--fill {
  gap: 0;
}

.tabs--fill .tabs__tab {
  flex: 1 1 0;
}

.tabs--fill .tabs__tab[aria-selected="true"]::after {
  right: 50%;
  left: 50%;
  width: 56px;
  transform: translateX(-50%);
}

/* ============================================ 6. AVATARES, FOTOS, BLOCOS */

.avatar {
  --size: 44px;
  position: relative;
  display: inline-grid;
  width: var(--size);
  height: var(--size);
  flex: none;
  padding: 2px;
  border-radius: 50%;
  background: var(--ring-gradient);
}

.avatar__inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 2px solid var(--avatar-gap);
  border-radius: 50%;
  background: var(--tone, var(--surface-3));
}

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

.avatar__initials {
  color: rgba(255, 255, 255, .95);
  font-size: calc(var(--size) * .36);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}

.avatar--plain {
  padding: 0;
  background: none;
}

.avatar--plain .avatar__inner {
  border: 0;
}

.avatar--seen {
  background: var(--border-strong);
}

.avatar__online {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 26%;
  height: 26%;
  min-width: 10px;
  min-height: 10px;
  border: 2px solid var(--avatar-gap);
  border-radius: 50%;
  background: var(--accent);
}

.avatar--xs { --size: 24px; }
.avatar--nav { --size: 26px; }
.avatar--sm { --size: 36px; }
.avatar--md { --size: 44px; }
.avatar--lg { --size: 56px; }
.avatar--story { --size: 68px; }
.avatar--xl { --size: 84px; }
.avatar--xxl { --size: 100px; padding: 3px; }

.avatar--xxl .avatar__inner {
  border-width: 3px;
}

.avatar--xs .avatar__initials,
.avatar--nav .avatar__initials {
  font-size: 11px;
}

/* Foto que começa borrada (miniatura) e troca pela grande. */
.photo {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface-2);
}

.photo__thumb,
.photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.photo__thumb {
  filter: blur(10px);
  transform: scale(1.08);
}

.photo.is-thumb-only .photo__thumb {
  filter: none;
  transform: none;
}

.photo__img {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}

.photo.is-loaded .photo__img {
  opacity: 1;
}

.media--initials {
  display: grid;
  place-items: center;
  background-color: var(--tone, var(--surface-3));
  background-image: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .16), transparent 60%);
}

.media__initials {
  color: rgba(255, 255, 255, .94);
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}

/* Blocos 3:4 da grade. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@container discover (min-width: 520px) {
  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
}

.tiles__item {
  min-width: 0;
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  isolation: isolate;
  transition: transform var(--dur) var(--ease);
}

.tile:has(.tile__link:active) {
  transform: scale(.98);
}

.tile__link {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  color: #fff;
  text-decoration: none;
}

.tile__link:focus-visible {
  box-shadow: inset 0 0 0 3px var(--primary);
}

.tile__media {
  position: absolute;
  inset: 0;
}

.tile__scrim {
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: var(--scrim);
  pointer-events: none;
}

.tile__body {
  position: absolute;
  right: 12px;
  bottom: 11px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tile__name {
  overflow: hidden;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.tile__meta {
  overflow: hidden;
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile__chips {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: flex;
  gap: 6px;
  pointer-events: none;
}

.tile__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--r-full);
  background: rgba(16, 17, 20, .48);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}

.tile__chip--icon {
  width: 24px;
  padding: 0;
  justify-content: center;
}

.tile__chip .icon {
  width: 14px;
  height: 14px;
}

.tile__chip .online-dot {
  width: 7px;
  height: 7px;
  background: #3ddc8d;
}

.quick-follow {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur) var(--ease);
}

.quick-follow::before {
  content: "";
  position: absolute;
  inset: -5px;
}

.quick-follow .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.1;
}

.quick-follow:active {
  transform: scale(.9);
}

.quick-follow.is-visited {
  background: var(--surface-2);
  color: var(--text);
}

.tile__follow {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
}

.tile--mine .tile__chip {
  background: var(--primary);
  color: var(--on-primary);
}

.tiles__item.is-hiding {
  animation: tile-out 260ms var(--ease) forwards;
}

.tiles__item.is-entering {
  animation: tile-in 320ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

/* ================================================ 7. ESTADOS E ESQUELETOS */

.skeleton,
.tile--skeleton,
.qcard--skeleton {
  background: var(--surface-2);
  animation: pulse 1.4s ease-in-out infinite;
}

.skeleton {
  display: block;
  border-radius: var(--r-sm);
}

.skeleton--line {
  width: 100%;
  height: 12px;
  border-radius: 6px;
}

.skeleton--title {
  width: 55%;
  height: 22px;
}

.skeleton--w40 { width: 40%; }
.skeleton--w70 { width: 70%; }

.skeleton--story {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}

.skeleton--avatar {
  width: 100px;
  height: 100px;
  border: 4px solid var(--bg);
  border-radius: 50%;
}

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 16px;
  text-align: center;
}

.state--compact {
  padding: 28px 16px;
}

.state--page {
  justify-content: center;
  min-height: 62vh;
}

.state__mascot {
  width: 96px;
  height: 96px;
  margin-bottom: 10px;
}

.state__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
}

.state__icon .icon {
  width: 26px;
  height: 26px;
}

.state__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.state__text {
  max-width: 36ch;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.loading-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.notice,
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.notice > .icon,
.form-alert > .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--text-muted);
}

.notice--warning,
.form-alert--warning {
  background: var(--warning-soft);
}

.notice--warning > .icon,
.form-alert--warning > .icon {
  color: var(--warning);
}

.form-alert--error {
  background: var(--danger-soft);
}

.form-alert--error > .icon {
  color: var(--danger);
}

.notice__title,
.form-alert__title {
  font-weight: 700;
}

.notice a {
  font-weight: 600;
}

/* ===================================== 8. DIÁLOGOS, MENU E AVISOS */

.dialog {
  width: min(520px, calc(100% - 32px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  overscroll-behavior: contain;
  --avatar-gap: var(--surface);
}

.dialog::backdrop {
  background: var(--backdrop);
}

.dialog[open] {
  animation: dialog-in var(--dur-slow) var(--ease);
}

.dialog[open]::backdrop {
  animation: fade-in var(--dur-slow) var(--ease);
}

.dialog.is-closing {
  animation: dialog-out 200ms var(--ease) forwards;
}

.dialog.is-closing::backdrop {
  animation: fade-out 200ms ease forwards;
}

.dialog__panel {
  display: flex;
  flex-direction: column;
  max-height: min(88dvh, 900px);
}

.dialog__handle {
  display: none;
}

.dialog__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 14px 6px 22px;
}

.dialog__header--bare {
  justify-content: flex-end;
  padding-bottom: 0;
}

.dialog__heading {
  flex: 1;
  min-width: 0;
}

.dialog__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.dialog__subtitle {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.dialog__close {
  width: 36px;
  height: 36px;
  margin-left: auto;
  background: var(--surface-2);
}

.dialog__close .icon {
  width: 18px;
  height: 18px;
}

.dialog__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 22px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dialog__footer {
  display: flex;
  gap: 10px;
  padding: 12px 22px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}

.dialog__footer > .btn {
  flex: 1 1 0;
}

.confirm__text {
  color: var(--text-muted);
  font-size: var(--fs-base);
}

/* Celular: folha que sobe da borda inferior (cantos de 28px). */
@media (max-width: 639px) {
  .dialog:not(.dialog--fullscreen) {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }

  .dialog:not(.dialog--fullscreen)[open] {
    animation: sheet-in var(--dur-slow) var(--ease);
  }

  .dialog:not(.dialog--fullscreen).is-closing {
    animation: sheet-out 220ms var(--ease) forwards;
  }

  .dialog:not(.dialog--fullscreen) .dialog__panel {
    max-height: 92dvh;
  }

  .dialog__handle {
    display: block;
    flex: none;
    height: 20px;
    touch-action: none;
    cursor: grab;
  }

  .dialog__handle::before {
    content: "";
    display: block;
    width: 36px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: var(--r-full);
    background: var(--border-strong);
  }

  .dialog__header {
    padding: 4px 12px 6px 18px;
    touch-action: none;
  }

  .dialog__body {
    padding: 6px 18px 20px;
  }

  .dialog__footer {
    padding-inline: 18px;
  }
}

.dialog--fullscreen {
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  inset: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  --avatar-gap: var(--bg);
}

.dialog--fullscreen[open] {
  animation: fullscreen-in var(--dur-slow) var(--ease);
}

.dialog--fullscreen.is-closing {
  animation: fade-out 180ms var(--ease) forwards;
}

/* "Entre na rede" */
.gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 4px 6px;
  text-align: center;
}

.gate__mascot {
  width: 80px;
  height: 80px;
  margin-bottom: 6px;
}

.gate__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.gate__text {
  max-width: 34ch;
  color: var(--text-muted);
}

.gate__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
}

/* Menu "…" */
.menu {
  position: fixed;
  z-index: 90;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: menu-in 140ms var(--ease);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-base);
  text-align: left;
}

.menu__item .icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.menu__item:hover,
.menu__item:focus-visible {
  background: var(--surface-2);
  box-shadow: none;
}

.menu__item--danger,
.menu__item--danger .icon {
  color: var(--danger);
}

/* Avisos (toasts) */
.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(var(--app-bottom) + 10px);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(440px, calc(100% - 24px));
  transform: translateX(-50%);
  pointer-events: none;
}

body.no-dock .toasts,
dialog .toasts {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
  .toasts {
    left: calc(50% + var(--sidebar-w) / 2);
    bottom: 24px;
  }

  dialog .toasts {
    left: 50%;
  }
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 6px 8px 14px;
  border-radius: 16px;
  background: var(--toast-bg);
  color: var(--toast-text);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in 240ms var(--ease);
}

.toast.is-leaving {
  animation: toast-out 180ms var(--ease) forwards;
}

.toast__icon {
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
}

.toast__icon .icon {
  width: 18px;
  height: 18px;
}

.toast--success .toast__icon { color: #3ddc8d; }
.toast--error .toast__icon { color: #ff7a7a; }
.toast--warning .toast__icon { color: #ffd233; }

.toast__msg {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
}

.toast__action {
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--primary);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.toast__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .7);
}

.toast__close:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.toast__close .icon {
  width: 16px;
  height: 16px;
}

/* ========================================================= 9. FORMULÁRIOS */

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.field__label {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.field__hint {
  color: var(--text-muted);
  font-size: 12.5px;
}

.field__hint:empty {
  display: none;
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.field__error .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.field__error a,
.field__error .link-btn {
  min-height: 0;
  color: inherit;
  font-weight: 700;
}

.field__preview {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.field__preview .icon {
  width: 16px;
  height: 16px;
}

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

.field-stack {
  display: flex;
  flex-direction: column;
}

.input,
.textarea,
.select__control {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.3;
  outline: none;
  transition: box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-subtle);
}

.input:focus,
.textarea:focus,
.select__control:focus {
  box-shadow: inset 0 0 0 2px var(--text);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select__control[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--danger);
}

.input:disabled,
.select__control:disabled {
  opacity: .6;
}

.textarea {
  min-height: 108px;
  padding: 14px 16px;
  line-height: 1.45;
  resize: vertical;
}

.input--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-sm);
}

.select {
  position: relative;
}

.select__control {
  padding-right: 40px;
  cursor: pointer;
}

.select__icon {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.input-group {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-left: 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  transition: box-shadow var(--dur-fast) var(--ease);
}

.input-group:focus-within {
  box-shadow: inset 0 0 0 2px var(--text);
}

.field.is-invalid .input-group {
  box-shadow: inset 0 0 0 2px var(--danger);
}

.input-group__prefix {
  color: var(--text-muted);
  font-size: 1rem;
  white-space: nowrap;
}

.input-group .input,
.input--bare {
  min-width: 0;
  padding-left: 2px;
  background: transparent;
  box-shadow: none !important;
}

.input-group--social .input-group__prefix {
  font-size: var(--fs-sm);
}

.counter {
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.counter.is-full {
  color: var(--text);
  font-weight: 600;
}

.counter.is-over {
  color: var(--danger);
  font-weight: 600;
}

.birthday {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 8px;
}

.about-summary {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.social-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.social-row + .social-row {
  margin-top: 10px;
}

.social-row__label {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* Controle segmentado (radio). */
.segmented {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.segmented--grid {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.segmented__option {
  position: relative;
  display: flex;
  min-width: 0;
}

.segmented__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented__label {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 6px 10px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.segmented__label .icon {
  width: 17px;
  height: 17px;
}

.segmented__input:checked + .segmented__label {
  background: var(--seg-on);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(16, 18, 24, .1);
}

.segmented__input:focus-visible + .segmented__label {
  box-shadow: var(--focus-ring);
}

/* Interruptor (iOS). */
.switch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 8px 0;
  cursor: pointer;
}

.switch-row__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.switch-row__label {
  font-size: var(--fs-base);
  font-weight: 500;
}

.switch-row__note {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.switch {
  position: relative;
  flex: none;
  width: 51px;
  height: 31px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  transition: background-color var(--dur) var(--ease);
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
  transition: transform var(--dur) var(--ease);
}

.switch__input:checked + .switch {
  background: var(--switch-on);
}

.switch__input:checked + .switch::after {
  transform: translateX(20px);
}

.switch__input:disabled + .switch {
  opacity: .4;
}

.switch-row:has(.switch__input:disabled) {
  cursor: not-allowed;
}

.switch__input:focus-visible + .switch {
  box-shadow: var(--focus-ring);
}

.field--switch.is-disabled {
  opacity: .7;
}

/* Caixas de seleção nativas, com a cor do tema. */
.checkbox,
.check-inline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  cursor: pointer;
}

.check-inline {
  align-items: center;
  min-height: 40px;
}

.checkbox__input {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
  accent-color: var(--check);
}

.checkbox .checkbox__input {
  margin-top: 1px;
}

.checkbox__text a {
  font-weight: 600;
}

.checkbox--sensitive {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--warning-soft);
}

/* Denúncia: motivos em linhas. */
.radio-list {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  background: var(--surface-2);
  overflow: hidden;
}

.radio-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 8px 14px;
  font-size: var(--fs-base);
  cursor: pointer;
}

.radio-card + .radio-card {
  border-top: 1px solid var(--border);
}

.radio-card__input {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
  accent-color: var(--check);
}

.radio-list[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--danger);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form__note {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* Linha "abrir/fechar" (seções opcionais). */
.disclosures {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.disclosure {
  border-bottom: 1px solid var(--border);
}

.disclosure__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  list-style: none;
  font-weight: 600;
  cursor: pointer;
}

.disclosure__summary::-webkit-details-marker {
  display: none;
}

.disclosure__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: var(--surface-2);
}

.disclosure__icon .icon {
  width: 18px;
  height: 18px;
}

.disclosure__title {
  flex: 1;
}

.disclosure__chev {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform var(--dur) var(--ease);
}

.disclosure[open] .disclosure__chev {
  transform: rotate(180deg);
}

.disclosure__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 2px 0 20px;
}

.disclosure--plain {
  border: 0;
}

.disclosure--plain .disclosure__summary {
  min-height: 48px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.disclosure--plain .disclosure__icon {
  width: 28px;
  height: 28px;
  background: none;
}

/* Copiar link */
.copy-field {
  display: flex;
  gap: 8px;
}

.copy-field .input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
}

/* ============================================================ 10. DESCOBRIR */

.page--home {
  padding-top: 0;
}

.discover-head {
  padding: 8px 0 14px;
}

.discover-head__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
}

.discover-head__title {
  flex: 1;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}

.discover-head__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-subtle);
  font-size: var(--fs-base);
  text-align: left;
}

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

.search-pill:hover {
  background: var(--surface-3);
}

/* Início com barra do topo (enquanto o feed não existe): o título fica só no desktop. */
body:not(.no-appbar) .discover-head__title {
  font-size: var(--fs-xl);
}

/* Boas-vindas (visitantes) */
.welcome {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
  padding: 14px 44px 14px 14px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.welcome__mascot {
  width: 52px;
  height: 52px;
}

.welcome__title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.welcome__sub {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.welcome__cta {
  margin-top: 10px;
}

.welcome__close {
  position: absolute;
  top: 6px;
  right: 6px;
  color: var(--text-muted);
}

/* Stories */
.stories {
  margin: 0 calc(-1 * var(--gutter)) 6px;
}

.stories__track {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 2px var(--gutter) 8px;
  overflow-x: auto;
  list-style: none;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.stories__track::-webkit-scrollbar {
  display: none;
}

.story {
  flex: none;
  width: 68px;
}

.story__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--r-md);
}

.story__link:active .avatar,
.story__link:active .story__plus {
  transform: scale(.95);
}

.story .avatar,
.story__plus {
  transition: transform var(--dur-fast) var(--ease);
}

.story__name {
  max-width: 72px;
  overflow: hidden;
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story__plus {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
}

.story__plus .icon {
  width: 26px;
  height: 26px;
}

.story__me {
  position: relative;
  display: block;
}

.story__badge {
  position: absolute;
  right: -1px;
  bottom: -1px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  box-sizing: content-box;
}

.story__badge .icon {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

.story--skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.story--skeleton .skeleton--line {
  width: 44px;
  height: 9px;
}

/* Abas + grade */
.discover {
  container: discover / inline-size;
}

.discover .tabs {
  position: sticky;
  top: var(--app-top);
  z-index: 10;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter);
  background: var(--bg);
}

.discover__panel {
  padding-top: 14px;
  outline: none;
}

.discover__note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 10px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.discover__note .icon {
  width: 16px;
  height: 16px;
}

.discover__note .link-btn {
  min-height: 32px;
  margin-left: auto;
}

.more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
}

.sentinel {
  width: 100%;
  height: 1px;
}

.more__error {
  color: var(--danger);
  font-size: var(--fs-sm);
  text-align: center;
}

.end-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 0 8px;
  text-align: center;
}

.end-note__text {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.home-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 36px;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  text-align: center;
}

.home-footer__links {
  display: flex;
  gap: 14px;
}

.home-footer__links a {
  color: var(--text-muted);
  text-decoration: none;
}

.home-footer__links a:hover {
  color: var(--text);
  text-decoration: underline;
}

.home-rail {
  display: none;
}

.rail-card {
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.rail-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--fs-md);
  font-weight: 700;
}

.rail-card__title .icon {
  width: 18px;
  height: 18px;
}

.rail-card .person {
  min-height: 56px;
}

@media (min-width: 1024px) {
  .discover-head {
    padding-top: 0;
  }

  .discover .tabs {
    top: 0;
  }
}

@media (min-width: 1200px) {
  .page--home {
    display: grid;
    grid-template-columns: minmax(0, var(--content-w)) 300px;
    gap: 40px;
    justify-content: center;
    max-width: calc(var(--content-w) + 340px + 2 * var(--gutter));
    padding-top: 24px;
  }

  .home-main > .home-footer {
    display: none;
  }

  .home-rail {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: start;
  }

  .home-rail .home-footer {
    align-items: flex-start;
    margin-top: 0;
    padding: 0 4px;
    text-align: left;
  }
}

/* ===================================================== 11. BUSCA E FILTROS */

.search {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: calc(var(--content-w) + 2 * var(--gutter));
  margin: 0 auto;
}

.search__top {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) var(--gutter) 8px 4px;
}

.search-field {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
}

.search-field__icon {
  position: absolute;
  left: 14px;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-field__input {
  width: 100%;
  min-height: 46px;
  padding: 0 44px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-2);
  font-size: 1rem;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.search-field__input::-webkit-search-cancel-button {
  display: none;
}

.search-field__input:focus {
  box-shadow: inset 0 0 0 2px var(--text);
}

.search-field__clear {
  position: absolute;
  right: 4px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
}

.search-field__clear .icon {
  width: 18px;
  height: 18px;
}

.search__body {
  flex: 1;
  min-height: 0;
  padding: 4px var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

.search__heading {
  padding: 10px 0 4px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.search__empty,
.search__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 16px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.search__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--text);
  font-weight: 600;
}

.search__all .icon {
  width: 18px;
  height: 18px;
  color: var(--text-subtle);
}

.filters-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dialog--filters .switch-row {
  padding: 0;
}

/* =============================================================== 12. PERFIL */

.page--profile {
  padding: 0 0 32px;
}

.profile__cover {
  position: relative;
  height: 168px;
  overflow: hidden;
  background-color: var(--tone, var(--surface-2));
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.4px);
  background-size: 14px 14px;
}

.profile--loading .profile__cover {
  background: var(--surface-2);
}

.profile__cover--photo {
  background-image: none;
}

.profile__cover-img {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  max-width: none;
  height: calc(100% + 80px);
  object-fit: cover;
  filter: blur(26px) saturate(1.25) brightness(.78);
}

.profile__bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.profile__bar-space {
  flex: 1;
}

.profile__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: -42px;
  padding: 0 var(--gutter);
}

.profile__avatar .avatar {
  background: var(--bg);
}

.profile__avatar .avatar:not(.avatar--plain) {
  background: var(--ring-gradient);
}

.profile__stats {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding: 4px 2px;
  border-radius: var(--r-sm);
  color: var(--text);
  text-align: center;
  text-decoration: none;
}

a.stat:hover {
  background: var(--surface-2);
}

.stat__value {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile__ident {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px var(--gutter) 0;
}

.profile--loading .profile__ident {
  gap: 10px;
}

.profile__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.profile__pronouns {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0;
}

.profile__handle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.profile__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.profile__status.is-online {
  color: var(--accent);
  font-weight: 600;
}

.profile__bio {
  margin-top: 6px;
  font-size: var(--fs-base);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.profile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px 0 0;
  padding: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  list-style: none;
}

.profile__meta li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.profile__meta .icon {
  width: 16px;
  height: 16px;
}

.profile__meta a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.profile__meta a:hover {
  text-decoration: underline;
}

.profile__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px var(--gutter) 0;
}

.profile__actions > .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 14px;
}

.profile__follow {
  min-width: 108px;
}

.profile__follow.is-following:hover {
  color: var(--danger);
}

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

.profile__note {
  padding: 8px var(--gutter) 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.profile > .notice {
  margin: 14px var(--gutter) 0;
}

.profile .tabs {
  margin: 18px 0 0;
  padding: 0 var(--gutter);
}

.profile__panel {
  padding: 4px var(--gutter) 0;
  outline: none;
}

.map-card {
  margin-top: 20px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.map-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.map-card__link .icon {
  width: 18px;
  height: 18px;
  color: var(--text-subtle);
}

/* Perfil do mural (sem página completa) */
.lite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 0;
  text-align: center;
}

.lite__name {
  margin-top: 10px;
  font-size: var(--fs-xl);
  font-weight: 700;
}

.lite__sub {
  margin-bottom: 18px;
  color: var(--text-muted);
}

/* Listas de seguidores */
.page--list .tabs {
  margin: 0 calc(-1 * var(--gutter)) 4px;
  padding: 0 var(--gutter);
}

@media (min-width: 1024px) {
  .page--profile {
    padding-top: 24px;
  }

  .profile__cover {
    margin: 0 var(--gutter);
    border-radius: var(--r-lg);
  }

  .profile__back {
    display: none;
  }

  .profile__head {
    padding-left: calc(var(--gutter) * 2);
  }
}

/* ===================================================== 13. SEGUIR EM SEQUÊNCIA */

.queue {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  height: 100%;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
}

.queue__progress {
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-2);
}

.queue__bar {
  display: block;
  width: calc(var(--progress, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width var(--dur-slow) var(--ease);
}

.queue__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 12px;
}

.queue__title {
  flex: 1;
  font-size: var(--fs-md);
  font-weight: 700;
}

.queue__count {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.queue__stage {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
}

.qcard {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-2);
  touch-action: pan-y;
  user-select: none;
  will-change: transform;
}

.qcard.is-dragging {
  cursor: grabbing;
}

.qcard__media {
  position: absolute;
  inset: 0;
}

.qcard .media__initials {
  font-size: 6rem;
}

.qcard__scrim {
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: var(--scrim);
  pointer-events: none;
}

.qcard__body {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fff;
}

.qcard__name {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.qcard__meta {
  color: rgba(255, 255, 255, .85);
  font-size: var(--fs-sm);
}

.qcard__bio {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(255, 255, 255, .92);
  font-size: var(--fs-base);
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.qcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.qcard__tags li {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.qcard.is-entering {
  animation: qcard-in 320ms var(--ease);
}

.qcard.is-entering-soft {
  animation: fade-in 200ms var(--ease);
}

.queue__loading {
  display: flex;
  flex: 1;
}

.queue__state {
  margin: auto;
}

.queue__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
}

.queue__skip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding: 0 20px 0 24px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.queue__skip:hover {
  background: var(--surface-3);
}

.queue__skip:active {
  transform: scale(.97);
}

.queue__skip-icon {
  display: grid;
  order: 2;
}

.queue__skip-icon .icon {
  width: 20px;
  height: 20px;
}

.queue__open {
  flex: 1;
  min-height: 56px;
}

.queue__open.is-visited {
  background: var(--surface-2);
  color: var(--text);
}

.queue__hint {
  padding-top: 12px;
  color: var(--text-subtle);
  font-size: var(--fs-xs);
  text-align: center;
}

@media (pointer: coarse) {
  .queue__hint {
    display: none !important;
  }
}

/* ======================================================== 14. ENTRAR (PASSOS) */

.page--flow {
  display: flex;
  flex-direction: column;
  max-width: calc(480px + 2 * var(--gutter));
  min-height: calc(100dvh - var(--app-top));
  padding-top: 0;
  padding-bottom: 0;
}

.flow {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.flow__top {
  position: sticky;
  top: var(--app-top);
  z-index: 10;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  height: 56px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 4px;
  background: var(--bg);
}

.flow__spacer {
  width: 44px;
}

.flow__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.flow__dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-3);
  transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.flow__dot.is-done {
  background: var(--text-subtle);
}

.flow__dot.is-current {
  width: 22px;
  background: var(--text);
}

.flow__skip {
  justify-self: end;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-weight: 600;
}

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

.flow > .notice {
  margin: 4px 0 8px;
}

.flow__form {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.flow__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 8px 0 24px;
}

.flow__body--center {
  align-items: center;
  text-align: center;
}

.flow__title {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
}

.flow__lead {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: var(--fs-base);
}

.flow__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 26px;
}

.flow__body > .form-alert {
  margin-top: 18px;
}

.flow__alt {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.flow__alt a {
  color: var(--text);
  font-weight: 700;
}

.flow__small {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.flow__footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, transparent, var(--bg) 22px);
}

.flow__preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  --avatar-gap: var(--surface-2);
}

.flow__preview-text {
  min-width: 0;
}

.flow__preview-name {
  overflow: hidden;
  font-size: var(--fs-md);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow__preview-sub {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-pick {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 36px auto 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
}

.photo-pick__inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
}

.photo-pick__inner .icon {
  width: 44px;
  height: 44px;
  stroke-width: 1.6;
}

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

.photo-pick__badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
}

.photo-pick__badge .icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.6;
}

/* Pronto! */
.flow--done {
  padding: 24px 0 32px;
}

.done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.done__mascot {
  width: 88px;
  height: 88px;
  margin-bottom: 14px;
}

.done__tile {
  width: 176px;
  margin: 24px auto;
}

.done__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.access {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 24px 0 8px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  text-align: left;
}

.access__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
  font-weight: 700;
}

.access__title .icon {
  width: 18px;
  height: 18px;
}

.access__text {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.access .copy-field .input {
  background: var(--bg);
}

.access .link-btn {
  align-self: flex-start;
  min-height: 36px;
}

/* ======================================================== 15. CONFIGURAÇÕES */

.page--settings {
  padding-bottom: 120px;
}

.me-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0 4px;
}

.me-card__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.me-card__name {
  overflow: hidden;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-card__link {
  display: inline-flex;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}

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

.me-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.settings-form {
  display: flex;
  flex-direction: column;
}

.group {
  margin-top: 26px;
  scroll-margin-top: 64px;
}

.group__title {
  padding: 0 4px 8px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.group__box {
  overflow: hidden;
  border: 1px solid var(--group-border);
  border-radius: var(--r-lg);
  background: var(--group-bg);
}

.group__box > * + * {
  border-top: 1px solid var(--border);
}

.group__box > .field,
.group__box > .field-row,
.group__box > .about-summary {
  padding: 14px 16px;
}

.group__box > .field--switch,
.group__box > .switch-row {
  padding: 8px 16px;
}

.group__box > .field-row {
  gap: 12px;
}

.group__box .field-stack > .field + .field {
  border-top: 1px solid var(--border);
}

.group__pad {
  padding: 12px;
}

.group__note {
  padding: 12px 16px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.group.is-highlight .group__box {
  animation: highlight 2s var(--ease);
}

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 8px 16px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}

button.row:hover:not(:disabled),
a.row:hover {
  background: var(--surface-2);
}

.row:disabled {
  opacity: .6;
}

.row__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--surface-2);
}

.row__icon .icon {
  width: 18px;
  height: 18px;
}

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

.row__label {
  overflow: hidden;
  font-size: var(--fs-base);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__sub {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.row__chev {
  width: 18px;
  height: 18px;
  color: var(--text-subtle);
}

.row--danger {
  color: var(--danger);
}

.row--danger .row__icon {
  background: var(--danger-soft);
}

.row--static {
  cursor: default;
}

.row-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.blocked > * + * {
  border-top: 1px solid var(--border);
}

.settings-legal {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 28px 0 8px;
  font-size: var(--fs-sm);
}

.settings-legal a {
  color: var(--text-muted);
  text-decoration: none;
}

.settings-legal a:hover {
  color: var(--text);
  text-decoration: underline;
}

.savebar {
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 75;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 616px;
  margin: 0 auto;
  padding: 8px 8px 8px 18px;
  border-radius: var(--r-full);
  background: var(--toast-bg);
  color: var(--toast-text);
  box-shadow: var(--shadow-lg);
  transform: translateY(calc(100% + 40px));
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
}

.savebar.is-visible {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease), visibility 0s;
}

.savebar__text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.savebar .btn--ghost {
  color: var(--toast-text);
}

.savebar .btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
}

@media (min-width: 1024px) {
  .savebar {
    left: calc(var(--sidebar-w) + 24px);
    right: 24px;
  }
}

/* ============================================ 16. RECORTADOR, CIDADE, TURNSTILE */

.dialog--cropper {
  background: #0c0d10;
  color: #fff;
  color-scheme: dark;
}

.cropper {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: env(safe-area-inset-top, 0px) 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

.cropper__top {
  display: flex;
  align-items: center;
  height: 56px;
}

.cropper__icon {
  color: #fff;
}

.cropper__icon:hover {
  background: rgba(255, 255, 255, .1) !important;
}

.cropper__title {
  flex: 1;
  font-size: var(--fs-md);
  font-weight: 700;
  text-align: center;
}

.cropper__spacer {
  width: 44px;
}

.cropper__stage {
  position: relative;
  flex: 1;
  min-height: 240px;
  overflow: hidden;
  border-radius: var(--r-lg);
  touch-action: none;
  cursor: grab;
}

.cropper__stage.is-dragging {
  cursor: grabbing;
}

.cropper__img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  user-select: none;
  pointer-events: none;
}

.cropper__mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle closest-side, transparent calc(84% - 1px), rgba(255, 255, 255, .9) calc(84% - 1px), rgba(255, 255, 255, .9) 84%, transparent 84%),
    radial-gradient(circle closest-side, transparent 84%, rgba(0, 0, 0, .62) 84%);
}

.cropper__hint {
  padding: 12px 0 6px;
  color: rgba(255, 255, 255, .6);
  font-size: var(--fs-xs);
  text-align: center;
}

.cropper__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 16px;
  color: rgba(255, 255, 255, .7);
}

.cropper__zicon .icon {
  width: 16px;
  height: 16px;
}

.cropper__zicon--big .icon {
  width: 22px;
  height: 22px;
}

.cropper__zoom {
  flex: 1;
  accent-color: var(--primary);
}

.cropper__actions {
  display: flex;
  gap: 10px;
}

.cropper__actions .btn {
  flex: 1;
  --btn-h: 52px;
}

.cropper__cancel {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.cropper__cancel:hover:not(:disabled) {
  background: rgba(255, 255, 255, .16);
}

/* Escolha de cidade */
.city-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.city-picker__field {
  position: relative;
  display: flex;
  align-items: center;
}

.city-picker__icon {
  position: absolute;
  left: 15px;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  pointer-events: none;
}

.city-picker__input {
  padding-right: 44px;
  padding-left: 44px;
}

.city-picker__clear {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
}

.city-picker__clear .icon {
  width: 18px;
  height: 18px;
}

.city-picker__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 30;
  max-height: 264px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  list-style: none;
}

.city-picker__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  cursor: pointer;
}

.city-picker__option.is-active,
.city-picker__option:hover {
  background: var(--surface-2);
}

.city-picker__uf {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.city-picker__geo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.city-picker__geo .icon {
  width: 17px;
  height: 17px;
}

.city-picker__geo-note {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.city-picker__status {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.city-picker__status:empty {
  display: none;
}

.city-picker__status.is-ok {
  color: var(--accent);
}

.city-picker__status.is-warn {
  color: var(--warning);
}

.city-picker__status.is-error {
  color: var(--danger);
}

/* Turnstile */
.turnstile:empty {
  display: none;
}

.turnstile__widget {
  min-height: 65px;
}

.turnstile__status,
.turnstile__failed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  min-height: 65px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.turnstile__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.turnstile__error .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* ===================================================== 16b. LOGIN (v4) E MURAL */

.pw-field {
  position: relative;
}

.pw-field .input {
  padding-right: 52px;
}

.pw-field__toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  transform: translateY(-50%);
}

.pw-field__toggle .icon {
  width: 20px;
  height: 20px;
}

.pw-meter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.pw-meter span {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  transition: background-color var(--dur) var(--ease);
}

.pw-meter[data-level="1"] span:nth-child(1) { background: var(--danger); }
.pw-meter[data-level="2"] span:nth-child(-n+2) { background: var(--warning); }
.pw-meter[data-level="3"] span { background: var(--accent); }
.pw-meter[data-level="0"] { opacity: 0; }

.input-group.is-invalid {
  box-shadow: inset 0 0 0 2px var(--danger);
}

.google-wrap {
  display: flex;
  justify-content: center;
  min-height: 44px;
}

.google-btn {
  display: flex;
  justify-content: center;
  width: 100%;
}

.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-subtle);
  font-size: var(--fs-sm);
}

.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.login-id {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: var(--fs-sm);
}

.login-id .icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.login__forgot {
  align-self: flex-start;
  margin-top: -10px;
  color: var(--text-muted);
}

.row-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  margin-top: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}

.forgot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--text-muted);
}

.forgot__list {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
}

.forgot__list li + li {
  margin-top: 6px;
}

.sheet-google {
  padding: 16px 0 4px;
}

/* Mural "Instagram de jovens revolucionários" */
.mural {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.mural__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-right: 28px;
}

.mural--standalone .mural__head {
  padding-right: 0;
}

.mural__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--primary);
  color: var(--on-primary);
}

.mural__icon .icon {
  width: 22px;
  height: 22px;
}

.mural__title {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.mural__sub {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.mural__close {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--text-muted);
}

.mural__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mural__row {
  display: flex;
  gap: 8px;
}

.mural__input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  background: var(--bg);
}

.mural__row .btn {
  min-height: 48px;
}

.mural__extra {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mural__extra .input {
  min-height: 48px;
  background: var(--bg);
}

.mural__mine {
  display: flex;
  flex-direction: column;
}

.mural__entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: var(--fs-sm);
}

.mural__entry > .icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.mural__entry a {
  font-weight: 700;
  text-decoration: none;
}

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

.mural__entry .link-btn {
  min-height: 36px;
  margin-left: auto;
  color: var(--text-muted);
}

.mural__alt {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.mural__alt a {
  color: var(--text);
  font-weight: 600;
}

.page--mural .mural {
  margin-top: 12px;
}

.mural-share {
  margin: -6px 0 20px;
}

/* ============================================================ 17. ANIMAÇÕES */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  50% { opacity: .55; }
}

@keyframes nav-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(260%); }
}

@keyframes boot-pulse {
  to { transform: scale(1.06); }
}

@keyframes fade-in {
  from { opacity: 0; }
}

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

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

@keyframes tile-out {
  to {
    opacity: 0;
    transform: scale(.94);
  }
}

@keyframes qcard-in {
  from {
    opacity: 0;
    transform: translateX(28px) scale(.98);
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.98);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.98);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(6px) scale(.98);
  }
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.97);
  }
}

@keyframes dialog-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(.98);
  }
}

@keyframes sheet-in {
  from { transform: translateY(100%); }
}

@keyframes sheet-out {
  to { transform: translateY(100%); }
}

@keyframes fullscreen-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes highlight {
  0%,
  40% { box-shadow: 0 0 0 3px var(--primary); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

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

  .skeleton,
  .tile--skeleton,
  .qcard--skeleton {
    animation: none !important;
  }
}