/* =========================================================================
   Freekeek — app.css
   Brand foundation. One stylesheet, no framework, deliberately un-generic.
   Palette and type are tokenised so the mobile app can mirror them.
   ========================================================================= */

:root {
  /* Core palette — clean, Google-style */
  --ink:        #202124;   /* Google near-black text */
  --ink-soft:   #3c4043;
  --paper:      #f8f9fa;   /* neutral app background */
  --surface:    #ffffff;
  --keek:       #1a73e8;   /* primary — clean blue */
  --keek-deep:  #1765cc;
  --keek-tint:  #e8f0fe;   /* light blue tint */
  --coral:      #ea4335;   /* destructive / accent (Google red) */
  --green:      #1e8e3e;   /* place green (Google green) */
  --green-tint: #e6f4ea;
  --hair:       #dadce0;   /* hairline borders (Google grey) */
  --muted:      #5f6368;   /* secondary text */
  --muted-soft: #80868b;
  --rail-active: #e8eaed;  /* soft neutral for nav hover */
  --nav-active-bg: #3c4043; /* soft black for the selected nav item */

  /* Type — Roboto, like Google's UI */
  --display: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wordmark: "Poppins", "Roboto", system-ui, sans-serif;

  /* Geometry — subtler corners, Google-like */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(60, 64, 67, .10);
  --shadow-md: 0 1px 3px rgba(60, 64, 67, .16), 0 4px 8px rgba(60, 64, 67, .08);
  --shadow-lg: 0 2px 6px rgba(60, 64, 67, .18), 0 8px 24px rgba(60, 64, 67, .12);

  --rail: 264px;
  --feed: 620px;
  --aside: 320px;
}

/* ===================================================================== */
/* Dark theme — same variable names, Google Material Dark tones (this app
   already follows Google's visual language, so its dark-mode conventions are
   a natural, well-tested fit). Applied two ways:
   - `[data-theme="dark"]` — explicit choice, wins regardless of OS setting.
   - `prefers-color-scheme: dark` — only when the person hasn't set an explicit
     preference (`auto`, the default, and always the case when logged out) —
     pure CSS, resolved before first paint, so there's never a flash of the
     wrong theme.
   Known limitation: a handful of newer components use hardcoded hex colors
   in inline `style=` attributes here and there, rather than these variables —
   those won't re-tint automatically. Flagged for incremental cleanup. */
