/* YOUKUT v91 — bundle gerado preservando a ordem do cascade + camada Experience & Engagement. */

/* ===== SOURCE: style-v54.css ===== */
/* =====================================================
   YOUKUT — design tokens
   Canvas escuro "dusk", acento âmbar + periwinkle,
   Space Grotesk (display) + Inter (corpo)
===================================================== */
:root {
  --bg: #161320;
  --surface: #1F1B2E;
  --surface-2: #262138;
  --border: #322C46;
  --text: #F2EFEA;
  --text-muted: #9992AC;
  --accent: #FFB84D;
  --accent-ink: #1A1508;
  --accent-2: #8EA7FF;
  --danger: #FF6B6B;
  --success: #6BCB77;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 8px 30px rgba(0,0,0,0.35);
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* =====================================================
   AUTH 2026 — calma social, vínculo e confiança
===================================================== */
:root {
  --bg: #12101b;
  --surface: #1b1728;
  --surface-2: #231e34;
  --border: #352e4a;
  --text-muted: #aaa3ba;
  --radius: 16px;
}

:where(button, a, input, textarea, select):focus-visible {
  outline: 3px solid rgba(142, 167, 255, .55);
  outline-offset: 3px;
}

.auth-screen {
  min-height: 100svh;
  background: #12101b;
  isolation: isolate;
}
.auth-visual { position: relative; overflow: hidden; }
.auth-visual::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,8,17,.08), rgba(10,8,17,.42));
  pointer-events: none;
}
.auth-visual-content {
  position: relative; z-index: 2; min-height: 100%; padding: clamp(28px, 5vw, 72px);
  display: flex; flex-direction: column;
}
.auth-visual-top { display: flex; align-items: center; gap: 10px; }
.auth-brand-caption {
  margin-left: auto; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.68); border: 1px solid rgba(255,255,255,.18);
  padding: 7px 10px; border-radius: 999px; backdrop-filter: blur(12px);
}
.auth-visual-middle { margin: auto 0; max-width: 660px; }
.auth-eyebrow, .auth-form-eyebrow {
  display: block; color: #ffd27d; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; margin-bottom: 16px;
}
.auth-visual-middle h2 {
  font-size: clamp(42px, 5.4vw, 76px); line-height: .98; letter-spacing: -.055em;
  max-width: 760px; margin-bottom: 24px; text-wrap: balance;
}
.auth-visual-middle p { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.65; max-width: 610px; color: rgba(255,255,255,.78); }
.auth-visual-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; max-width: 660px; }
.auth-float-card {
  position: static !important; transform: none !important; display: flex; align-items: center;
  background: rgba(19,16,29,.48); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px); border-radius: 18px; padding: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.16);
}
.auth-float-icon {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 13px; background: rgba(255,184,77,.16); color: #ffd27d;
}
.auth-float-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.auth-float-card strong { display: block; font-size: 14px; }
.auth-float-card small { display: block; margin-top: 3px; color: rgba(255,255,255,.64); }
.auth-visual-foot { display: flex; gap: 24px; margin-top: 20px; color: rgba(255,255,255,.58); font-size: 12px; }
.auth-visual-foot span { display: flex; align-items: center; gap: 7px; }
.auth-visual-foot i { width: 6px; height: 6px; border-radius: 50%; background: #78d58b; box-shadow: 0 0 0 4px rgba(120,213,139,.12); }

.auth-form-panel {
  background:
    radial-gradient(circle at 75% 12%, rgba(142,167,255,.08), transparent 28%),
    #12101b;
  padding: clamp(22px, 4vw, 58px);
}
.auth-card { width: min(100%, 470px); padding: 0; background: transparent; box-shadow: none; }
.auth-card-heading h2 { font-size: clamp(30px, 3vw, 42px); letter-spacing: -.04em; line-height: 1.05; text-wrap: balance; }
.auth-card-heading p { color: var(--text-muted); line-height: 1.55; }
.auth-form-eyebrow { color: var(--accent-2); margin-bottom: 12px; }
.auth-tabs { padding: 5px; border: 1px solid var(--border); background: rgba(255,255,255,.025); border-radius: 14px; }
.auth-tab { border-radius: 10px; min-height: 42px; }
.auth-form { gap: 16px; }
.auth-form label > span { font-size: 12px; font-weight: 650; color: #d7d2df; letter-spacing: .015em; }
.auth-form input:not([type="checkbox"]) {
  min-height: 50px; border-radius: 13px; background: rgba(255,255,255,.035);
  border-color: #39324d; padding: 13px 14px;
}
.auth-form input:not([type="checkbox"]):hover { border-color: #4b4164; }
.auth-form input:not([type="checkbox"]):focus { border-color: var(--accent-2); box-shadow: 0 0 0 4px rgba(142,167,255,.1); }
.auth-form .btn-primary { min-height: 50px; border-radius: 13px; font-size: 15px; box-shadow: 0 12px 30px rgba(255,184,77,.14); }
.auth-forgot-link { width: fit-content; margin-inline: auto; }
.auth-secure-note { display: flex; justify-content: center; align-items: center; gap: 7px; color: #817a91; font-size: 11px; margin: 2px 0 0; }
.auth-secure-note svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.auth-consent { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.auth-consent input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--accent); }
.auth-consent a, .auth-footer a { color: #c9d3ff; text-decoration: none; }
.auth-consent a:hover, .auth-footer a:hover { text-decoration: underline; }
.auth-password-strength { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 8px; }
.auth-password-strength > span { height: 3px; background: #3a334b; border-radius: 3px; transition: background .2s; }
.auth-password-strength small { grid-column: 1 / -1; color: var(--text-muted); margin-top: 1px; }
.auth-password-strength[data-score="1"] > span:nth-child(1) { background: #ff8a70; }
.auth-password-strength[data-score="2"] > span:nth-child(-n+2) { background: #ffbf5f; }
.auth-password-strength[data-score="3"] > span { background: #78d58b; }
.auth-footer { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; font-size: 11px; color: #6f687d; }

@media (max-width: 900px) {
  .auth-form-panel { padding: 26px 20px 34px; align-items: flex-start; }
  .auth-card { margin: 0 auto; }
  .auth-brand-mobile { margin-bottom: 30px; }
}
@media (max-width: 520px) {
  .auth-card-heading h2 { font-size: 31px; }
  .auth-form-panel { padding-inline: 18px; }
  .auth-form input:not([type="checkbox"]), .auth-form .btn-primary { min-height: 52px; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Página dedicada de chat tem altura própria, calculada via JS — o
   scroll da PÁGINA precisa ficar travado (só a lista de conversas e as
   mensagens rolam internamente), senão o body rola junto e desalinha
   tudo: o cabeçalho fixo passa a "comer" conteúdo por cima e a barra de
   mensagem some por baixo da tela. */
body.chat-page-active {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

.hidden { display: none !important; }
.muted { color: var(--text-muted); }

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

button { font-family: inherit; cursor: pointer; }
input, textarea {
  font-family: inherit;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  /* 16px é o mínimo pra iOS Safari não forçar zoom automático ao focar
     o campo (abaixo disso, ele dá zoom in e às vezes não volta certo) */
  font-size: 16px;
  outline: none;
  transition: border-color .15s ease;
}
input:focus, textarea:focus { border-color: var(--accent-2); }
textarea { resize: vertical; font-family: inherit; }

/* ---------- Botões ---------- */
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  transition: transform .12s ease, filter .12s ease;
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  transition: border-color .15s ease, background .15s ease;
}
.btn-secondary:hover { border-color: var(--accent-2); background: var(--surface-2); }

.btn-sm { padding: 7px 16px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-icon {
  background: none; border: none; font-size: 20px; color: var(--text-muted);
  display: inline-flex; align-items: center; padding: 6px; border-radius: 8px;
}
.btn-icon:hover { background: var(--surface-2); }
.btn-remove-img {
  position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.6); color: #fff;
  border: none; border-radius: 50%; width: 26px; height: 26px; font-size: 16px; line-height: 1;
}

/* ---------- Avatares ---------- */
.avatar { border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 2px solid var(--border); }

/* Indicador de status online — um "wrap" em volta do avatar, com a
   bolinha posicionada no canto inferior direito */
.avatar-wrap { position: relative; display: inline-block; line-height: 0; flex-shrink: 0; }
.avatar-wrap .avatar { display: block; }
.online-dot {
  position: absolute; bottom: 0; right: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--success); border: 2px solid var(--bg);
}
.avatar-lg + .online-dot, .avatar-wrap.avatar-wrap-lg .online-dot { width: 16px; height: 16px; border-width: 3px; }
.avatar-sm { width: 36px; height: 36px; }
.avatar-md { width: 46px; height: 46px; }
.avatar-lg { width: 96px; height: 96px; border-width: 3px; border-color: var(--bg); }

/* =====================================================
   TELA DE AUTENTICAÇÃO — split-screen
   Esquerda: arte gerada (SVG) com a proposta da marca.
   Direita: formulário de login/cadastro.
===================================================== */
.auth-screen {
  min-height: 100vh;
  display: flex;
}

/* ---------- Painel visual (esquerda) ---------- */
.auth-visual {
  position: relative;
  flex: 1.1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 48px;
  color: var(--text);
}
.auth-visual-bg { position: absolute; inset: 0; z-index: 0; }
.auth-visual-svg { width: 100%; height: 100%; display: block; }

.auth-orbit circle { animation: authOrbitSpin 60s linear infinite; transform-origin: 400px 500px; }
.auth-blob-1 circle { animation: authFloat 9s ease-in-out infinite; }
.auth-blob-2 circle { animation: authFloat 11s ease-in-out infinite reverse; }
@keyframes authOrbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes authFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-24px); }
}

.auth-visual-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: calc(100vh - 96px);
}

.auth-visual-top { display: flex; align-items: center; gap: 8px; }
.auth-visual-brand { font-family: var(--font-display); font-weight: 700; font-size: 18px; }

.auth-visual-middle { max-width: 440px; margin: auto 0; }
.auth-visual-middle h2 {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 16px;
}
.auth-visual-middle p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.auth-visual-cards { display: flex; flex-direction: column; gap: 12px; max-width: 340px; }
.auth-float-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 14, 38, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  animation: authFloat 7s ease-in-out infinite;
}
.auth-float-card.card-2 { animation-duration: 8.5s; animation-delay: .4s; }
.auth-float-icon { font-size: 20px; }
.auth-float-card strong { display: block; font-size: 13px; }
.auth-float-card small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }

/* ---------- Painel de formulário (direita) ---------- */
.auth-form-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: radial-gradient(circle at 0% 50%, rgba(138, 47, 196, 0.18), transparent 55%), var(--bg);
  overflow-y: auto;
  max-height: 100vh;
}

.auth-card { width: 100%; max-width: 380px; }

.auth-brand-mobile { display: none; text-align: center; margin-bottom: 24px; }

.auth-card-heading { margin-bottom: 24px; }
.auth-card-heading h2 {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}
.auth-card-heading p { color: var(--text-muted); font-size: 13.5px; margin: 0; }

.auth-brand { text-align: center; }
.auth-brand-mark { color: var(--accent); font-size: 28px; }
.auth-brand h1 {
  font-family: var(--font-display);
  font-size: 28px;
  margin: 4px 0 2px;
  letter-spacing: -0.5px;
  display: inline;
}
.auth-brand p { color: var(--text-muted); margin: 4px 0 0; font-size: 13px; }

.auth-tabs { display: flex; background: var(--surface-2); border-radius: 999px; padding: 4px; margin-bottom: 20px; }
.auth-tab {
  flex: 1; border: none; background: none; color: var(--text-muted);
  padding: 9px; border-radius: 999px; font-weight: 600; font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.auth-tab.active { background: var(--accent); color: var(--accent-ink); }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.form-error { color: var(--danger); font-size: 13px; margin: -6px 0 0; min-height: 16px; }

.auth-forgot-link {
  background: none;
  border: none;
  color: var(--accent-2);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  padding: 2px;
  margin: -4px auto 0;
  cursor: pointer;
}
.auth-forgot-link:hover { text-decoration: underline; }

/* Campo de senha com botão de mostrar/ocultar — o input ganha padding
   à direita pra não ficar por baixo do ícone */
.auth-password-field { position: relative; display: flex; }
.auth-password-field input { flex: 1; padding-right: 40px; }
.auth-password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: color .15s ease, background .15s ease;
}
.auth-password-toggle:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.auth-password-toggle svg.hidden { display: none; }

/* Dica de formato — fica visível o tempo todo (diferente de
   placeholder, que some assim que a pessoa começa a digitar, bem na
   hora que ela mais precisa lembrar da regra) */
.auth-field-hint {
  display: block; color: var(--text-muted); font-size: 11.5px;
  font-weight: 400; margin-top: 5px;
}

/* Foco mais visível nos campos de acesso — o outline padrão do
   navegador é removido globalmente (ver regra base de input/textarea),
   então sem isso o foco por teclado (Tab) fica quase imperceptível,
   só a borda mudando de cor sutilmente */
.auth-form input:focus,
.auth-password-field input:focus,
#forgot-password-form input:focus,
#change-password-form input:focus {
  box-shadow: 0 0 0 3px rgba(142, 167, 255, 0.25);
}
.auth-tab:focus-visible,
.auth-password-toggle:focus-visible,
.auth-forgot-link:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}

.modal-subtitle { color: var(--text-muted); font-size: 13.5px; margin: -8px 0 18px; line-height: 1.5; }

.forgot-success { text-align: center; padding: 12px 0 4px; }
.forgot-success-icon { font-size: 32px; display: block; margin-bottom: 12px; }
.forgot-success p { color: var(--text-muted); font-size: 13.5px; line-height: 1.5; margin: 0; }

/* ---------- Responsivo: some com o painel visual em telas menores ---------- */
@media (max-width: 880px) {
  .auth-visual { display: none; }
  .auth-brand-mobile { display: block; }
  .auth-form-panel { padding: 32px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-orbit circle, .auth-blob-1 circle, .auth-blob-2 circle, .auth-float-card { animation: none !important; }
}

/* =====================================================
   APP PRINCIPAL
===================================================== */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 24px;
  padding-top: calc(12px + var(--safe-top-forced, env(safe-area-inset-top))); /* não fica embaixo do notch/barra de status no iOS */
  background: rgba(22,19,32,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Reforço garantido: quando o app roda instalado (modo standalone),
   força um espaço fixo no topo — não depende de env() nem de nenhum
   cálculo em JavaScript funcionar. Isso sempre vence qualquer outra
   regra, propositalmente, porque as tentativas anteriores baseadas em
   cálculo automático não estavam se aplicando nesse aparelho por um
   motivo que não conseguimos identificar. */
@media (display-mode: standalone) {
  .topbar { padding-top: 54px !important; }
}
.topbar-brand {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  white-space: nowrap;
  background: none; border: none; color: var(--text);
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px 2px; cursor: pointer;
  transition: opacity .15s ease;
}
.topbar-brand:hover { opacity: 0.8; }
.topbar-search { position: relative; flex: 1; max-width: 360px; }
.topbar-search input { width: 100%; }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-height: 320px; overflow-y: auto; box-shadow: var(--shadow); z-index: 30;
}
.search-result-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
}
.search-result-item:hover { background: var(--surface-2); }
.search-result-item .name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-item .username { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-item > div { min-width: 0; flex: 1; }

.topbar-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topbar-nav-center { display: flex; align-items: center; gap: 6px; }
.topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nav-link {
  background: none; border: none; color: var(--text-muted); font-weight: 600; font-size: 14px;
  padding: 8px 14px; border-radius: 999px; transition: background .15s ease, color .15s ease;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active { color: var(--accent); }
.nav-logout { color: var(--danger); }
.nav-profile-btn { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px !important; }
.nav-profile-btn .avatar { flex-shrink: 0; }
.nav-profile-btn span {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main { max-width: 640px; margin: 0 auto; padding: 24px 16px 80px; }
.view { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Banner de verificação de e-mail ---------- */
.verify-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255, 184, 77, 0.12); border: 1px solid rgba(255, 184, 77, 0.35);
  color: var(--text); font-size: 13px; padding: 10px 16px; border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.verify-banner button {
  background: var(--accent); color: var(--accent-ink); border: none; border-radius: 999px;
  padding: 6px 14px; font-size: 12px; font-weight: 700; flex-shrink: 0;
}

/* ---------- Abas de feed ---------- */
.feed-tabs { display: flex; background: var(--surface-2); border-radius: 999px; padding: 4px; margin-bottom: 16px; max-width: 280px; }

/* Botão "X novos posts" — aparece quando o polling detecta posts
   novos, mas NUNCA insere nada sozinho. A pessoa decide quando quer
   ver, evitando que o feed "pule" embaixo do dedo dela. */
.new-posts-btn {
  display: block; width: 100%; margin: 0 auto 16px;
  background: var(--accent); color: var(--accent-ink); border: none;
  border-radius: var(--radius); padding: 12px; font-weight: 700; font-size: 14px;
  cursor: pointer; animation: newPostsPop .25s ease;
}
.new-posts-btn:hover { filter: brightness(1.08); }
@keyframes newPostsPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.feed-tab {
  flex: 1; border: none; background: none; color: var(--text-muted);
  padding: 8px; border-radius: 999px; font-weight: 600; font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.feed-tab.active { background: var(--accent); color: var(--accent-ink); }

/* ---------- Bloquear / Denunciar ---------- */
.btn-danger-outline { border-color: var(--danger); color: var(--danger); }
.btn-danger-outline:hover { background: rgba(255, 107, 107, 0.1); border-color: var(--danger); }
.btn-icon-only {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  width: 38px; height: 38px; border-radius: 999px; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon-only:hover { border-color: var(--danger); color: var(--danger); }
.post-report-btn { background: none; border: none; color: var(--text-muted); font-size: 13px; margin-left: auto; }
.post-report-btn:hover { color: var(--danger); }

/* ---------- Composer ---------- */
.composer {
  display: flex; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 20px;
}
.composer-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.composer-body textarea {
  width: 100%; min-height: 60px; border: none; background: none; padding: 6px 0; font-size: 15px;
}
.composer-body textarea:focus { border: none; }
.composer-preview-wrap { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.composer-preview { width: 100%; max-height: 280px; object-fit: cover; }
#composer-preview-video { width: 100%; max-height: 280px; display: block; }
.composer-actions { display: flex; justify-content: space-between; align-items: center; }

/* ---------- Feed / Posts ---------- */
.feed-list { display: flex; flex-direction: column; gap: 14px; }
.post-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; animation: fadeIn .3s ease;
}
.post-header { display: flex; gap: 10px; align-items: center; }
.post-header-meta { display: flex; flex-direction: column; }
.post-author { font-weight: 700; font-size: 14px; cursor: pointer; }
.post-author:hover { color: var(--accent-2); }
.post-time { color: var(--text-muted); font-size: 12px; }
.post-edit {
  margin-left: auto; background: none; border: none; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; padding: 4px;
}
.post-edit:hover { color: var(--accent); }
.post-delete {
  background: none; border: none; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; padding: 4px;
}
.post-delete:hover { color: var(--danger); }
.post-edited-tag { font-style: italic; opacity: 0.8; }
.post-content { margin: 12px 0; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; }
.post-edit-form { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.post-edit-textarea {
  width: 100%; min-height: 80px; resize: vertical; font-size: 14.5px; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 10px; font-family: inherit;
}
.post-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.post-image { border-radius: var(--radius-sm); margin: 12px 0 6px; width: 100%; max-height: 460px; object-fit: cover; }
.post-video { border-radius: var(--radius-sm); margin: 12px 0 6px; width: 100%; max-height: 460px; display: block; background: #000; }
.post-actions { display: flex; gap: 18px; padding-top: 10px; border-top: 1px solid var(--border); }
.post-action {
  display: flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--text-muted); font-size: 13px; font-weight: 600; padding: 4px;
  transition: color .15s ease;
}
.post-action:hover { color: var(--text); }
.post-action.liked { color: var(--accent); }
.post-action .icon { width: 18px; height: 18px; transition: transform .15s ease; }
.post-action.liked .icon { animation: pop .28s ease; color: var(--accent); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------- Comentários inline (feed) ---------- */
.post-comments { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.post-comments-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.inline-comment { display: flex; gap: 8px; align-items: flex-start; }
.inline-comment .avatar { flex-shrink: 0; cursor: pointer; }
.inline-comment-body { flex: 1; min-width: 0; }
.inline-comment-bubble { font-size: 13px; line-height: 1.4; }
.inline-comment-author { font-weight: 700; margin-right: 6px; cursor: pointer; }
.inline-comment-author:hover { text-decoration: underline; }
.inline-comment-text { color: var(--text); word-wrap: break-word; }

.inline-comment-actions {
  display: flex; align-items: center; gap: 12px; margin-top: 3px;
  font-size: 11.5px; color: var(--text-muted);
}
.inline-comment-time { color: var(--text-muted); }
.inline-comment-reply-btn, .inline-comment-toggle-replies {
  background: none; border: none; color: var(--text-muted); font-size: 11.5px;
  font-weight: 700; padding: 0; cursor: pointer;
}
.inline-comment-reply-btn:hover, .inline-comment-toggle-replies:hover { color: var(--accent-2); }
.inline-comment-toggle-replies { color: var(--accent-2); }

.inline-comment-edit-btn, .inline-comment-delete-btn {
  background: none; border: none; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  margin-left: auto; cursor: pointer;
}
.inline-comment-delete-btn { margin-left: 4px; }
.inline-comment-edit-btn:hover { color: var(--accent); }
.inline-comment-delete-btn:hover { color: var(--danger); }

.inline-comment-edit-form { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.inline-comment-edit-input {
  flex: 1; min-width: 0; font-size: 13px; padding: 6px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text);
}
.inline-comment-edit-cancel, .inline-comment-edit-save {
  font-size: 11.5px; font-weight: 700; border: none; border-radius: 999px;
  padding: 6px 10px; cursor: pointer; flex-shrink: 0;
}
.inline-comment-edit-cancel { background: var(--surface-2); color: var(--text-muted); }
.inline-comment-edit-save { background: var(--accent); color: var(--accent-ink); }

.inline-comment-like-btn {
  display: inline-flex; align-items: center; gap: 3px;
  background: none; border: none; color: var(--text-muted);
  font-size: 11px; font-weight: 700; padding: 0; cursor: pointer;
}
.inline-comment-like-btn .comment-like-icon svg { width: 13px; height: 13px; display: block; }
.inline-comment-like-btn:hover { color: var(--accent); }
.inline-comment-like-btn.liked { color: var(--accent); }
.inline-comment-like-btn.liked .comment-like-icon svg { animation: pop .28s ease; }

.inline-reply-form { display: flex; gap: 6px; margin-top: 6px; }
.inline-reply-input { flex: 1; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; }

/* ---------- Respostas: indentadas e destacadas com faixa lateral ---------- */
.inline-comment-replies {
  display: flex; flex-direction: column; gap: 8px;
  margin: 8px 0 0 20px; padding-left: 14px;
  border-left: 2px solid var(--accent-2);
}
.inline-reply { display: flex; gap: 7px; align-items: flex-start; }
.inline-reply-body { flex: 1; min-width: 0; }
.avatar-xs { width: 24px; height: 24px; flex-shrink: 0; }
.inline-reply-bubble {
  background: rgba(142, 167, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12.5px;
}
.inline-reply .inline-comment-actions { margin-top: 3px; margin-left: 2px; }
.post-comments-viewall {
  background: none; border: none; color: var(--text-muted); font-size: 12.5px;
  font-weight: 600; padding: 2px 0 8px; display: block;
}
.post-comments-viewall:hover { color: var(--accent-2); }

/* ---------- Barra de comentário: input + botão "grudados" numa pílula só ---------- */
.post-comment-form, .inline-reply-form {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 4px 4px 14px;
  transition: border-color .15s ease;
}
.post-comment-form:focus-within, .inline-reply-form:focus-within { border-color: var(--accent-2); }
.post-comment-input, .inline-reply-input {
  flex: 1; border: none; background: none; padding: 8px 0; font-size: 13px;
}
.post-comment-input:focus, .inline-reply-input:focus { border: none; }
.comment-send-btn {
  background: var(--accent); color: var(--accent-ink); border: none; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.comment-send-btn:hover { filter: brightness(1.08); transform: scale(1.05); }
.comment-send-btn:disabled { opacity: 0.4; pointer-events: none; }
.comment-send-btn .spinner {
  width: 14px; height: 14px; border: 2px solid rgba(26,21,8,0.35); border-top-color: var(--accent-ink);
  border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Recém publicado: pequeno destaque de entrada */
.inline-comment.just-added, .inline-reply.just-added { animation: commentPopIn .35s ease; }
@keyframes commentPopIn {
  from { opacity: 0; transform: translateY(6px); background-color: rgba(255,184,77,0.12); }
  to { opacity: 1; transform: translateY(0); }
}

/* Comentário/resposta apontado por uma notificação — destaque temporário
   pra pessoa achar rápido, sem precisar procurar numa thread grande */
.inline-comment.comment-highlight .inline-comment-bubble,
.inline-reply.comment-highlight .inline-comment-bubble {
  animation: commentTargetGlow 2.2s ease;
  border-radius: var(--radius-sm);
}
@keyframes commentTargetGlow {
  0% { background-color: rgba(255,184,77,0.35); box-shadow: 0 0 0 2px rgba(255,184,77,0.5); }
  70% { background-color: rgba(255,184,77,0.35); box-shadow: 0 0 0 2px rgba(255,184,77,0.5); }
  100% { background-color: transparent; box-shadow: none; }
}

/* Mesmo destaque, aplicado quando a pessoa toca numa citação de
   resposta (chat 1:1 ou grupo) e é levada até a mensagem original */
.msg-jump-highlight .chat-bubble,
.msg-jump-highlight .chat-msg-image {
  animation: commentTargetGlow 1.6s ease;
  border-radius: var(--radius-sm);
}

/* No mobile, na página do post individual, a barra de comentar fica fixa
   no rodapé — sempre à mão, sem precisar rolar até ela */
@media (max-width: 640px) {
  #post-page-content { padding-bottom: 78px; }
  .post-comment-form-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--surface); border: none; border-top: 1px solid var(--border);
    border-radius: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .post-comment-form-sticky .post-comment-input { font-size: 16px; } /* evita zoom do iOS */

  /* Na página de post, o balão flutuante de chat ficava sobreposto ao
     botão de enviar comentário (os dois disputam o canto inferior
     direito) — some enquanto essa barra fixa está na tela. No
     desktop isso não acontece (a barra de comentário não é fixa lá),
     por isso essa regra só vale aqui dentro do mobile. */
  body.post-page-active .chat-fab { display: none; }
  body.group-chat-active .chat-fab { display: none; }

  /* No mobile, o nome ao lado do avatar na barra superior é
     redundante (o avatar já indica "essa é sua conta") e ocupa um
     espaço que faz falta numa tela pequena — mantém só o avatar,
     igual Instagram/Twitter fazem no próprio app mobile. */
  #nav-profile-name { display: none; }
}

.empty-state { text-align: center; color: var(--text-muted); padding: 40px 0; }

/* ---------- Perfil ---------- */
.profile-cover {
  height: 140px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(120deg, rgba(255,184,77,0.35), rgba(142,167,255,0.35));
  background-size: cover; background-position: center;
}
.profile-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; }
.profile-info { display: flex; gap: 16px; padding: 20px 20px 18px; align-items: flex-end; flex-wrap: wrap; }
#profile-avatar { margin-top: -56px; }

/* Foto de perfil um pouco maior no desktop (só a da tela de perfil —
   avatar-lg é compartilhada com chat de grupo e modais de edição, que
   não devem crescer junto). Overlap com a capa (margin-top negativo)
   recalculado na mesma proporção do tamanho original. */
@media (min-width: 641px) {
  #profile-avatar { width: 110px; height: 110px; margin-top: -64px; }
}
.profile-meta { flex: 1; min-width: 200px; }
.profile-meta h2 { font-family: var(--font-display); margin: 8px 0 0; }
.profile-meta p { margin: 4px 0; font-size: 14px; }
#profile-bio { white-space: pre-wrap; line-height: 1.5; }
.profile-details {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 2px;
  font-size: 12.5px; color: var(--text-muted);
}
.profile-details span { display: inline-flex; align-items: center; gap: 4px; }
.profile-interests { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.interest-tag {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.profile-stats { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.profile-stats strong { color: var(--text); }
.profile-stat-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  padding: 2px 0;
  cursor: pointer;
}
.profile-stat-btn:hover { color: var(--accent-2); }
.profile-stat-btn:hover strong { color: var(--accent-2); }
.profile-stat-btn.disabled { cursor: default; }
.profile-stat-btn.disabled:hover { color: var(--text-muted); }
.profile-stat-btn.disabled:hover strong { color: var(--text); }
.profile-actions { display: flex; gap: 8px; padding-top: 12px; flex-wrap: wrap; }
.btn-message { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Seguidores / Seguindo ---------- */
.follow-list-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.follow-list-tabs { display: flex; background: var(--surface-2); border-radius: 999px; padding: 4px; flex: 1; }
.follow-list-tab {
  flex: 1; border: none; background: none; color: var(--text-muted);
  padding: 8px; border-radius: 999px; font-weight: 600; font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.follow-list-tab.active { background: var(--accent); color: var(--accent-ink); }

.follow-list-items { display: flex; flex-direction: column; gap: 2px; }
.follow-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  transition: background .12s ease;
}
.follow-list-row:hover { background: var(--surface); }
.follow-list-row-info { flex: 1; min-width: 0; cursor: pointer; }
.follow-list-row-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-list-row-username { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-list-row-bio {
  font-size: 12.5px; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.follow-list-row .btn-primary,
.follow-list-row .btn-secondary { flex-shrink: 0; padding: 7px 16px; font-size: 12.5px; }
.profile-view-time { flex-shrink: 0; font-size: 12px; color: var(--text-muted); }

/* ---------- Menu de ações do membro (⋮), evita botões de texto
   competindo por espaço com o nome num painel estreito ---------- */
.group-member-menu-wrap { position: relative; flex-shrink: 0; }
.group-member-menu-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: none; border: none; border-radius: 50%;
  color: var(--text-muted); cursor: pointer;
}
.group-member-menu-btn:hover { background: var(--surface-2); color: var(--text); }
.group-member-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); min-width: 180px; overflow: hidden;
  display: flex; flex-direction: column;
}
.group-member-menu-item {
  background: none; border: none; text-align: left; padding: 10px 14px;
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.group-member-menu-item:hover { background: var(--surface); }
.group-member-menu-item.danger { color: var(--danger); }

.group-request-row { padding: 12px; border-radius: var(--radius-sm); }
.group-request-row:hover { background: var(--surface); }
.group-request-row-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.group-request-row-actions { display: flex; gap: 8px; }
.group-request-row-actions button { flex: 1; }

.premium-locked {
  text-align: center; padding: 32px 16px;
}
.premium-locked-icon { font-size: 36px; display: block; margin-bottom: 12px; }
.premium-locked p { margin: 4px 0; }
.premium-locked-desc { color: var(--text-muted); font-size: 13px; }
.premium-locked-cta { margin-top: 16px; width: auto; padding-left: 24px; padding-right: 24px; }

/* ---------- Modais ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(10,8,16,0.7);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
}
.modal-content {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; width: 100%; max-width: 440px; max-height: 85vh; overflow-y: auto; position: relative;
  box-shadow: var(--shadow);
}
.modal-content h3 { font-family: var(--font-display); margin-top: 0; }
.modal-close {
  position: absolute; top: 16px; right: 16px; background: none; border: none;
  color: var(--text-muted); font-size: 22px; line-height: 1;
}
.modal-close:hover { color: var(--text); }

.confirm-modal-content { max-width: 340px; text-align: center; }
#confirm-modal-message { margin: 4px 0 20px; font-size: 15px; line-height: 1.5; }
.confirm-modal-actions { display: flex; gap: 10px; }
.confirm-modal-actions button { flex: 1; }
.btn-danger-fill { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger-fill:hover { filter: brightness(1.1); }

#edit-profile-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }

/* Regra genérica pra qualquer formulário dentro de modal — sem isso,
   cada label+input fica só com o comportamento padrão do navegador
   (inline), causando texto e campo brigando espaço na mesma linha */
.modal-content form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.modal-content form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.modal-content form input, .modal-content form textarea, .modal-content form select {
  font-size: 15px; font-weight: 400; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-family: inherit;
}

.edit-email-row { display: flex; align-items: flex-end; gap: 10px; }
.edit-email-row label { flex: 1; }
#edit-email { opacity: 0.65; cursor: not-allowed; }
.edit-email-verified-badge {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--success); font-size: 12.5px; font-weight: 700;
  padding: 8px 0 10px; flex-shrink: 0;
}
.edit-email-row .btn-sm { flex-shrink: 0; margin-bottom: 2px; }
#edit-profile-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.edit-form-row { display: flex; gap: 12px; }
.edit-form-row label { flex: 1; }

/* ---------- Página de editar perfil ---------- */
.edit-profile-header {
  display: flex; align-items: center; gap: 12px;
  max-width: 520px; margin: 0 auto 16px;
}
.edit-profile-header h2 { font-family: var(--font-display); margin: 0; font-size: 20px; }

/* ---------- Botão de destaque: ativar notificações push ---------- */
.push-cta-btn {
  display: flex; align-items: center; gap: 14px;
  max-width: 520px; width: 100%; margin: 0 auto 16px;
  background: linear-gradient(120deg, rgba(255,184,77,0.16), rgba(142,167,255,0.12));
  border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 16px 18px; text-align: left; cursor: pointer;
  color: var(--text); font-family: inherit;
  transition: transform .12s ease, filter .12s ease;
}
.push-cta-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.push-cta-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink);
}
.push-cta-icon svg { width: 20px; height: 20px; }
.push-cta-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.push-cta-text strong { font-size: 14.5px; }
.push-cta-text span { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.push-cta-arrow { font-size: 24px; color: var(--accent); flex-shrink: 0; }

/* Quando já está ativado (texto muda pra "Desativar") — visual mais neutro, sem gritar */
.push-cta-btn.active {
  background: var(--surface-2); border-color: var(--border);
}
.push-cta-btn.active .push-cta-icon { background: var(--surface); color: var(--accent); }
.push-cta-btn.active .push-cta-arrow { color: var(--text-muted); }

.push-cta-btn:disabled { opacity: 0.5; cursor: default; }

/* Variante neutra — pra ações que não são "incentivadas" (tipo os
   outros botões amarelos), mas também não são perigosas o bastante
   pra ficarem vermelhas. Sair é o caso de uso: neutro comunica
   melhor "isso é só utilitário" */
.push-cta-btn-neutral {
  background: var(--surface-2); border-color: var(--border);
}
.push-cta-btn-neutral .push-cta-icon { background: var(--surface); color: var(--text-muted); }
.push-cta-btn-neutral .push-cta-arrow { color: var(--text-muted); }

.edit-language-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  max-width: 520px; width: 100%; margin: 0 auto 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px;
}
.edit-language-card label { font-size: 14.5px; font-weight: 600; }
.edit-language-card select {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); padding: 8px 12px; font-size: 14px; cursor: pointer;
}
.push-cta-btn:disabled:hover { transform: none; filter: none; }

.edit-profile-card {
  max-width: 520px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
#edit-profile-form { padding: 0 24px 24px; }

.edit-cover-wrap {
  position: relative; height: 140px; margin: 0 0 44px;
  background: linear-gradient(120deg, rgba(255,184,77,0.35), rgba(142,167,255,0.35));
  overflow: visible;
}
.edit-cover-preview { position: absolute; inset: 0; background-size: cover; background-position: center; }
.edit-cover-upload-btn {
  position: absolute; bottom: 10px; right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: rgba(10, 8, 16, 0.6); backdrop-filter: blur(6px);
  color: #fff; border-radius: 50%; cursor: pointer; border: 1px solid rgba(255,255,255,0.2);
}
.edit-cover-upload-btn:hover { background: rgba(10, 8, 16, 0.8); }

.edit-avatar-wrap {
  position: absolute; left: 24px; bottom: -40px;
}
.edit-avatar-wrap .avatar { border: 3px solid var(--surface); }
.edit-avatar-wrap .btn-add-story { bottom: 0; right: -2px; }

.edit-profile-card > .auth-forgot-link { display: block; padding: 0 24px 4px; margin: -8px 0 0; }
.edit-profile-card > .auth-forgot-link:last-of-type { padding-bottom: 22px; }

.comments-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; max-height: 320px; overflow-y: auto; }
.comment-item { display: flex; gap: 10px; }
.comment-bubble { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13.5px; }
.comment-author { font-weight: 700; font-size: 12.5px; margin-bottom: 2px; }
.comment-form { display: flex; gap: 8px; }
.comment-form input { flex: 1; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  padding: 12px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow); z-index: 200; animation: toastIn .25s ease;
}
.toast.error { border-color: var(--danger); color: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Descobrir pessoas ---------- */
.discover-hero { text-align: center; margin-bottom: 20px; }
.discover-hero h2 { font-family: var(--font-display); font-size: 22px; margin: 0 0 6px; }
.discover-hero p { color: var(--text-muted); font-size: 13.5px; margin: 0; }

.discover-nearby-bar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.btn-nearby { display: inline-flex; align-items: center; gap: 6px; }
.discover-nearby-hint { text-align: center; font-size: 11.5px; color: var(--text-muted); max-width: 440px; margin: 0 auto 20px; line-height: 1.5; }

.discover-filters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}
.discover-filters input { width: 100%; }
.discover-filters .btn-primary,
.discover-filters .btn-secondary { grid-column: span 1; }

.discover-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.discover-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 14px;
  text-align: center;
  transition: transform .15s ease, border-color .15s ease;
}
.discover-card:hover { transform: translateY(-3px); border-color: var(--accent-2); }
.discover-card .avatar { width: 64px; height: 64px; margin: 0 auto 10px; cursor: pointer; }
.discover-card-name { font-weight: 700; font-size: 14px; cursor: pointer; }
.discover-card-username { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.discover-card-meta {
  font-size: 11.5px; color: var(--text-muted); margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap;
}
.discover-card-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 12px; }
.discover-card .btn-primary,
.discover-card .btn-secondary { width: 100%; padding: 8px; font-size: 12.5px; }

@media (max-width: 640px) {
  .discover-filters { grid-template-columns: 1fr; }
  .discover-grid { grid-template-columns: 1fr; }
  .topbar { gap: 10px; padding: 10px 14px; }
  .topbar-brand { display: none; }
  .topbar-nav { gap: 2px; }
  .nav-link { padding: 8px 10px; font-size: 13px; }
  .main { padding: 16px 10px 70px; }
  .profile-info { flex-direction: column; align-items: flex-start; }

  /* Some com o campo de busca rápida no mobile — sobra só o ícone de
     lupa (nav-discover) no menu, que já leva pra página de busca */
  .topbar-search { display: none; }

  /* Três zonas: Feed fixo à esquerda, ícones (buscar/chat/grupos/
     notificações) centralizados de verdade no meio, avatar fixo à
     direita — usa Grid com colunas 1fr/auto/1fr, que centraliza a
     coluna do meio mesmo que Feed e o avatar tenham larguras
     diferentes (flexbox simples não garantiria isso). */
  .topbar-nav {
    flex: 1; margin-left: 0;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  }
  .topbar-nav > .nav-link[data-route="feed"] { grid-column: 1; justify-self: start; }
  .topbar-nav-center { grid-column: 2; display: flex; align-items: center; gap: 2px; }
  .topbar-nav > .nav-profile-btn { grid-column: 3; justify-self: end; }

  /* Dropdown de resultados de busca vira um painel largo e fixo,
     independente do tamanho (espremido) do campo de busca no header */
  .search-results {
    position: fixed;
    top: calc(60px + var(--safe-top-forced, env(safe-area-inset-top)));
    left: 8px;
    right: 8px;
    max-height: 60vh;
  }

  /* Reforço: garante 16px mesmo se algum componente específico
     sobrescrever o font-size do input em telas pequenas */
  input, textarea, select { font-size: 16px !important; }
}

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

/* =====================================================
   STORIES
===================================================== */

/* ---------- Anel colorido no avatar ---------- */
.avatar.has-story {
  padding: 3px;
  background: linear-gradient(135deg, var(--accent) 0%, #ff6fb0 50%, var(--accent-2) 100%);
  border-color: transparent;
  cursor: pointer;
  transition: transform .15s ease;
}
.avatar.has-story:hover { transform: scale(1.04); }

/* ---------- Botão de adicionar story no próprio perfil ---------- */
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.btn-add-story {
  position: absolute; bottom: 2px; right: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); border: 3px solid var(--bg);
  font-size: 16px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.btn-add-story:hover { transform: scale(1.1); }

/* ---------- Preview no modal de criar story ---------- */
.story-modal-preview { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius-sm); margin: 4px 0; }

/* ---------- Visualizador estilo Instagram ---------- */
.story-viewer {
  position: fixed; inset: 0; background: #000; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.story-viewer-progress {
  position: absolute; top: calc(12px + var(--safe-top-forced, env(safe-area-inset-top))); left: 12px; right: 12px;
  display: flex; gap: 4px; z-index: 2;
}
.story-progress-bar {
  flex: 1; height: 3px; background: rgba(255,255,255,0.35); border-radius: 2px; overflow: hidden;
}
.story-progress-fill { height: 100%; width: 0%; background: #fff; }

.story-viewer-header {
  position: absolute; top: calc(26px + var(--safe-top-forced, env(safe-area-inset-top))); left: 12px; right: 12px;
  display: flex; align-items: center; gap: 10px; z-index: 2;
}
.story-viewer-name { color: #fff; font-weight: 700; font-size: 14px; }
.story-viewer-time { color: rgba(255,255,255,0.7); font-size: 12.5px; margin-left: -4px; }
.story-viewer-icon-btn {
  background: none; border: none; color: #fff; font-size: 20px; cursor: pointer;
  padding: 4px; line-height: 1; opacity: 0.85;
  display: inline-flex; align-items: center; justify-content: center;
}
.story-viewer-icon-btn:hover { opacity: 1; }
#story-viewer-close { margin-left: auto; }

.story-viewer-body {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; max-width: 480px; max-height: 100vh;
}
.story-viewer-image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }

.story-nav-btn {
  position: absolute; top: 0; bottom: 0; width: 25%;
  background: none; border: none; color: rgba(255,255,255,0.6);
  display: flex; align-items: center; opacity: 0; transition: opacity .15s ease;
}
.story-nav-prev { left: 0; justify-content: flex-start; padding-left: 8px; }
.story-nav-next { right: 0; justify-content: flex-end; padding-right: 8px; }
.story-viewer-body:hover .story-nav-btn { opacity: 1; }
.story-nav-btn svg { width: 26px; height: 26px; }

.story-viewer-caption {
  position: absolute; bottom: 64px; left: 16px; right: 16px;
  color: #fff; text-align: center; font-size: 14px; line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6); z-index: 2;
}

.story-viewer-footer {
  position: absolute; bottom: 18px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 2;
}
.story-like-btn {
  background: none; border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 6px; opacity: 0.9; transition: transform .15s ease;
}
.story-like-btn:hover { opacity: 1; transform: scale(1.1); }
.story-like-btn.liked svg { animation: pop .28s ease; }
.story-like-count { color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }

@media (max-width: 640px) {
  .story-viewer-body { max-width: 100%; }
}

/* =====================================================
   LIGHTBOX DE IMAGEM (usado no chat)
===================================================== */
.image-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.image-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain; }
.image-lightbox-close {
  position: absolute; top: calc(18px + var(--safe-top-forced, env(safe-area-inset-top))); right: 22px; background: none; border: none;
  color: #fff; font-size: 32px; line-height: 1; cursor: pointer; opacity: 0.85;
}
.image-lightbox-close:hover { opacity: 1; }

/* =====================================================
   TOASTS DE NOTIFICAÇÃO EM TEMPO REAL
===================================================== */
.notif-toast-container {
  position: fixed; top: 76px; right: 20px; z-index: 250;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none;
}
.notif-toast-card {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 12px 14px; width: 300px; max-width: calc(100vw - 40px);
  cursor: pointer; animation: notifToastIn .25s ease;
}
.notif-toast-card:hover { border-color: var(--accent-2); }
.notif-toast-card.leaving { animation: notifToastOut .2s ease forwards; }
@keyframes notifToastIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes notifToastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(24px); }
}
.notif-toast-text { font-size: 12.5px; line-height: 1.4; flex: 1; min-width: 0; }
.notif-toast-text strong { font-weight: 700; }
.notif-toast-icon { font-size: 14px; flex-shrink: 0; }

@media (max-width: 640px) {
  .notif-toast-container { top: 66px; right: 10px; left: 10px; align-items: stretch; }
  .notif-toast-card { width: auto; }
}

/* ---------- Menções (@usuario) ---------- */
.mention-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.mention-link:hover { text-decoration: underline; }

.mention-dropdown {
  position: fixed;
  z-index: 500;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.mention-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 7px 8px; border-radius: 7px;
  background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 13.5px;
}
.mention-dropdown-item.active,
.mention-dropdown-item:hover { background: rgba(255,255,255,0.07); }
.mention-dropdown-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.mention-dropdown-name {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mention-dropdown-username {
  color: var(--text-muted); font-size: 12px;
  margin-left: auto; flex-shrink: 0;
}

/* ---------- Grupos ---------- */
.edit-profile-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }

.groups-list { display: flex; flex-direction: column; gap: 10px; }
.group-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: background .12s ease;
}
.group-card:hover { background: var(--surface-2); }
.group-card-info { flex: 1; min-width: 0; }
.group-card-name { font-weight: 700; font-size: 14.5px; }
.group-card-member-tag {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  background: var(--accent); color: var(--accent-ink); padding: 2px 7px; border-radius: 999px;
  vertical-align: middle;
}
.group-role-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: var(--accent-ink); vertical-align: middle;
  cursor: default;
}
.group-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.group-card-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-unread-dot {
  position: absolute; bottom: 0; right: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--danger); border: 2px solid var(--bg);
}

.group-chat-header-wrap {
  max-width: 640px; margin: 0 auto 12px; position: relative;
}
.group-chat-cover {
  height: 110px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(120deg, rgba(255,184,77,0.35), rgba(142,167,255,0.35));
  background-size: cover; background-position: center;
}
.group-chat-header-overlay {
  position: absolute; top: 10px; left: 10px;
  display: flex; align-items: center;
}
.group-chat-overlay-btn {
  background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
  color: #fff; border-radius: 50%;
}
.group-chat-overlay-btn:hover { background: rgba(0,0,0,0.6); }
.group-chat-info-row {
  display: flex; align-items: center; gap: 12px; padding: 0 16px; margin-top: -20px;
}
.group-chat-avatar {
  width: 64px; height: 64px; border: 3px solid var(--bg); flex-shrink: 0;
}
.group-chat-header-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.group-chat-header-meta strong { font-size: 16px; }
.group-chat-header-meta .muted { font-size: 12px; }
.group-chat-members-btn {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.group-chat-members-btn svg { width: 20px; height: 20px; }
.group-chat-members-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.group-chat-description-visible {
  padding: 8px 16px 0; font-size: 13px; color: var(--text-muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.group-chat-locked {
  max-width: 640px; margin-left: auto; margin-right: auto;
  text-align: center; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.group-chat-thread {
  display: flex; flex-direction: column;
  max-width: 640px; margin-left: auto; margin-right: auto; width: 100%;
}
.group-msg-sender { font-size: 11.5px; font-weight: 700; color: var(--accent-2); margin-bottom: 2px; }

/* Desktop: altura da tela inteira fixa, sem rolar a página — só a
   lista de mensagens rola por dentro. O cabeçalho (capa+avatar+
   descrição) tem altura variável (a descrição pode ter 0, 1 ou 2
   linhas), então em vez de chutar um número fixo pra subtrair, a
   seção inteira vira uma coluna flex e o conteúdo abaixo do
   cabeçalho (.group-chat-thread ou .group-chat-locked) ocupa o
   espaço restante sozinho — se ajusta automaticamente. */
/* Desktop: altura fixa, sem rolar a página inteira — só a lista de
   mensagens rola por dentro. O número abaixo já soma: altura do
   cabeçalho novo (capa 110px + linha de avatar/nome + até 2 linhas de
   descrição) + a barra superior fixa do app + respiro do layout. Não
   é uma técnica elegante de "se ajustar sozinho", mas é a mesma que já
   funcionava antes disso, só recalibrada — bem mais previsível. */
@media (min-width: 641px) {
  .group-chat-thread { height: calc(100vh - 340px); min-height: 320px; }
  .group-chat-locked { height: calc(100vh - 340px); min-height: 320px; overflow-y: auto; }
}

/* Desktop largo: painel de membros vira coluna fixa sempre visível,
   em vez de gaveta que desliza por cima da conversa — só faz sentido
   com espaço de sobra na tela, por isso o breakpoint mais alto que os
   outros ajustes de "desktop" desse arquivo. */
@media (min-width: 1024px) {
  body.group-chat-active .main { max-width: 100%; }
  body.group-chat-active #view-group-chat { padding-right: 364px; padding-left: 300px; }
  body.group-chat-active #group-members-backdrop { display: none !important; }
  body.group-chat-active #group-members-modal.hidden {
    display: flex !important;
  }
  body.group-chat-active #group-members-modal {
    transform: none !important; box-shadow: none;
    top: 72px;
    /* Fica abaixo do topbar (z-index 20) — o topbar cria seu próprio
       contexto de empilhamento, então o dropdown de notificações
       (z-index 120 *dentro* desse contexto) nunca ultrapassa esse
       painel se ele mantiver o z-index 100 padrão da gaveta mobile.
       Aqui, no modo "coluna fixa" de desktop, baixamos pra 10 —
       ainda acima do conteúdo normal da página, mas abaixo do topbar
       e de tudo que abre a partir dele (notificações, busca). */
    z-index: 10;
  }
  body.group-chat-active #close-group-members-modal { display: none; }
  body.group-chat-active .group-chat-header-wrap,
  body.group-chat-active .group-chat-thread,
  body.group-chat-active .group-chat-locked {
    max-width: 100%; width: auto; margin-left: 20px; margin-right: 20px;
  }

  body.group-chat-active .group-chat-media-sidebar {
    display: block;
    position: fixed; left: 0; top: 72px; bottom: 0; width: 280px;
    overflow-y: auto; padding: 20px 16px;
    border-right: 1px solid var(--border);
  }
}
.group-chat-media-sidebar { display: none; }
.group-chat-media-sidebar h4 { margin: 0 0 14px; font-size: 14px; color: var(--text-muted); }
.group-chat-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.group-chat-media-grid > div {
  aspect-ratio: 1; border-radius: 6px; overflow: hidden; cursor: pointer;
  background: var(--surface-2); position: relative;
}
.group-chat-media-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.group-chat-media-grid .group-chat-media-video-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff;
}
.group-chat-media-empty { font-size: 12.5px; text-align: center; padding: 20px 8px; }

.group-msg-reply-quote {
  border-left: 3px solid var(--accent); background: rgba(255,255,255,0.04);
  border-radius: 4px; padding: 4px 8px; margin-bottom: 6px; font-size: 12px;
}
.group-msg-reply-quote strong { display: block; color: var(--accent-2); font-size: 11.5px; }
.group-msg-reply-quote span { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

.group-msg-actions { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.group-msg-like-btn {
  display: inline-flex; align-items: center; gap: 3px; background: none; border: none;
  color: var(--text-muted); cursor: pointer; padding: 0; font-size: 11.5px; font-weight: 700;
}
.group-msg-like-btn.liked { color: var(--danger); }
.group-msg-like-btn svg { width: 14px; height: 14px; }
.group-msg-reply-btn {
  background: none; border: none; color: var(--text-muted); font-size: 11.5px; font-weight: 700;
  cursor: pointer; padding: 0;
}
.group-msg-reply-btn:hover, .group-msg-like-btn:hover { color: var(--accent-2); }
.group-msg-pin-btn {
  display: inline-flex; align-items: center; background: none; border: none;
  color: var(--text-muted); cursor: pointer; padding: 0;
}
.group-msg-pin-btn:hover { color: var(--accent); }

.group-chat-reply-preview {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: 6px;
  padding: 8px 12px; margin: 0 0 8px;
}
.group-chat-reply-preview-text { min-width: 0; overflow: hidden; }
.group-chat-reply-preview-text strong { display: block; font-size: 12px; color: var(--accent-2); }
.group-chat-reply-preview-text span { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
#group-chat-reply-cancel { background: none; border: none; color: var(--text-muted); font-size: 20px; line-height: 1; flex-shrink: 0; cursor: pointer; }

/* ---------- Painel lateral deslizante (membros do grupo) ---------- */
.side-panel-backdrop {
  position: fixed; inset: 0; background: rgba(10,8,16,0.6); z-index: 99;
}
.side-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: 340px; max-width: 88vw;
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease;
  box-shadow: -8px 0 24px rgba(0,0,0,0.3);
}
.side-panel.open { transform: translateX(0); }
.side-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  padding-top: calc(18px + var(--safe-top-forced, env(safe-area-inset-top)));
}
.side-panel-header h3 { margin: 0; font-family: var(--font-display); font-size: 17px; }
.side-panel-header .modal-close { position: static; }

/* Reforço garantido, valor fixo — mesma lógica já usada na topbar e
   no widget de chat, pra cobrir o caso em que o cálculo automático
   não se aplica nesse aparelho por algum motivo */
@media (display-mode: standalone) and (max-width: 640px) {
  .side-panel-header { padding-top: 54px !important; }
}
.side-panel-body { flex: 1; overflow-y: auto; padding: 16px 20px; }

/* ---------- Cartão de prévia de vídeo do YouTube (chat) ---------- */
.yt-embed-card {
  margin-top: 6px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface); max-width: 280px;
}
.yt-embed-thumb-wrap { position: relative; aspect-ratio: 16/9; background: #000; }
.yt-embed-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-embed-thumb-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.yt-embed-play-btn {
  position: absolute; inset: 0; margin: auto; width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.yt-embed-play-btn:hover svg circle { fill: rgba(0,0,0,0.85); }
.yt-embed-title {
  padding: 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Menu do card de grupo (editar/apagar) ---------- */
.group-card { position: relative; }
.group-card-menu-wrap { position: relative; flex-shrink: 0; align-self: flex-start; }
.group-card-menu-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; background: none; border: none; border-radius: 50%;
  color: var(--text-muted); cursor: pointer;
}
.group-card-menu-btn:hover { background: var(--surface-2); color: var(--text); }
.group-card-lock { vertical-align: -1px; margin-right: 4px; color: var(--text-muted); }

/* ---------- Modal de editar grupo — visibilidade ---------- */
.edit-group-visibility { margin: 4px 0; }
.edit-group-visibility > span { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.edit-group-visibility-options { display: flex; flex-direction: column; gap: 8px; }
.edit-group-visibility-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color .12s ease;
}
.edit-group-visibility-option:has(input:checked) { border-color: var(--accent); background: rgba(255,184,77,0.06); }
.edit-group-visibility-option input { margin-top: 3px; flex-shrink: 0; }
.edit-group-visibility-option strong { display: block; font-size: 13.5px; }
.edit-group-visibility-option small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Convite pra grupo privado ---------- */
.group-invite-search-wrap { margin-bottom: 10px; }
#group-invite-search-input {
  width: 100%; font-size: 13.5px; padding: 9px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text);
}

/* ---------- Tela de aceitar/recusar convite ---------- */
.group-chat-invite-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.group-chat-invite-buttons { display: flex; gap: 10px; width: 100%; max-width: 280px; }
.group-chat-invite-buttons button { flex: 1; }

/* ---------- Sugestão de idioma detectado ---------- */
.lang-suggestion-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
  max-width: 420px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease;
}
.lang-suggestion-banner.show { opacity: 1; transform: translateY(0); }
.lang-suggestion-text { font-size: 13.5px; line-height: 1.4; }
.lang-suggestion-actions { display: flex; gap: 8px; }
.lang-suggestion-accept, .lang-suggestion-dismiss {
  flex: 1; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 8px 12px;
  border: none; cursor: pointer;
}
.lang-suggestion-accept { background: var(--accent); color: var(--accent-ink); }
.lang-suggestion-dismiss { background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }

/* ---------- Busca de grupo na tela de Grupos ---------- */
.groups-search-input {
  display: block; width: 100%; margin: 12px 0;
  font-size: 13.5px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text);
}
.groups-search-input::placeholder { color: var(--text-muted); }

/* ---------- Mensagem fixada no grupo ---------- */
.group-chat-pinned {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 8px;
  background: rgba(255,184,77,0.08); border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
}
.group-chat-pinned svg { color: var(--accent); flex-shrink: 0; }
.group-chat-pinned-text { flex: 1; min-width: 0; }
.group-chat-pinned-text strong { display: block; font-size: 11.5px; color: var(--accent); text-transform: uppercase; letter-spacing: .3px; }
.group-chat-pinned-text span {
  display: block; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.group-chat-unpin-btn {
  background: none; border: none; color: var(--text-muted); font-size: 18px; line-height: 1;
  flex-shrink: 0; cursor: pointer; padding: 4px;
}
.group-chat-unpin-btn:hover { color: var(--danger); }

/* ---------- Cadastro em etapas ---------- */
.auth-steps-head { margin-bottom: 4px; }
.auth-steps-count {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.auth-steps-bar {
  height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden;
}
.auth-steps-bar > span {
  display: block; height: 100%; width: 25%; border-radius: 999px;
  background: var(--accent); transition: width .25s ease;
}
/* Cada passo herda o mesmo espaçamento vertical do formulário */
.auth-step { display: flex; flex-direction: column; gap: 16px; }
.auth-step-actions { display: flex; flex-direction: column; gap: 10px; }
.auth-step-back { order: 2; }
@media (prefers-reduced-motion: reduce) {
  .auth-steps-bar > span { transition: none; }
}


/* ===== SOURCE: auth-modern-v4.css ===== */
/* Youkut Auth — refined subtle visual */
:root{--yk-yellow:#ffd84a;--yk-yellow-deep:#e9b718;--yk-ink:#25221d;--yk-muted:#746d64;--yk-line:#e8e1d7;--yk-paper:#fffdfa;--yk-soft:#faf7f1;--yk-success:#197a4a;--yk-danger:#b4233c}
.auth-screen{grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden;background:var(--yk-soft);color:var(--yk-ink)}
body:has(.auth-screen:not(.hidden)){height:100%;overflow:hidden;overscroll-behavior:none}
.auth-visual{position:relative;overflow:hidden;height:100%;min-height:0;background:var(--yk-yellow);color:var(--yk-ink)}
.auth-visual::before,.auth-visual::after{display:none!important;content:none!important}
.auth-visual-content{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;max-width:760px;margin:auto;padding:clamp(34px,5vh,62px) clamp(48px,5.5vw,92px);box-sizing:border-box}
.auth-visual-top{display:flex;align-items:center;gap:14px}.auth-logo-mark{width:42px;height:42px;fill:none;stroke:var(--yk-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.auth-visual-brand{font-family:"Sora",var(--font-display),sans-serif;font-size:30px;font-weight:700;line-height:1;letter-spacing:-.065em;color:var(--yk-ink)}
.auth-visual-middle{margin:auto 0;max-width:590px}.auth-motion-mark{width:clamp(128px,12vw,184px);height:clamp(128px,12vw,184px);margin:0 0 clamp(30px,5vh,54px);animation:ykAuthFloat 5.2s ease-in-out infinite;transform-origin:50% 55%}.auth-motion-mark svg{display:block;width:100%;height:100%;overflow:visible}.auth-motion-mark path{fill:none;stroke:var(--yk-ink);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:180;stroke-dashoffset:180;animation:ykAuthDraw 1.45s cubic-bezier(.22,.8,.22,1) .18s forwards}.auth-visual-middle h2{margin:0;max-width:560px;font-family:"Sora",var(--font-display),sans-serif;font-size:clamp(36px,4.5vw,58px);font-weight:600;line-height:1.02;letter-spacing:-.052em;color:var(--yk-ink);text-wrap:balance}
.auth-message-flow{display:none!important}
@keyframes ykAuthFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes ykAuthDraw{to{stroke-dashoffset:0}}
.auth-form-panel{height:100%;min-height:0;box-sizing:border-box;background:var(--yk-soft);padding:clamp(30px,6vh,76px) clamp(30px,5vw,78px);color:var(--yk-ink);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.auth-card{width:100%;max-width:430px;margin:clamp(28px,6vh,72px) auto;background:transparent;color:var(--yk-ink);border:0;border-radius:0;padding:0;box-shadow:none;backdrop-filter:none}
.auth-card-heading{margin-bottom:26px}.auth-card-heading h2,.auth-card h1,.auth-card h2,.auth-card h3{color:var(--yk-ink)!important}.auth-card-heading h2{margin:0 0 9px;font-family:"Sora",var(--font-display),sans-serif;font-size:clamp(29px,3vw,37px);font-weight:600;line-height:1.08;letter-spacing:-.045em}.auth-card-heading p,.auth-card p{color:var(--yk-muted);font-size:14px;line-height:1.58}.auth-form-eyebrow{display:inline-block;margin-bottom:13px;color:#9a7310!important;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.auth-form-eyebrow::before{display:none!important}
.auth-brand-mobile{display:none;text-align:center;margin-bottom:26px}.auth-brand-mobile-mark{width:48px;height:48px;fill:none;stroke:var(--yk-ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 10px}.auth-brand-mobile h1{margin:0 0 6px;font-family:"Sora",var(--font-display),sans-serif;font-size:31px;line-height:1;font-weight:700;letter-spacing:-.065em}.auth-brand-mobile p{margin:0;color:var(--yk-muted);font-size:12px}
.auth-tabs{display:flex;gap:24px;padding:0;margin:0 0 26px;background:transparent;border:0;border-bottom:1px solid var(--yk-line);border-radius:0}.auth-tab{position:relative;min-height:42px;padding:0 1px 12px;color:#8a8278!important;background:transparent!important;border-radius:0!important;font-size:14px;font-weight:600;box-shadow:none!important}.auth-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:transparent;transform:scaleX(.65);transition:.18s ease}.auth-tab.active{color:var(--yk-ink)!important}.auth-tab.active::after{background:var(--yk-yellow-deep);transform:scaleX(1)}
.auth-card label,.auth-card label>span{color:#514b43!important;font-size:12.5px;font-weight:600}.auth-card label>span{display:block;margin-bottom:7px}.auth-card a,.auth-forgot-link{color:#8a6508!important}.auth-card small{color:var(--yk-muted)}
.auth-card input:not([type="checkbox"]){min-height:48px;color:var(--yk-ink)!important;background:var(--yk-paper)!important;border:1px solid var(--yk-line)!important;border-radius:12px;caret-color:#9f780f;padding:0 14px;font-size:14px;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}.auth-card input::placeholder{color:#aaa196!important;opacity:1}.auth-card input:focus{border-color:#d2aa38!important;box-shadow:0 0 0 3px rgba(255,216,74,.18)!important;outline:0;background:#fff!important}.auth-password-toggle{color:#827a70!important}
.auth-card .btn-primary{min-height:48px;border-radius:12px;background:var(--yk-yellow)!important;color:#2b271f!important;box-shadow:none!important;font-weight:700;font-size:14px;transition:transform .15s ease,background-color .15s ease}.auth-card .btn-primary:hover{background:#ffdc5a!important;filter:none!important}.auth-card .btn-primary:active{transform:translateY(1px)}
.auth-forgot-link{margin-top:13px;font-size:13px;font-weight:600}.auth-secure-note,.auth-footer{color:#91897f!important}.auth-secure-note{display:flex;align-items:center;justify-content:flex-start;gap:7px;margin-top:18px;font-size:11px}.auth-secure-note svg{width:13px;height:13px;stroke:#91897f;fill:none;stroke-width:1.7}.auth-footer{display:flex;justify-content:flex-start;gap:8px;margin-top:18px;font-size:10.5px}.auth-consent{font-size:11.5px;line-height:1.55}
.auth-steps-head{margin-bottom:22px}.auth-steps-count{color:var(--yk-muted)!important;font-size:11px}.auth-steps-bar{height:3px;background:#ece6dc}.auth-steps-bar span{background:var(--yk-yellow-deep)}
.auth-username-field{display:flex;align-items:center;border:1px solid var(--yk-line);border-radius:12px;background:var(--yk-paper);transition:.15s}.auth-username-field>span{padding-left:14px;color:#70685e!important;font-weight:700}.auth-username-field input{border:0!important;box-shadow:none!important;padding-left:3px!important;flex:1}.auth-username-field:focus-within{border-color:#d2aa38;box-shadow:0 0 0 3px rgba(255,216,74,.18)}.auth-username-label.is-valid .auth-username-field{border-color:var(--yk-success);box-shadow:0 0 0 3px rgba(25,122,74,.08)}.auth-username-label.is-invalid .auth-username-field{border-color:var(--yk-danger);box-shadow:0 0 0 3px rgba(180,35,60,.07)}.username-feedback{display:flex;align-items:center;min-height:18px}.username-feedback[data-state="checking"]{color:#8a6508!important}.username-feedback[data-state="valid"]{color:var(--yk-success)!important}.username-feedback[data-state="invalid"]{color:var(--yk-danger)!important}
.username-suggestions{display:flex;flex-wrap:wrap;gap:6px}.username-suggestions button{border:1px solid #e6dcc9;border-radius:999px;background:#fffaf0;color:#775705;padding:5px 9px;font:600 11px var(--font-body);cursor:pointer}.username-suggestions button:hover{border-color:#d2aa38;background:#fff4c9}
.form-error{color:var(--yk-danger)!important}.forgot-success p{color:var(--yk-ink)!important}
.reset-screen{background:var(--yk-soft)!important;color:var(--yk-ink)}.reset-card{background:transparent!important;color:var(--yk-ink)!important;border:0!important;box-shadow:none!important}.reset-card h1{color:var(--yk-ink)!important;font-family:"Sora",var(--font-display),sans-serif;font-weight:600;letter-spacing:-.04em}.reset-card p,.reset-card label{color:var(--yk-muted)!important}.reset-card input{color:var(--yk-ink)!important;background:var(--yk-paper)!important;border-color:var(--yk-line)!important}.reset-card input::placeholder{color:#aaa196!important}.reset-card .btn-primary{background:var(--yk-yellow)!important;color:#2b271f!important}.reset-back-link{color:#8a6508!important}
#forgot-password-modal .modal-content{background:var(--yk-paper);color:var(--yk-ink);border-color:var(--yk-line)}#forgot-password-modal h3{color:var(--yk-ink)}#forgot-password-modal .modal-subtitle{color:var(--yk-muted)}#forgot-password-modal input{color:var(--yk-ink);background:#fff;border-color:var(--yk-line)}#forgot-password-modal input::placeholder{color:#aaa196}
@media(max-width:980px){.auth-screen{grid-template-columns:minmax(0,.96fr) minmax(390px,1.04fr)}.auth-visual-content{padding-inline:38px}.auth-visual-middle h2{font-size:clamp(34px,4.4vw,48px)}.auth-motion-mark{width:126px;height:126px}.auth-visual-brand{font-size:27px}.auth-logo-mark{width:38px;height:38px}}
@media(max-width:900px){.auth-screen{display:block;height:100vh;height:100dvh;background:var(--yk-soft)}.auth-visual{display:none}.auth-form-panel{height:100%;min-height:0;padding:22px 20px 30px;background:var(--yk-soft)}.auth-card{margin:0 auto;max-width:430px}.auth-brand-mobile{display:block;padding-top:8px}.auth-card-heading{text-align:left}.auth-secure-note{font-size:10.5px}.auth-footer{justify-content:center}.auth-tabs{margin-bottom:24px}}
@supports not (height:100dvh){.auth-screen{height:-webkit-fill-available}.auth-form-panel,.auth-visual{height:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.auth-motion-mark{transform:none!important}}

/* ===== SOURCE: product-foundation-v2.css ===== */
/* Fundação de produto Youkut — onboarding, privacidade e navegação */
.settings-section-label{margin:28px 2px 9px;color:var(--text-muted);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.push-cta-btn-danger{color:#a92c3d}.push-cta-btn-danger .push-cta-icon{background:rgba(180,35,60,.09);color:#a92c3d}
.onboarding-overlay{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:rgba(25,22,18,.52);backdrop-filter:blur(10px)}.onboarding-card{width:min(580px,100%);background:#fff;color:#201d1a;border:1px solid #eee4d4;border-radius:28px;padding:clamp(26px,5vw,46px);box-shadow:0 35px 100px rgba(32,25,15,.2)}.onboarding-progress{display:flex;gap:6px;margin-bottom:35px}.onboarding-progress i{height:4px;flex:1;border-radius:9px;background:#ece7df}.onboarding-progress i.active{background:#f2aa18}.onboarding-kicker{color:#966000;font-size:11px;font-weight:800;letter-spacing:.14em}.onboarding-step h2{margin:8px 0 9px;font:800 clamp(25px,4vw,35px)/1.05 "Nunito",sans-serif;letter-spacing:-.035em}.onboarding-step>p{color:#70685e;line-height:1.55}.onboarding-step label{display:grid;gap:7px;margin-top:24px;font-weight:700}.onboarding-step textarea,.onboarding-step input{width:100%;border:1px solid #dcd5cb;border-radius:14px;background:#fdfcf9;color:#201d1a;padding:13px 14px;font:inherit}.onboarding-step textarea{min-height:110px;resize:vertical}.interest-picker{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.interest-picker button{border:1px solid #dbd3c7;border-radius:999px;background:#fff;color:#494138;padding:9px 13px;font-weight:700;cursor:pointer}.interest-picker button.selected{border-color:#e39a0b;background:#fff1ce;color:#704900}.onboarding-trust{margin-top:16px;padding:12px;border-radius:12px;background:#f8f5ef;color:#6d655c;font-size:12px}.onboarding-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px}.onboarding-actions .btn-primary,.onboarding-actions .btn-secondary{min-width:120px}.privacy-center-card{max-width:600px}.privacy-options{display:grid;gap:0}.privacy-options>label{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:17px 0;border-bottom:1px solid var(--border)}.privacy-options>label>span{display:grid;gap:4px}.privacy-options small{color:var(--text-muted);line-height:1.4}.privacy-options input[type=checkbox]{width:20px;height:20px;accent-color:#e7a111}.privacy-options select{min-width:145px}.privacy-options .btn-primary{margin-top:20px}
@media(max-width:700px){.onboarding-overlay{padding:12px;place-items:end center}.onboarding-card{border-radius:24px 24px 12px 12px}.privacy-options>label{align-items:flex-start}.privacy-select{flex-direction:column}.privacy-options select{width:100%}}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.discover-match-reason{margin:8px 0;color:#8b5a00;font-size:11px;font-weight:700}


/* ===== SOURCE: chat-v49.css ===== */
/* =====================================================
   YOUKUT — Chat widget (botão flutuante + painel)
===================================================== */

/* ---------- Botão flutuante ---------- */
.chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(255,184,77,0.35);
  z-index: 150;
  transition: transform .15s ease, box-shadow .15s ease;
}
.chat-fab svg { width: 27px; height: 27px; }
.chat-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 26px rgba(255,184,77,0.42); }
.chat-fab:active { transform: translateY(0) scale(0.98); }
.chat-fab.is-open { background: var(--surface-2); color: var(--text); box-shadow: var(--shadow); }

.chat-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid var(--bg);
}

/* ---------- Painel ---------- */
.chat-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 360px;
  height: 540px;
  max-height: calc(100vh - 120px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 150;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chatPanelIn .18s ease;
  transform-origin: bottom right;
}
@keyframes chatPanelIn {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.chat-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-panel-title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.chat-panel-title > div { display: flex; flex-direction: column; min-width: 0; }
#chat-panel-title-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-thread-status { font-size: 11.5px; color: var(--success); }

.chat-icon-btn {
  background: none; border: none; color: var(--text-muted); padding: 6px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s ease, color .15s ease;
}
.chat-icon-btn svg { width: 18px; height: 18px; }
.chat-icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ---------- Lista de amigos ---------- */
.chat-list-view { flex: 1; overflow-y: auto; }
.chat-list-label {
  padding: 12px 16px 4px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.chat-empty { padding: 30px 20px; font-size: 13.5px; line-height: 1.5; }

.chat-friend-search {
  display: block; width: calc(100% - 24px); margin: 4px 12px 8px;
  font-size: 13.5px; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text);
}
.chat-friend-search::placeholder { color: var(--text-muted); }

.chat-friend-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .12s ease;
  border-bottom: 1px solid var(--border);
}
.chat-friend-row:hover { background: var(--surface-2); }
.chat-friend-row .avatar { flex-shrink: 0; }
.chat-friend-info { flex: 1; min-width: 0; }
.chat-friend-name-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.chat-friend-name { font-weight: 700; font-size: 13.5px; }
.chat-friend-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.chat-friend-preview {
  font-size: 12.5px; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-friend-preview.unread { color: var(--text); font-weight: 600; }
.chat-unread-dot {
  background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; padding: 0 4px; flex-shrink: 0;
}

/* ---------- Thread de conversa ---------- */
.chat-thread-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.chat-msg-row { display: flex; gap: 8px; align-items: flex-end; }
.chat-msg-row.mine { justify-content: flex-end; }
.chat-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.chat-msg-row.theirs .chat-bubble { background: var(--surface-2); color: var(--text); border-bottom-left-radius: 4px; }
.chat-msg-row.mine .chat-bubble { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }

.chat-msg-meta {
  display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 10.5px; color: var(--text-muted);
}
.chat-msg-row.mine .chat-msg-meta { justify-content: flex-end; }
.chat-msg-row.mine .group-msg-actions { justify-content: flex-end; }
.chat-msg-group {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  min-width: 0;
}
.chat-msg-avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.chat-seen-check { color: var(--accent-2); }

.chat-day-divider {
  text-align: center; font-size: 11px; color: var(--text-muted); margin: 10px 0 4px;
}

.chat-send-form {
  display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.chat-send-form input { flex: 1; min-width: 0; border-radius: 999px; }
.chat-attach-btn {
  background: none; border: none; color: var(--text-muted); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding: 6px; cursor: pointer;
}
.chat-attach-btn:hover { color: var(--text); }
.chat-send-btn {
  background: var(--accent); color: var(--accent-ink); border: none; border-radius: 50%;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: filter .12s ease, transform .12s ease;
}
.chat-send-btn svg { width: 17px; height: 17px; }
.chat-send-btn:hover { filter: brightness(1.08); }
.chat-send-btn:disabled { opacity: .4; cursor: not-allowed; }

.chat-image-preview-wrap {
  position: relative; margin: 0 12px 10px; border-radius: var(--radius-sm); overflow: hidden;
  max-width: 180px; flex-shrink: 0; background: #000;
}
/* Áudio precisa de mais largura que a thumbnail de imagem/vídeo pros
   controles nativos do player caberem direito — a classe é ligada via
   JS junto com a inserção do preview de áudio */
.chat-image-preview-wrap.has-audio-preview {
  max-width: 280px; background: none; overflow: visible;
}
.chat-image-preview { width: 100%; max-height: 140px; object-fit: cover; display: block; }
#chat-video-preview { width: 100%; max-height: 160px; display: block; }

.chat-msg-image {
  max-width: min(220px, 100%); max-height: 260px; width: auto; border-radius: 14px; object-fit: cover;
  display: block; margin-bottom: 4px; cursor: pointer;
}
.chat-msg-video {
  max-width: min(240px, 100%); max-height: 280px; width: auto; border-radius: 14px;
  display: block; margin-bottom: 4px; background: #000;
}

/* ---------- Mensagem de voz: gravação e player ---------- */
.chat-mic-btn { flex-shrink: 0; }

/* Enquanto grava, essa linha substitui o resto do formulário
   (input + botões de anexo + enviar, escondidos via JS) */
.chat-audio-recording {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.chat-audio-rec-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--danger);
  flex-shrink: 0; animation: chatAudioRecPulse 1.2s ease-in-out infinite;
}
@keyframes chatAudioRecPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(0.8); }
}
.chat-audio-rec-timer {
  font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--text-muted); flex-shrink: 0;
}
.chat-audio-rec-btn {
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; margin-left: auto;
}
.chat-audio-rec-cancel { color: var(--text-muted); }
.chat-audio-rec-cancel:hover { color: var(--danger); background: rgba(255,255,255,0.06); }
.chat-audio-rec-confirm { color: var(--accent-ink); background: var(--accent); margin-left: 6px; }
.chat-audio-rec-confirm:hover { filter: brightness(1.08); }

/* Player customizado — o <audio controls> nativo praticamente não
   sobra nada visível numa bolha estreita, então esse player próprio
   garante que o play/pause, a barra de progresso e a duração fiquem
   sempre visíveis e fáceis de usar, tanto no mouse quanto no toque. */
.audio-player {
  display: flex; align-items: center; gap: 10px;
  max-width: min(260px, 100%); width: 100%;
  background: var(--surface-2); border-radius: 999px;
  padding: 6px 14px 6px 6px; margin-bottom: 4px;
}
.chat-audio-preview-bubble .audio-player { background: none; padding-left: 0; padding-right: 0; }

.audio-player-btn {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter .12s ease, transform .1s ease;
}
.audio-player-btn:hover { filter: brightness(1.08); }
.audio-player-btn:active { transform: scale(0.94); }
.audio-player-btn svg.hidden { display: none; }
/* O ícone de play não é perfeitamente centralizado visualmente (é um
   triângulo) — desloca 1px pra direita pra compensar */
.audio-player-btn .icon-play { margin-left: 1px; }

/* A barra visual é fina (4px), mas a área clicável/arrastável é bem
   maior (padding vertical) — importante pro toque no celular, onde
   acertar uma linha de 4px de altura é frustrante */
.audio-player-progress-bg {
  flex: 1; min-width: 50px; padding: 12px 0; cursor: pointer; touch-action: none;
}
.audio-player-progress-track {
  height: 4px; border-radius: 999px; background: var(--border); position: relative; overflow: hidden;
}
.audio-player-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--accent); border-radius: 999px;
}
.audio-player-time {
  flex-shrink: 0; font-size: 11.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; min-width: 32px; text-align: right;
}
.audio-player-el { display: none; } /* só usado como motor de áudio — a UI é toda customizada acima */

/* Mobile: alvo de toque maior no botão (recomendação de ~44px) e
   mais espaço na barra de progresso pra facilitar o arrasto com o dedo */
@media (max-width: 640px) {
  .audio-player { gap: 12px; padding: 6px 14px 6px 6px; }
  .audio-player-btn { width: 44px; height: 44px; }
  .audio-player-progress-bg { padding: 14px 0; }
}

.chat-audio-preview-bubble {
  padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border); /* tracejado = deixa claro que é só um rascunho, ainda não foi enviado */
}
.chat-audio-preview-label {
  font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600;
}

.chat-typing-hint { font-size: 11.5px; color: var(--text-muted); padding: 0 16px 8px; font-style: italic; }

/* ---------- Responsivo: painel ocupa a tela toda no mobile ---------- */
@media (max-width: 480px) {
  .chat-panel {
    bottom: 0; right: 0; left: 0; top: 0;
    width: 100%; height: 100%; max-height: 100%;
    border-radius: 0;
  }
  .chat-fab { bottom: 18px; right: 18px; }

  /* Mesmo ajuste feito na página dedicada de chat — o painel ocupa a
     tela toda por baixo do notch/barra de status aqui também, então
     precisa reservar esse espaço manualmente */
  .chat-panel-header { padding-top: calc(14px + var(--safe-top-forced, env(safe-area-inset-top))); }
  .chat-send-form { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (display-mode: standalone) and (max-width: 480px) {
  .chat-panel-header { padding-top: 56px !important; }
  .chat-send-form { padding-bottom: 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-panel { animation: none; }
}


/* ===== SOURCE: notifications-v46.css ===== */
/* =====================================================
   YOUKUT — Notificações (sino + painel dropdown)
===================================================== */

.notif-btn-wrap { position: relative; display: flex; align-items: center; }

.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px !important;
}
.nav-icon-btn svg { width: 19px; height: 19px; }
.nav-icon-btn .chat-badge {
  top: 2px;
  right: 2px;
}
.nav-unread-dot {
  position: absolute; top: 6px; right: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger); border: 2px solid var(--bg);
}

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: 90vw;
  max-height: 480px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 120;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chatPanelIn .16s ease;
}

.notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.notif-panel-header h3 {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0;
}
.notif-mark-all {
  background: none;
  border: none;
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 600;
  padding: 4px;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-mark-all:disabled { opacity: .4; cursor: default; text-decoration: none; }

.notif-list { flex: 1; overflow-y: auto; }
.notif-empty { padding: 30px 20px; font-size: 13.5px; }

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .12s ease;
  position: relative;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: rgba(255, 184, 77, 0.06); }
.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.notif-item .avatar { flex-shrink: 0; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-text { font-size: 13px; line-height: 1.4; }
.notif-item-text strong { font-weight: 700; }
.notif-item-preview {
  font-size: 12px; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-item-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.notif-item-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 480px) {
  .notif-panel {
    position: fixed;
    top: 60px;
    right: 8px;
    left: 8px;
    width: auto;
  }
}


/* ===== SOURCE: chat-page-v47.css ===== */
/* =====================================================
   YOUKUT — Página dedicada de Chat
   Desktop: sidebar de conversas à esquerda + thread centralizada à direita.
   Mobile: uma coluna por vez (lista OU thread, com botão de voltar).
===================================================== */

/* Alarga o container principal só quando a página de chat está ativa —
   o resto do app usa max-width:640px (feed centralizado), mas o chat
   de duas colunas precisa de mais espaço horizontal. Também zera o
   padding vertical grande do .main (pensado pra dar respiro/clearance
   do FAB de chat em outras páginas) — na página de chat ele só atrapalha
   o cálculo de altura e empurra a barra de mensagem pra fora da tela. */
.main.main-wide { max-width: 1100px; padding: 16px 0; }

.chat-page {
  display: flex;
  /* dvh = viewport "de verdade" no mobile, ignora a barra de endereço
     que aparece/some e bagunça o cálculo com vh puro */
  height: calc(100vh - 88px);
  height: calc(100dvh - 88px);
  min-height: 420px;
  max-height: 760px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* ---------- Sidebar (lista de conversas) ---------- */
.chat-page-sidebar {
  width: 340px; flex-shrink: 0;
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.chat-page-sidebar-header { padding: 18px 18px 12px; display: flex; align-items: center; gap: 10px; }
.chat-page-sidebar-header h2 { font-family: var(--font-display); font-size: 19px; margin: 0; }
.chat-page-exit-btn { display: none; }

.chat-page-search-wrap { position: relative; padding: 0 14px 12px; }
.chat-page-search-icon {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
#chat-page-search-input {
  width: 100%; padding: 9px 12px 9px 36px; border-radius: 999px;
  background: var(--surface-2); font-size: 13px;
}

.chat-page-list { flex: 1; overflow-y: auto; }
.chat-page-list-empty { padding: 30px 20px; font-size: 13px; text-align: center; }

.chat-page-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  cursor: pointer; transition: background .12s ease; border-left: 3px solid transparent;
  position: relative;
}
.chat-page-row:hover { background: var(--surface-2); }
.chat-page-row.active { background: var(--surface-2); border-left-color: var(--accent); }
.chat-page-row .avatar { flex-shrink: 0; }
.chat-page-row-info { flex: 1; min-width: 0; }
.chat-page-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.chat-page-row-name { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-page-row-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.chat-page-row-preview {
  font-size: 12.5px; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-page-row-preview.unread { color: var(--text); font-weight: 600; }
.chat-page-row-unread-dot {
  background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center;
  justify-content: center; padding: 0 4px; flex-shrink: 0; margin-left: 6px;
}

/* ---------- Área principal ---------- */
.chat-page-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }

.chat-page-placeholder {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px; color: var(--text-muted);
}
.chat-page-placeholder-mark { color: var(--accent); font-size: 34px; }
.chat-page-placeholder h3 { font-family: var(--font-display); color: var(--text); margin: 6px 0 6px; font-size: 19px; }
.chat-page-placeholder p { font-size: 13.5px; max-width: 280px; margin: 0; line-height: 1.5; }

.chat-page-thread { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.chat-page-thread-header {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0;
}
.chat-page-back-btn { display: none; }
.chat-page-thread-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.chat-page-thread-meta strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-page-thread-meta .muted { font-size: 12px; }

.chat-page-messages {
  flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px; display: flex; flex-direction: column; gap: 6px;
}

/* Reaproveita a maior parte do visual das bolhas de mensagem do widget
   flutuante (chat.css), só ajusta a largura pra área maior desta página */
.chat-page-messages .chat-msg-group { max-width: 60%; min-width: 0; }
.chat-page-messages .chat-msg-image,
.chat-page-messages .chat-msg-video { max-width: min(320px, 100%); max-height: 360px; width: auto; }

.chat-page-thread #chat-page-image-preview-wrap { margin: 0 18px 10px; max-width: 200px; }
.chat-page-thread #chat-page-image-preview-wrap.has-audio-preview { max-width: 300px; }
.chat-page-thread .chat-send-form { padding: 14px 18px; }

/* ---------- Responsivo: uma coluna por vez no mobile ---------- */
@media (max-width: 880px) {
  /* A página de chat vira um overlay de tela cheia, por cima de TUDO
     (inclusive do menu fixo do topo). Isso resolve de vez o conflito
     entre o cabeçalho fixo e o teclado virtual do celular — em vez de
     calcular "o espaço que sobra abaixo do menu", a página de chat
     simplesmente ocupa a tela inteira, sem ambiguidade nenhuma. */
  body.chat-page-active .topbar { display: none; }

  .main.main-wide { padding: 0; max-width: 100%; }

  .chat-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 150;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: none;
  }

  .chat-page-exit-btn { display: inline-flex; }
  .chat-page-sidebar { width: 100%; }
  .chat-page-main { display: none; }

  /* O overlay ocupa a tela toda por baixo do notch/barra de status —
     sem isso, o cabeçalho ficava espremido lá em cima e a matemática de
     altura (100dvh) contava um espaço que na prática estava tampado. */
  .chat-page-sidebar-header { padding-top: calc(12px + var(--safe-top-forced, env(safe-area-inset-top))); }
  .chat-page-thread-header { padding-top: calc(12px + var(--safe-top-forced, env(safe-area-inset-top))); }

  /* E reserva o espaço do indicador de "home" lá embaixo, senão a barra
     de enviar mensagem fica meio escondida atrás dele */
  .chat-page-thread .chat-send-form { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

  /* Quando uma conversa está aberta no mobile, esconde a lista e mostra
     só a thread em tela cheia, com botão de voltar visível */
  .chat-page.thread-open .chat-page-sidebar { display: none; }
  .chat-page.thread-open .chat-page-main { display: flex; }
  .chat-page-back-btn { display: inline-flex; }

  .chat-page-messages .chat-msg-group { max-width: 78%; min-width: 0; }
  .chat-page-messages { overflow-x: hidden; }
  .chat-page-thread { overflow-x: hidden; }
  .chat-send-form { max-width: 100%; }
}

/* Reforço garantido, valor fixo, sem depender de env() nem de JS —
   mesma lógica aplicada na topbar e no widget de chat */
@media (display-mode: standalone) and (max-width: 880px) {
  .chat-page-sidebar-header { padding-top: 54px !important; }
  .chat-page-thread-header { padding-top: 54px !important; }
  .chat-page-thread .chat-send-form { padding-bottom: 26px !important; }
}


/* ===== SOURCE: internal-modern-v1.css ===== */
/* ==============================================================
   YOUKUT — EXPERIÊNCIA INTERNA 2026 / RODADA 1
   Escopo: Feed, Descoberta, Conversas, Perfil e Grupos.
   A autenticação não é afetada por este arquivo.
============================================================== */

body.app-shell-active {
  --bg: #100f16;
  --surface: #191621;
  --surface-2: #211d2c;
  --surface-3: #292438;
  --border: #302a3e;
  --border-strong: #40374f;
  --text: #f5f2ec;
  --text-muted: #aaa3b5;
  --accent: #ffb62e;
  --accent-soft: rgba(255, 182, 46, .12);
  --accent-ink: #211500;
  --accent-2: #a8b7ff;
  --danger: #ff707f;
  --success: #72d187;
  --radius: 20px;
  --radius-sm: 13px;
  --shadow: 0 22px 70px rgba(0, 0, 0, .22);
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% -12%, rgba(255, 182, 46, .045), transparent 30rem),
    radial-gradient(circle at 92% 0%, rgba(142, 167, 255, .04), transparent 34rem),
    var(--bg);
}

body.app-shell-active .app {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
}

body.app-shell-active :where(button, input, textarea, select) {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Cabeçalho e navegação ---------- */
body.app-shell-active .topbar {
  min-height: 72px;
  gap: clamp(18px, 3vw, 36px);
  padding: 12px clamp(20px, 3vw, 42px);
  background: rgba(16, 15, 22, .82);
  border-bottom-color: rgba(255, 255, 255, .07);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

body.app-shell-active .topbar-brand {
  gap: 10px;
  min-width: 118px;
  font-family: 'Nunito', var(--font-display);
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.035em;
}

.app-logo-mark {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.app-shell-active .topbar-search {
  max-width: 390px;
}

body.app-shell-active .topbar-search input {
  min-height: 44px;
  padding-inline: 16px;
  border-color: transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  font-size: 14px;
}

body.app-shell-active .topbar-search input:hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--border);
}

body.app-shell-active .topbar-search input:focus {
  border-color: rgba(255, 182, 46, .55);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px rgba(255, 182, 46, .08);
}

body.app-shell-active .topbar-nav,
body.app-shell-active .topbar-nav-center {
  gap: 4px;
}

/* Alertas + Perfil, agrupados à direita do topbar (irmãos da
   .topbar-nav, não filhos — ver comentário no index.php) */
.topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
body.app-shell-active .topbar-actions { gap: 4px; }

body.app-shell-active .nav-link {
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}

body.app-shell-active .nav-icon-btn {
  width: 42px;
  padding: 0 !important;
}

body.app-shell-active .nav-icon-btn svg {
  width: 20px;
  height: 20px;
}

body.app-shell-active .nav-link:hover {
  border-color: rgba(255, 255, 255, .055);
  background: rgba(255, 255, 255, .045);
}

body.app-shell-active .nav-link.active {
  border-color: rgba(255, 182, 46, .16);
  background: var(--accent-soft);
  color: var(--accent);
}

body.app-shell-active .nav-profile-btn {
  min-height: 46px;
  padding: 4px 12px 4px 5px !important;
}

body.app-shell-active .nav-profile-btn .avatar {
  width: 36px;
  height: 36px;
  border-color: rgba(255, 255, 255, .14);
}

body.app-shell-active .search-results {
  top: calc(100% + 10px);
  padding: 6px;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
}

body.app-shell-active .search-result-item {
  min-height: 54px;
  border-radius: 11px;
}

/* ---------- Estrutura de página ---------- */
body.app-shell-active .main {
  width: 100%;
  max-width: 760px;
  padding: 34px 20px 110px;
}

body[data-app-view="discover"] .main { max-width: 1040px; }
body[data-app-view="groups"] .main { max-width: 860px; }
body[data-app-view="chat-page"] .main { max-width: 1220px; }
body[data-app-view="group-chat"] .main { max-width: 100%; }

/* O Feed abre espaço pras duas sidebars (online / bombando / grupos)
   a partir de 1180px. A largura foi calculada pra coluna central
   continuar com ~700px — praticamente a mesma dos 720px que os posts
   tinham antes das sidebars existirem, pra não encolher a leitura.
   Abaixo de 1180px o grid vira coluna única e o max-width padrão de
   760px do .main volta a valer sozinho.

   Duas regras de propósito: a primeira depende de data-app-view, que
   é setado por showView(). A segunda olha direto se a seção do feed
   está visível — rede de segurança pra caso o atributo não esteja
   presente (foi exatamente o que aconteceu no primeiro acesso, quando
   o feed aparecia sem passar por showView()). */
@media (min-width: 1180px) {
  body[data-app-view="feed"] .main,
  body:has(#view-feed:not(.hidden)) .main { max-width: 1280px; }
}

body.app-shell-active .view {
  animation: internalViewIn .28s cubic-bezier(.2, .7, .2, 1);
}

@keyframes internalViewIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.view-heading-copy h1,
.view-heading-copy h2 {
  margin: 0;
  font-family: 'Nunito', var(--font-display);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.view-heading-copy h1 { font-size: clamp(27px, 3vw, 34px); }
.view-heading-copy h2 { font-size: clamp(25px, 3vw, 32px); }

.view-heading-copy p {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

body.app-shell-active .btn-primary,
body.app-shell-active .btn-secondary {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 750;
}

body.app-shell-active .btn-primary {
  box-shadow: 0 10px 30px rgba(255, 182, 46, .10);
}

body.app-shell-active .btn-primary:hover {
  filter: brightness(1.035);
}

/* ---------- Feed ---------- */
.feed-view-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

body.app-shell-active .feed-tabs {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
}

body.app-shell-active .feed-tab {
  min-width: 92px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
}

body.app-shell-active .feed-tab.active {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

body.app-shell-active .verify-banner {
  margin-bottom: 20px;
  border-radius: 14px;
}

body.app-shell-active .composer {
  gap: 14px;
  margin-bottom: 18px;
  padding: 18px;
  border-color: rgba(255, 255, 255, .075);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .018), transparent 55%), var(--surface);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .10);
}

body.app-shell-active .composer-body textarea {
  min-height: 64px;
  padding: 5px 2px 10px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
}

body.app-shell-active .composer-body textarea::placeholder {
  color: #878091;
}

body.app-shell-active .composer-actions {
  justify-content: flex-start;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, .055);
}

body.app-shell-active .composer-actions .btn-icon {
  width: 40px;
  height: 40px;
  justify-content: center;
  border-radius: 11px;
}

body.app-shell-active .composer-actions .btn-primary {
  min-width: 96px;
  margin-left: auto;
}

body.app-shell-active .feed-list { gap: 16px; }

body.app-shell-active .post-card {
  padding: 18px;
  border-color: rgba(255, 255, 255, .075);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .08);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

@media (hover: hover) {
  body.app-shell-active .post-card:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .13);
  }
}

body.app-shell-active .post-header { gap: 11px; }
body.app-shell-active .post-header .avatar { width: 44px; height: 44px; }
body.app-shell-active .post-author { font-size: 14.5px; }
body.app-shell-active .post-time { margin-top: 2px; font-size: 11.5px; }

body.app-shell-active .post-content {
  margin: 15px 0;
  font-size: 14.5px;
  line-height: 1.65;
}

body.app-shell-active .post-image,
body.app-shell-active .post-video {
  max-height: 620px;
  margin: 15px 0 7px;
  border-radius: 15px;
}

body.app-shell-active .post-actions {
  gap: 4px;
  justify-content: space-around;
  margin-top: 11px;
  padding-top: 8px;
}

body.app-shell-active .post-action {
  min-height: 38px;
  min-width: 76px;
  justify-content: center;
  border-radius: 10px;
}

body.app-shell-active .post-action:hover { background: var(--surface-2); }

body.app-shell-active .post-comments {
  margin-top: 8px;
  padding-top: 13px;
}

body.app-shell-active .inline-comment-bubble {
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

body.app-shell-active .post-comment-form input {
  min-height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

/* ---------- Descoberta ---------- */
body.app-shell-active .discover-hero {
  max-width: 640px;
  margin: 0 0 22px;
  text-align: left;
}

body.app-shell-active .discover-hero h2 {
  margin: 0 0 7px;
  font-family: 'Nunito', var(--font-display);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 900;
  letter-spacing: -.04em;
}

body.app-shell-active .discover-hero p {
  max-width: 560px;
  font-size: 14px;
  line-height: 1.55;
}

body.app-shell-active .discover-nearby-bar {
  justify-content: flex-start;
  margin-bottom: 8px;
}

body.app-shell-active .discover-nearby-hint {
  max-width: 680px;
  margin: 0 0 22px;
  text-align: left;
}

body.app-shell-active .discover-filters {
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 10px;
  padding: 14px;
  border-color: rgba(255, 255, 255, .075);
  border-radius: 18px;
  background: var(--surface);
}

body.app-shell-active .discover-filters input {
  min-height: 44px;
  border-color: transparent;
  border-radius: 11px;
  background: rgba(255, 255, 255, .045);
  font-size: 13px;
}

body.app-shell-active .discover-filters #df-interest { grid-column: span 2; }

body.app-shell-active .discover-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.app-shell-active .discover-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-content: start;
  column-gap: 12px;
  padding: 16px;
  border-color: rgba(255, 255, 255, .075);
  border-radius: 18px;
  text-align: left;
  background: var(--surface);
}

body.app-shell-active .discover-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 182, 46, .30);
}

body.app-shell-active .discover-card .avatar {
  grid-row: 1 / span 3;
  width: 54px;
  height: 54px;
  margin: 0;
}

body.app-shell-active .discover-card-name {
  align-self: end;
  overflow: hidden;
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-shell-active .discover-card-username {
  overflow: hidden;
  margin: 2px 0 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.app-shell-active .discover-card-meta,
body.app-shell-active .discover-match-reason,
body.app-shell-active .discover-card-tags,
body.app-shell-active .discover-card .discover-follow-btn {
  grid-column: 1 / -1;
}

body.app-shell-active .discover-card-meta {
  justify-content: flex-start;
  min-height: 17px;
  margin: 12px 0 6px;
}

body.app-shell-active .discover-match-reason {
  margin: 2px 0 9px;
  color: #d9ac50;
  font-size: 11px;
}

body.app-shell-active .discover-card-tags {
  justify-content: flex-start;
  margin: 0 0 12px;
}

body.app-shell-active .discover-card .discover-follow-btn {
  width: 100%;
  margin-top: auto;
}

/* ---------- Perfil ---------- */
body.app-shell-active .profile-header {
  margin-bottom: 18px;
  border-color: rgba(255, 255, 255, .075);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 14px 45px rgba(0, 0, 0, .10);
}

body.app-shell-active .profile-cover {
  height: 190px;
  background:
    radial-gradient(circle at 82% 22%, rgba(255, 255, 255, .15), transparent 22%),
    radial-gradient(circle at 22% 110%, rgba(168, 183, 255, .34), transparent 38%),
    linear-gradient(135deg, #d99118, #f7b72e 48%, #7d623d);
}

body.app-shell-active .profile-info {
  align-items: flex-start;
  gap: 18px;
  padding: 0 22px 22px;
}

body.app-shell-active #profile-avatar {
  width: 118px;
  height: 118px;
  margin-top: -52px;
  border: 5px solid var(--surface);
}

body.app-shell-active .profile-meta { padding-top: 14px; }

body.app-shell-active .profile-meta h2 {
  margin: 0;
  font-family: 'Nunito', var(--font-display);
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -.035em;
}

body.app-shell-active #profile-username { margin-top: 1px; }

body.app-shell-active .profile-stats {
  gap: 8px;
  margin-top: 14px;
}

body.app-shell-active .profile-stats > span,
body.app-shell-active .profile-stat-btn {
  min-height: 35px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
}

body.app-shell-active .profile-actions {
  width: 100%;
  padding-top: 0;
}

body.app-shell-active .profile-actions button { min-height: 40px; }

/* ---------- Grupos ---------- */
body.app-shell-active #view-groups > .edit-profile-header {
  align-items: flex-end;
  margin-bottom: 22px;
}

body.app-shell-active #view-groups > .feed-tabs {
  display: inline-flex;
  margin-bottom: 12px;
}

body.app-shell-active .groups-search-input {
  min-height: 48px;
  margin: 0 0 14px;
  padding-inline: 16px;
  border-color: transparent;
  border-radius: 13px;
  background: var(--surface-2);
}

body.app-shell-active .groups-list { gap: 10px; }

body.app-shell-active .group-card {
  min-height: 88px;
  gap: 15px;
  padding: 15px 16px;
  border-color: rgba(255, 255, 255, .075);
  border-radius: 17px;
  background: var(--surface);
  transition: transform .17s ease, border-color .17s ease, background .17s ease;
}

body.app-shell-active .group-card:hover {
  transform: translateX(2px);
  border-color: rgba(255, 182, 46, .24);
  background: #1d1927;
}

body.app-shell-active .group-card .avatar-md {
  width: 52px;
  height: 52px;
}

body.app-shell-active .group-card-name { font-size: 14.5px; }

body.app-shell-active .group-card-member-tag {
  margin-left: 5px;
  padding: 3px 7px;
  background: var(--accent-soft);
  color: var(--accent);
}

body.app-shell-active .group-card-desc { margin-top: 5px; }

/* ---------- Conversas ---------- */
body.app-shell-active .main.main-wide { padding: 18px 20px 28px; }

body.app-shell-active .chat-page {
  height: calc(100vh - 108px);
  height: calc(100dvh - 108px);
  max-height: 820px;
  border-color: rgba(255, 255, 255, .075);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
}

body.app-shell-active .chat-page-sidebar {
  width: 360px;
  border-right-color: rgba(255, 255, 255, .065);
}

body.app-shell-active .chat-page-sidebar-header {
  padding: 22px 20px 14px;
}

body.app-shell-active .chat-page-sidebar-header h2 {
  font-family: 'Nunito', var(--font-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.03em;
}

body.app-shell-active .chat-page-search-wrap { padding: 0 14px 12px; }

body.app-shell-active #chat-page-search-input {
  min-height: 44px;
  border-color: transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
}

body.app-shell-active .chat-page-row {
  min-height: 72px;
  margin: 0 8px 2px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 13px;
}

body.app-shell-active .chat-page-row.active {
  border-color: rgba(255, 182, 46, .15);
  background: var(--accent-soft);
}

body.app-shell-active .chat-page-main {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 182, 46, .025), transparent 24rem),
    #121018;
}

body.app-shell-active .chat-page-placeholder-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--accent-soft);
  font-size: 0;
}

body.app-shell-active .chat-page-placeholder-mark::before {
  content: '';
  width: 22px;
  height: 18px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: -5px 8px 0 -6px var(--accent);
}

body.app-shell-active .chat-page-placeholder h3 {
  margin-top: 14px;
  font-family: 'Nunito', var(--font-display);
  font-size: 22px;
  font-weight: 900;
}

body.app-shell-active .chat-page-thread-header {
  min-height: 72px;
  padding: 12px 18px;
}

body.app-shell-active .chat-page-messages { padding: 24px 28px; }

body.app-shell-active .chat-page-thread .chat-send-form {
  gap: 6px;
  padding: 12px 16px;
  background: var(--surface);
}

/* ---------- Elementos flutuantes ---------- */
body.app-shell-active .chat-fab {
  right: 24px;
  bottom: 24px;
  width: 68px;
  height: 68px;
  box-shadow: 0 14px 40px rgba(255, 182, 46, .26);
}
body.app-shell-active .chat-fab svg { width: 29px; height: 29px; }

body.app-shell-active .lang-suggestion-banner {
  border-color: rgba(255, 255, 255, .09);
  border-radius: 16px;
  background: rgba(33, 29, 44, .96);
  backdrop-filter: blur(18px);
}

/* ---------- Tablet ---------- */
@media (max-width: 940px) {
  body.app-shell-active .topbar { gap: 14px; padding-inline: 18px; }
  body.app-shell-active .topbar-search { max-width: 290px; }
  body.app-shell-active .nav-link { padding-inline: 10px; }
  body.app-shell-active .nav-profile-btn span { display: none; }

  body.app-shell-active .discover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.app-shell-active .discover-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.app-shell-active .discover-filters #df-interest { grid-column: span 1; }

  .feed-view-header { align-items: flex-start; flex-direction: column; gap: 16px; }
}

/* ---------- Mobile: navegação inferior e telas de uma mão ---------- */
@media (max-width: 680px) {
  body.app-shell-active { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  body.app-shell-active .topbar {
    min-height: 58px;
    padding: 8px 14px;
    padding-top: calc(8px + var(--safe-top-forced, env(safe-area-inset-top)));
    /* SEM backdrop-filter aqui de propósito. backdrop-filter (assim
       como transform e filter) transforma o elemento em containing
       block pra qualquer descendente com position:fixed — e a barra
       de navegação inferior é justamente um filho fixed do topbar.
       Com o blur ligado, o "bottom" dela passava a ser relativo ao
       topbar, e não à tela: a barra aparecia colada no topo,
       invadindo a área do sistema e espremida na largura do topbar.
       A barra inferior tem blur próprio, então nada se perde. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(16, 15, 22, .97);
  }

  body.app-shell-active .topbar-brand {
    display: inline-flex;
    min-width: 0;
    margin: 0 auto 0 0;
    font-size: 18px;
  }

  body.app-shell-active .app-logo-mark { width: 25px; height: 25px; }
  body.app-shell-active .topbar-search { display: none; }

  body.app-shell-active .topbar-nav {
    position: fixed;
    z-index: 130;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    /* 5 colunas: Início, Descobrir, Conversas, Match, Grupos.
       Alertas e Perfil vivem no topbar (fora desta nav, ver
       index.php). 5 é o teto recomendado pra barra inferior — cada
       item fica com ~75px numa tela de iPhone, ainda confortável
       porque não há rótulo de texto, só ícone. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    height: auto;
    margin: 0;
    /* A área segura do iPhone (barrinha do gesto) entra como padding
       interno, não margem: o fundo vai até a borda real da tela e os
       ícones ficam acima do indicador. */
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-radius: 0;
    /* Fundo opaco, sem backdrop-filter, de propósito: blur criaria um
       containing block e prenderia qualquer descendente com
       position:fixed dentro da barra. */
    background: #17151f;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
  }

  body.app-shell-active .topbar-nav-center { display: contents; }

  body.app-shell-active .topbar-nav .nav-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 3px 1px !important;
    border: 0;
    border-radius: 14px;
    font-size: 0;
  }

  /* Só ícone no rodapé — sem rótulo de texto. Os ícones são
     autoexplicativos e cada item ganha área de toque bem maior. O
     title= de cada botão continua servindo pra leitores de tela. */
  body.app-shell-active .topbar-nav .nav-link::after { content: none; }
  body.app-shell-active .topbar-nav .nav-icon-btn svg { width: 24px; height: 24px; }

  /* Badges e pontos de não-lido da barra inferior.
     As regras originais posicionam por `right`, o que ancora o
     indicador na BORDA do elemento clicável. No topbar isso funciona
     (o botão tem ~40px, quase do tamanho do ícone), mas aqui cada
     item ocupa uma coluna do grid de ~85px com um ícone de 24px
     centralizado — pelo `right` a badge ficava lá na quina, solta,
     longe do ícone.
     Ancorando pelo CENTRO (left:50%) o indicador acompanha o ícone
     independentemente da largura da coluna, que muda com o tamanho
     da tela. */
  body.app-shell-active .topbar-nav .nav-link .chat-badge {
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(1px, -23px);
    min-width: 18px;
    height: 18px;
    font-size: 10.5px;
    padding: 0 4px;
  }
  body.app-shell-active .topbar-nav .nav-link .nav-unread-dot {
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(6px, -16px);
  }

  /* Alertas + Perfil ficam no topo, à direita. Sem position:fixed:
     eles são filhos do topbar no HTML, então o fluxo normal já os
     coloca no lugar — e assim nenhum blur de ancestral consegue
     desalinhá-los, que foi o bug das rodadas anteriores. */
  body.app-shell-active .topbar-actions { margin-left: auto; gap: 2px; }

  body.app-shell-active .nav-profile-btn span { display: none; }
  body.app-shell-active .topbar-actions .nav-link {
    min-height: 40px;
    padding: 6px !important;
    border-radius: 12px;
  }

  /* Botão flutuante de chat some no mobile: "Conversas" já está no
     rodapé levando ao mesmo lugar, e o flutuante ainda cobria
     conteúdo do feed. No desktop ele continua, já que lá não existe
     barra inferior. */
  body.app-shell-active .chat-fab { display: none; }

  body.app-shell-active .topbar-nav .nav-link[data-route="feed"]::before {
    content: '';
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.2 12 4l9 7.2v8.3a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19.5v-8.3Zm6 9.3v-6.2h6v6.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.2 12 4l9 7.2v8.3a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19.5v-8.3Zm6 9.3v-6.2h6v6.2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  body.app-shell-active .notif-btn-wrap {
    display: flex;
    min-width: 0;
  }

  body.app-shell-active .nav-profile-btn .avatar {
    width: 28px;
    height: 28px;
    border-width: 1px;
  }

  body.app-shell-active .nav-profile-btn > span { display: none; }

  body.app-shell-active .nav-link.active {
    background: var(--accent-soft);
    color: var(--accent);
  }

  /* O painel de notificações desce a partir do sino, que agora fica no
     topbar. Antes ele era ancorado pela BASE da tela (top:auto;
     bottom:82px) — fazia sentido quando o sino vivia na barra
     inferior flutuante, mas com ele no topo o painel aparecia solto no
     meio da tela, longe do botão que o abriu.
     Também corrige duas heranças da regra base que atrapalhavam aqui:
     o `max-width: 90vw` brigava com left/right (o navegador honra o
     left e o max-width e ignora o right, deixando o painel deslocado
     pra esquerda com uma faixa de conteúdo aparecendo à direita), e o
     `max-height: 480px` fixo não sabia da barra inferior nova. */
  body.app-shell-active .notif-panel {
    position: fixed;
    top: calc(58px + var(--safe-top-forced, env(safe-area-inset-top)));
    bottom: auto;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 58px - var(--safe-top-forced, env(safe-area-inset-top)) - 92px - env(safe-area-inset-bottom));
    border-radius: 18px;
  }
  /* dvh acompanha a barra do navegador aparecendo/sumindo no scroll —
     em vh o painel ficaria alto demais quando ela reaparece */
  @supports (height: 100dvh) {
    body.app-shell-active .notif-panel {
      max-height: calc(100dvh - 58px - var(--safe-top-forced, env(safe-area-inset-top)) - 92px - env(safe-area-inset-bottom));
    }
  }

  body.app-shell-active .main,
  body.app-shell-active .main.main-wide {
    max-width: 100%;
    padding: 22px 12px calc(98px + env(safe-area-inset-bottom));
  }

  .view-heading-copy h1 { font-size: 27px; }
  .view-heading-copy h2 { font-size: 25px; }
  .view-heading-copy p { font-size: 13px; }

  .feed-view-header { gap: 14px; margin-bottom: 16px; }

  body.app-shell-active .feed-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  body.app-shell-active .feed-tab {
    min-width: 0;
    min-height: 38px;
    padding-inline: 6px;
  }

  body.app-shell-active .composer {
    gap: 10px;
    padding: 14px;
    border-radius: 17px;
  }

  body.app-shell-active .composer > .avatar {
    width: 40px;
    height: 40px;
  }

  body.app-shell-active .composer-body textarea { min-height: 58px; }

  body.app-shell-active .post-card {
    padding: 14px;
    border-radius: 17px;
  }

  body.app-shell-active .post-header .avatar { width: 40px; height: 40px; }
  body.app-shell-active .post-content { margin-block: 13px; }
  body.app-shell-active .post-image,
  body.app-shell-active .post-video { border-radius: 12px; }
  body.app-shell-active .post-action { min-width: 0; flex: 1; }

  body.app-shell-active .discover-hero { margin-bottom: 18px; }
  body.app-shell-active .discover-hero h2 { font-size: 30px; }
  body.app-shell-active .discover-nearby-bar .btn-primary,
  body.app-shell-active .discover-nearby-bar .btn-secondary { width: 100%; }
  body.app-shell-active .discover-nearby-hint { margin-bottom: 16px; }

  body.app-shell-active .discover-filters,
  body.app-shell-active .discover-grid {
    grid-template-columns: 1fr;
  }

  body.app-shell-active .discover-filters #df-interest { grid-column: auto; }
  body.app-shell-active .discover-card { min-height: 0; }

  body.app-shell-active .profile-header { border-radius: 18px; }
  body.app-shell-active .profile-cover { height: 128px; }
  body.app-shell-active .profile-info {
    gap: 10px;
    padding: 0 16px 17px;
  }

  body.app-shell-active #profile-avatar {
    width: 92px;
    height: 92px;
    margin-top: -43px;
    border-width: 4px;
  }

  body.app-shell-active .profile-meta {
    width: 100%;
    padding-top: 0;
  }

  body.app-shell-active .profile-meta h2 { font-size: 23px; }
  body.app-shell-active .profile-stats { flex-wrap: wrap; gap: 6px; }
  body.app-shell-active .profile-stats > span,
  body.app-shell-active .profile-stat-btn { padding: 6px 8px; }
  body.app-shell-active .profile-actions { gap: 6px; }
  body.app-shell-active .profile-actions button { flex: 1 1 auto; }

  body.app-shell-active #view-groups > .edit-profile-header {
    align-items: flex-start;
    gap: 14px;
  }

  body.app-shell-active #btn-create-group {
    flex: 0 0 auto;
    min-height: 42px;
  }

  body.app-shell-active .group-card {
    min-height: 82px;
    gap: 11px;
    padding: 13px;
  }

  body.app-shell-active .group-card .avatar-md { width: 46px; height: 46px; }
  body.app-shell-active .group-card-desc { max-width: 100%; }

  body.app-shell-active .chat-page {
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  body.app-shell-active .chat-page-sidebar-header h2 { font-size: 23px; }
  body.app-shell-active .chat-page-row {
    min-height: 74px;
    margin-inline: 7px;
  }

  body.app-shell-active .chat-page-messages { padding: 18px 12px; }

  body.app-shell-active .chat-fab {
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: 62px;
    height: 62px;
  }
  body.app-shell-active .chat-fab svg { width: 27px; height: 27px; }

  body.app-shell-active .lang-suggestion-banner {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 370px) {
  body.app-shell-active .main { padding-inline: 9px; }
  body.app-shell-active .post-card,
  body.app-shell-active .composer { padding: 12px; }
  body.app-shell-active #view-groups > .edit-profile-header { flex-direction: column; }
  body.app-shell-active #btn-create-group { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell-active .view,
  body.app-shell-active .post-card,
  body.app-shell-active .group-card,
  body.app-shell-active .discover-card { animation: none !important; transition: none !important; }
}


/* ===== SOURCE: premium-v2.css ===== */
/* ==============================================================
   YOUKUT PREMIUM — tela de conversão
   Isolado num arquivo próprio (mesma lógica do internal-modern):
   fácil de versionar e revisar sem mexer no resto do app.
============================================================== */

.premium-view {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 4px 60px;
}

/* ---------- Hero ---------- */
.premium-hero {
  text-align: center;
  padding: 48px 20px 40px;
}
.premium-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft, rgba(255, 182, 46, .12)); color: var(--accent);
  border: 1px solid rgba(255, 182, 46, .3); border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 700;
  margin-bottom: 18px;
}
.premium-hero h1 {
  font-family: 'Nunito', var(--font-display); font-weight: 900;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -.02em;
  margin: 0 0 14px;
}
.premium-hero p {
  color: var(--text-muted); font-size: 16px; line-height: 1.5;
  max-width: 480px; margin: 0 auto 22px;
}
.premium-social-proof {
  display: inline-block; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 18px; font-size: 13.5px; color: var(--text);
  margin-bottom: 22px;
}
.premium-cta-btn {
  min-height: 50px; padding: 0 32px; border-radius: 14px; font-size: 15.5px; font-weight: 700;
}
.premium-cta-btn:disabled { opacity: .75; cursor: default; }

/* ---------- Aviso de sandbox ---------- */
.premium-sandbox-banner {
  background: rgba(255, 182, 46, .12); border: 1px solid rgba(255, 182, 46, .35);
  color: var(--accent); border-radius: var(--radius-sm);
  padding: 10px 16px; font-size: 12.5px; font-weight: 700; text-align: center;
  margin-bottom: 8px;
}

/* ---------- Cards de benefício ---------- */
.premium-benefits {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 8px 0 44px;
}
.premium-benefit-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 20px; text-align: left; position: relative;
}
.premium-benefit-card h3 { font-family: var(--font-display); font-size: 15.5px; margin: 4px 0 6px; }
.premium-benefit-card p { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 0; }

/* Card de recurso ainda não lançado — visual propositalmente mais
   discreto, pra não competir com o que já funciona hoje */
.premium-benefit-soon { opacity: .72; }
.premium-soon-tag {
  position: absolute; top: 14px; right: 14px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
}

/* Miniaturas ilustrativas — a mesma ideia visual do teaser real
   (última linha borrada com cadeado), só que em miniatura, pra dar um
   gostinho visual de como o recurso funciona antes de qualquer clique */
.premium-benefit-preview {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 14px; margin-bottom: 16px; min-height: 92px;
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
  position: relative; overflow: hidden;
}
.premium-preview-row { display: flex; align-items: center; gap: 8px; }
.premium-preview-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: var(--border-strong, var(--border));
  flex-shrink: 0;
}
.premium-preview-line { height: 8px; border-radius: 4px; background: var(--border-strong, var(--border)); flex: 1; max-width: 120px; }
.premium-preview-line.short { max-width: 80px; }
.premium-preview-avatar.blur, .premium-preview-line.blur { filter: blur(2.5px); opacity: .6; }
.premium-preview-locked { position: relative; }
.premium-preview-lock { position: absolute; right: 8px; font-size: 13px; }
.premium-preview-heart {
  position: absolute; top: 10px; right: 12px; color: var(--danger);
  font-size: 16px; opacity: .85;
}
.premium-preview-name-row {
  display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--text);
}

/* Miniaturas dos benefícios novos */
.premium-preview-groups, .premium-preview-stories, .premium-preview-albums {
  align-items: center; justify-content: center;
}
.premium-preview-groups-icon { color: var(--accent); opacity: .85; }
.premium-preview-story-ring {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--accent); position: relative;
}
.premium-preview-story-ring::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--border);
}
.premium-preview-story-tag {
  font-size: 10.5px; font-weight: 800; color: var(--accent);
  background: var(--accent-soft, rgba(255,182,46,.14)); padding: 3px 8px; border-radius: 6px;
}
.premium-preview-album-lock { font-size: 26px; opacity: .5; }
.premium-preview-highlight .premium-preview-line,
.premium-preview-highlight .premium-preview-avatar { background: var(--accent); opacity: .9; }
.premium-preview-up { color: var(--accent); font-size: 9px; margin-left: auto; }
.premium-preview-avatar.dim, .premium-preview-line.dim { opacity: .38; }
.premium-price-period { font-size: 15px; color: var(--text-muted); font-weight: 700; margin-left: 2px; }

/* Selo — reaproveitado aqui e em qualquer lugar do app que mostre
   autor (post, perfil, futuramente comentários) */
.premium-badge {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); margin-left: 4px; vertical-align: -1px;
}

/* ---------- Preço ---------- */
.premium-price-block { display: flex; justify-content: center; margin-bottom: 48px; }
.premium-price-card {
  background: var(--surface); border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius); padding: 36px 40px; text-align: center;
  max-width: 340px; width: 100%; box-shadow: var(--shadow);
}
.premium-price-card-active { border-color: var(--accent); background: var(--accent-soft, rgba(255,182,46,.08)); }
.premium-price-tag {
  display: inline-block; font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}
.premium-price-value { font-family: 'Nunito', var(--font-display); font-weight: 900; color: var(--text); margin-bottom: 10px; }
.premium-price-currency { font-size: 20px; vertical-align: top; position: relative; top: 8px; margin-right: 2px; }
.premium-price-value #premium-price-amount { font-size: 46px; }
.premium-price-desc { color: var(--text-muted); font-size: 13px; margin: 0 0 22px; }
.premium-status-note {
  margin-top: 14px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5;
}

/* ---------- FAQ ---------- */
.premium-faq { max-width: 560px; margin: 0 auto; }
.premium-faq h2 {
  font-family: var(--font-display); font-size: 19px; text-align: center; margin: 0 0 20px;
}
.premium-faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 18px; margin-bottom: 10px;
}
.premium-faq-item summary {
  cursor: pointer; font-weight: 600; font-size: 14px; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
}
.premium-faq-item summary::-webkit-details-marker { display: none; }
.premium-faq-item summary::after { content: '+'; font-size: 18px; color: var(--text-muted); flex-shrink: 0; margin-left: 12px; }
.premium-faq-item[open] summary::after { content: '−'; }
.premium-faq-item p { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; margin: 12px 0 2px; }

