/* ============================================================
   Comunidade dos Concurseiros — Vision UI
   Formas fluidas ? glass ? aurora ? responsivo
   ============================================================ */

:root {
  --bg: #F4F6FB;
  --bg-deep: #E8EDF7;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #FFFFFF;
  --surface-raised: rgba(255, 255, 255, 0.55);
  --ink: #0A0F1C;
  --ink-soft: #4A5568;
  --ink-faint: #8B95A8;
  --border: rgba(255, 255, 255, 0.65);
  --border-soft: rgba(10, 15, 28, 0.06);

  --accent: #0EA5A0;
  --accent-bright: #2DD4BF;
  --accent-ink: #0F766E;
  --accent-soft: rgba(14, 165, 160, 0.08);
  --accent-glow: rgba(14, 165, 160, 0.12);
  --violet: #7C3AED;
  --violet-glow: rgba(124, 58, 237, 0.25);
  --blue: #3B82F6;
  --blue-glow: rgba(59, 130, 246, 0.2);

  --ok: #059669;
  --ok-soft: rgba(5, 150, 105, 0.12);
  --danger: #DC2626;
  --danger-soft: rgba(220, 38, 38, 0.1);
  --amber: #D97706;
  --amber-soft: rgba(217, 119, 6, 0.12);

  --code-bg: #0C1222;
  --code-border: rgba(255, 255, 255, 0.08);
  --code-ink: #E8EEF7;

  /* Links visitados: mesma cor do estado normal (sem azul/roxo do browser) */
  --link: var(--accent-ink);
  --link-nav: var(--ink-soft);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(10, 15, 28, 0.04);
  --shadow: 0 12px 40px rgba(10, 15, 28, 0.08);
  --shadow-lg: 0 24px 64px rgba(10, 15, 28, 0.12);
  --shadow-glow: 0 8px 32px var(--accent-glow);

  --font-display: "Outfit", "Sora", sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nav-h: 3.5rem;
  --page-pad: clamp(1rem, 3vw, 2rem);
  --content-max: 84rem;
  --rail-width: 16rem;
  --home-featured-label-offset: calc(0.65rem * 1.4 + 0.25rem + 0.35rem);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Neutraliza azul/roxo de link visitado do navegador */
a:visited {
  color: inherit;
}
.nav-link:visited { color: var(--link-nav); }
.prose a:visited,
.link-quiet:visited {
  color: var(--link);
}
.related-list a:visited,
.mais-lidas-title:visited,
.user-menu-item:visited {
  color: inherit;
}
.btn:visited {
  color: inherit;
}
.btn-primary:visited,
.btn-primary:link {
  color: #fff;
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Aurora mesh de fundo */
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -2;
  filter: blur(80px);
  opacity: 0.7;
}
body::before {
  width: min(70vw, 560px);
  height: min(70vw, 560px);
  top: -12%;
  left: -8%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.07) 0%, transparent 70%);
  animation: float-blob 18s var(--ease) infinite alternate;
}
body::after {
  width: min(60vw, 480px);
  height: min(60vw, 480px);
  bottom: 5%;
  right: -10%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
  animation: float-blob 22s var(--ease) infinite alternate-reverse;
}

.mesh-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.15;
}

.text-gradient {
  color: var(--ink);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

@keyframes float-blob {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(3%, 5%) scale(1.08); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Shell & top bar ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 246, 251, 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(10, 15, 28, 0.06);
}

.top-bar {
  width: 100%;
}

.top-bar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem 1.25rem;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0.65rem var(--page-pad);
  min-height: var(--nav-h);
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand-logo {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.brand-name {
  line-height: 1.1;
  min-width: 0;
}

.brand-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.top-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 28rem;
  width: 100%;
  margin-inline: auto;
  padding: 0 0.85rem;
  min-height: 2.25rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(10, 15, 28, 0.08);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.top-search:focus-within {
  border-color: rgba(14, 165, 160, 0.45);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.top-search-icon { color: var(--ink-faint); flex-shrink: 0; }
.top-search input,
.top-search input[type="search"] {
  flex: 1;
  min-width: 0;
  width: auto;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0.4rem 0 !important;
  font-size: 0.875rem;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}
.top-search input:hover,
.top-search input:focus,
.top-search input[type="search"]:hover,
.top-search input[type="search"]:focus {
  outline: none;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.top-search input[type="search"]::-webkit-search-decoration,
.top-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex-wrap: nowrap;
}

.top-nav .nav-link {
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-link:hover {
  color: var(--ink);
  background: rgba(10, 15, 28, 0.04);
}
.nav-link:visited:hover {
  color: var(--ink);
}

.nav-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--danger);
  color: #fff;
}

/* User menu ? avatar, sem username */
.user-menu { position: relative; }

.user-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}
.user-menu-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(10, 15, 28, 0.08);
}
.user-avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.user-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 10.5rem;
  padding: 0.35rem;
  background: var(--surface-solid);
  border: 1px solid rgba(10, 15, 28, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 60;
}
.user-menu-dropdown.open { display: block; }

.user-menu-item {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  text-align: left;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.user-menu-item:hover {
  background: rgba(10, 15, 28, 0.04);
  color: var(--ink);
}
.user-menu-item--danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.mobile-drawer {
  display: none;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0 var(--page-pad) 0.85rem;
  border-top: 1px solid rgba(10, 15, 28, 0.05);
}
.mobile-drawer.open { display: block; }

.mobile-drawer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding-top: 0.65rem;
}

.site-main {
  flex: 1;
  width: min(var(--content-max), 100% - var(--page-pad) * 2);
  margin-inline: auto;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(2rem, 4vw, 3rem);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--ink-faint);
  padding: 1.5rem var(--page-pad) 2rem;
  font-family: var(--font-mono);
  border-top: 1px solid rgba(10, 15, 28, 0.05);
}
.footer-link {
  color: var(--ink-faint);
  text-decoration: none;
}
.footer-link:hover { color: var(--accent-ink); }

/* ---------- Cookies / privacidade ---------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  padding: 0.85rem var(--page-pad) calc(0.85rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.cookie-banner[hidden] { display: none !important; }
.cookie-banner-inner {
  pointer-events: auto;
  width: min(720px, 100%);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem 1.1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-md, 12px);
  border: 1px solid rgba(10, 15, 28, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -8px 32px rgba(10, 15, 28, 0.12), 0 1px 2px rgba(10, 15, 28, 0.06);
  backdrop-filter: blur(12px);
  animation: cookie-in 0.28s ease;
}
.cookie-banner.is-hiding .cookie-banner-inner {
  animation: cookie-out 0.22s ease forwards;
}
@keyframes cookie-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cookie-out {
  to { opacity: 0; transform: translateY(10px); }
}
.cookie-banner-copy {
  flex: 1 1 16rem;
  min-width: 0;
}
.cookie-banner-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.cookie-banner-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.cookie-banner-text a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

.legal-page .legal-body {
  margin-top: 1.5rem;
}
.legal-body h2 {
  margin-top: 1.75rem;
  margin-bottom: 0.65rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}
.legal-body h3 {
  margin-top: 1.1rem;
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ink);
}
.legal-body p,
.legal-body li {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.legal-body ul {
  margin: 0.5rem 0 0.85rem;
  padding-left: 1.2rem;
}
.legal-body li + li { margin-top: 0.35rem; }

/* ---------- Bot?es ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: none; }
.btn:active { transform: scale(0.98); }

.btn-sm {
  font-size: 0.75rem;
  padding: 0.4rem 0.75rem;
}

.btn-icon {
  padding: 0.4rem;
  min-width: 2rem;
  min-height: 2rem;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--accent-ink);
  box-shadow: none;
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: rgba(10, 15, 28, 0.1);
}
.btn-ghost:hover {
  background: rgba(10, 15, 28, 0.04);
  color: var(--ink);
  border-color: rgba(10, 15, 28, 0.14);
}

.btn-danger {
  background: var(--danger, #dc2626);
  color: #fff;
  border-color: var(--danger, #dc2626);
}
.btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}
.btn-danger-ghost {
  background: rgba(255, 255, 255, 0.4);
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.2);
}
.btn-danger-ghost:hover { background: var(--danger-soft); }

/* ---------- Glass surfaces ---------- */

.glass {
  background: var(--surface);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.card {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.card:hover {
  box-shadow: var(--shadow);
}

/* ---------- Post cards ? bento fluido ---------- */

.post-card {
  position: relative;
  background: var(--surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.3s ease;
  animation: fade-up 0.6s var(--ease) both;
}

.post-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 28, 0.02);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(10, 15, 28, 0.1);
}
.post-card:hover::before { opacity: 1; }

.post-card-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 4px);
  margin-bottom: 0.85rem;
  background: var(--bg-deep);
}

.post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.post-card:hover .post-card-media img {
  transform: scale(1.04);
}

.post-card-featured {
  border-radius: var(--radius-xl);
}
.post-card-featured .post-card-media {
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
}

@media (min-width: 640px) {
  .post-card-featured {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 1.5rem;
    align-items: center;
  }
  .post-card-featured .post-card-media {
    margin-bottom: 0;
    aspect-ratio: 4 / 3;
    min-height: 220px;
  }
}

/* ---------- Hero ---------- */

.hero-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  animation: fade-up 0.5s var(--ease) both;
}
.hero-panel::before,
.hero-panel::after { display: none; }