/* ===================================================================== */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --ink:        #e8eaed;
    --ink-soft:   #c4c7c5;
    --paper:      #202124;
    --surface:    #2d2e30;
    --keek:       #8ab4f8;
    --keek-deep:  #aecbfa;
    --keek-tint:  #1a2733;
    --coral:      #f28b82;
    --green:      #81c995;
    --green-tint: #1e3a24;
    --hair:       #4a4d51;
    --muted:      #9aa0a6;
    --muted-soft: #80868b;
    --rail-active: #35363a;
    --nav-active-bg: #52565b;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 8px rgba(0, 0, 0, .3);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
  html:not([data-theme]) body { background: var(--paper); }
}
html[data-theme="dark"] {
  --ink:        #e8eaed;
  --ink-soft:   #c4c7c5;
  --paper:      #202124;
  --surface:    #2d2e30;
  --keek:       #8ab4f8;
  --keek-deep:  #aecbfa;
  --keek-tint:  #1a2733;
  --coral:      #f28b82;
  --green:      #81c995;
  --green-tint: #1e3a24;
  --hair:       #4a4d51;
  --muted:      #9aa0a6;
  --muted-soft: #80868b;
  --rail-active: #35363a;
  --nav-active-bg: #52565b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 8px rgba(0, 0, 0, .3);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] body, html[data-theme="dark"] { background: var(--paper); color-scheme: dark; }

/* Component-level dark-mode fixes — these use hardcoded light hex colors instead
   of the palette variables above, so they don't adapt on their own. Fixed here for
   the specific components reported as hard to read (account-type badges, profile
   stat chips); the landing page's own tinted tiles/icons have the same underlying
   issue and are flagged for the same treatment in a later full pass. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .acct-business { background: #1a2733; color: #8ab4f8; border-color: #2a3b4d; }
  html:not([data-theme]) .acct-gov { background: #1f2340; color: #aec1f5; border-color: #303760; }
  html:not([data-theme]) .acct-press { background: #3a1f1f; color: #f28b82; border-color: #4d2c2c; }
  html:not([data-theme]) .acct-social { background: #1e3a24; color: #81c995; border-color: #2c4a33; }
  html:not([data-theme]) .pe-chip-green { background: #1e3a24; }
  html:not([data-theme]) .pe-chip-amber { background: #3a2e0f; }
  html:not([data-theme]) .pe-chip-amber b { color: #f2b94b; }
}
html[data-theme="dark"] .acct-business { background: #1a2733; color: #8ab4f8; border-color: #2a3b4d; }
html[data-theme="dark"] .acct-gov { background: #1f2340; color: #aec1f5; border-color: #303760; }
html[data-theme="dark"] .acct-press { background: #3a1f1f; color: #f28b82; border-color: #4d2c2c; }
html[data-theme="dark"] .acct-social { background: #1e3a24; color: #81c995; border-color: #2c4a33; }
html[data-theme="dark"] .pe-chip-green { background: #1e3a24; }
html[data-theme="dark"] .pe-chip-amber { background: #3a2e0f; }
html[data-theme="dark"] .pe-chip-amber b { color: #f2b94b; }

/* Landing page — value-prop icons (Negócios/Eventos/Instituições/Imprensa/
   Classificados/Empregos) and the featured "Places" card also used hardcoded
   light hex colors; same fix, same two selectors (forced dark + auto/OS dark). */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .lp-ic-blue   { background: #1a2733; color: #8ab4f8; }
  html:not([data-theme]) .lp-ic-green  { background: #1e3a24; color: #81c995; }
  html:not([data-theme]) .lp-ic-coral  { background: #3a1f1f; color: #f28b82; }
  html:not([data-theme]) .lp-ic-amber  { background: #3a2e0f; color: #f2b94b; }
  html:not([data-theme]) .lp-ic-indigo { background: #1f2340; color: #aec1f5; }
  html:not([data-theme]) .lp-ic-teal   { background: #123331; color: #4fd1c5; }
  html:not([data-theme]) .lp-value-featured { background: linear-gradient(155deg, #1a2733, #202124); }
  html:not([data-theme]) .lp-value-featured .lp-ic { background: #2d2e30; }
}
html[data-theme="dark"] .lp-ic-blue   { background: #1a2733; color: #8ab4f8; }
html[data-theme="dark"] .lp-ic-green  { background: #1e3a24; color: #81c995; }
html[data-theme="dark"] .lp-ic-coral  { background: #3a1f1f; color: #f28b82; }
html[data-theme="dark"] .lp-ic-amber  { background: #3a2e0f; color: #f2b94b; }
html[data-theme="dark"] .lp-ic-indigo { background: #1f2340; color: #aec1f5; }
html[data-theme="dark"] .lp-ic-teal   { background: #123331; color: #4fd1c5; }
html[data-theme="dark"] .lp-value-featured { background: linear-gradient(155deg, #1a2733, #202124); }
html[data-theme="dark"] .lp-value-featured .lp-ic { background: #2d2e30; }

/* Broader sweep — alerts, notices, and a few misc components used across many
   pages, all with the same underlying issue (hardcoded light hex, not theme
   variables). Same two-selector pattern as everything above. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .alert-error { background: #3a1f1f; color: #f28b82; border-color: #4d2c2c; }
  html:not([data-theme]) .alert-warn { background: #3a2e0f; color: #f2b94b; border-color: #4d3d16; }
  html:not([data-theme]) .alert-coral { background: #3a1f1f; color: #f28b82; border-color: #4d2c2c; }
  html:not([data-theme]) .alert-info { background: #1a2733; color: #8ab4f8; border-color: #2a3b4d; }
  html:not([data-theme]) .map-note { background: #3a2e0f; border-color: #4d3d16; color: #f2b94b; }
  html:not([data-theme]) .ad-stats { background: #2d2e30; }
  html:not([data-theme]) .jt { background: #35363a; color: #c4c7c5; }
  html.icons-colored:not([data-theme]) .page-head-icon-violet { background: #241b38; color: #b39ddb; }
  html.icons-colored:not([data-theme]) .page-head-icon-amber { background: #3a2e0f; color: #f2b94b; }
  html.icons-colored:not([data-theme]) .page-head-icon-blue { background: #1a2733; color: #8ab4f8; }
  html.icons-colored:not([data-theme]) .page-head-icon-green { background: #1e3324; color: #81c995; }
  html.icons-colored:not([data-theme]) .page-head-icon-coral { background: #3a1f1f; color: #f28b82; }
  html.icons-colored:not([data-theme]) .page-head-icon-teal { background: #103338; color: #5ecbd6; }
}
html[data-theme="dark"] .alert-error { background: #3a1f1f; color: #f28b82; border-color: #4d2c2c; }
html[data-theme="dark"] .alert-warn { background: #3a2e0f; color: #f2b94b; border-color: #4d3d16; }
html[data-theme="dark"] .alert-coral { background: #3a1f1f; color: #f28b82; border-color: #4d2c2c; }
html[data-theme="dark"] .alert-info { background: #1a2733; color: #8ab4f8; border-color: #2a3b4d; }
html[data-theme="dark"] .map-note { background: #3a2e0f; border-color: #4d3d16; color: #f2b94b; }
html[data-theme="dark"] .ad-stats { background: #2d2e30; }
html[data-theme="dark"] .jt { background: #35363a; color: #c4c7c5; }
html.icons-colored[data-theme="dark"] .page-head-icon-violet { background: #241b38; color: #b39ddb; }
html.icons-colored[data-theme="dark"] .page-head-icon-amber { background: #3a2e0f; color: #f2b94b; }
html.icons-colored[data-theme="dark"] .page-head-icon-blue { background: #1a2733; color: #8ab4f8; }
html.icons-colored[data-theme="dark"] .page-head-icon-green { background: #1e3324; color: #81c995; }
html.icons-colored[data-theme="dark"] .page-head-icon-coral { background: #3a1f1f; color: #f28b82; }
html.icons-colored[data-theme="dark"] .page-head-icon-teal { background: #103338; color: #5ecbd6; }
html[data-theme="dark"] .me-widget { background: linear-gradient(135deg, #1a2733 0%, #2a2620 100%); border-color: #2a3b4d; }
html[data-theme="dark"] .me-widget-divider { background: #2a3b4d; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .me-widget { background: linear-gradient(135deg, #1a2733 0%, #2a2620 100%); border-color: #2a3b4d; }
  html:not([data-theme]) .me-widget-divider { background: #2a3b4d; }
}
html[data-theme="dark"] .alert-ok { color: #81c995; border-color: #2c4a33; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .alert-ok { color: #81c995; border-color: #2c4a33; } }
html:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: light dark; }


* { box-sizing: border-box; }
/* Safety net: every icon SVG has no explicit width/height (just a viewBox), so
   without SOME rule they render at the browser's oversized SVG default. Any
   more specific rule elsewhere (`.nav-link svg`, `.pe-chip svg`, etc.) still wins
   per normal CSS cascade — this only fills gaps like `.section-title svg` that
   never got one. */
svg { width: 18px; height: 18px; flex: none; }

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

body {
  margin: 0;
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
img { max-width: 100%; display: block; }

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

/* ----------------------------------------------------------------------- */
/* Brand mark                                                              */
/* ----------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--wordmark);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.brand .glyph {
  width: 30px; height: 30px;
  flex: 0 0 30px;
}
.brand .glyph svg { width: 100%; height: 100%; display: block; }
/* Wordmark — definitivo: fonte Poppins, uma cor solida so, escolhida pelo
   fundo. Marinho elegante em fundo claro, branco em fundo escuro/preto —
   a mesma regra usada no restante da identidade da marca. */
.brand .wordmark {
  font-family: var(--wordmark);
  color: #14212e;
  font-weight: 700;
  letter-spacing: -0.015em;
}
html[data-theme="dark"] .brand .wordmark { color: #ffffff; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .brand .wordmark { color: #ffffff; }
}

/* ----------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ----------------------------------------------------------------------- */
/* The HTML `hidden` attribute must always win over component display rules
   (.btn{display:inline-flex}, .lightbox{display:flex}, etc.). Without this,
   JS toggling el.hidden has no effect and panels/buttons/lightboxes show when
   they shouldn't. */
[hidden] { display: none !important; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 500;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
  background: var(--surface);
  color: var(--keek);
  border-color: var(--hair);
}
/* A native <button class="btn"> (e.g. "Entrar" submitting a form) must render
   at the exact same size as an <a class="btn"> (e.g. "Criar conta") — without
   this, the browser's own UA stylesheet for <button> (its own font, margin,
   line-height) makes the two drift apart in height even with identical
   classes, which is exactly the "Entrar menor que Criar conta" bug. */
button.btn { margin: 0; line-height: inherit; font-family: inherit; font-weight: 500; }
.btn:hover { background: #f3f8fe; border-color: #cfe0fb; box-shadow: none; }
.btn:active { background: #e9f1fd; box-shadow: none; }
.btn-primary {
  background: var(--keek);
  color: #fff;
  border-color: var(--keek);
  box-shadow: none;
}
.btn-primary:hover { background: var(--keek-deep); border-color: var(--keek-deep); box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.btn-primary:active { background: #1659b3; box-shadow: none; }
/* Item — estilo suave/discreto pedido pelo Abel, pros botões de "Publicar":
   fundo creme, borda fina, texto escuro — bem diferente do azul cheio,
   mais elegante e menos "gritado". Usado especificamente nos botões de
   publicar/postar, NÃO nos de Entrar/Criar conta, que continuam azuis. */
.btn-soft {
  background: #14212e;
  color: #ffffff;
  border: 1px solid #14212e;
  box-shadow: none;
}
.btn-soft:hover { background: #1c2e3f; border-color: #1c2e3f; }
.btn-soft:active { background: #0e1620; }
.btn-soft svg { color: #ffffff; }
/* Item — versao so-icone, sem fundo escuro, pros botoes pequenos de
   "publicar aqui" nos cards de lugar (Interesses/Explorar) — mais leve,
   ja que o botao Publicar principal (navy) fica reservado pra acao
   central do compositor. */
.btn-place-post-icon { background: #e8f0fe; border: 1px solid transparent; padding: 7px; }
.btn-place-post-icon svg { color: #1a56c4; margin: 0; }
.btn-place-post-icon:hover { background: #d7e6fc; }
.btn-green {
  background: #1DA672;
  color: #fff;
  border-color: #1DA672;
  box-shadow: none;
}
.btn-green:hover { background: #158C5D; border-color: #158C5D; box-shadow: 0 1px 2px rgba(21,140,93,.3), 0 1px 3px 1px rgba(21,140,93,.15); }
.btn-green:active { background: #0F7048; box-shadow: none; }
.btn-ghost { background: transparent; border-color: var(--hair); color: var(--ink); }
.btn-ghost:hover { background: var(--rail-active); border-color: var(--hair); box-shadow: none; }
.btn-coral { background: var(--coral); color: #fff; border-color: var(--coral); }
.btn-coral:hover { background: #c5221f; border-color: #c5221f; }
/* Elegant, attention-grabbing CTA colors for the logged-out landing page:
   light red for "Criar conta grátis" and warm orange for "Explorar lugares". */
.btn-red {
  background: #E5484D;
  color: #fff;
  border-color: #E5484D;
  box-shadow: none;
}
.btn-red:hover { background: #CC3E42; border-color: #CC3E42; box-shadow: 0 1px 2px rgba(204,62,66,.3), 0 1px 3px 1px rgba(204,62,66,.15); }
.btn-red:active { background: #B3373B; box-shadow: none; }
.btn-orange {
  background: #F2994A;
  color: #fff;
  border-color: #F2994A;
  box-shadow: none;
}
.btn-orange:hover { background: #E0832E; border-color: #E0832E; box-shadow: 0 1px 2px rgba(224,131,46,.3), 0 1px 3px 1px rgba(224,131,46,.15); }
.btn-orange:active { background: #C56E1F; box-shadow: none; }
/* Lighter, softer blue for the "Entrar" button in the logged-out header —
   keeps it visually secondary to the red/orange CTAs below it. */
.btn-login-lite {
  background: #4C8DF0;
  color: #fff;
  border-color: #4C8DF0;
  box-shadow: none;
}
.btn-login-lite:hover { background: #3A7BE0; border-color: #3A7BE0; }
.btn-login-lite:active { background: #2E68C4; }
/* "Following" — a clear, elegant status (looks active, not faded) */
.btn-following { background: var(--green-tint); color: #137333; border-color: transparent; }
.btn-following svg { color: #137333; }
.btn-following[disabled] { opacity: 1; cursor: default; }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-sm svg { width: 16px; height: 16px; }

/* ----------------------------------------------------------------------- */
/* Forms                                                                   */
/* ----------------------------------------------------------------------- */
label { font-weight: 600; font-size: 13.5px; color: var(--ink); display: block; margin-bottom: 6px; }
.field { margin-bottom: 16px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=date], input[type=url], select, textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 11px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--keek);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, .18);
}
textarea { resize: vertical; min-height: 84px; }
.hint { color: var(--muted); font-size: 12.5px; margin-top: 6px; }

/* In-content links (posts, comments, menus, prose) use Google blue */
.post-body a, .comment-text a, .menu-desc a, .post-embeds a,
.card-pad p a, .biz-body a { color: var(--keek); }
.post-body a:hover, .comment-text a:hover, .menu-desc a:hover,
.card-pad p a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------------- */
/* App shell — left rail + feed + aside                                    */
/* ----------------------------------------------------------------------- */
.mobile-topbar { display: none; }

/* Item — cabecalho escuro do desktop (opcao C aprovada pelo Abel): logo +
   titulo da pagina a esquerda, usuario + sair a direita. Sticky no topo,
   acima da barra lateral (que agora comeca 64px mais abaixo). */
.app-topbar {
  position: sticky; top: 0; z-index: 60;
  height: 64px; background: #ffffff; border-bottom: 1px solid #dadce0;
}
/* Item — usa a MESMA grade de 3 colunas do .shell (rail/feed/aside), pra
   garantir que titulo e usuario fiquem alinhados com o conteudo abaixo
   por construcao (mesmas variaveis --rail/--feed/--aside), em vez de
   tentar acertar isso com margens calculadas a mao. */
.app-topbar-inner {
  display: grid; grid-template-columns: var(--rail) minmax(0, var(--feed)) var(--aside);
  gap: 28px; max-width: 1260px; margin: 0 auto; height: 100%; padding: 0 24px;
}
.app-topbar-col-rail { display: flex; align-items: center; min-width: 0; position: relative; }
.app-topbar-col-feed { display: flex; align-items: center; min-width: 0; }
.app-topbar-col-aside { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.app-topbar-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.app-topbar-brand .glyph { width: 28px; height: 28px; display: flex; }
.app-topbar-brand .wordmark { font-family: var(--wordmark); font-weight: 700; letter-spacing: -0.015em; font-size: 19px; color: #14212e; }
/* Item — o separador fica fora do fluxo (absolute), encaixado no vao
   entre as colunas (metade do gap de 28px do grid), assim ele nao
   empurra o titulo pra longe da borda exata da coluna do feed. */
.app-topbar-sep { position: absolute; right: -18px; width: 1px; height: 26px; background: #dadce0; }
.app-topbar-title { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; color: #3c4043; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar-title .page-head-icon { background: #eef1f4 !important; color: #5f6368 !important; width: 28px; height: 28px; }
.app-topbar-title .page-head-icon svg { width: 15px; height: 15px; }
.app-topbar-user { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #f1f3f4; text-decoration: none; transition: background .15s ease; }
.app-topbar-user:hover { background: #e8eaed; }
.app-topbar-user .who { display: flex; flex-direction: column; line-height: 1.2; }
.app-topbar-user .who strong { color: #3c4043; font-size: 13.5px; }
.app-topbar-user .who small { color: #5f6368; font-size: 11.5px; }

/* Item — versao escura, so quando a pessoa escolhe explicitamente "Escuro"
   nas preferencias (ou, pra quem ainda tem "Automatico" salvo de antes de
   removermos essa opcao, quando o sistema operacional prefere escuro). */
html[data-theme="dark"] .app-topbar { background: #14212e; border-bottom: none; }
html[data-theme="dark"] .app-topbar-brand .wordmark { color: #ffffff; }
html[data-theme="dark"] .app-topbar-sep { background: rgba(255,255,255,.18); }
html[data-theme="dark"] .app-topbar-title { color: #ffffff; }
html[data-theme="dark"] .app-topbar-title .page-head-icon { background: rgba(255,255,255,.14) !important; color: #ffffff !important; }
html[data-theme="dark"] .app-topbar-user { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .app-topbar-user:hover { background: rgba(255,255,255,.16); }
html[data-theme="dark"] .app-topbar-user .who strong { color: #ffffff; }
html[data-theme="dark"] .app-topbar-user .who small { color: rgba(255,255,255,.65); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .app-topbar { background: #14212e; border-bottom: none; }
  html:not([data-theme]) .app-topbar-brand .wordmark { color: #ffffff; }
  html:not([data-theme]) .app-topbar-sep { background: rgba(255,255,255,.18); }
  html:not([data-theme]) .app-topbar-title { color: #ffffff; }
  html:not([data-theme]) .app-topbar-title .page-head-icon { background: rgba(255,255,255,.14) !important; color: #ffffff !important; }
  html:not([data-theme]) .app-topbar-user { background: rgba(255,255,255,.08); }
  html:not([data-theme]) .app-topbar-user .who strong { color: #ffffff; }
  html:not([data-theme]) .app-topbar-user .who small { color: rgba(255,255,255,.65); }
}
/* Item — modal de confirmacao elegante antes de sair, pra evitar clique
   acidental (era o problema real com o botao no cabecalho). */
.fk-modal-overlay { position: fixed; inset: 0; background: rgba(20,33,46,.55); backdrop-filter: blur(2px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fk-modal { background: var(--surface); border-radius: 18px; padding: 28px; max-width: 340px; width: 100%; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.fk-modal-icon { width: 52px; height: 52px; border-radius: 50%; background: #fdeceb; color: #e0574a; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.fk-modal-icon svg { width: 24px; height: 24px; }
.fk-modal h2 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 20px; }
.fk-modal-actions { display: flex; gap: 10px; justify-content: center; }
.fk-modal-actions .btn { flex: 1; justify-content: center; }

@media (max-width: 720px) {
  /* Item — versao mobile aprovada pelo Abel (Opcao 2): tudo numa linha so,
     sem escrever "freekeek" (o icone colorido ja carrega a marca sozinho),
     icone + titulo a esquerda, avatar a direita. Substitui o antigo
     mobile-topbar pra quem esta logado. */
  .app-topbar { height: 56px; }
  .app-topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
  .app-topbar-col-rail { flex: none; }
  .app-topbar-col-feed { gap: 6px; }
  .app-topbar-col-aside { gap: 2px; flex: none; }
  .app-topbar-brand .wordmark { display: none; }
  .app-topbar-brand .glyph { width: 26px; height: 26px; }
  .app-topbar-sep { height: 20px; }
  .app-topbar-title { font-size: 15.5px; gap: 6px; }
  .app-topbar-title .page-head-icon { width: 24px; height: 24px; }
  .app-topbar-title .page-head-icon svg { width: 13px; height: 13px; }
  .app-topbar-user .who { display: none; }
  .app-topbar-user { padding: 4px; background: none; }
}
.geo-ask { margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.geo-ask-icon { flex: none; }
.geo-ask-text { flex: 1; min-width: 0; }
.geo-ask-actions { display: flex; gap: 8px; flex: none; }
.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--feed)) var(--aside);
  gap: 14px;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: start;
}

.rail {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  padding: 11px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rail .brand { padding: 8px 12px 18px; }
/* Item — a pedido do Abel: os links do menu flutuavam soltos no fundo da
   pagina, sem nenhum agrupamento visual (diferente dos cards da barra
   direita). Agora ficam dentro de um card sutil, dando coesao. */
.rail-nav-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 14.5px;
  transition: background .12s ease, color .12s ease;
}
.nav-link svg { width: 21px; height: 21px; flex: 0 0 21px; stroke-width: 2; }
.nav-link:hover { background: var(--rail-active); color: var(--ink); }
.nav-link.active { background: var(--nav-active-bg); color: #fff; font-weight: 500; }
.nav-link.active svg { color: #8ab4f8; }
.rail .compose-cta { margin-top: 6px; align-self: stretch; justify-content: center; padding: 11px 16px; }
.rail .logout-link {
  display: flex; align-items: center; gap: 9px;
  margin-top: 8px; padding: 9px 12px;
  border-radius: var(--r-md); color: var(--muted); font-weight: 500; font-size: 13.5px;
}
.rail .logout-link svg { width: 18px; height: 18px; flex: 0 0 18px; }
.rail .logout-link:hover { background: #fce8e6; color: var(--coral); }
.rail .me {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--hair);
  background: var(--surface);
}
.rail .me small { color: var(--muted); display: block; }

.main { padding: 12px 0 80px; min-width: 0; }
.aside { position: sticky; top: 24px; padding: 12px 0; display: flex; flex-direction: column; gap: 10px; }

/* Page header band inside main */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.page-head h1 { font-size: 27px; margin: 0; color: #3c4043; display: flex; align-items: center; gap: 10px; }
.page-head .sub { color: var(--muted); font-size: 14px; }

/* ----------------------------------------------------------------------- */
/* Cards / surfaces                                                        */
/* ----------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 20px; }
.stack > * + * { margin-top: 16px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--keek-tint);
  color: var(--keek-deep);
}
.chip.green { background: var(--green-tint); color: #0c7a59; }
.chip.coral { background: #ffe7e4; color: #c23b30; }
.chip.ink { background: var(--ink); color: #fff; }
.chip.ghost { background: transparent; border: 1px solid var(--hair); color: var(--muted); }

.avatar {
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--keek), var(--coral));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  flex: 0 0 auto;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-default-person { width: 60%; height: 60%; }
.avatar.lg { width: 76px; height: 76px; font-size: 30px; }
.avatar.sm { width: 32px; height: 32px; font-size: 13px; }

/* ----------------------------------------------------------------------- */
/* Post card                                                               */
/* ----------------------------------------------------------------------- */
.post { padding: 18px 20px; }
.post + .post { border-top: 1px solid var(--hair); }
.post-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.post-who { min-width: 0; }
.post-who .name { font-weight: 700; font-family: var(--display); letter-spacing: -.01em; color: var(--keek); }
.post-who .meta { color: var(--muted); font-size: 13px; }
.post-who .meta a { color: var(--keek-deep); font-weight: 600; }
.post-body { font-size: 15.5px; white-space: pre-wrap; word-wrap: break-word; }
.post-img { margin-top: 12px; border-radius: var(--r-md); border: 1px solid var(--hair); overflow: hidden; }
.post-img img { width: 100%; max-height: 460px; object-fit: cover; }
.post-actions { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--muted); }
.iconbtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 6px 10px; border-radius: var(--r-pill);
  transition: background .12s ease, color .12s ease;
}
.iconbtn:hover { background: var(--paper); color: var(--ink); }
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn.liked { color: var(--coral); }
.iconbtn.liked svg { fill: var(--coral); }
.privacy-tag { font-size: 11.5px; }

/* ----------------------------------------------------------------------- */
/* THE SIGNATURE: place-web constellation                                  */
/* ----------------------------------------------------------------------- */
.constellation {
  position: relative;
  background:
    radial-gradient(120% 120% at 12% 0%, #211b3a 0%, var(--ink) 55%) ,
    var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 22px 22px 18px;
  overflow: hidden;
}
.constellation::after {
  /* faint starfield */
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.25), transparent),
    radial-gradient(1.5px 1.5px at 85% 65%, rgba(255,255,255,.20), transparent),
    radial-gradient(1.5px 1.5px at 35% 80%, rgba(255,255,255,.25), transparent);
  pointer-events: none;
}
.constellation .c-label {
  position: relative; z-index: 1;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 700;
  color: var(--keek-tint);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.c-graph { position: relative; z-index: 1; }
.c-tier { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
.c-tier .tier-name {
  width: 74px; flex: 0 0 74px;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-soft);
}
.c-node {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  font-size: 13px; font-weight: 600; color: #fff;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.c-node:hover { background: rgba(26,115,232,.28); border-color: var(--keek); }
.c-node .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-soft); }
.c-node.is-current {
  background: var(--keek); border-color: var(--keek);
  box-shadow: 0 4px 14px rgba(26,115,232,.45);
}
.c-node.is-current .dot { background: #fff; }
.c-node.is-child .dot { background: var(--green); }
.c-node.is-ancestor .dot { background: var(--coral); }
.c-rail {
  height: 16px; width: 1px; margin-left: 110px;
  background: linear-gradient(to bottom, rgba(255,255,255,.4), rgba(255,255,255,.05));
}
.c-empty { color: var(--muted-soft); font-size: 13px; position: relative; z-index: 1; }

/* ----------------------------------------------------------------------- */
/* Place header                                                            */
/* ----------------------------------------------------------------------- */
.place-hero { padding: 22px; display: flex; gap: 18px; align-items: flex-start; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.place-hero .mark {
  width: 64px; height: 64px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--green), var(--keek));
  display: grid; place-items: center; color: #fff; flex: 0 0 64px;
}
.place-hero .mark svg { width: 30px; height: 30px; }
.place-hero h1 { font-size: 12.5px; margin-bottom: 2px; }
.place-hero .where { color: var(--muted); font-size: 14px; }
.stat-row { display: flex; gap: 22px; margin-top: 14px; }

/* Item — redesenho do card de perfil do lugar, a pedido do Abel: nome com
   fonte mais elegante e cor mais clara, endereço em linha cheia (nao mais
   espremido ao lado dos chips), e os botoes de Seguir/Seguindo com cores
   proprias e mais chamativas em vez do azul/cinza genericos. */
.place-name-elegant { font-family: var(--wordmark); font-size: 12.5px; font-weight: 700; color: #2c2f33; letter-spacing: -0.005em; }
.place-address-full { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10.5px; margin-top: 4px; }
.place-address-full svg { width: 11px; height: 11px; flex: none; }
.where .chip { font-size: 10.5px; padding: 3px 8px; }
.btn-place-follow { background: #e0574a; color: #fff; border-color: #e0574a; padding: 4px 10px; font-size: 12px; }
.btn-place-follow:hover { background: #c94a3e; border-color: #c94a3e; }
/* Item — botao de "entrar pra seguir e publicar" (visitante deslogado),
   mesma cor laranja do botao "Explorar lugares" da pagina inicial —
   pedido separado do botao Seguir de quem ja esta logado. */
/* .btn-login-cta removida — padronizado para .btn-primary (ver changelog) */
.btn-place-following { background: #e6f4ea; color: #1e8e3e; border-color: #c8e6cf; padding: 4px 10px; font-size: 12px; }
.btn-place-following:hover { background: #d7ede0; }
.stat b { font-family: var(--display); font-size: 19px; display: block; }
.stat span { color: var(--muted); font-size: 12.5px; }

/* ----------------------------------------------------------------------- */
/* Autocomplete (Explore search)                                           */
/* ----------------------------------------------------------------------- */
.ac-wrap { position: relative; }
.ac-input-row { position: relative; }
.ac-input-row svg.search-ico {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--muted); pointer-events: none;
}
.ac-input-row input { padding-left: 46px; height: 52px; font-size: 16px; border-radius: var(--r-pill); }
.ac-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 30;
  display: none;
}
.ac-panel.open { display: block; }
.ac-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer; border: none; background: none;
  width: 100%; text-align: left; font: inherit;
  transition: background .1s ease;
}
.ac-item:hover, .ac-item.active { background: var(--keek-tint); }
.ac-item .pin {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex: 0 0 34px;
  display: grid; place-items: center; background: var(--keek-tint); color: var(--keek-deep);
}
.ac-item .pin svg { width: 18px; height: 18px; }
.ac-item .t { font-weight: 600; font-size: 14.5px; }
.ac-item .s { color: var(--muted); font-size: 12.5px; }
/* Item — selo "Já no Freekeek" / "Novo no Freekeek" no Autocomplete: sempre
   ao final do texto, nunca substitui ou reordena o que o Google devolveu. */
.ac-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 8px 2px 5px; border-radius: 20px; margin-left: 7px; white-space: nowrap; vertical-align: middle; }
.ac-badge svg { width: 13px; height: 13px; flex: none; }
.ac-badge-on { background: var(--keek-tint); color: var(--keek-deep); }
.ac-badge-new { background: var(--green-tint); color: #0c6b50; padding: 2px 8px; }
html[data-theme="dark"] .ac-badge-new { background: #1e3a24; color: #81c995; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .ac-badge-new { background: #1e3a24; color: #81c995; } }
.ac-foot { padding: 9px 16px; font-size: 11.5px; color: var(--muted-soft); border-top: 1px solid var(--hair); background: var(--paper); }
/* Item — aviso elegante quando a busca por lugares novos está temporariamente
   limitada pelo Google (em vez de simplesmente parecer "não achou nada"). */
.ac-quota-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; background: var(--keek-tint); border-bottom: 1px solid var(--hair); font-size: 12.5px; line-height: 1.5; color: var(--keek-deep); }
.ac-quota-notice svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.ac-foot-warn { padding: 14px 16px; font-size: 13px; color: var(--ink-soft); border-top: none; background: #fff; line-height: 1.6; }
.ac-foot-warn svg { width: 15px; height: 15px; vertical-align: -3px; color: var(--coral); margin-right: 4px; }
.ac-foot-warn a { color: var(--keek-deep); font-weight: 700; text-decoration: none; }
.ac-foot-warn a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------------- */
/* Place grid (explore)                                                    */
/* ----------------------------------------------------------------------- */
.place-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.place-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: transform .1s ease, box-shadow .15s ease; }
.place-card:hover { box-shadow: var(--shadow-md); border-color: #c8ccd0; }
.place-card .pc-top { display: flex; align-items: center; gap: 11px; }
.place-card .pc-name { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
.place-card .pc-meta { color: var(--muted); font-size: 12.5px; }

/* ----------------------------------------------------------------------- */
/* Classifieds                                                             */
/* ----------------------------------------------------------------------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-pill); padding: 3px; }
.seg a { padding: 7px 15px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: var(--muted); }
.seg a.on { background: var(--ink); color: #fff; }

.ad-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ad-card { overflow: hidden; display: flex; flex-direction: column; transition: transform .1s ease, box-shadow .15s ease; }
.ad-card:hover { box-shadow: var(--shadow-md); border-color: #c8ccd0; }
.ad-photo { aspect-ratio: 16/10; background: var(--keek-tint); overflow: hidden; }
.ad-photo img { width: 100%; height: 100%; object-fit: cover; }
.ad-photo.placeholder { display: grid; place-items: center; color: var(--keek); }
.ad-photo.placeholder svg { width: 46px; height: 46px; opacity: .5; }
.ad-body { padding: 15px 16px; }
.ad-price { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.ad-price .per { font-size: 12px; color: var(--muted); font-weight: 600; }
.ad-title { font-weight: 600; margin: 2px 0 6px; }
.ad-attrs { display: flex; gap: 14px; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }

/* ----------------------------------------------------------------------- */
/* Auth pages (split layout)                                               */
/* ----------------------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.auth-art {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(130% 130% at 10% 10%, #1b3a6b 0%, var(--ink) 60%), var(--ink);
  padding: 56px 60px; display: flex; flex-direction: column; justify-content: space-between;
}
.auth-art::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 25% 35%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 65% 25%, rgba(255,255,255,.3), transparent),
    radial-gradient(2px 2px at 80% 60%, rgba(255,255,255,.25), transparent),
    radial-gradient(2px 2px at 40% 75%, rgba(255,255,255,.3), transparent),
    radial-gradient(2px 2px at 15% 60%, rgba(255,255,255,.2), transparent);
  pointer-events: none;
}
.auth-art .brand { color: #fff; position: relative; z-index: 1; }
.auth-art .brand .wordmark { color: #fff; }
.auth-art .brand .wordmark .k { color: inherit; }
.auth-art .pitch { position: relative; z-index: 1; max-width: 440px; }
.auth-art .pitch h2 { font-size: 38px; line-height: 1.08; margin-bottom: 16px; }
.auth-art .pitch p { color: #c4c7cc; font-size: 16px; }
.auth-art .foot-links { position: relative; z-index: 1; display: flex; gap: 18px; font-size: 13px; color: #bdc1c6; }
.auth-art .foot-links a:hover { color: #fff; }

.auth-form-wrap { display: flex; align-items: center; justify-content: center; padding: 20px 28px; }
.auth-form { width: 100%; max-width: 380px; }
.auth-form h1 { font-size: 28px; margin: 0 0 6px; }
.auth-form .lead { color: var(--muted); margin-bottom: 18px; }
.auth-form .alt { margin-top: 20px; font-size: 14px; color: var(--muted); text-align: center; }
.auth-form .alt a { color: var(--keek-deep); font-weight: 600; }
.auth-form .alt a.btn-primary { color: #fff; }
.auth-form .alt a.cta-red { color: #E5484D; font-weight: 700; }
.auth-form .alt a.cta-red:hover { color: #CC3E42; text-decoration: underline; }
.demo-note {
  margin-top: 14px; padding: 11px 14px; border-radius: var(--r-md);
  background: var(--green-tint); color: #0c6b50; font-size: 13px;
  border: 1px solid #bfe9da;
  display: flex; align-items: center; gap: 12px;
}
.demo-note-glyph { flex: none; width: 34px; height: 34px; }
.demo-note-glyph svg { width: 100%; height: 100%; display: block; }
.demo-note-text { flex: 1; min-width: 0; }
.demo-note code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }

.alert { padding: 12px 15px; border-radius: var(--r-md); font-size: 14px; margin-bottom: 18px; }
.alert-error { background: #ffe7e4; color: #b3271b; border: 1px solid #ffcfc9; }
.alert-ok { background: var(--green-tint); color: #0c6b50; border: 1px solid #bfe9da; }

/* ----------------------------------------------------------------------- */
/* Misc / informational pages                                              */
/* ----------------------------------------------------------------------- */
.prose { max-width: 720px; }
.prose h1 { font-size: 32px; margin-bottom: 8px; }
.prose h2 { font-size: 20px; margin-top: 28px; }
.prose .muted { color: var(--muted); }
.topbar-lite {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 980px; margin: 0 auto; padding: 20px 24px;
}
.empty {
  text-align: center; padding: 52px 24px; color: var(--muted);
}
.empty svg { width: 46px; height: 46px; color: var(--keek); opacity: .5; margin-bottom: 12px; }
.empty h3 { font-size: 19px; color: var(--ink); }

.modal-inline {
  border: 1px dashed var(--hair); border-radius: var(--r-md);
  padding: 14px 16px; background: var(--paper);
}
.section-title {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.section-title svg { width: 16px; height: 16px; }

/* Admin table */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--hair); }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.kpi { padding: 18px; }
.kpi b { font-family: var(--display); font-size: 30px; letter-spacing: -.02em; display: block; }
.kpi span { color: var(--muted); font-size: 13px; }

/* ----------------------------------------------------------------------- */
/* Responsive                                                              */
/* ----------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .shell { grid-template-columns: 84px minmax(0, 1fr); }
  .aside { display: none; }
  .rail { padding: 18px 8px; align-items: stretch; }
  .rail .brand .wordmark, .nav-link span, .rail .me .who { display: none; }
  .nav-link { justify-content: center; padding: 12px; }
  .rail .brand { justify-content: center; padding: 8px 0 16px; }
  .rail .compose-cta { display: none; }
  .place-grid, .ad-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .shell { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .mobile-topbar {
    display: flex; align-items: center; justify-content: center;
    position: sticky; top: 0; z-index: 40;
    height: 52px; background: #14212e; border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .mobile-topbar-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
  .mobile-topbar-brand .wordmark { font-family: var(--wordmark); font-weight: 700; letter-spacing: -0.015em; font-size: 21px; color: #ffffff; }
  .mobile-topbar-brand .glyph { width: 30px; height: 30px; flex: none; display: flex; }
  /* Item — a pedido do Abel: em tela estreita, ficava tudo espremido numa
     coluna fina (icone, texto e botoes disputando a mesma linha). Agora
     empilha na ordem certa (icone, texto, botoes), ocupando a largura
     inteira da tela. */
  .geo-ask { flex-direction: column; align-items: stretch; text-align: center; }
  .geo-ask-actions { flex-direction: row; justify-content: center; }
  .rail {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    height: auto; flex-direction: row; justify-content: flex-start;
    padding: 8px 6px; background: var(--surface); border-top: 1px solid var(--hair);
    z-index: 50; gap: 0;
    /* Item — corrigido a pedido do Abel: com muitos ícones no menu, alguns
       ficavam cortados fora da tela no celular, sem nenhum jeito de
       alcançá-los (nem rolar, nem clicar). Agora a barra rola na horizontal
       — todo ícone continua acessível, só desliza o dedo pra ver o resto. */
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail .brand, .rail .me, .rail .compose-cta { display: none; }
  /* Item — o card que agrupa os links no desktop precisa "sumir" no
     celular, senao os itens tentam empilhar em coluna dentro da barra
     horizontal de baixo, quebrando a rolagem lateral que já corrigimos. */
  .rail-nav-card { display: contents; }
  .nav-link { flex-direction: column; gap: 3px; font-size: 10px; padding: 6px 10px; flex: none; }
  .nav-link span { display: block; font-size: 10px; }
  .nav-link.active { background: none; color: var(--keek); }
  .nav-link.active svg { color: var(--keek); }
  .main { padding: 14px 14px 90px; }
  .page-head h1 { font-size: 22px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .place-hero { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .btn:hover, .place-card:hover, .ad-card:hover, .c-node:hover { transform: none; }
}

/* ----------------------------------------------------------------------- */
/* Compose place picker (searchable)                                       */
/* ----------------------------------------------------------------------- */
.placepick { position: relative; }
.placepick-btn {
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 240px; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-md);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.placepick-btn:hover { border-color: var(--keek); }
.placepick-btn svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--keek); }
.placepick-btn svg:last-child { color: var(--muted-soft); margin-left: 2px; }
.placepick-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placepick-label.is-placeholder { color: var(--muted-soft); font-weight: 500; }
.placepick-panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: 280px; max-width: 80vw;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.placepick-search {
  width: 100%; border: none; border-bottom: 1px solid var(--hair);
  padding: 11px 14px; font: inherit; font-size: 14px; outline: none;
}
.placepick-list { max-height: 240px; overflow-y: auto; padding: 6px; }
.placepick-opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border: none; background: none; border-radius: var(--r-sm);
  font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer;
}
.placepick-opt:hover { background: var(--keek-tint); }
.placepick-opt[aria-selected="true"] { background: var(--keek-tint); color: var(--keek-deep); }
.placepick-opt .po-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placepick-opt small { color: var(--muted-soft); font-size: 12px; }
.placepick-opt .po-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--keek)); flex: 0 0 8px; }
.placepick-empty { padding: 12px 14px; font-size: 13px; color: var(--muted); }
.placepick-empty a { color: var(--keek-deep); font-weight: 600; }

/* "Publish here" action shown on places in Explore / on place pages */
.place-card .pc-actions { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.place-card .pc-name { color: var(--ink); }
.place-card .pc-name:hover { color: var(--keek-deep); }

/* ===================================================================== */
/* Lote 2 — media, comments, post detail                                 */
/* ===================================================================== */

/* Media gallery (posts + classifieds) */
.media-gallery { display: grid; gap: 4px; border-radius: var(--r-md); overflow: hidden; margin: 4px 0 2px; }
.media-gallery .mg-cell { display: block; background: var(--keek-tint); aspect-ratio: 1 / 1; overflow: hidden; }
.media-gallery .mg-cell img,
.media-gallery .mg-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-gallery.count-1 { grid-template-columns: 1fr; }
.media-gallery.count-1 .mg-cell { aspect-ratio: 16 / 10; }
.media-gallery.count-2 { grid-template-columns: 1fr 1fr; }
.media-gallery.count-3 { grid-template-columns: 1fr 1fr; }
.media-gallery.count-3 .mg-cell:first-child { grid-row: span 2; aspect-ratio: auto; }
.media-gallery.count-4 { grid-template-columns: 1fr 1fr; }
.media-gallery.count-many { grid-template-columns: repeat(3, 1fr); }
.media-gallery .mg-video { position: relative; }

.post-embeds { margin-top: 10px; display: grid; gap: 8px; }
.post-embeds img, .post-embeds video { max-width: 100%; border-radius: var(--r-md); display: block; }

/* Media uploader */
.media-upload { margin-top: 8px; }
.mu-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.mu-previews:not(:empty) { margin-bottom: 10px; }
.mu-item { position: relative; width: 84px; border-radius: var(--r-sm); background: var(--keek-tint); border: 1px solid var(--hair); }
.mu-item img, .mu-item video { width: 84px; height: 84px; object-fit: cover; display: block; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.mu-item.mu-loading { height: 84px; display: flex; align-items: center; justify-content: center; }
.mu-spin { width: 22px; height: 22px; border: 2.5px solid var(--hair); border-top-color: var(--keek); border-radius: 50%; animation: mu-spin 0.7s linear infinite; }
@keyframes mu-spin { to { transform: rotate(360deg); } }
.mu-x { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(20,18,31,.72); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.mu-x:hover { background: var(--coral); }

/* Item — Fase 1 de filtros: fileira compacta de bolinhas abaixo da
   pré-visualização, uma por predefinido — sem texto (só tooltip), pra
   caber numa célula pequena de 84px de largura. */
.mu-filter-row { display: flex; gap: 4px; padding: 5px 4px; overflow-x: auto; justify-content: center; }
.mu-filter-swatch {
  width: 16px; height: 16px; border-radius: 50%; flex: none; padding: 0; cursor: pointer;
  border: 2px solid transparent; background: linear-gradient(135deg, #8ab4f8, #34a853);
}
.mu-filter-swatch.mu-filter-none { background: linear-gradient(135deg, #ddd, #fff); }
.mu-filter-swatch.mu-filter-vivid { background: linear-gradient(135deg, #ff5252, #ffb300); }
.mu-filter-swatch.mu-filter-soft { background: linear-gradient(135deg, #f8bbd0, #e0e0e0); }
.mu-filter-swatch.mu-filter-bw { background: linear-gradient(135deg, #444, #ccc); }
.mu-filter-swatch.mu-filter-warm { background: linear-gradient(135deg, #ff8a65, #ffca28); }
.mu-filter-swatch.mu-filter-cold { background: linear-gradient(135deg, #4fc3f7, #7986cb); }
.mu-filter-swatch.on { border-color: var(--keek); }
.mu-add { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px dashed var(--hair); border-radius: var(--r-md); color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mu-add:hover { border-color: var(--keek); color: var(--keek-deep); }
.mu-add svg { width: 17px; height: 17px; }
.mu-status { font-size: 12.5px; color: var(--coral); margin-top: 6px; min-height: 16px; }

/* Post detail + comments */
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.back-link:hover { color: var(--keek-deep); }
.back-link svg { width: 16px; height: 16px; transform: rotate(90deg); }
.section-title { font-family: var(--display); font-size: 18px; margin-bottom: 14px; }
/* Item — a pedido do Abel: os subtitulos da coluna lateral direita (Como o
   Freekeek funciona, Sua privacidade, Lugares que voce segue, Lugar
   publico, Quem segue aqui tambem segue) precisavam de fonte 50% menor.
   Escopado so pra .aside, pra nao afetar outros usos de .section-title
   no site (como "Populares agora" no Explorar). */
.aside .section-title { font-size: 12px; }
.muted-link { color: var(--muted); }
.muted-link:hover { color: var(--keek-deep); }

.comment-form { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.comment-form input[type="text"] { flex: 1; }
.comment-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.comment { display: flex; gap: 11px; }
.comment .comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.comment-head .name { font-weight: 700; font-size: 14.5px; color: var(--keek); }
.comment-head .meta { font-size: 12.5px; color: var(--muted); }
.comment-text { margin-top: 3px; font-size: 14.5px; line-height: 1.5; word-wrap: break-word; }
.comment-tools { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.comment-tools summary { font-size: 12.5px; color: var(--muted); cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.comment-tools summary svg { width: 14px; height: 14px; }
.comment-tools .inline-edit[open] summary { color: var(--keek-deep); }
.comment-tools textarea { width: 100%; }
.linklike { background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.linklike svg { width: 14px; height: 14px; }
.linklike.danger:hover { color: var(--coral); }

/* Classified card photo count badge */
.ad-photo { position: relative; }
.ad-count { position: absolute; right: 8px; bottom: 8px; background: rgba(20,18,31,.72); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 4px; }
.ad-count svg { width: 12px; height: 12px; }

/* Post owner menu reuse of report-pop popover (already styled) */
.report-pop > summary svg { width: 17px; height: 17px; }

/* ===================================================================== */
/* Lote 3 — maps, place selection panel, place icons                     */
/* ===================================================================== */
/* Google Places Autocomplete dropdown must float above the map/cards */
.pac-container { z-index: 2000; border-radius: 12px; border: 1px solid var(--hair); box-shadow: var(--shadow-md); font-family: var(--body); margin-top: 4px; }
.pac-item { padding: 8px 12px; font-size: 14px; }
.pac-item-query { font-size: 14px; }

/* Google place icon used in place cards / hero */
.place-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--keek-tint); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; }
.place-ico { overflow: hidden; } .place-ico img { width: 100%; height: 100%; object-fit: cover; }

/* Small static map on the place page */
.place-mini-map { display: block; width: 100%; border-radius: var(--r-md); border: 1px solid var(--hair); margin-top: 12px; }

@media (max-width: 560px) {
  .place-panel { flex-wrap: wrap; }
  .place-panel .pp-actions { width: 100%; }
}

/* ===================================================================== */
/* Clean theme polish (Google-style links + subtle surfaces)             */
/* ===================================================================== */
/* Links inside content read as classic blue links */
.post-body a, .comment-text a, .post-embeds a,
.info-page a, .aside-card a { color: var(--keek); }
.post-body a:hover, .comment-text a:hover, .info-page a:hover { text-decoration: underline; }
.muted-link, .post-body a.muted-link { color: var(--muted); }
.muted-link:hover { color: var(--keek); text-decoration: none; }

/* Cards: hairline border, very soft shadow (Material-like) */
.card { box-shadow: var(--shadow-sm); }

/* Avatars keep a friendly tint with the new accent */
.avatar { background: var(--keek-tint); color: var(--keek-deep); }

/* Explore map fallback note */
.map-note { display: flex; align-items: center; gap: 8px; margin: 0 14px 10px; padding: 10px 12px; background: #fef7e0; border: 1px solid #fde293; border-radius: var(--r-md); color: #7a5b00; font-size: 13px; }
.map-note svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* New Google PlaceAutocompleteElement host */
.ac-host { width: 100%; }
.ac-host gmp-place-autocomplete { width: 100%; display: block; }
gmp-place-autocomplete { --gmp-place-autocomplete-input-border-radius: 8px; }

/* ===================================================================== */
/* Lote 4 — business pages (hotels, restaurants, businesses) + menu      */
/* ===================================================================== */
.biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.biz-card { display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.biz-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.biz-cover { aspect-ratio: 16 / 10; background: var(--keek-tint); overflow: hidden; }
.biz-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.biz-cover.placeholder { display: flex; align-items: center; justify-content: center; color: var(--keek); }
.biz-cover.placeholder svg { width: 40px; height: 40px; opacity: .55; }
.biz-body { padding: 13px 15px 15px; }
.biz-name { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); }
.biz-tag { font-size: 13px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-meta { font-size: 12.5px; color: var(--muted-soft); margin-top: 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.biz-meta svg { width: 13px; height: 13px; }

/* Menu */
.menu-section + .menu-section { margin-top: 18px; }
.menu-section-title { font-family: var(--display); font-size: 15px; color: var(--ink); margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.menu-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f1f3f4; }
.menu-row:last-child { border-bottom: none; }
.menu-row-main { flex: 1; min-width: 0; }
.menu-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.menu-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }
.menu-price { font-weight: 700; font-size: 14.5px; color: var(--keek-deep); white-space: nowrap; }
.menu-add { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }

/* ===================================================================== */
/* Lote 4 (maps fix) — autocomplete element host + map note              */
/* ===================================================================== */
.ac-host { display: block; width: 100%; margin-bottom: 12px; }
/* The new Places Autocomplete web component fills the host and matches our UI */
.ac-host gmp-place-autocomplete,
.ac-host gmpx-place-autocomplete { width: 100%; }
.ac-host gmp-place-autocomplete::part(input),
.ac-host input {
  width: 100%; height: 46px; border: 1px solid var(--hair); border-radius: var(--r-md);
  padding: 0 14px; font-size: 15px; font-family: var(--body); color: var(--ink); background: var(--surface);
}
.ac-host gmp-place-autocomplete::part(input):focus,
.ac-host input:focus { outline: none; border-color: var(--keek); box-shadow: 0 0 0 3px var(--keek-tint); }

.map-note {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 16px 12px; padding: 10px 12px;
  background: #fef7e0; border: 1px solid #feefc3; border-radius: var(--r-md);
  font-size: 13px; color: #5f6368; line-height: 1.45;
}
.map-note svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; color: #b06000; }

/* ===================================================================== */
/* Lote 5 — mentions, language footer, profile cover + tabs + people     */
/* ===================================================================== */

/* @mentions / #place links inside content */
a.mention, a.hashtag { color: var(--keek); font-weight: 600; text-decoration: none; }
a.mention:hover, a.hashtag:hover { text-decoration: underline; }

/* Mention autocomplete dropdown */
.mention-wrap { position: relative; }
.mention-menu { position: absolute; left: 0; top: 100%; z-index: 1500; margin-top: 4px;
  min-width: 240px; max-width: 340px; max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.mention-opt { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 14px; }
.mention-opt.on, .mention-opt:hover { background: var(--keek-tint); }
.mention-opt .mo-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 26px; }
.mention-opt .mo-av.ph { display: inline-flex; align-items: center; justify-content: center; background: var(--keek); color: #fff; font-size: 12px; font-weight: 700; }
.mention-opt .mo-name { font-weight: 600; color: var(--ink); }
.mention-opt .mo-sub { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Language footer */
.site-footer { border-top: 1px solid var(--hair); background: var(--surface); padding: 16px 20px; margin-top: 8px; }
.foot-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot-brand { font-family: var(--wordmark); font-weight: 700; color: var(--ink); }
.foot-brand .k { color: inherit; }
.foot-tag { color: var(--muted); font-size: 13px; }
.foot-nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot-nav a { color: var(--muted); font-size: 13px; text-decoration: none; }
.foot-nav a:hover { color: var(--keek); text-decoration: underline; }

@media (max-width: 720px) {
  /* Item — a pedido do Abel: o rodape ficava embaixo da barra fixa de
     navegacao do celular, cortando o seletor de idioma e deixando ele
     impossivel de clicar. Reserva espaco de verdade agora (colocado logo
     apos a regra base do rodape, pra garantir que vence na cascata). */
  .site-footer { padding-bottom: 86px; }
  .foot-inner { justify-content: center; text-align: center; }
}
.foot-langs { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.lang-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.lang-picker-opt {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--surface);
  color: var(--ink); font-weight: 500; font-size: 14px; text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
.lang-picker-opt .flag { font-size: 18px; }
.lang-picker-opt svg { width: 15px; height: 15px; color: var(--keek); margin-left: 2px; }
.lang-picker-opt:hover { background: var(--rail-active); }
.lang-picker-opt.on { background: var(--keek-tint); border-color: var(--keek); color: var(--keek-deep); font-weight: 700; }
.foot-lang { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--hair); font-size: 12.5px; color: var(--muted); }
.foot-lang .flag { font-size: 14px; }
.foot-lang:hover { background: var(--rail-active); color: var(--ink); }
.foot-lang.on { background: var(--keek-tint); border-color: var(--keek); color: var(--keek-deep); font-weight: 600; }

/* Profile cover + header */
.profile-card { overflow: hidden; }
.cover { height: 180px; background: linear-gradient(120deg, var(--keek), #8ab4f8 70%, var(--green));
  background-size: cover; background-position: center; position: relative; }
.cover.has-img { background-color: var(--keek-tint); }
.cover-tools { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.cover-btn { background: rgba(255,255,255,.92); backdrop-filter: blur(2px); }
.prof-avatar { border: 4px solid var(--surface); box-shadow: var(--shadow-sm); background: var(--keek); }
.avatar.xl { width: 104px; height: 104px; font-size: 40px; flex: 0 0 104px; }
a.stat { text-decoration: none; }

/* Profile tabs */
.ptabs { display: flex; gap: 4px; border-top: 1px solid var(--hair); padding: 4px 10px 0; overflow-x: auto; scrollbar-width: none; }
.ptabs::-webkit-scrollbar { display: none; }
.ptab { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 12px 13px; font-size: 14px; font-weight: 500; position: relative;
  color: var(--muted); border-bottom: 3px solid transparent; }
/* Item — o mesmo bug de antes: um <button> nativo (usado no Dashboard Admin)
   tem fundo/borda/padding próprios do navegador que um <a> (usado no perfil
   de usuário) nunca precisou resetar. Sem isso, as abas do admin ficavam com
   caixinhas cinzas com borda, bem diferente do visual limpo do perfil. */
button.ptab { background: none; border: none; border-bottom: 3px solid transparent; border-radius: 0; cursor: pointer; font-family: inherit; }
.ptab svg { width: 18px; height: 18px; }
.ptab:hover { color: var(--ink); background: var(--hover-bg, #f3f5f7); }
.ptab.on { color: var(--keek); border-bottom-color: var(--keek); }

/* People grid */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.person-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; transition: box-shadow .15s ease; }
.person-card:hover { box-shadow: var(--shadow-md); }
.person-meta { min-width: 0; display: flex; flex-direction: column; }
.person-meta strong { color: var(--ink); font-family: var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-meta small { color: var(--muted); }

/* Mentions list */
.mention-row { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--hair); text-decoration: none; }
.mention-row:last-child { border-bottom: none; }
.mention-row:hover { background: var(--keek-tint); }
.mr-body { min-width: 0; }
.mr-head strong { color: var(--ink); } .mr-head small { color: var(--muted); }
.mr-text { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.mr-text svg { width: 14px; height: 14px; vertical-align: -2px; }

@media (max-width: 560px) {
  .foot-nav { gap: 12px; }
  .foot-langs { margin-left: 0; width: 100%; }
  .foot-lang .lab { display: none; }
  .prof-avatar { margin-top: -32px; }
}

/* ===================================================================== */
/* Lote 5 parte 2 — stories bar + viewer, verify page, anti-bot          */
/* ===================================================================== */

/* Honeypot — visually hidden but present for bots */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Warn banner + inline link button */
.alert-warn { background: #fef7e0; border: 1px solid #feefc3; color: #5f4300; display: flex; align-items: center; gap: 8px; }
.alert-warn svg { width: 16px; height: 16px; }
.linkish { background: none; border: none; color: var(--keek-deep); font: inherit; font-weight: 600; cursor: pointer; padding: 0 2px; text-decoration: underline; }

/* Stories bar */
.stories-bar { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; margin-bottom: 8px; scrollbar-width: thin; }
.stories-bar::-webkit-scrollbar { height: 6px; }
.story-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; flex: 0 0 auto; width: 70px; }
.story-ring { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; position: relative; }
.story-ring.unseen { background: conic-gradient(from 210deg, var(--keek), #8ab4f8, var(--green), var(--keek)); padding: 3px; }

/* Item — versão discreta do ícone de story, pra caber ao lado do título
   "Publicações" no perfil, sem competir visualmente com os botões
   principais do cabeçalho (onde estava antes e ficou estranho). */
.story-cell-mini { background: none; border: none; cursor: pointer; padding: 0; flex: none; }
.story-ring-mini { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; }
.story-ring-mini.unseen { background: conic-gradient(from 210deg, var(--keek), #8ab4f8, var(--green), var(--keek)); padding: 2px; }
.story-ring-mini .avatar.sm { width: 24px; height: 24px; border: 2px solid var(--surface); font-size: 11px; }
.story-ring.seen { background: var(--hair); padding: 3px; }
.story-ring.add { background: var(--hair); padding: 3px; }
.story-ring .avatar.sm { width: 58px; height: 58px; border: 2px solid var(--surface); font-size: 20px; }
.story-ring .add-badge { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--keek); color: #fff; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.story-ring .add-badge svg { width: 12px; height: 12px; }
.story-name { font-size: 12px; color: var(--muted); max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-add { flex: 0 0 auto; margin: 0; }

/* Full-screen story viewer */
.story-viewer { position: fixed; inset: 0; z-index: 4000; background: rgba(20,20,22,.92); display: flex; align-items: center; justify-content: center; }
.story-viewer[hidden] { display: none; }
.sv-stage { position: relative; width: min(440px, 96vw); height: min(86vh, 820px); background: #000; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sv-media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.sv-media img, .sv-media video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.sv-bars { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; z-index: 3; }
.sv-bar { flex: 1; height: 3px; background: rgba(255,255,255,.32); border-radius: 3px; overflow: hidden; }
.sv-bar.done i { width: 100% !important; }
.sv-bar i { display: block; height: 100%; width: 0; background: #fff; }
.sv-head { position: absolute; top: 18px; left: 12px; right: 48px; display: flex; align-items: center; gap: 8px; color: #fff; z-index: 3; }
.sv-av img, .sv-av .ph { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--keek); color: #fff; font-weight: 700; font-size: 13px; }
.sv-who { font-weight: 600; font-size: 14px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.sv-close { position: absolute; top: 12px; right: 12px; z-index: 4; background: rgba(0,0,0,.35); color: #fff; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; }
.sv-delete { position: absolute; top: 12px; right: 54px; z-index: 4; background: rgba(0,0,0,.35); color: #fff; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; }
.sv-delete:hover { background: var(--coral, #e64c4c); }

/* Item — composer de story em 2 etapas (estilo Instagram): pré-visualização
   + legenda + lugar opcional, antes de publicar de verdade. */
.story-composer { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; padding: 20px; }
.story-composer-inner { background: var(--surface); border-radius: 16px; padding: 20px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.story-composer-close { position: absolute; top: 10px; right: 10px; background: var(--paper); border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.story-composer-preview { width: 100%; max-height: 340px; border-radius: 12px; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }
.story-composer-preview img, .story-composer-preview video { width: 100%; max-height: 340px; object-fit: contain; }
.story-composer-caption { border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; }
.story-composer-place { border: 1px solid var(--hair); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--ink); }
.sv-place-tag { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.92); color: var(--ink); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; text-decoration: none; z-index: 4; box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* Item — Fase 1 de filtros de foto/vídeo (estilo Instagram), aplicados só
   via CSS — sem processar o arquivo original, funciona igual em foto e
   vídeo, em qualquer navegador. */
.mf-vivid { filter: saturate(1.35) contrast(1.08); }
.mf-soft  { filter: saturate(0.85) contrast(0.95) brightness(1.05); }
.mf-bw    { filter: grayscale(1) contrast(1.1); }
.mf-warm  { filter: sepia(0.25) saturate(1.15) hue-rotate(-6deg); }
.mf-cold  { filter: saturate(1.05) hue-rotate(8deg) brightness(1.02) contrast(1.05); }
.sv-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 16px 20px; color: #fff; font-size: 14px; background: linear-gradient(transparent, rgba(0,0,0,.6)); z-index: 3; }
.sv-nav { position: absolute; top: 0; bottom: 0; width: 38%; background: none; border: none; cursor: pointer; z-index: 2; }
.sv-nav.prev { left: 0; } .sv-nav.next { right: 0; }

/* Verify page dev link box */
.dev-link { border: 1px dashed var(--keek); background: var(--keek-tint); border-radius: var(--r-md); padding: 14px; margin: 14px 0; }
.dev-tag { font-size: 12.5px; font-weight: 600; color: var(--keek-deep); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.dev-tag svg { width: 14px; height: 14px; }
.dev-url { display: block; margin-top: 10px; font-size: 11px; color: var(--muted); word-break: break-all; }
.resend { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }

@media (max-width: 560px) { .sv-stage { width: 100vw; height: 100vh; border-radius: 0; } }

/* ===================================================================== */
/* Notifications + Search (web)                                          */
/* ===================================================================== */
/* Nav unread badge */
.nav-link { position: relative; }
.nav-badge { position: absolute; top: 7px; left: 26px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--coral); color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; }

/* Notifications list */
.notif-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--hair); text-decoration: none; }
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--keek-tint); }
.notif-row.unread { background: #f1f6ff; }
.notif-row.unread:hover { background: var(--keek-tint); }
.notif-ic { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; }
.notif-ic svg { width: 16px; height: 16px; }
.notif-ic.kind-like { background: #fde7ea; color: var(--coral); }
.notif-ic.kind-comment { background: var(--keek-tint); color: var(--keek-deep); }
.notif-ic.kind-mention { background: #e6f4ea; color: var(--green); }
.notif-body { min-width: 0; display: flex; flex-direction: column; }
.notif-text { color: var(--ink); font-size: 14px; }
.notif-sub { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Search */
.search-form { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r-md); padding: 6px 8px 6px 12px; margin-bottom: 20px; }
.search-form .search-ico { color: var(--muted); display: inline-flex; }
.search-form .search-ico svg { width: 18px; height: 18px; }
.search-form input { border: none; flex: 1; background: none; padding: 8px 4px; font-size: 15px; }
.search-form input:focus { outline: none; box-shadow: none; }
.search-post { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--hair); text-decoration: none; }
.search-post:last-child { border-bottom: none; }
.search-post:hover { background: var(--keek-tint); }
.sp-body { min-width: 0; display: flex; flex-direction: column; }
.sp-head small { color: var(--muted); }
.sp-head strong { color: var(--ink); }
.sp-text { color: var(--ink); font-size: 14px; margin-top: 2px; }

/* ===================================================================== */
/* Explore — elegant search above the map, place panel, info window      */
/* ===================================================================== */
.map-card { overflow: hidden; margin-bottom: 22px; }

/* Search field sits above the map (like the first version) */
.map-search { padding: 16px 16px 12px; }
.ac-host { width: 100%; max-width: 560px; }
.ac-host gmp-place-autocomplete {
  width: 100%;
  --gmp-place-autocomplete-input-border-radius: var(--r-pill);
}
/* graceful styling hook even before the component upgrades */
.ac-host:empty::before {
  content: "";
  display: block;
  height: 46px;
  border-radius: var(--r-pill);
  background: var(--keek-tint);
}

.explore-map { height: 360px; width: 100%; background: var(--keek-tint); }

/* Selection panel */
.place-panel { border-top: 1px solid var(--hair); background: var(--surface); }
.pp-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.pp-ico { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--keek-tint); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; }
.pp-icon-img { width: 100%; height: 100%; object-fit: cover; }
.pp-glyph { display: inline-flex; align-items: center; justify-content: center; color: var(--keek-deep); }
.pp-glyph svg { width: 22px; height: 22px; }
.place-panel .pp-body { flex: 1; min-width: 0; }
.place-panel .pp-name { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-panel .pp-addr { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-panel .pp-type { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: #137333; background: var(--green-tint); padding: 1px 8px; border-radius: var(--r-pill); }
.place-panel .pp-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }

/* Item — card de confirmar/criar um lugar novo, dentro do mesmo .place-panel */
.pp-confirm { padding: 16px; }
.pp-confirm-head { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ink); }
.pp-confirm-head svg { width: 18px; height: 18px; color: #EA4335; flex: none; }
.pp-confirm-name { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); margin-bottom: 6px; }


/* Google InfoWindow content */
.gm-iw { padding: 2px 4px; max-width: 220px; }
.gm-iw-title { font-weight: 700; font-size: 14px; color: #202124; }
.gm-iw-addr { font-size: 12.5px; color: #5f6368; margin-top: 2px; }

@media (max-width: 560px) {
  .place-panel { flex-wrap: wrap; }
  .place-panel .pp-actions { width: 100%; justify-content: flex-start; }
  .ac-host { max-width: none; }
}

/* ===================================================================== */
/* Interests — the place "teia" (groups by category)                     */
/* ===================================================================== */
.ic-emoji { font-size: 1.05em; line-height: 1; }
.ic-count { display: inline-block; min-width: 20px; padding: 0 6px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; font-weight: 700; color: var(--keek-deep); background: var(--keek-tint); border-radius: var(--r-pill); vertical-align: middle; }

.interest-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.interest-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--hair); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600; transition: background .15s ease, border-color .15s ease; }
.interest-chip:hover { background: var(--keek-tint); border-color: #cfe0fb; }
.interest-chip .ic-count { background: transparent; color: var(--muted); min-width: 0; padding: 0; }

.interest-section { margin-bottom: 26px; }
.interest-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.interest-head h2 { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; display: flex; align-items: center; gap: 8px; }
.interest-head .see-all { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--keek); white-space: nowrap; }
.see-all:hover { text-decoration: underline; }

/* Teaser strip on Explore */
.interest-teaser { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 22px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface), var(--keek-tint)); transition: box-shadow .15s ease, border-color .15s ease; }
.interest-teaser:hover { box-shadow: var(--shadow-sm); border-color: #cfe0fb; }
.it-emoji { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.it-text { display: flex; flex-direction: column; min-width: 0; }
.it-text b { font-size: 15px; color: var(--ink); }
.it-text span { font-size: 13px; color: var(--muted); }
.it-go { margin-left: auto; font-size: 22px; color: var(--keek); flex: 0 0 auto; }

/* Explore search — float the box above the map */
.map-search .ac-input-row input { box-shadow: 0 1px 2px rgba(60,64,67,.12); }
.map-search .ac-input-row input:focus { box-shadow: 0 0 0 3px var(--keek-tint); }

/* ===================================================================== */
/* Heatmap by neighborhood (teia overview)                               */
/* ===================================================================== */
.heat-section { margin-top: 6px; }
.heat-legend { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; flex-wrap: wrap; }
.heat-scale { display: inline-flex; gap: 3px; }
.heat-scale i { width: 16px; height: 10px; border-radius: 2px; display: inline-block; border: 1px solid rgba(0,0,0,.05); }
.heat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.heat-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--hair); color: var(--ink); transition: transform .1s ease, box-shadow .15s ease; }
.heat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.heat-name { font-family: var(--display); font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; }
.heat-stat { font-size: 12px; color: var(--muted); }
/* cool -> hot ramp (shared by tiles and legend swatches) */
.hb0 { background: #e8f0fe; }
.hb1 { background: #d6f3ea; }
.hb2 { background: #fff3c4; }
.hb3 { background: #ffd9a0; }
.hb4 { background: #ffc9bf; }
.heat-tile.hb3 .heat-stat, .heat-tile.hb4 .heat-stat { color: #8a4b2a; }

/* Heat toggle (Bairros | Mapa) + geographic map frame */
.heat-toggle { margin-left: auto; display: inline-flex; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-pill); padding: 3px; }
.heat-tab { border: none; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 14px; border-radius: var(--r-pill); cursor: pointer; }
.heat-tab.on { background: var(--ink); color: #fff; }
.heat-mapwrap { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hair); }
.heat-mapwrap iframe { width: 100%; height: 440px; border: 0; display: block; background: var(--keek-tint); }

/* Heat map layout: map + Top-5 hottest neighborhoods */
.heat-map-layout { display: flex; flex-direction: column; gap: 14px; }
.heat-map-layout .heat-mapwrap { width: 100%; }
.heat-top { width: 100%; border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--surface); padding: 14px 16px; }
.heat-top h3 { font-family: var(--display); font-size: 14.5px; font-weight: 700; margin: 0 0 10px; color: var(--ink); }
.heat-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.htl-item { flex: 1 1 150px; min-width: 140px; display: flex; align-items: center; gap: 10px; background: var(--bg, var(--keek-tint)); border: 1px solid var(--hair); border-radius: 10px; padding: 9px 11px; }
.htl-rank { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--keek-tint); color: var(--keek-deep); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.htl-dot { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.06); }
.htl-body { min-width: 0; display: flex; flex-direction: column; }
.htl-name { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.htl-name:hover { color: var(--keek); text-decoration: underline; }
.htl-stat { font-size: 11.5px; color: var(--muted); }
@media (max-width: 720px) {
  .heat-map-layout { flex-direction: column; }
  .heat-top { flex-basis: auto; }
}

/* Heat map bar (fullscreen toggle) + fullscreen iframe fill */
.heat-map-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.heat-map-bar .heat-legend { flex: 1 1 auto; }
.heat-map-bar #heat-fs { flex: 0 0 auto; white-space: nowrap; }
.heat-mapwrap:fullscreen { border-radius: 0; border: 0; }
.heat-mapwrap:-webkit-full-screen { border-radius: 0; border: 0; }
.heat-mapwrap:fullscreen iframe { height: 100vh; }
.heat-mapwrap:-webkit-full-screen iframe { height: 100vh; }

/* ===================================================================== */
/* Profile: avatar controls, details, album, settings                    */
/* ===================================================================== */
.avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--keek); color: #fff; display: grid; place-items: center; cursor: pointer; border: 2px solid var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.avatar-cam svg { width: 16px; height: 16px; }
.prof-details { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.pd { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--muted); }
.pd-ic { font-size: 14px; }
a.pd-link { color: var(--keek); font-weight: 600; }
a.pd-link svg { width: 15px; height: 15px; }
.ptab-n { display: inline-block; min-width: 18px; padding: 0 5px; height: 18px; line-height: 18px; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--keek-tint); border-radius: var(--r-pill); }

/* Album */
.album-add { margin-bottom: 14px; }
.album-add-row { display: flex; align-items: center; gap: 12px; }
.album-counter { font-size: 13px; color: var(--muted); font-weight: 600; }
.btn.is-disabled { opacity: .5; pointer-events: none; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.album-cell { position: relative; margin: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hair); background: var(--surface); aspect-ratio: 1 / 1; }
.album-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-cell figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: 11.5px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.album-del { position: absolute; top: 6px; right: 6px; margin: 0; }
.album-del-btn { width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; cursor: pointer; display: grid; place-items: center; }
.album-del-btn:hover { background: rgba(214,40,40,.9); }

/* Settings: photo blocks + form rows */
.set-photos { display: flex; flex-wrap: wrap; gap: 22px; }
.set-photo-block { display: flex; align-items: center; gap: 14px; }
.set-cover { width: 160px; height: 84px; border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--keek-tint) center/cover no-repeat; }
.set-photo-label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.set-photo-label svg { width: 16px; height: 16px; }
.set-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.form-row { display: flex; flex-wrap: wrap; gap: 14px; }
.form-actions { display: flex; gap: 10px; margin-top: 6px; }

/* Album: drag reorder + editable captions */
.album-cell[draggable=true] { cursor: grab; }
.album-cell.dragging { opacity: .4; }
.album-drag { position: absolute; top: 6px; left: 6px; z-index: 2; color: #fff; background: rgba(0,0,0,.45); border-radius: 6px; padding: 0 5px; font-size: 13px; line-height: 20px; cursor: grab; }
.album-cap-form { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.album-cap-input.album-cap-input { width: 100%; border: 0; border-radius: 0; padding: 7px 9px; font-size: 11.5px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.album-cap-input::placeholder { color: rgba(255,255,255,.7); }
.album-cap-input:focus { outline: none; box-shadow: none; background: rgba(0,0,0,.72); }
.album-cap-input.saved { box-shadow: inset 0 0 0 2px var(--green); }
.album-hint { font-size: 12.5px; color: var(--muted); margin: 12px 2px 0; display: flex; align-items: center; gap: 6px; }
.album-hint svg { width: 15px; height: 15px; }

/* Album lightbox (fullscreen photo viewer) */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; }
.lb-img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 6px; }
.lb-cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; padding: 0 16px; }
.lb-close { position: absolute; top: 14px; right: 16px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 18px; cursor: pointer; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.28); }
@media (max-width: 560px) { .lb-nav { width: 40px; height: 40px; font-size: 22px; } }

/* ---- Top 5 clickable: center that neighborhood on the heat map ---- */
.htl-item.htl-clickable { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.htl-item.htl-clickable:hover { border-color: var(--keek); background: var(--keek-tint); }
.htl-item.htl-clickable:focus-visible { outline: 2px solid var(--keek); outline-offset: 2px; }

/* ---- Sticky place panel in Explore (pins below the search while scrolling) ----
   Requires the card to not clip overflow; the map rounds its own bottom corners. */
.map-card { overflow: visible; }
.explore-map { border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); overflow: hidden; }
.place-panel { position: sticky; top: 8px; z-index: 6; box-shadow: 0 6px 16px rgba(0,0,0,.06); }

/* ---- Post composer (feed): elegant, standardized controls ---- */
.composer-top { display: flex; gap: 12px; align-items: flex-start; }
.composer-text { flex: 1; width: 100%; box-sizing: border-box; min-width: 0; border: none; padding: 2px 0; min-height: 96px; max-height: 240px; overflow-y: auto; font-size: 16px; line-height: 1.5; resize: none; background: transparent; color: var(--ink); font-family: var(--body); }
/* mentions.js wraps the textarea in .mention-wrap; that wrapper must also grow so
   the field spans the full row (otherwise it shrinks to content, leaving a right gap). */
.composer-top .mention-wrap { flex: 1; min-width: 0; }
.composer-text:focus { outline: none; }
.composer-text::placeholder { color: var(--muted-soft); }

.composer .mu-previews:not(:empty) { margin-top: 12px; }

/* Place picker on its own full-width line (name fully readable) */
.composer-place { display: block; margin-top: 10px; }
.composer-place .placepick-btn { display: flex; width: 100%; max-width: none; padding: 11px 14px; }
.composer-place .placepick-label { flex: 1; text-align: left; }
.composer-place .placepick-btn > svg:first-child { flex: 0 0 16px; }

/* Action bar: media icon + privacy (left), Post (right) — all 40px tall */
.composer-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.composer-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--surface); color: var(--muted); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.composer-icon-btn:hover { border-color: var(--keek); color: var(--keek-deep); background: var(--keek-tint); }
.composer-icon-btn svg { width: 20px; height: 20px; }

.composer-privacy-wrap { position: relative; display: inline-flex; align-items: center; }
.composer-privacy { appearance: none; -webkit-appearance: none; height: 40px; border: 1px solid var(--hair); border-radius: var(--r-md); padding: 0 34px 0 13px; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); background: var(--surface); cursor: pointer; }
.composer-privacy:hover { border-color: var(--keek); }
.composer-privacy:focus { outline: none; border-color: var(--keek); box-shadow: 0 0 0 3px var(--keek-tint); }
.composer-privacy-wrap > svg { position: absolute; right: 11px; width: 16px; height: 16px; color: var(--muted-soft); pointer-events: none; }

.composer-post { height: 40px; padding: 0 22px; font-weight: 600; }

@media (max-width: 520px) {
  .composer-bar { gap: 8px; }
  .composer-privacy { padding: 0 30px 0 11px; }
  .composer-post { padding: 0 16px; }
}

/* ---- Composer polish: standardized controls, focus highlight, presence ---- */
#compose { transition: border-color .18s ease, box-shadow .18s ease; }
#compose:focus-within { border-color: var(--keek); box-shadow: var(--shadow-sm), 0 0 0 3px var(--keek-tint); }
/* dropdown caret should point down, not right */
.composer-privacy-wrap > svg { transform: rotate(90deg); }
.composer-top .avatar { width: 40px; height: 40px; font-size: 15px; flex: 0 0 40px; }
/* privacy select sized to the same proportion as the + Post button */
.composer-privacy { min-width: 120px; font-weight: 600; }
.composer-place .placepick-btn { border-radius: var(--r-md); }
/* Dropdown (search + list) spans the full field width — looks cleaner than a fixed 280px box */
.composer-place .placepick-panel, .cx-target.placepick .placepick-panel {
  width: calc(100% + 56px); max-width: none; left: -56px; right: auto;
}

/* ---- Composer: character counter + mentions/links preview ---- */
.composer-count { font-size: 12px; font-weight: 600; color: var(--muted-soft); font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.composer-count.near { color: #b8860b; }
.composer-count.over { color: var(--coral); }
.composer-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.composer-preview::before { content: "Será vinculado:"; font-size: 11px; font-weight: 600; color: var(--muted-soft); text-transform: uppercase; letter-spacing: .4px; margin-right: 2px; }
.cp-chip { font-size: 12px; line-height: 1; padding: 5px 10px; border-radius: 999px; font-weight: 600; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-mention { background: var(--keek-tint); color: var(--keek-deep); }
.cp-place { background: rgba(16,150,80,.12); color: #0b7a3b; }
.cp-link { background: var(--rail-active); color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Composer: meta group (counter + info tooltip) ---- */
.composer-meta { margin-right: auto; display: flex; align-items: center; gap: 7px; }
.composer-hint { position: relative; display: inline-flex; align-items: center; color: var(--muted-soft); cursor: help; }
.composer-hint svg { width: 16px; height: 16px; }
.composer-hint:hover, .composer-hint:focus-visible { color: var(--keek); outline: none; }
.composer-hint-tip { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 40; width: 260px; padding: 10px 12px;
  background: var(--ink); color: #fff; font-size: 12px; line-height: 1.45; font-weight: 500; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease, visibility .14s; pointer-events: none; }
.composer-hint-tip b { color: #fff; font-weight: 700; }
.composer-hint-tip::after { content: ""; position: absolute; left: 14px; top: 100%; border: 6px solid transparent; border-top-color: var(--ink); }
.composer-hint:hover .composer-hint-tip, .composer-hint:focus-visible .composer-hint-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* Link chip in the "will be linked" preview shows as a real link (blue) */
.cp-link { background: rgba(37,99,235,.10); color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Place picker options: name + address subline + followers · type ---- */
.placepick-opt .po-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.placepick-opt .po-name { flex: none; }
.placepick-opt .po-addr { font-size: 11px; color: var(--muted-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placepick-opt .po-side { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.placepick-opt .po-followers { font-size: 11px; font-weight: 600; color: var(--keek-deep); background: var(--keek-tint); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }

/* ---- Composer link card (WhatsApp-style unfurl) ---- */
.composer-linkcard { display: flex; align-items: stretch; gap: 0; margin-top: 10px; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--surface); position: relative; }
.composer-linkcard.loading { padding: 12px 14px; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.clc-img { width: 92px; min-width: 92px; object-fit: cover; background: var(--keek-tint); }
.clc-body { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.clc-site { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--muted-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clc-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clc-desc { font-size: 12px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clc-close { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0,0,0,.42); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.clc-close:hover { background: rgba(0,0,0,.6); }
.clc-spin { width: 15px; height: 15px; border: 2px solid var(--hair); border-top-color: var(--keek); border-radius: 50%; animation: clc-spin .7s linear infinite; }
@keyframes clc-spin { to { transform: rotate(360deg); } }

/* ---- Embedded link card in published posts (WhatsApp-style) ---- */
.post-linkcard { display: flex; align-items: stretch; margin: 6px 0 2px; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--surface); text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.post-linkcard:hover { border-color: var(--keek); background: var(--keek-tint); }
.post-linkcard .plc-img { width: 108px; min-width: 108px; object-fit: cover; background: var(--keek-tint); }
.post-linkcard .plc-body { flex: 1; min-width: 0; padding: 10px 13px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.post-linkcard .plc-site { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--muted-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-linkcard .plc-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-linkcard .plc-desc { font-size: 12.5px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) { .post-linkcard .plc-img { width: 84px; min-width: 84px; } }

/* ===================== Classificados — categorias, badges, portal de vagas ===================== */
/* Badges de categoria + intenção (discreto: ícone + texto) */
.ad-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.chip.cat-chip { background: #f1f3f4; color: var(--ink-soft); border: none; }
.chip.cat-chip svg { color: var(--muted); }
.muted-price { font-weight: 600; color: var(--muted); font-size: .78em; }
.ad-place { color: var(--keek-deep); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.ad-place svg { width: 13px; height: 13px; }

/* Tons do placeholder por categoria (sem foto) */
.ad-photo.placeholder.cat-vehicle     { background: #e8f0fe; color: #1a73e8; }
.ad-photo.placeholder.cat-real_estate { background: #e6f4ea; color: #1e8e3e; }
.ad-photo.placeholder.cat-product     { background: #fef7e0; color: #b06000; }
.ad-photo.placeholder.cat-service     { background: #f3e8fd; color: #8430ce; }
.ad-photo.placeholder.cat-job         { background: #e4f7f9; color: #017c8c; }

/* Banner de escopo por lugar */
.place-scope { display: flex; align-items: center; gap: 8px; background: var(--keek-tint); border: 1px solid #d2e3fc; border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 16px; font-size: 14px; color: var(--ink-soft); flex-wrap: wrap; }
.place-scope svg { width: 16px; height: 16px; color: var(--keek); }
.place-scope b { color: var(--ink); }
.place-scope .scope-clear { margin-left: auto; color: var(--keek); font-weight: 600; font-size: 13px; }

/* Filtro de categorias: pills que quebram linha (mais elegante que a barra única) */
.seg.seg-cats { flex-wrap: wrap; gap: 6px; background: transparent; border: 0; padding: 0; }
.seg-cats a { border: 1px solid var(--hair); background: var(--surface); display: inline-flex; align-items: center; gap: 5px; }
.seg-cats a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.seg-cats a svg { width: 15px; height: 15px; }
.seg a svg { width: 15px; height: 15px; }

.alert-coral { background: #fce8e6; color: #c5221f; border: 1px solid #f7c9c4; }

/* Detalhe do anúncio — grade de especificações */
.ad-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px 22px; margin: 18px 0; padding: 18px; background: #f8f9fa; border: 1px solid var(--hair); border-radius: var(--r-md); }

/* Vaga estilo portal — etiquetas + caixa "como se candidatar" */
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.jt { display: inline-flex; align-items: center; gap: 6px; background: #f1f3f4; color: var(--ink-soft); padding: 6px 12px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; }
.jt svg { width: 14px; height: 14px; color: var(--muted); }
.apply-box { margin: 18px 0; padding: 16px 18px; background: var(--keek-tint); border: 1px solid #d2e3fc; border-radius: var(--r-md); }
.apply-label { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--keek-deep); margin-bottom: 8px; }
.apply-label svg { width: 16px; height: 16px; }

/* Formulário de novo anúncio — linhas + fieldsets por categoria */
.fk-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.fk-row .field { flex: 1 1 160px; margin-bottom: 0; }
.fk-fieldset { border: 1px solid var(--hair); border-radius: var(--r-md); padding: 14px 16px 2px; margin: 4px 0 16px; }
.fk-fieldset > legend { font-weight: 700; font-size: 12px; color: var(--muted); padding: 0 6px; text-transform: uppercase; letter-spacing: .4px; }
.field-hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

/* Item 7 — Contas Kids no perfil */
.kids-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.kid-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 16px; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.kid-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kid-name { font-weight: 700; font-size: 15px; margin-top: 6px; }
.kid-user { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.kid-age { font-size: 12.5px; }

/* Item 2 — Convide amigos */
.invite-card { max-width: 560px; }
.invite-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--keek-tint); color: var(--keek-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.invite-icon svg { width: 26px; height: 26px; }
.invite-link-row { display: flex; gap: 8px; margin-bottom: 14px; }
.invite-link-row input { flex: 1; font-size: 13.5px; color: var(--muted); background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 10px 12px; }
.invite-share-row { margin-bottom: 4px; }
.btn-whatsapp { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); background: #25D366; color: #fff; font-weight: 700; font-size: 14px; border: none; text-decoration: none; }
.btn-whatsapp:hover { background: #1EBE57; }
.btn-whatsapp svg { width: 18px; height: 18px; }
.invite-sep { border: none; border-top: 1px solid var(--hair); margin: 24px 0; }
.invite-email-form { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-email-form input { flex: 1; min-width: 200px; }

/* Item 15 — modal de termos/privacidade no cadastro */
.legal-modal { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 24px; }
.legal-modal[hidden] { display: none; }
.legal-modal-backdrop { position: absolute; inset: 0; background: rgba(20,22,24,.55); backdrop-filter: blur(2px); }
.legal-modal-panel { position: relative; z-index: 1; background: #fff; border-radius: var(--r-lg, 16px); max-width: 640px; width: 100%; max-height: 82vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.legal-modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--rail-active); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.legal-modal-close svg { width: 16px; height: 16px; }
.legal-modal-close:hover { background: var(--hair); }
.legal-modal-body { overflow-y: auto; padding: 40px 32px 32px; }
.legal-modal-body .prose h1 { font-size: 22px; margin: 0 0 6px; }
.legal-modal-body .prose h2 { font-size: 16px; margin: 22px 0 6px; }
.legal-modal-body .prose p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 4px; }

/* Item 16/17 — documento principal: campo mascarado + botão "Ver" + aviso legal */
.doc-field { display: flex; gap: 8px; align-items: center; }
.doc-field input { flex: 1; letter-spacing: 1px; }
.doc-notice { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.doc-notice svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--keek-deep); }

/* ---- Salvar / favoritar ---- */
.save-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--hair); background: var(--surface); color: var(--muted); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.save-btn:hover { border-color: var(--keek); color: var(--keek); }
.save-btn svg { width: 15px; height: 15px; }
.save-btn.on { background: var(--keek-tint); border-color: var(--keek); color: var(--keek-deep); }
.save-btn.on svg { fill: currentColor; }
.save-btn.btn-block { width: 100%; justify-content: center; }

/* ---- Linha de checkbox (ex.: divulgar no feed) ---- */
.checkline { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.checkline input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--keek); }

/* ---- Contato rápido (WhatsApp) + sinais de confiança ---- */
.btn-wa { background: #25d366; color: #fff; border-color: #25d366; }
.btn-wa:hover { background: #1fb457; border-color: #1fb457; color: #fff; }
.btn-wa svg { width: 18px; height: 18px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.trust-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.trust-item svg { width: 14px; height: 14px; color: var(--green); }

/* ---- Busca de classificados ---- */
.cls-search { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; position: relative; }
.cls-search input[type="search"] { flex: 1; min-width: 0; padding: 10px 12px 10px 38px; border: 1px solid var(--hair); border-radius: var(--r-pill); background: var(--surface); font-size: 14px; }
.cls-search-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: inline-flex; }
.cls-search-ic svg { width: 17px; height: 17px; }
.cls-search-clear { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ---- Coleções ---- */
.collect-cell { position: relative; }
.collect-rm { position: absolute; top: 8px; right: 8px; z-index: 2; }
.collect-rm .save-btn { padding: 6px 8px; background: rgba(255,255,255,.92); }
.collect-pop { position: relative; }
.collect-pop > summary, .new-collection > summary { list-style: none; cursor: pointer; display: inline-flex; }
.collect-pop > summary::-webkit-details-marker, .new-collection > summary::-webkit-details-marker { display: none; }
.collect-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 264px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 12px; }
.collect-add { display: flex; gap: 6px; }
.collect-add select, .collect-add input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--hair); border-radius: var(--r-sm); font-size: 13.5px; background: var(--surface); }
.collect-or { text-align: center; color: var(--muted-soft); font-size: 12px; margin: 9px 0; }
.share-url { flex: 1; min-width: 120px; margin-left: auto; padding: 6px 10px; border: 1px solid var(--hair); border-radius: var(--r-sm); font-size: 12.5px; color: var(--muted); background: var(--surface); }
.nc-form { margin-top: 12px; max-width: 420px; }
.nc-form > input[name="title"] { width: 100%; padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r-md); font-size: 14px; }

/* ---- Help tooltip da privacidade (abre para a esquerda p/ não vazar) ---- */
.privacy-help { margin-left: 2px; }
.privacy-help .composer-hint-tip { left: auto; right: 0; width: 300px; }
.privacy-help .composer-hint-tip::after { left: auto; right: 14px; }
@media (max-width: 560px) { .privacy-help .composer-hint-tip { width: 240px; } }

/* ---- Compositor: toggle 'expira em 24h' + seletor de comentários ---- */
.composer-expires { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 12px; border: 1px solid var(--hair); border-radius: var(--r-md); font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
.composer-expires:hover { border-color: var(--keek); color: var(--keek); }
.composer-expires input { accent-color: var(--keek); width: 16px; height: 16px; }
.composer-expires svg { width: 15px; height: 15px; }
.composer-expires:has(input:checked) { background: var(--keek-tint); border-color: var(--keek); color: var(--keek-deep); }

/* ---- Amigos próximos ---- */
.cf-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 2px; }
.cf-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--r-md); }
.cf-row:hover { background: var(--keek-tint); }
.cf-name { flex: 1; min-width: 0; }
.cf-name a { color: var(--keek); text-decoration: none; }
/* Nome de usuário usado como link de acesso ao perfil (uso genérico) */
.user-link { color: var(--keek); text-decoration: none; }
.user-link:hover { text-decoration: underline; }
.cf-name .muted { margin-left: 6px; font-size: 13px; }
.settings-link:hover { background: var(--keek-tint); }

/* ============================ Landing page (deslogado) ============================ */
.landing-body { background: var(--surface); }
.btn-lg { height: 48px; padding: 0 26px; font-size: 15.5px; border-radius: var(--r-md); }

/* Top nav */
.lp-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 5vw, 48px); background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--hair); }
.lp-nav .brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; }
.lp-nav .brand .glyph { width: 30px; height: 30px; display: inline-flex; }
.lp-nav-actions { display: flex; align-items: center; gap: 8px; }

.lp { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 40px); }

/* Hero */
.lp-hero { padding: clamp(24px, 4.5vw, 52px) 0 clamp(36px, 6vw, 64px); text-align: center;
  background:
    radial-gradient(1000px 460px at 50% -8%, var(--keek-tint), transparent 70%),
    radial-gradient(680px 340px at 88% 12%, var(--green-tint), transparent 72%); }
.lp-hero-inner { max-width: 760px; margin: 0 auto; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--hair); color: #B3261E; font-weight: 700; font-size: 13px; margin-bottom: 22px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05)); }
.lp-eyebrow svg { width: 15px; height: 15px; }
.lp-eyebrow .ic-pin-fill { color: var(--coral); }
.lp-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 6.2vw, 60px); line-height: 1.05; letter-spacing: -.02em; color: var(--ink); margin: 0 0 20px; }
.lp-grad { background: linear-gradient(120deg, var(--keek), var(--green)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-sub { font-size: clamp(16px, 2.3vw, 20px); line-height: 1.5; color: var(--muted); max-width: 620px; margin: 0 auto 30px; }
.lp-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-note { margin-top: 16px; color: var(--muted-soft); font-size: 13px; }

/* Value props */
.lp-values { padding: clamp(28px, 5vw, 56px) 0; }
.lp-value { text-align: center; padding: 8px; }
.lp-ic { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 16px; margin-bottom: 14px; }
.lp-ic svg { width: 26px; height: 26px; }
.lp-ic-blue   { background: #e8f0fe; color: #1a73e8; }
.lp-ic-green  { background: #e6f4ea; color: #1e8e3e; }
.lp-ic-coral  { background: #fde8e6; color: #c5221f; }
.lp-ic-amber  { background: #fef7e0; color: #b06000; }
.lp-ic-indigo { background: #eef1fb; color: #3949ab; }
.lp-ic-teal   { background: #e0f2f1; color: #00695c; }
.lp-value h3 { font-family: var(--display); font-weight: 700; font-size: 19px; margin: 0 0 6px; color: var(--ink); }
.lp-value p { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 0; }

/* Places is the first and primary content on Freekeek — a wider, distinguished card
   above the grid of the other 6 areas (7 doesn't split evenly into rows of 3 or 4). */
.lp-value-featured {
  display: flex; align-items: center; gap: 22px; text-align: left; padding: 28px 32px;
  border-radius: 20px; background: linear-gradient(155deg, #e8f0fe, #f3f7ff);
  margin-bottom: 24px;
}
.lp-value-featured .lp-ic { width: 68px; height: 68px; border-radius: 20px; margin-bottom: 0; flex: none; background: #fff; }
.lp-value-featured .lp-ic svg { width: 32px; height: 32px; }
.lp-value-featured h3 { font-size: 23px; }
.lp-value-featured p { font-size: 15.5px; max-width: 640px; }

.lp-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

@media (max-width: 720px) {
  .lp-values-grid { grid-template-columns: 1fr; gap: 8px; }
  .lp-value-featured { flex-direction: column; text-align: center; gap: 12px; padding: 24px; }
}

/* Sections */
.lp-section { padding: clamp(30px, 5vw, 56px) 0; }
.lp-section-tint { background: linear-gradient(180deg, var(--keek-tint), transparent); border-radius: 28px; padding-left: clamp(16px, 3vw, 32px); padding-right: clamp(16px, 3vw, 32px); }
.lp-section-head { text-align: center; margin-bottom: 26px; }
.lp-section-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 4vw, 34px); letter-spacing: -.01em; color: var(--ink); margin: 0 0 6px; }
.lp-section-head p { color: var(--muted); font-size: 15px; margin: 0; }

.lp-posts { columns: 2; column-gap: 18px; }
.lp-posts > .post { break-inside: avoid; margin: 0 0 18px; }
@media (max-width: 720px) { .lp-posts { columns: 1; } }

.lp-places { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lp-place { display: flex; align-items: center; gap: 13px; padding: 14px 16px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.lp-place:hover { border-color: var(--keek); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.lp-place-av { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 19px; color: #fff; background: linear-gradient(135deg, var(--keek), var(--green)); }
.lp-place-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp-place-name { font-weight: 700; color: var(--ink); font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-place-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
.lp-place-meta svg { width: 13px; height: 13px; }
.lp-place > svg { width: 18px; height: 18px; color: var(--muted-soft); flex-shrink: 0; }
@media (max-width: 620px) { .lp-places { grid-template-columns: 1fr; } }

.lp-more { text-align: center; margin-top: 22px; }

/* Final CTA */
.lp-final { margin: clamp(30px, 5vw, 60px) 0 clamp(48px, 7vw, 80px); }
.lp-final-inner { text-align: center; padding: clamp(40px, 6vw, 68px) 28px; border-radius: 28px; color: #fff;
  background: linear-gradient(135deg, #26282c, #16171a 70%); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.lp-final h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 4.4vw, 38px); margin: 0 0 10px; }
.lp-final p { color: #c4c7c5; font-size: 16px; margin: 0 0 26px; }
.lp-btn-invert { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.lp-btn-invert:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ================= Composer refinements (compact dropdowns + tighter spacing) ================= */
/* Counter + hint moved right under the textarea, tight */
.composer-meta { margin: 4px 2px 0 0; justify-content: flex-end; }
.composer-meta .composer-hint-tip { left: auto; right: 0; }
.composer-meta .composer-hint-tip::after { left: auto; right: 8px; }

/* ~70% less gap between the textarea and the place / bar */
.composer-place { margin-top: 3px; }
.composer-place .placepick-btn { padding: 6px 12px; min-height: 34px; }
.composer-bar { margin-top: 8px; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.composer-post { margin-left: auto; }

/* Compact icon+chevron dropdowns */
.cdrop { position: relative; display: inline-block; }
.cdrop > summary { list-style: none; cursor: pointer; }
.cdrop > summary::-webkit-details-marker { display: none; }
.cdrop-btn { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 9px; border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--surface); color: var(--muted); transition: border-color .15s ease, color .15s ease, background .15s ease; }
.cdrop-btn:hover { border-color: var(--keek); color: var(--keek-deep); }
.cdrop[open] .cdrop-btn { border-color: var(--keek); color: var(--keek-deep); background: var(--keek-tint); }
.cdrop-cur { display: inline-flex; }
.cdrop-cur svg { width: 18px; height: 18px; }
.cdrop-btn > svg { width: 13px; height: 13px; color: var(--muted-soft); }
.cdrop-lbl { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; }
.cdrop-lbl:empty { display: none; }
.cdrop-menu { position: absolute; z-index: 44; top: calc(100% + 6px); left: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; }
.cdrop-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: var(--r-sm); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; text-align: left; }
.cdrop-opt:hover { background: var(--keek-tint); }
.cdrop-opt.on { background: var(--keek-tint); color: var(--keek-deep); font-weight: 600; }
.cdrop-opt svg { width: 17px; height: 17px; color: var(--muted); flex: 0 0 17px; }
.cdrop-opt.on svg { color: var(--keek); }
.cdrop-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; min-width: 320px; }
.cdrop-exp .cdrop-menu { left: auto; right: 0; }
@media (max-width: 560px) { .cdrop-menu-grid { min-width: 260px; } .cdrop-menu { min-width: 190px; } }

/* ============ Composer bar v2 — 36px uniforme, contador primeiro, imagem colada no Post ============ */
.cdrop-btn { height: 36px; }
.composer-icon-btn { width: 36px; height: 36px; flex: 0 0 36px; }
.composer-icon-btn svg { width: 18px; height: 18px; }
.composer-post { height: 36px; padding: 0 16px; margin-left: 0; display: inline-flex; align-items: center; gap: 6px; }
.composer-post svg { width: 18px; height: 18px; }
.composer-addmedia { margin-left: auto; }           /* empurra imagem + Post para a direita */
.composer-place { margin-top: 5px; }                /* 5px entre o texto e o Choose a place */
.composer-bar .composer-meta { margin: 0; justify-content: flex-start; }
.composer-bar .composer-meta .composer-hint-tip { left: 0; right: auto; }
.composer-bar .composer-meta .composer-hint-tip::after { left: 14px; right: auto; }

/* ---- Ajustes finos: gap real, denúncia vermelho-claro, alinhamento imagem/Post ---- */
/* O status de upload ocupava 22px mesmo vazio → colapsa quando não há mensagem (gap de 5px real) */
.mu-status:empty { min-height: 0; margin-top: 0; }

/* Ícone denunciar em vermelho-claro elegante */
.report-flag svg { color: #e0685f; }
.report-flag:hover svg { color: #c5433a; }

/* Imagem e + Post exatamente com a mesma altura (36px, borda inclusa) e centralizados */
.composer-icon-btn, .composer-post { box-sizing: border-box; align-self: center; }

/* ============================ Reações (curtir + surpreso/feliz/emocionante/pensativo) ============================ */
.react-wrap { position: relative; display: inline-flex; }
.react-main.reacted { color: var(--keek-deep); font-weight: 600; }
.react-emoji { font-size: 16px; line-height: 1; }
.react-pop {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; max-width: min(320px, 92vw);
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 22px; box-shadow: var(--shadow-lg); z-index: 45;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.react-pop::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.react-wrap:hover .react-pop,
.react-wrap:focus-within .react-pop,
.react-wrap.react-open .react-pop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.react-pop button {
  border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease, background .12s ease;
}
.react-pop button:hover { transform: scale(1.28) translateY(-3px); background: var(--keek-tint); }

/* ============================ Tipo de conta (Pessoa / Negócio) ============================ */
.acct-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; vertical-align: middle; }
.acct-chip svg { width: 14px; height: 14px; }
.acct-member { background: var(--rail-active); color: var(--muted); border: 1px solid var(--hair); }
.acct-business { background: #eef4ff; color: var(--keek-deep); border: 1px solid #d5e3fb; }

/* Seletor segmentado no cadastro */
.acct-toggle { display: flex; gap: 8px; }
.acct-opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border: 1.5px solid var(--hair); border-radius: var(--r-md); cursor: pointer; font-weight: 600; color: var(--muted); user-select: none; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.acct-opt svg { width: 18px; height: 18px; }
.acct-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.acct-opt:has(input:checked) { border-color: var(--keek); background: var(--keek-tint); color: var(--keek-deep); }

/* ============================ Verificação de conta (selo + níveis) ============================ */
.alert-info { background: #eef4ff; color: #1a3d7c; border: 1px solid #d5e3fb; display: flex; align-items: flex-start; gap: 8px; }
.alert-info svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }

.verified-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; vertical-align: middle; }
.verified-badge svg { width: 15px; height: 15px; }
.verified-badge.v-personalidade, .verified-badge.v-celebridade, .verified-badge.v-default { color: #1d9bf0; }
.verified-badge.v-autoridade { color: #0e5a2f; }

/* Selos de subtipo de Organização */
.acct-gov { background: #eef1fb; color: #002F6C; border: 1px solid #d3ddf3; }
.acct-press { background: #fdeeee; color: #8a2b2b; border: 1px solid #f4d4d4; }
.acct-social { background: #eaf6ee; color: #1d7a45; border: 1px solid #cfe9d7; }

/* ============================ Entidades: Eventos / Instituições / Imprensa ============================ */
.ent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ent-card { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.ent-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ent-cover { height: 96px; display: flex; align-items: center; justify-content: center; color: #fff; }
.ent-cover svg { width: 36px; height: 36px; }
.ent-cover.lg { height: 120px; width: 120px; border-radius: var(--r-md); flex: 0 0 120px; }
.ent-event { background: linear-gradient(135deg, #7C6BF0, #9C8CFF); }
.ent-institution { background: linear-gradient(135deg, #204a8f, #3a6fc4); }
.ent-press { background: linear-gradient(135deg, #b0413a, #d1655e); }
.ent-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ent-name { font-family: var(--display); font-size: 15px; }
.ent-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ent-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.ent-meta svg { width: 15px; height: 15px; flex-shrink: 0; }
.ent-meta a { color: var(--keek-deep); }
.ent-detail-head { display: flex; gap: 16px; align-items: flex-start; }
.ent-title { margin: 0 0 8px; font-size: 22px; }
.ent-desc { margin: 14px 0 0; white-space: pre-wrap; color: var(--ink); }
.ent-compose { margin: 16px 0; }
.ent-compose textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--hair); border-radius: var(--r-md); padding: 10px; resize: vertical; font: inherit; }
.ent-compose-bar { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.mini-select { padding: 7px 9px; border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--surface); font-size: 13px; }
.ent-compose-bar .btn { margin-left: auto; }
.ent-wall { margin-top: 8px; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 520px) { .ent-detail-head { flex-direction: column; } .ent-cover.lg { width: 100%; flex-basis: auto; } }

/* Cross-links between entities */
.crosslinks { margin: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.crosslink-group { background: var(--card-bg, #fff); border: 1px solid var(--border, #e8e5de); border-radius: 10px; overflow: hidden; }
.crosslink-group summary { padding: 10px 14px; font-weight: 600; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.crosslink-group summary .badge { background: var(--accent, #5DCAA5); color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 10px; margin-left: auto; font-weight: 500; }
.crosslink-list { display: flex; flex-direction: column; }
.crosslink-item { padding: 8px 14px; border-top: 1px solid var(--border, #e8e5de); color: var(--text, #2f2e28); text-decoration: none; font-size: 14px; display: flex; justify-content: space-between; align-items: center; transition: background .15s; }
.crosslink-item:hover { background: var(--hover-bg, #f7f5f0); }
.crosslink-item .muted { color: var(--muted, #9c9888); font-size: 12px; }
.ad-source { display: inline-flex; align-items: center; gap: 3px; }
.ad-source a { color: var(--accent, #5DCAA5); text-decoration: none; font-weight: 500; }
.ad-source a:hover { text-decoration: underline; }

/* Entity cover upload */
.ent-cover-upload { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.btn-ghost { background: none; border: 1px solid var(--border, #e8e5de); color: var(--muted, #9c9888); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.btn-ghost:hover { background: var(--hover-bg, #f7f5f0); }
.btn-outline { background: none; border: 1px solid var(--accent, #5DCAA5); color: var(--accent, #5DCAA5); padding: 4px 10px; border-radius: 6px; font-size: 12px; }

/* Business list: hierarchy */
.biz-parent-tag { margin-top: 6px; font-size: 12px; color: var(--accent, #5DCAA5); display: flex; align-items: center; gap: 4px; }

/* Business hierarchy menu (detail view) */
.biz-menu { margin: 10px 0 16px; border: 1px solid var(--border, #e8e5de); border-radius: 10px; overflow: hidden; }
.biz-menu summary { padding: 10px 14px; font-weight: 600; font-size: 14px; cursor: pointer; }
.biz-menu-content { display: flex; flex-direction: column; }
.biz-menu-parent, .biz-menu-child { padding: 8px 14px 8px 26px; border-top: 1px solid var(--border, #e8e5de); color: var(--text, #2f2e28); text-decoration: none; font-size: 14px; }
.biz-menu-parent { padding-left: 14px; font-weight: 500; }
.biz-menu-self { padding: 8px 14px 8px 26px; border-top: 1px solid var(--border, #e8e5de); font-size: 14px; font-weight: 600; color: var(--accent, #5DCAA5); display: block; }
.biz-menu-child:hover, .biz-menu-parent:hover { background: var(--hover-bg, #f7f5f0); }

/* Fase 6: "teia do Place" — overview strip of everything happening here */
.place-web { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.place-web-item {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: var(--card-bg, #fff); border: 1px solid var(--border, #e8e5de);
  color: var(--text, #2f2e28); text-decoration: none; font-size: 13px; font-weight: 500;
  transition: transform .15s, border-color .15s, background .15s;
}
.place-web-item:hover { border-color: var(--accent, #5DCAA5); transform: translateY(-1px); }
.place-web-item.on { background: var(--accent, #5DCAA5); color: #fff; border-color: var(--accent, #5DCAA5); }
.place-web-item svg { width: 15px; height: 15px; }
.place-web-item b { font-weight: 700; opacity: .85; }
.place-web-item.on b { opacity: 1; }

/* Monetização: badge de Destaque (impulsionamento pago) */
.ad-card, .biz-card, .ent-card { position: relative; }
.boost-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(135deg, #FFB020, #FF7A45); color: #fff; font-size: 11px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.boost-badge svg { width: 12px; height: 12px; }
.boost-box { margin: 16px 0; padding: 16px; border-radius: 10px; border: 1px solid var(--border, #e8e5de); background: var(--card-bg, #fff); }
.boost-box.is-active { border-color: #FF7A45; background: linear-gradient(180deg, rgba(255,122,69,.06), transparent); }
.boost-price-opt { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border, #e8e5de); }
.boost-price-opt:last-child { border-bottom: none; }

/* =========================================================================
   Landing page — public segment showcase (Negócios, Eventos, Empregos,
   Instituições & Imprensa) + the "teia" mosaic overview.
   ========================================================================= */

/* --- Graph: "Uma rede, não uma lista" — a real hub-and-spoke node graph --- */
.lp-graph {
  position: relative;
  width: 100%; max-width: 560px; margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.lp-graph-edges {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: visible;
}
.lp-graph-edges line { stroke: var(--hair); }
.lp-graph-edges .lg-ring { stroke-width: 0.35; stroke-dasharray: 2 2; opacity: .55; }
.lp-graph-edges .lg-spoke { stroke-width: 0.35; stroke-dasharray: 1.4 1.6; animation: lp-web-flow 3.6s linear infinite; }
.lp-graph-edges .lg-spoke:nth-child(8)  { animation-delay: -.5s; }
.lp-graph-edges .lg-spoke:nth-child(9)  { animation-delay: -1.1s; }
.lp-graph-edges .lg-spoke:nth-child(10) { animation-delay: -1.8s; }
.lp-graph-edges .lg-spoke:nth-child(11) { animation-delay: -2.3s; }
.lp-graph-edges .lg-spoke:nth-child(12) { animation-delay: -2.9s; }
@keyframes lp-web-flow { to { stroke-dashoffset: -12; } }

.lp-node {
  position: absolute; z-index: 1; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 92px; height: 92px; border-radius: 50%; text-align: center; text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.lp-node-hub {
  width: 106px; height: 106px;
  background: linear-gradient(155deg, var(--keek), #17408a);
  color: #fff; box-shadow: 0 12px 28px rgba(26,115,232,.32);
}
.lp-node-hub .glyph { width: 30px; height: 30px; display: inline-flex; }
.lp-node-hub .lp-node-sub { font-size: 11px; opacity: .85; font-weight: 600; letter-spacing: .01em; }
.lp-node-sat { border: 1px solid rgba(0,0,0,.05); box-shadow: var(--shadow-sm); }
.lp-node-sat:hover { transform: translate(-50%, -50%) scale(1.09); box-shadow: var(--shadow-md); }
.lp-node-hub:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 16px 34px rgba(26,115,232,.4); }
.lp-node-ic { display: inline-flex; }
.lp-node-ic svg { width: 17px; height: 17px; }
.lp-node-count { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1; letter-spacing: -.01em; }
.lp-node-name { font-weight: 700; font-size: 11px; }
.lp-tile-blue   { background: linear-gradient(155deg, #e8f0fe, #d9e6fd); color: var(--keek); }
.lp-tile-green  { background: linear-gradient(155deg, #e6f4ea, #d8eede); color: var(--green); }
.lp-tile-coral  { background: linear-gradient(155deg, #fde8e6, #fbdad7); color: #c5221f; }
.lp-tile-amber  { background: linear-gradient(155deg, #fef7e0, #fbecc0); color: #b06000; }
.lp-tile-indigo { background: linear-gradient(155deg, #eef1fb, #dfe4f7); color: #3949ab; }
.lp-tile-teal   { background: linear-gradient(155deg, #e0f2f1, #cdeae7); color: #00695c; }

@media (max-width: 760px) {
  .lp-graph { max-width: 380px; }
  .lp-node { width: 74px; height: 74px; }
  .lp-node-hub { width: 84px; height: 84px; }
  .lp-node-hub .glyph { width: 24px; height: 24px; }
  .lp-node-count { font-size: 15px; }
  .lp-node-name { font-size: 9.5px; }
}


/* --- Negócios cards --- */
.lp-biz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-biz-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 22px 14px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
  text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lp-biz-card:hover { border-color: var(--keek); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lp-biz-av {
  width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--keek), var(--green)); color: #fff; font-weight: 700; font-size: 20px;
}
.lp-biz-name { font-weight: 700; color: var(--ink); font-size: 15px; }
.lp-biz-tag { color: var(--muted); font-size: 13px; }
.lp-biz-place { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-soft); font-size: 12.5px; }
.lp-biz-place svg { width: 12px; height: 12px; }

/* Section heading accent dot — ties each segment to its color in the graph above */
.lp-section-head h2 { display: flex; align-items: center; gap: 10px; }
.lp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.lp-dot-blue   { background: var(--keek); }
.lp-dot-green  { background: var(--green); }
.lp-dot-coral  { background: #c5221f; }
.lp-dot-amber  { background: #b06000; }
.lp-dot-indigo { background: #3949ab; }
.lp-dot-teal   { background: #00695c; }
/* Small inline icon next to a listing section's <h2> (Negócios/Eventos/
   Mercado/Vagas/Instituições/Imprensa) — same category colors as the big
   value-prop cards above, just sized for a heading instead of a card. */
.lp-head-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; margin-right: 8px; vertical-align: middle; }
.lp-head-ic svg { width: 15px; height: 15px; }

/* Institutions / Press cards — same DNA as .lp-biz-card, distinct accent per segment */
.lp-org-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lp-org-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 16px; border-radius: 16px; text-decoration: none; border: 1px solid var(--hair);
  background: var(--surface); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, border-color .2s ease;
}
.lp-org-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lp-org-indigo:hover { border-color: #3949ab; }
.lp-org-teal:hover { border-color: #00695c; }
.lp-org-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; margin-bottom: 4px;
}
.lp-org-av svg { width: 18px; height: 18px; }
.lp-org-indigo .lp-org-av { background: linear-gradient(155deg, #eef1fb, #dfe4f7); color: #3949ab; }
.lp-org-teal .lp-org-av { background: linear-gradient(155deg, #e0f2f1, #cdeae7); color: #00695c; }
.lp-org-name { font-weight: 700; color: var(--ink); font-size: 15px; }
.lp-org-tag { color: var(--muted); font-size: 12.5px; }
.lp-org-place { display: inline-flex; align-items: center; gap: 4px; color: var(--muted-soft); font-size: 12.5px; margin-top: 2px; }
.lp-org-place svg { width: 12px; height: 12px; }

/* Empty-state — shown when a public segment has no content yet. Same visual weight
   as a populated section, so the landing page never feels "half built". */
.lp-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 44px 24px; border-radius: 18px; border: 1px dashed var(--hair); background: var(--surface);
}
.lp-empty-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px; margin-bottom: 4px;
}
.lp-empty-ic svg { width: 24px; height: 24px; }
.lp-empty h3 { font-size: 16.5px; margin: 0; color: var(--ink); }
.lp-empty p { font-size: 13.5px; color: var(--muted); max-width: 340px; margin: 0; }
.lp-empty .btn { margin-top: 6px; }
.lp-empty-blue   .lp-empty-ic { background: linear-gradient(155deg, #e8f0fe, #d9e6fd); color: var(--keek); }
.lp-empty-green  .lp-empty-ic { background: linear-gradient(155deg, #e6f4ea, #d8eede); color: var(--green); }
.lp-empty-coral  .lp-empty-ic { background: linear-gradient(155deg, #fde8e6, #fbdad7); color: #c5221f; }
.lp-empty-amber  .lp-empty-ic { background: linear-gradient(155deg, #fef7e0, #fbecc0); color: #b06000; }
.lp-empty-indigo .lp-empty-ic { background: linear-gradient(155deg, #eef1fb, #dfe4f7); color: #3949ab; }
.lp-empty-teal   .lp-empty-ic { background: linear-gradient(155deg, #e0f2f1, #cdeae7); color: #00695c; }

/* --- Events horizontal rail --- */
.lp-rail { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.lp-event-card {
  flex: 0 0 auto; scroll-snap-align: start; width: 260px; display: flex; gap: 14px; align-items: flex-start;
  padding: 16px; background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
  text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lp-event-card:hover { border-color: #b06000; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lp-event-date {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; background: #fef7e0; color: #b06000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
.lp-event-date b { font-size: 20px; font-weight: 700; }
.lp-event-date small { font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.lp-event-date-soon small { font-size: 11px; text-align: center; }
.lp-event-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.lp-event-name { font-weight: 700; color: var(--ink); font-size: 14.5px; line-height: 1.3; }
.lp-event-place { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; }
.lp-event-place svg { width: 12px; height: 12px; }

/* --- Jobs list --- */
.lp-job-list { display: flex; flex-direction: column; gap: 10px; }
.lp-job-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #fff;
  border: 1px solid var(--hair); border-radius: var(--r-lg); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lp-job-row:hover { border-color: var(--green); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.lp-job-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--green-tint); color: var(--green); display: inline-flex; align-items: center; justify-content: center; }
.lp-job-ic svg { width: 19px; height: 19px; }
.lp-job-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-job-title { font-weight: 700; color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-job-meta { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.lp-job-meta svg { width: 12px; height: 12px; }
.lp-job-row > svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--muted-soft); }

/* --- Civic: Instituições & Imprensa --- */
.lp-civic-section { background: linear-gradient(180deg, #eef1fb, transparent); border-radius: 28px; padding-left: clamp(16px, 3vw, 32px); padding-right: clamp(16px, 3vw, 32px); }
.lp-civic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lp-civic-card {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px; background: #fff;
  border: 1px solid var(--hair); border-left: 3px solid var(--hair); border-radius: var(--r-lg);
  text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lp-civic-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.lp-civic-institution { border-left-color: #3949ab; }
.lp-civic-press { border-left-color: #00695c; }
.lp-civic-ic { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; }
.lp-civic-institution .lp-civic-ic { background: #eef1fb; color: #3949ab; }
.lp-civic-press .lp-civic-ic { background: #e0f2f1; color: #00695c; }
.lp-civic-ic svg { width: 18px; height: 18px; }
.lp-civic-body { min-width: 0; display: flex; flex-direction: column; }
.lp-civic-name { font-weight: 700; color: var(--ink); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-civic-kind { color: var(--muted); font-size: 12.5px; }

@media (max-width: 640px) {
  .lp-biz-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-org-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-civic-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-tile, .lp-biz-card, .lp-event-card, .lp-job-row, .lp-civic-card, .lp-org-card, .lp-node-sat, .lp-node-hub { transition: none; }
  .lp-tile:hover, .lp-biz-card:hover, .lp-event-card:hover, .lp-job-row:hover, .lp-civic-card:hover, .lp-org-card:hover { transform: none; }
  .lp-node-sat:hover { transform: translate(-50%, -50%); }
  .lp-node-hub:hover { transform: translate(-50%, -50%); }
  .lp-graph-edges line, .lp-live-dot, .lp-reveal { animation: none !important; }
  .lp-reveal { opacity: 1 !important; transform: none !important; }
}

/* Live pulse — small "it's happening now" signal next to a section heading */
.lp-live-dot { position: relative; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--green); margin-right: 8px; vertical-align: middle; }
.lp-live-dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--green);
  animation: lp-pulse 1.8s ease-out infinite;
}
@keyframes lp-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

/* Scroll reveal — sections fade/slide in as they enter view (progressive enhancement:
   the .lp-reveal-init class is only added by JS right before showing, so content is
   never hidden if JavaScript fails to run). */
.lp-reveal-init { opacity: 0; transform: translateY(18px); }
.lp-reveal-init.lp-reveal-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

/* ===================================================================== */
/* Compose box — "Modelo B" (structured/professional), shared by the feed
   (posting to a Place, switchable) and every entity mural (Business,
   Classified, Job, Event, Institution, Press — posting to a fixed target). */
/* ===================================================================== */
.cx-card { display: block; }
.cx-row1 { display: flex; align-items: flex-start; gap: 12px; }
.cx-av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; overflow: hidden; text-decoration: none; }
.cx-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cx-name { font-weight: 700; font-size: 15px; color: var(--keek); text-decoration: none; }

/* The target ("Publicando em: X") — X is NEVER truncated, even if long.
   It wraps naturally onto a second line rather than clipping with an ellipsis. */
.cx-target { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--muted); max-width: 100%; }
.cx-target-lead { flex: none; color: var(--muted); }
.cx-target-name { font-weight: 700; color: var(--keek); white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; }
.cx-target-fixed .cx-target-name { color: var(--ink); }

.cx-target.placepick { position: relative; display: block; }
.cx-target-btn {
  display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  border: none; background: none; padding: 2px 0; margin: 0; font: inherit; font-size: 13px;
  color: var(--muted); cursor: pointer; text-align: left; max-width: 100%;
}
.cx-target-btn:hover .cx-target-name { text-decoration: underline; text-underline-offset: 2px; }
.cx-target-pin { display: inline-flex; align-items: center; flex: none; }
.cx-target-pin svg { width: 1em; height: 1em; color: var(--coral); }
.cx-target-btn svg { width: 13px; height: 13px; flex: none; color: var(--muted-soft); align-self: center; }
.cx-target-btn .cx-target-name.is-placeholder { color: var(--keek); font-weight: 600; }

.cx-text {
  display: block; width: 100%; border: none; outline: none; resize: none;
  font: inherit; font-size: 17px; line-height: 1.4; color: var(--ink);
  margin-top: 12px; min-height: 46px; font-family: inherit;
}
.cx-text::placeholder { color: var(--muted-soft); }

.cx-divider { border-top: 1px solid var(--hair); margin-top: 14px; }
.cx-actions { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding-top: 10px; }
.cx-action-item {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px;
  color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none;
  border: none; background: none; font: inherit;
}
.cx-action-item::-webkit-details-marker { display: none; }
.cx-action-item:hover { background: var(--hover-bg, #f3f5f7); color: var(--ink); }
.cdrop[open] .cx-action-item { background: var(--keek-tint); color: var(--keek-deep); }
.cx-action-item svg { width: 17px; height: 17px; }
.cx-action-item input[type="file"] { display: none; }
.cx-spacer { flex: 1; }

/* Item — corrigido a pedido do Abel: antes, o botão "Adicionar mídia" e o
   "Publicar" podiam quebrar em linhas separadas no celular, mesmo tendo
   espaço, porque ficavam soltos dentro do mesmo flex-wrap dos outros
   ícones. Agora ficam juntos num grupo que nunca quebra internamente
   (flex-wrap: nowrap), sempre alinhados à direita, lado a lado. */
.cx-post-group { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; flex-wrap: nowrap; }
.cx-media-btn {
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1.5px solid var(--hair); color: var(--ink);
  height: 36px; padding: 0 8px; margin: 0; border-radius: 10px; cursor: pointer; box-sizing: border-box;
  transition: border-color .15s ease, background .15s ease;
}
.cx-media-btn:hover { background: var(--hover-bg, #f3f5f7); border-color: var(--muted); }
.cx-media-btn svg { width: 18px; height: 18px; }
.cx-postbtn {
  background: #14212e; color: #ffffff; border: 1px solid #14212e; font-weight: 600; font-size: 14px;
  padding: 9px 22px; border-radius: 10px; cursor: pointer; transition: background .15s ease, border-color .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.cx-postbtn svg { width: 15px; height: 15px; color: #ffffff; }
.cx-postbtn:hover { background: #1c2e3f; border-color: #1c2e3f; }
.cx-postbtn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 520px) {
  .cx-action-item span:not(.cdrop-cur):not(.cdrop-lbl) { display: none; }
  .cx-action-item { padding: 8px; }
  .cx-media-btn { height: 36px; padding: 0 6px; }
  .cx-postbtn { padding: 8px 16px; }
}

/* Post-card owner controls: quick inline edit of privacy/comment/expiry after publishing */
.pc-settings { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.pc-chip-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; color: var(--muted-soft); cursor: pointer;
  list-style: none; border: none; background: none;
}
.pc-chip-btn::-webkit-details-marker { display: none; }
.pc-chip-btn:hover { background: var(--hover-bg, #f3f5f7); color: var(--ink); }
.cdrop[open] .pc-chip-btn { background: var(--keek-tint); color: var(--keek-deep); }
.pc-chip-btn svg { width: 16px; height: 16px; }
.cdrop-opt:disabled { opacity: .4; cursor: not-allowed; }
.cdrop-opt:disabled:hover { background: none; }

/* Inline login on the public landing header — quick access without a full page nav */
.lp-inline-login { display: flex; align-items: center; gap: 6px; position: relative; }
.lp-inline-login input {
  padding: 7px 10px; border: 1px solid var(--hair); border-radius: 8px;
  font-size: 13px; background: var(--surface);
}
.lp-inline-login input[type="email"] { width: 210px; }
.lp-inline-login input[type="password"] { width: 140px; }
.lp-inline-login input:focus { outline: none; border-color: var(--keek); }
.lp-help-ic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: var(--muted-soft); flex: none; }
.lp-help-ic:hover { background: var(--hover-bg, #f3f5f7); color: var(--keek); }
.lp-help-ic svg { width: 16px; height: 16px; }
.lp-inline-login-err { position: absolute; top: 100%; left: 0; margin-top: 4px; font-size: 11.5px; color: #c5221f; white-space: nowrap; }

@media (max-width: 980px) {
  .lp-inline-login input[type="email"] { width: 160px; }
  .lp-inline-login input[type="password"] { width: 110px; }
}
.lp-login-mobile { display: none; }
@media (max-width: 720px) {
  .lp-inline-login { display: none; }
  .lp-login-mobile { display: inline-flex; }
}

/* Multi-place linking widget (Business/Classified/Job/Event/Institution/Press) */
.ep-widget { margin: 16px 0; padding: 14px; border-radius: 12px; border: 1px dashed var(--hair); background: var(--surface); }
.ep-label { font-size: 12.5px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.ep-label svg { width: 14px; height: 14px; }
.ep-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--keek-tint); font-size: 13px; }
.ep-chip a { color: var(--keek-deep); text-decoration: none; font-weight: 600; }
.ep-chip a:hover { text-decoration: underline; }
.ep-chip-x { border: none; background: none; color: var(--muted-soft); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; }
.ep-chip-x:hover { color: #c5221f; }
.ep-add { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.ep-add-input { flex: 1; padding: 6px 10px; border: 1px solid var(--hair); border-radius: 8px; font-size: 13px; }
.ep-add-msg { font-size: 12px; color: #c5221f; }

/* Item — gestor + Impulsionar/Destacar, agora compactos e dentro do próprio
   card do perfil do Place (antes eram faixas inteiras separadas, ocupando
   espaço demais logo abaixo do card). */
.pe-manager-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); }
.pe-manager-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.pe-manager-tag svg { width: 14px; height: 14px; color: var(--keek); }
.pe-manager-tag-muted { color: var(--muted); font-weight: 500; }
.pe-manager-tag-muted svg { color: var(--muted-soft); }
.pe-manager-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--keek); text-decoration: none; cursor: pointer; list-style: none; }
.pe-manager-link:hover { text-decoration: underline; }
.pe-manager-link svg { width: 14px; height: 14px; }
.pe-manager-link::-webkit-details-marker { display: none; }
.pe-boost-toggle { display: inline-flex; }
.pe-boost-inner { margin-top: 12px; width: 100%; flex-basis: 100%; }

/* Wrapper card around the icon+tooltip area-navigation tabs (same .ptabs
   pattern as the user profile), so it visually matches the rest of the page. */
.ptabs-card { padding: 0; margin-bottom: 18px; }
.ptabs-card .ptabs { border-top: none; padding: 4px 10px; }

/* Highlighted "place dispute" notification — needs to stand out from regular likes/comments */
.notif-dispute { background: linear-gradient(90deg, #FFF4E5, #FFFFFF); border-left: 3px solid #B06000; }
.notif-dispute .notif-ic.kind-place_dispute { background: #FFF0D8; color: #B06000; }
.notif-dispute .notif-text strong { color: #8A4B00; }

/* Kid account access-schedule (item 5) — 7-day accordion of allowed time windows */
.kid-schedule { display: flex; flex-direction: column; gap: 6px; }
.kid-schedule-day { border: 1px solid var(--hair); border-radius: 10px; padding: 8px 12px; background: var(--surface); }
.kid-schedule-day summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600; }
.kid-schedule-day summary::-webkit-details-marker { display: none; }
.ksd-name { color: var(--ink); }
.kid-schedule-day input[type="time"] { padding: 5px 8px; border: 1px solid var(--hair); border-radius: 7px; font-size: 13px; }

/* ===================================================================== */
/* Profile header — Modelo E (cartão flutuante). Consolidated: this used to
   be 3 separate, slightly-conflicting copies of this same block, left over
   from earlier edits — that drift is exactly what caused the misalignment
   (broken name wrap, stacked badges, card swallowing the avatar). One clean
   version now. Key choices:
   - The CARD sits almost flush with the cover (tiny -3px overlap, not -46px)
     — only the AVATAR itself pokes up into the cover, via its own margin.
   - `.pe-top` is a plain flex row with just avatar + name (2 items) — action
     buttons live in their own `.pe-actions-row` below, so a long name never
     has to fight 4 buttons for space on the same line.
   - Name is single-line (ellipsis if truly too long); role/account badges
     sit together on their own row right under it, side by side. */
.pe-float {
  padding: 16px 20px 18px;
}
.pe-top { display: flex; align-items: flex-end; gap: 14px; }
.pe-avatar-wrap { position: relative; flex: none; margin-top: -46px; }
.pe-avatar-wrap .avatar.xl { width: 84px; height: 84px; font-size: 30px; border: 4px solid var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.pe-name-block { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; padding-bottom: 2px; }
.pe-name-block h1 { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-badges-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pe-uname { color: var(--muted); font-size: 13.5px; }
.pe-owner-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--keek); text-decoration: none; margin-top: 2px; font-weight: 600; width: fit-content; }
.pe-owner-tag:hover { text-decoration: underline; }
.pe-owner-tag svg { width: 13px; height: 13px; }

.pe-actions-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.pe-seg { display: inline-flex; gap: 3px; margin-top: 14px; background: var(--rail-active, #f0f2f5); border-radius: 12px; padding: 3px; }
.pe-seg-btn { border: none; background: none; padding: 7px 18px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.pe-seg-btn:hover { color: var(--ink); }
.pe-seg-btn.on { background: var(--surface, #fff); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

.pe-bio { margin: 14px 0 0; color: var(--ink); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

/* Chip-style stats */
.pe-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pe-chip { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 16px; border-radius: 14px; background: var(--keek-tint, #e8f0fe); min-width: 74px; text-decoration: none; transition: transform .15s ease; }
/* Item — a pedido do Abel: no card do lugar, os numeros das estatisticas
   ficavam centralizados numa caixa larga, criando um "espaco em branco"
   entre a borda do card e onde o numero realmente comeca. Alinha a
   esquerda so aqui, sem afetar os outros usos de .pe-chip no site. */
.place-hero .pe-chip { align-items: flex-start; padding-left: 6px; padding-right: 12px; min-width: 0; }
.pe-chip:hover { transform: translateY(-1px); }
.pe-chip b { font-size: 15px; font-weight: 800; color: var(--keek); line-height: 1.2; }
.pe-chip span { font-size: 10px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.pe-chip-green { background: #e6f4ea; } .pe-chip-green b { color: var(--green, #1e8e3e); }
.pe-chip-amber { background: #fef7e0; } .pe-chip-amber b { color: #b06000; }

/* Icon-only cover-photo controls (add / edit / delete) */
.btn.icon-only { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; }
.btn.icon-only svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .pe-float { margin: -3px 10px 0; padding: 14px 14px 16px; }
  .pe-avatar-wrap .avatar.xl { width: 68px; height: 68px; font-size: 24px; }
  .pe-avatar-wrap { margin-top: -34px; }
}

/* "Sobre" tab — hero stat */
.about-hero { display: flex; align-items: center; gap: 14px; margin: 12px 0 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, var(--keek-tint), #fff); }
.about-hero-num { font-family: var(--display, inherit); font-weight: 800; font-size: 30px; line-height: 1; color: var(--keek); }
.about-hero-txt { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted); }
.about-hero-txt strong { font-size: 13.5px; color: var(--ink); }

.about-bio { font-size: 14px; line-height: 1.5; color: var(--ink); margin-bottom: 14px; white-space: pre-wrap; }

/* Info cards — colored icon badge + label/value, replacing plain rows */
.about-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.about-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--surface); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.about-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06)); }
.about-card-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.about-card-ic svg { width: 16px; height: 16px; }
.about-card-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.about-card-body b { font-size: 12.5px; color: var(--ink); }
.about-card-body small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.about-card-green .about-card-ic { background: #e6f4ea; color: var(--green, #1e8e3e); }
.about-card-blue .about-card-ic { background: #e8f0fe; color: var(--keek); }
.about-card-amber .about-card-ic { background: #fef7e0; color: #b06000; }
.about-card-coral .about-card-ic { background: #fde8e6; color: #c5221f; }
.about-card-indigo .about-card-ic { background: #eef1fb; color: #3949ab; }

/* Managed places — small clickable cards instead of plain chips */
.about-places-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.about-place-card { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--surface); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.about-place-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.06)); border-color: var(--keek); }
.about-place-ic { color: var(--keek); }
.about-place-ic svg { width: 16px; height: 16px; }
.about-place-name { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.about-place-hint { font-size: 11px; color: var(--muted); }

/* Banner shown on every page while the owner is "wearing" a Pet's identity */
.pet-acting-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(90deg, #FFF4E5, #FFFFFF); border: 1px solid #f0e4d0; border-left: 3px solid #B06000; border-radius: 12px; padding: 10px 16px; margin-bottom: 16px; font-size: 13.5px; color: #5f6368; }
.pet-acting-banner strong { color: #202124; }

/* Multi-place selection in the composer, when publishing from an entity's own
   wall (Negócio/Classificado/Vaga/Evento/Instituição/Imprensa) — primary place is
   mandatory (locked), neighbor places are an optional multi-select. */
.cx-places-menu { min-width: 240px; padding: 8px; }
.cx-place-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.cx-place-opt:hover { background: var(--hover-bg, #f3f5f7); }
.cx-place-opt input { flex: none; }
.cx-place-opt small { color: var(--muted-soft); }
.cx-place-opt-locked { opacity: .75; cursor: default; }
.cx-place-opt-locked:hover { background: none; }

/* Entity profile pages (Negócio/Classificado/Vaga/Evento/Instituição/Imprensa) —
   Modelo 3: same floating-card language as the user profile, plus the primary-place
   anchor + expandable neighbor places. */
.ent-card-profile .pe-owner-tag { color: var(--muted); font-weight: 600; }
.pe-neighbors { margin-top: 10px; }
.more-places-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; border: 1px dashed var(--hair); background: none; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; }
.more-places-btn:hover { border-color: var(--keek); color: var(--keek); }
.pe-neighbors-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wall-filter { margin: 12px 0; }
.wall-filter .cx-action-item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; border: 1px solid var(--hair); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }

/* Small elegant count badge next to a button's icon+label (e.g. "Kids 2", "Pets 1") */
.btn-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--keek-tint); color: var(--keek); font-size: 11px; font-weight: 800; margin-left: 2px; }
.btn-primary .btn-count, .btn-orange .btn-count, .btn-red .btn-count { background: rgba(255,255,255,.28); color: #fff; }

/* Kids-list summary row (collapsed by default) — click anywhere to expand the
   full management panel (permissions, schedule, pause) below it. */
.kid-summary-card { overflow: hidden; }
.kid-summary-row { display: flex; align-items: center; gap: 12px; padding: 16px; cursor: pointer; list-style: none; }
.kid-summary-row::-webkit-details-marker { display: none; }
.kid-summary-row svg:last-child { transition: transform .2s ease; color: var(--muted-soft); flex: none; }
.kid-summary-card[open] .kid-summary-row svg:last-child { transform: rotate(180deg); }
.kid-summary-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kid-summary-name .muted { font-size: 12.5px; }
.kid-summary-profile-link { flex: none; }

/* Colored "tint" action buttons (Editar/Verificar/Kids/Pets) — soft tinted
   background + colored icon/text, matching each action's representative color. */
/* Icon-only color accents (Editar/Verificar/Kids/Pets) — button keeps its normal
   ghost background/text; only the icon itself is tinted. */
.ic-blue { color: var(--keek-deep, #1a56c4); }
.ic-green { color: #1e8e3e; }
.ic-violet { color: #6a3fc7; }
.ic-amber { color: #a15c00; }

/* Small elegant icon badge next to a page's main <h1> (Contas Kids / Contas Pets) */
.page-head-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; flex: none; }
.page-head-icon svg { width: 18px; height: 18px; }
/* Item — a pedido do Abel: ícone deve ficar neutro por padrão, só ganhando
   cor se a pessoa escolher "ícones coloridos" nas preferências (mesma
   regra do sistema de ícones do resto do site). */
.page-head-icon-violet, .page-head-icon-amber, .page-head-icon-blue,
.page-head-icon-green, .page-head-icon-coral, .page-head-icon-teal {
  background: var(--rail-active, #f0f2f5); color: var(--muted);
}
html.icons-colored .page-head-icon-violet { background: #f0ecfb; color: #6a3fc7; }
html.icons-colored .page-head-icon-amber { background: #fef2da; color: #a15c00; }
html.icons-colored .page-head-icon-blue { background: #e8f0fe; color: #1a73e8; }
html.icons-colored .page-head-icon-green { background: #e6f4ea; color: #1e8e3e; }
html.icons-colored .page-head-icon-coral { background: #fce8e6; color: #c5372a; }
html.icons-colored .page-head-icon-teal { background: #e0f2f4; color: #17838d; }

/* User widget — top of the right sidebar (Modelo A: rounded pill, profile +
   logout as two zones split by a thin divider). Sits above whatever that page's
   own aside content is (e.g. "Places you follow" on the Feed). */
.me-widget { display: flex; align-items: stretch; background: linear-gradient(135deg, #eef4fd 0%, #f7f4ec 100%); border: 1px solid #dce7f7; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.me-widget-profile { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; min-width: 0; }
.me-widget-profile:hover { background: rgba(255,255,255,.5); }
.me-widget-profile .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.me-widget-profile .who strong { color: var(--ink); }
.me-widget-profile .who small { color: var(--muted); font-size: 11.5px; }
.me-widget-divider { width: 1px; background: #dce7f7; margin: 10px 0; }
.me-widget-logout { width: 46px; display: flex; align-items: center; justify-content: center; color: var(--muted); text-decoration: none; }
.me-widget-logout:hover { background: #fdeceb; color: var(--coral); }
.me-widget-logout svg { width: 17px; height: 17px; }

/* Preferences (theme + language) — owner-only section inside the profile's Sobre tab */
.prefs-section { border-top: 1px solid var(--hair); padding-top: 4px; }
.prefs-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.prefs-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-width: 100px; flex: none; }
.prefs-label svg { width: 15px; height: 15px; }
.prefs-seg { display: inline-flex; gap: 3px; background: var(--rail-active, #f0f2f5); border-radius: 12px; padding: 3px; flex-wrap: wrap; }
.prefs-seg-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration: none; }
.prefs-seg-btn:hover { color: var(--ink); }
.prefs-seg-btn.on { background: var(--surface, #fff); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.prefs-seg-btn svg { width: 13px; height: 13px; }
.prefs-select { border: 1px solid var(--hair); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface); cursor: pointer; width: auto; }
.prefs-select-auto { max-width: 130px; }

/* ===================================================================== */
/* Colored icons — opt-in (see profile > Sobre > Preferências). Logged-out
   visitors never see this; it only activates via html.icons-colored, which
   the server only ever adds for a logged-in account with the preference on.
   Grouped by meaning rather than each icon getting its own unique color —
   keeps it a tasteful, curated palette instead of a rainbow. Uses the same
   `currentColor` stroke every icon already has, so no icon needed to change,
   just which color it inherits. */
/* ===================================================================== */
html.icons-colored svg[data-icon="feed"],
html.icons-colored svg[data-icon="stream"],
html.icons-colored svg[data-icon="explore"],
html.icons-colored svg[data-icon="search"],
html.icons-colored svg[data-icon="globe"],
html.icons-colored svg[data-icon="globe2"],
html.icons-colored svg[data-icon="pin"],
html.icons-colored svg[data-icon="pin-fill"],
html.icons-colored svg[data-icon="building"],
html.icons-colored svg[data-icon="compose"],
html.icons-colored svg[data-icon="edit"],
html.icons-colored svg[data-icon="userplus"] { color: var(--keek); }

html.icons-colored svg[data-icon="check"],
html.icons-colored svg[data-icon="shield"],
html.icons-colored svg[data-icon="verified"],
html.icons-colored svg[data-icon="plus"] { color: var(--green); }

html.icons-colored svg[data-icon="heart"],
html.icons-colored svg[data-icon="trash"],
html.icons-colored svg[data-icon="close"],
html.icons-colored svg[data-icon="flag"],
html.icons-colored svg[data-icon="lock"] { color: var(--coral); }

html.icons-colored svg[data-icon="store"],
html.icons-colored svg[data-icon="business"],
html.icons-colored svg[data-icon="tag"],
html.icons-colored svg[data-icon="classifieds"],
html.icons-colored svg[data-icon="briefcase"],
html.icons-colored svg[data-icon="hotel"],
html.icons-colored svg[data-icon="restaurant"],
html.icons-colored svg[data-icon="car"],
html.icons-colored svg[data-icon="paw"] { color: #a15c00; }

html.icons-colored svg[data-icon="profile"],
html.icons-colored svg[data-icon="users"],
html.icons-colored svg[data-icon="kid"],
html.icons-colored svg[data-icon="at"],
html.icons-colored svg[data-icon="comment"],
html.icons-colored svg[data-icon="chatshare"],
html.icons-colored svg[data-icon="admin"] { color: #6a3fc7; }

html.icons-colored svg[data-icon="image"],
html.icons-colored svg[data-icon="video"],
html.icons-colored svg[data-icon="media"],
html.icons-colored svg[data-icon="camera"],
html.icons-colored svg[data-icon="eye"] { color: #12838a; }

html.icons-colored svg[data-icon="landmark"],
html.icons-colored svg[data-icon="newspaper"],
html.icons-colored svg[data-icon="calendar"],
html.icons-colored svg[data-icon="layers"],
html.icons-colored svg[data-icon="sparkle"] { color: #3949ab; }

html.icons-colored svg[data-icon="whatsapp"] { color: #25D366; }
html.icons-colored svg[data-icon="mail"] { color: var(--keek); }
html.icons-colored svg[data-icon="sun"] { color: #a15c00; }
html.icons-colored svg[data-icon="moon"] { color: #3949ab; }
html.icons-colored svg[data-icon="bell"] { color: var(--coral); }
html.icons-colored svg[data-icon="bolt"] { color: #a15c00; }

/* Modo Manutenção — frozen page shown to non-staff visitors */
.maint-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 0%, var(--keek-tint), var(--paper) 60%); padding: 24px; }
html[data-theme="dark"] .maint-wrap { background: radial-gradient(circle at 50% 0%, #1a2733, #16171a 65%); }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .maint-wrap { background: radial-gradient(circle at 50% 0%, #1a2733, #16171a 65%); } }
.maint-card { max-width: 460px; width: 100%; text-align: center; background: var(--surface); border-radius: 24px; padding: 44px 36px 36px; box-shadow: var(--shadow-lg); }
.maint-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-bottom: 28px; }

.maint-spin { color: var(--keek); width: 64px; height: 64px; margin: 0 auto 20px; animation: maint-spin 3s linear infinite; }
.maint-spin svg { width: 64px; height: 64px; }
@keyframes maint-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.maint-card h1 { font-family: var(--display); font-size: 25px; color: var(--ink); margin-bottom: 10px; }
.maint-msg { color: var(--muted); font-size: 15px; line-height: 1.5; margin-bottom: 16px; }
.maint-eta { display: inline-flex; align-items: center; gap: 7px; background: var(--keek-tint); color: var(--keek-deep); padding: 9px 16px; border-radius: 12px; font-size: 13.5px; margin-bottom: 16px; }
.maint-foot { color: var(--muted-soft); font-size: 12.5px; }

/* Header banner for a SCHEDULED (not yet in effect) maintenance window */
.maint-banner { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #FFF4E5, #FFFFFF); border: 1px solid #f0e4d0; border-left: 3px solid #B06000; border-radius: 12px; padding: 10px 16px; margin-bottom: 16px; font-size: 13px; color: #5f6368; }
.maint-banner strong { color: #202124; }

/* ===================================================================== */
/* Dashboard Admin — dedicated layout: header + footer only, no side rails.
   Lives outside app_base.html on purpose (see admin_base.html). */
/* ===================================================================== */
.admin-shell { min-height: 100vh; display: flex; flex-direction: column; }
.admin-header { border-bottom: 1px solid var(--hair); background: var(--surface); }
.admin-header-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 14px 24px; }
.admin-header-title { flex: 1; min-width: 220px; text-align: left; }
.admin-header-title .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.admin-header-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.admin-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.admin-brand .glyph { width: 30px; height: 30px; display: inline-flex; }
.admin-brand-name { font-family: var(--wordmark); font-weight: 700; font-size: 17px; }
.admin-me { display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 5px 10px 5px 5px; border-radius: 999px; background: var(--paper); }
.admin-me .who { display: flex; flex-direction: column; line-height: 1.15; }
.admin-me .who strong { font-size: 13px; color: var(--ink); }
.admin-me .who small { font-size: 11px; color: var(--muted); }
.admin-logout { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--muted); }
.admin-logout:hover { color: var(--coral); background: #fdeceb; }
.admin-main { flex: 1; max-width: 1180px; width: 100%; margin: 0 auto; padding: 28px 24px 60px; }

.admin-tabnav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--hair); margin-bottom: 22px; padding-bottom: 0; }
.admin-tab-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; padding: 11px 16px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tab-btn:hover { color: var(--ink); }
.admin-tab-btn.on { color: var(--keek); border-bottom-color: var(--keek); }

/* App download badges — landing + login. Deliberately dark regardless of the
   page's own theme (same convention Apple/Google's own official badges use),
   so it always reads well. Placeholder store links until the real app exists. */
.app-download { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
/* Item — nao faz sentido mostrar "baixe nosso app" pra quem ja esta
   usando o app instalado (TWA/Capacitor/PWA) — a classe .is-app e
   adicionada bem cedo no <head>, antes de qualquer coisa pintar. */
html.is-app .app-download { display: none !important; }
.auth-form .app-download { margin-top: 14px; }
.app-download-label { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.app-download-label svg { width: 13px; height: 13px; color: #a15c00; }
.app-download-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.app-download-btn {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 12px;
  background: #16181c; border: 1px solid #2c2f34; color: #fff; text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.app-download-btn:hover { background: #24272c; transform: translateY(-1px); }
.app-download-btn svg { width: 22px; height: 22px; color: #fff; flex: none; }
.app-download-txt { display: flex; flex-direction: column; line-height: 1.2; }
.app-download-txt small { font-size: 10.5px; color: #b9bcc1; }
.app-download-txt strong { font-size: 14px; font-weight: 700; color: #fff; }

/* Staff login form embedded directly in the frozen maintenance page */
.maint-staff-login { margin-top: 20px; text-align: left; border-top: 1px solid var(--hair); padding-top: 16px; }
.maint-staff-login summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; list-style: none; }
.maint-staff-login summary::-webkit-details-marker { display: none; }
.maint-staff-login summary svg { width: 14px; height: 14px; }
.maint-login-form { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }

/* Real pagination for the Dashboard Admin's Usuarios tab */
.admin-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.admin-pagination .is-disabled { opacity: .4; pointer-events: none; }

/* Place actions (Follow/Post here/Save/Coleções) — shown always, visually
   dimmed and inert when the Place itself is deactivated, rather than hidden
   outright (clearer: "this exists, just not available right now"). */
.place-actions.is-disabled { opacity: .5; }
.place-actions.is-disabled button,
.place-actions.is-disabled a { cursor: not-allowed; }
.place-actions button[disabled] { opacity: 1; }

/* Place profile — cover banner + avatar upload (owner/manager only) */
.place-cover { height: 130px; border-radius: 16px 16px 0 0; background: url('/static/covers/place_default.png') center/cover, linear-gradient(120deg, var(--keek-tint), var(--paper)); position: relative; margin-bottom: -16px; }
.place-cover.has-img { background-size: cover; background-position: center; }
.place-hero { position: relative; }
.mark-wrap { position: relative; flex: 0 0 64px; }
.mark-wrap .avatar-cam { right: -4px; bottom: -4px; }
/* Default "Google Place" pin — the classic red teardrop marker, used only when
   the place has neither an owner-uploaded photo nor a category icon from Google. */
.place-hero .mark svg[data-icon="place-default"] { width: 40px; height: 40px; }

/* Default Place icon (no owner photo, no Google category icon) — used
   consistently everywhere a place's thumbnail appears. */
.place-ico-default svg { width: 26px; height: 26px; }
.lp-place-av-img { background: none; overflow: hidden; }
.lp-place-av-img img { width: 100%; height: 100%; object-fit: cover; }
.lp-place-av-default { background: var(--keek-tint); }
.lp-place-av-default svg { width: 28px; height: 28px; }

/* Admin — painel de uso das APIs do Google Maps Platform (barras elegantes,
   sem depender de biblioteca de gráfico nenhuma). */
.api-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.api-usage-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.api-usage-label { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.api-usage-pct { font-weight: 700; font-size: 13px; padding: 2px 8px; border-radius: var(--r-pill); }
.api-usage-pct.green { background: var(--green-tint); color: #0c6b50; }
.api-usage-pct.amber { background: #fef7e0; color: #7a5b00; }
.api-usage-pct.coral { background: #fce8e6; color: #c5221f; }
.api-usage-bar { height: 8px; border-radius: 4px; background: var(--hair); overflow: hidden; }
.api-usage-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
.api-usage-fill.green { background: var(--green); }
.api-usage-fill.amber { background: #b06000; }
.api-usage-fill.coral { background: var(--coral); }
.api-usage-nums { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.api-usage-nums b { color: var(--ink); }
html[data-theme="dark"] .api-usage-pct.green { background: #1e3a24; color: #81c995; }
html[data-theme="dark"] .api-usage-pct.amber { background: #3a2e0f; color: #f2b94b; }
html[data-theme="dark"] .api-usage-pct.coral { background: #3a1f1f; color: #f28b82; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .api-usage-pct.green { background: #1e3a24; color: #81c995; }
  html:not([data-theme]) .api-usage-pct.amber { background: #3a2e0f; color: #f2b94b; }
  html:not([data-theme]) .api-usage-pct.coral { background: #3a1f1f; color: #f28b82; }
}

/* Item — linhas de lista simples pra Negócios/Eventos dentro das abas inline
   do perfil do Place (Classificados/Vagas reaproveitam o ad_card existente). */
.pl-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hair); text-decoration: none; color: inherit; }
.pl-item:last-child { border-bottom: none; }
.pl-item:hover { background: var(--paper); }
.pl-item > svg:last-child { width: 16px; height: 16px; color: var(--muted-soft); flex: none; }
.pl-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--keek-tint); color: var(--keek-deep); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pl-ico svg { width: 18px; height: 18px; }
.pl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pl-name { font-weight: 600; font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Item — versão compacta do place_card, pra caber na coluna lateral (menor
   que o card padrão usado na área principal). */
.pc-compact { padding: 10px 12px; margin-bottom: 8px; }
.pcc-top { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; margin-bottom: 8px; }
.pcc-ico { width: 30px; height: 30px; flex: 0 0 30px; }
.pcc-ico svg { width: 16px; height: 16px; }
.pcc-body { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.pcc-name { font-weight: 600; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcc-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcc-actions { display: flex; align-items: center; gap: 6px; }
.pcc-chip { font-size: 11px; padding: 2px 8px; }
.pcc-btn { padding: 5px 8px; }
.pcc-btn svg { width: 14px; height: 14px; }
.pcc-btn-full { width: 100%; font-size: 12.5px; padding: 6px 10px; }

/* Item — Capa/Mapa/Place web movidos pra dentro da própria área de mídia,
   como um alternador discreto flutuando por cima (funciona bem sobre foto,
   mapa ou o grafo de Place web) — e a área ganhou +70% de altura (130px -> 220px). */
.place-media { position: relative; height: 220px; border-radius: 16px 16px 0 0; overflow: hidden; margin-bottom: -16px; background: var(--surface); }
.place-media-seg { position: absolute; top: 12px; right: 12px; z-index: 5; display: flex; gap: 4px; background: rgba(0,0,0,.42); backdrop-filter: blur(6px); border-radius: 999px; padding: 3px; }
.place-media-seg-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: none; background: transparent; color: rgba(255,255,255,.85); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s ease, color .15s ease; }
.place-media-seg-btn svg { width: 14px; height: 14px; }
.place-media-seg-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.place-media-seg-btn.on { background: #fff; color: var(--ink); }

/* Item — mesmo componente visual de "Capa / Mapa / Place web", só que pra
   usar sobre fundo normal (nao em cima de foto) — reaproveitado no
   seletor de idioma do rodapé e no card de gestor do lugar. */
.seg-pills { display: inline-flex; gap: 4px; background: var(--keek-tint, #f1f3f4); border-radius: 999px; padding: 3px; }
.seg-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  border: none; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease;
}
.seg-pill svg { width: 14px; height: 14px; }
.seg-pill .flag { font-size: 13px; line-height: 1; }
.seg-pill:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.seg-pill.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.place-media-panel { position: absolute; inset: 0; }
.place-media-panel[hidden] { display: none; }
.place-media-fill { width: 100%; height: 100%; }
.place-media-panel-scroll { overflow-y: auto; background: var(--surface); }
.place-media .place-cover { height: 100%; margin-bottom: 0; border-radius: 0; }
.place-media .constellation { height: 100%; border-radius: 0; box-sizing: border-box; }

/* Item — aviso elegante de novas publicações (verificado a cada 5 min) e
   sentinela invisível pra rolagem infinita do mural do Place. */
.place-new-posts-banner { margin-bottom: 12px; text-align: center; }
.place-new-posts-banner button { display: inline-flex; align-items: center; gap: 7px; background: var(--keek); color: #fff; border: none; padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(26,115,232,.3); transition: transform .15s ease; }
.place-new-posts-banner button:hover { transform: translateY(-1px); }
.place-new-posts-banner button svg { width: 15px; height: 15px; }
.place-posts-sentinel { height: 1px; }
.place-posts-loading { text-align: center; padding: 16px; color: var(--muted); font-size: 13px; }

/* Item — formulário da lista de espera (tela inicial e página de convite
   necessário), elegante, funciona em coluna no mobile. */
.waitlist-form { max-width: 720px; margin: 0 auto; }
.waitlist-row { display: flex; gap: 8px; flex-wrap: wrap; }
.waitlist-input { flex: 1; min-width: 140px; padding: 11px 14px; border-radius: var(--r-md); border: 1.5px solid var(--hair); font-size: 14px; background: var(--surface); color: var(--ink); }
.waitlist-input:focus { outline: none; border-color: var(--keek); }
/* Item — o campo de data nao aceita placeholder de verdade (o navegador
   mostra so o formato dd/mm/aaaa), por isso precisa de um rotulo visivel
   de verdade, nao so aria-label — senao ninguem entende que e a data de
   nascimento antes de clicar. */
.waitlist-date-field { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 4px; }
.waitlist-date-label { font-size: 12px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.waitlist-date-label svg { width: 13px; height: 13px; }
.waitlist-date-field .waitlist-input { width: 100%; }
.waitlist-submit { flex: 0 0 auto; white-space: nowrap; }
.waitlist-fineprint { font-size: 12px; color: var(--muted-soft); margin: 8px 0 0; text-align: center; }
.waitlist-form-compact .waitlist-row { flex-direction: column; }
.waitlist-form-compact .waitlist-input, .waitlist-form-compact .waitlist-submit { width: 100%; }
@media (max-width: 720px) { .waitlist-row { flex-direction: column; } .waitlist-input, .waitlist-submit { width: 100%; } }

/* Item — seção de pré-lançamento: um "momento" visual só dela — fundo escuro
   dramático (contrasta de propósito com o resto da página, clara), brilho
   ambiente atrás da contagem, e o "passe de membro fundador" como elemento de
   assinatura, remetendo a ingresso/credencial em vez de um formulário genérico. */
.lp-launch { position: relative; padding: clamp(56px, 8vw, 96px) 20px; overflow: hidden;
  background: linear-gradient(165deg, #0a0e1c, #121a30 55%, #0a0e1c); border-radius: 28px; margin: clamp(20px, 4vw, 40px) 0; }
.lp-launch-glow { position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(26,115,232,.35), rgba(30,140,93,.16) 45%, transparent 70%); filter: blur(10px); pointer-events: none; }
.lp-launch-inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.lp-launch-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #f2b134; }
.lp-launch-eyebrow svg { width: 14px; height: 14px; }
.lp-launch-clock { display: flex; align-items: baseline; gap: 10px; }
.lp-launch-n { font-family: var(--display); font-weight: 800; font-size: clamp(64px, 11vw, 108px); line-height: .9; color: #fff;
  text-shadow: 0 0 40px rgba(242,177,52,.35); }
.lp-launch-unit { font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2.4vw, 24px); color: #f2b134; }
.lp-launch-sub { font-size: 14.5px; color: rgba(255,255,255,.62); line-height: 1.6; margin: -10px 0 0; max-width: 380px; }
.lp-launch-quote { margin: 8px 0 0; padding: 0; max-width: 480px; }
.lp-launch-quote p { font-family: var(--display); font-style: italic; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.92); margin: 0 0 8px; }
.lp-launch-quote cite { font-size: 12.5px; font-style: normal; font-weight: 600; color: #f2b134; letter-spacing: .02em; }

/* O passe de membro fundador */
.lp-pass { width: 100%; max-width: 440px; background: var(--surface); border-radius: 18px; margin-top: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45); text-align: left; overflow: hidden; }
.lp-pass-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 22px;
  background: linear-gradient(120deg, var(--keek-tint), var(--green-tint)); }
.lp-pass-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--keek-deep); text-transform: uppercase; }
.lp-pass-label svg { width: 13px; height: 13px; }
.lp-pass-num { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--ink); letter-spacing: .04em; }
.lp-pass-perf { height: 0; border-top: 2px dashed var(--hair); position: relative; }
.lp-pass-perf::before, .lp-pass-perf::after { content: ""; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: #0a0e1c; }
.lp-pass-perf::before { left: -8px; }
.lp-pass-perf::after { right: -8px; }
.lp-pass-body { padding: 22px; }
.lp-pass-alt { font-size: 13px; color: var(--muted); margin: 14px 0 0; text-align: center; }

/* Item — selo "Pioneiro Descobridor" (primeiras N pessoas/negócios do
   Freekeek) — cor dourada, remetendo à mesma paleta da seção de lançamento. */
.pioneer-chip { background: #fff4d9; color: #8a5a00; border: 1px solid #f2d693; }
html[data-theme="dark"] .pioneer-chip { background: #3a2e0f; color: #f2c94c; border-color: #5c4a1a; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .pioneer-chip { background: #3a2e0f; color: #f2c94c; border-color: #5c4a1a; } }

/* Item — divisor discreto "New to Freekeek?" antes do botão verde de criar conta */
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.auth-divider span { font-size: 12.5px; color: var(--muted-soft); white-space: nowrap; }

/* Item — campo opcional de motivação + nota da promoção da camiseta, no
   formulário da lista de espera. */
.waitlist-motivation { margin-top: 8px; }
.waitlist-textarea { width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: var(--r-md); border: 1.5px solid var(--hair);
  font-size: 13.5px; font-family: var(--body); background: var(--surface); color: var(--ink); resize: vertical; }
.waitlist-textarea:focus { outline: none; border-color: var(--keek); }
.waitlist-tshirt-note { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
.waitlist-tshirt-note svg { width: 14px; height: 14px; color: #f2b134; flex: none; margin-top: 1px; }
.waitlist-tshirt-note a { color: var(--keek-deep); font-weight: 600; }
.waitlist-submit-full { width: 100%; margin-top: 12px; justify-content: center; }

/* Item — Selo Eco Freekeek: verde estiloso, com folha, pra Places que
   comprovam alguma ação de sustentabilidade. */
.eco-chip { background: #e6f4ea; color: #0f7a3d; border: 1px solid #b7e4c7; }
.eco-chip svg { color: #1e8e3e; }
html[data-theme="dark"] .eco-chip { background: #16321f; color: #6fcf97; border-color: #24512f; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) .eco-chip { background: #16321f; color: #6fcf97; border-color: #24512f; } }

/* Item — banner da campanha de brindes, na tela inicial (pré-lançamento). */
.lp-gifts-banner { display: flex; align-items: center; gap: 12px; background: rgba(242,177,52,.1); border: 1px solid rgba(242,177,52,.3); border-radius: 14px; padding: 14px 20px; max-width: 440px; text-align: left; }
.lp-gifts-icon { display: inline-flex; flex: none; color: #f2b134; }
.lp-gifts-icon svg { width: 22px; height: 22px; }
.lp-gifts-banner strong { color: #fff; font-size: 14px; display: block; margin-bottom: 3px; }
.lp-gifts-banner p { color: rgba(255,255,255,.7); font-size: 12.5px; margin: 0; }

/* Item — Dashboard Admin: título em caixa alta elegante (mesma linguagem
   visual do cabeçalho de pré-lançamento), abas só com ícone (igual ao perfil
   de usuário, com tooltip), título da aba atual antes do conteúdo, e o
   painel inteiro só aparece na versão web (não faz sentido administrar
   pelo celular). */
.admin-title { font-family: var(--display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; margin: 0; color: var(--ink); line-height: 1.2; }
.admin-tab-title { font-family: var(--display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 14px; padding-top: 14px; border-top: 1px solid var(--hair); }
@media (max-width: 860px) {
  .admin-header-title, .admin-tabnav, .admin-tab-title, [data-admin-panel] { display: none !important; }
  .admin-mobile-note { display: block !important; }
}
.admin-mobile-note { display: none; text-align: center; padding: 60px 24px; color: var(--muted); font-size: 14px; }

/* Item — editor de traduções do admin: os 3 idiomas lado a lado, elegante,
   fácil de comparar/editar (e escalável pra mais idiomas no futuro). */
.tr-table th { white-space: nowrap; font-size: 12.5px; }
.tr-table td { padding: 6px 10px; vertical-align: middle; }
.tr-key { font-size: 11.5px; color: var(--muted); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tr-table input[type="text"] { width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--hair); font-size: 13px; background: var(--surface); color: var(--ink); }
.tr-table input[type="text"]:focus { outline: none; border-color: var(--keek); }

/* Item — menu lateral do editor de traduções, organizado por categoria
   (Sistema/Páginas/Funcionalidades), com ícone por item — bem mais
   intuitivo do que rolar uma lista longa de cards empilhados. */
.tr-layout { display: flex; gap: 20px; align-items: flex-start; }
.tr-sidenav { flex: 0 0 240px; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 100px); overflow-y: auto; }
.tr-sidenav-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-soft); margin: 14px 0 4px; padding: 0 10px; }
.tr-sidenav-cat:first-child { margin-top: 0; }
.tr-sidenav-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; border: none; background: none; color: var(--ink); font-size: 13px; cursor: pointer; }
.tr-sidenav-item svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.tr-sidenav-item span:not(.tr-sidenav-count) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-sidenav-item:hover { background: var(--paper); }
.tr-sidenav-item.on { background: var(--keek-tint); color: var(--keek-deep); font-weight: 600; }
.tr-sidenav-item.on svg { color: var(--keek); }
.tr-sidenav-count { font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--paper); border-radius: 999px; padding: 1px 7px; }
.tr-sidenav-item.on .tr-sidenav-count { background: rgba(255,255,255,.6); }
.tr-content { flex: 1; min-width: 0; }
.tr-group-panel { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg, 14px); padding: 18px 20px; }
@media (max-width: 860px) {
  .tr-layout { flex-direction: column; }
  .tr-sidenav { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; }
}

/* Item — abas internas dentro de um grupo de tradução (ex.: Negócios ->
   Lista / Perfil), quando o grupo tem mais de uma área de conteúdo. */
.tr-tabnav { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--hair); padding-bottom: 10px; }
.tr-tabnav-btn { padding: 6px 14px; border-radius: 999px; border: none; background: var(--paper); color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tr-tabnav-btn.on { background: var(--keek); color: #fff; }