@media (max-width: 760px) {
  .premium-benefits { grid-template-columns: 1fr; }
  .premium-hero { padding: 32px 12px 28px; }
  .premium-price-card { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-faq-item { transition: none; }
}


/* ===== SOURCE: feed-sidebars-v3.css ===== */
/* ==============================================================
   YOUKUT — Sidebars do Feed (desktop apenas)
   Esquerda: online agora. Direita: bombando essa semana + grupos
   ativos. Some completamente abaixo de 1180px — em telas menores,
   o feed já ocupa a largura disponível sozinho, e widgets extras
   ali só atrapalhariam (mobile continua com a barra de navegação
   inferior cuidando da navegação principal).
============================================================== */

.feed-layout {
  display: block;
}
.feed-sidebar { display: none; }
.feed-widget {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; margin-bottom: 16px;
}
.feed-widget-title {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em;
  margin: 0 0 14px;
}
.feed-widget-empty { color: var(--text-muted); font-size: 12.5px; margin: 0; }

/* ---------- Online agora ---------- */
.feed-online-list { display: flex; flex-direction: column; gap: 12px; }
.feed-online-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 4px; margin: -4px; border-radius: 10px; transition: background .12s ease;
}
.feed-online-row:hover { background: var(--surface-2); }
.feed-online-row .avatar-wrap { position: relative; flex-shrink: 0; }
.feed-online-row .avatar { width: 34px; height: 34px; }
.feed-online-row .online-dot { width: 10px; height: 10px; border-width: 2px; }
.feed-online-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Bombando essa semana ---------- */
.feed-top-posts-list { display: flex; flex-direction: column; gap: 12px; }
.feed-top-post-row {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 4px; margin: -4px; border-radius: 10px; transition: background .12s ease;
}
.feed-top-post-row:hover { background: var(--surface-2); }
.feed-top-post-rank {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-muted); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.feed-top-post-row:nth-child(1) .feed-top-post-rank { background: var(--accent); color: var(--accent-ink); }
.feed-top-post-body { min-width: 0; }
.feed-top-post-author { font-size: 12px; font-weight: 700; color: var(--text); }
.feed-top-post-snippet {
  font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 2px 0 4px;
}
.feed-top-post-likes { font-size: 11px; color: var(--danger); font-weight: 600; }