.hero-panel--compact .hero-title {
  font-size: clamp(1.45rem, 2.8vw + 0.7rem, 2.75rem);
  max-width: none;
  line-height: 1.12;
  white-space: normal;
  overflow-wrap: anywhere;
  margin: 0;
}
@media (min-width: 480px) {
  .hero-panel--compact .hero-title {
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

/* Hero com nuvem clássica (word cloud) à direita */
.hero-panel--with-cloud {
  display: grid;
  gap: 1.25rem 2rem;
  align-items: center;
  overflow: visible;
}
@media (min-width: 720px) {
  .hero-panel--with-cloud {
    grid-template-columns: 1fr min(360px, 40%);
  }
}
@media (min-width: 1024px) {
  .hero-panel--with-cloud {
    grid-template-columns: 1fr min(420px, 44%);
    gap: 1.5rem 2.5rem;
  }
}
.hero-content {
  min-width: 0;
  order: 1;
}

.tag-cloud-hero {
  position: relative;
  width: min(100%, 380px);
  height: clamp(220px, 28vw, 300px);
  margin-inline: auto;
  order: 2;
  user-select: none;
  overflow: hidden;
  background: transparent;
}
.tag-cloud-hero:not(.is-packed) .tag-cloud-word {
  position: relative;
  display: inline-block;
  margin: 0.15rem 0.35rem;
}
.tag-cloud-hero.is-packed .tag-cloud-word {
  position: absolute;
  margin: 0;
}

@media (min-width: 720px) {
  .tag-cloud-hero {
    width: 100%;
    max-width: 420px;
    margin-inline: auto 0;
    justify-self: end;
    height: 280px;
  }
}
@media (min-width: 1024px) {
  .tag-cloud-hero {
    max-width: 460px;
    height: 310px;
  }
}

.tag-cloud-word {
  --base-rot: 0deg;
  --rot: 0deg;
  --dx: 7px;
  --dy: -9px;
  display: inline-block;
  font-family: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  will-change: transform;
  animation: cloud-float 6.5s ease-in-out infinite;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Paleta estilo nuvem clássica (vermelho, verde, amarelo, laranja, marrom) */
.tag-cloud-word[data-cor="0"] { color: #8B1A2B; }
.tag-cloud-word[data-cor="1"] { color: #1F6B3A; }
.tag-cloud-word[data-cor="2"] { color: #C9A227; }
.tag-cloud-word[data-cor="3"] { color: #C62828; }
.tag-cloud-word[data-cor="4"] { color: #5BA82F; }
.tag-cloud-word[data-cor="5"] { color: #D4762C; }
.tag-cloud-word[data-cor="6"] { color: #3D2B1F; }
.tag-cloud-word[data-cor="7"] { color: #0D5C4D; }

.tag-cloud-word[data-peso="1"] { font-size: 0.68rem; font-weight: 600; opacity: 0.88; }
.tag-cloud-word[data-peso="2"] { font-size: 0.82rem; font-weight: 650; }
.tag-cloud-word[data-peso="3"] { font-size: 1.02rem; font-weight: 700; }
.tag-cloud-word[data-peso="4"] { font-size: 1.28rem; font-weight: 800; letter-spacing: -0.03em; }
.tag-cloud-word[data-peso="5"] { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.035em; }

.tag-cloud-word--comunidade {
  font-style: normal;
}

/* Ritmos e trajetórias diferentes por palavra */
.tag-cloud-word:nth-child(5n+1) {
  --rot: -3deg; --dx: 9px; --dy: -11px;
  animation-duration: 5.2s; animation-delay: -0.4s;
}
.tag-cloud-word:nth-child(5n+2) {
  --rot: 2.5deg; --dx: -7px; --dy: 9px;
  animation-duration: 7.1s; animation-delay: -1.2s;
}
.tag-cloud-word:nth-child(5n+3) {
  --rot: -2deg; --dx: 6px; --dy: 7px;
  animation-duration: 6.2s; animation-delay: -2.1s;
}
.tag-cloud-word:nth-child(5n+4) {
  --rot: 3deg; --dx: -10px; --dy: -6px;
  animation-duration: 8s; animation-delay: -0.8s;
}
.tag-cloud-word:nth-child(5n) {
  --rot: -1.5deg; --dx: 8px; --dy: 5px;
  animation-duration: 5.8s; animation-delay: -3s;
}

@keyframes cloud-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(calc(var(--base-rot) + var(--rot) * 0.15));
  }
  25% {
    transform: translate3d(var(--dx), calc(var(--dy) * 0.4), 0)
      rotate(calc(var(--base-rot) + var(--rot)));
  }
  50% {
    transform: translate3d(calc(var(--dx) * -0.35), var(--dy), 0)
      rotate(calc(var(--base-rot) + var(--rot) * 0.4));
  }
  75% {
    transform: translate3d(calc(var(--dx) * 0.55), calc(var(--dy) * -0.5), 0)
      rotate(calc(var(--base-rot) + var(--rot) * 0.7));
  }
}

@media (hover: hover) {
  .tag-cloud-hero:hover .tag-cloud-word { opacity: 0.55; }
  .tag-cloud-hero .tag-cloud-word:hover {
    opacity: 1 !important;
    filter: brightness(1.08);
    z-index: 2;
    animation-play-state: paused;
    transform: translate3d(0, 0, 0) rotate(var(--base-rot)) scale(1.08);
  }
}

@media (max-width: 719px) {
  .hero-panel--with-cloud {
    grid-template-columns: 1fr;
  }
  .tag-cloud-hero {
    order: -1;
    max-width: 300px;
    height: 200px;
  }
  .tag-cloud-word[data-peso="5"] { font-size: 1.25rem; }
  .tag-cloud-word[data-peso="4"] { font-size: 1.08rem; }
  .tag-cloud-word[data-peso="3"] { font-size: 0.92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tag-cloud-word {
    animation: none !important;
    transition: none;
  }
}

.hero-title {
  font-size: clamp(1.05rem, 2.4vw + 0.55rem, 2.5rem);
  letter-spacing: -0.04em;
  max-width: none;
  line-height: 1.12;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-bottom: 0.65rem;
  padding: 0;
  border: none;
  background: none;
}

.hero-lead {
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.25rem);
  color: var(--ink);
  font-weight: 550;
  max-width: 36rem;
  margin-top: 1rem;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.hero-sub {
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  color: var(--ink-soft);
  max-width: 38rem;
  margin-top: 0.65rem;
  line-height: 1.65;
}
.hero-sub--close {
  margin-top: 0.9rem;
  color: var(--ink);
  font-weight: 550;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.stat-pill {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 4.5rem;
  padding: 0;
  border: none;
  background: none;
  backdrop-filter: none;
}
.stat-pill:hover { transform: none; }

.stat-pill dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.stat-pill dd {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw + 0.5rem, 1.75rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

/* ---------- Home ? bloco explicativo (visitantes) ---------- */

.home-purpose {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  animation: fade-up 0.55s var(--ease) 0.08s both;
}

.home-purpose-panel {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 0;
  background: var(--surface-solid);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.home-purpose-glow {
  display: none;
}

.home-purpose-inner {
  position: relative;
  border-radius: var(--radius-xl);
  padding: clamp(1.35rem, 2.5vw, 2rem);
  background: transparent;
}

.home-purpose-head {
  max-width: 44rem;
}

.home-purpose-title {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.8vw + 0.85rem, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--ink);
}

.home-purpose-lead {
  margin: 0.85rem 0 0;
  font-size: clamp(0.925rem, 0.85rem + 0.25vw, 1.02rem);
  line-height: 1.65;
  color: var(--ink-soft);
}

.home-purpose-grid {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

@media (min-width: 640px) {
  .home-purpose-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (min-width: 960px) {
  .home-purpose-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.home-purpose-card {
  padding: 1rem 1.05rem 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface-solid);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

@media (hover: hover) {
  .home-purpose-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
  }
}

.home-purpose-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}

.home-purpose-icon--teal {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.home-purpose-icon--blue {
  color: #1D4ED8;
  background: var(--blue-glow);
}

.home-purpose-icon--violet {
  color: var(--violet);
  background: var(--violet-glow);
}

.home-purpose-icon--amber {
  color: var(--amber);
  background: var(--amber-soft);
}

.home-purpose-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.home-purpose-card-text {
  margin: 0.45rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.home-purpose-steps {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(14, 165, 160, 0.35);
  background: rgba(14, 165, 160, 0.04);
}

@media (min-width: 720px) {
  .home-purpose-steps {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
  }
}

.home-purpose-steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--ink-soft);
}

.home-purpose-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
  flex-shrink: 0;
}

/* ---------- Home — depoimentos ---------- */

.home-testimonials {
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  animation: fade-up 0.55s var(--ease) 0.12s both;
}

.home-testimonials-inner {
  border-radius: var(--radius-xl);
  padding: clamp(1.35rem, 2.5vw, 2rem);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}

.home-testimonials-head {
  margin-bottom: 1.25rem;
}

.home-testimonials-title {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.5vw + 0.8rem, 1.55rem);
  font-weight: 700;
  color: var(--ink);
}

.home-testimonials-carousel {
  position: relative;
}

.home-testimonials-viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.home-testimonials-track {
  display: flex;
  gap: 1rem;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.home-testimonials-slide {
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
}

.home-testimonials-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1rem;
}

.home-testimonials-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.home-testimonials-nav:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: transparent;
}

.home-testimonials-dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.home-testimonials-dot {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(10, 15, 28, 0.18);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}

.home-testimonials-dot.is-active {
  width: 1.35rem;
  background: var(--accent);
}

.home-testimonial-card {
  position: relative;
  margin: 0;
  padding: 1.15rem 1.25rem 1.2rem;
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
}

.home-testimonial-quote {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--accent-soft);
  font-weight: 800;
  margin-bottom: 0.15rem;
}

.home-testimonial-text {
  margin: 0;
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.home-testimonial-author {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-soft);
}

.home-testimonial-identity {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}

.home-testimonial-identity:hover .home-testimonial-name {
  color: var(--accent-ink);
}

.home-testimonial-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.home-testimonial-avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}

.home-testimonial-name {
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--ink);
  transition: color 0.2s ease;
}

/* ---------- Nuvem de tags ? bolhas flutuantes ---------- */

.tag-cloud-section {
  border-radius: var(--radius-xl);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  animation: fade-up 0.75s var(--ease) 0.1s both;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 0.85rem;
  padding: clamp(1rem, 3vw, 2rem);
}

.tag-cloud-item {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1;
  padding: 0;
  border: none;
  background: none;
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s var(--ease);
}
.tag-cloud-item:hover {
  transform: scale(1.05);
  color: var(--accent-ink);
  opacity: 1;
}
.tag-cloud-item.is-active {
  color: var(--accent);
  font-weight: 700;
}

.tag-cloud-item[data-peso="1"] { font-size: 0.78rem; opacity: 0.75; font-weight: 500; }
.tag-cloud-item[data-peso="2"] { font-size: 0.9rem; opacity: 0.88; }
.tag-cloud-item[data-peso="3"] { font-size: 1.05rem; }
.tag-cloud-item[data-peso="4"] { font-size: 1.22rem; letter-spacing: -0.02em; }
.tag-cloud-item[data-peso="5"] {
  font-size: 1.4rem;
  letter-spacing: -0.03em;
  padding: 0.55rem 1.25rem;
}

/* ---------- Chips ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.01em;
  padding: 0.22rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(10, 15, 28, 0.08);
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.chip:hover {
  border-color: rgba(14, 165, 160, 0.3);
  color: var(--accent-ink);
}

.chip-dot { display: none; }

.chip-accent {
  background: var(--accent-soft);
  border-color: rgba(14, 165, 160, 0.2);
  color: var(--accent-ink);
}

.profile-meta-estudo {
  margin-top: 0.85rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(14, 165, 160, 0.18);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(14, 165, 160, 0.08), rgba(14, 165, 160, 0.02));
}
.profile-meta-estudo-label {
  margin: 0 0 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.chip-shortcode {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  background: rgba(10, 15, 28, 0.04);
  border-color: rgba(10, 15, 28, 0.08);
  user-select: all;
  text-transform: none;
  font-weight: 500;
}
.quiz-meta .chip-shortcode {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
}
.quiz-meta .chip-shortcode + span::before {
  content: none;
}

.dnd-block-shortcode {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-faint);
  user-select: all;
}
.dnd-block-label-sep {
  text-transform: none;
  color: var(--ink-faint);
  opacity: 0.65;
}

/* Cores distintas por categoria nos chips dos cards (hash do slug → tom 0–11) */
.cat-tone-0 { --cat-bg: rgba(14, 165, 160, 0.14); --cat-ink: #0F766E; --cat-line: #0EA5A0; } /* teal */
.cat-tone-1 { --cat-bg: rgba(37, 99, 235, 0.14); --cat-ink: #1D4ED8; --cat-line: #2563EB; } /* azul */
.cat-tone-2 { --cat-bg: rgba(217, 119, 6, 0.14); --cat-ink: #B45309; --cat-line: #D97706; } /* âmbar */
.cat-tone-3 { --cat-bg: rgba(225, 29, 72, 0.12); --cat-ink: #BE123C; --cat-line: #E11D48; } /* rosa */
.cat-tone-4 { --cat-bg: rgba(5, 150, 105, 0.14); --cat-ink: #047857; --cat-line: #059669; } /* esmeralda */
.cat-tone-5 { --cat-bg: rgba(8, 145, 178, 0.14); --cat-ink: #0E7490; --cat-line: #0891B2; } /* ciano */
.cat-tone-6 { --cat-bg: rgba(79, 70, 229, 0.12); --cat-ink: #4338CA; --cat-line: #6366F1; } /* índigo */
.cat-tone-7 { --cat-bg: rgba(234, 88, 12, 0.14); --cat-ink: #C2410C; --cat-line: #EA580C; } /* laranja */
.cat-tone-8 { --cat-bg: rgba(101, 163, 13, 0.16); --cat-ink: #4D7C0F; --cat-line: #65A30D; } /* lima */
.cat-tone-9 { --cat-bg: rgba(124, 58, 237, 0.12); --cat-ink: #6D28D9; --cat-line: #7C3AED; } /* violeta */
.cat-tone-10 { --cat-bg: rgba(71, 85, 105, 0.14); --cat-ink: #334155; --cat-line: #64748B; } /* ardósia */
.cat-tone-11 { --cat-bg: rgba(190, 24, 93, 0.12); --cat-ink: #9D174D; --cat-line: #DB2777; } /* magenta */

.chip.chip-cat {
  background: var(--cat-bg, rgba(14, 165, 160, 0.12));
  border-color: var(--cat-line, #0EA5A0);
  border-color: color-mix(in srgb, var(--cat-line, #0EA5A0) 40%, transparent);
  color: var(--cat-ink, #0F766E);
}
.chip.chip-cat:hover {
  border-color: color-mix(in srgb, var(--cat-line, #0EA5A0) 65%, transparent);
  color: var(--cat-ink, #0F766E);
}

/* ---------- Layout home ? conte?do + rail direita ---------- */

.home-layout {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
@media (min-width: 960px) {
  .home-layout {
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
  }
  .home-rail {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
  }
  /* Alinha o 1º card do rail com o card de destaque (rótulo fica fora do box) */
  .home-layout--has-featured .home-rail {
    padding-top: var(--home-featured-label-offset);
  }
}

.home-main { min-width: 0; }

.home-featured > .section-label {
  display: block;
  line-height: 1.4;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}

.posts-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 640px) {
  .posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .posts-grid { grid-template-columns: repeat(2, 1fr); gap: 1.15rem; }
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.filter-clear {
  font-size: 0.75rem;
  color: var(--ink-faint);
  text-decoration: none;
}
.filter-clear:hover { color: var(--accent-ink); }

.pagination-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 2rem;
}

/* Rail — categorias à direita */
.home-rail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cat-nav-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin: 0 0 0.65rem;
}

.cat-nav { padding: 1rem 0.85rem; }

.cat-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cat-nav-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.cat-nav-item:hover {
  color: var(--ink);
  background: rgba(10, 15, 28, 0.03);
}
.cat-nav-item.is-active {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-left-color: var(--accent);
  font-weight: 650;
}

.cat-nav-more {
  display: block;
  margin-top: 0.55rem;
  padding: 0.35rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 0.12s ease, background 0.12s ease;
}
.cat-nav-more:hover {
  color: var(--accent-ink);
  background: rgba(10, 15, 28, 0.03);
}

.rail-tag-list--page {
  gap: 0.5rem;
}
.rail-tag-list--page .chip {
  gap: 0.35rem;
}

.mobile-cat-nav {
  padding: 0.75rem 0 0.25rem;
  border-top: 1px solid rgba(10, 15, 28, 0.06);
  margin-top: 0.5rem;
}
.mobile-cat-nav .cat-nav-item {
  display: inline-flex;
  margin: 0.15rem 0.35rem 0.15rem 0;
  padding: 0.35rem 0.65rem;
  border-left: none;
  border: 1px solid rgba(10, 15, 28, 0.08);
  border-radius: var(--radius-sm);
}
.mobile-cat-nav .cat-nav-item.is-active {
  border-color: var(--accent);
}

.rail-filters { padding: 1rem 0.85rem; }
.rail-filter + .rail-filter { margin-top: 0.75rem; }
.rail-tags { padding: 1rem 0.85rem; }
.rail-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tag-cloud--left {
  justify-content: flex-start;
}

.tag-cloud-head {
  padding: 1rem 1.15rem 0.25rem;
}

/* ---------- Formulários ---------- */

.field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}

/* Campos de texto — especificidade alta p/ vencer utilitários do Tailwind CDN */
.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
.form-stack input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
.form-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
.auth-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
.questao-alt-row input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
.banco-filtros input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(10, 15, 28, 0.14);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(10, 15, 28, 0.05);
  backdrop-filter: blur(8px);
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-field textarea,
.form-stack textarea,
.form-card textarea,
textarea {
  min-height: 5rem;
  resize: vertical;
}

.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):hover:not(:focus),
.form-stack input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):hover:not(:focus),
.form-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):hover:not(:focus),
.questao-alt-row input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):hover:not(:focus),
input[type="text"]:hover:not(:focus),
input[type="email"]:hover:not(:focus),
input[type="password"]:hover:not(:focus),
input[type="number"]:hover:not(:focus),
input[type="search"]:hover:not(:focus),
input[type="tel"]:hover:not(:focus),
input[type="url"]:hover:not(:focus),
textarea:hover:not(:focus),
select:hover:not(:focus) {
  border-color: rgba(10, 15, 28, 0.22);
  box-shadow: 0 1px 3px rgba(10, 15, 28, 0.07);
}

.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):focus,
.form-stack input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):focus,
.form-card input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):focus,
.questao-alt-row input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent-soft), 0 1px 2px rgba(10, 15, 28, 0.05);
  outline: none;
}

/* Autofill do navegador — evita campo “vazio” ou ilegível após sugestão de senha */
.auth-page input:-webkit-autofill,
.auth-page input:-webkit-autofill:hover,
.auth-page input:-webkit-autofill:focus,
.form-card input:-webkit-autofill,
.form-card input:-webkit-autofill:hover,
.form-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px #fff inset !important;
  transition: background-color 99999s ease-out 0s;
}

.form-field input::placeholder,
.form-stack input::placeholder,
.form-card input::placeholder,
.form-field textarea::placeholder,
.form-stack textarea::placeholder,
.form-card textarea::placeholder,
.questao-alt-row input::placeholder,
.questao-alt-row textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--ink-faint);
  opacity: 1;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
}

/* Selects: especificidade alta p/ vencer preflight do Tailwind (padding: 0) */
.rail-filters select,
.sort-form select,
.banco-filtros select,
.form-card select,
.form-stack select,
.form-field select,
select.form-select {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.4;
  min-height: 2.75rem;
  padding: 0.75rem 2rem 0.75rem 1rem;
  border: 1px solid rgba(10, 15, 28, 0.14);
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.95);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B95A8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  box-shadow: 0 1px 2px rgba(10, 15, 28, 0.05);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.rail-filters select,
.banco-filtros select {
  font-size: 0.85rem;
  min-height: 2.35rem;
  padding: 0.6rem 2rem 0.6rem 0.75rem;
}
.sort-form select {
  width: auto;
  min-width: 9rem;
  min-height: auto;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  padding: 0.45rem 2rem 0.45rem 0.65rem;
}

/* Tags do formul?rio de post ? lado a lado com quebra de linha */
.tag-checkboxes,
#id_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}
#id_tags > div,
.tag-checkboxes > div {
  margin: 0;
  flex: 0 0 auto;
}
#id_tags label,
.tag-checkboxes label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(10, 15, 28, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
#id_tags label:hover,
.tag-checkboxes label:hover {
  border-color: rgba(14, 165, 160, 0.4);
  color: var(--ink);
}
#id_tags input[type="checkbox"],
.tag-checkboxes input[type="checkbox"] {
  width: auto;
  margin: 0;
  padding: 0;
  box-shadow: none;
  accent-color: var(--accent);
  flex-shrink: 0;
}
#id_tags label:has(input:checked),
.tag-checkboxes label:has(input:checked) {
  background: var(--accent-soft);
  border-color: rgba(14, 165, 160, 0.45);
  color: var(--accent-ink);
}
.form-field--tags .field-label { margin-bottom: 0.5rem; }

.tag-picker {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.tag-picker-native {
  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;
  border: 0 !important;
  pointer-events: none !important;
}

.tag-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-height: 2rem;
}

.tag-picker-empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.tag-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(14, 165, 160, 0.35);
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.55rem 0.35rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.tag-picker-chip:hover {
  border-color: var(--accent);
}

.tag-picker-chip-x {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
}

.tag-picker-row {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.tag-picker-input {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.92rem;
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(10, 15, 28, 0.14);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
}

.tag-picker-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.tag-picker-list {
  position: relative;
  top: 0;
  margin-top: -0.15rem;
}
.banco-filtros input[type="text"],
.banco-filtros input[type="search"] {
  font-size: 0.85rem;
  padding: 0.6rem 0.75rem;
}

/* File upload ? bot?o Explorar alinhado ao design */
input[type="file"] {
  display: block;
  width: 100%;
  padding: 0.55rem;
  border: 1px dashed rgba(10, 15, 28, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
input[type="file"]:hover {
  border-color: rgba(14, 165, 160, 0.4);
  background: #fff;
  box-shadow: none;
}
input[type="file"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="file"]::file-selector-button {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid rgba(14, 165, 160, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.85rem;
  margin-right: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
input[type="file"]::file-selector-button:hover {
  background: rgba(14, 165, 160, 0.2);
  border-color: rgba(14, 165, 160, 0.4);
}
input[type="file"]::-webkit-file-upload-button {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 1px solid rgba(14, 165, 160, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.85rem;
  margin-right: 0.75rem;
  cursor: pointer;
}
.file-clear {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.file-clear input[type="checkbox"] {
  width: auto;
  box-shadow: none;
  accent-color: var(--accent);
}
.current-file {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.current-file a {
  color: var(--accent-ink);
  text-decoration: none;
}
.current-file a:hover { text-decoration: underline; }

/* ---------- Quest?es ? card org?nico ---------- */

.quiz-block {
  margin: 2rem 0;
  border-radius: var(--radius-xl);
  overflow: visible;
  background: var(--surface-solid);
  backdrop-filter: none;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.quiz-block-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.35rem;
  background: rgba(10, 15, 28, 0.03);
  border-bottom: 1px solid var(--border-soft);
}

.quiz-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
}

.quiz-block-body { padding: 1.25rem 1.35rem 1.5rem; }

.quiz-enunciado {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem);
  color: var(--ink);
  margin: 0 0 1.1rem;
  line-height: 1.5;
  letter-spacing: -0.02em;
}
.quiz-enunciado p { margin: 0.55em 0; }
.quiz-enunciado p:first-child { margin-top: 0; }
.quiz-enunciado p:last-child { margin-bottom: 0; }
.quiz-enunciado img,
.quiz-option-body img,
.quiz-explicacao img {
  display: block;
  max-width: min(100%, 520px);
  height: auto;
  margin: 0.65rem 0;
  border-radius: var(--radius);
  border: 1px solid rgba(10, 15, 28, 0.08);
}
.quiz-option-body {
  flex: 1;
  min-width: 0;
}
.quiz-option-body p { margin: 0.2em 0; }
.quiz-option-body p:first-child { margin-top: 0; }
.quiz-option-body p:last-child { margin-bottom: 0; }
.questao-form-editor .ck-editor { margin-top: 0.35rem; }
.questao-alt-row .ck-editor__editable {
  min-height: 4.5rem;
}

.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.6rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.quiz-option:last-child { margin-bottom: 0; }
.quiz-option:hover:not(:disabled) {
  border-color: rgba(45, 212, 191, 0.5);
  background: rgba(255, 255, 255, 0.85);
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(14, 165, 160, 0.12);
}
.quiz-option:disabled { cursor: default; }

.quiz-option-letter {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink-soft);
  border: 1px solid var(--border-soft);
}

.quiz-option--correct {
  border-color: rgba(5, 150, 105, 0.4);
  background: var(--ok-soft);
}
.quiz-option--correct .quiz-option-letter {
  background: var(--ok);
  color: #fff;
  border-color: var(--ok);
}
.quiz-option--incorrect {
  border-color: rgba(220, 38, 38, 0.35);
  background: var(--danger-soft);
}
.quiz-option--incorrect .quiz-option-letter {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.quiz-resultado {
  margin-top: 1.1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.quiz-resultado--ok {
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 700;
}
.quiz-resultado--erro {
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 700;
}
.quiz-explicacao {
  margin-top: 0.45rem;
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* ---------- Estatísticas interativas (questão / card / drag) ---------- */

.quiz-stats {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.quiz-stats-community {
  color: var(--ink-soft);
  font-weight: 500;
  margin: 0;
}
.quiz-stats-difficulty {
  margin: 0.35rem 0 0;
}
.quiz-stats-chart-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 0.85rem;
}
.quiz-donut {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.quiz-donut::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--surface, #fff);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.quiz-donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 10rem;
}
.quiz-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}
.quiz-donut-swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.questao-usuario-links {
  margin-top: 0.75rem;
}
body:not(.is-auth) .questao-meu-historico {
  display: none !important;
}
.questao-historico-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.questao-historico-item {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.questao-historico-item--ok { color: var(--ok); }
.questao-historico-item--erro { color: var(--danger); }
.dnd-block .quiz-stats {
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* ---------- Stats atividade ---------- */

.atividade-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 480px) {
  .atividade-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .atividade-grid { grid-template-columns: repeat(4, 1fr); }
}

.atividade-card {
  padding: 1.15rem 1.25rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  transition: transform 0.25s var(--ease);
}
.atividade-card:hover { transform: translateY(-3px); }

.atividade-card .valor {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw + 0.5rem, 1.85rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.atividade-card .rotulo {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-top: 0.4rem;
}
.atividade-card .sub {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
}

/* ---------- Curtida ---------- */

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.like-btn:hover { border-color: rgba(220, 38, 38, 0.3); transform: scale(1.03); }
.like-btn[data-curtiu="1"] {
  border-color: rgba(220, 38, 38, 0.35);
  background: var(--danger-soft);
  color: var(--danger);
}
.like-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.favorite-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.favorite-btn:hover { border-color: rgba(202, 138, 4, 0.4); transform: scale(1.03); }
.favorite-btn[data-favorito="1"] {
  border-color: rgba(202, 138, 4, 0.45);
  background: rgba(254, 243, 199, 0.85);
  color: #a16207;
}
.favorite-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.react-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.dislike-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.dislike-btn:hover { border-color: rgba(10, 15, 28, 0.25); transform: scale(1.03); }
.dislike-btn.is-active,
.dislike-btn[data-descurtiu="1"] {
  border-color: rgba(10, 15, 28, 0.28);
  background: rgba(10, 15, 28, 0.06);
  color: var(--ink);
}
.dislike-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.email-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-family: var(--font-mono);
}
.email-hint[hidden],
.password-match[hidden] {
  display: none !important;
}
.email-hint.is-valid { color: var(--ok); }
.email-hint.is-invalid { color: var(--danger); }
.email-hint-icon::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}
.contrib-excerpt {
  margin: 0.35rem 0 0;
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: pre-wrap;
  background: rgba(10, 15, 28, 0.04);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(10, 15, 28, 0.06);
}

/* ---------- Coment?rios ---------- */

.comment {
  border-left: 2px solid rgba(10, 15, 28, 0.1);
  padding-left: 1rem;
  overflow-wrap: anywhere;
}
.comment + .comment { margin-top: 1.15rem; }

.comment-reply-thread {
  margin-top: 0.85rem;
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 2px dashed rgba(10, 15, 28, 0.12);
}

.questao-comentarios {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(10, 15, 28, 0.06);
}
.questao-comentarios-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.questao-comentarios-count {
  color: var(--ink-faint);
  font-weight: 500;
}
.questao-comentarios-painel {
  margin-top: 0.85rem;
}
.questao-comentario-form textarea {
  width: 100%;
}
.questao-comentario-form .ck-editor,
.form-resposta .ck-editor {
  margin-top: 0.35rem;
}
.prose-comment {
  line-height: 1.55;
  word-break: break-word;
}
.prose-comment p { margin: 0 0 0.5em; }
.prose-comment p:last-child { margin-bottom: 0; }
.prose-comment ul, .prose-comment ol {
  margin: 0.35em 0 0.5em 1.2em;
  padding: 0;
}
.prose-comment a { color: var(--accent-ink); text-decoration: underline; }
.comment-edited {
  font-style: italic;
  color: var(--ink-faint);
}
.form-editar-comentario .ck-editor {
  margin-top: 0.35rem;
}

/* ---------- Prose ---------- */

.prose {
  color: var(--ink);
  line-height: 1.85;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.05rem);
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--font-display);
  margin-top: 1.75em;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.prose p { margin: 1.05em 0; }
.prose img { border-radius: var(--radius-lg); max-width: 100%; height: auto; }
.prose a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: rgba(14, 165, 160, 0.35);
  text-underline-offset: 3px;
}
.prose a:visited {
  color: var(--accent-ink);
}
.prose strong { color: var(--ink); font-weight: 700; }

.prose span[style*="color"],
.prose span[style*="background-color"] { white-space: inherit; }

.prose code {
  font-family: var(--font-mono);
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: 0.15em 0.45em;
  border-radius: 8px;
  font-size: 0.88em;
  font-weight: 500;
}

.prose pre {
  white-space: pre;
  overflow-x: auto;
  background: var(--code-bg) !important;
  color: var(--code-ink) !important;
  border: 1px solid var(--code-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.65;
  max-width: 100%;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  margin: 1.5em 0;
}
.prose pre code,
.prose pre code.hljs {
  background: transparent !important;
  color: inherit !important;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: 400;
}

.prose pre .hljs-comment,
.prose pre .hljs-quote { color: #8B9BB4; font-style: italic; }
.prose pre .hljs-keyword,
.prose pre .hljs-selector-tag,
.prose pre .hljs-addition { color: #7EE0E5; }
.prose pre .hljs-number,
.prose pre .hljs-string,
.prose pre .hljs-meta .hljs-meta-string,
.prose pre .hljs-literal,
.prose pre .hljs-doctag,
.prose pre .hljs-regexp { color: #F0C674; }
.prose pre .hljs-title,
.prose pre .hljs-section,
.prose pre .hljs-name,
.prose pre .hljs-selector-id,
.prose pre .hljs-selector-class { color: #8AB4F8; }
.prose pre .hljs-attribute,
.prose pre .hljs-attr,
.prose pre .hljs-variable,
.prose pre .hljs-template-variable,
.prose pre .hljs-class .hljs-title,
.prose pre .hljs-type { color: #C3E88D; }
.prose pre .hljs-symbol,
.prose pre .hljs-bullet,
.prose pre .hljs-link,
.prose pre .hljs-meta,
.prose pre .hljs-selector-attr,
.prose pre .hljs-selector-pseudo,
.prose pre .hljs-built_in,
.prose pre .hljs-builtin-name { color: #FFAB91; }
.prose pre .hljs-deletion { color: #FF8A80; }
.prose pre .hljs-emphasis { font-style: italic; }
.prose pre .hljs-strong { font-weight: 700; }

.prose .media,
.prose figure.media {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin: 1.75rem 0;
  box-shadow: var(--shadow);
}
.prose .media iframe,
.prose .media video,
.prose figure.media iframe,
.prose figure.media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-lg);
}

/* ---------- Flashcards ---------- */

.flashcard-inline {
  perspective: 1400px;
  margin: 2rem 0;
  cursor: pointer;
  min-height: 160px;
}
.flashcard-inline-inner {
  position: relative;
  width: 100%;
  min-height: 160px;
  transition: transform 0.6s var(--ease);
  transform-style: preserve-3d;
}
.flashcard-inline.flipped .flashcard-inline-inner {
  transform: rotateY(180deg);
}
.flashcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.flashcard-front {
  background: var(--surface-solid);
  backdrop-filter: none;
  border: 1px solid var(--border);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.flashcard-back {
  background: #f0fdfa;
  color: var(--ink);
  border: 1px solid rgba(14, 165, 160, 0.35);
  transform: rotateY(180deg);
  box-shadow: var(--shadow-sm);
}

/* ---------- Deck ---------- */

.deck-wrap {
  position: relative;
  max-width: min(420px, 92vw);
  margin: 0 auto;
  height: clamp(280px, 50vh, 340px);
}
.deck-card {
  position: absolute;
  inset: 0;
  background: var(--surface);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 4vw, 1.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.deck-card:active { cursor: grabbing; }
.deck-card.dragging { transition: none; }
.deck-card .deck-card-face { display: flex; flex-direction: column; align-items: center; }
.deck-card .deck-card-back { display: none; color: var(--accent-ink); }
.deck-card.revelado .deck-card-front { display: none; }
.deck-card.revelado .deck-card-back { display: flex; flex-direction: column; align-items: center; }

.deck-hint {
  position: absolute;
  top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity 0.15s;
}
.deck-hint--sei { right: 1rem; background: var(--ok-soft); color: var(--ok); }
.deck-hint--nao { left: 1rem; background: var(--danger-soft); color: var(--danger); }

/* ---------- Visibilidade responsiva ---------- */

.hide-mobile { display: none !important; }
.show-mobile { display: inline-flex !important; }

@media (min-width: 768px) {
  .hide-mobile { display: initial !important; }
  .hide-mobile.btn,
  .hide-mobile.top-search,
  .hide-mobile.top-nav { display: flex !important; }
  .hide-mobile.nav-link { display: inline-flex !important; }
  .show-mobile { display: none !important; }
  .mobile-menu-toggle { display: none; }
}

@media (min-width: 768px) {
  .top-nav .nav-link {
    font-size: 0.75rem;
    padding: 0.35rem 0.5rem;
  }
  .top-actions .btn-sm {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  .top-search {
    max-width: 11rem;
  }
  .top-nav {
    gap: 0.02rem;
  }
  .top-nav .nav-link {
    padding: 0.35rem 0.38rem;
    font-size: 0.72rem;
  }
  .top-actions .btn-sm {
    font-size: 0.72rem;
    padding: 0.35rem 0.6rem;
  }
}

@media (max-width: 767px) {
  .top-bar-inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .brand {
    min-width: 0;
    max-width: calc(100vw - var(--page-pad) * 2 - 7.5rem);
  }
  .brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand { grid-column: 1; }
  .top-actions { grid-column: 2; grid-row: 1; }
  .top-search {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    margin-inline: 0;
  }
}

@media (max-width: 420px) {
  .brand-name {
    display: none;
  }
  .brand {
    max-width: none;
  }
}

@media (max-width: 559px) {
  .hero-actions .btn { width: auto; }
  .pagination-bar .btn { flex: 0 0 auto; }
}

.scroll-mt-nav { scroll-margin-top: calc(var(--nav-h) + 0.5rem); }

.flash-message {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid rgba(14, 165, 160, 0.15);
}

.flash-message--error,
.flash-message--danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.25);
}

.flash-message--warning {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.28);
}

.flash-message--success {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
  border-color: rgba(5, 150, 105, 0.25);
}

.profile-draft-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.28);
  color: #92400e;
}

.profile-draft-alert strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.profile-draft-alert p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.profile-read-alert {
  background: rgba(13, 148, 136, 0.1);
  border-color: rgba(13, 148, 136, 0.28);
  color: #0f766e;
}

.profile-read-alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.meus-artigos-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.25rem 0 1.5rem;
}

.meus-artigos-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid rgba(10, 15, 28, 0.1);
  background: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.meus-artigos-tab:hover {
  color: var(--accent-ink);
  border-color: rgba(14, 165, 160, 0.35);
}

.meus-artigos-tab.is-active {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: rgba(14, 165, 160, 0.4);
}

.meus-artigos-count {
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.meus-artigos-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.meus-artigos-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(10, 15, 28, 0.08);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.85);
}

.meus-artigos-status {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.meus-artigos-status--rascunho {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.meus-artigos-status--em_revisao {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.meus-artigos-status--publicado {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
}

.meus-artigos-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.meus-artigos-title a {
  color: inherit;
  text-decoration: none;
}

.meus-artigos-title a:hover {
  color: var(--accent-ink);
}

.meus-artigos-meta {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
  font-family: var(--font-mono, ui-monospace, monospace);
}

.meus-artigos-resumo {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.meus-artigos-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex-shrink: 0;
  align-items: center;
}

.meus-artigos-delete-form {
  display: inline;
  margin: 0;
}

.editor-autosave-status {
  min-height: 1.1em;
}

.form-errors {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(220, 38, 38, 0.22);
}

.form-errors__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.form-errors__list {
  margin: 0.45rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.form-errors__list li + li {
  margin-top: 0.2rem;
}

.field-required {
  color: var(--danger);
  font-weight: 700;
  margin-left: 0.15em;
}

.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error select,
.form-field.has-error .form-select {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15);
}

/* Combobox pesquisável (banca / assunto / categoria) */
.combo-wrap {
  position: relative;
}

.combo-wrap.is-open {
  z-index: 2;
}

/* Card/form que contém combo aberto fica acima dos blocos seguintes */
.card:has(.combo-wrap.is-open),
.form-card:has(.combo-wrap.is-open) {
  position: relative;
  z-index: 30;
  overflow: visible;
}

.page-main:has(.combo-wrap.is-open) {
  z-index: 1;
}

.combo-row {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
}

.combo-add {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 2.75rem;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.65rem;
}

/* Select nativo fica só para o form — escondido de verdade (ganha do .form-select) */
.combo-wrap select.combo-select-native,
select.combo-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  max-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;
  appearance: none !important;
  -webkit-appearance: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.combo-input {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.4;
  min-height: 2.75rem;
  padding: 0.75rem 2rem 0.75rem 1rem;
  border: 1px solid rgba(10, 15, 28, 0.14);
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.95);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B95A8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  box-shadow: 0 1px 2px rgba(10, 15, 28, 0.05);
  color: var(--ink);
}

.combo-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

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

.combo-list {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  max-height: 14rem;
  overflow: auto;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(10, 15, 28, 0.12);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(10, 15, 28, 0.12);
}

/* Lista ancorada no body (escapa cards com backdrop-filter / overflow) */
.combo-list.combo-list--floating {
  position: fixed;
  right: auto;
  top: auto;
  z-index: 100;
  margin: 0;
}

.combo-item {
  padding: 0.55rem 0.9rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--ink);
}

.combo-item:hover,
.combo-item:focus {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.combo-item--empty,
.combo-item--clear {
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

.combo-item--clear {
  border-bottom: 1px solid rgba(10, 15, 28, 0.06);
  margin-bottom: 0.2rem;
  padding-bottom: 0.65rem;
}

/* Modal de cadastro (categoria / banca / assunto / tag) */
body.catalog-modal-open {
  overflow: hidden;
}

.catalog-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.catalog-modal.is-open {
  display: flex;
}

.catalog-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 28, 0.55);
  backdrop-filter: blur(4px);
}

.catalog-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 24rem);
  padding: 1.15rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.catalog-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.catalog-modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.catalog-modal-close {
  flex: 0 0 auto;
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0.7;
}

.catalog-modal-hint {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.catalog-modal-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 0.95rem;
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(10, 15, 28, 0.14);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}

.catalog-modal-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.catalog-modal-error {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: var(--danger);
}

.catalog-modal-info {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: #92400e;
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.28);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  line-height: 1.4;
}

.catalog-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

/* Modal de confirmação (substitui window.confirm) */
body.confirm-modal-open {
  overflow: hidden;
}

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.confirm-modal.is-open {
  display: flex;
}

.confirm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 28, 0.55);
  backdrop-filter: blur(4px);
}

.confirm-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 26rem);
  padding: 1.15rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.confirm-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.confirm-modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.confirm-modal-close {
  flex: 0 0 auto;
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0.7;
}

.confirm-modal-message {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
  white-space: pre-line;
}

.confirm-modal-message--html {
  white-space: normal;
}

.confirm-modal-lead {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.confirm-modal-list {
  margin: 0 0 0.75rem;
  padding-left: 1.15rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.confirm-modal-list li + li {
  margin-top: 0.2rem;
}

.confirm-modal-note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-faint, var(--inkfaint));
  line-height: 1.45;
}

.confirm-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.form-field.has-error .ck-editor .ck-editor__editable {
  border-color: var(--danger) !important;
}

ul.errorlist {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  color: var(--danger);
  font-size: 0.75rem;
}

ul.errorlist li + li {
  margin-top: 0.2rem;
}

/* ---------- P?ginas internas (post, perfil, auth) ---------- */

.page-header {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}

.page-title--lg {
  font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
}

.page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.65rem;
  font-size: 0.8125rem;
  font-family: var(--font-mono);
  color: var(--ink-faint);
}

.page-meta a {
  color: var(--ink-soft);
  text-decoration: none;
}
.page-meta a:hover { color: var(--accent-ink); }

.page-layout {
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  align-items: start;
}
@media (min-width: 960px) {
  .page-layout--rail {
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
  }
  .page-layout--rail .page-rail {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
  }
}
.page-rail,
.home-rail {
  display: none;
}
@media (min-width: 960px) {
  .home-rail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .page-rail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

.page-main { min-width: 0; width: 100%; }

/* Preenche a coluna ao lado do rail ? sem faixa vazia no meio */
.page-article {
  max-width: none;
  width: 100%;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(10, 15, 28, 0.06);
}

.share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-top: 1.5rem;
  padding: 0.85rem 0 0;
  border-top: 1px solid rgba(10, 15, 28, 0.06);
}
.share-bar-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.share-bar-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(10, 15, 28, 0.1);
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.share-btn:hover {
  transform: translateY(-1px);
  color: var(--ink);
  border-color: rgba(10, 15, 28, 0.18);
  background: #fff;
}
.share-btn--wa:hover { color: #128C7E; border-color: rgba(18, 140, 126, 0.35); }
.share-btn--x:hover { color: #0A0F1C; }
.share-btn--li:hover { color: #0A66C2; border-color: rgba(10, 102, 194, 0.35); }
.share-btn--fb:hover { color: #1877F2; border-color: rgba(24, 119, 242, 0.35); }
.share-btn--copy { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft); }
.share-btn--copy.is-copied {
  color: var(--ok);
  border-color: rgba(5, 150, 105, 0.35);
  background: var(--ok-soft);
}
.share-copy-label { line-height: 1; }

.mais-lidas-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
@media (min-width: 720px) {
  .mais-lidas-list {
    grid-template-columns: 1fr 1fr;
  }
}
.mais-lidas-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(10, 15, 28, 0.06);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mais-lidas-item:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(14, 165, 160, 0.2);
}
.mais-lidas-rank {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  margin-top: 0.1rem;
}
.mais-lidas-item:nth-child(1) .mais-lidas-rank {
  background: var(--accent);
  color: #fff;
}
.mais-lidas-title {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.35;
}
.mais-lidas-title:hover { color: var(--accent-ink); }
.mais-lidas-meta {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
}

.page-actions-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-left: auto;
}

.link-quiet {
  font-size: 0.8125rem;
  font-family: var(--font-mono);
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.12s ease;
}
.link-quiet:hover { color: var(--accent-ink); }
.link-quiet--danger:hover { color: var(--danger); }

.notice-banner {
  margin-bottom: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  background: var(--amber-soft);
  border: 1px solid rgba(217, 119, 6, 0.2);
  color: #92400E;
}

.post-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
}

.section-block {
  margin-top: 2rem;
}

.section-block-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.section-block-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-faint);
}

/* Auth & formul?rios */
.auth-shell {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: clamp(0.5rem, 2vw, 1.5rem) 0;
}

.auth-page {
  width: 100%;
  max-width: 26rem;
}

.auth-page--signup {
  max-width: 34rem;
}

.page-header--center {
  text-align: center;
}

.page-header--center .page-title {
  max-width: none;
}

.auth-lead {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
  line-height: 1.55;
  max-width: 36ch;
  margin-inline: auto;
}

.auth-oauth {
  margin-bottom: 0.85rem;
}

.auth-oauth-form {
  margin: 0;
}

.auth-oauth-form .btn-google {
  width: 100%;
  justify-content: center;
  gap: 0.55rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid rgba(10, 15, 28, 0.12);
}

.btn-google:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(10, 15, 28, 0.18);
}

.btn-google-icon {
  flex-shrink: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  color: var(--ink-faint);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(10, 15, 28, 0.08);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.field-error {
  font-size: 0.75rem;
  color: var(--danger);
  margin: 0;
}

.form-actions--center {
  justify-content: center;
  padding-top: 0.35rem;
}

.form-footer--center {
  text-align: center;
}

/* Valida??o de senha ao vivo */
.password-criteria {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(10, 15, 28, 0.06);
  border-radius: var(--radius-sm);
}

.password-criterion {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-faint);
  transition: color 0.15s ease;
}

.password-criterion-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  border: 1.5px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.6);
  position: relative;
}

.password-criterion.is-valid {
  color: var(--ok);
}
.password-criterion.is-valid .password-criterion-icon {
  border-color: var(--ok);
  background: var(--ok-soft);
}
.password-criterion.is-valid .password-criterion-icon::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.12rem;
  width: 0.28rem;
  height: 0.48rem;
  border: solid var(--ok);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.password-criterion.is-invalid {
  color: var(--danger);
}
.password-criterion.is-invalid .password-criterion-icon {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.password-criterion.is-invalid .password-criterion-icon::before,
.password-criterion.is-invalid .password-criterion-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55rem;
  height: 2px;
  background: var(--danger);
  transform: translate(-50%, -50%) rotate(45deg);
}
.password-criterion.is-invalid .password-criterion-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.password-match {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
}
.password-match-icon {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.password-match.is-valid { color: var(--ok); }
.password-match.is-valid .password-match-icon { background: var(--ok); }
.password-match.is-invalid { color: var(--danger); }
.password-match.is-invalid .password-match-icon { background: var(--danger); }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.form-page {
  max-width: none;
  width: 100%;
}

.form-card {
  padding: 1.25rem 1.35rem;
}
@media (min-width: 640px) {
  .form-card { padding: 1.5rem 1.65rem; }
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.form-footer {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.form-footer a {
  color: var(--accent-ink);
  text-decoration: none;
}
.form-footer a:hover { text-decoration: underline; }

/* Perfil */
.profile-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(10, 15, 28, 0.06);
}
@media (min-width: 640px) {
  .profile-header {
    flex-direction: row;
    align-items: flex-start;
  }
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  max-width: 100%;
}
.profile-actions .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
}

.profile-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(10, 15, 28, 0.08);
}

.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  align-self: flex-start;
}

/* Input real fica invisível — o global input[type=file] sobrescreve [hidden] */
.profile-avatar-wrap .perfil-foto-input {
  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;
  white-space: nowrap !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none;
  display: none !important;
}

.profile-avatar-media {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(10, 15, 28, 0.08);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar-wrap .profile-avatar-media,
.profile-avatar-wrap .profile-avatar--initial {
  width: 100%;
  height: 100%;
}

.profile-avatar-wrap .profile-avatar-media img.profile-avatar,
.profile-avatar-wrap .profile-avatar-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 0;
  border: none;
  display: block;
}

.profile-avatar-wrap .profile-avatar-media .profile-avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.35rem;
  border-radius: 0;
  border: none;
  flex-shrink: 0;
}

.profile-avatar-edit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: none;
  border-radius: 50%;
  background: rgba(10, 15, 28, 0.48);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s var(--ease), background 0.2s var(--ease);
}

.profile-avatar-wrap--editable:hover .profile-avatar-edit,
.profile-avatar-wrap--editable:focus-within .profile-avatar-edit {
  opacity: 1;
}

.profile-avatar-edit:hover,
.profile-avatar-edit:focus-visible {
  background: rgba(10, 15, 28, 0.62);
  outline: none;
}

.profile-avatar-wrap.is-uploading .profile-avatar-edit {
  opacity: 1;
  cursor: wait;
}

@media (hover: none) {
  .profile-avatar-wrap--editable .profile-avatar-edit {
    opacity: 0;
  }

  .profile-avatar-wrap--editable:active .profile-avatar-edit,
  .profile-avatar-wrap--editable:focus-within .profile-avatar-edit {
    opacity: 1;
  }
}

.profile-avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.perfil-foto-preview-wrap {
  margin-bottom: 0.75rem;
}

.perfil-foto-edit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
}

.profile-avatar-wrap--edit {
  width: 6rem;
  height: 6rem;
}

.profile-avatar-wrap--edit .profile-avatar--initial {
  font-size: 1.5rem;
}

.form-field--foto {
  align-items: center;
}

.form-field--foto > .field-label {
  width: 100%;
  text-align: center;
}

.perfil-foto-edit-hint {
  text-align: center;
  max-width: 28rem;
}

.perfil-foto-edit-controls {
  width: 100%;
  max-width: 22rem;
}

.form-field--foto .current-file {
  display: none;
}

.form-field--foto input[type="file"] {
  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;
  white-space: nowrap !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  display: none !important;
}

.form-field--foto .file-clear {
  justify-content: center;
  margin: 0;
}

.perfil-foto-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
body.perfil-crop-open { overflow: hidden; }
.perfil-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 15, 28, 0.55);
  backdrop-filter: blur(4px);
}
.perfil-crop-modal.is-open { display: flex; }
.perfil-crop-dialog {
  width: min(100%, 32rem);
  max-height: min(92vh, 40rem);
  display: flex;
  flex-direction: column;
  padding: 1.15rem 1.25rem 1.25rem;
  gap: 0.85rem;
}
.perfil-crop-stage {
  position: relative;
  width: 100%;
  height: min(55vh, 22rem);
  background: #111827;
  border-radius: var(--radius);
  overflow: hidden;
}
.perfil-crop-stage img {
  display: block;
  max-width: 100%;
}
.perfil-crop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.profile-stats dd {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.profile-stats dt { margin-top: 0.2rem; }
.profile-stat-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}
.profile-stat-link:hover {
  color: var(--accent-ink);
}
.profile-stat-link:hover dd { color: var(--accent-ink); }

.user-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.35rem;
}
.user-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.65rem;
  border-bottom: 1px solid rgba(10, 15, 28, 0.05);
}
.user-list-row:last-child { border-bottom: none; }
.user-list-row--link {
  text-decoration: none;
  color: inherit;
}
.user-list-row--link:hover {
  background: rgba(14, 165, 160, 0.06);
  border-radius: var(--radius);
}
.user-list-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.user-list-identity-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.user-list-avatar {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.user-list-avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
}
.user-list-name {
  font-weight: 650;
  font-size: 0.95rem;
}
.user-list-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18rem;
}
.user-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex-shrink: 0;
}

