.vw { max-width: 800px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
    .vlayout { display: grid; grid-template-columns: 1fr 236px; gap: 1.5rem; align-items: start; }
    @media (max-width: 700px) {
      .vlayout { grid-template-columns: 1fr; }
      .vsidebar { display: none; }
      .vw { padding: 1rem 0.75rem 3rem; }
    }

    .v-hero {
      background: linear-gradient(135deg, #eff6ff 0%, #fefce8 100%);
      border-radius: 16px; padding: 2rem 1.5rem; margin-bottom: 1.5rem;
      text-align: center; border: 1px solid #e5e7eb;
    }
    @media (max-width: 700px) { .v-hero { padding: 1.5rem 1rem; } }

    /* ── Share page button ───────────────────────────────────────────────── */
    #sharePageBtn {
      display: inline-flex; align-items: center; gap: .4rem;
      margin-top: 1rem; padding: .45rem 1.1rem;
      background: white; border: 1.5px solid #d1d5db; border-radius: 99px;
      font-size: .82rem; font-weight: 600; color: #374151;
      cursor: pointer; transition: all .15s;
    }
    #sharePageBtn:hover { border-color: #93c5fd; color: #2563eb; background: #eff6ff; }

    .post-box {
      background: white; border: 1px solid #e5e7eb; border-radius: 14px;
      padding: 1.25rem; margin-bottom: 1rem; margin-top: 1rem;
    }
    .post-box h3 { font-size: .95rem; font-weight: 700; color: #111827; margin-bottom: .875rem; }

    #ventInput {
      width: 100%;
      box-sizing: border-box;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      padding: 0.75rem 0.875rem;
      font-size: 1rem;
      line-height: 1.6;
      color: #111827;
      font-family: inherit;
      resize: vertical;
      min-height: 120px;
      max-height: 260px;
      outline: none;
      display: block;
      transition: border-color .2s, box-shadow .2s;
      overflow-y: auto;
    }
    #ventInput:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px #bfdbfe;
    }
    #ventInput::placeholder { color: #9ca3af; }

    .char-count { font-size: .75rem; color: #9ca3af; text-align: right; margin-top: .3rem; }
    .char-count.warn { color: #d97706; }
    .char-count.over { color: #dc2626; }

    .role-label { font-size: .8rem; font-weight: 600; color: #374151; margin: .875rem 0 .5rem; }
    .role-grid { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .875rem; }
    .role-pill {
      padding: .3rem .75rem; border-radius: 99px;
      border: 1.5px solid #e5e7eb; background: white;
      font-size: .8rem; font-weight: 500; color: #374151;
      cursor: pointer; transition: all .15s; user-select: none;
    }
    .role-pill:hover { border-color: #93c5fd; color: #2563eb; }
    .role-pill.on { border-color: #2563eb; background: #eff6ff; color: #1e40af; }

    .post-btn {
      width: 100%; padding: .75rem; border: none; border-radius: 10px;
      background: #2563eb; color: white; font-size: .95rem; font-weight: 600;
      cursor: pointer; transition: background .2s;
      display: flex; align-items: center; justify-content: center; gap: .5rem;
    }
    .post-btn:hover { background: #1d4ed8; }
    .post-btn:disabled { background: #93c5fd; cursor: not-allowed; }

    .post-err { color: #dc2626; font-size: .8rem; margin-top: .5rem; display: none; }
    .post-err.on { display: block; }
    .post-ok {
      display: none; margin-top: .5rem; font-size: .82rem; color: #15803d;
      background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: .5rem .75rem;
    }
    .post-ok.on { display: block; }

    /* ── Rules ───────────────────────────────────────────────────────────── */
    .rules-box {
      background: #fffbeb; border: 1.5px solid #fcd34d;
      border-radius: 10px; padding: .875rem 1rem;
      margin-bottom: 1.25rem; font-size: .78rem; color: #78350f; line-height: 1.5;
    }

    /* ── Sort bar ────────────────────────────────────────────────────────── */
    .sort-bar { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
    .sort-btn {
      padding: .35rem .875rem; border-radius: 99px;
      border: 1.5px solid #e5e7eb; background: white;
      font-size: .83rem; font-weight: 600; color: #6b7280;
      cursor: pointer; transition: all .15s;
    }
    .sort-btn.on { background: #2563eb; color: white; border-color: #2563eb; }
    .sort-btn:hover:not(.on) { border-color: #93c5fd; color: #2563eb; }
    .feed-meta { margin-left: auto; font-size: .75rem; color: #9ca3af; }

    /* ── Vent cards ──────────────────────────────────────────────────────── */
    .vent-card {
      background: white; border: 1px solid #e5e7eb; border-radius: 14px;
      padding: 1.1rem 1.25rem; margin-bottom: .75rem; transition: box-shadow .15s;
    }
    .vent-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.07); }
    .vent-title {
      font-size: .95rem; font-weight: 700; color: #111827;
      margin-bottom: .35rem; line-height: 1.4;
    }
    .vent-body {
      font-size: .88rem; color: #4b5563; line-height: 1.6; margin-bottom: .875rem;
    }
    .vent-meta {
      display: flex; align-items: center;
      justify-content: space-between; gap: .5rem; flex-wrap: wrap;
    }
    .vent-left { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
    .vent-role {
      font-size: .73rem; font-weight: 600; color: #6b7280;
      background: #f3f4f6; padding: .15rem .5rem; border-radius: 99px;
    }
    .vent-time { font-size: .72rem; color: #9ca3af; }
    .vent-right { display: flex; align-items: center; gap: .375rem; }

    /* ── Owner actions (edit/delete) ──────────────────────────────────────── */
    .owner-btn {
      background: none; border: none; cursor: pointer;
      font-size: .8rem; padding: .2rem .3rem;
      transition: opacity .15s; opacity: .55;
      border-radius: 6px;
    }
    .owner-btn:hover { opacity: 1; }
    .edit-btn:hover { background: #eff6ff; }
    .delete-btn:hover { background: #fef2f2; }

    /* ── Share vent button ────────────────────────────────────────────────── */
    .share-vent-btn {
      background: none; border: none; cursor: pointer;
      color: #d1d5db; font-size: .78rem; padding: .2rem .3rem;
      transition: color .15s; border-radius: 6px;
    }
    .share-vent-btn:hover { color: #2563eb; background: #eff6ff; }

    .upvote-btn {
      display: flex; align-items: center; gap: .3rem;
      padding: .25rem .625rem; border-radius: 99px;
      border: 1.5px solid #e5e7eb; background: white;
      font-size: .8rem; font-weight: 600; color: #6b7280;
      cursor: pointer; transition: all .15s;
    }
    .upvote-btn:hover { border-color: #93c5fd; color: #2563eb; background: #eff6ff; }
    .upvote-btn.voted { border-color: #2563eb; color: #2563eb; background: #eff6ff; }
    .upvote-btn:disabled { opacity: .55; cursor: not-allowed; }
    .report-btn {
      background: none; border: none; cursor: pointer;
      color: #d1d5db; font-size: .75rem; padding: .2rem .3rem; transition: color .15s;
    }
    .report-btn:hover { color: #dc2626; }

    /* ── Load more ───────────────────────────────────────────────────────── */
    .load-more { display: flex; justify-content: center; margin-top: 1rem; }
    .load-more-btn {
      padding: .6rem 2rem; border-radius: 10px;
      border: 1.5px solid #e5e7eb; background: white;
      font-size: .88rem; font-weight: 600; color: #374151; cursor: pointer; transition: all .15s;
    }
    .load-more-btn:hover { border-color: #93c5fd; color: #2563eb; }
    .load-more-btn:disabled { opacity: .5; cursor: not-allowed; }

    /* ── States ──────────────────────────────────────────────────────────── */
    .empty-state { text-align: center; padding: 2.5rem 1rem; color: #9ca3af; font-size: .9rem; }
    .loading-feed { text-align: center; padding: 2rem; color: #9ca3af; font-size: .88rem; }
    .spin-sm {
      width: 15px; height: 15px; border-radius: 50%;
      border: 2px solid rgba(255,255,255,.4); border-top-color: white;
      animation: sp .7s linear infinite; display: inline-block; vertical-align: middle;
    }
    @keyframes sp { to { transform: rotate(360deg); } }

    /* ── Chat CTA ────────────────────────────────────────────────────────── */
    .chat-cta {
      background: #eff6ff; border: 1px solid #bfdbfe;
      border-radius: 12px; padding: 1.1rem 1.25rem; margin-top: 1.5rem;
      display: flex; align-items: center; justify-content: space-between;
      gap: .875rem; flex-wrap: wrap;
    }
    .chat-cta p { font-size: .875rem; color: #1e40af; margin: 0; font-weight: 500; }
    .chat-cta a {
      background: #2563eb; color: white; padding: .5rem 1.1rem;
      border-radius: 8px; font-size: .85rem; font-weight: 600;
      text-decoration: none; white-space: nowrap; transition: background .2s; flex-shrink: 0;
    }
    .chat-cta a:hover { background: #1d4ed8; }

    /* ── Edit modal ──────────────────────────────────────────────────────── */
    .edit-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,.45);
      display: flex; align-items: center; justify-content: center;
      z-index: 9999; padding: 1rem;
    }
    .edit-modal {
      background: white; border-radius: 16px; padding: 1.5rem;
      width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,.2);
    }
    .edit-modal h3 { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 1rem; }
    .edit-modal textarea {
      width: 100%; box-sizing: border-box;
      border: 2px solid #e5e7eb; border-radius: 10px;
      padding: .75rem .875rem; font-size: .95rem; line-height: 1.6;
      color: #111827; font-family: inherit; resize: vertical;
      min-height: 110px; max-height: 220px; outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .edit-modal textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
    .edit-modal-btns { display: flex; gap: .75rem; margin-top: 1rem; }
    .edit-cancel-btn {
      flex: 1; padding: .65rem; border-radius: 10px;
      border: 1.5px solid #e5e7eb; background: white;
      font-size: .9rem; font-weight: 600; color: #6b7280; cursor: pointer; transition: all .15s;
    }
    .edit-cancel-btn:hover { border-color: #9ca3af; color: #374151; }
    .edit-save-btn {
      flex: 1; padding: .65rem; border-radius: 10px;
      border: none; background: #2563eb;
      font-size: .9rem; font-weight: 600; color: white; cursor: pointer; transition: background .2s;
    }
    .edit-save-btn:hover { background: #1d4ed8; }
    .edit-save-btn:disabled { background: #93c5fd; cursor: not-allowed; }

    /* ── Sidebar ─────────────────────────────────────────────────────────── */
    .vsidebar { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1.25rem; }
    .scard { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.1rem; }
    .scard h3 { font-size: .85rem; font-weight: 700; color: #111827; margin-bottom: .75rem; }
    .stat-row { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: .45rem; }
    .stat-row:last-child { margin-bottom: 0; }
    .stat-row span:first-child { color: #6b7280; }
    .stat-row span:last-child { font-weight: 700; color: #111827; }
    .related-link { display: block; font-size: .81rem; color: #2563eb; line-height: 1.4; margin-bottom: .55rem; }
    .related-link:hover { color: #1d4ed8; }
    .related-link:last-child { margin-bottom: 0; }