/* ---------- Grupos ativos ---------- */
.feed-active-groups-list { display: flex; flex-direction: column; gap: 12px; }
.feed-active-group-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 4px; margin: -4px; border-radius: 10px; transition: background .12s ease;
}
.feed-active-group-row:hover { background: var(--surface-2); }
.feed-active-group-row .avatar { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; }
.feed-active-group-body { min-width: 0; }
.feed-active-group-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 6px; min-width: 0;
}
/* O nome trunca, mas a tag "Membro" nunca encolhe — ela é o sinal
   mais útil da linha (diz de cara se é um grupo novo pra descobrir
   ou um que a pessoa já participa) */
.feed-active-group-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-group-tag {
  flex-shrink: 0; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 5px;
  background: var(--accent-soft, rgba(255, 182, 46, .14)); color: var(--accent);
}
.feed-active-group-meta { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 1180px) {
  .feed-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
  .feed-sidebar { display: block; position: sticky; top: 88px; }
  .feed-main { min-width: 0; }
}

/* ==============================================================
   FAIXA "ONLINE AGORA" — mobile/tablet
   Contrapartida da coluna lateral: abaixo de 1180px as sidebars
   somem, e é essa faixa horizontal que ocupa o lugar. Em qualquer
   largura só um dos dois aparece.
============================================================== */
.feed-online-strip { margin: 0 0 16px; }
.feed-online-strip-title {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 10px;
}
.feed-online-strip-list {
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.feed-online-strip-list::-webkit-scrollbar { display: none; }

.feed-online-strip-item {
  flex: 0 0 auto; width: 62px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  scroll-snap-align: start;
}
.feed-online-strip-item .avatar-wrap { position: relative; }
.feed-online-strip-item .avatar { width: 56px; height: 56px; }
/* O anel de story herda .avatar.has-story (mesmo gradiente usado no
   resto do app) — aqui ele é apenas indicativo: o toque abre o perfil */
.feed-online-strip-item .online-dot {
  width: 13px; height: 13px; border-width: 2.5px;
  right: 2px; bottom: 2px;
}
.feed-online-strip-name {
  font-size: 11.5px; color: var(--text-muted); font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feed-online-strip-item:active .avatar { transform: scale(.95); }

/* No desktop quem manda é a coluna lateral */
@media (min-width: 1180px) {
  .feed-online-strip { display: none !important; }
}

/* ==============================================================
   FEED MOBILE — enxugando o topo
   Antes destas regras, o primeiro post começava a ~683pt numa tela
   de 812pt: 84% da tela era cabeçalho. Aqui o cabeçalho decorativo
   sai, as abas viram um seletor compacto e o banner cabe em 1 linha.
============================================================== */
@media (max-width: 1179px) {
  /* O título "Feed" é redundante no mobile: a logo está no topo e o
     ícone de início já fica aceso na barra inferior */
  #view-feed .feed-view-header .view-heading-copy { display: none; }
  #view-feed .feed-view-header { margin-bottom: 0; }
  /* As abas dão lugar ao seletor compacto (abaixo) */
  #view-feed .feed-tabs { display: none; }

  /* Banner de confirmação em uma linha só */
  .verify-banner {
    padding: 8px 12px;
    font-size: 12.5px;
    gap: 8px;
    margin-bottom: 14px;
  }
  .verify-banner > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .verify-banner button { padding: 5px 11px; font-size: 11.5px; }
}

/* Seletor de filtro — só no mobile; no desktop as abas continuam */
.feed-filter-mobile { display: none; }
@media (max-width: 1179px) {
  .feed-filter-mobile { display: flex; margin: 0 0 12px; }
}
.feed-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
}
.feed-filter-chip select {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0 16px 0 0; margin: 0;
  color: var(--text); font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  /* seta desenhada em background pra não depender do estilo nativo,
     que muda muito entre iOS, Android e desktop */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23a9a2bb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 13px;
}
.feed-filter-chip select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }


/* ===== SOURCE: discover-mosaic-v4.css ===== */
/* ==============================================================
   DESCOBERTA — mosaico no mobile
   No desktop os cards continuam como estão (lá o espaço não é
   problema e as infos extras ajudam a decidir). No mobile a lista
   ficava longa demais: cada card ocupava ~1/3 da tela.
   Aqui vira uma grade de azulejos quadrados com a foto preenchendo
   o quadro e os textos sobrepostos.
============================================================== */

/* Fora do mobile o wrapper não deve existir pro layout: display
   contents faz os filhos participarem direto do grid do card, que é
   como o desktop já estava montado. Sem isso, o wrapper viraria uma
   célula e quebraria o alinhamento existente. */
.discover-card-body { display: contents; }

.discover-online-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--success); margin-left: 6px; vertical-align: middle;
}

@media (max-width: 640px) {
  body.app-shell-active .discover-grid,
  .discover-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.app-shell-active .discover-card,
  .discover-card {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    background: var(--surface-2);
  }

  /* Foto preenche o azulejo inteiro */
  body.app-shell-active .discover-card .avatar,
  .discover-card .avatar {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    margin: 0; border: 0; border-radius: 0;
    object-fit: cover;
  }

  /* Avatar gerado (sem foto real) não é esticado: fica centralizado
     em tamanho menor sobre o fundo do card */
  body.app-shell-active .discover-card-generated .avatar,
  .discover-card-generated .avatar {
    inset: auto; top: 50%; left: 50%;
    /* Menor e deslocado pra cima: antes o texto passava por cima do
       avatar e poluía o azulejo */
    width: 45%; height: 45%;
    transform: translate(-50%, -72%);
    border-radius: 50%;
  }

  /* Overlay de textos, sobre um degradê que garante contraste em
     qualquer foto — sem ele o nome some em fotos claras */
  .discover-card-body {
    display: block;
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 26px 10px 10px;
    background: linear-gradient(to top, rgba(0,0,0,.88) 25%, rgba(0,0,0,.55) 60%, transparent 100%);
    text-align: left;
    pointer-events: none;
  }
  .discover-card-body .discover-card-name {
    font-size: 13px; font-weight: 700; color: #fff; margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
  }
  .discover-card-body .discover-card-username {
    font-size: 11px; color: rgba(255,255,255,.72); margin: 1px 0 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Troca o texto completo pela versão curta (data-short) sem
     duplicar nada no DOM: o desktop segue com a frase inteira, que
     lá cabe e lê melhor. font-size:0 esconde o texto original e o
     ::after traz o curto. */
  body.app-shell-active .discover-card-body .discover-match-reason,
  .discover-card-body .discover-match-reason {
    font-size: 0;
    margin: 0 0 3px; padding: 0; background: none; border: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .discover-card-body .discover-match-reason::after {
    content: attr(data-short);
    display: block;
    font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
    color: var(--accent);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Idade, cidade e interesses saem do azulejo — continuam no perfil,
     a um toque de distância */
  .discover-card .discover-card-meta,
  .discover-card .discover-card-tags { display: none; }

  /* Seguir vira um botão redondo no canto: "+" pra seguir, "✓" pra
     quem já é seguido. Reaproveita as classes que o JS já alterna,
     então não precisou mudar a lógica do botão. */
  /* O seletor precisa incluir body.app-shell-active porque o
     internal-modern-v1.css define
       body.app-shell-active .discover-card .discover-follow-btn
       { width: 100%; grid-column: 1 / -1; }
     com especificidade (0,3,0). Sem igualar isso, o botão continuava
     esticado pela largura toda do azulejo, independente da ordem em
     que os arquivos são carregados. */
  body.app-shell-active .discover-card .discover-follow-btn,
  .discover-card .discover-follow-btn {
    position: absolute; top: 8px; right: 8px;
    /* min-height: 42px vem de body.app-shell-active .btn-primary —
       com largura 30px isso virava uma elipse. aspect-ratio garante o
       círculo mesmo que alguma regra futura mexa em altura. */
    width: 32px; height: 32px;
    min-width: 0; min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 0;
    margin: 0;
    line-height: 1;
    flex: 0 0 auto;
    grid-column: auto;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0; /* esconde o texto, mantendo-o pra leitores de tela via aria-label */
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    z-index: 2;
  }
  body.app-shell-active .discover-card .discover-follow-btn::after,
  .discover-card .discover-follow-btn::after {
    font-size: 16px; font-weight: 700; line-height: 1;
  }
  body.app-shell-active .discover-card .discover-follow-btn.btn-primary::after,
  .discover-card .discover-follow-btn.btn-primary::after { content: '+'; }
  body.app-shell-active .discover-card .discover-follow-btn.btn-secondary::after,
  .discover-card .discover-follow-btn.btn-secondary::after { content: '✓'; font-size: 13px; }

  body.app-shell-active .discover-card:hover,
  .discover-card:hover { transform: none; border-color: var(--border); }
  .discover-card:active { transform: scale(.97); }
}


/* ===== SOURCE: profile-v9.css ===== */
/* ==============================================================
   PERFIL · ÁLBUNS · CONFIGURAÇÕES
   Arquivo único de propósito: antes esses estilos estavam
   espalhados entre style, internal-modern, albums-match e profile —
   e um arquivo faltando no deploy destruía a tela inteira, porque
   metade das regras vinha de outro lugar.
============================================================== */

/* ==========================================================
   1. CABEÇALHO DO PERFIL
========================================================== */
body.app-shell-active .profile-header {
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 14px 45px rgba(0, 0, 0, .18);
}

body.app-shell-active .profile-cover { height: 168px; }

body.app-shell-active .profile-info {
  display: grid;
  /* Avatar na coluna fixa, informações fluidas, ações à direita —
     antes tudo era flex com `width:100%` nas ações, o que jogava os
     botões pra uma linha solta embaixo */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 20px;
  padding: 0 26px 24px;
}

body.app-shell-active #profile-avatar {
  width: 124px; height: 124px;
  margin-top: -46px;
  border: 5px solid var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}

body.app-shell-active .profile-meta { padding-top: 16px; min-width: 0; }

body.app-shell-active .profile-meta h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-family: 'Nunito', var(--font-display);
  font-size: 26px; font-weight: 900; letter-spacing: -.03em;
  line-height: 1.15;
}
body.app-shell-active #profile-username {
  margin: 2px 0 0; font-size: 14px; color: var(--text-muted);
}
body.app-shell-active #profile-bio {
  margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; max-width: 62ch;
}