.user-list-mod {
  display: flex;
  justify-content: flex-end;
  padding: 0 0.65rem 0.65rem;
  margin-top: -0.35rem;
  border-bottom: 1px solid rgba(10, 15, 28, 0.05);
}
.user-list-mod:last-child { border-bottom: none; }

.user-list-row--membros {
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
.user-list-actions--membros {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.user-list-actions--membros .inline-form {
  display: inline-flex;
  margin: 0;
  flex-shrink: 0;
}
.user-list-actions--membros .btn,
.user-list-actions--membros .chip {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 719px) {
  .user-list-actions--membros {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
}
.encontrar-busca-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.encontrar-busca-input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(10, 15, 28, 0.12);
  background: #fff;
  font-size: 0.9375rem;
}
.encontrar-busca-input:focus {
  outline: 2px solid rgba(14, 165, 160, 0.35);
  outline-offset: 1px;
  border-color: rgba(14, 165, 160, 0.45);
}

/* Comunidades (hub estilo Orkut) */
.js-comunidades-results.is-loading {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.comunidade-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.comunidade-card {
  padding: 1.1rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.comunidade-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}
.comunidade-card-title {
  margin: 0;
  font: inherit;
  font-weight: inherit;
}
.comunidade-card-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.comunidade-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
}
.comunidade-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.comunidade-hub-header {
  padding: 1.25rem 1.35rem 1.4rem;
}
.comunidade-hub-title {
  margin: 0;
  font: inherit;
  font-weight: inherit;
}
.comunidade-hub-stats {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin: 0;
}
.comunidade-stat-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(10, 15, 28, 0.22);
}
.comunidade-stat-link:hover {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
}
.comunidade-hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin-top: 0.85rem;
}

