* { box-sizing: border-box; }
    body { margin: 0; font-family: 'Poppins', sans-serif; background-color: #FFFFFF; color: #333; }

    .topbar {
      background: linear-gradient(90deg, #E5D5FA, #f7e9ff);
      padding: 20px 40px;
      font-size: 24px;
      font-weight: bold;
      color: #6C4EB6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 8px rgba(0,0,0,.08);
      position: sticky; top: 0; z-index: 1000;
    }
    .topbar .menu { display: flex; gap: 20px; }
    .topbar .menu a { display: inline-flex; align-items: center; }
    .topbar .menu a svg { transition: transform .2s ease; }
    .topbar .menu a:hover svg { transform: scale(1.2); }

    .main { display: flex; justify-content: center; padding: 40px; background-color: #faf8fd; min-height: calc(100vh - 70px); }
    .feed { max-width: 650px; width: 100%; }
    .welcome { font-size: 28px; color: #6C4EB6; margin-bottom: 20px; text-align: center; }

    .flash-messages { margin: 0 0 20px; }
    .alert { padding: 14px; border-radius: 8px; margin-bottom: 10px; font-weight: 600; text-align: center; }
    .alert.success { background:#d4edda; color:#155724; }
    .alert.danger  { background:#f8d7da; color:#721c24; }

    .post {
      background:#fff; border-radius:16px;
      box-shadow:0 6px 18px rgba(34,15,61,.08);
      padding:22px 24px; margin-bottom:28px;
      transition: box-shadow .25s ease, transform .2s ease;
      opacity:0; transform: translateY(20px);
    }
    .post:hover { box-shadow:0 10px 28px rgba(34,15,61,.12); }

    .post-title { font-size:20px; color:#4c3391; font-weight:700; margin-bottom:10px; }
    .post-content { font-size:16px; line-height:1.65; margin-bottom:12px; white-space: pre-wrap; }
    .post img {
      display:block; width:100%; height:auto; max-height:420px; object-fit:cover;
      border-radius:12px; margin-bottom:14px; box-shadow:0 2px 12px rgba(0,0,0,.06);
    }

    .post-footer { display:flex; flex-direction:column; gap:8px; font-size:13px; color:#7a7390; }
    .post-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .badge { background:#efe9ff; color:#5b3ec4; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:600; }

    .post-actions { display:flex; align-items:center; gap:14px; }
    .like-btn, .comment-btn {
      border:none; background:transparent; cursor:pointer; color:#6C4EB6;
      font-size:15px; display:inline-flex; align-items:center; gap:6px;
      transition: transform .12s ease, color .12s ease;
    }
    .like-btn.liked { color:#8a5cf6; transform: scale(1.04); }
    .like-btn .like-count { margin-left:6px; font-weight:700; }
    .like-btn[disabled] { opacity:.6; cursor:not-allowed; }
    .comment-btn:hover { color:#8a5cf6; }

      /* ===== Skins por categoria (pastel) ===== */
    .post.cat-desabafo {
      background: #FCE4EC;               /* rosa pastel */
      border: 1px solid #F8BBD0;
    }

    .post.cat-dica {
      background: #F1ECFF;               /* lilás pastel, no tom do site */
      border: 1px solid #E0D4FF;
    }

    .post.cat-humor {
      background: #FFF8E1;               /* amarelo pastel */
      border: 1px solid #FFE7A0;
    }

    /* Detalhe opcional: badge combinando levemente */
    .post.cat-desabafo .badge { background:#ffe3f1; color:#c2185b; }
    .post.cat-dica     .badge { background:#efe9ff; color:#5b3ec4; } /* já no padrão */
    .post.cat-humor    .badge { background:#fff0c2; color:#8a6a00; }

    /* Ajuste sutil na sombra pra não pesar no pastel */
    .post.cat-desabafo,
    .post.cat-dica,
    .post.cat-humor {
      box-shadow: 0 6px 16px rgba(34,15,61,.06);
    }
    .post.cat-desabafo:hover,
    .post.cat-dica:hover,
    .post.cat-humor:hover {
      box-shadow: 0 10px 24px rgba(34,15,61,.10);
    }


    /* --- Ícones (desktop e mobile) --- */
    .post-actions .icon { display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; }
    .post-actions .icon svg { width:20px; height:20px; display:block; }

    /* Coração: contorno por padrão; preenchido quando .liked */
    .like-btn .icon-heart .heart {
      fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    .like-btn.liked .icon-heart .heart { fill: currentColor; }

    /* Balão de comentário */
    .comment-btn .icon-bubble path { fill: currentColor; }

    /* === links em rosa nos posts e comentários === */
    .post-content a, .comment-body a {
      color:#e91e63; text-decoration: underline; text-underline-offset: 2px; font-weight:600;
    }
    .post-content a:hover, .comment-body a:hover { color:#d81b60; }
    .post-content, .comment-body { overflow-wrap:anywhere; }

    /* Estados de envio/erro */
    .comment-item.pending { opacity: .7; position: relative; }
    .comment-item.pending::after {
      content: "Enviando…";
      position: absolute; right: 10px; top: 8px; font-size: 12px; color: #7a7390;
    }
    .comment-item.failed { border-color:#ffd7d7; background:#fff4f4; }
    .comment-item.failed::after {
      content: "Falhou. Tentar novamente";
      position:absolute; right:10px; top:8px; font-size:12px; color:#c0392b; text-decoration: underline;
      cursor: pointer;
    }
    .toast {
      position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
      background:#4c3391; color:#fff; padding:10px 14px; border-radius:8px; font-size:14px;
      box-shadow: 0 6px 18px rgba(0,0,0,.18); z-index: 1200; opacity: 0; transition: opacity .2s ease;
    }
    .toast.show { opacity: 1; }

    /* Área de comentários (colapsável) */
    .comments { margin-top:14px; border-top:1px solid #eee; padding-top:12px; display:none; }
    .comments.open { display:block; }

    /* Form em coluna: nome -> textarea -> botão */
    .comment-form { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
    .comment-form .row { display:flex; gap:10px; align-items:flex-start; flex-wrap: wrap; }
    .comment-form .name-col { flex: 0 0 220px; max-width: 100%; }
    .comment-form input[type="text"], .comment-form textarea {
      width:100%; border:1px solid #ddd; border-radius:8px; padding:10px;
      font-family:'Poppins', sans-serif; font-size:14px; background:#fff;
    }
    .comment-form textarea { min-height: 90px; resize: vertical; }
    .comment-form .char-counter { font-size:12px; color:#7a7390; margin-top:4px; }
    .comment-form .actions { display:flex; justify-content:flex-end; }
    .comment-form .actions button {
      background:#6C4EB6; color:white; border:none; border-radius:8px;
      padding:10px 16px; cursor:pointer; font-weight:600;
    }
    .comment-form .actions button:hover { filter: brightness(1.03); }

    .comment-item {
      background:#faf8fd; border:1px solid #f1eaff; border-radius:10px;
      padding:8px 10px; margin-bottom:8px;
    }
    .comment-meta { font-size:12px; color:#7a7390; margin-bottom:4px; }

    /* === WhatsApp floating button === */
    .whatsapp-btn {
      position: fixed; bottom: 25px; right: 25px;
      background-color: #25D366; border: none; border-radius: 50%;
      width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 1100; box-shadow: 0 4px 10px rgba(0,0,0,0.25);
      transition: transform .15s ease, background-color .15s ease;
    }
    .whatsapp-btn:hover { background-color: #1DA851; transform: translateY(-1px); }
    .whatsapp-btn svg { fill: #fff; }
    .whatsapp-tooltip {
      position: fixed; bottom: 95px; right: 30px;
      background-color: #6C4EB6; color: #fff; padding: 6px 12px;
      border-radius: 8px; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
      display: none; z-index: 1100; pointer-events: none;
    }

    /* --- Failsafe: cards visíveis mesmo se o JS não rodar --- */
    .post { opacity: 1 !important; transform: none !important; }

    /* Animação opcional controlada por classe (não esconde por padrão) */
    @media (prefers-reduced-motion: no-preference) {
      .post.reveal { opacity: 0; transform: translateY(12px); transition: opacity .28s ease, transform .28s ease; }
      .post.reveal.show { opacity: 1; transform: none; }
    }

    /* Responsivo (existente) */
    @media (max-width: 520px) {
      .comment-form .name-col { flex: 1 1 100%; }
    }

    /* ===== Celulares até 480px (ícones-only) ===== */
    @media (max-width: 480px) {
      .topbar { padding: 12px 16px; font-size: 20px; }
      .topbar .menu { gap: 14px; }
      .main   { padding: 16px; }
      .feed   { max-width: 100%; }
      .welcome { font-size: 24px; }

      .post { padding: 16px; border-radius: 12px; box-shadow: 0 4px 14px rgba(34,15,61,.08); }
      .post-title   { font-size: 18px; }
      .post-content { font-size: 15px; }
      .post img     { max-height: 340px; }

      .post-meta { gap: 8px; }
      .badge { font-size: 11px; padding: 3px 8px; }

      /* esconde textos dos botões, deixa apenas ícones + contadores */
      .post-actions .label { display:none; }
      .post-actions { gap: 12px; }
      .post-actions .icon { width:22px; height:22px; }
      .post-actions .icon svg { width:22px; height:22px; }
      .like-btn .like-count, .comment-btn .comment-count { margin-left:4px; font-size:14px; }

      .comment-form .row { flex-direction: column; gap: 8px; }
      .comment-form .name-col { flex: 1 1 auto; }
      .comment-form textarea { min-height: 80px; }
      .comment-form .actions button { padding: 10px 14px; }

      .whatsapp-btn { width: 56px; height: 56px; right: 16px; bottom: 16px; }
      .whatsapp-tooltip { right: 18px; bottom: 80px; }
    }

    /* ===== Celulares muito estreitos até 360px ===== */
    @media (max-width: 360px) {
      .topbar { font-size: 18px; }
      .welcome { font-size: 22px; }
      .post { padding: 14px; }
      .post-title { font-size: 17px; }
      .post-content { font-size: 14.5px; }
      .post img { max-height: 300px; }
      .post-actions { flex-wrap: wrap; gap: 10px; }
      .badge { font-size: 10.5px; padding: 3px 6px; }
      .whatsapp-btn { width: 52px; height: 52px; right: 14px; bottom: 14px; }
    }

    /* ===== Touch (sem hover real) ===== */
    @media (hover: none) and (pointer: coarse) {
      .comment-btn:hover, .like-btn:hover { color: #6C4EB6; }
    }

    /* ===== Safe-area (notch) ===== */
    @supports (padding: max(0px)) {
      .topbar {
        padding-left:  max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
      }
    }