/* Detalhes (idade, cidade) e interesses fazem parte da apresentação,
   então ficam junto da bio — não numa aba separada */
body.app-shell-active .profile-details {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 12px; font-size: 13px; color: var(--text-muted);
}
body.app-shell-active .profile-interests {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px;
}

/* Números primeiro, rótulo depois — mais legível que caixinhas */
body.app-shell-active .profile-stats {
  display: flex; align-items: center; gap: 24px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
body.app-shell-active .profile-stats > span,
body.app-shell-active .profile-stat-btn {
  display: flex; align-items: baseline; gap: 6px;
  min-height: 0; padding: 0; border: 0; background: none;
  font-size: 13.5px; color: var(--text-muted);
}
body.app-shell-active .profile-stats strong {
  font-size: 17px; font-weight: 800; color: var(--text);
}
body.app-shell-active .profile-stat-btn:not(.disabled) { cursor: pointer; }
body.app-shell-active .profile-stat-btn:not(.disabled):hover strong { color: var(--accent); }
body.app-shell-active .profile-stat-btn.disabled { cursor: default; }

/* ---------- Ações ---------- */
body.app-shell-active .profile-actions {
  display: flex; align-items: center; gap: 8px;
  width: auto; padding-top: 16px; flex-wrap: nowrap;
}
body.app-shell-active .profile-actions .btn-primary,
body.app-shell-active .profile-actions .btn-secondary {
  min-width: 0; padding: 0 20px; white-space: nowrap;
}

.profile-more-wrap { position: relative; flex-shrink: 0; }
.profile-more-btn {
  width: 42px; height: 42px; min-height: 0; padding: 0;
  border-radius: 50%; font-size: 19px; line-height: 1;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
}
.profile-more-btn:hover { color: var(--text); border-color: var(--accent-2); }

.profile-more-menu, .nav-profile-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column;
  animation: profileMenuIn .14s ease;
}
@keyframes profileMenuIn { from { opacity: 0; transform: translateY(-6px); } }
.profile-more-menu button, .nav-profile-menu button {
  text-align: left; background: none; border: 0; cursor: pointer;
  padding: 11px 13px; border-radius: 10px; font-size: 13.5px;
  color: var(--text); font-family: inherit; min-height: 0;
}
.profile-more-menu button:hover, .nav-profile-menu button:hover { background: var(--surface-2); }
.nav-profile-menu hr { border: 0; border-top: 1px solid var(--border); margin: 5px 8px; }
.nav-profile-menu-danger { color: var(--danger) !important; }