.comunidade-hub-actions form,
.comunidade-hub-actions .form-comunidade-sair {
  display: inline-flex;
  margin: 0;
}

.comunidade-hub-actions .comunidade-pedido-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
}
.comunidade-membros-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.comunidade-membro {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.4rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 550;
}
.comunidade-membro:hover {
  background: rgba(10, 15, 28, 0.04);
}
.comunidade-membro .user-list-avatar {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.7rem;
}
.comunidade-membro-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.comunidade-papel-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.62rem;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
  line-height: 1.3;
  white-space: nowrap;
}
.comunidade-papel-chip--lg {
  font-size: 0.72rem;
  padding: 0.22rem 0.6rem;
}
.comunidade-papel-chip--dono {
  color: #92400e;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.35);
}
.comunidade-papel-chip--moderador {
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: rgba(14, 165, 160, 0.35);
}
.comunidade-papel-chip--membro {
  color: var(--ink-soft);
  background: rgba(10, 15, 28, 0.04);
  border-color: rgba(10, 15, 28, 0.1);
}
.comunidade-meu-papel {
  margin-top: 1rem;
  margin-bottom: 0;
  padding: 0.85rem 1rem;
}
.comunidade-meu-papel-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem 1rem;
}
.comunidade-meu-papel-text {
  flex: 1;
  min-width: 12rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.comunidade-card-papel {
  margin-top: 0.35rem;
}
.user-list-meta--papel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.user-list-meta-bio {
  font-size: inherit;
  color: var(--ink-faint);
}
.comunidade-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.comunidade-home-pill {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1px solid rgba(10, 15, 28, 0.08);
  background: rgba(255, 255, 255, 0.7);
  min-width: 9rem;
  color: inherit;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.comunidade-home-pill.chip-cat {
  border-color: color-mix(in srgb, var(--cat-line, #0EA5A0) 35%, transparent);
  background: var(--cat-bg, rgba(14, 165, 160, 0.1));
  color: var(--cat-ink, #0F766E);
}
.comunidade-home-pill strong {
  font-size: 0.875rem;
}
.comunidade-home-pill span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  opacity: 0.85;
}
.comunidade-home-pill:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cat-line, #0EA5A0) 55%, transparent);
}
.comunidade-home-pill--comum {
  border-color: color-mix(in srgb, var(--accent, #0EA5A0) 45%, transparent);
  background: color-mix(in srgb, var(--accent, #0EA5A0) 8%, #fff);
}
.comunidade-chip-row--compact .comunidade-home-pill {
  min-width: 0;
  padding: 0.4rem 0.65rem;
}
.profile-comunidades-comum-label {
  margin: 0 0 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.profile-comunidades-comum {
  margin-top: 1rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
}
.profile-comunidades-comum--segue {
  border-color: rgba(10, 15, 28, 0.1);
  background: var(--surface-solid);
}
.profile-comunidades-comum__head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}
.profile-comunidades-comum__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  color: var(--accent, #0ea5a0);
  background: color-mix(in srgb, var(--accent, #0ea5a0) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #0ea5a0) 25%, transparent);
}
.profile-comunidades-comum__titles {
  min-width: 0;
}
.profile-comunidades-comum__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.profile-comunidades-comum__sub {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
  line-height: 1.35;
}
.profile-comunidades-comum__sub strong {
  color: var(--ink-soft);
  font-weight: 600;
}
.profile-comunidades-comum__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.profile-comunidades-comum__grid > li {
  flex: 1 1 0;
  min-width: 0;
}
.profile-comunidades-comum__grid--more {
  flex-wrap: wrap;
  overflow-x: visible;
}
.profile-comunidades-comum__grid--more > li {
  flex: 1 1 calc(50% - 0.25rem);
  min-width: 8.5rem;
}
@media (min-width: 640px) {
  .profile-comunidades-comum__grid--more > li {
    flex: 1 1 calc(25% - 0.35rem);
  }
}
.profile-comunidades-comum__grid--page {
  flex-wrap: wrap;
  overflow-x: visible;
  gap: 0.55rem;
}
.profile-comunidades-comum__grid--page > li {
  flex: 1 1 calc(50% - 0.3rem);
  min-width: 9rem;
}
@media (min-width: 640px) {
  .profile-comunidades-comum__grid--page > li {
    flex: 1 1 calc(33.333% - 0.4rem);
  }
}
@media (min-width: 900px) {
  .profile-comunidades-comum__grid--page > li {
    flex: 1 1 calc(25% - 0.45rem);
  }
}
.profile-comunidades-comum-page {
  padding: 1rem 1.1rem 1.15rem;
}
.profile-comunidades-comum__tile {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  min-width: 0;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--cat-line, #0ea5a0) 30%, transparent);
  background: var(--cat-bg, rgba(14, 165, 160, 0.08));
  color: var(--cat-ink, #0f766e);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.profile-comunidades-comum__tile:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--cat-line, #0ea5a0) 50%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--cat-line, #0ea5a0) 12%, transparent);
}
.profile-comunidades-comum__tile-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.45rem;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--cat-line, #0ea5a0) 18%, #fff);
  border: 1px solid color-mix(in srgb, var(--cat-line, #0ea5a0) 28%, transparent);
}
.profile-comunidades-comum__tile-name {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.profile-comunidades-comum__more-link {
  margin: 0.55rem 0 0;
}
.profile-comunidades-comum__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent, #0ea5a0);
  padding: 0.35rem 0.5rem;
  margin: 0 -0.25rem;
  border-radius: var(--radius-sm);
  user-select: none;
  transition: background 0.12s ease;
}
.profile-comunidades-comum__more-btn::after {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 0.1rem;
}
.profile-comunidades-comum__more-btn:hover {
  background: color-mix(in srgb, var(--accent, #0ea5a0) 8%, transparent);
}
.profile-comunidades-comum__more-count {
  opacity: 0.85;
}
.profile-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.profile-email-badge {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(10, 15, 28, 0.1);
  color: var(--ink-faint);
}
.profile-account-dl {
  display: grid;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
}
.profile-account-dl dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.profile-account-dl dd {
  margin: 0.15rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  word-break: break-word;
}
.profile-account-form {
  margin-top: 0.25rem;
}
.form-actions--start {
  justify-content: flex-start;
}
.user-list-meta--comunidades {
  display: block;
  margin-top: 0.15rem;
}

.comunidade-pedido-form {
  display: grid;
  gap: 0.4rem;
  min-width: min(100%, 14rem);
}
.comunidade-pedido-form textarea {
  width: 100%;
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.4rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(10, 15, 28, 0.12);
}

.comunidade-chat-box {
  max-height: 28rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
}
.comunidade-chat-msg {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(10, 15, 28, 0.06);
}
.comunidade-chat-msg:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.whitespace-pre-wrap { white-space: pre-wrap; }

.comunidade-locked-chip {
  margin: 0.15rem 0 0;
}

.comunidade-mural {
  padding: 1.15rem 1.25rem 1.35rem;
}
.comunidade-mural-head { margin-bottom: 0.85rem; }
.comunidade-mural-form {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(10, 15, 28, 0.06);
}
.comunidade-mural-form textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(10, 15, 28, 0.12);
  font: inherit;
  resize: vertical;
}
.comunidade-mural-fixado {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.comunidade-mural-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.comunidade-aviso {
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  background: rgba(16, 24, 38, 0.03);
  border: 1px solid rgba(10, 15, 28, 0.06);
}
.comunidade-aviso.is-fixado {
  border-color: rgba(14, 165, 160, 0.35);
  background: rgba(14, 165, 160, 0.08);
}
.comunidade-aviso-pin {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  margin-bottom: 0.35rem;
}
.comunidade-aviso-texto {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-wrap;
}
.comunidade-aviso-meta {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.comunidade-aviso-meta a {
  color: inherit;
  text-decoration: none;
}
.comunidade-aviso-meta a:hover { color: var(--accent-ink); }

.dm-thread-page { max-width: 40rem; margin-inline: auto; }
.dm-inbox-page {
  max-width: 72rem;
  margin-inline: auto;
  width: 100%;
}
.dm-inbox {
  display: grid;
  grid-template-columns: min(18rem, 32%) 1fr min(14rem, 24%);
  height: min(calc(100vh - var(--nav-h) - 5rem), 720px);
  max-height: min(calc(100vh - var(--nav-h) - 5rem), 720px);
  min-height: 18rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dm-inbox-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  border-right: 1px solid var(--border-soft);
  background: rgba(10, 15, 28, 0.015);
}
.dm-inbox-sidebar-head {
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid var(--border-soft);
}
.dm-inbox-title {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.dm-inbox-list-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.dm-inbox-list-wrap:hover {
  scrollbar-color: rgba(10, 15, 28, 0.28) transparent;
}
.dm-inbox-list-wrap::-webkit-scrollbar {
  width: 7px;
}
.dm-inbox-list-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.dm-inbox-list-wrap::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 999px;
}
.dm-inbox-list-wrap:hover::-webkit-scrollbar-thumb {
  background-color: rgba(10, 15, 28, 0.22);
}
.dm-inbox-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}
.dm-inbox-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
  transition: background 0.15s ease;
}
.dm-inbox-item:hover { background: rgba(10, 15, 28, 0.04); }
.dm-inbox-item.is-active {
  background: rgba(10, 15, 28, 0.06);
  border-left-color: var(--accent);
}
.dm-inbox-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}
.dm-inbox-avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 15, 28, 0.06);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.dm-inbox-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dm-inbox-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}
.dm-inbox-item-name {
  font-size: 0.875rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-inbox-item-preview {
  font-size: 0.78rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-inbox-item-preview--muted { color: var(--ink-faint); font-style: italic; }
.dm-inbox-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
}
.dm-inbox-avatar-wrap .dm-inbox-avatar {
  width: 100%;
  height: 100%;
}
.dm-inbox-online-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--ok);
  border: 2px solid var(--surface-solid);
  flex-shrink: 0;
}
.dm-inbox-online-dot.is-off {
  display: none;
}
.dm-inbox-empty-sidebar { padding: 1rem 0.85rem; margin: 0; }

.dm-inbox-online {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  border-left: 1px solid var(--border-soft);
  background: rgba(10, 15, 28, 0.02);
}
.dm-inbox-online-head {
  padding: 1rem 0.85rem 0.65rem;
  border-bottom: 1px solid var(--border-soft);
}
.dm-inbox-online-title {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.dm-inbox-online-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem 0.35rem;
}
.dm-inbox-online-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dm-inbox-online-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
}
.dm-inbox-online-item:hover {
  background: rgba(10, 15, 28, 0.04);
}
.dm-inbox-online-name {
  font-size: 0.84rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-inbox-online-empty {
  margin: 0;
  padding: 0.75rem 0.65rem;
  line-height: 1.4;
}
.dm-inbox-chat-peer-meta {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.dm-inbox-peer-status {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-faint);
}
.dm-inbox-peer-status.is-online {
  color: var(--ok);
}
.dm-inbox-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--surface-solid);
}
.dm-inbox-chat-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.dm-inbox-back {
  display: none;
  font-size: 1.1rem;
  text-decoration: none;
  padding: 0.15rem 0.35rem;
}
.dm-inbox-chat-peer {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 650;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
  flex: 1;
}
.dm-inbox-chat-peer:hover { color: var(--accent-ink); }
.dm-inbox-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 2rem;
  text-align: center;
  color: var(--ink-soft);
}
.dm-inbox-chat-empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--ink);
}
.dm-inbox-chat-placeholder,
.dm-inbox-chat-footnote {
  margin: 0;
  padding: 1.25rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-faint);
}
.dm-inbox-chat-footnote {
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.dm-thread-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.dm-thread-peer {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 650;
  text-decoration: none;
  color: var(--ink);
}
.dm-thread-peer:hover { color: var(--accent-ink); }
.dm-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  background: rgba(10, 15, 28, 0.02);
}
.dm-thread--inbox {
  max-height: none;
}
.dm-bubble {
  max-width: min(78%, 26rem);
  padding: 0.45rem 0.7rem 0.35rem;
  border-radius: 10px;
  box-shadow: none;
}
.dm-bubble--mine {
  align-self: flex-end;
  background: rgba(10, 15, 28, 0.07);
  border: none;
  border-bottom-right-radius: 4px;
}
.dm-bubble--theirs {
  align-self: flex-start;
  background: var(--surface-solid);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 4px;
}
.dm-bubble-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}
.dm-bubble-text--deleted,
.dm-bubble--deleted .dm-bubble-text {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-faint);
  white-space: normal;
}
.dm-bubble--deleted {
  opacity: 0.92;
}
.dm-bubble-time {
  display: inline;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ink-faint);
  line-height: 1;
}
.dm-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}
.dm-bubble-edited {
  font-size: 0.62rem;
  color: var(--ink-faint);
  font-style: italic;
}
.dm-bubble-actions {
  display: none;
  justify-content: flex-end;
  margin-bottom: 0.15rem;
}
.dm-bubble--mine.is-mine-actions .dm-bubble-actions,
.dm-bubble--mine.is-editable .dm-bubble-actions,
.dm-bubble--mine:hover .dm-bubble-actions,
.dm-bubble--mine:focus-within .dm-bubble-actions,
.dm-bubble--mine.is-editing .dm-bubble-actions {
  display: flex;
}
.dm-bubble-action-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent-ink);
  cursor: pointer;
  opacity: 0.85;
}
.dm-bubble-action-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 6px;
  padding: 0;
  opacity: 0.75;
  transition: background 0.12s, opacity 0.12s;
}
.dm-bubble-action-btn--icon:hover {
  opacity: 1;
  background: rgba(10, 15, 28, 0.08);
  text-decoration: none;
}
.dm-bubble-action-btn--danger {
  color: var(--danger);
}
.dm-bubble-action-icon {
  display: block;
  flex-shrink: 0;
}
.dm-bubble-action-btn:hover { opacity: 1; text-decoration: underline; }
.dm-bubble-action-btn--icon:hover { text-decoration: none; }
.dm-bubble.is-editing { max-width: min(92%, 30rem); }
.dm-bubble-edit-form { width: 100%; }
.dm-bubble-edit-input {
  width: 100%;
  min-height: 2.5rem;
  margin-bottom: 0.35rem;
}
.dm-bubble-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
}
.dm-inbox-delete-chat {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.dm-inbox-delete-chat:hover { color: var(--danger); }
.dm-dock-delete-btn {
  font-size: 0.65rem;
  padding: 0.15rem 0.35rem;
  color: var(--ink-soft);
}
.dm-dock-delete-btn.is-hidden,
.dm-dock-delete-btn[hidden] {
  display: none !important;
}
.dm-dock-delete-btn:hover { color: var(--danger); }

.dm-composer-input {
  width: 100%;
  resize: none;
  min-height: 2.5rem;
  max-height: 6rem;
  field-sizing: content;
}
.dm-composer--inbox {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  margin: 0;
  border: none;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  box-shadow: none;
  background: var(--surface-solid);
  flex-shrink: 0;
}
.dm-composer--inbox .dm-composer-input {
  flex: 1;
  margin: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  background: var(--surface-solid);
}
.dm-composer--inbox .dm-composer-send {
  flex-shrink: 0;
  margin-bottom: 0.1rem;
}

@media (max-width: 960px) {
  .dm-inbox {
    grid-template-columns: min(18rem, 36%) 1fr;
  }
  .dm-inbox-online { display: none; }
}

@media (max-width: 720px) {
  .dm-inbox {
    grid-template-columns: 1fr;
    height: min(calc(100vh - var(--nav-h) - 3rem), 720px);
    max-height: min(calc(100vh - var(--nav-h) - 3rem), 720px);
    min-height: 16rem;
  }
  .dm-inbox--has-chat .dm-inbox-sidebar { display: none; }
  .dm-inbox:not(.dm-inbox--has-chat) .dm-inbox-chat { display: none; }
  .dm-inbox--has-chat .dm-inbox-back { display: inline-flex; }
  .dm-inbox-online { display: none; }
}

/* ---------- Chat lateral (DM dock) ---------- */
.dm-dock {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
  max-width: 100%;
}
.dm-dock > * { pointer-events: auto; }

.dm-dock-tab {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0.75rem 0.75rem 0;
  padding: 0.55rem 0.85rem;
  border-radius: 999px 999px 0 999px;
  border: 1px solid rgba(10, 15, 28, 0.1);
  background: var(--surface-solid);
  box-shadow: var(--shadow-md);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.dm-dock-tab:hover { border-color: rgba(14, 165, 160, 0.35); color: var(--accent-ink); }
.dm-dock-tab-label { display: none; }
.dm-dock.is-open .dm-dock-tab-label { display: inline; }

.dm-dock-panel {
  display: none;
  flex-direction: column;
  width: min(20rem, calc(100vw - 1.5rem));
  max-height: min(28rem, calc(100vh - 6rem));
  margin-bottom: 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(10, 15, 28, 0.1);
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dm-dock.is-open .dm-dock-panel { display: flex; }

.dm-dock-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-solid);
}
.dm-dock-panel-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}
.dm-dock-panel-actions { display: flex; align-items: center; gap: 0.25rem; }
.dm-dock-search-wrap {
  padding: 0.45rem 0.65rem 0;
  flex-shrink: 0;
  background: var(--surface-solid);
}
.dm-dock-search {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  background: #f4f6fb;
  color: inherit;
}
.dm-dock-search:focus {
  outline: none;
  border-color: rgba(14, 165, 160, 0.45);
  box-shadow: 0 0 0 2px rgba(14, 165, 160, 0.12);
}
.dm-dock-panel-body {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0.5rem 0.65rem 0.75rem;
  flex: 1;
  min-height: 0;
  background: var(--surface-solid);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.dm-dock-panel-body:hover {
  scrollbar-color: rgba(10, 15, 28, 0.28) transparent;
}
.dm-dock-panel-body::-webkit-scrollbar {
  width: 7px;
}
.dm-dock-panel-body::-webkit-scrollbar-track {
  background: transparent;
}
.dm-dock-panel-body::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 999px;
}
.dm-dock-panel-body:hover::-webkit-scrollbar-thumb {
  background-color: rgba(10, 15, 28, 0.22);
}
.dm-dock-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0.5rem 0 0.35rem;
}
.dm-dock-list { list-style: none; margin: 0; padding: 0; }
.dm-dock-contact-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.45rem 0.35rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.dm-dock-contact-btn:hover { background: rgba(14, 165, 160, 0.08); }
.dm-dock-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.dm-dock-avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.85rem;
}
.dm-dock-contact-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.dm-dock-contact-name {
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.dm-dock-contact-preview {
  font-size: 0.75rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-dock-online-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
}

.dm-dock-windows {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 0.5rem;
  margin: 0 0.5rem 0.75rem 0;
  max-width: calc(100vw - 1rem);
  overflow-x: auto;
}
.dm-dock-window {
  display: flex;
  flex-direction: column;
  width: min(18rem, calc(100vw - 2rem));
  max-height: min(22rem, calc(100vh - 8rem));
  border-radius: var(--radius-md);
  border: 1px solid rgba(10, 15, 28, 0.12);
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dm-dock-window.is-minimized .dm-dock-window-messages,
.dm-dock-window.is-minimized .dm-dock-window-form { display: none; }
.dm-dock-window-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border-soft);
}
.dm-dock-window-title {
  border: none;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-ink);
  cursor: pointer;
  padding: 0.2rem 0.35rem;
  text-align: left;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-dock-window-actions { display: flex; gap: 0.1rem; }
