/* ============================================================
   DRIPPING SECRETS — Secrets Society CSS  (v9.92)
   ============================================================ */
:root {
  --com-pink:   #E91E8C;
  --com-purple: #4B1F5F;
  --com-dark:   #1a0a24;
  --com-card:   rgba(255,255,255,0.04);
  --com-border: rgba(255,255,255,0.08);
  --com-radius: 16px;
}

/* ── Hero ─────────────────────────────────────────────────── */
.com-hero {
  background: linear-gradient(135deg,#1a0a24,#2d1040,#1a0a24);
  padding:80px 20px 60px; text-align:center; position:relative; overflow:hidden;
}
.com-hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(233,30,140,.2) 0%, transparent 65%);
  pointer-events:none;
}
.com-hero-eyebrow { font-size:.78rem; font-weight:700; letter-spacing:.14em; color:var(--com-pink); text-transform:uppercase; margin:0 0 12px; }
.com-hero h1 { font-size:clamp(2rem,5vw,3.2rem); color:#fff; margin:0 0 14px; line-height:1.15; }
.com-hero p  { color:rgba(255,255,255,.7); font-size:1rem; max-width:520px; margin:0 auto 32px; }

/* ── Layout ───────────────────────────────────────────────── */
.com-layout { max-width:1140px; margin:0 auto; padding:40px 20px; display:grid; grid-template-columns:240px 1fr; gap:24px; align-items:start; }
@media(max-width:900px) { .com-layout { grid-template-columns:1fr; } }

/* ── Sidebar ──────────────────────────────────────────────── */
.com-sidebar { position:sticky; top:80px; }
.com-areas { background:var(--com-card); border:1px solid var(--com-border); border-radius:var(--com-radius); overflow:hidden; }
.com-area-btn {
  display:flex; align-items:center; gap:10px; width:100%; padding:14px 16px;
  background:transparent; border:none; border-bottom:1px solid var(--com-border);
  color:rgba(255,255,255,.6); font-size:.9rem; cursor:pointer; transition:all .2s; text-align:left;
}
.com-area-btn:last-child { border-bottom:none; }
.com-area-btn:hover, .com-area-btn.active { background:rgba(233,30,140,.08); color:#fff; }
.com-area-btn.active { border-left:3px solid var(--com-pink); }
.com-area-icon { font-size:1.2rem; flex-shrink:0; }
.com-area-label { flex:1; font-weight:500; }
.com-area-count { font-size:.75rem; color:rgba(255,255,255,.35); }

/* ── Feed ─────────────────────────────────────────────────── */
.com-feed-top { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; align-items:center; }
.com-area-title { color:#fff; font-size:1.2rem; font-weight:700; margin:0; flex:1; }
.com-post-btn {
  background:linear-gradient(135deg,var(--com-pink),#c2185b); color:#fff;
  border:none; padding:10px 20px; border-radius:50px; font-size:.88rem; font-weight:700;
  cursor:pointer; transition:opacity .2s; white-space:nowrap;
}
.com-post-btn:hover { opacity:.85; }

/* ── Post Card ────────────────────────────────────────────── */
.com-post {
  background:var(--com-card); border:1px solid var(--com-border); border-radius:var(--com-radius);
  padding:20px; margin-bottom:16px; transition:border-color .2s;
}
.com-post:hover { border-color:rgba(233,30,140,.2); }
.com-post-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.com-avatar {
  width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--com-pink),var(--com-purple));
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:700;
  color:#fff; flex-shrink:0; overflow:hidden;
}
.com-avatar img { width:100%; height:100%; object-fit:cover; }
.com-post-meta { flex:1; }
.com-post-author { color:#fff; font-size:.9rem; font-weight:600; margin:0 0 2px; }
.com-post-time { color:rgba(255,255,255,.35); font-size:.78rem; }
.com-post-area-badge {
  font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:50px;
  background:rgba(233,30,140,.15); color:var(--com-pink); text-transform:uppercase; letter-spacing:.06em;
}
.com-post-body { color:rgba(255,255,255,.85); font-size:.95rem; line-height:1.6; margin:0 0 16px; white-space:pre-wrap; word-break:break-word; }
.com-post-actions { display:flex; gap:16px; flex-wrap:wrap; }
.com-action-btn {
  background:transparent; border:none; color:rgba(255,255,255,.45); font-size:.85rem;
  cursor:pointer; display:flex; align-items:center; gap:6px; padding:4px 0; transition:color .2s;
}
.com-action-btn:hover { color:var(--com-pink); }
.com-action-btn.liked { color:var(--com-pink); }
.com-action-btn svg { flex-shrink:0; }

/* ── Comments ─────────────────────────────────────────────── */
.com-comments { margin-top:14px; padding-top:14px; border-top:1px solid var(--com-border); display:none; }
.com-comments.open { display:block; }
.com-comment { display:flex; gap:10px; margin-bottom:10px; }
.com-comment-avatar { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--com-purple),var(--com-pink)); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:#fff; flex-shrink:0; }
.com-comment-body { background:rgba(255,255,255,.04); border-radius:10px; padding:8px 12px; flex:1; }
.com-comment-author { color:#fff; font-size:.8rem; font-weight:600; margin:0 0 2px; }
.com-comment-text  { color:rgba(255,255,255,.7); font-size:.85rem; line-height:1.4; }
.com-comment-input-wrap { display:flex; gap:8px; margin-top:10px; }
.com-comment-input {
  flex:1; background:rgba(255,255,255,.06); border:1px solid var(--com-border); color:#fff;
  padding:8px 14px; border-radius:50px; font-size:.85rem; outline:none; transition:border .2s;
}
.com-comment-input:focus { border-color:rgba(233,30,140,.4); }
.com-comment-submit {
  background:var(--com-pink); color:#fff; border:none; padding:8px 16px; border-radius:50px;
  font-size:.82rem; font-weight:700; cursor:pointer; flex-shrink:0; transition:opacity .2s;
}
.com-comment-submit:hover { opacity:.85; }

/* ── Profile Modal ────────────────────────────────────────── */
.com-profile { background:var(--com-card); border:1px solid var(--com-border); border-radius:var(--com-radius); padding:20px; margin-bottom:20px; }
.com-profile h3 { color:#fff; margin:0 0 6px; font-size:1rem; }
.com-profile p { color:rgba(255,255,255,.5); font-size:.85rem; margin:0 0 14px; }
.com-stat-row { display:flex; gap:20px; margin-bottom:14px; }
.com-stat { text-align:center; }
.com-stat-num { color:#fff; font-size:1.2rem; font-weight:800; }
.com-stat-lbl { color:rgba(255,255,255,.4); font-size:.72rem; display:block; }

/* ── Post Compose ─────────────────────────────────────────── */
.com-compose-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.82);
  z-index:9998; display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.com-compose-overlay.open { opacity:1; pointer-events:all; }
.com-compose-modal {
  background:#1e0d2e; border:1px solid var(--com-border); border-radius:20px;
  width:100%; max-width:520px; padding:28px;
  transform:translateY(20px); transition:transform .2s;
}
.com-compose-overlay.open .com-compose-modal { transform:translateY(0); }
.com-compose-modal h3 { color:#fff; margin:0 0 18px; }
.com-area-select {
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--com-border); color:#fff;
  padding:10px 14px; border-radius:10px; font-size:.9rem; outline:none; margin-bottom:12px;
  appearance:none; cursor:pointer;
}
.com-area-select option { background:#1a0a24; }
.com-post-textarea {
  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--com-border); color:#fff;
  padding:12px 14px; border-radius:12px; font-size:.9rem; outline:none; resize:vertical;
  min-height:120px; transition:border .2s; box-sizing:border-box; line-height:1.5;
}
.com-post-textarea:focus { border-color:rgba(233,30,140,.4); }
.com-compose-actions { display:flex; gap:10px; margin-top:14px; justify-content:flex-end; }
.com-submit-btn {
  background:linear-gradient(135deg,var(--com-pink),#c2185b); color:#fff;
  border:none; padding:11px 24px; border-radius:50px; font-size:.9rem; font-weight:700; cursor:pointer; transition:opacity .2s;
}
.com-submit-btn:hover { opacity:.85; }
.com-cancel-btn { background:transparent; border:1px solid var(--com-border); color:rgba(255,255,255,.5); padding:11px 20px; border-radius:50px; font-size:.9rem; cursor:pointer; transition:border-color .2s; }
.com-cancel-btn:hover { border-color:rgba(233,30,140,.3); }

/* ── Load More ────────────────────────────────────────────── */
.com-load-more {
  width:100%; background:transparent; border:1px solid var(--com-border); color:rgba(255,255,255,.6);
  padding:12px; border-radius:50px; font-size:.9rem; cursor:pointer; transition:all .2s; margin-top:8px;
}
.com-load-more:hover { border-color:var(--com-pink); color:#fff; }

@media(max-width:768px) { .com-layout { padding:20px 16px; } .com-compose-modal { padding:20px; } }