/* ---------- Menu do avatar no topo ---------- */
.nav-profile-wrap { position: relative; }
.nav-profile-btn { position: relative; overflow: visible; }
.nav-profile-alert {
  position: absolute; top: -3px; right: -3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); border: 2.5px solid var(--bg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}

/* ---------- Card de visitas ---------- */
.profile-insight-card {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin: 0; padding: 15px 26px;
  background: rgba(255, 255, 255, .022);
  border: 0; border-top: 1px solid rgba(255, 255, 255, .06);
  cursor: pointer; text-align: left; color: var(--text);
  transition: background .15s ease;
}
.profile-insight-card:hover { background: rgba(255, 255, 255, .05); }
.profile-insight-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--accent-soft, rgba(255, 182, 46, .12)); color: var(--accent);
}
.profile-insight-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.profile-insight-text strong { font-size: 14px; font-weight: 700; }
.profile-insight-text small { font-size: 12px; color: var(--text-muted); }
.profile-insight-arrow { color: var(--text-muted); font-size: 22px; flex-shrink: 0; }

/* ==========================================================
   2. ABAS
========================================================== */
.profile-tabs {
  display: flex; gap: 2px; margin: 0 0 20px;
  border-bottom: 1px solid var(--border);
}
.profile-tab {
  position: relative; background: none; border: 0; cursor: pointer;
  padding: 12px 20px; font-size: 14.5px; font-weight: 700;
  color: var(--text-muted); font-family: inherit; min-height: 0;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color .15s ease;
}
.profile-tab:hover { color: var(--text); }
.profile-tab::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px;
  height: 2.5px; background: transparent; border-radius: 3px 3px 0 0;
  transition: background .18s ease;
}
.profile-tab.active { color: var(--text); }
.profile-tab.active::after { background: var(--accent); }
.profile-tab-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.profile-panel { animation: fadeIn .18s ease; }