.dm-dock-window-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 8rem;
  max-height: 14rem;
  background: #f4f6fb;
}
.dm-dock-window-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem 0.55rem;
  border-top: 1px solid rgba(10, 15, 28, 0.06);
  background: var(--surface-solid);
}
.dm-dock-window-form .dm-composer-input { min-height: 2.5rem; font-size: 0.85rem; }

.dm-dock.is-inbox-page .dm-dock-panel,
.dm-dock.is-inbox-page .dm-dock-windows {
  display: none !important;
}
.dm-dock.is-inbox-page .dm-dock-tab {
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 640px) {
  .dm-dock-windows { display: none; }
  .dm-dock-panel { width: calc(100vw - 1rem); }
}


.post-list-plain {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.post-list-item {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(10, 15, 28, 0.06);
  background: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.post-list-item:hover {
  border-color: rgba(14, 165, 160, 0.25);
  background: rgba(255, 255, 255, 0.75);
}
.post-list-title {
  display: block;
  font-weight: 600;
  color: var(--ink);
}
.post-list-item:hover .post-list-title { color: var(--accent-ink); }
.post-list-item time {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--ink-faint);
}

/* Popularidade (lista rank-list) */
.rank-list { padding: 0; overflow: hidden; }
.rank-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(10, 15, 28, 0.05);
}
.rank-row:last-child { border-bottom: none; }
.rank-pos {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--ink-faint);
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}
.rank-stats {
  display: flex;
  gap: 0.85rem;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.rank-stats dd {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}

@media (max-width: 639px) {
  .rank-row {
    display: grid;
    grid-template-columns: 1.5rem 2.25rem minmax(0, 1fr);
    grid-template-areas:
      "pos avatar main"
      "stats stats stats";
    align-items: center;
    gap: 0.5rem 0.75rem;
  }
  .rank-pos { grid-area: pos; }
  .rank-row > .profile-avatar { grid-area: avatar; }
  .rank-row > .flex-1 { grid-area: main; }
  .rank-stats {
    grid-area: stats;
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem 0.5rem;
    padding-top: 0.15rem;
    border-top: 1px solid rgba(10, 15, 28, 0.05);
  }
  .rank-stats > div {
    text-align: center;
  }
}

/* Tabelas de moderação — scroll horizontal no mobile */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.catalog-table {
  min-width: 32rem;
}
.catalog-table th,
.catalog-table td {
  white-space: nowrap;
}
.catalog-table th:first-child,
.catalog-table td:first-child {
  white-space: normal;
  min-width: 8rem;
}


/* ---------- Notifica??es / badges / relacionados ---------- */
.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.notif-bell:hover { background: rgba(10,15,28,0.05); color: var(--ink); }
.notif-bell .nav-badge {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  font-size: 0.6rem;
  line-height: 1rem;
}

.notif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.notif-item-form { margin: 0; }
.notif-item-btn,
.notif-item a {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(10,15,28,0.06);
  background: rgba(255,255,255,0.7);
  text-decoration: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.notif-item-btn:hover { background: rgba(10, 15, 28, 0.03); }
.notif-item.is-unread .notif-item-btn,
.notif-item.is-unread a { border-color: rgba(14,165,160,0.3); background: var(--accent-soft); }
.notif-item.is-read .notif-item-btn,
.notif-item.is-read a { opacity: 0.92; }
.notif-item-btn--static { cursor: default; }
.notif-item span { font-size: 0.85rem; color: var(--ink-soft); }
.notif-item time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); }

