/* ---------- tokens ---------- */
:root {
  /* beewave: mel, azul-onda e marinho */
  --bg: #f4f7ff;
  --surface: #ffffff;
  --surface-2: #edf1fb;
  --border: #dfe5f2;
  --border-strong: #c7d0e4;
  --text: #1b1f3b;
  --muted: #5e6688;
  --primary: #2a5bd7;
  --primary-hover: #2149b8;
  --primary-soft: #e6edff;
  --primary-soft-hover: #d8e3ff;
  --on-primary: #ffffff;
  --honey: #ffc21a;
  --honey-soft: #fff4d1;
  --logo-ink: #1b1f3b;
  --pink: #e8407a;
  --pink-soft: #ffeaf1;
  --pink-hover: #d42f69;
  --radius: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e1f;
    --surface: #12152b;
    --surface-2: #1a1e3a;
    --border: #252b4d;
    --border-strong: #353c68;
    --text: #eef1fa;
    --muted: #a3acc9;
    --primary: #8fb0ff;
    --primary-hover: #a9c2ff;
    --primary-soft: #1c2550;
    --primary-soft-hover: #243066;
    --on-primary: #0b0e1f;
    --honey-soft: #33290a;
    --logo-ink: #12152b;
    --pink: #f2679a;
    --pink-soft: #3a1c29;
    --pink-hover: #f5809f;
    color-scheme: dark;
  }
}