/* ==========================================================
   3. ÁLBUNS
========================================================== */
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 16px;
}

.album-card {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; min-height: 0;
  transition: border-color .15s ease, transform .15s ease;
}
.album-card:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.album-card:active { transform: translateY(0); }

/* Capa: primeira foto do álbum, ou o ícone sobre um fundo suave */
.album-card-cover {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 10; width: 100%;
  background: linear-gradient(135deg, rgba(255,182,46,.14), rgba(138,47,196,.14));
  overflow: hidden;
}
.album-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-card-cover-icon { color: var(--accent); opacity: .9; }
.album-card-cover-icon svg { width: 38px; height: 38px; }
.album-card-badge {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 0, 0, .6); color: #fff;
}
.album-card-badge svg { width: 15px; height: 15px; }

.album-card-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; min-width: 0; }
.album-card-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.album-card-count { font-size: 12px; color: var(--text-muted); }
.album-card-locked .album-card-cover { background: var(--surface-2); }
.album-card-locked .album-card-cover-icon { color: var(--text-muted); opacity: .7; }

/* Criar álbum é o primeiro card da grade, com contorno tracejado —
   comunica "espaço vazio a preencher" sem gastar uma linha própria */
.album-card-new {
  align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 16 / 10; min-height: 100%;
  border-style: dashed; border-color: rgba(255, 255, 255, .16);
  background: transparent; color: var(--text-muted);
}
.album-card-new:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,182,46,.05); }
.album-card-new-icon { font-size: 30px; line-height: 1; font-weight: 300; }
.album-card-new-label { font-size: 12.5px; font-weight: 700; text-align: center; padding: 0 10px; }
.album-card-new-premium { border-color: rgba(255, 182, 46, .35); color: var(--accent); }

.album-empty { color: var(--text-muted); font-size: 13.5px; padding: 8px 0; }

/* ==========================================================
   4. RESPONSIVO
========================================================== */
@media (max-width: 760px) {
  body.app-shell-active .profile-info {
    grid-template-columns: 1fr;
    gap: 0; padding: 0 18px 20px;
  }
  body.app-shell-active #profile-avatar { width: 96px; height: 96px; margin-top: -38px; border-width: 4px; }
  body.app-shell-active .profile-meta { padding-top: 12px; }
  body.app-shell-active .profile-meta h2 { font-size: 22px; }
  body.app-shell-active .profile-stats { gap: 18px; margin-top: 14px; padding-top: 14px; }

  body.app-shell-active .profile-actions { width: 100%; padding-top: 16px; }
  body.app-shell-active .profile-actions .btn-primary,
  body.app-shell-active .profile-actions .btn-secondary { flex: 1; }

  .profile-insight-card { padding: 13px 18px; }
  .profile-tab { flex: 1; justify-content: center; padding: 12px 8px; font-size: 13.5px; }
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .album-card-body { padding: 10px 12px 12px; }
}

/* ==========================================================
   5. TELA DEDICADA DO ÁLBUM
   Era um modal apertado com tudo empilhado. Virou tela própria:
   galeria em grade, acessos numa seção separada e ações no menu.
========================================================== */
.album-view { max-width: 900px; margin: 0 auto; }

.album-head {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.album-head-text { flex: 1; min-width: 0; }
.album-head-text h1 {
  margin: 0; font-family: 'Nunito', var(--font-display);
  font-size: 25px; font-weight: 900; letter-spacing: -.03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.album-head-text p { margin: 2px 0 0; font-size: 13.5px; }
.album-menu-btn {
  width: 40px; height: 40px; min-height: 0; padding: 0; flex-shrink: 0;
  border-radius: 50%; font-size: 19px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
}
.album-head .profile-more-menu { top: calc(100% + 6px); }

/* ---------- Galeria ---------- */
.album-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 32px;
}
.album-gallery-item {
  position: relative; aspect-ratio: 1; border-radius: 12px;
  overflow: hidden; background: var(--surface-2); cursor: zoom-in;
}
.album-gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s ease;
}
.album-gallery-item:hover img { transform: scale(1.05); }
.album-gallery-delete {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; min-height: 0; padding: 0; border: 0;
  border-radius: 50%; background: rgba(0,0,0,.65); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .15s ease;
}
.album-gallery-item:hover .album-gallery-delete { opacity: 1; }
/* No toque não existe hover, então o botão fica sempre visível */
@media (hover: none) { .album-gallery-delete { opacity: 1; } }

/* ---------- Sem acesso ---------- */
.album-locked {
  text-align: center; padding: 56px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
}
.album-locked-icon { display: block; color: var(--text-muted); margin-bottom: 14px; }
.album-locked-icon svg { width: 52px; height: 52px; margin: 0 auto; }
.album-locked h2 { font-family: var(--font-display); font-size: 19px; margin: 0 0 6px; }
.album-locked p { margin: 0 0 20px; font-size: 13.5px; }

/* ---------- Acessos ---------- */
.album-access-block {
  padding-top: 24px; border-top: 1px solid var(--border);
}
.album-access-block h3 { font-family: var(--font-display); font-size: 16px; margin: 0 0 14px; }
.album-privacy-note {
  font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
  background: var(--surface-2); border-left: 3px solid var(--accent);
  padding: 12px 14px; border-radius: 10px; margin: 0 0 22px;
}
.album-access-list { display: flex; flex-direction: column; gap: 8px; }
.album-access-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
}
/* Pedido pendente é o que exige ação: fica destacado e vem primeiro */
.album-access-row-pending { border-color: rgba(255,182,46,.4); background: rgba(255,182,46,.06); }
.album-access-info { flex: 1; min-width: 0; }
.album-access-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-access-status { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.album-access-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ==========================================================
   6. VISUALIZADOR DE FOTO
========================================================== */
.album-lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 12, .95);
  animation: fadeIn .16s ease;
}
#album-lightbox-img {
  max-width: 92vw; max-height: 84vh;
  object-fit: contain; border-radius: 6px;
  cursor: zoom-in; transition: transform .25s ease;
}
/* O zoom amplia a partir do centro e libera a rolagem pra explorar */
#album-lightbox-img.album-lightbox-zoomed {
  transform: scale(2); cursor: zoom-out; border-radius: 0;
}
.album-lightbox-close {
  position: absolute; top: 18px; right: 20px;
  width: 42px; height: 42px; min-height: 0; padding: 0; border: 0;
  border-radius: 50%; background: rgba(255,255,255,.1); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; z-index: 2;
}
.album-lightbox-close:hover { background: rgba(255,255,255,.2); }
.album-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; min-height: 0; padding: 0; border: 0;
  border-radius: 50%; background: rgba(255,255,255,.1); color: #fff;
  font-size: 30px; line-height: 1; cursor: pointer; z-index: 2;
}
.album-lightbox-nav:hover { background: rgba(255,255,255,.2); }
.album-lightbox-prev { left: 18px; }
.album-lightbox-next { right: 18px; }
.album-lightbox-bar {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 13px;
}
.album-lightbox-zoom {
  background: none; border: 0; color: var(--accent);
  font-weight: 700; font-size: 13px; cursor: pointer; min-height: 0; padding: 0;
}

@media (max-width: 760px) {
  .album-gallery { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .album-head-text h1 { font-size: 20px; }
  .album-lightbox-nav { width: 40px; height: 40px; font-size: 24px; }
  .album-lightbox-prev { left: 8px; }
  .album-lightbox-next { right: 8px; }
  #album-lightbox-img { max-width: 100vw; max-height: 76vh; }
}

/* ==========================================================
   7. ÍCONE DO MATCH — dois corações
   O desenho anterior usava um arco parcial com opacidade reduzida
   pro coração de trás: em 24px isso não lia como coração, lia como
   um risco solto.
   Agora são dois corações COMPLETOS deslocados na diagonal. O da
   frente é PREENCHIDO com a cor atual e o de trás fica só
   contornado — assim o da frente cobre naturalmente as linhas que
   passam por baixo, sem depender de saber qual é a cor do fundo
   (que muda entre a barra inferior, o topbar e o item ativo).
========================================================== */
.icon-match .icon-match-front { fill: currentColor; }
.icon-match .icon-match-back { fill: none; }


/* ==============================================================
   8. MATCH  (movido do albums-match-v6.css)

   Consolidado aqui de propósito. O arquivo separado já derrubou a
   tela três vezes: quando ele falta no servidor, o Match e os
   álbuns aparecem sem estilo nenhum e parece que o app quebrou.
   Menos arquivos = menos chance de deploy parcial.
============================================================== */
/* ==============================================================
   ÁLBUNS SECRETOS + MATCH
============================================================== */

/* ---------- Álbuns no perfil ---------- */
.profile-albums { margin-bottom: 20px; }
.profile-albums-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.profile-albums-head h3 { font-family: var(--font-display); font-size: 16px; margin: 0; }
.profile-albums-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.album-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .15s ease;
}
.album-card:hover { border-color: var(--accent-2); }
.album-card-locked { opacity: .82; }
/* O ícone herda a cor do card: âmbar quando acessível (é o destaque
   da identidade), apagado quando bloqueado — sem precisar de duas
   versões do desenho */
.album-card-icon { display: block; color: var(--accent); margin-bottom: 2px; }
.album-card-locked .album-card-icon { color: var(--text-muted); }
.album-card-icon svg { display: block; }
.album-card-title {
  font-weight: 700; font-size: 14px; color: var(--text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.album-card-count { font-size: 11.5px; color: var(--text-muted); }
.profile-albums-empty { font-size: 13px; }

/* ---------- Modal do álbum ---------- */
.album-modal-content { max-width: 560px; }
.album-modal-desc { font-size: 13px; margin: -4px 0 14px; }
.album-photos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px;
}
.album-photo { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.album-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-photo-delete {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
}
.album-upload-btn { display: block; text-align: center; cursor: pointer; }

/* Aviso de print: precisa ser visível, não uma nota de rodapé. Quem
   sobe conteúdo íntimo tem que saber o limite real da proteção. */
.album-privacy-note {
  font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
  background: var(--surface-2); border-left: 3px solid var(--accent);
  padding: 10px 12px; border-radius: 8px; margin: 12px 0 18px;
}

.album-owner-tools h4 { font-size: 13.5px; margin: 0 0 10px; font-family: var(--font-display); }
.album-access-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.album-access-row { display: flex; align-items: center; gap: 10px; }
.album-access-info { flex: 1; min-width: 0; }
.album-access-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-access-status { font-size: 11px; color: var(--text-muted); }
.album-access-actions { display: flex; gap: 6px; flex-shrink: 0; }
.album-delete-btn { margin-top: 6px; }

/* ---------- Match ---------- */
.match-view { max-width: 620px; margin: 0 auto; }
.match-heading { text-align: center; margin-bottom: 20px; }

.match-gate {
  text-align: center; padding: 40px 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.match-gate-icon { font-size: 40px; display: block; margin-bottom: 12px; }
.match-gate h2 { font-family: var(--font-display); font-size: 20px; margin: 0 0 8px; }
.match-gate p { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin: 0 auto 20px; max-width: 380px; }

.match-card-area { margin-bottom: 18px; }
.match-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  overflow: hidden;
}
.match-card-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--surface-2); }
.match-card-info { padding: 16px 18px 20px; }
.match-card-info h2 { font-family: var(--font-display); font-size: 21px; margin: 0; }
.match-card-age { font-weight: 400; color: var(--text-muted); }
.match-card-username { font-size: 13px; color: var(--text-muted); margin: 2px 0 8px; }
.match-card-local { font-size: 12.5px; color: var(--text-muted); margin: 0 0 8px; }
.match-card-bio { font-size: 13.5px; line-height: 1.5; margin: 0 0 10px; }
.match-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.match-card-report {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.55); font-size: 15px; cursor: pointer;
}