.badge-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.badge-row--compact { gap: 0.25rem; }
.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(10,15,28,0.1);
  color: var(--ink-soft);
}
.user-badge--earned {
  border-color: rgba(14, 165, 160, 0.35);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.user-badge--mini {
  padding: 0.15rem 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-color: rgba(14, 165, 160, 0.25);
}
.user-badge-icon {
  font-weight: 700;
  color: var(--accent-ink);
  font-size: 0.65rem;
}

.nivel-pill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  background: rgba(10, 15, 28, 0.04);
  border: 1px solid var(--border-soft);
  font-size: 0.8rem;
}
.nivel-pill-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.nivel-pill strong {
  font-family: var(--font-display);
  color: var(--accent-ink);
}
.nivel-pill-meta,
.nivel-pill-next {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
}

.selo-grupo + .selo-grupo { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(10,15,28,0.06); }
.selo-grupo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.selo-grupo-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.selo-grupo-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
}
.selo-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .selo-grid { grid-template-columns: 1fr 1fr; }
}
.selo-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem;
  border-radius: var(--radius);
  border: 1px solid rgba(10,15,28,0.07);
  background: rgba(255,255,255,0.55);
}
.selo-card.is-earned {
  border-color: rgba(14, 165, 160, 0.3);
  background: rgba(14, 165, 160, 0.08);
}
.selo-card.is-locked { opacity: 0.72; }
.selo-card-icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(10,15,28,0.05);
  color: var(--ink-soft);
}
.selo-card.is-earned .selo-card-icon {
  background: var(--accent);
  color: #fff;
}
.selo-card-body { min-width: 0; flex: 1; }
.selo-card-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: -0.01em;
}
.selo-card-body p {
  margin: 0.2rem 0 0.45rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.selo-card-body small {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-faint);
}
.selo-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(10,15,28,0.08);
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.selo-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.related-list a {
  font-family: var(--font-display);
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
}
.related-list a:visited { color: var(--ink); }
.related-list a:hover { color: var(--accent-ink); }
.related-meta {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
}