@font-face {
  font-family: "Fredoka";
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/fredoka-600.woff2") format("woff2");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
[x-cloak] { display: none !important; }

.i {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.name { font-weight: 600; }
a.name:hover { text-decoration: underline; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ---------- avatares ---------- */
.av {
  --s: 40px;
  width: var(--s); height: var(--s); flex: none;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: hsl(var(--h) 62% 55%);
  color: #fff;
  font-weight: 650;
  font-size: calc(var(--s) * 0.38);
  letter-spacing: 0.02em;
  user-select: none;
}
.ctile {
  border-radius: 28%;
  background: hsl(var(--h) 75% 92%);
  color: hsl(var(--h) 60% 34%);
}
@media (prefers-color-scheme: dark) {
  .ctile { background: hsl(var(--h) 35% 22%); color: hsl(var(--h) 75% 76%); }
}

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border: 0; border-radius: 10px;
  background: var(--primary); color: var(--on-primary);
  font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background 0.15s;
}
.btn:hover { background: var(--primary-hover); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.soft { background: var(--primary-soft); color: var(--primary); }
.btn.soft:hover { background: var(--primary-soft-hover); }
.btn.block { width: 100%; }
.btn .i { width: 18px; height: 18px; }
.btn.htmx-request { opacity: 0.7; }
.btn.danger { background: var(--pink); }
.btn.danger:hover { background: var(--pink-hover); }

.ghost, .act {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 10px;
  border: 0; border-radius: 10px;
  background: none; color: var(--muted);
  font-weight: 500; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ghost:hover, .ghost.on { background: var(--surface-2); color: var(--primary); }
.act:hover { background: var(--surface-2); color: var(--text); }

.icon-btn {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: none; color: var(--muted); cursor: pointer;
}
.icon-btn:hover, .icon-btn.on { background: var(--surface-2); color: var(--primary); }
.icon-btn .dot {
  position: absolute; top: 8px; right: 9px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pink); border: 2px solid var(--surface);
}

/* ---------- topo ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-in {
  max-width: 1240px; height: 60px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 8px; }
.logo { width: 34px; height: 34px; flex: none; }
.logo .hex { fill: var(--honey); stroke: var(--honey); }
.logo .ink { stroke: var(--logo-ink); }
.logo .dot { fill: var(--logo-ink); }
.wordmark { font: 600 25px/1 "Fredoka", system-ui, sans-serif; letter-spacing: -0.02em; color: var(--text); }
.wordmark span { color: var(--primary); }
.mascot { display: block; width: 168px; height: auto; margin: 0 auto 8px; }
.mascot .wing { fill: var(--primary-soft); stroke: var(--text); }
.mascot .body { fill: var(--honey); }
.mascot .stripe, .mascot .face { fill: var(--logo-ink); }
.mascot .line { stroke: var(--text); }
.mascot .smile { stroke: var(--logo-ink); }
.mascot .trail { stroke: var(--primary); }
.search {
  flex: 1; max-width: 420px; height: 40px; padding: 0 14px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border-radius: 999px; color: var(--muted);
}
.search:focus-within { box-shadow: 0 0 0 2px var(--primary); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ---------- estrutura ---------- */
.shell {
  max-width: 1240px; margin: 0 auto; padding: 24px 20px 48px;
  display: grid; grid-template-columns: 232px minmax(0, 1fr) 300px; gap: 24px;
  align-items: start;
}
.shell.wide { grid-template-columns: 232px minmax(0, 1fr); }
.main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.side-left { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 16px; }
.side-right { display: flex; flex-direction: column; gap: 16px; }

.mini-profile { display: flex; align-items: center; gap: 12px; padding: 14px; }
.mini-profile:hover { border-color: var(--border-strong); }
.mini-profile div { display: flex; flex-direction: column; min-width: 0; }
.mini-profile strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  color: var(--muted); font-weight: 500;
}
.side-nav a:hover { background: var(--surface); color: var(--text); }
.side-nav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

.slogan-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border-radius: var(--radius);
  background: #1b1f3b; color: #fff;
  position: relative; overflow: hidden;
}
/* um favo de mel saindo do canto */
.slogan-card::after {
  content: ""; position: absolute; right: -26px; bottom: -34px;
  width: 104px; height: 116px; background: var(--honey); opacity: 0.9;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
@media (prefers-color-scheme: dark) { .slogan-card { background: var(--surface-2); border: 1px solid var(--border); } }
.slogan-card p { font: 600 19px/1.25 "Fredoka", system-ui, sans-serif; padding-right: 40px; position: relative; z-index: 1; }
.slogan-card a { font-size: 13px; font-weight: 600; color: #a9c2ff; position: relative; z-index: 1; }
.slogan-card a:hover { color: #fff; text-decoration: underline; }

/* ---------- cards laterais ---------- */
.side-card { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.side-title { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; }
.side-title .i { width: 18px; height: 18px; color: var(--primary); }
.side-title .count { color: var(--muted); font-weight: 500; }
.side-title .more { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--primary); }
.grid-9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
.grid-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  font-size: 12px; color: var(--muted); text-align: center;
}
.grid-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-item:hover { color: var(--text); }
.grid-item .av { transition: transform 0.15s; }
.grid-item:hover .av { transform: translateY(-2px); }

ul.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
ul.rules li { display: flex; justify-content: space-between; gap: 12px; }
ul.rules li span:first-child { color: var(--muted); }
ul.rules li span:last-child { font-weight: 550; text-align: right; }

/* ---------- composer ---------- */
.composer { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.composer-row { display: flex; gap: 12px; }
.composer textarea {
  flex: 1; min-height: 48px; padding: 9px 0;
  border: 0; outline: 0; resize: none; background: none;
  font-size: 16px;
}
.composer textarea::placeholder { color: var(--muted); }
.composer-photo { aspect-ratio: 16 / 7; }
.composer-bar {
  display: flex; align-items: center; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.composer-bar { flex-wrap: wrap; }
.composer-bar .btn { margin-left: auto; }
.ghost > span { display: inline-flex; }
.ghost.off { color: var(--pink); }

/* ---------- feed ---------- */
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 0; }
.feed-head h2 { font-size: 18px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--muted);
}
.pill .i { width: 16px; height: 16px; }
.pill:hover { color: var(--primary); border-color: var(--primary); }
.feed { display: flex; flex-direction: column; gap: 16px; }
.feed-end {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 20px; font-size: 14px; color: var(--muted); text-align: center;
}
.feed-end .i { color: var(--primary); }

/* ---------- post ---------- */
.post { padding: 16px; display: flex; flex-direction: column; gap: 12px; animation: rise 0.25s ease-out; }
.post-head { display: flex; align-items: center; gap: 12px; }
.post-meta { flex: 1; min-width: 0; }
.tag { color: var(--primary); font-weight: 500; }
.tag:hover { text-decoration: underline; }
.post-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.why {
  padding: 12px 14px; border-radius: 10px;
  background: var(--primary-soft); font-size: 14px;
}
.why strong { display: block; margin-bottom: 4px; color: var(--primary); }
.why ul { margin: 0; padding-left: 18px; }
.post-actions { display: flex; gap: 4px; margin: -4px -6px -6px; }
.act.like:hover, .act.like.on { color: var(--pink); }
.act.like.on .i { fill: currentColor; animation: pop 0.3s; }
.act.on { color: var(--primary); }
.act.off { cursor: default; font-size: 13px; }
.act.off:hover { background: none; color: var(--muted); }

/* menu ⋯ */
.menu-wrap { position: relative; }
.menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 10;
  min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
}
.menu button {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; text-align: left; font-weight: 500; cursor: pointer;
}
.menu button:hover:not(:disabled) { background: var(--surface-2); }
.menu button:disabled { opacity: 0.55; cursor: default; }
.menu .danger { color: var(--pink); }
.menu .i { width: 18px; height: 18px; }

.flag-note {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--pink-soft); color: var(--pink); font-size: 13px; font-weight: 500;
}
.flag-note .i { width: 16px; height: 16px; }

/* moderação: aviso que só o autor vê */
.post.is-removed > :not(.post-head):not(.mod-note), .comment.is-removed .bubble { opacity: 0.55; }
.mod-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--border-strong);
  background: var(--surface-2); font-size: 13px; line-height: 1.5;
}
.mod-note > .i { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--muted); }
.mod-note p { margin: 2px 0 0; }
.mod-note .muted .i { width: 14px; height: 14px; vertical-align: -2px; }
.mod-note form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.mod-note textarea {
  width: 100%; resize: vertical; font: inherit; color: inherit; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.mod-actions { display: flex; align-items: center; gap: 12px; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.mod-note a, .mod-note .link { color: var(--primary); font-weight: 600; }
.auto-tag { font-weight: 600; text-decoration: underline dotted; cursor: help; }
.comment .mod-note { margin-bottom: 6px; }

/* regras públicas */
div.rules > .card { padding: 20px 22px; }
.rules h2 { font-size: 17px; margin: 0 0 8px; }
.rules ol, .rules ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.rules .card + .card { margin-top: 14px; }
.rules .sev { color: var(--pink); font-weight: 600; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 8px; }
.legal a, .account-note a, .algo-hero a { color: inherit; text-decoration: underline; }
.public-main .algo-hero { margin-bottom: 14px; }
.legal-links { margin: 4px 12px 0; color: var(--muted); }
.legal-links a { color: inherit; }

/* sua conta e seus dados */
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; margin-bottom: 14px; }
.account-grid h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0; }
.danger-zone { border-color: var(--pink-soft); }
.danger-zone h2 { color: var(--pink); }
.confirm-delete summary { list-style: none; cursor: pointer; }
.confirm-delete summary::-webkit-details-marker { display: none; }
.confirm-delete[open] summary { display: none; }

/* comentários */
.comments { margin: 0 -16px -16px; padding: 14px 16px 16px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.comments.htmx-request::before { content: "Carregando…"; color: var(--muted); font-size: 13px; }
.clist { display: flex; flex-direction: column; gap: 12px; }
.cempty:not(:only-child) { display: none; }
.comment { display: flex; gap: 10px; animation: rise 0.2s ease-out; }
.comment-body { min-width: 0; }
.bubble {
  display: inline-block; max-width: 100%;
  padding: 8px 12px; border-radius: 4px 14px 14px 14px;
  background: var(--surface); border: 1px solid var(--border);
}
.bubble .name { font-size: 13px; }
.bubble p { font-size: 14px; overflow-wrap: anywhere; }
.comment-meta { display: flex; align-items: center; gap: 10px; margin: 3px 0 0 12px; font-size: 12px; color: var(--muted); }
.link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.link:hover { color: var(--pink); text-decoration: underline; }
.flagged { display: inline-flex; align-items: center; gap: 4px; color: var(--pink); font-weight: 600; }
.flagged .i { width: 13px; height: 13px; }
.comment.is-hidden .bubble { opacity: 0.6; border-style: dashed; }
.comment.is-hidden .bubble.hidden-note { opacity: 1; }
.hidden-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.hidden-note .i { width: 15px; height: 15px; flex: none; }
.hidden-note .link:hover { color: var(--primary); }
.hidden-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-weight: 600; cursor: help; }
.hidden-tag .i { width: 12px; height: 12px; }
.confirm { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 500; }
.link.danger { color: var(--pink); }
.cform { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cform input {
  flex: 1; min-width: 0; height: 38px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); outline: 0;
}
.cform input:focus { border-color: var(--primary); }
.cform .btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; }