.match-actions { display: flex; justify-content: center; gap: 24px; margin-bottom: 28px; }
.match-btn {
  width: 62px; height: 62px; min-height: 0; aspect-ratio: 1 / 1;
  border-radius: 50%; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .12s ease, filter .12s ease;
}
.match-btn:active { transform: scale(.93); }
.match-btn-pass { background: var(--surface-2); color: var(--text-muted); }
.match-btn-like { background: var(--danger); color: #fff; border-color: transparent; }
.match-btn-like:hover { filter: brightness(1.08); }

.match-list-block { margin-top: 8px; }
.match-list-block h3 { font-family: var(--font-display); font-size: 15.5px; margin: 0 0 12px; }
.match-list { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.match-list::-webkit-scrollbar { display: none; }
.match-list-row {
  flex: 0 0 auto; width: 66px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.match-list-row .avatar-wrap { position: relative; }
.match-list-name {
  font-size: 11.5px; color: var(--text-muted); font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.match-disable { margin-top: 26px; }
.discover-match-entry { margin-top: 14px; }

@media (max-width: 640px) {
  .album-photos { grid-template-columns: repeat(2, 1fr); }
  .match-card-photo { aspect-ratio: 1 / 1; }
  .match-btn { width: 58px; height: 58px; }
}

/* ==============================================================
   MATCH — motion
============================================================== */
.match-card { transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .28s ease; }
.match-card-out-right { transform: translateX(115%) rotate(14deg); opacity: 0; }
.match-card-out-left  { transform: translateX(-115%) rotate(-14deg); opacity: 0; }

/* A carta nova entra suavemente, pra a troca não parecer um corte seco */
.match-card-area .match-card { animation: matchCardIn .26s ease; }
@keyframes matchCardIn {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.match-btn-like:active { animation: matchLikePulse .34s ease; }
@keyframes matchLikePulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,90,110,.55); }
  60%  { transform: scale(1.14); box-shadow: 0 0 0 16px rgba(255,90,110,0); }
  100% { transform: scale(1); }
}

/* ---------- Celebração ---------- */
.match-celebration {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(10, 8, 16, .88);
  backdrop-filter: blur(6px);
  animation: matchCelebIn .22s ease;
}
@keyframes matchCelebIn { from { opacity: 0; } to { opacity: 1; } }
.match-celebration-inner { text-align: center; max-width: 340px; width: 100%; }
.match-celebration-inner h2 {
  font-family: var(--font-display); font-size: 30px; margin: 18px 0 6px; color: var(--accent);
  animation: matchTitlePop .45s cubic-bezier(.34,1.56,.64,1) .1s backwards;
}
@keyframes matchTitlePop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.match-celebration-inner p { color: var(--text); font-size: 14.5px; margin: 0 0 24px; }
.match-celebration-inner .btn-primary { width: 100%; margin-bottom: 10px; }
.match-celebration-inner .btn-secondary { width: 100%; }

.match-celebration-avatars {
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.match-celebration-avatars .avatar {
  width: 92px; height: 92px; border-width: 3px; border-color: var(--accent);
}
/* Os dois avatares deslizam um em direção ao outro — a animação
   conta a história do encontro em vez de só aparecer pronta */
.match-celebration-avatars .avatar:first-of-type {
  margin-right: -14px; animation: matchAvatarLeft .5s cubic-bezier(.34,1.4,.64,1) backwards;
}
.match-celebration-avatars .avatar:last-of-type {
  margin-left: -14px; animation: matchAvatarRight .5s cubic-bezier(.34,1.4,.64,1) backwards;
}
@keyframes matchAvatarLeft  { from { opacity: 0; transform: translateX(-60px) rotate(-12deg); } }
@keyframes matchAvatarRight { from { opacity: 0; transform: translateX(60px) rotate(12deg); } }
.match-celebration-heart {
  font-size: 30px; z-index: 1; position: relative;
  animation: matchHeartPop .4s cubic-bezier(.34,1.56,.64,1) .35s backwards;
}
@keyframes matchHeartPop { from { opacity: 0; transform: scale(0); } }

@media (prefers-reduced-motion: reduce) {
  .match-card, .match-card-area .match-card,
  .match-celebration, .match-celebration-inner h2,
  .match-celebration-avatars .avatar, .match-celebration-heart { animation: none; transition: none; }
  .match-btn-like:active { animation: none; }
}

/* ==============================================================
   MATCH — mobile: tudo numa tela só, sem rolagem
   A tela vira uma coluna de altura fixa; a carta ocupa o espaço que
   sobra. Assim os botões de ação ficam sempre no mesmo lugar, sem
   depender de rolar.
============================================================== */
@media (max-width: 1179px) {
  /* O cabeçalho decorativo sai — a barra inferior já indica onde
     estamos, igual fizemos no Feed */
  .match-view .match-heading { display: none; }

  /* A altura é definida no .main, não no .match-view. O .main tem
     padding próprio (22px em cima, 98px embaixo); calcular a altura
     no filho ignorava isso e a soma estourava a tela em ~44px — era o
     que escondia a tira de matches atrás da barra inferior.
     Com o .main virando coluna flex de altura conhecida, o
     .match-view só ocupa o que sobra e o número mágico fica num
     lugar só. */
  body[data-app-view="match"] .main {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 58px - var(--safe-top-forced, env(safe-area-inset-top)));
    overflow: hidden;
  }
  @supports (height: 100dvh) {
    body[data-app-view="match"] .main {
      height: calc(100dvh - 58px - var(--safe-top-forced, env(safe-area-inset-top)));
    }
  }

  .match-view {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
    overflow: hidden;
  }

  .match-deck { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .match-card-area { flex: 1; min-height: 0; margin-bottom: 12px; }
  .match-card { height: 100%; display: flex; flex-direction: column; }
  /* A foto cede espaço primeiro; os textos têm altura própria */
  .match-card-photo { flex: 1; min-height: 0; aspect-ratio: auto; }
  .match-card-info { padding: 12px 14px 14px; flex-shrink: 0; }
  .match-card-info h2 { font-size: 18px; }
  .match-card-bio {
    font-size: 12.5px; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .match-card-local { font-size: 11.5px; margin-bottom: 5px; }
  .match-card-tags { display: none; }

  .match-actions { margin-bottom: 10px; gap: 20px; flex-shrink: 0; }
  .match-btn { width: 54px; height: 54px; }

  /* Lista de matches vira uma tira compacta no rodapé da tela */
  .match-list-block { flex-shrink: 0; margin-top: 0; }
  .match-list-block h3 { font-size: 12px; margin: 0 0 6px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
  .match-list-row { width: 52px; }
  .match-list-row .avatar { width: 42px; height: 42px; }
  .match-list-name { font-size: 10.5px; }

  /* Desativar sai da tela principal pra não roubar altura — fica
     acessível pelo gate quando o Match é reaberto */
  .match-disable { display: none; }
  .match-gate { margin-top: 8px; }
}

/* ==============================================================
   MATCH — gesto de arrastar
============================================================== */
.match-card {
  cursor: grab;
  touch-action: pan-y; /* deixa a página rolar na vertical; o horizontal é nosso */
  user-select: none; -webkit-user-select: none;
}
.match-card:active { cursor: grabbing; }
/* Enquanto arrasta, a transição sai do caminho pra a carta acompanhar
   o dedo/mouse em tempo real. Ao soltar, ela volta e faz a "mola". */
.match-card-dragging { transition: none; }
.match-card-photo { pointer-events: none; } /* evita o arrasto nativo da imagem */

.match-drag-hint {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  padding: 8px 20px; border-radius: 999px;
  font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity .1s linear;
  border: 2px solid currentColor;
}
.match-drag-hint-like { color: var(--danger); background: rgba(0,0,0,.35); }
.match-drag-hint-pass { color: var(--text-muted); background: rgba(0,0,0,.35); }

/* ==============================================================
   MATCH — desktop: caber na tela sem rolagem
   O card usava proporção 4:5; numa coluna de 620px isso dava ~775px
   de altura só de foto, estourando a janela. Aqui a tela vira uma
   coluna de altura limitada e a foto ocupa o que sobra.
============================================================== */
@media (min-width: 1180px) {
  .match-view {
    display: flex; flex-direction: column;
    height: calc(100vh - 150px); /* topbar + respiro do .main */
    max-height: 780px;
    min-height: 0;
  }
  @supports (height: 100dvh) {
    .match-view { height: calc(100dvh - 150px); }
  }

  .match-heading { flex-shrink: 0; margin-bottom: 14px; }
  .match-heading h1 { font-size: 26px; }
  .match-heading p { font-size: 13.5px; }

  .match-deck { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .match-card-area { flex: 1; min-height: 0; margin-bottom: 14px; }
  .match-card { height: 100%; display: flex; flex-direction: column; }
  .match-card-photo { flex: 1; min-height: 0; aspect-ratio: auto; }
  .match-card-info { flex-shrink: 0; padding: 14px 18px 16px; }
  .match-card-info h2 { font-size: 19px; }
  .match-card-bio {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 8px;
  }

  .match-actions { flex-shrink: 0; margin-bottom: 16px; }
  .match-list-block { flex-shrink: 0; margin-top: 0; }
  .match-list-block h3 { margin-bottom: 8px; }
  .match-list-row { width: 58px; }
  .match-list-row .avatar { width: 46px; height: 46px; }
  .match-disable { flex-shrink: 0; margin-top: 14px; }
}


/* ---------- Match novo, ainda sem conversa ---------- */
.match-list-row-new .avatar {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 182, 46, .28);
}
.match-list-row-new .match-list-name { color: var(--accent); font-weight: 700; }

/* ---------- Selo de Match na lista de conversas ---------- */
.match-badge {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--danger); margin-left: 5px; vertical-align: -1px;
}

/* Mesmo ícone do card, em tamanho maior, ao abrir um álbum bloqueado */
.album-locked-icon { color: var(--text-muted); display: block; }
.album-locked-icon svg { width: 44px; height: 44px; margin: 0 auto; }

/* Botão de novo álbum pra quem ainda não é Premium: cor de destaque
   sinaliza que leva à assinatura, não a um formulário */
.album-new-premium {
  color: var(--accent);
  border-color: rgba(255, 182, 46, .35);
  background: var(--accent-soft, rgba(255, 182, 46, .1));
}
.premium-preview-albums { color: var(--accent); }
.premium-preview-albums svg { width: 40px; height: 40px; }

/* ==============================================================
   11. COMPOSER EM MODAL + FEED MINIMALISTA
============================================================== */

/* ---------- Gatilho no lugar do composer ---------- */
.composer-trigger {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; text-align: left;
  color: var(--text-muted); font-size: 14.5px; min-height: 0;
  transition: border-color .15s ease;
}
.composer-trigger:hover { border-color: var(--accent-2); }
.composer-trigger .avatar { width: 36px; height: 36px; flex-shrink: 0; }
.composer-trigger-text { flex: 1; min-width: 0; }
.composer-trigger-icon { color: var(--accent); flex-shrink: 0; display: flex; }

/* ---------- Modal ---------- */
.composer-modal {
  position: fixed; inset: 0; z-index: 320;
  display: flex; flex-direction: column;
  background: var(--bg);
  animation: fadeIn .16s ease;
  /* dvh acompanha a barra do navegador e o teclado; sem isso o rodapé
     do modal fica escondido atrás do teclado no celular */
  height: 100dvh; max-height: 100dvh;
}
.composer-modal-head {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding: 12px 16px;
  /* Dois caminhos pra área segura, não um:
     --safe-top-forced é medido pelo JS e pode vir 0 se a medição
     falhar; env() funciona sozinho quando o viewport-fit=cover está
     ativo. O max() usa o maior dos dois, então basta UM funcionar.
     Confiar só na variável foi o que deixou o cabeçalho por baixo da
     barra de status do iPhone. */
  padding-top: calc(12px + max(var(--safe-top-forced, 0px), env(safe-area-inset-top)));
  border-bottom: 1px solid var(--border);
}
.composer-modal-head h2 {
  flex: 1; margin: 0; font-family: var(--font-display);
  font-size: 17px; font-weight: 800;
}
.composer-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 16px; }
.composer-modal-row { display: flex; gap: 12px; }
.composer-modal-row .avatar { flex-shrink: 0; }
#composer-text {
  flex: 1; min-height: 160px; resize: none;
  background: none; border: 0; padding: 6px 0;
  font-size: 17px; line-height: 1.5;
}
#composer-text:focus { border: 0; box-shadow: none; outline: none; }

.composer-modal-foot {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}

/* O textarea cresce até o espaço disponível em vez de ficar preso em
   160px deixando um vazio enorme abaixo */
/* Coluna: a linha de texto e a prévia da mídia ficam empilhadas.
   Sem flex-direction elas iriam lado a lado. */
.composer-modal-body { display: flex; flex-direction: column; }
.composer-modal-row { flex: 1; align-items: stretch; min-height: 0; }
#composer-text { min-height: 120px; }
.composer-counter { margin-left: auto; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.composer-counter-warn { color: var(--danger); font-weight: 700; }

@media (min-width: 900px) {
  /* Tela cheia num monitor grande pra escrever um post é
     desproporcional — vira janela centrada */
  .composer-modal {
    inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(560px, 92vw); max-height: 80vh;
    border: 1px solid var(--border); border-radius: 20px;
    box-shadow: 0 30px 90px rgba(0,0,0,.55);
  }
  .composer-modal::before {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background: rgba(8,6,12,.7);
  }
  .composer-modal-head { padding-top: 14px; }
}

/* ==============================================================
   12. GRADE DE POSTS — menos moldura, mais conteúdo
   Cada post era um retângulo com fundo, borda e sombra. Separadores
   finos sobre fundo plano removem uma moldura por post — é o que
   mais limpa sem tirar conteúdo nenhum.
============================================================== */
body.app-shell-active .post-card {
  background: transparent;
  border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; box-shadow: none;
  padding: 18px 4px 14px; margin-bottom: 0;
}
body.app-shell-active .post-card:hover { transform: none; box-shadow: none; }

body.app-shell-active .post-card-header { align-items: center; gap: 10px; }
body.app-shell-active .post-author-avatar { width: 40px; height: 40px; }
body.app-shell-active .post-author { font-size: 14.5px; }
body.app-shell-active .post-time { font-size: 12.5px; }
body.app-shell-active .post-actions { gap: 6px; padding-top: 10px; }
body.app-shell-active .post-actions button { padding: 6px 10px; }

/* Denunciar é ação rara e negativa — não precisa estar visível em
   todo post o tempo todo */
body.app-shell-active .post-report-btn {
  opacity: 0; margin-left: auto; transition: opacity .15s ease;
}
body.app-shell-active .post-card:hover .post-report-btn,
body.app-shell-active .post-report-btn:focus-visible { opacity: .7; }
@media (hover: none) {
  /* Sem ponteiro não existe hover: discreto, mas alcançável */
  body.app-shell-active .post-report-btn { opacity: .4; }
}

body.app-shell-active .post-image,
body.app-shell-active .post-video {
  border-radius: 14px; max-height: 560px; object-fit: cover; width: 100%;
}

/* ---------- Comentários ---------- */
.post-see-all-comments {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 8px 0 2px; min-height: 0;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  font-family: inherit;
}
.post-see-all-comments:hover { color: var(--accent); }


/* ===== SOURCE: experience-v91.css ===== */
/* Youkut v91 — Experience & Engagement */
:root{--v91-surface:#fff;--v91-soft:#f7f7fa;--v91-line:rgba(30,35,50,.1);--v91-text:#1c2030;--v91-muted:#73798b;--v91-radius:18px;--v91-radius-sm:12px;--v91-shadow:0 10px 35px rgba(30,35,50,.08);--profile-accent:#6d5dfc}
.v91-page{max-width:920px;margin:0 auto;padding-bottom:56px}.v91-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:0 0 24px}.v91-page-head h1{margin:5px 0 6px;font-size:clamp(28px,4vw,42px);letter-spacing:-.035em}.v91-page-head p{margin:0;color:var(--v91-muted);max-width:640px;line-height:1.55}.v91-section{margin-top:34px}.v91-section>h2{font-size:19px;margin:0 0 14px}.v91-loading{padding:30px;text-align:center;color:var(--v91-muted)}
.v91-kind-filter{display:flex;gap:7px;margin:0 0 14px;overflow:auto;scrollbar-width:none}.v91-kind-filter::-webkit-scrollbar{display:none}.v91-kind-filter button,.v91-mode-tabs button,.v91-room-chip{border:1px solid var(--v91-line);background:var(--v91-surface);border-radius:999px;padding:8px 13px;font:inherit;font-size:13px;white-space:nowrap;cursor:pointer;color:var(--v91-muted);transition:.18s ease}.v91-kind-filter button.active,.v91-mode-tabs button.active,.v91-room-chip.active{background:#222634;color:#fff;border-color:#222634}.v91-mode-tabs{display:flex;gap:8px;margin:10px 0 24px;flex-wrap:wrap}
.v91-post-context{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;padding:0 18px 12px;color:var(--v91-muted);font-size:12px}.v91-save-post.saved{color:var(--profile-accent,#6d5dfc)}.post-action.v91-save-post span,.post-action.v91-share-post span{font-size:12px}.v91-shared-post-card{display:flex;flex-direction:column;gap:5px;width:min(320px,100%);padding:12px;margin:4px 0 7px;border:1px solid var(--v91-line);background:rgba(255,255,255,.72);border-radius:14px;text-align:left;cursor:pointer;overflow:hidden}.mine .v91-shared-post-card{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.25)}.v91-shared-post-card span{font-size:11px;opacity:.7}.v91-shared-post-card strong{font-size:13px;line-height:1.35}.v91-shared-post-card img{width:100%;max-height:150px;object-fit:cover;border-radius:10px;margin-top:4px}
.v91-radar-basis{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:13px 15px;border:1px solid var(--v91-line);border-radius:15px;background:var(--v91-soft);font-size:12px;color:var(--v91-muted)}.v91-radar-basis b{font-weight:600;color:var(--v91-text);background:#fff;border:1px solid var(--v91-line);padding:5px 8px;border-radius:999px}.v91-radar-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.v91-radar-person{display:flex;align-items:center;gap:10px;border:1px solid var(--v91-line);background:var(--v91-surface);border-radius:var(--v91-radius);padding:13px;box-shadow:0 5px 20px rgba(30,35,50,.035)}.v91-radar-person-main{border:0;background:none;padding:0;display:flex;align-items:center;gap:11px;text-align:left;min-width:0;flex:1;cursor:pointer}.v91-radar-copy{display:flex;flex-direction:column;min-width:0}.v91-radar-copy strong{font-size:14px}.v91-radar-copy small{color:var(--v91-muted);font-size:11px}.v91-radar-copy>span{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}.v91-radar-copy em{font-style:normal;font-size:10px;padding:4px 6px;border-radius:999px;background:var(--v91-soft);color:var(--v91-muted)}.v91-radar-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.v91-radar-group{border:1px solid var(--v91-line);background:#fff;border-radius:16px;padding:12px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}.v91-radar-group img{width:44px;height:44px;border-radius:13px;object-fit:cover}.v91-radar-group span{display:flex;flex-direction:column;min-width:0;flex:1}.v91-radar-group strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v91-radar-group small,.v91-radar-group em{font-size:10px;color:var(--v91-muted);font-style:normal}.v91-radar-group>b{font-size:22px;font-weight:400;color:#a0a4b0}
.v91-memories-list{display:grid;gap:10px}.v91-memory-card{display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:14px;border:1px solid var(--v91-line);border-radius:18px;background:#fff;padding:10px;text-align:left;cursor:pointer}.v91-memory-card img,.v91-memory-mark{width:88px;height:72px;border-radius:13px;object-fit:cover;background:linear-gradient(135deg,#f0edff,#fff0f6);display:grid;place-items:center;font-size:26px}.v91-memory-card>span:not(.v91-memory-mark){display:flex;flex-direction:column;min-width:0}.v91-memory-card small{color:var(--v91-muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em}.v91-memory-card strong{font-size:14px;margin:2px 0}.v91-memory-card em{font-style:normal;color:var(--v91-muted);font-size:12px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v91-memory-card>b{font-size:22px;font-weight:400;color:#b2b5bf}.v91-memory-card.compact{grid-template-columns:52px 1fr auto;padding:7px;border-radius:13px}.v91-memory-card.compact img,.v91-memory-card.compact .v91-memory-mark{width:52px;height:48px;border-radius:9px}.v91-memory-card.compact em{display:none}
.v91-status-chip{border:0;background:var(--v91-soft);border-radius:999px;padding:7px 10px;font-size:12px;color:var(--v91-text);margin:4px 0 7px;cursor:pointer}.v91-profile-music{margin:0 0 7px;font-size:12px;color:var(--v91-muted)}#view-profile[data-profile-theme="soft"] .profile-header{background:linear-gradient(145deg,#fff,var(--profile-accent,#6d5dfc)10%,#fff 55%)}#view-profile[data-profile-theme="contrast"] .profile-header{border:1px solid var(--profile-accent,#6d5dfc);box-shadow:0 16px 40px color-mix(in srgb,var(--profile-accent,#6d5dfc) 16%,transparent)}#view-profile .profile-tab.active{border-color:var(--profile-accent,#6d5dfc);color:var(--profile-accent,#6d5dfc)}
.v91-testimonial-compose{display:flex;gap:9px;align-items:flex-end;margin-bottom:14px}.v91-testimonial-compose textarea{min-height:72px;resize:vertical;flex:1}.v91-testimonials-list{display:grid;gap:9px}.v91-testimonial{display:grid;grid-template-columns:auto 1fr auto;gap:11px;padding:13px;border:1px solid var(--v91-line);border-radius:16px;background:#fff}.v91-testimonial.pending{border-style:dashed;background:#fffdf5}.v91-testimonial>div:nth-child(2){display:flex;flex-direction:column}.v91-testimonial strong{font-size:13px}.v91-testimonial small,.v91-testimonial em{font-size:10px;color:var(--v91-muted);font-style:normal}.v91-testimonial p{margin:7px 0 0;font-size:13px;line-height:1.5}.v91-testimonial-actions{display:flex;gap:5px;align-items:center}.profile-tab-badge{min-width:17px;height:17px;display:inline-grid;place-items:center;border-radius:999px;background:#ef4f6c;color:white;font-size:9px;margin-left:4px}
.v91-composer-context{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.v91-composer-context input,.v91-composer-context select{width:100%;border:1px solid var(--v91-line);background:var(--v91-soft);border-radius:11px;padding:9px 10px;font:inherit;font-size:12px;outline:none}.v91-draft-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:10px;color:var(--v91-muted)}.v91-text-btn{border:0;background:none;color:var(--profile-accent,#6d5dfc);font:inherit;font-size:11px;cursor:pointer;padding:4px}
.v91-room-bar{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid var(--v91-line);background:rgba(255,255,255,.88);backdrop-filter:blur(12px)}.v91-room-list{display:flex;gap:6px;overflow:auto;flex:1;scrollbar-width:none}.v91-room-list::-webkit-scrollbar{display:none}.v91-room-chip{padding:6px 10px}.v91-room-chip span{opacity:.55;margin-right:2px}.v91-room-add{width:30px;height:30px;border-radius:50%;border:1px solid var(--v91-line);background:#fff;cursor:pointer}.v91-collab-badge{color:var(--profile-accent,#6d5dfc);font-weight:600}.v91-album-collab-toggle{font-size:10px!important}
.v91-share-people{display:grid;gap:7px;max-height:55vh;overflow:auto}.v91-share-person{display:flex;align-items:center;gap:10px;border:1px solid var(--v91-line);border-radius:13px;padding:9px;background:#fff;text-align:left;cursor:pointer}.v91-share-person span{display:flex;flex-direction:column;min-width:0;flex:1}.v91-share-person strong{font-size:13px}.v91-share-person small{font-size:10px;color:var(--v91-muted)}.v91-share-person>b{font-size:11px;color:var(--profile-accent,#6d5dfc)}.v91-status-form{display:grid;grid-template-columns:70px 1fr;gap:8px}.v91-status-form input,.v91-status-form select{border:1px solid var(--v91-line);border-radius:11px;padding:10px}.v91-status-form select,.v91-status-form button{grid-column:1/-1}
.v91-sheet{position:fixed;inset:0;z-index:120}.v91-sheet-backdrop{position:absolute;inset:0;border:0;background:rgba(15,18,27,.38);width:100%}.v91-sheet-card{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:min(430px,calc(100% - 24px));padding:9px 14px 16px;background:#fff;border-radius:22px;box-shadow:0 28px 70px rgba(0,0,0,.24)}.v91-sheet-handle{width:42px;height:4px;border-radius:999px;background:#d8dae1;margin:1px auto 12px}.v91-sheet-card h3{margin:0 0 9px}.v91-sheet-card>button{width:100%;border:0;border-top:1px solid var(--v91-line);background:#fff;text-align:left;padding:13px 4px;font:inherit;cursor:pointer}.v91-mobile-nav{display:none}
@media(max-width:760px){body.app-shell-active{padding-bottom:68px}.v91-mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;padding:5px max(6px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-top:1px solid var(--v91-line)}.v91-mobile-nav button{border:0;background:none;display:grid;place-items:center;gap:1px;font:inherit;color:#727786;font-size:19px}.v91-mobile-nav small{font-size:9px}.v91-mobile-create span{width:36px;height:32px;border-radius:13px;background:#222634;color:white;display:grid;place-items:center}.v91-page{padding:4px 2px 30px}.v91-page-head{flex-direction:column;gap:10px}.v91-radar-grid,.v91-radar-groups{grid-template-columns:1fr}.v91-radar-person{padding:10px}.v91-testimonial{grid-template-columns:auto 1fr}.v91-testimonial-actions{grid-column:1/-1}.v91-composer-context{grid-template-columns:1fr}.v91-memory-card{grid-template-columns:66px 1fr auto}.v91-memory-card img,.v91-memory-mark{width:66px;height:60px}.v91-status-form{grid-template-columns:58px 1fr}.post-action.v91-save-post span,.post-action.v91-share-post span{display:none}}
@media(prefers-reduced-motion:reduce){.v91-kind-filter button,.v91-mode-tabs button,.v91-room-chip{transition:none}}
.v91-saved-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}.v91-saved-toolbar .v91-kind-filter{flex:1;margin:0}.v91-saved-item{margin-bottom:14px}.v91-saved-item>.post-card{margin-bottom:0}.v91-saved-item-bar{display:flex;justify-content:flex-end;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--v91-line);border-top:0;border-radius:0 0 14px 14px;background:var(--v91-soft);font-size:10px;color:var(--v91-muted)}.v91-saved-move{border:1px solid var(--v91-line);border-radius:8px;background:#fff;padding:5px 7px;font:inherit;font-size:10px}.v91-share-heading{margin:10px 3px 3px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--v91-muted)}
.v91-trust-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.v91-trust-stats article{border:1px solid var(--v91-line);background:#fff;border-radius:15px;padding:15px;display:flex;flex-direction:column}.v91-trust-stats strong{font-size:24px}.v91-trust-stats span{font-size:11px;color:var(--v91-muted)}.v91-trust-list{display:grid;gap:9px}.v91-trust-report{display:grid;grid-template-columns:1fr minmax(260px,.7fr);gap:16px;border:1px solid var(--v91-line);border-radius:16px;padding:14px;background:#fff}.v91-trust-report p{margin:7px 0;font-size:13px;line-height:1.45}.v91-trust-report small{color:var(--v91-muted);font-size:10px}.v91-trust-risk{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#9a5b10;margin-bottom:5px}.v91-trust-actions{display:grid;gap:7px}.v91-trust-actions select,.v91-trust-actions input{border:1px solid var(--v91-line);border-radius:9px;padding:8px;font:inherit;font-size:11px}.v91-trust-history{display:grid;gap:6px}.v91-trust-history-row{display:grid;grid-template-columns:180px 1fr auto;gap:10px;padding:9px 0;border-bottom:1px solid var(--v91-line);font-size:11px}.v91-trust-history-row small{color:var(--v91-muted)}@media(max-width:760px){.v91-trust-stats{grid-template-columns:repeat(2,1fr)}.v91-trust-report{grid-template-columns:1fr}.v91-trust-history-row{grid-template-columns:1fr}.v91-trust-history-row small{margin-top:-5px}}
.v91-community-hub-card{width:min(820px,calc(100vw - 28px));max-height:86vh;overflow:auto}.v91-community-hub-card>h3{margin:5px 0 18px}.v91-community-hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.v91-community-hub-grid h4{margin:0}.v91-community-rules,.v91-community-events{display:grid;gap:8px;margin-top:9px}.v91-community-rule{display:grid;grid-template-columns:28px 1fr auto;gap:9px;padding:10px;border:1px solid var(--v91-line);border-radius:13px}.v91-community-rule>b{width:25px;height:25px;border-radius:8px;background:var(--v91-soft);display:grid;place-items:center;font-size:11px}.v91-community-rule strong,.v91-community-event strong{font-size:12px}.v91-community-rule p,.v91-community-event p{margin:3px 0 0;color:var(--v91-muted);font-size:11px;line-height:1.4}.v91-community-rule>button,.v91-community-event>button{border:0;background:none;color:#9ba0ad;cursor:pointer}.v91-community-event{display:grid;grid-template-columns:58px 1fr auto;gap:9px;padding:10px;border:1px solid var(--v91-line);border-radius:13px}.v91-community-event time{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--v91-soft);border-radius:10px;padding:6px}.v91-community-event time strong{font-size:11px;text-transform:uppercase}.v91-community-event time span,.v91-community-event small{font-size:9px;color:var(--v91-muted)}@media(max-width:700px){.v91-community-hub-grid{grid-template-columns:1fr}}