.form-field input[type="checkbox"] {
  width: auto;
  margin-right: 0.4rem;
  box-shadow: none;
  accent-color: var(--accent);
}

.react-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.dislike-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(10, 15, 28, 0.1);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.dislike-btn:hover { border-color: rgba(10, 15, 28, 0.25); transform: scale(1.03); }
.dislike-btn.is-active,
.dislike-btn[data-descurtiu="1"] {
  color: var(--ink);
  border-color: rgba(10, 15, 28, 0.28);
  background: rgba(10, 15, 28, 0.06);
}
.dislike-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

.email-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-family: var(--font-mono);
}
.email-hint[hidden],
.password-match[hidden] {
  display: none !important;
}
.email-hint.is-valid { color: var(--ok); }
.email-hint.is-invalid { color: var(--danger); }
.email-hint-icon::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.contrib-excerpt {
  margin: 0.35rem 0 0;
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: pre-wrap;
  background: rgba(10, 15, 28, 0.04);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(10, 15, 28, 0.06);
}

/* ?? Banco de quest?es / flashcards ?? */
.banco-filtros-grid {
  display: grid;
  gap: 0.85rem 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .banco-filtros-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .banco-filtros-grid { grid-template-columns: repeat(3, 1fr); }
}
.quiz-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.15rem;
  padding: 0.5rem 1rem 0;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--ink-faint);
}
.quiz-meta > * + *::before {
  content: "·";
  margin-right: 0.55rem;
  margin-left: 0.2rem;
  opacity: 0.45;
  pointer-events: none;
}
.quiz-meta-filtro,
.dnd-meta-filtro {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.quiz-meta-filtro:hover,
.dnd-meta-filtro:hover {
  color: var(--accent-ink);
  border-bottom-color: var(--accent);
}
.chip-filtro {
  text-decoration: none;
  cursor: pointer;
}
.chip-filtro:hover {
  border-color: var(--accent-soft-border, var(--accent));
  color: var(--accent-ink);
}
.flash-banco-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .flash-banco-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .flash-banco-grid { grid-template-columns: repeat(3, 1fr); }
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Livreto / leitura paginada */
.booklet {
  position: relative;
  margin: 1.25rem 0 0.5rem;
  outline: none;
}
.booklet:focus,
.booklet:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Barra de gerenciamento do autor ? acima da pagina??o */
.post-author-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
  margin-bottom: 0.65rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
}
.post-author-bar__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.post-author-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.post-author-bar__actions .btn {
  font-weight: 650;
}

.booklet-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0.85rem;
  padding: 0.55rem 0.75rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(10, 15, 28, 0.08);
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
}
.booklet-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.booklet-page-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.booklet-page-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.booklet-page-jump-label {
  font-family: var(--font-mono);
  white-space: nowrap;
}
.booklet-page-jump input {
  width: 3.6rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid rgba(10, 15, 28, 0.12);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: center;
  background: #fff;
  color: var(--ink);
}
.booklet-page-jump input:disabled {
  opacity: 0.45;
}
.booklet-stage {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.booklet-page {
  padding: 1.5rem 1.75rem 1.75rem;
  min-height: 0;
  max-height: 560px;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  transform: none;
  transition: opacity 0.22s ease;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.booklet-page--grow {
  overflow-y: auto;
}
.booklet-page.is-visible {
  opacity: 1;
}
.booklet-page.is-exit-next,
.booklet-page.is-exit-prev {
  opacity: 0;
}
.booklet-page-inner,
.booklet-scroll-view,
.booklet-measure {
  max-width: none !important;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.booklet-page-inner > :first-child,
.booklet-scroll-view > :first-child {
  margin-top: 0;
}
.booklet-page-inner > :last-child,
.booklet-scroll-view > :last-child {
  margin-bottom: 0;
}
/* Listas/cita??es n?o devem colar na borda (marcadores cortados pelo overflow) */
.booklet-page-inner ul,
.booklet-page-inner ol,
.booklet-scroll-view ul,
.booklet-scroll-view ol {
  padding-left: 1.5rem;
  margin-left: 0;
}
.booklet-page-inner blockquote,
.booklet-scroll-view blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 1rem;
}
.booklet-page-inner pre,
.booklet-scroll-view pre {
  max-width: 100%;
  overflow-x: auto;
}
.booklet-page-inner img,
.booklet-scroll-view img {
  max-width: 100%;
  height: auto;
}
.booklet-page-inner p:empty,
.booklet-scroll-view p:empty,
.booklet-page-inner p:has(> br:only-child),
.booklet-scroll-view p:has(> br:only-child) {
  display: none;
}
.booklet-page-inner--tall {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.35rem;
}
.booklet-source {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.booklet.is-scroll-mode .booklet-stage {
  overflow: auto;
  max-height: min(70vh, 720px);
}
.booklet-scroll-view {
  padding: 1.5rem 1.75rem 1.75rem;
  width: 100%;
  box-sizing: border-box;
}
.booklet.is-fullscreen {
  background: var(--bg, #F4F6FB);
  padding: 1rem 1.25rem 1.5rem;
  box-sizing: border-box;
}
.booklet.is-fullscreen .booklet-stage {
  min-height: calc(100vh - 110px);
  max-height: calc(100vh - 110px);
}
.booklet.is-fullscreen .booklet-page,
.booklet.is-fullscreen .booklet-page-inner--tall {
  min-height: 0;
  max-height: calc(100vh - 140px);
}

/* T?tulo duplicado s? para o PDF (header da tela fica oculto na impress?o) */
.article-print-title {
  display: none;
}

/* Folha montada no botão PDF ? fora do fluxo da tela */
.booklet-print-sheet {
  display: none;
}

@media print {
  @page {
    size: A4;
    margin: 18mm 16mm 22mm 16mm;
  }

  .site-header,
  .site-footer,
  .cookie-banner,
  .page-rail,
  .mobile-drawer,
  .booklet-toolbar,
  .booklet-stage,
  .page-actions,
  .share-bar,
  .section-block,
  .flash-message,
  .notice-banner,
  .page-meta,
  .no-print {
    display: none !important;
  }

  /* Capa: oculta na tela de impressão genérica, mas entra na folha do botão PDF */
  body:not(.booklet-print) .post-cover {
    display: none !important;
  }

  .page-layout,
  .page-main,
  .page-article,
  .article-print-root,
  .booklet {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  .article-print-title {
    display: block !important;
    margin: 0 0 1rem !important;
    font-size: 18pt !important;
    line-height: 1.3 !important;
    color: #000 !important;
  }

  .booklet-source {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    white-space: normal !important;
    color: #000 !important;
  }

  /* PDF via botão: folha completa (todas as páginas do artigo) */
  body.booklet-print * {
    visibility: hidden !important;
  }
  body.booklet-print .booklet-print-sheet,
  body.booklet-print .booklet-print-sheet * {
    visibility: visible !important;
  }
  body.booklet-print .article-print-root,
  body.booklet-print .article-print-root * {
    display: none !important;
    visibility: hidden !important;
  }
  body.booklet-print .booklet-print-sheet {
    display: block !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    color: #111 !important;
    overflow: visible !important;
    font-family: "Georgia", "Times New Roman", serif !important;
  }
  body.booklet-print .booklet-print-sheet-title {
    display: block !important;
    margin: 0 0 12pt !important;
    padding: 0 !important;
    font-family: var(--font-display), "Segoe UI", sans-serif !important;
    font-size: 20pt !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #000 !important;
    break-after: avoid;
    page-break-after: avoid;
  }
  body.booklet-print .booklet-print-cover {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 70mm !important;
    object-fit: cover !important;
    margin: 0 0 14pt !important;
    border-radius: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  body.booklet-print .booklet-print-sheet-body {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111 !important;
    overflow: visible !important;
    max-width: none !important;
    max-height: none !important;
    font-size: 11.5pt !important;
    line-height: 1.55 !important;
  }
  body.booklet-print .booklet-print-sheet-body > :first-child {
    margin-top: 0 !important;
  }
  body.booklet-print .booklet-print-sheet-body > :last-child {
    margin-bottom: 0 !important;
  }
  body.booklet-print .booklet-print-sheet-body p,
  body.booklet-print .booklet-print-sheet-body li {
    orphans: 4;
    widows: 4;
    break-inside: auto;
    page-break-inside: auto;
  }
  body.booklet-print .booklet-print-sheet-body p {
    margin: 0 0 0.7em !important;
  }
  body.booklet-print .booklet-print-sheet-body h2,
  body.booklet-print .booklet-print-sheet-body h3,
  body.booklet-print .booklet-print-sheet-body h4 {
    font-family: var(--font-display), "Segoe UI", sans-serif !important;
    color: #000 !important;
    line-height: 1.3 !important;
    margin: 1.1em 0 0.45em !important;
    break-after: avoid;
    page-break-after: avoid;
  }
  body.booklet-print .booklet-print-sheet-body h2 { font-size: 15pt !important; }
  body.booklet-print .booklet-print-sheet-body h3 { font-size: 13pt !important; }
  body.booklet-print .booklet-print-sheet-body h4 { font-size: 12pt !important; }

  /* Blocos altos podem quebrar entre páginas — evita corte no meio da folha */
  body.booklet-print .booklet-print-sheet-body img,
  body.booklet-print .booklet-print-sheet-body figure,
  body.booklet-print .booklet-print-embed,
  body.booklet-print .booklet-print-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  body.booklet-print .booklet-print-sheet-body pre,
  body.booklet-print .booklet-print-sheet-body blockquote,
  body.booklet-print .booklet-print-sheet-body table,
  body.booklet-print .booklet-print-quiz {
    break-inside: auto;
    page-break-inside: auto;
  }
  body.booklet-print .booklet-print-sheet-body ul,
  body.booklet-print .booklet-print-sheet-body ol {
    padding-left: 1.35rem !important;
    margin: 0.4em 0 0.85em !important;
  }
  body.booklet-print .booklet-print-sheet-body img {
    max-width: 100% !important;
    max-height: 90mm !important;
    height: auto !important;
    display: block !important;
    margin: 0.6em 0 !important;
  }
  body.booklet-print .booklet-print-sheet-body .media,
  body.booklet-print .booklet-print-sheet-body figure.media {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    margin: 1rem 0 !important;
  }
  body.booklet-print .booklet-print-sheet-body iframe {
    display: none !important;
  }
  body.booklet-print .booklet-print-embed {
    display: block !important;
    margin: 12pt 0 !important;
    padding: 8pt !important;
    border: 1px solid #ccc !important;
    border-radius: 0 !important;
  }
  body.booklet-print .booklet-print-embed-thumb {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 55mm !important;
    height: auto !important;
    margin: 0 0 6pt !important;
  }
  body.booklet-print .booklet-print-embed a {
    color: #000 !important;
    text-decoration: underline !important;
    font-size: 10pt !important;
  }

  body.booklet-print .booklet-print-card {
    display: block !important;
    margin: 14pt 0 !important;
    padding: 10pt 12pt !important;
    border: 1px solid #bbb !important;
    background: #fafafa !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    position: static !important;
    transform: none !important;
  }
  body.booklet-print .booklet-print-card-label {
    margin: 0 0 6pt !important;
    font-family: var(--font-mono), monospace !important;
    font-size: 8.5pt !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #333 !important;
  }
  body.booklet-print .booklet-print-quiz-enunciado {
    margin: 0 0 8pt !important;
    font-weight: 650 !important;
  }
  body.booklet-print .booklet-print-quiz-alts {
    margin: 0 0 8pt !important;
    padding-left: 1.2rem !important;
  }
  body.booklet-print .booklet-print-quiz-alts li {
    margin: 0 0 4pt !important;
  }
  body.booklet-print .booklet-print-quiz-alts li.is-correta {
    font-weight: 700 !important;
  }
  body.booklet-print .booklet-print-quiz-gabarito {
    margin: 6pt 0 !important;
    font-weight: 700 !important;
  }
  body.booklet-print .booklet-print-quiz-expl {
    margin-top: 8pt !important;
    padding-top: 6pt !important;
    border-top: 1px solid #ddd !important;
  }

  /* Nada de altura fixa / overflow nos restos de widgets */
  body.booklet-print .flashcard-inline,
  body.booklet-print .flashcard-inline-inner,
  body.booklet-print .flashcard-face,
  body.booklet-print .quiz-block,
  body.booklet-print .dnd-block {
    position: static !important;
    transform: none !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body.booklet-print .booklet-print-sheet-body .no-print,
  body.booklet-print .booklet-print-sheet-body .no-print * {
    display: none !important;
    visibility: hidden !important;
  }

  a[href]::after { content: ""; }
}

/* Filtros combin?veis (chips) */
.filtro-combo { display: flex; flex-direction: column; gap: 0.85rem; }
.filtro-chips-ativos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-height: 0.5rem;
}
.filtro-chips-ativos:empty { display: none; }
.filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(14, 165, 160, 0.35);
  background: rgba(14, 165, 160, 0.1);
  color: var(--accentink);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.filtro-chip:hover {
  background: rgba(14, 165, 160, 0.18);
  border-color: rgba(14, 165, 160, 0.55);
}
.filtro-chip-x {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
  font-weight: 500;
}
.filtro-chip:hover .filtro-chip-x { opacity: 1; }
.filtro-adds .field-label { margin-bottom: 0.35rem; }

/* ---------- Painel do autor (quest?es / flashcards / dnd) ---------- */

.author-tools-panel {
  margin: 0 0 1.25rem;
  padding: 1.1rem 1.2rem 1.25rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
}
.author-tools-panel--compact {
  margin-bottom: 1.5rem;
}
.author-tools-panel__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: var(--ink);
}
.author-tools-panel__lead {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  color: var(--inksoft);
  line-height: 1.45;
}
.author-tools-panel__lead code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-ink);
}
.author-tools-panel__grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .author-tools-panel__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .author-tools-panel__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .author-tools-panel--compact .author-tools-panel__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.author-tool-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.author-tool-card:hover {
  border-color: rgba(14, 124, 134, 0.55);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  text-decoration: none;
}
.author-tool-card__label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent-ink);
}
.author-tool-card__meta {
  font-size: 0.78rem;
  color: var(--inkfaint);
}
.author-tools-hint {
  margin: 0 0 1.15rem;
  padding: 0.9rem 1.05rem;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-soft);
  background: rgba(10, 15, 28, 0.02);
  font-size: 0.9rem;
  color: var(--inksoft);
  line-height: 1.45;
}
.author-tools-hint p { margin: 0; }