/* modal de denúncia */
.modal-wrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgb(10 12 18 / 0.5); }
.modal {
  position: relative; width: 100%; max-width: 480px; max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 22px; display: flex; flex-direction: column; gap: 16px;
}
.modal header { display: flex; gap: 14px; }
.modal h2 { font-size: 18px; margin-bottom: 4px; }
.modal-icon {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center; background: var(--pink-soft); color: var(--pink);
}
.reasons { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.reasons legend { padding: 0; margin-bottom: 6px; }
.reason {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.reason:hover { border-color: var(--border-strong); }
.reason:has(input:checked) { border-color: var(--pink); background: var(--pink-soft); }
.reason input { margin: 3px 0 0; accent-color: var(--pink); }
.reason span { display: flex; flex-direction: column; }
.reason strong { font-size: 14px; font-weight: 600; }
.reason small { font-size: 12.5px; color: var(--muted); }
.modal textarea {
  width: 100%; padding: 10px 12px; resize: vertical;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); outline: 0;
}
.modal textarea:focus { border-color: var(--primary); background: var(--surface); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* foto ilustrativa flat (sol + montanhas), gerada só com CSS */
.photo {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 10; border-radius: 10px;
  background: hsl(var(--h) 70% 74%);
}
.photo::before {
  content: ""; position: absolute; top: 16%; right: 18%;
  width: 20%; aspect-ratio: 1; border-radius: 50%;
  background: hsl(calc(var(--h) + 35) 95% 90%);
}
.photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: hsl(var(--h) 50% 44%);
  clip-path: polygon(0 62%, 22% 22%, 42% 56%, 64% 8%, 100% 66%, 100% 100%, 0 100%);
}
.photo.sq { aspect-ratio: 1; border-radius: 8px; }

/* ---------- perfil ---------- */
.profile { overflow: hidden; }
/* Capa: a cor do perfil com uma estampa por cima, ou uma foto. As estampas
   são SVG em data: (o CSP libera) em branco translúcido, para combinar com
   qualquer cor. Sem data-style (página de bloqueio) vale a de bolhas. */
.cover { position: relative; height: 150px; overflow: hidden; background: hsl(var(--h) 65% 60%); }
.cover::before, .cover::after { content: ""; position: absolute; border-radius: 50%; }
.cover::before {
  right: -40px; top: -90px; width: 260px; height: 260px;
  background: hsl(calc(var(--h) + 25) 75% 70%);
}
.cover::after {
  left: 32%; top: 64px; width: 180px; height: 180px;
  background: hsl(calc(var(--h) - 20) 60% 50%);
}
.cover[data-style]:not([data-style="bolhas"])::before, .cover[data-style]:not([data-style="bolhas"])::after { display: none; }
.cover[data-style="favos"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 0v32' fill='none' stroke='%23fff' stroke-opacity='.28' stroke-width='2'/%3E%3C/svg%3E"),
    linear-gradient(135deg, hsl(var(--h) 65% 60%), hsl(calc(var(--h) + 20) 70% 52%));
  background-size: 56px 98px, auto;
}
.cover[data-style="ondas"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36'%3E%3Cpath d='M0 18q30-16 60 0t60 0' fill='none' stroke='%23fff' stroke-opacity='.32' stroke-width='3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, hsl(var(--h) 65% 64%), hsl(calc(var(--h) - 15) 62% 48%));
  background-size: 120px 36px, auto;
}
.cover[data-style="listras"] {
  background-image: repeating-linear-gradient(135deg, transparent 0 22px, hsl(0 0% 100% / .16) 22px 44px),
    linear-gradient(90deg, hsl(var(--h) 65% 58%), hsl(calc(var(--h) + 30) 70% 62%));
}
.cover[data-style="liso"] { background-image: linear-gradient(120deg, hsl(var(--h) 65% 56%), hsl(calc(var(--h) + 35) 72% 66%)); }
.cover.has-photo { background: var(--surface-2); }
.cover.has-photo::before, .cover.has-photo::after { display: none; }
.cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-head {
  position: relative; margin-top: -44px; padding: 0 20px;
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px;
}
.profile-av .av { box-sizing: content-box; border: 4px solid var(--surface); }
.profile-id { flex: 1; min-width: 200px; padding-bottom: 4px; }
.profile-id h1 { font-size: 24px; letter-spacing: -0.02em; }
.profile-id .muted { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.profile-id .i { width: 16px; height: 16px; }
.profile-id .sep { margin: 0 2px; }
.profile-actions { display: flex; gap: 8px; padding-bottom: 6px; }
.mood {
  margin: 16px 20px 0; padding: 10px 14px; border-radius: 10px;
  background: var(--surface-2); color: var(--muted); font-style: italic;
}
.now-playing {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin: 10px 20px 0; padding: 8px 14px; border-radius: 10px;
  background: var(--surface-2); font-size: 14px;
}
.now-playing:not(:has(span)) { display: none; }
.now-playing a { color: inherit; }
.np-icon { display: inline-flex; color: var(--muted); }
.np-icon .i { width: 16px; height: 16px; }
.np-icon.live { color: var(--primary); animation: np-pulse 1.6s ease-in-out infinite; }
@keyframes np-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .np-icon.live { animation: none; } }
.np-label { font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.np-via { margin-left: auto; font-size: 12px; color: var(--muted); }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 16px 20px 0; padding: 14px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stats div { display: flex; flex-direction: column-reverse; align-items: center; }
.stats dt { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stats dd { margin: 0; font-size: 20px; font-weight: 700; }
.about { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.about h3 { font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { padding: 4px 11px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 550; }
.tabs { display: flex; gap: 4px; padding: 0 12px; border-top: 1px solid var(--border); overflow-x: auto; }
.tabs button {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: -1px; padding: 14px 12px;
  border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--muted); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { color: var(--primary); border-color: var(--primary); }
.tabs .i { width: 18px; height: 18px; }

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.photo-grid .photo { animation: rise 0.25s ease-out; }
.empty { grid-column: 1 / -1; padding: 32px; text-align: center; color: var(--muted); }

.scraps-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.scrap-form { display: flex; align-items: center; gap: 10px; }
.scrap-form input {
  flex: 1; min-width: 0; height: 40px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); outline: 0;
}
.scrap-form input:focus { border-color: var(--primary); background: var(--surface); }
.scrap-form .btn { width: 40px; height: 40px; padding: 0; }
.scraps { border-top: 1px solid var(--border); margin-top: 4px; }
.scrap { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); animation: rise 0.25s ease-out; }
.scrap:last-child { border-bottom: 0; padding-bottom: 2px; }
.scrap-body { flex: 1; min-width: 0; }
.scrap-body p { margin-top: 2px; overflow-wrap: anywhere; }

.list { display: flex; flex-direction: column; gap: 12px; }
.testimonial { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.testimonial blockquote {
  margin: 0; padding-left: 16px;
  border-left: 3px solid var(--pink);
  font-size: 16px; line-height: 1.6;
}
.t-author { display: flex; align-items: center; gap: 10px; font-size: 14px; }

/* ---------- comunidades ---------- */
.page-head { padding: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.page-head h1 { font-size: 22px; letter-spacing: -0.02em; }
.page-head p { margin-top: 4px; max-width: 520px; }
.grid-title { margin: 22px 0 12px; font-size: 16px; }
.grid-title:first-of-type { margin-top: 4px; }
.comm-hot { display: flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; font-size: 13px; }
.comm-hot .i { width: 15px; height: 15px; }
.comm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.comm { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.comm:hover { border-color: var(--border-strong); }
.comm-body { flex: 1; }
.comm-body h3 { font-size: 16px; }
.comm-body p { margin-top: 6px; font-size: 14px; color: var(--muted); }
.comm .btn { align-self: flex-start; }
.comm-body h3 .name { color: var(--text); }
.comm-body h3 .name:hover { color: var(--primary); }
.lock .i, .tag .i { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted); }
.btn.static { cursor: default; }
.privacy { display: grid; gap: 6px; }
.privacy .label { font-weight: 600; font-size: 14px; }
.privacy .seg { width: fit-content; }
.privacy .seg label { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.privacy .seg .i { width: 16px; height: 16px; }

/* página da comunidade */
.comm-head { padding: 20px; display: grid; gap: 14px; }
.comm-head-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.comm-id { flex: 1; min-width: 200px; display: grid; gap: 4px; }
.comm-id h1 { font-size: 22px; letter-spacing: -0.02em; }
.comm-id .i { width: 14px; height: 14px; vertical-align: -2px; }
.comm-id a { color: var(--primary); font-weight: 500; }
.comm-desc { color: var(--text); }
.comm-head .on-profile { border-top: 1px solid var(--border); padding-bottom: 0; }
.owner-panel h3 { display: flex; align-items: center; gap: 8px; }
.owner-panel h3 .i { width: 18px; height: 18px; color: var(--primary); }
.owner-panel .person .btn { padding-inline: 14px; }
.comm-note { padding: 14px 16px; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.comm-note .i { width: 18px; height: 18px; }
.comm-locked { padding: 32px 24px; display: grid; justify-items: center; gap: 10px; text-align: center; }
.comm-locked p { max-width: 420px; }
.comm-locked .small .i { width: 14px; height: 14px; vertical-align: -2px; }
.members-all summary { cursor: pointer; font-size: 14px; color: var(--primary); font-weight: 500; }
.members-all[open] summary { margin-bottom: 6px; }
.side-card .small .i { width: 14px; height: 14px; vertical-align: -2px; }

/* ---------- meu algoritmo ---------- */
.algo-hero {
  position: relative; overflow: hidden;
  padding: 28px; border-radius: var(--radius);
  background: var(--primary); color: var(--on-primary);
}
.algo-hero::before, .algo-hero::after {
  content: ""; position: absolute; border-radius: 50%; background: rgb(255 255 255 / 0.1);
}
.algo-hero::before { width: 240px; height: 240px; right: -60px; top: -80px; }
.algo-hero::after { width: 140px; height: 140px; right: 120px; bottom: -90px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85;
}
.eyebrow .i { width: 16px; height: 16px; }
.algo-hero h1 { position: relative; max-width: 640px; margin: 10px 0 8px; font-size: clamp(24px, 4vw, 34px); letter-spacing: -0.025em; }
.algo-hero p { position: relative; max-width: 560px; opacity: 0.9; }

.algo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.algo-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.algo-side { position: sticky; top: 84px; }
.setting { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.setting h3 { font-size: 15px; margin-bottom: 4px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; cursor: pointer; }
.row + .row { border-top: 1px solid var(--border); }
.row div { display: flex; flex-direction: column; }
.row.locked { cursor: default; }
.row.locked .i { color: var(--muted); }

.switch {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  position: relative; width: 44px; height: 26px; border-radius: 999px;
  background: var(--border-strong); cursor: pointer; transition: background 0.2s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform 0.2s;
}
.switch:checked { background: var(--primary); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.seg label {
  flex: 1; padding: 8px 10px; border-radius: 9px;
  text-align: center; font-size: 14px; font-weight: 550; color: var(--muted); cursor: pointer;
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--primary); }

.mute-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 8px; }
.mute {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 14px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.mute:hover { border-color: var(--border-strong); }
.mute input { position: absolute; opacity: 0; pointer-events: none; }
.mute span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mute em {
  display: none; margin-left: auto;
  font-style: normal; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--pink);
}
.mute:has(input:checked) { border-color: var(--pink); background: var(--pink-soft); }
.mute:has(input:checked) span { color: var(--muted); text-decoration: line-through; }
.mute:has(input:checked) em { display: block; }
.mute:has(input:checked) .av { filter: grayscale(1); opacity: 0.55; }
.mute:has(input:focus-visible) { outline: 2px solid var(--primary); }

.preview { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.words { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); line-height: 1.5; }
.words.warn { background: var(--pink-soft); color: var(--pink); }

/* ---------- publicidade ---------- */
.ad { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ad-label {
  display: inline-block; padding: 1px 7px; border-radius: 6px;
  background: var(--surface-2); color: var(--muted);
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em;
}
.ad .name { font-weight: 600; }
.ad .ad-photo { height: auto; aspect-ratio: 3 / 1; }
.ad-body strong { display: block; font-size: 15px; }
.ad-body p { margin-top: 2px; color: var(--muted); font-size: 14px; }
.ad-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ad-foot .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad.side { padding: 14px; gap: 10px; }
.ad.side .post-head { gap: 10px; }
.ad.side .ad-foot .btn { height: 34px; padding: 0 12px; }
.menu a {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 8px; font-size: 14px;
}
.menu a:hover { background: var(--surface-2); }

.ad-removed { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ad-removed p { display: flex; align-items: center; gap: 8px; }
.ad-removed p .i { width: 18px; height: 18px; color: var(--primary); flex: none; }
.ad-removed-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; }

.plan { gap: 10px; }
.plan.on { border-color: var(--primary); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.plan-head h3 { margin: 0; }
.price { font-size: 26px; font-weight: 750; letter-spacing: -0.02em; }
.price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.plan-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.plan-list li { display: flex; align-items: center; gap: 8px; }
.plan-list .i { width: 18px; height: 18px; color: var(--primary); }
.plan-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 650;
}
.plan-badge .i { width: 16px; height: 16px; }
.plan .btn { margin-top: 4px; }
.plan-buy { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-buy small { font-weight: 500; opacity: 0.8; }
.plan .notice { margin-bottom: 4px; }
.plan-history summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.plan-history ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.plan-history li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.plan-history .btn { margin: 0; padding: 4px 10px; font-size: 13px; }
.row.blocked { cursor: default; }
.blocked-who { flex-direction: row !important; align-items: center; gap: 10px; min-width: 0; }
.row .pill { flex: none; }
.setting .muted .i { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- navegação mobile + toasts ---------- */
.bottom-nav { display: none; }

.toasts {
  position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  width: max-content; max-width: calc(100% - 32px); pointer-events: none;
}
.toast {
  padding: 12px 18px; border-radius: 12px;
  background: var(--text); color: var(--bg);
  font-size: 14px; font-weight: 500;
  animation: rise 0.25s ease-out; transition: opacity 0.3s;
}
.toast.out { opacity: 0; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes pop { 50% { transform: scale(1.25); } }

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

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .shell { grid-template-columns: 220px minmax(0, 1fr); }
  .shell.wide { grid-template-columns: 220px minmax(0, 1fr); }
  .side-right { display: none; }
}
@media (max-width: 900px) {
  .algo-grid { grid-template-columns: minmax(0, 1fr); }
  .algo-side { position: static; }
}
@media (max-width: 760px) {
  .topbar-in { padding: 0 16px; }
  .search { display: none; }
  .shell, .shell.wide { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 96px; }
  .side-left { display: none; }
  .bottom-nav {
    display: flex; justify-content: space-around;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .bottom-nav a {
    flex: 1; min-width: 0; max-width: 110px;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 2px; border-radius: 10px; white-space: nowrap;
    font-size: 11px; font-weight: 550; color: var(--muted);
  }
  .bottom-nav a.active { color: var(--primary); }
  .ghost-label { display: none; }
  .cover { height: 110px; }
  .profile-actions { width: 100%; }
  .profile-actions .btn { flex: 1; }
  .stats dd { font-size: 17px; }
  .stats dt { font-size: 11px; }
  .algo-hero { padding: 22px 20px; }
  .toasts { bottom: 88px; }
}

/* ---- páginas públicas: entrar, cadastro, conta suspensa ---- */
.public { min-height: 100vh; display: flex; flex-direction: column; }
.public-top { display: flex; justify-content: center; padding: 28px 16px 8px; }
.public-main { width: 100%; max-width: 440px; margin: 0 auto; padding: 16px; flex: 1; }
.public-main.wide { max-width: 860px; }
.public-foot { text-align: center; padding: 24px 16px; }
/* perfil aberto: o que quem não tem conta vê */
.public-main.profile-wide { max-width: 680px; }
.public-profile { display: grid; gap: 14px; }
.join-cta { display: flex; align-items: center; gap: 14px; padding: 18px 20px; flex-wrap: wrap; }
.join-cta > div:first-of-type { flex: 1; min-width: 200px; }
.join-cta p { margin: 0; }
.join-cta .brand-mark, .join-cta > svg { width: 40px; height: 40px; flex: none; }
.public-opts { display: grid; gap: 10px; }
.public-foot a, .auth a:not(.btn), .auth-foot a { color: var(--primary); font-weight: 600; }
.auth { display: grid; gap: 14px; padding: 26px; }
.auth h1 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.auth p { margin: 0; }
.auth label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.auth input:not([type=checkbox]), .auth textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font-weight: 400;
}
.auth input:not([type=checkbox]) { height: 42px; }
.auth input:focus, .auth textarea:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.auth .bad input { border-color: var(--pink); }
.auth .hint { color: var(--muted); font-weight: 400; font-size: 13px; }
.auth .field-err { color: var(--pink); font-weight: 500; font-size: 13px; }
.auth .check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.auth .check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary); }
.auth .prefix { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 10px; padding-left: 12px; }
.auth .prefix:focus-within { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.auth .prefix > span { color: var(--muted); font-weight: 500; }
.auth .prefix input { border: 0; outline: 0; padding-left: 4px; }
.auth .bad .prefix { border-color: var(--pink); }
.auth .err, .auth .ok { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-weight: 500; font-size: 14px; }
.auth .err { background: var(--pink-soft); color: var(--pink); }
.auth .ok { background: var(--primary-soft); color: var(--primary); }
.auth .invite-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--honey-soft); font-weight: 500; font-size: 14px; }
.auth .invite-note .i { flex: none; }
.auth .appeal { display: grid; gap: 10px; }
.auth-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); }
.auth-icon.warn { background: var(--pink-soft); color: var(--pink); }
.auth-icon .i { width: 24px; height: 24px; }
.auth-foot { text-align: center; margin-top: 16px; color: var(--muted); }
.dev-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--bg); color: var(--muted); }
.dev-note code { font-size: 12px; color: var(--text); }
.logout { padding: 4px 12px; }
.logout .link { display: inline-flex; align-items: center; gap: 8px; }
.logout .i { width: 16px; height: 16px; }

/* seletor de idioma: o idioma atual em destaque, o outro como link */
.lang-switch { display: flex; align-items: center; gap: 8px; padding: 4px 12px; color: var(--muted); }
.lang-switch .i { width: 16px; height: 16px; }
.lang-switch .link[aria-current] { color: var(--text); font-weight: 700; cursor: default; }
.public-foot .lang-switch { justify-content: center; padding: 8px 0 0; }
.public-foot .lang-switch .link { color: var(--primary); font-weight: 600; }
.public-foot .lang-switch .link[aria-current] { color: var(--text); }

/* nome reservado e selo de verificado */
.verify { max-width: 620px; }
.verified { display: inline-flex; vertical-align: -3px; color: var(--primary); }
.verified .i { width: 18px; height: 18px; }
h1 .verified .i { width: 24px; height: 24px; }

/* ---------- classificados ---------- */
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.notice { display: flex; align-items: center; gap: 8px; padding: 12px 16px; margin-bottom: 16px; font-weight: 500; }
.notice.ok { color: var(--primary); background: var(--primary-soft); border-color: transparent; }
.crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 14px; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 500; }
.crumbs .i { width: 16px; height: 16px; }

.shop-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; margin: 16px 0; }
.shop-filters .search.grow { flex: 1 1 240px; max-width: none; }
.shop-filters select, .shop-filters > input, .auth select {
  height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--surface); color: var(--text); font: inherit; font-weight: 400; min-width: 0;
}
.shop-filters > input { flex: 0 1 160px; }
.auth select { height: 42px; width: 100%; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.shop-grid > .empty { grid-column: 1 / -1; }
.listing-card { display: grid; overflow: hidden; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.listing-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.listing-card .listing-photo { border-radius: 0; aspect-ratio: 4 / 3; }
.listing-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.listing-body h3 { font-size: 15px; font-weight: 550; line-height: 1.3; overflow-wrap: anywhere; }
.listing-body .muted .i, .listing-info .muted .i { width: 14px; height: 14px; vertical-align: -2px; }
.price { font-size: 18px; letter-spacing: -0.01em; }
.price.big { font-size: 28px; }
.listing-photo.none { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.listing-photo.none::before, .listing-photo.none::after { display: none; }
.listing-photo.none .i { width: 36px; height: 36px; }

.status { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.status .i { width: 14px; height: 14px; }
.status.review, .status.expired { background: var(--surface-2); color: var(--muted); }
.status.active { background: var(--primary-soft); color: var(--primary); }
.status.sold { background: var(--primary-soft); color: var(--text); }
.status.rejected { background: var(--pink-soft); color: var(--pink); }

.listing-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.listing-main { overflow: hidden; }
.listing-main .listing-photo.big { border-radius: 0; aspect-ratio: 16 / 9; }
.listing-info { display: grid; gap: 10px; padding: 20px; }
.listing-info h1 { font-size: 22px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.listing-text { white-space: pre-line; line-height: 1.55; overflow-wrap: anywhere; }
.listing-side { display: grid; gap: 14px; }
.listing-side h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.listing-side h2 .i { width: 18px; height: 18px; color: var(--primary); }
.seller { display: flex; align-items: center; gap: 12px; padding: 16px; }
.seller .name { font-weight: 600; color: var(--text); }
.owner-actions, .tips { display: grid; gap: 10px; padding: 18px; }
.contact.auth { padding: 18px; gap: 10px; }
.contact form { display: grid; gap: 10px; }
.tips ul { display: grid; gap: 6px; padding-left: 18px; font-size: 14px; color: var(--muted); }
.danger-link { color: var(--pink); display: inline-flex; align-items: center; gap: 6px; width: fit-content; }
.danger-link .i { width: 16px; height: 16px; }
.listing-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.listing-form legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.listing-form .seg { width: fit-content; }
.listing-form .seg label { font-weight: 500; white-space: nowrap; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.scrap-listing { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0; padding: 3px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12.5px; font-weight: 550; }
.scrap-listing .i { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .listing-page { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .row2 { grid-template-columns: 1fr; }
  .shop-filters > *, .shop-filters > input { flex: 1 1 100%; }
  .shop-filters .search { display: flex; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ---------- fotos de verdade ---------- */
.av.has-img { overflow: hidden; background: var(--surface-2); }
.av.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-img { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.post-img img { display: block; width: 100%; max-height: 640px; object-fit: contain; }
/* vídeo de outro site: capa nossa até a pessoa pedir para carregar */
.clip { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #12152b; color: #fff; }
/* em pé só depois de carregar: a capa fechada não ocupa a tela toda */
.clip.vertical.on { aspect-ratio: 9 / 16; width: min(100%, 340px); margin-inline: auto; }
.clip iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.clip-cover {
  position: absolute; inset: 0; padding: 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 50% 35%, #3b4aa8, #1b1f3b 75%);
}
.clip-cover .small { color: #c9cde8; max-width: 34ch; }
.clip-cover a { color: #fff; text-decoration: underline; }
.clip-play {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px;
  border: 0; border-radius: 50%; cursor: pointer; background: #2a5bd7; color: #fff;
  box-shadow: 0 0 0 6px rgb(255 255 255 / .12);
  transition: transform .15s;
}
.clip-play:hover { transform: scale(1.06); }
.clip-play .i { width: 28px; height: 28px; }
.pending-tag {
  position: absolute; left: 10px; top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgb(0 0 0 / 0.62); color: #fff; font-size: 13px; font-weight: 600;
}
.pending-tag .i { width: 15px; height: 15px; }
.photo.real::before, .photo.real::after { display: none; }
.photo.real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo.real .pending-tag { left: 6px; top: 6px; padding: 4px; }
.composer-preview { position: relative; align-self: flex-start; }
.composer-preview img { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; }
.composer-preview .icon-btn { position: absolute; top: 6px; right: 6px; background: rgb(0 0 0 / 0.55); color: #fff; }
.composer-note { display: flex; align-items: center; gap: 6px; margin: 0; }
.composer-note .i { width: 15px; height: 15px; flex: none; }

/* apagar post */
.del-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 16px 12px; padding: 12px; border-radius: 10px;
  background: var(--pink-soft); color: var(--text); font-weight: 500;
}
.del-note span { flex: 1 1 220px; }

/* dicas no feed: novidade de toda a rede, feed quieto */
.feed-tip { display: grid; gap: 8px; padding: 16px; margin-bottom: 16px; }
.feed-tip p { margin: 0; }
.feed-tip strong { display: inline-flex; align-items: center; gap: 6px; }
.feed-tip strong .i { width: 17px; height: 17px; color: var(--primary); }
.feed-tip .row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* editar post */
.edit-form { margin: 0 16px 12px; display: grid; gap: 8px; }
.edit-form textarea {
  width: 100%; resize: vertical; min-height: 80px; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 16px;
}
.edit-form .row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.edit-form .row-actions span { flex: 1 1 100%; }
.edit-form .row-actions span:empty { display: none; }
.edited { cursor: help; }

/* ---------- sino ---------- */
.icon-btn .badge {
  position: absolute; top: 3px; right: 1px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--pink); color: #fff; font-size: 11px; font-weight: 700;
  border: 2px solid var(--surface);
}
.count-pill { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 12px; font-weight: 700; }

.notifs { list-style: none; margin: 0; padding: 6px; }
.notif a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; color: var(--text); }
.notif a:hover { background: var(--surface-2); }
.notif.unread a { background: var(--primary-soft); }
.notif-body { flex: 1; min-width: 0; }
.notif-body p { margin: 0 0 2px; overflow-wrap: anywhere; }
.notif-sys {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); color: var(--primary);
}
.notif-kind { color: var(--muted); }
.notif-kind.like { color: var(--pink); }
.notif-actions { padding: 0 10px 10px 64px; }
.notifs .empty { display: grid; justify-items: center; gap: 8px; }
.notifs .empty .i { width: 32px; height: 32px; }

/* ---------- amizade ---------- */
.friend-btn { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.friend-btn .confirm .btn { height: 34px; padding: 0 12px; }

/* ---------- busca ---------- */
.search.big { display: flex; max-width: none; width: 100%; height: 46px; }
@media (min-width: 761px) { .search-link { display: none; } }
.results { padding: 16px 20px; display: grid; gap: 4px; }
.results h2 { font-size: 16px; margin: 0 0 6px; }
.results .count { color: var(--muted); font-weight: 500; }
.results p a { color: var(--primary); font-weight: 600; }
.person { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.person + .person { border-top: 1px solid var(--border); }
.person-id { flex: 1; min-width: 0; }
.person-id .name { font-weight: 650; color: var(--text); }
.person-id strong, .person-id .small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- notificações no aparelho ---------- */
.device { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 16px 18px; margin-bottom: 14px; }
.device-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.device-body { flex: 1 1 220px; min-width: 0; }
.device-body p { margin: 2px 0 0; }
.device-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- bloqueio ---------- */
.block-confirm { margin: 0 20px 16px; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-2); }
.block-confirm p { margin: 0 0 10px; }
.block-confirm .row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.blocked-profile .cover { background: var(--surface-2); }
.blocked-profile .cover::before, .blocked-profile .cover::after { display: none; }
.blocked-note { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; margin: 0 20px 20px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); }
.blocked-note p { display: flex; gap: 8px; align-items: flex-start; margin: 0; flex: 1 1 260px; }
.blocked-note p .i { flex: none; margin-top: 2px; }
.blocked-list { padding: 20px 22px; margin-bottom: 14px; }
.blocked-list h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0 0 6px; }
.blocked-list ul { list-style: none; margin: 8px 0 0; padding: 0; }

/* ---------- editar perfil ---------- */
.auth fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.auth legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.auth input[readonly] { background: var(--surface-2); color: var(--muted); }
.auth select { height: 42px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.hues { display: flex; flex-wrap: wrap; gap: 8px; }
.hue { position: relative; cursor: pointer; }
.hue input { position: absolute; opacity: 0; }
.hue span { display: block; width: 32px; height: 32px; border-radius: 50%; background: hsl(var(--h) 62% 55%); }
.hue input:checked + span { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
.hue input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 4px; }
.avatar-edit h2 { margin: 0; font-size: 18px; }
/* editar a capa */
.cover-edit { overflow: hidden; margin-bottom: 20px; }
.cover-edit > .cover { height: 170px; }
.cover-edit-av { position: relative; margin: -40px 0 0 20px; width: fit-content; }
.cover-edit-av .av { box-sizing: content-box; border: 4px solid var(--surface); }
.cover-edit-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 20px 20px; }
.cover-edit-tab { display: flex; flex-direction: column; gap: 14px; }
.cover-edit-body fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cover-edit-body legend { font-weight: 650; font-size: 14px; margin-bottom: 8px; }
.cover-edit-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.cover-edit-head h2 { margin: 0; font-size: 18px; }
.cover-edit-head .seg label { white-space: nowrap; display: flex; align-items: center; gap: 6px; font-weight: 500; }
.cover-edit-head .seg .i { width: 16px; height: 16px; }
.cover-edit .btn { align-self: flex-start; }
.cover-styles { display: flex; flex-wrap: wrap; gap: 10px; }
.cover-style { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.cover-style input { position: absolute; opacity: 0; }
.cover-style .cover { width: 92px; height: 46px; border-radius: 10px; }
.cover-style .cover::before { width: 80px; height: 80px; right: -14px; top: -40px; }
.cover-style .cover::after { width: 54px; height: 54px; top: 22px; }
.cover-style .cover[data-style="favos"] { background-size: 28px 49px, auto; }
.cover-style .cover[data-style="ondas"] { background-size: 60px 18px, auto; }
.cover-style input:checked + .cover { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
.cover-style input:focus-visible + .cover { outline: 2px solid var(--primary); outline-offset: 4px; }
.cover-pos { display: flex; flex-direction: column; gap: 6px; font-weight: 650; font-size: 14px; }
.cover-pos .hint { font-weight: 400; }
.cover-pos input { width: 100%; max-width: 360px; accent-color: var(--primary); }
.avatar-now { display: grid; place-items: center; padding: 6px 0; }
.pending-box {
  display: grid; grid-template-columns: auto 1fr 56px; align-items: center; gap: 10px;
  padding: 10px; border-radius: 10px; background: var(--surface-2); font-size: 14px;
}
.pending-box img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }

/* ---------- criar comunidade ---------- */
.new-comm h2 { margin: 0; font-size: 20px; }

/* ---- e-mail sem confirmar, esqueci a senha ---- */
.verify-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px; background: var(--primary-soft); border-color: transparent; }
.verify-banner > svg { flex: none; width: 22px; height: 22px; color: var(--primary); }
.verify-banner p { margin: 0; flex: 1; font-size: 14px; }
.verify-banner .btn { flex: none; }
@media (max-width: 560px) { .verify-banner { flex-wrap: wrap; } }
.auth .forgot { justify-self: end; margin-top: -6px; }

/* ---------- beetoca ---------- */
.dating-head h1 { display: flex; align-items: center; gap: 8px; }
.dating-head h1 .dmark { width: 40px; height: 40px; }
.dating-head .wordmark { font-size: 28px; }
.dating-head .wordmark span, .dmark .heart { color: var(--pink); fill: var(--pink); }

/* Marca do beetoca: dois favos, mel e rosa. Branco no lugar do rosa sobre o botão rosa. */
.dmark .hx-a { fill: var(--honey); stroke: var(--honey); }
.dmark .hx-b { fill: var(--pink); stroke: var(--pink); }
.dmark .eye { fill: none; stroke: var(--logo-ink); }
.btn.kiss .dmark .hx-b { fill: #fff; stroke: #fff; }
/* A pequena é mais larga que alta (120×84): mesma altura dos ícones, mais largura. */
.i.dmark { width: 28px; height: 20px; }
.btn .dmark, .kiss-note .dmark { width: 25px; height: 18px; }
.btn.big-round .i.dmark { width: 40px; height: 28px; }
.dating-main { display: grid; gap: 14px; }
.dating-intro, .dating-state { display: grid; gap: 12px; padding: 22px; justify-items: start; }
.dating-intro h2 { font-size: 18px; }
.dating-intro ol { display: grid; gap: 8px; padding-left: 20px; line-height: 1.5; }
.dating-state p { margin: 0; }
.dating-state .mod-note { width: 100%; }
.kiss-note { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--pink-soft); border-color: transparent; }
.kiss-note .i { width: 18px; height: 18px; color: var(--pink); flex: none; }

.dating-pic {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: 100%; aspect-ratio: 1; border-radius: 12px;
  background: hsl(var(--h, 330) 62% 55%); color: #fff; font-size: 64px; font-weight: 700; letter-spacing: -0.02em;
}
.dating-pic.has-img { background: var(--surface-2); }
.dating-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dating-pic .pending-tag { padding: 4px; }
.dating-card { display: grid; gap: 14px; padding: 14px; max-width: 460px; width: 100%; justify-self: center; }
.dating-card .dating-pic { aspect-ratio: 4 / 5; }
.dating-body { display: grid; gap: 6px; padding: 0 4px; }
.dating-body h2 { font-size: 22px; letter-spacing: -0.02em; }
.dating-body .muted .i { width: 14px; height: 14px; vertical-align: -2px; }
.dating-about { white-space: pre-line; line-height: 1.5; overflow-wrap: anywhere; }
.dating-actions { display: flex; justify-content: center; gap: 22px; }
.btn.big-round { width: 62px; height: 62px; padding: 0; border-radius: 50%; justify-content: center; }
.btn.big-round .i { width: 26px; height: 26px; }
.btn.kiss { background: var(--pink); }
.btn.kiss:hover { background: var(--pink-hover); }
.dating-card .danger-link { justify-self: center; }
.dating-match { display: grid; justify-items: center; gap: 10px; padding: 24px; text-align: center; max-width: 460px; width: 100%; justify-self: center; }
.mascot.kiss { width: 132px; margin-bottom: 0; }
.mascot .lips { fill: var(--pink); }
.mascot .lips.soft { opacity: 0.6; }
.dating-empty { display: grid; justify-items: center; gap: 8px; }
.dating-empty > .i { width: 32px; height: 32px; color: var(--pink); }
.dating-me { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 12px; padding: 14px; }
.dating-me .dating-pic { font-size: 26px; }
.dating-me .muted .i { width: 13px; height: 13px; vertical-align: -2px; }
.dating-form .seg { flex-wrap: wrap; }
.avatar-edit .dating-pic { width: 160px; }

.chat-list { padding: 6px; }
.chat-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; color: var(--text); }
.chat-row:hover { background: var(--surface-2); }
.chat-row.unread { background: var(--primary-soft); }
.chat-row.unread strong { font-weight: 750; }
.chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: min(72vh, 720px); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.chat-head .name { font-weight: 650; color: var(--text); }
.chat-msgs { display: flex; flex-direction: column; gap: 6px; padding: 16px; overflow-y: auto; }
.chat-start { text-align: center; margin: 0 0 8px; }
.dmsg { max-width: 78%; align-self: flex-start; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); }
.dmsg.mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--primary); color: var(--on-primary); }
.dmsg p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.dmsg time { display: block; margin-top: 2px; font-size: 11.5px; }
.dmsg.mine time { color: color-mix(in srgb, var(--on-primary) 75%, transparent); text-align: right; }
.scam-note { display: flex; gap: 8px; align-items: flex-start; max-width: 78%; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--pink-soft); font-size: 13.5px; }
.scam-note .i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--pink); }
.chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.chat-form textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; field-sizing: content; }
.chat-form .btn { flex: none; width: 42px; padding: 0; justify-content: center; }
.chat-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 0 14px 12px; }
@media (max-width: 560px) {
  .chat { height: calc(100dvh - 190px); }
  .dmsg, .scam-note { max-width: 90%; }
}

/* ---- convites e sugestões ---- */
.invite-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.invite { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.invite-state { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.invite-state.free { background: var(--honey-soft); color: var(--text); }
.invite-state .i { width: 18px; height: 18px; }
.invite-body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.invite-link { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.invite-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.auth .seg label { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.auth .seg .i { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .invite:not(.used) { flex-wrap: wrap; }
  .invite-actions { width: 100%; justify-content: flex-end; }
}