/* ---------- Barra interativa no editor do artigo ---------- */

.form-field--conteudo {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.editor-sticky-stack {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: var(--bg);
  padding: 0.4rem 0 0.55rem;
  margin: 0 -0.2rem;
  box-shadow: 0 12px 20px -16px rgba(10, 15, 28, 0.28);
}
.editor-sticky-stack .editor-ck-toolbar-dock {
  margin-top: 0.45rem;
  background: var(--surface-solid, #fff);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: visible;
}
/* Desliga o sticky interno do CKEditor (ele esconde botões e solta a barra) */
.post-form .ck.ck-sticky-panel__placeholder {
  display: none !important;
  height: 0 !important;
}
.post-form .ck.ck-sticky-panel__content,
.post-form .ck.ck-sticky-panel__content_sticky {
  position: static !important;
  width: auto !important;
  max-width: none !important;
  top: auto !important;
  left: auto !important;
  box-shadow: none !important;
  border: none !important;
}
.post-form .ck.ck-toolbar {
  flex-wrap: wrap !important;
  height: auto !important;
}
.post-form .ck.ck-toolbar__items {
  flex-wrap: wrap !important;
}
.editor-interactive-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: var(--surface-solid);
}
.editor-interactive-bar__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 700;
}
.editor-interactive-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.editor-interactive-btn {
  white-space: nowrap;
}
.editor-interactive-bar__manage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-left: auto;
  font-size: 0.8rem;
}
.editor-interactive-bar__hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--inkfaint);
  line-height: 1.4;
}
.editor-interactive-bar__hint--secondary {
  margin-top: -0.15rem;
}
.editor-interactive-count {
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--accent-ink);
  font-weight: 600;
}
.js-editor-biblioteca.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}
.editor-inserir-banner {
  border-color: rgba(14, 165, 160, 0.25);
  background: rgba(14, 165, 160, 0.06);
}

.post-editor-status {
  margin: 0.45rem 0 0;
}
.post-editor-status__chip--rascunho {
  color: var(--ink-soft);
  border-color: var(--border);
  background: var(--surface-elevated, #f8fafc);
}
.post-editor-status__chip--em_revisao {
  color: var(--accent-ink, #0f766e);
  border-color: color-mix(in srgb, var(--accent, #0ea5a0) 35%, transparent);
  background: color-mix(in srgb, var(--accent, #0ea5a0) 10%, #fff);
}
.post-editor-status__chip--publicado {
  color: #166534;
  border-color: color-mix(in srgb, #22c55e 35%, transparent);
  background: color-mix(in srgb, #22c55e 12%, #fff);
}
.form-actions--editor {
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- Atividades arrastar e soltar ---------- */

.dnd-block {
  margin: 2rem 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.dnd-block-header {
  padding: 1rem 1.35rem;
  background: rgba(10, 15, 28, 0.03);
  border-bottom: 1px solid var(--border-soft);
}
.dnd-block-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.35rem;
}
.dnd-block-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}
.dnd-block-hint {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  color: var(--inksoft);
}
.dnd-block-body { padding: 1.15rem 1.35rem 1.4rem; }

.dnd-associar {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 720px) {
  .dnd-associar {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1.5rem;
    align-items: start;
  }
}
.dnd-pool-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inkfaint);
  margin: 0 0 0.55rem;
}
.dnd-pool-chips {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.65rem;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border);
  background: rgba(16, 24, 38, 0.03);
}
.dnd-pool-chips .dnd-chip {
  width: 100%;
  justify-content: flex-start;
}

.dnd-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(14, 124, 134, 0.35);
  background: #fff;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: grab;
  user-select: none;
  touch-action: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.dnd-chip:active { cursor: grabbing; }
.dnd-chip.is-dragging,
.dnd-chip.is-dnd-source {
  opacity: 0.35;
  pointer-events: none;
}
.dnd-chip.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(14, 124, 134, 0.2);
  transform: translateY(-1px);
}
.dnd-chip.is-correct {
  border-color: var(--ok);
  background: rgba(27, 138, 90, 0.08);
}
.dnd-chip.is-wrong {
  border-color: var(--danger);
  background: rgba(192, 57, 43, 0.06);
}
.dnd-chip.is-dnd-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10050;
  margin: 0;
  pointer-events: none;
  cursor: grabbing;
  opacity: 0.96;
  transform: scale(1.03) rotate(1deg);
  box-shadow:
    0 12px 28px rgba(10, 15, 28, 0.22),
    0 0 0 3px rgba(14, 124, 134, 0.25);
  border-color: var(--accent);
  will-change: transform;
}

.dnd-slots { display: flex; flex-direction: column; gap: 0.65rem; }
.dnd-slot {
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.55);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dnd-slot.is-over,
.dnd-slot.is-filled {
  border-color: rgba(14, 124, 134, 0.45);
}
.dnd-slot.is-correct {
  border-color: var(--ok);
  background: rgba(27, 138, 90, 0.08);
}
.dnd-slot.is-wrong {
  border-color: var(--danger);
  background: rgba(192, 57, 43, 0.06);
}
.dnd-slot-label {
  font-size: 0.88rem;
  color: var(--inksoft);
  line-height: 1.35;
}
.dnd-slot-drop {
  min-height: 2.6rem;
  padding: 0.35rem;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(14, 124, 134, 0.35);
  background: rgba(14, 124, 134, 0.04);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.dnd-order-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dnd-chip--order {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  box-sizing: border-box;
  cursor: grab;
}
.dnd-order-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 0.3rem;
  border-radius: 0.4rem;
  background: rgba(14, 124, 134, 0.12);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dnd-chip--order:active,
body.is-dnd-ordering .dnd-chip--order {
  cursor: grabbing;
}
.dnd-chip--order.is-over {
  border-color: var(--accent);
}
.dnd-chip-handle {
  width: 0.55rem;
  height: 1.1rem;
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--inkfaint) 0 2px,
      transparent 2px 4px
    );
  opacity: 0.55;
  flex-shrink: 0;
}
.dnd-chip--order.is-order-source {
  opacity: 0;
  pointer-events: none;
}
.dnd-order-placeholder {
  list-style: none;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  border: 2px dashed rgba(14, 124, 134, 0.55);
  background: rgba(14, 124, 134, 0.1);
  margin: 0;
}
body.is-dnd-ordering,
body.is-dnd-associating {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
body.is-dnd-ordering .dnd-block,
body.is-dnd-associating .dnd-block {
  touch-action: none;
}

.dnd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.15rem;
}
.dnd-resultado {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  font-weight: 600;
}
.dnd-resultado.is-ok { color: var(--ok); }
.dnd-resultado.is-fail { color: var(--danger); }
.dnd-explicacao {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  background: rgba(14, 124, 134, 0.08);
  border: 1px solid rgba(14, 124, 134, 0.2);
  font-size: 0.9rem;
  color: var(--inksoft);
}
.dnd-explicacao-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 0.35rem;
}

/* ---------- Guia / O que posso fazer ---------- */

.guia-page {
  padding-bottom: 2rem;
}
.guia-toc {
  padding: 1rem 1.1rem 1.15rem;
  margin-bottom: 1rem;
}
.guia-toc--mobile {
  display: block;
  margin-top: 1.25rem;
}
@media (min-width: 960px) {
  .guia-toc--mobile {
    display: none;
  }
}
.guia-toc-list {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.guia-toc-list a {
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.guia-toc-list a:hover {
  color: var(--accent-ink);
}
.guia-section {
  margin-top: 2.25rem;
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.guia-heading {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.5vw + 0.9rem, 1.55rem);
  font-weight: 700;
  color: var(--ink);
}
.guia-lead {
  margin: 0.55rem 0 1rem;
  max-width: 40rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.guia-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.guia-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem 1rem;
  padding: 1rem 1.1rem;
  align-items: start;
}
.guia-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
}
.guia-step-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.guia-step-text {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.guia-step-done {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  font-family: var(--font-mono);
  color: var(--ok);
}
.guia-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.guia-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .guia-grid {
    grid-template-columns: 1fr 1fr;
  }
  .guia-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.guia-card {
  padding: 1rem 1.1rem;
}
.guia-card-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.guia-card p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.guia-card .link-quiet {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: 0.8125rem;
}
.guia-need-login {
  margin-top: 0.65rem !important;
  font-size: 0.75rem !important;
  font-family: var(--font-mono);
  color: var(--ink-faint) !important;
}
.guia-tip {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--accent);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.guia-tip strong {
  color: var(--ink);
}
.guia-tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.guia-tips-list li {
  padding: 0.85rem 1.05rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.guia-tips-list strong {
  color: var(--ink);
}
.guia-footer {
  margin-top: 2.5rem;
  padding: 1.25rem 1.35rem;
}
.guia-footer-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}
.guia-footer-text {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- Histórico de revisões ---------- */

.historico-lista {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.historico-item {
  padding: 1rem 1.15rem;
}
.historico-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  justify-content: space-between;
}
.historico-item__ver {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.historico-item__ver:hover .historico-item__titulo {
  color: var(--accent-ink);
}
.historico-item__verao {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-ink);
}
.historico-item__titulo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}
.historico-item__meta {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--ink-faint);
}
.historico-item__nota {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.historico-item__mudancas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.65rem 0 0;
}
.historico-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.historico-snap,
.historico-diff,
.historico-preview {
  padding: 1.1rem 1.2rem;
}
.historico-snap__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.historico-snap__meta {
  display: grid;
  gap: 0.65rem 1.25rem;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}
.historico-snap__meta dt {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.historico-snap__meta dd {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.diff-block {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.diff-block--conteudo {
  max-height: 28rem;
  overflow: auto;
}
.diff-line {
  padding: 0.25rem 0.65rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.diff-line--equal {
  color: var(--ink-soft);
  background: transparent;
}
.diff-line--insert {
  color: #065f46;
  background: rgba(5, 150, 105, 0.12);
}
.diff-line--delete {
  color: #991b1b;
  background: rgba(220, 38, 38, 0.1);
  text-decoration: line-through;
}
.diff-block--inline {
  padding: 0.65rem 0.75rem;
  line-height: 1.65;
  font-size: 0.9rem;
}
.diff-chunk--equal { color: var(--ink-soft); }
.diff-chunk--insert {
  color: #065f46;
  background: rgba(5, 150, 105, 0.15);
  border-radius: 0.2rem;
  padding: 0.05rem 0.15rem;
  font-weight: 600;
}
.diff-chunk--delete {
  color: #991b1b;
  background: rgba(220, 38, 38, 0.1);
  border-radius: 0.2rem;
  padding: 0.05rem 0.15rem;
  text-decoration: line-through;
}
.historico-preview__body {
  margin-top: 0.5rem;
  font-size: 0.95rem;
}

.encontrar-busca-row--stack {
  flex-direction: column;
  align-items: stretch;
}
.encontrar-busca-row--stack .combo-wrap,
.encontrar-busca-row--stack .encontrar-busca-input {
  width: 100%;
}

/* ---------- Fórum encadeado ---------- */

.forum-thread {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.forum-post {
  position: relative;
}
.forum-post__body {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(14, 165, 160, 0.35);
}
.forum-post--depth-0 .forum-post__body {
  border-left-color: var(--accent);
}
.forum-post__children {
  margin: 0.55rem 0 0.15rem;
  padding-left: clamp(0.75rem, 2vw, 1.35rem);
  border-left: 2px solid rgba(14, 165, 160, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.forum-post__reply-to {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--ink-faint);
}
.forum-post__texto {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}
.forum-post__meta {
  margin: 0.55rem 0 0;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--ink-faint);
}
.forum-form-resposta textarea {
  width: 100%;
  font-size: 0.875rem;
}

/* ---------- Convidados picker ---------- */

.convidados-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  min-height: 1.5rem;
}

.convidados-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-bg, rgba(14, 165, 160, 0.12));
  color: var(--ink);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  line-height: 1.4;
}

.convidados-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-faint);
  padding: 0 0.1rem;
  margin-left: 0.15rem;
}
.convidados-chip-remove:hover {
  color: var(--danger, #dc2626);
}

.convidados-search-wrap {
  position: relative;
}

.convidados-search-input {
  width: 100%;
}

.convidados-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  max-height: 14rem;
  overflow-y: auto;
  margin-top: 0.25rem;
  list-style: none;
  padding: 0.25rem 0;
}
.convidados-dropdown.is-open {
  display: block;
}

.convidados-dropdown-item {
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.1s;
}
.convidados-dropdown-item:hover {
  background: var(--accent-bg, rgba(14, 165, 160, 0.08));
}
.convidados-dropdown-item.is-selected {
  background: var(--accent-bg, rgba(14, 165, 160, 0.15));
  font-weight: 600;
}

.convidados-dropdown-user {
  font-family: var(--font-mono);
  color: var(--accent, #0ea5a0);
}
.convidados-dropdown-nome {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.convidados-dropdown-empty {
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
  text-align: center;
}

/* —— Sala: estudo fixado + desafio —— */
.sala-desafio-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(13, 148, 136, 0.1);
  border: 1px solid rgba(13, 148, 136, 0.28);
  color: #0f766e;
}
.sala-desafio-banner strong {
  display: block;
  font-size: 0.95rem;
}
.sala-estudo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.sala-estudo-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.sala-estudo-title {
  flex: 1;
  min-width: 10rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.sala-estudo-title:hover {
  text-decoration: underline;
}
.sala-estudo-fixar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
.sala-estudo-fixar-row .form-select {
  max-width: 9rem;
}
.sala-estudo-fixar-row input[type="search"] {
  flex: 1;
  min-width: 12rem;
}
.sala-estudo-sugestoes {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  border: 1px solid rgba(10, 15, 28, 0.1);
  border-radius: var(--radius-sm);
  background: var(--surface-solid, #fff);
  max-height: 14rem;
  overflow: auto;
}
.sala-estudo-sugestao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink);
}
.sala-estudo-sugestao:hover {
  background: rgba(14, 165, 160, 0.08);
}
.sala-desafio-participantes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.sala-desafio-participantes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.sala-desafio-ranking {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.sala-desafio-ranking li {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto auto;
  gap: 0.5rem 0.75rem;
  align-items: center;
  font-size: 0.9rem;
}
.sala-desafio-rank {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink-faint);
}
.sala-desafio-rank-user {
  font-weight: 600;
}
.sala-desafio-rank-score,
.sala-desafio-rank-time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-faint);
}
@media (max-width: 560px) {
  .sala-desafio-ranking li {
    grid-template-columns: 2rem 1fr;
  }
  .sala-desafio-rank-score,
  .sala-desafio-rank-time {
    grid-column: 2;
  }
}