/* ============================================
   Community Journeys — Public Stylesheet
   Design: Bold journey-card aesthetic with
   per-community accent color system
============================================ */

:root {
    --cj-accent: #6C63FF;
    --cj-text:   #1a1a2e;
    --cj-muted:  #64748b;
    --cj-bg:     #f8f9ff;
    --cj-white:  #ffffff;
    --cj-border: #e2e8f0;
    --cj-radius: 14px;
    --cj-shadow: 0 4px 24px rgba(0,0,0,.08);
    --cj-font:   'Inter', system-ui, -apple-system, sans-serif;
}
/* ════════════════════════════════════════
   BOTTOM STICKY MENU CLEARANCE
   --cj-bottom-bar: height of theme's sticky
   bottom nav (60px covers most themes).
   env() adds extra room on notched devices.
════════════════════════════════════════ */
:root {
    --cj-bottom-bar: 60px;
    --cj-bottom-safe: calc(var(--cj-bottom-bar) + env(safe-area-inset-bottom, 0px));
}



*, *::before, *::after { box-sizing: border-box; }

.cj-communities-list,
.cj-community-page,
.cj-auth-wrap,
.cj-join-wrap,
.cj-dashboard { font-family: var(--cj-font); color: var(--cj-text); }

/* ── Page Hero ── */
.cj-page-hero {
    text-align: center;
    padding: 64px 24px 48px;
    background: linear-gradient(135deg, #f8f9ff 0%, #ede9ff 100%);
}
.cj-hero-title  { font-size: clamp(2rem,5vw,3.2rem); font-weight:800; margin:0 0 12px; letter-spacing:-1px; }
.cj-hero-subtitle { font-size:1.1rem; color:var(--cj-muted); max-width:520px; margin:0 auto; }

/* ── Community Grid ── */
.cj-community-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    gap: 24px;
    padding: 32px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Community Card ── */
.cj-community-card {
    border-radius: var(--cj-radius);
    overflow: hidden;
    box-shadow: var(--cj-shadow);
    background: var(--cj-white);
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
}
.cj-community-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.14); }
.cj-community-card-banner {
    height: 160px;
    position: relative;
    display: flex;
    align-items: flex-end;
}
.cj-community-card-overlay {
    position: absolute; inset: 0;
}
.cj-community-card-header-text {
    position: relative;
    z-index: 1;
    padding: 16px;
    color: white;
}
.cj-journey-tag {
    display: inline-block;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.35);
    color: white;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
}
.cj-community-card-title { font-size: 1.25rem; font-weight:700; margin:0; color:white; }
.cj-community-card-body { padding: 20px; flex:1; display:flex; flex-direction:column; gap:12px; }
.cj-community-excerpt { color: var(--cj-muted); font-size:.9rem; margin:0; flex:1; }
.cj-community-meta { font-size:.85rem; color:var(--cj-muted); }
.cj-member-count { display:inline-flex; align-items:center; gap:5px; }
.cj-community-card-actions { display:flex; gap:10px; align-items:center; margin-top:auto; }
.cj-joined-badge { font-size:.85rem; color:#2ecc71; font-weight:600; }

/* ── Buttons ── */
.cj-btn {
    display: inline-flex; align-items:center; justify-content:center;
    padding: 10px 22px; border-radius: 8px; font-weight:600; font-size:.9rem;
    cursor:pointer; text-decoration:none; border:none; transition: opacity .15s, transform .1s;
}
.cj-btn:hover { opacity:.88; transform:translateY(-1px); }
.cj-btn:active { transform:translateY(0); }
.cj-btn-primary { background:var(--cj-accent); color:white; }
.cj-btn-outline  { background:transparent; color:var(--cj-accent); border:2px solid var(--cj-accent); }
.cj-btn-white    { background:white; color:var(--cj-text); }
.cj-btn-full     { width:100%; }
.cj-btn-sm       { padding:6px 14px; font-size:.82rem; }
.cj-btn-text     { background:none; border:none; padding:0; font-size:.85rem; font-weight:600; cursor:pointer; }

/* ── Community Hero ── */
.cj-community-hero {
    position:relative; min-height:280px;
    display:flex; align-items:center;
}
.cj-hero-overlay { position:absolute; inset:0; }
.cj-hero-content { position:relative; z-index:1; padding:40px 32px; color:white; }
.cj-journey-tag-hero {
    display:inline-block; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4);
    color:white; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    padding:3px 12px; border-radius:20px; margin-bottom:10px;
}
.cj-community-title { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; margin:0 0 10px; }
.cj-community-desc  { font-size:1rem; opacity:.88; max-width:560px; margin:0 0 16px; }
.cj-hero-meta       { margin-bottom:20px; font-size:.9rem; opacity:.8; }
.cj-hero-joined     { font-size:.95rem; background:rgba(255,255,255,.2); padding:8px 18px; border-radius:6px; }

/* ── Tabs ── */
.cj-tabs-nav {
    position:sticky; top:0; z-index:100;
    background:white; box-shadow:0 2px 12px rgba(0,0,0,.06);
    overflow-x:auto;
}
.cj-tabs-inner {
    display:flex; max-width:1200px; margin:0 auto; padding:0 16px;
}
.cj-tab-link {
    display:flex; flex-direction:column; align-items:center;
    padding:12px 20px; text-decoration:none; color:var(--cj-muted);
    font-size:.82rem; font-weight:600; white-space:nowrap;
    border-bottom:3px solid transparent; transition:color .15s;
    gap:4px;
}
.cj-tab-link:hover { color:var(--cj-accent); }
.cj-tab-active { color:var(--cj-accent); }
.cj-tab-icon { font-size:1.2rem; }

.cj-tab-content { max-width:1100px; margin:0 auto; padding:32px 24px; }

/* ── Feed ── */
.cj-feed-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px;
}
.cj-feed-card {
    background:white; border-radius:var(--cj-radius);
    box-shadow:var(--cj-shadow); transition:transform .15s; overflow:hidden;
    display:flex; flex-direction:column;
}
.cj-feed-card:hover { transform:translateY(-2px); }
.cj-feed-thumb {
    height:160px; background-size:cover; background-position:center;
    background-color:#f0f0f0; position:relative;
}
.cj-feed-thumb-link { position:absolute; inset:0; }
.cj-feed-card-body { padding:22px; flex:1; display:flex; flex-direction:column; }
.cj-feed-card-type { display:flex; align-items:center; gap:6px; margin-bottom:10px; font-size:.8rem; color:var(--cj-muted); flex-wrap:wrap; }
.cj-feed-icon { font-size:1.1rem; }
.cj-feed-type-label { font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.cj-feed-source { color:var(--cj-muted); }
.cj-feed-date { margin-left:auto; }
.cj-feed-title { font-size:1.05rem; font-weight:700; margin:0 0 10px; }
.cj-feed-title a:hover { color:var(--cj-accent) !important; }
.cj-ext-arrow { font-size:.8rem; opacity:.6; }
.cj-feed-excerpt { color:var(--cj-muted); font-size:.88rem; line-height:1.5; margin-bottom:12px; flex:1; }
.cj-feed-cta { align-self:flex-start; }
.cj-feed-full { margin-top:12px; padding-top:12px; border-top:1px solid var(--cj-border); line-height:1.7; }
/* Type accents */
.cj-feed-news   { border-top:3px solid #3b82f6; }
.cj-feed-blog   { border-top:3px solid #8b5cf6; }
.cj-feed-tip    { border-top:3px solid #f59e0b; }
.cj-feed-article{ border-top:3px solid var(--cj-accent); }
.cj-feed-resource { border-top:3px solid #10b981; }

/* Admin author badge in forum */
.cj-admin-author-badge {
    display:inline-block; background:var(--cj-accent); color:white;
    font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:4px;
    text-transform:uppercase; letter-spacing:.04em;
}
.cj-forum-toolbar-actions { display:flex; gap:10px; align-items:center; }

/* ── Polls ── */
.cj-polls-list { display:flex; flex-direction:column; gap:24px; }
.cj-poll-card { background:white; border-radius:var(--cj-radius); padding:28px; box-shadow:var(--cj-shadow); }
.cj-poll-header { margin-bottom:20px; }
.cj-poll-question { font-size:1.15rem; font-weight:700; margin:0 0 8px; }
.cj-poll-desc { color:var(--cj-muted); margin:0 0 8px; }
.cj-poll-ended-badge { display:inline-block; background:#fee2e2; color:#dc2626; padding:3px 12px; border-radius:20px; font-size:.75rem; font-weight:600; }
.cj-poll-ends { font-size:.82rem; color:var(--cj-muted); }
.cj-poll-options { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.cj-poll-option {
    display:flex; align-items:center; gap:12px;
    padding:14px 18px; border:2px solid var(--cj-border); border-radius:10px;
    cursor:pointer; transition:border-color .15s, background .15s;
}
.cj-poll-option:hover { border-color:var(--cj-accent); background:var(--cj-bg); }
.cj-poll-option input { margin:0; width:18px; height:18px; accent-color:var(--cj-accent); }
.cj-poll-result-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.cj-poll-result-label { width:200px; font-size:.9rem; flex-shrink:0; }
.cj-poll-result-bar-wrap { flex:1; height:12px; background:#f0f0f0; border-radius:6px; overflow:hidden; }
.cj-poll-result-bar { height:100%; border-radius:6px; transition:width .6s ease; }
.cj-poll-result-pct { width:80px; font-size:.85rem; color:var(--cj-muted); }
.cj-poll-total { color:var(--cj-muted); font-size:.8rem; margin:12px 0 0; }

/* ── Challenges ── */
.cj-challenges-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.cj-challenge-card {
    background:white; border-radius:var(--cj-radius); padding:24px;
    box-shadow:var(--cj-shadow); border-left:5px solid transparent;
    border-left-color:var(--cj-accent); position:relative;
    transition:transform .15s;
}
.cj-challenge-card:hover { transform:translateY(-2px); }
.cj-challenge-done { opacity:.65; }
.cj-challenge-done::after { content:'✅ Done'; position:absolute; top:14px; right:14px; font-size:.75rem; font-weight:700; color:#2ecc71; }
.cj-challenge-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.cj-challenge-freq { font-size:.78rem; color:var(--cj-muted); font-weight:600; }
.cj-challenge-points { padding:4px 12px; border-radius:20px; font-size:.82rem; font-weight:700; color:white; }
.cj-challenge-title { font-size:1.05rem; font-weight:700; margin:0 0 10px; }
.cj-challenge-desc { color:var(--cj-muted); font-size:.88rem; line-height:1.5; }
.cj-challenge-deadline { font-size:.8rem; color:#f59e0b; margin-top:10px; }
.cj-challenge-footer { margin-top:18px; }
.cj-challenge-completed-badge { color:#2ecc71; font-weight:700; }
.cj-members-only { font-size:.82rem; color:var(--cj-muted); font-style:italic; }

/* ── Forum ── */
.cj-forum-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.cj-forum-toolbar h2 { margin:0; }
.cj-threads-list { display:flex; flex-direction:column; gap:2px; }
.cj-thread-row {
    display:flex; align-items:center; gap:14px;
    padding:16px 20px; background:white; border-radius:8px;
    border:1px solid var(--cj-border); transition:box-shadow .15s;
}
.cj-thread-row:hover { box-shadow:0 2px 12px rgba(0,0,0,.08); }
.cj-thread-row.cj-pinned { border-left:4px solid var(--cj-accent); }
.cj-thread-row-avatar { flex-shrink:0; }
.cj-thread-row-avatar img { border-radius:50%; }
.cj-thread-row-main { flex:1; min-width:0; }
.cj-thread-row-title { font-weight:700; font-size:.97rem; text-decoration:none; display:block; margin-bottom:4px; }
.cj-thread-row-title:hover { text-decoration:underline; }
.cj-thread-row-meta { font-size:.8rem; color:var(--cj-muted); }
.cj-thread-row-stats { flex-shrink:0; }
.cj-reply-count { font-size:.85rem; color:var(--cj-muted); }

/* Single Thread */
.cj-back-link { display:inline-flex; align-items:center; gap:6px; color:var(--cj-muted); text-decoration:none; font-size:.88rem; margin-bottom:20px; }
.cj-back-link:hover { color:var(--cj-accent); }
.cj-thread-post { background:white; border-radius:var(--cj-radius); padding:32px; box-shadow:var(--cj-shadow); margin-bottom:28px; }
.cj-pinned-badge { display:inline-block; background:#fff3cd; color:#856404; font-size:.75rem; font-weight:600; padding:3px 12px; border-radius:20px; margin-bottom:10px; }
.cj-thread-title { font-size:1.5rem; font-weight:800; margin:0 0 16px; }
.cj-thread-meta { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.cj-thread-meta img { border-radius:50%; }
.cj-thread-author { font-weight:600; }
.cj-thread-date { color:var(--cj-muted); font-size:.85rem; }
.cj-thread-body { line-height:1.8; }

/* Replies */
.cj-replies-section { margin-top:28px; }
.cj-replies-heading { font-size:1.1rem; font-weight:700; margin-bottom:16px; }
.cj-replies-list { display:flex; flex-direction:column; gap:16px; margin-bottom:28px; }
.cj-reply-item { display:flex; gap:14px; background:white; border-radius:10px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.cj-reply-avatar img { border-radius:50%; width:40px; height:40px; flex-shrink:0; }
.cj-reply-main { flex:1; min-width:0; }
.cj-reply-header { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.cj-reply-author { font-weight:700; font-size:.92rem; }
.cj-reply-date { font-size:.78rem; color:var(--cj-muted); }
.cj-reply-body { line-height:1.7; margin-bottom:12px; }
.cj-no-replies { color:var(--cj-muted); text-align:center; padding:32px; }

/* Reaction Bar */
.cj-reaction-bar { display:flex; align-items:center; gap:3px; flex-wrap:wrap; margin-top:4px; }
.cj-reaction-btn {
    display:inline-flex; align-items:center; gap:2px;
    padding:1px 5px; border-radius:6px; border:1px solid var(--cj-border);
    background:white; cursor:pointer; font-size:.68rem; font-weight:600;
    color:var(--cj-muted); transition:all .15s; line-height:1.4;
}
.cj-reaction-btn:hover { border-color:var(--cj-accent); color:var(--cj-accent); background:#f5f3ff; }
.cj-reaction-btn.cj-reacted { border-color:var(--cj-accent); background:var(--cj-accent); color:white; }
.cj-reaction-btn-useful { border-color:#d1fae5; color:#065f46; background:#f0fdf4; }
.cj-reaction-btn-useful:hover { border-color:#059669; color:#065f46; background:#d1fae5; }
.cj-reaction-btn-useful.cj-reacted { border-color:#059669; background:#059669; color:white; }
.cj-reaction-btn-abuse { border-color:#fee2e2; color:#991b1b; background:#fff5f5; }
.cj-reaction-btn-abuse:hover { border-color:#dc2626; color:#991b1b; background:#fee2e2; }
.cj-reaction-btn-abuse.cj-reacted { border-color:#dc2626; background:#dc2626; color:white; }
.cj-reaction-btn-green { border-color: #16a34a !important; color: #16a34a !important; }
.cj-reaction-btn-green.cj-reacted { border-color: #16a34a !important; background: #16a34a !important; color: white !important; }
.cj-reaction-icon { font-size:.75rem; }
.cj-reaction-divider { color:var(--cj-border); padding:0 1px; }
.cj-reaction-count { font-weight:700; font-size:.68rem; }
.cj-reaction-label { display:none; }

.cj-reply-form-wrap { background:white; border-radius:var(--cj-radius); padding:24px; box-shadow:var(--cj-shadow); }
.cj-reply-form-wrap h4 { margin:0 0 14px; }

/* ── Stories ── */
.cj-stories-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.cj-stories-toolbar h2 { margin:0; }
.cj-stories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.cj-story-card {
    background:white; border-radius:var(--cj-radius); padding:24px;
    box-shadow:var(--cj-shadow); display:flex; flex-direction:column; gap:14px;
    transition:transform .15s;
}
.cj-story-card:hover { transform:translateY(-2px); }
.cj-story-card-header { display:flex; align-items:center; gap:12px; }
.cj-story-card-header img { border-radius:50%; }
.cj-story-card-author { font-weight:700; font-size:.92rem; }
.cj-story-card-date { font-size:.78rem; color:var(--cj-muted); }
.cj-story-badge { margin-left:auto; font-size:1.4rem; }
.cj-story-card-title { font-size:1.08rem; font-weight:700; margin:0; }
.cj-story-card-excerpt { color:var(--cj-muted); font-size:.88rem; line-height:1.5; }
.cj-story-full { border-top:1px solid var(--cj-border); padding-top:14px; line-height:1.8; }
.cj-story-share { display:flex; align-items:center; gap:8px; margin-top:auto; font-size:.82rem; color:var(--cj-muted); }
.cj-share-btn {
    width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--cj-border);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 700; cursor: pointer; text-decoration: none;
    color: var(--cj-text); background: white; transition: all .15s;
}
.cj-share-btn:hover { background: var(--cj-accent); color: white; border-color: var(--cj-accent); }
/* Copy link button — wider to fit text */
.cj-share-copy-text {
    width: auto;
    border-radius: 14px;
    padding: 0 10px;
    font-size: .72rem;
    letter-spacing: .01em;
    color: var(--cj-accent);
    border-color: var(--cj-accent);
}
.cj-share-copy-text:hover { background: var(--cj-accent); color: white; }
/* Feed text link (Read Post / Read Article) — no border, like Read More */
.cj-feed-text-link {
    font-size: .85rem;
    font-weight: 600;
    color: var(--cj-accent);
    text-decoration: none;
    display: inline-block;
    margin-top: 8px;
    transition: opacity .15s;
}
.cj-feed-text-link:hover { opacity: .75; text-decoration: underline; }

/* ── Leaderboard ── */
/* ── Leaderboard ── */
.cj-lb-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
}
.cj-lb-header h2 { margin: 0; font-size: 1.2rem; font-weight: 800; }
.cj-my-rank-pill {
    display: inline-flex; align-items: center; gap: 6px;
    border: 2px solid; border-radius: 20px;
    padding: 5px 14px; font-size: .88rem; font-weight: 600;
    background: white;
}
.cj-my-rank-pill strong { font-size: 1rem; }

/* Table layout */
.cj-lb-table { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; border: 1px solid var(--cj-border); }
.cj-lb-table-head {
    display: grid; grid-template-columns: 44px 1fr 1fr 110px;
    padding: 9px 16px; background: var(--cj-bg);
    font-size: .72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--cj-muted);
    border-bottom: 1px solid var(--cj-border);
}
.cj-lb-row {
    display: grid; grid-template-columns: 44px 1fr 1fr 110px;
    align-items: center; padding: 11px 16px;
    background: white; border-bottom: 1px solid var(--cj-border);
    text-decoration: none; color: inherit;
    transition: background .12s; cursor: pointer;
}
.cj-lb-row:last-child { border-bottom: none; }
.cj-lb-row:hover { background: var(--cj-bg); }
.cj-lb-row.cj-lb-me { background: #f5f3ff; }
.cj-lb-row.cj-lb-me:hover { background: #ede9fe; }
.cj-lbt-rank { font-size: 1rem; font-weight: 700; text-align: center; }
.cj-lbt-member { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cj-lb-avatar-img { border-radius: 50%; width: 34px; height: 34px; flex-shrink: 0; display: block; }
.cj-lbt-name { font-weight: 500; font-size: .85rem; color: var(--cj-text, #1a1a2e); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Header Member label inherits from .cj-lb-table-head (muted, uppercase, small) */
.cj-lb-you { font-style: normal; font-size: .75rem; color: var(--cj-accent); font-weight: 600; margin-left: 4px; }
.cj-lbt-badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Data row badge cell */
.cj-lb-row .cj-lbt-badge { font-size: .85rem; font-weight: 500; color: var(--cj-text, #1a1a2e); }
.cj-lbt-score { text-align: right; }
/* Data row score cell */
.cj-lb-row .cj-lbt-score { font-size: .85rem; font-weight: 500; color: var(--cj-accent, #6C63FF); }

/* Badge tiers */
.cj-lb-tiers { margin-top: 32px; }
.cj-lb-tiers-title { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
.cj-lb-tiers-list { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; border: 1px solid var(--cj-border); }
.cj-lb-tier-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: white; border-bottom: 1px solid var(--cj-border);
    font-size: .88rem;
}
.cj-lb-tier-row:last-child { border-bottom: none; }
.cj-lb-tier-name { font-weight: 600; }
.cj-lb-tier-pts  { color: var(--cj-accent); font-weight: 700; font-size: .82rem; }

/* ── Suggestions ── */
.cj-suggestions-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.cj-suggestions-toolbar h2 { margin:0; }
.cj-suggestions-list { display:flex; flex-direction:column; gap:16px; }
.cj-suggestion-item { background:white; border-radius:var(--cj-radius); padding:22px; box-shadow:var(--cj-shadow); }
.cj-suggestion-item-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.cj-suggestion-item-left { display:flex; gap:12px; align-items:flex-start; flex:1; }
.cj-suggestion-item-left img { border-radius:50%; width:36px; height:36px; flex-shrink:0; }
.cj-suggestion-item-title { font-weight:700; font-size:.97rem; }
.cj-suggestion-item-meta { font-size:.78rem; color:var(--cj-muted); }
.cj-suggestion-status { padding:4px 12px; border-radius:20px; font-size:.75rem; font-weight:700; white-space:nowrap; }
.cj-suggestion-item-body { color:var(--cj-muted); font-size:.9rem; line-height:1.6; margin-bottom:12px; }
.cj-suggestion-admin-reply {
    background:#f0fdf4; border-left:4px solid #2ecc71; padding:14px 18px;
    border-radius:8px; font-size:.88rem; margin-top:12px;
}

/* ── Auth Forms ── */
.cj-auth-wrap { min-height:60vh; display:flex; align-items:center; justify-content:center; padding:32px 16px; padding-bottom: max(32px, var(--cj-bottom-safe)); background:var(--cj-bg); }
.cj-auth-card { background:white; border-radius:20px; padding:40px; box-shadow:var(--cj-shadow); width:100%; max-width:440px; }
.cj-auth-logo { font-size:2.5rem; text-align:center; margin-bottom:12px; }
.cj-auth-card h2 { text-align:center; font-size:1.6rem; font-weight:800; margin:0 0 6px; }
.cj-auth-sub { text-align:center; color:var(--cj-muted); margin:0 0 28px; }
.cj-auth-card .login-form label { font-weight:600; font-size:.9rem; }
.cj-auth-card .login-form input[type=text],
.cj-auth-card .login-form input[type=password] {
    width:100%; border:1.5px solid var(--cj-border); border-radius:8px;
    padding:10px 14px; font-size:.95rem; margin-top:6px;
}
.cj-auth-card .login-form input[type=submit] {
    width:100%; background:var(--cj-accent); color:white; border:none;
    padding:12px; border-radius:8px; font-size:1rem; font-weight:700; cursor:pointer;
    margin-top:16px; transition:opacity .15s;
}
.cj-auth-card .login-form input[type=submit]:hover { opacity:.88; }
.cj-auth-switch { text-align:center; margin:18px 0 0; font-size:.88rem; color:var(--cj-muted); }
.cj-auth-switch a { color:var(--cj-accent); font-weight:600; }

/* ── Join Form ── */
.cj-join-wrap { max-width:600px; margin:0 auto; padding:32px 16px; padding-bottom: max(32px, var(--cj-bottom-safe)); }
.cj-join-card { border-radius:20px; overflow:hidden; box-shadow:var(--cj-shadow); background:white; }
.cj-join-header { padding:36px 32px; color:white; }
.cj-join-journey-tag { display:inline-block; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.4); color:white; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:3px 12px; border-radius:20px; margin-bottom:10px; }
.cj-join-title { font-size:1.6rem; font-weight:800; margin:0 0 6px; }
.cj-join-subtitle { opacity:.85; margin:0; }
.cj-join-body { padding:32px; }
.cj-join-already { text-align:center; padding:40px 32px; }
.cj-join-check { font-size:3rem; display:block; margin-bottom:14px; }
.cj-join-no-fields { color:var(--cj-muted); margin-bottom:20px; }

/* ── Forms ── */
.cj-form-field { margin-bottom:18px; }
.cj-label { display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; }
.cj-required { color:#e74c3c; margin-left:3px; }
.cj-input, .cj-select, .cj-textarea {
    width:100%; border:1.5px solid var(--cj-border); border-radius:8px;
    padding:10px 14px; font-size:.95rem; font-family:var(--cj-font);
    transition:border-color .15s; background:white;
}
.cj-input:focus, .cj-select:focus, .cj-textarea:focus {
    outline:none; border-color:var(--cj-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--cj-accent) 15%,transparent);
}
.cj-input-full { display:block; width:100%; margin-bottom:14px; }
.cj-radio-label { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1.5px solid var(--cj-border); border-radius:8px; cursor:pointer; margin-bottom:8px; font-size:.92rem; }
.cj-radio-label:hover { border-color:var(--cj-accent); }
.cj-form-msg { padding:12px 16px; border-radius:8px; font-size:.9rem; margin-bottom:16px; font-weight:600; }
.cj-form-msg.success { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.cj-form-msg.error   { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }

/* ── Dashboard ── */
.cj-dashboard { max-width:1000px; margin:0 auto; padding:32px 24px; padding-bottom: max(48px, var(--cj-bottom-safe)); }
.cj-dashboard-header { display:flex; align-items:center; gap:16px; margin-bottom:36px; background:white; padding:24px; border-radius:var(--cj-radius); box-shadow:var(--cj-shadow); }
.cj-dashboard-header img { border-radius:50%; width:72px; height:72px; }
.cj-dashboard-user { flex:1; }
.cj-dashboard-user h2 { margin:0 0 4px; font-size:1.3rem; }
.cj-dashboard-user p { margin:0; color:var(--cj-muted); font-size:.9rem; }
.cj-dashboard-section-title { font-size:1.1rem; font-weight:700; margin:0 0 16px; }
.cj-dashboard-communities { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; margin-bottom:32px; }
.cj-dashboard-community-card { background:white; border-radius:var(--cj-radius); padding:22px; box-shadow:var(--cj-shadow); display:flex; flex-direction:column; gap:14px; }
.cj-dashboard-comm-header { display:flex; justify-content:space-between; align-items:flex-start; }
.cj-dash-journey-tag { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; display:block; }
.cj-dashboard-comm-header h4 { margin:0; font-size:1rem; font-weight:700; }
.cj-dash-badge-icon { font-size:1.4rem; }
.cj-dash-score-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cj-dash-score { display:flex; align-items:baseline; gap:6px; }
.cj-dash-score-num { font-size:2rem; font-weight:800; }
.cj-dash-score-label { font-size:.8rem; color:var(--cj-muted); }
.cj-dash-next-badge { flex:1; text-align:right; font-size:.78rem; color:var(--cj-muted); }
.cj-dash-progress-bar { height:5px; background:#f0f0f0; border-radius:3px; margin-top:5px; overflow:hidden; }
.cj-dash-progress-fill { height:100%; border-radius:3px; transition:width .5s; }
.cj-dash-joined { font-size:.78rem; color:var(--cj-muted); }
.cj-dash-global-stats { display:flex; gap:20px; }
.cj-dash-stat { background:white; border-radius:var(--cj-radius); padding:20px 28px; box-shadow:var(--cj-shadow); text-align:center; flex:1; }
.cj-dash-stat-num { font-size:2rem; font-weight:800; color:var(--cj-accent); }
.cj-dash-stat-lbl { font-size:.85rem; color:var(--cj-muted); margin-top:4px; }

/* ── Modal ── */
.cj-modal {
    display:none; position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,.55); align-items:center; justify-content:center;
    padding:20px;
}
.cj-modal.cj-modal-open { display:flex; }
.cj-modal-inner { background:white; border-radius:20px; padding:32px; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.2); }
.cj-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.cj-modal-header h3 { margin:0; font-size:1.2rem; }
.cj-modal-close { background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--cj-muted); line-height:1; padding:4px; }
.cj-modal-note { font-size:.85rem; color:var(--cj-muted); margin-bottom:16px; }

/* ── Empty State ── */
.cj-empty-state { text-align:center; padding:64px 24px; color:var(--cj-muted); }
.cj-empty-icon { font-size:3.5rem; display:block; margin-bottom:16px; }
.cj-empty-state p { font-size:1rem; margin:0 0 20px; }
.cj-join-prompt { background:var(--cj-bg); padding:16px 20px; border-radius:8px; font-size:.9rem; text-align:center; }

/* ── Responsive ── */
@media(max-width:768px) {
    .cj-community-grid { grid-template-columns:1fr; padding:16px; }
    .cj-tab-content { padding:20px 16px; }
    .cj-tab-link { padding:10px 12px; font-size:.75rem; }
    .cj-tab-label { display:none; }
    .cj-feed-grid, .cj-challenges-grid, .cj-stories-grid { grid-template-columns:1fr; }
    .cj-dashboard-communities { grid-template-columns:1fr; }
    .cj-hero-content { padding:28px 20px; }
    .cj-poll-result-label { width:120px; font-size:.78rem; }
}

/* ══════════════════════════════════════════
   JOIN GATE
══════════════════════════════════════════ */
.cj-join-gate {
    position: relative;
    margin-top: 32px;
    border-radius: var(--cj-radius);
    overflow: hidden;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cj-join-gate-blur {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 0%, var(--cj-bg) 40%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.cj-join-gate-box {
    position: relative; z-index: 2;
    text-align: center;
    padding: 40px 32px;
    background: var(--cj-white);
    border-radius: var(--cj-radius);
    box-shadow: var(--cj-shadow);
    max-width: 480px;
    width: 100%;
    margin: 20px auto;
    border: 1px solid var(--cj-border);
}
.cj-join-gate-icon { font-size: 2.8rem; margin-bottom: 12px; display:block; }
.cj-join-gate-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 10px; }
.cj-join-gate-sub { color: var(--cj-muted); font-size: .9rem; margin: 0 0 22px; line-height: 1.6; }
.cj-join-gate-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* Locked poll options */
.cj-poll-option-locked {
    opacity: .5; cursor: not-allowed; pointer-events: none;
    justify-content: flex-start; gap: 10px;
}
.cj-poll-lock-icon { font-size: .9rem; }
.cj-poll-guest-preview { margin-bottom: 8px; }
.cj-suggestion-blurred { opacity: .45; pointer-events: none; user-select: none; }
.cj-suggestions-preview { position: relative; }

/* ══════════════════════════════════════════
   PREMIUM COMMUNITIES DASHBOARD
══════════════════════════════════════════ */
.cj-communities-dashboard { font-family:var(--cj-font,system-ui,sans-serif); }

/* ── Full-bleed hero: pull dashboard out of ANY theme content container ──
   Strategy: instead of the unreliable 100vw/-50vw trick (breaks when a
   scrollbar exists), we zero out the padding on every known theme wrapper
   for the communities listing page, then let .cj-comm-dash-hero carry its
   own full-width background with no horizontal padding.
   Selectors cover: Astra, Elessi (NsTheme), GeneratePress, OceanWP,
   Storefront, Twenty-Twenty-*, and generic .entry-content containers. */

/* Zero the content-column padding on the communities page */
body.cj-shortcode-page .site-content .container,
body.cj-shortcode-page .site-content .container-fluid,
body.cj-shortcode-page #page .container,
body.cj-shortcode-page #page .container-fluid,
/* Elessi / NsTheme specific */
body.cj-shortcode-page .ns-col,
body.cj-shortcode-page .ns-container,
body.cj-shortcode-page #ns-page-wrap .container,
body.cj-shortcode-page #ns-page-wrap .ns-col,
body.cj-shortcode-page .elessi-page-wrapper,
body.cj-shortcode-page #elessi-main-content,
body.cj-shortcode-page .page-wrapper,
body.cj-shortcode-page #wrap,
body.cj-shortcode-page .wrap {
    padding-left:  0 !important;
    padding-right: 0 !important;
    margin-left:   0 !important;
    margin-right:  0 !important;
    max-width:     100% !important;
    width:         100% !important;
}

.cj-communities-dashboard {
    /* Natural width — DO NOT set large negative margins here.
       That creates a 19998px wide box which collapses Elessi's layout engine
       and produces a white page. Full-bleed is achieved on the hero itself. */
    width: 100%;
    max-width: 100%;
}

/* Hero */
.cj-comm-dash-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 64px 0;
    position: relative;
    overflow: hidden;
    /* Full-width: relies on PHP zeroing ancestor padding (class-cj-public.php).
       No margin tricks here — they cause white pages when ancestors have
       overflow:hidden or the containing block is not the viewport. */
}
/* Logo — top-left inside the banner, no separate bar, no overlap */
.cj-comm-dash-logo-wrap {
    position:absolute;
    top:8px;        /* tight to the banner top edge */
    left:24px;      /* matches .cj-comm-dash-hero-inner padding so logo aligns with content */
    z-index:2;
    line-height:0;
}
/* The logo links to homepage — strip link decoration */
.cj-comm-dash-logo-wrap a {
    display:inline-block;
    line-height:0;
    text-decoration:none;
    outline-offset:3px;
}
.cj-comm-dash-logo {
    /* Height is enforced via inline style + scoped <style> block output by PHP.
       Do NOT set height here — it must not compete with those rules. */
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 1px 4px rgba(0,0,0,.3));
    transition:opacity .15s ease;
}
.cj-comm-dash-logo-wrap a:hover .cj-comm-dash-logo,
.cj-comm-dash-logo-wrap a:focus .cj-comm-dash-logo { opacity:.82; }
/* Push hero body content below the logo so they never overlap.
   --cj-logo-pt = top(8px) + logo-height + gap(10px), set inline by PHP.
   Fallback 70px = 8 + 52(default) + 10. */
.cj-comm-dash-hero:has(.cj-comm-dash-logo-wrap) {
    padding-top:var(--cj-logo-pt, 70px);
}
.cj-comm-dash-hero-inner { max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap; }
.cj-comm-dash-hero-text { flex:1;min-width:280px; }
.cj-comm-dash-eyebrow { font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);display:block;margin-bottom:12px; }
.cj-comm-dash-hero-text h1 { font-size:clamp(1.8rem,4vw,3rem);font-weight:900;color:#fff;margin:0 0 18px;line-height:1.15;letter-spacing:-.02em; }
.cj-comm-dash-hero-text p { color:rgba(255,255,255,.72);font-size:1.1rem;margin:0 0 28px;max-width:500px;line-height:1.65; }
.cj-comm-dash-hero-ctas { display:flex;gap:12px;flex-wrap:wrap; }
.cj-btn-ghost { background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.25);backdrop-filter:blur(6px); }
.cj-btn-ghost:hover { background:rgba(255,255,255,.2); }
.cj-comm-dash-hero-stats { display:flex;gap:32px;flex-wrap:wrap; }
.cj-comm-dash-stat { text-align:center; }
.cj-comm-dash-stat-num { display:block;font-size:2.8rem;font-weight:900;color:#fff;line-height:1;text-shadow:0 0 24px rgba(108,99,255,.7),0 2px 8px rgba(0,0,0,.4); }
.cj-comm-dash-stat-lbl { display:block;font-size:.78rem;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.08em;margin-top:6px; }

/* Section */
.cj-comm-section { max-width:1200px;margin:48px auto 0;padding:0 24px; }
.cj-comm-section-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:24px; }
.cj-comm-section-header h2 { font-size:1.35rem;font-weight:800;margin:0; }
.cj-comm-section-link { font-size:.88rem;font-weight:600;color:var(--cj-accent,#6C63FF);text-decoration:none; }
.cj-comm-count { font-size:.88rem;color:#64748b;background:#f1f5f9;padding:4px 12px;border-radius:20px; }
.cj-comm-all-joined { color:#64748b;font-style:italic; }

/* Premium Card */
.cj-comm-premium-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;padding-bottom:48px; }
.cj-pcard {
    background:#fff;border-radius:20px;overflow:hidden;
    box-shadow:0 4px 24px rgba(0,0,0,.08);
    transition:transform .22s,box-shadow .22s;
    border:1px solid rgba(0,0,0,.06);
    display:flex;flex-direction:column;
}
.cj-pcard:hover { transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cj-pcard-banner { height:180px;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:16px; }
.cj-pcard-banner-overlay { position:absolute;inset:0; }
.cj-pcard-banner-top,.cj-pcard-banner-bottom { position:relative;z-index:1; }
.cj-pcard-banner-top { display:flex;justify-content:space-between;align-items:flex-start; }
.cj-pcard-type-badge { display:inline-block;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:20px; }
.cj-pcard-member-badge { background:rgba(255,255,255,.9);color:#1a1a2e;font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:20px; }
.cj-pcard-title { font-size:1.3rem;font-weight:800;color:#fff;margin:0;line-height:1.25; }
.cj-pcard-body { padding:22px;flex:1;display:flex;flex-direction:column;gap:14px; }
.cj-pcard-excerpt { color:#475569;font-size:.88rem;line-height:1.55;margin:0;flex:1; }
.cj-pcard-members { display:flex;align-items:center;gap:10px; }
.cj-pcard-avatars { display:flex; }
.cj-pcard-avatar { width:28px;height:28px;border-radius:50%;border:2px solid #fff;margin-left:-8px;object-fit:cover; }
.cj-pcard-avatars .cj-pcard-avatar:first-child { margin-left:0; }
.cj-pcard-member-count { font-size:.82rem;color:#64748b;font-weight:600; }
.cj-pcard-my-score { display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:10px;border:1px solid;background:#fafbff; }
.cj-pcard-badge-label { font-size:.82rem;font-weight:600; }
.cj-pcard-score { font-size:1.1rem;font-weight:800; }
.cj-pcard-actions { display:flex;gap:10px;margin-top:auto; }
.cj-pcard-explore { flex:0;white-space:nowrap;font-size:.85rem;padding:9px 16px; }
.cj-pcard-join { flex:1;text-align:center;color:#fff;font-size:.9rem;font-weight:700;padding:10px 16px; }


/* ══════════════════════════════════════════════════════════════
   COMMUNITIES LISTING — SALES PITCH SECTIONS
   Sections: Why Join · Quiz Spheres · How It Works · Features · Proof
   All live inside .cj-communities-dashboard
   Design tokens:
     --lp-ink:   #0f1729   deep navy text
     --lp-sub:   #475569   slate body
     --lp-acc:   #6C63FF   purple accent (existing)
     --lp-gold:  #F59E0B   warm gold (quiz CTA)
     --lp-green: #10B981   emerald checks
     --lp-bg:    #F8F9FF   off-white section bg
     --lp-dark:  #0f1729   dark section bg
══════════════════════════════════════════════════════════════ */

/* ── Shared layout ── */
.cj-lp-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.cj-lp-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6C63FF;
    background: #ede9fe;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 18px;
}
.cj-lp-eyebrow--gold { color: #92400e; background: #fef3c7; }
.cj-lp-h2 {
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 900;
    color: #0f1729;
    margin: 0 0 16px;
    line-height: 1.15;
    letter-spacing: -.025em;
}
.cj-lp-h2--light { color: #fff; }
.cj-lp-lead {
    font-size: 1.1rem;
    color: #475569;
    max-width: 640px;
    line-height: 1.7;
    margin: 0 0 28px;
}
.cj-lp-lead--muted { color: rgba(255,255,255,.65); }

/* ── ① WHY JOIN ── */
.cj-lp-why {
    background: #F8F9FF;
    padding: 48px 0 44px;
}
.cj-lp-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}
.cj-lp-benefit {
    background: #fff;
    border-radius: 18px;
    padding: 28px 26px;
    border: 1px solid #e8edf6;
    transition: box-shadow .2s, transform .2s;
}
.cj-lp-benefit:hover {
    box-shadow: 0 12px 40px rgba(108,99,255,.1);
    transform: translateY(-4px);
}
.cj-lp-benefit-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: 14px;
}
.cj-lp-benefit h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f1729;
    margin: 0 0 8px;
}
.cj-lp-benefit p {
    font-size: .95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ── ② WHAT HAPPENS INSIDE ── */
.cj-lp-inside {
    background: #F8F9FF;          /* light bg — cards are white, so they pop */
    padding: 48px 0 44px;
}
.cj-lp-inside-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 52px;
}
/* Premium card — white, elevated, coloured top accent bar */
.cj-lp-inside-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e8edf6;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    padding: 28px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: transform .22s, box-shadow .22s;
}
.cj-lp-inside-card::before {
    /* coloured top accent strip */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--ic-color, #6C63FF);
    border-radius: 20px 20px 0 0;
}
.cj-lp-inside-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,.12);
}
/* Icon pill */
.cj-lp-inside-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #f0eeff; /* fallback; overridden per-card via inline style */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    flex-shrink: 0;
}
.cj-lp-inside-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cj-lp-inside-body strong {
    display: block;
    color: #0f1729;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
}
.cj-lp-inside-body p {
    color: #64748b;
    font-size: .92rem;
    margin: 0;
    line-height: 1.6;
}
.cj-lp-inside-cta {
    text-align: center;
}
.cj-btn-gold {
    background: #F59E0B;
    color: #1c0a00;
    font-weight: 800;
    padding: 14px 36px;
    border-radius: 40px;
    font-size: 1.05rem;
    display: inline-block;
    text-decoration: none;
    transition: background .15s, transform .15s;
    box-shadow: 0 4px 20px rgba(245,158,11,.4);
}
.cj-btn-gold:hover { background: #fbbf24; transform: translateY(-2px); }

/* ── ③ HOW IT WORKS ── */
.cj-lp-how {
    background: #fff;
    padding: 48px 0 44px;
}
.cj-lp-steps {
    display: flex;
    align-items: flex-start;
    gap: 0;
    flex-wrap: wrap;
}
.cj-lp-step {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cj-lp-step-num {
    font-size: 3.5rem;
    font-weight: 900;
    color: #a5b4fc;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.cj-lp-step-body h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f1729;
    margin: 0 0 8px;
}
.cj-lp-step-body p {
    font-size: .95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
    max-width: 260px;
}
.cj-lp-step-arrow {
    font-size: 1.6rem;
    color: #d4d0ff;
    padding: 48px 20px 0;
    flex-shrink: 0;
    align-self: flex-start;
}
@media (max-width: 640px) {
    .cj-lp-step-arrow { display: none; }
    .cj-lp-steps { gap: 32px; }
}

/* ── ④ FEATURE CARDS ── */
.cj-lp-features {
    background: #F8F9FF;
    padding: 48px 0 44px;
}
.cj-lp-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}
.cj-lp-feature-card {
    background: #fff;
    border-radius: 18px;
    padding: 30px 26px;
    border: 1px solid #e8edf6;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow .2s, transform .2s;
}
.cj-lp-feature-card:hover {
    box-shadow: 0 10px 36px rgba(0,0,0,.08);
    transform: translateY(-4px);
}
.cj-lp-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.cj-lp-feature-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f1729;
    margin: 0;
}
.cj-lp-feature-card p {
    font-size: .93rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ── ⑤ PROOF STRIP ── */
.cj-lp-proof {
    background: linear-gradient(90deg, #0f1729 0%, #1e1065 100%);
    padding: 52px 0;
}
.cj-lp-proof-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.cj-lp-proof-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    flex: 1;
    min-width: 140px;
}
.cj-lp-proof-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    letter-spacing: -.03em;
}
.cj-lp-proof-stat span:last-child {
    font-size: .78rem;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    max-width: 140px;
}
.cj-lp-proof-divider {
    width: 1px;
    height: 48px;
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .cj-lp-proof-divider { display: none; }
    .cj-lp-proof-inner { gap: 32px; }
    .cj-lp-proof-stat { min-width: calc(50% - 16px); }
}

/* ── Scroll link ── */
.cj-lp-scroll-btn { scroll-behavior: smooth; }

/* ── Community grid section heading update ── */
.cj-comm-section { scroll-margin-top: 24px; }

/* ══════════════════════════════════════════
   RESOURCES TAB
══════════════════════════════════════════ */
.cj-resources-toolbar { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px; }
.cj-resources-subtitle { color:var(--cj-muted);font-size:.88rem;margin:4px 0 0; }
.cj-resource-filters { display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px; }
.cj-rf-btn { display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:20px;border:2px solid;font-size:.82rem;font-weight:700;cursor:pointer;text-decoration:none;transition:all .15s; }
.cj-rf-btn:hover { opacity:.85; }
.cj-resources-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px; }
.cj-resource-card { background:var(--cj-white,#fff);border-radius:var(--cj-radius,14px);box-shadow:var(--cj-shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s; }
.cj-resource-card:hover { transform:translateY(-3px); }
.cj-resource-card-header { display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:.82rem; }
.cj-resource-type-icon { font-size:1.4rem; }
.cj-resource-type-name { font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase; }
.cj-resource-member-tag { margin-left:auto;background:#ede9fe;color:#6C63FF;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:12px; }
.cj-resource-card-body { padding:14px 16px;flex:1; }
.cj-resource-title { font-size:.97rem;font-weight:700;margin:0 0 8px; }
.cj-resource-desc { color:var(--cj-muted);font-size:.82rem;line-height:1.45;margin:0 0 8px; }
.cj-resource-meta { font-size:.75rem;color:var(--cj-muted); }
.cj-resource-card-footer { padding:12px 16px;border-top:1px solid var(--cj-border,#e2e8f0); }
.cj-resources-pending { margin-top:32px;padding:20px;background:#fff3cd;border-radius:10px; }
.cj-resources-pending h3 { margin:0 0 14px;font-size:1rem; }
.cj-resource-pending-row { display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #ffe69c;flex-wrap:wrap; }

/* ══════════════════════════════════════════
   EVENTS TAB
══════════════════════════════════════════ */
.cj-events-toolbar { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px; }
.cj-events-subtitle { color:var(--cj-muted);font-size:.88rem;margin:4px 0 0; }
.cj-events-section-title { font-size:1.05rem;font-weight:700;margin:0 0 18px; }
.cj-events-list,.cj-events-section { display:flex;flex-direction:column;gap:20px; }
.cj-event-card { background:var(--cj-white,#fff);border-radius:var(--cj-radius,14px);box-shadow:var(--cj-shadow);overflow:hidden;transition:transform .15s; }
.cj-event-card:hover { transform:translateY(-2px); }
.cj-event-card.cj-event-past { opacity:.7; }
.cj-event-banner { height:140px;background-size:cover;background-position:center; }
.cj-event-card-body { display:flex;gap:20px;padding:22px; }
.cj-event-date-block { flex-shrink:0;width:72px;text-align:center;padding:12px 8px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.cj-event-day { font-size:1.8rem;font-weight:900;line-height:1; }
.cj-event-month { font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em; }
.cj-event-year { font-size:.72rem;color:var(--cj-muted); }
.cj-event-info { flex:1;min-width:0; }
.cj-event-type-tag { font-size:.75rem;font-weight:700;color:var(--cj-muted);margin-bottom:6px; }
.cj-event-title { font-size:1.1rem;font-weight:800;margin:0 0 8px; }
.cj-event-meta-row { display:flex;flex-wrap:wrap;gap:12px;font-size:.82rem;color:var(--cj-muted);margin-bottom:8px; }
.cj-event-desc { font-size:.88rem;color:var(--cj-muted);line-height:1.5;margin:0 0 14px; }
.cj-event-actions { display:flex;gap:10px;flex-wrap:wrap; }
.cj-rsvp-btn {
    transition: all .2s;
    background: transparent;
    border: 2px solid var(--cj-accent, #6C63FF);
    color: var(--cj-accent, #6C63FF);
    font-weight: 600;
}
.cj-rsvp-btn.cj-rsvp-going {
    background: var(--cj-accent, #6C63FF);
    color: #fff;
    border-color: var(--cj-accent, #6C63FF);
}
.cj-rsvp-btn:hover:not(.cj-rsvp-going) {
    background: var(--cj-accent, #6C63FF) !important;
    border-color: var(--cj-accent, #6C63FF) !important;
    color: #fff !important;
    opacity: 1;
}
.cj-events-past-list { display:flex;flex-direction:column;gap:1px; }
.cj-event-past-row { display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--cj-white,#fff);border-radius:8px;font-size:.88rem; }
.cj-event-past-date { color:var(--cj-muted);width:100px;flex-shrink:0; }
.cj-event-past-title { flex:1;font-weight:600; }
.cj-event-past-rsvp { color:var(--cj-muted);font-size:.8rem; }
.cj-modal-wide { max-width:680px; }
.cj-form-row-2 { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:0; }
@media(max-width:600px){ .cj-form-row-2 { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════
   NESTED REPLIES
══════════════════════════════════════════ */
.cj-reply-item { display:flex;gap:14px;background:var(--cj-white,#fff);border-radius:10px;padding:18px 20px;box-shadow:0 2px 8px rgba(0,0,0,.05);margin-bottom:10px;position:relative; }
.cj-reply-nested { background:#f8faff;box-shadow:none;border:1px solid var(--cj-border,#e2e8f0); }
.cj-reply-deep { background:#f0f4ff; }
.cj-reply-nested-line { position:absolute;left:-22px;top:0;bottom:0;width:3px;border-radius:3px; }
.cj-reply-to-btn { background:none;border:none;color:var(--cj-muted);font-size:.78rem;font-weight:700;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .1s;margin-left:4px; }
.cj-reply-to-btn:hover { background:var(--cj-bg,#f8f9ff);color:var(--cj-accent,#6C63FF); }
.cj-inline-reply-form { margin-top:12px; }
.cj-inline-reply-inner { background:var(--cj-bg,#f8f9ff);border-radius:10px;padding:14px; }
.cj-replying-to { font-size:.78rem;font-weight:700;color:var(--cj-accent,#6C63FF);display:block;margin-bottom:8px; }
.cj-inline-reply-actions { display:flex;gap:8px;margin-top:10px; }
.cj-child-replies { margin-top:8px; }
.cj-reply-form-header { display:flex;align-items:center;gap:12px;margin-bottom:12px; }
.cj-reply-form-header img { border-radius:50%; }
.cj-admin-tag { display:inline-block;background:var(--cj-accent,#6C63FF);color:#fff;font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.04em; }
.cj-thread-row-excerpt { font-size:.82rem;color:var(--cj-muted);margin:4px 0 0;line-height:1.4; }
.cj-reply-count-link { text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:2px; }
.cj-reply-count-label { font-size:.68rem;color:var(--cj-muted); }

@media(max-width:640px){
    .cj-comm-premium-grid { grid-template-columns:1fr; }
    .cj-event-card-body { flex-direction:column;gap:12px; }
    .cj-event-date-block { flex-direction:row;width:auto;gap:8px; }
    .cj-resources-grid { grid-template-columns:1fr; }
}

/* ── Reply action row (separate from reaction bar to avoid event collision) ── */
.cj-reply-action-row {
    margin-top: 6px;
    display: flex;
    align-items: center;
}
.cj-reply-to-btn {
    background: none;
    border: none;
    color: var(--cj-muted, #64748b);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background .1s, color .1s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cj-reply-to-btn:hover {
    background: var(--cj-bg, #f8f9ff);
    color: var(--cj-accent, #6C63FF);
}

/* ══════════════════════════════════════════
   VERTICAL TAB LAYOUT
══════════════════════════════════════════ */
.cj-community-page.cj-layout-vertical .cj-tabs-nav { display: none; } /* hide old horizontal nav if present */

.cj-community-body {
    display: flex;
    align-items: flex-start;
    gap: 0;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 600px;
}

/* Sidebar */
.cj-vertical-sidebar {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 48px;
    background: var(--cj-white, #fff);
    border-right: 1px solid var(--cj-border, #e2e8f0);
    min-height: 100%;
    padding: 16px 0;
}

.cj-vertical-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px;
}

.cj-vnav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--cj-muted, #64748b);
    font-size: 1rem;
    font-weight: 600;
    transition: background .15s, color .15s;
    position: relative;
    cursor: pointer;
}
.cj-vnav-link:hover {
    background: var(--cj-bg, #f8f9ff);
    color: var(--cj-accent, #6C63FF);
}
.cj-vnav-active {
    background: color-mix(in srgb, var(--vnav-accent, #6C63FF) 10%, transparent) !important;
    color: var(--vnav-accent, #6C63FF) !important;
}
.cj-vnav-icon  { font-size: 1.25rem; flex-shrink: 0; }
.cj-vnav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cj-vnav-indicator {
    width: 4px;
    height: 60%;
    border-radius: 2px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.cj-vnav-divider {
    height: 1px;
    background: var(--cj-border, #e2e8f0);
    margin: 10px 4px;
}
/* Explore Communities link — inherits all vnav-link styles including font-size */
.cj-vnav-explore {
    color: var(--cj-muted, #64748b);
}
.cj-vnav-explore:hover { color: var(--cj-accent, #6C63FF); }

/* Main content area */
.cj-vertical-content {
    flex: 1;
    min-width: 0;
    padding: 28px 28px 48px;
    padding-bottom: max(48px, var(--cj-bottom-safe));
}

/* ── Collapsible Replies ── */
.cj-share-experience-wrap {
    background: var(--cj-white, #fff);
    border-radius: var(--cj-radius, 14px);
    padding: 24px;
    box-shadow: var(--cj-shadow);
    margin-bottom: 28px;
    border-left: 4px solid var(--cj-accent, #6C63FF);
}
.cj-share-exp-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.cj-share-exp-header img { border-radius: 50%; flex-shrink: 0; }
.cj-share-exp-header h4  { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; }
.cj-share-exp-hint       { font-size: .82rem; color: var(--cj-muted, #64748b); margin: 0; }
.cj-share-exp-actions    { margin-top: 12px; display: flex; gap: 10px; }

.cj-replies-section { margin-top: 8px; }

.cj-replies-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--cj-white, #fff);
    border: 1px solid var(--cj-border, #e2e8f0);
    border-radius: var(--cj-radius, 14px);
    padding: 14px 20px;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 700;
    color: var(--cj-text, #1a1a2e);
    text-align: left;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: background .15s;
    margin-bottom: 0;
}
.cj-replies-toggle:hover { background: var(--cj-bg, #f8f9ff); }
.cj-replies-toggle-icon {
    font-size: 1rem;
    transition: transform .2s;
    color: var(--cj-accent, #6C63FF);
    display: inline-block;
}
.cj-replies-toggle.cj-collapsed .cj-replies-toggle-icon { transform: rotate(-90deg); }
.cj-replies-toggle-hint { font-size: .75rem; color: var(--cj-muted, #64748b); margin-left: auto; font-weight: 400; }

.cj-replies-collapsible {
    overflow: hidden;
    transition: none; /* JS handles the animation */
    padding-top: 12px;
}

/* ── Dashboard Explore CTA ── */
.cj-dash-explore-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 32px;
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--cj-accent, #6C63FF)11, var(--cj-accent, #6C63FF)05);
    border: 1px solid var(--cj-accent, #6C63FF)33;
    border-radius: var(--cj-radius, 14px);
    flex-wrap: wrap;
}
.cj-dash-explore-text h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; }
.cj-dash-explore-text p  { margin: 0; font-size: .88rem; color: var(--cj-muted, #64748b); }

/* ════════════════════════════════════════
   Distraction-free top bar
════════════════════════════════════════ */
.cj-df-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: none; /* hidden on desktop — sidebar always visible */
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 46px;
    background: #fff;
    border-bottom: 1px solid var(--cj-border, #e2e8f0);
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
/* .cj-df-back moved into sidebar — see .cj-sidebar-back-link */
.cj-df-community-name {
    flex: 1;
    font-size: .95rem;
    font-weight: 700;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
/* Hamburger toggle — hidden on desktop */
.cj-df-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: background .15s;
    flex-shrink: 0;
}
.cj-df-menu-toggle:hover { background: var(--cj-bg, #f8f9ff); }
.cj-df-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}
.cj-df-hamburger span {
    display: block;
    height: 2px;
    background: #374151;
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
    transform-origin: center;
}
.cj-toggle-active .cj-df-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cj-toggle-active .cj-df-hamburger span:nth-child(2) { opacity: 0; }
.cj-toggle-active .cj-df-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Sidebar overlay (mobile only) */
.cj-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,.5);
    opacity: 0;
    transition: opacity .25s;
}
.cj-sidebar-overlay.cj-overlay-visible {
    display: block;
    opacity: 1;
}

/* ════════════════════════════════════════
   MOBILE: Slide-in sidebar + all fixes
   (single authoritative block — no other
    @media 768px blocks should exist below)
════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Topbar: show on mobile ── */
    .cj-df-topbar       { display: flex !important; }
    .cj-df-menu-toggle  { display: flex !important; align-items: center; justify-content: center; }

    /* ── Sidebar back-wrap: visible on mobile ── */
    .cj-sidebar-back-wrap {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 12px 14px 10px;
        border-bottom: 1px solid var(--cj-border, #e2e8f0);
        margin-bottom: 4px;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 1;
    }

    /* ── Slide-in sidebar ── */
    .cj-community-body  { flex-direction: row !important; }
    .cj-vertical-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100dvh !important;
        width: 290px !important;
        min-width: unset !important;
        z-index: 9999 !important;
        transform: translateX(-100%) !important;
        transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-top: 0 !important;
        box-shadow: 6px 0 30px rgba(0,0,0,.22) !important;
        border-right: none !important;
        background: #fff !important;
    }
    .cj-vertical-sidebar.cj-sidebar-open {
        transform: translateX(0) !important;
    }

    /* ── Nav labels: always visible in drawer ── */
    .cj-vnav-label     { display: block !important; }
    .cj-vnav-indicator { display: block !important; }
    .cj-vnav-divider   { display: block !important; }
    .cj-vnav-link      { padding: 14px 16px !important; font-size: 1.05rem !important; gap: 12px !important; border-radius: 10px !important; }

    /* ── Content: full width ── */
    .cj-vertical-content { padding: 16px !important; padding-bottom: max(80px, var(--cj-bottom-safe)) !important; width: 100% !important; }
    .cj-dash-explore-cta { flex-direction: column; text-align: center; }

    /* ── FIX 1: Replies toggle visible ── */
    .cj-replies-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: .88rem !important;
        padding: 12px 14px !important;
        width: 100% !important;
    }
    .cj-replies-toggle-label,
    .cj-replies-toggle-hint { display: inline !important; }

    /* ── FIX 2: Share bar & copy link ── */
    .cj-card-share-bar,
    .cj-story-share    { display: flex !important; flex-wrap: wrap; gap: 6px; align-items: center; }
    .cj-share-btn      { display: inline-flex !important; width: 28px !important; height: 28px !important; font-size: .75rem !important; }
    .cj-share-copy-text {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: 28px !important;
        padding: 0 8px !important;
        font-size: .7rem !important;
        color: var(--cj-accent, #6C63FF) !important;
        border: 1.5px solid var(--cj-accent, #6C63FF) !important;
        background: #fff !important;
    }

    /* ── FIX 3: Edit Profile not overlapping ── */
    .cj-profile-header-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    #cj-edit-profile-btn {
        margin-left: 0 !important;
        align-self: flex-start;
        width: auto;
    }

    /* ── Misc mobile tidying ── */
    .cj-bulk-delete-bar  { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
    /* ── Bottom sticky menu clearance — mobile ── */
    /* Adds breathing room so theme's sticky bottom nav
       never hides the last item on any plugin page.      */
    .cj-vertical-content,
    .cj-auth-wrap,
    .cj-join-wrap,
    .cj-dashboard,
    .cj-communities-list,
    .cj-replies-list,
    .cj-thread-view,
    .cj-comm-premium-grid,
    .cj-stories-grid,
    .cj-events-list,
    .cj-resources-list,
    .cj-leaderboard-wrap,
    .cj-polls-list,
    .cj-challenges-list,
    .cj-suggestions-list,
    .cj-feed-list,
    .cj-announcements-list {
        padding-bottom: max(80px, var(--cj-bottom-safe)) !important;
    }

    /* Shortcode pages: the entry-content wrapper also needs clearance */
    body.cj-shortcode-page #main,
    body.cj-shortcode-page .entry-content,
    body.cj-shortcode-page .page-content {
        padding-bottom: max(80px, var(--cj-bottom-safe)) !important;
    }

    /* Sidebar: let it scroll past the bottom bar */
    .cj-vertical-sidebar {
        padding-bottom: max(80px, var(--cj-bottom-safe)) !important;
    }


    .cj-admin-delete-reply,
    .cj-admin-delete-thread-btn { font-size: .7rem; padding: 3px 8px; }
}

/* Distraction-free: body padding when admin bar present */
.admin-bar .cj-df-topbar { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .cj-df-topbar { top: 46px; }
    .admin-bar .cj-vertical-sidebar { padding-top: 92px; }
}

/* Thread like count on list */
.cj-thread-like-count {
    font-size: .8rem;
    color: var(--cj-muted, #64748b);
    margin-top: 4px;
    display: block;
}

/* Collapsed state: icon points right ▶ */
.cj-replies-toggle.cj-collapsed .cj-replies-toggle-icon {
    transform: rotate(-90deg);
}
/* Expanded state: icon points down ▾ (default, no rotation needed) */
.cj-replies-toggle:not(.cj-collapsed) .cj-replies-toggle-icon {
    transform: rotate(0deg);
}

/* ══════════════════════════════════════════
   HABIT TRACKER CHALLENGE CARDS
══════════════════════════════════════════ */
.cj-challenges-tracker {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.cj-challenge-tracker-card {
    background: var(--cj-white, #fff);
    border-radius: var(--cj-radius, 14px);
    box-shadow: var(--cj-shadow);
    padding: 24px 28px;
    border-left: 5px solid var(--cj-accent, #6C63FF);
    transition: box-shadow .2s;
    position: relative;
    overflow: hidden;
}
.cj-challenge-tracker-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.12); }
.cj-challenge-tracker-card.cj-challenge-fully-done {
    border-left-color: #2ecc71;
    background: #f0fdf4;
}

/* Header row */
.cj-ct-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.cj-ct-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cj-ct-freq-badge {
    font-size: .78rem; font-weight: 700; padding: 3px 12px;
    border-radius: 20px; letter-spacing: .04em;
}
.cj-ct-dates { font-size: .8rem; color: var(--cj-muted, #64748b); }
.cj-ct-points-badge {
    font-size: .8rem; font-weight: 700; color: #fff;
    padding: 4px 12px; border-radius: 20px; white-space: nowrap;
}
.cj-ct-title { font-size: 1.15rem; font-weight: 800; margin: 0 0 8px; }
.cj-ct-desc  { font-size: .88rem; color: var(--cj-muted, #64748b); line-height: 1.55; margin: 0 0 16px; }

/* Progress bar */
.cj-ct-progress-wrap { margin-bottom: 20px; }
.cj-ct-progress-bar-bg {
    height: 10px; background: var(--cj-border, #e2e8f0);
    border-radius: 6px; overflow: hidden; margin-bottom: 6px;
}
.cj-ct-progress-bar-fill {
    height: 100%; border-radius: 6px;
    transition: width .5s cubic-bezier(.4,0,.2,1);
}
.cj-ct-progress-label { font-size: .8rem; color: var(--cj-muted, #64748b); font-weight: 600; }

/* ── Habit Grid ── */
.cj-habit-tracker { margin-bottom: 20px; }
.cj-habit-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.cj-habit-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-height: 52px;
    border-radius: 10px;
    border: 2px solid var(--cj-border, #e2e8f0);
    background: var(--cj-bg, #f8f9ff);
    cursor: default;
    transition: transform .15s, box-shadow .15s;
    position: relative;
    gap: 2px;
}
.cj-habit-cell-label {
    font-size: .62rem; font-weight: 700;
    color: var(--cj-muted, #64748b);
    text-align: center; line-height: 1.1;
    letter-spacing: -.01em;
}
.cj-habit-cell-icon { font-size: 1.1rem; line-height: 1; }

/* States */
.cj-habit-done {
    background: #dcfce7 !important;
    border-color: #22c55e !important;
    box-shadow: 0 2px 8px rgba(34,197,94,.2);
}
.cj-habit-done .cj-habit-cell-icon    { color: #16a34a; font-weight: 900; }
.cj-habit-done .cj-habit-cell-label   { color: #15803d; }

.cj-habit-current {
    background: var(--cj-white, #fff) !important;
    border-color: var(--cj-accent, #6C63FF) !important;
    border-width: 2px;
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--cj-accent,#6C63FF) 18%,transparent);
}
.cj-habit-current .cj-habit-cell-icon  { color: var(--cj-accent, #6C63FF); }
.cj-habit-current .cj-habit-cell-label { color: var(--cj-accent, #6C63FF); font-weight: 800; }

.cj-habit-missed {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    opacity: .75;
}
.cj-habit-missed .cj-habit-cell-icon  { color: #dc2626; }
.cj-habit-missed .cj-habit-cell-label { color: #dc2626; }

.cj-habit-future {
    opacity: .45;
}
.cj-habit-future .cj-habit-cell-icon { color: var(--cj-muted, #64748b); }

/* Legend */
.cj-habit-legend {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: .75rem; font-weight: 600;
}
.cj-habit-leg { display: flex; align-items: center; gap: 4px; color: var(--cj-muted, #64748b); }
.cj-habit-leg.cj-habit-done   { color: #16a34a; }
.cj-habit-leg.cj-habit-current{ color: var(--cj-accent, #6C63FF); }
.cj-habit-leg.cj-habit-missed { color: #dc2626; }

/* Action area */
.cj-ct-action { margin-top: 8px; }
.cj-ct-fully-done-badge {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 18px; background: #dcfce7;
    border-radius: 10px; font-weight: 700; color: #15803d; font-size: .95rem;
}
.cj-ct-pts-earned {
    background: #22c55e; color: #fff;
    padding: 3px 12px; border-radius: 20px; font-size: .82rem;
}
.cj-ct-checking {
    color: #2ecc71; font-weight: 700; font-size: .9rem;
    padding: 10px 0;
}
.cj-ct-not-yet {
    color: var(--cj-muted, #64748b); font-size: .88rem; padding: 10px 0;
}

/* Celebrate animation when fully completed */
@keyframes cj-celebrate-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
    70%  { box-shadow: 0 0 0 20px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.cj-celebrate { animation: cj-celebrate-pulse .8s ease-out 2; }

@media (max-width: 640px) {
    .cj-challenge-tracker-card { padding: 18px 16px; }
    .cj-habit-cell { width: 44px; min-height: 44px; border-radius: 8px; }
    .cj-habit-cell-label { font-size: .58rem; }
    .cj-habit-cell-icon { font-size: .95rem; }
}

/* Progress row — label + % side by side */
.cj-ct-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}
.cj-ct-progress-label { font-size: .82rem; color: var(--cj-muted,#64748b); font-weight: 600; }
.cj-ct-progress-pct   { font-size: .82rem; color: var(--cj-accent,#6C63FF); font-weight: 700; }

/* ══════════════════════════════════════════
   SIDEBAR MEMBER CARD
══════════════════════════════════════════ */
.cj-sidebar-member-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 14px 10px;
}
.cj-smc-avatar { flex-shrink: 0; }
.cj-smc-photo  {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--cj-accent,#6C63FF);
    display: block;
}
.cj-smc-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cj-smc-name {
    font-size: .9rem;
    font-weight: 800;
    color: var(--cj-text,#1a1a2e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
.cj-smc-badge {
    font-size: .78rem;
    font-weight: 700;
}
.cj-smc-score {
    font-size: .72rem;
    color: var(--cj-muted,#64748b);
}
.cj-smc-progress {
    height: 5px;
    background: var(--cj-border,#e2e8f0);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
    width: 100%;
    max-width: 130px;
}
.cj-smc-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .4s;
}
.cj-smc-next {
    font-size: .68rem;
    color: var(--cj-muted,#64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}
.cj-smc-actions {
    padding: 4px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cj-smc-link {
    font-size: .78rem;
    font-weight: 600;
    color: var(--cj-accent,#6C63FF);
    text-decoration: none;
}
.cj-smc-link:hover { text-decoration: underline; }
.cj-smc-invite-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cj-accent, #6C63FF);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    justify-content: center;
    transition: opacity .15s;
}
.cj-smc-invite-btn:hover { opacity: .88; }
.cj-invite-count {
    background: #fff;
    color: var(--cj-accent, #6C63FF);
    border-radius: 10px;
    padding: 0 7px;
    font-size: .72rem;
    font-weight: 700;
}

/* ══════════════════════════════════════════
   PROFILE PAGE
══════════════════════════════════════════ */
.cj-tab-profile-intro {
    color: var(--cj-muted,#64748b);
    font-size: .9rem;
    margin: -4px 0 24px;
}
.cj-profile-page { display: flex; flex-direction: column; gap: 24px; }

/* Header card */
.cj-profile-header-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--cj-white,#fff);
    border-radius: var(--cj-radius,14px);
    padding: 24px;
    box-shadow: var(--cj-shadow);
    flex-wrap: wrap;
}
.cj-profile-avatar-wrap { flex-shrink:0; }
.cj-profile-photo {
    width: 88px; height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--cj-accent,#6C63FF);
    display: block;
}
.cj-profile-header-info { flex:1; min-width:0; }
.cj-profile-name   { font-size:1.25rem; font-weight:800; margin:0 0 4px; }
.cj-profile-email  { font-size:.85rem; color:var(--cj-muted,#64748b); margin:0 0 6px; }
.cj-profile-bio-preview { font-size:.88rem; color:var(--cj-muted,#64748b); margin:0; }

/* View mode fields */
.cj-profile-view {
    background: var(--cj-white,#fff);
    border-radius: var(--cj-radius,14px);
    padding: 24px;
    box-shadow: var(--cj-shadow);
}
.cj-profile-fields-grid { display: flex; flex-direction: column; gap: 0; }
.cj-profile-field-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--cj-border,#e2e8f0);
}
.cj-profile-field-row:last-child { border-bottom: none; }
.cj-profile-field-icon { font-size: 1.2rem; flex-shrink:0; width:28px; text-align:center; }
.cj-profile-field-body { flex:1; min-width:0; }
.cj-profile-field-label { display:block; font-size:.75rem; font-weight:700; color:var(--cj-muted,#64748b); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
.cj-profile-field-value { font-size:.92rem; font-weight:600; word-break:break-word; }
.cj-profile-field-value a { color:var(--cj-accent,#6C63FF); }
.cj-profile-privacy-badge { font-size:.72rem; font-weight:700; white-space:nowrap; }
.cj-privacy-public  { color:#22c55e; }
.cj-privacy-private { color:#94a3b8; }
.cj-profile-empty { color:var(--cj-muted,#64748b); font-style:italic; padding:12px 0; }

/* Edit mode */
/* ── Profile Edit ── */
.cj-profile-edit {
    background: var(--cj-white,#fff);
    border-radius: var(--cj-radius,14px);
    padding: 0;
    box-shadow: var(--cj-shadow);
    overflow: hidden;
}

/* Edit section headers */
.cj-profile-edit-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--cj-border,#e2e8f0);
}
.cj-profile-edit-section:last-of-type { border-bottom: none; }
.cj-profile-edit-section-title {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--cj-muted,#64748b);
    margin: 0 0 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--cj-border,#f1f5f9);
}

/* Photo section */
.cj-profile-photo-section {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.cj-profile-photo-inputs { flex:1; min-width:200px; }
.cj-field-hint { font-size:.76rem; color:var(--cj-muted,#64748b); margin:4px 0 8px; line-height:1.4; }

/* Individual edit fields */
.cj-profile-edit-field {
    margin-bottom: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--cj-border,#f1f5f9);
}
.cj-profile-edit-field:first-child { padding-top: 0; }
.cj-profile-edit-field:last-of-type { border-bottom: none; padding-bottom: 0; }

/* Input enhancements */
.cj-profile-edit-field .cj-label {
    font-size: .82rem; font-weight: 700; color: var(--cj-text,#1a1a2e);
    margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.cj-profile-edit-field .cj-input,
.cj-profile-edit-field .cj-textarea,
.cj-profile-edit-field .cj-select {
    background: var(--cj-bg,#f8f9ff);
    border: 1.5px solid var(--cj-border,#e2e8f0);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: .9rem;
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}
.cj-profile-edit-field .cj-input:focus,
.cj-profile-edit-field .cj-textarea:focus,
.cj-profile-edit-field .cj-select:focus {
    outline: none;
    border-color: var(--cj-accent,#6C63FF);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cj-accent,#6C63FF) 12%, transparent);
    background: white;
}

/* Privacy toggle — pill style */
.cj-privacy-toggle { margin-top: 8px; }
.cj-privacy-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 600;
    color: var(--cj-muted,#64748b);
    cursor: pointer;
    background: var(--cj-bg,#f8f9ff);
    border: 1.5px solid var(--cj-border,#e2e8f0);
    border-radius: 20px;
    padding: 4px 12px 4px 8px;
    transition: border-color .15s, color .15s;
    user-select: none;
}
.cj-privacy-label:has(input:checked) {
    border-color: #22c55e;
    color: #166534;
    background: #f0fdf4;
}
.cj-privacy-label input[type=checkbox] {
    width: 14px; height: 14px; cursor: pointer;
    accent-color: #22c55e;
}

/* Edit actions bar */
.cj-profile-edit-actions {
    display: flex; gap: 12px; flex-wrap: wrap;
    padding: 20px 24px;
    background: var(--cj-bg,#f8f9ff);
    border-top: 1px solid var(--cj-border,#e2e8f0);
}

.cj-form-msg.info { background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe; padding:10px 14px; border-radius:8px; margin-bottom:16px; }

/* ── Public Member Profile ── */
.cj-member-profile { display: flex; flex-direction: column; gap: 20px; }
.cj-member-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .85rem; font-weight: 600; color: var(--cj-muted,#64748b);
    text-decoration: none; padding: 6px 0;
    transition: color .15s;
}
.cj-member-back-link:hover { color: var(--cj-accent,#6C63FF); }
.cj-mp-hero {
    display: flex; align-items: center; gap: 20px;
    background: var(--cj-white,#fff);
    border-radius: var(--cj-radius,14px);
    padding: 24px; box-shadow: var(--cj-shadow);
    flex-wrap: wrap;
}
.cj-mp-avatar-wrap { flex-shrink: 0; }
.cj-mp-avatar {
    width: 80px; height: 80px; border-radius: 50%;
    object-fit: cover; display: block;
    border: 3px solid var(--cj-accent,#6C63FF);
}
.cj-mp-hero-info { flex: 1; min-width: 0; }
.cj-mp-name { font-size: 1.3rem; font-weight: 800; margin: 0 0 6px; }
.cj-mp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .88rem; margin-bottom: 6px; }
.cj-mp-sep { color: var(--cj-border,#e2e8f0); }
.cj-mp-badge { font-weight: 700; }
.cj-mp-score { color: var(--cj-muted,#64748b); }
.cj-mp-edit-link { color: var(--cj-accent,#6C63FF); font-weight: 600; text-decoration: none; font-size: .82rem; }
.cj-mp-edit-link:hover { text-decoration: underline; }
.cj-mp-joined { font-size: .8rem; color: var(--cj-muted,#64748b); }
.cj-mp-fields-card {
    background: var(--cj-white,#fff); border-radius: var(--cj-radius,14px);
    padding: 24px; box-shadow: var(--cj-shadow);
}
.cj-mp-section-title { font-size: .95rem; font-weight: 700; margin: 0 0 16px; }
.cj-mp-fields { display: flex; flex-direction: column; gap: 0; }
.cj-mp-field-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid var(--cj-border,#e2e8f0);
}
.cj-mp-field-row:last-child { border-bottom: none; }
.cj-mp-field-icon { font-size: 1.1rem; flex-shrink: 0; width: 26px; text-align: center; }
.cj-mp-field-body { flex: 1; min-width: 0; }
.cj-mp-field-label {
    display: block; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--cj-muted,#64748b); margin-bottom: 2px;
}
.cj-mp-field-value { font-size: .92rem; font-weight: 600; word-break: break-word; }
.cj-mp-field-value a { color: var(--cj-accent,#6C63FF); text-decoration: none; }
.cj-mp-field-value a:hover { text-decoration: underline; }
.cj-mp-private-note { font-size: .7rem; color: #94a3b8; white-space: nowrap; }
.cj-mp-empty-card {
    background: var(--cj-white,#fff); border-radius: var(--cj-radius,14px);
    padding: 40px 24px; text-align: center; box-shadow: var(--cj-shadow);
}
.cj-mp-empty-icon { font-size: 2.5rem; display: block; margin-bottom: 12px; }
.cj-mp-empty-card p { color: var(--cj-muted,#64748b); margin: 0 0 16px; }

/* Leaderboard mobile */
@media (max-width: 600px) {
    .cj-lb-table-head { grid-template-columns: 38px 1fr 80px; }
    .cj-lb-table-head .cj-lbt-badge { display: none; }
    .cj-lb-row { grid-template-columns: 38px 1fr 80px; }
    .cj-lbt-badge { display: none; }
    .cj-lb-row .cj-lbt-score { font-size: .85rem; }
}

@media(max-width:640px){
    .cj-profile-header-card { gap:14px; }
    .cj-profile-photo { width:64px; height:64px; }
    .cj-profile-edit { padding:18px 16px; }
}

/* Admin delete buttons on forum */
.cj-admin-delete-thread-btn,
.cj-admin-delete-reply {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #dc2626;
    font-size: .8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
.cj-admin-delete-thread-btn:hover,
.cj-admin-delete-reply:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.cj-admin-action-divider {
    color: #d1d5db;
    margin: 0 2px;
    font-size: .85rem;
    user-select: none;
}

/* ════════════════════════════════════════
   CSS FIXES — batch update
════════════════════════════════════════ */

/* Fix #6: Vertical tab active state — solid background + white text */
.cj-vnav-active {
    background: var(--vnav-accent, var(--cj-accent, #6C63FF)) !important;
    color: #fff !important;
}
.cj-vnav-active .cj-vnav-icon,
.cj-vnav-active .cj-vnav-label { color: #fff !important; }
.cj-vnav-link:hover { color: var(--cj-accent, #6C63FF); }

/* Fix #7: Read full story button — no red hover, proper spacing */
.cj-btn-text { background:none; border:none; padding:4px 0; font-size:.85rem; font-weight:600; cursor:pointer; color:var(--cj-accent); text-decoration:none; transition:opacity .15s; }
.cj-btn-text:hover { opacity:.75; color:var(--cj-accent) !important; background:none !important; transform:none !important; }
.cj-read-story { color:var(--cj-accent) !important; }
.cj-read-story:hover { color:var(--cj-accent) !important; opacity:.75; }

/* Fix #7: Story card author/date line spacing */
.cj-story-card-header { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.cj-story-card-header img { border-radius:50%; flex-shrink:0; }
.cj-story-card-author { font-weight:700; font-size:.93rem; line-height:1.3; margin-bottom:3px; }
.cj-story-card-date   { font-size:.78rem; color:var(--cj-muted); line-height:1.3; margin-top:2px; }

/* Fix #8: Collapsible replies toggle — keep text dark on hover */
.cj-replies-toggle { color: var(--cj-text, #1a1a2e); }
.cj-replies-toggle:hover { background: var(--cj-bg, #f8f9ff) !important; color: var(--cj-text, #1a1a2e) !important; }
.cj-replies-toggle:hover .cj-replies-toggle-label,
.cj-replies-toggle:hover .cj-replies-toggle-icon,
.cj-replies-toggle:hover .cj-replies-toggle-hint { color: inherit !important; }

/* Override any global .cj-btn:hover that turns things red or white */
.cj-btn-text:hover,
.cj-read-story:hover,
.cj-replies-toggle:hover { opacity:1; transform:none; }

/* ════════════════════════════════════════
   FIXES: Tab label clipping + forum loading
════════════════════════════════════════ */

/* Fix #3: Tab label text not fully visible */
.cj-vnav-link { padding: 12px 16px; gap: 12px; white-space: normal; }
.cj-vnav-label {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    line-height: 1.2;
}
.cj-smc-name { max-width: 150px; }
.cj-smc-next { max-width: 150px; }

/* old mobile sidebar rules removed — handled by slide-in sidebar above */

/* ════════════════════════════════════════
   Admin bulk-delete reply selection
════════════════════════════════════════ */

/* Checkbox wrapper sits to the left of the avatar */
.cj-reply-item.cj-admin-selectable {
    display: grid;
    grid-template-columns: 20px 40px 1fr;
    gap: 0 10px;
    align-items: start;
    position: relative;
}
.cj-reply-select-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    cursor: pointer;
}
.cj-reply-select-wrap input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #dc2626;
}
/* When checked, tint the entire reply row */
.cj-reply-item.cj-admin-selectable:has(.cj-reply-checkbox:checked) {
    background: #fff5f5;
    border-radius: 10px;
    outline: 2px solid #fca5a5;
}

/* Bulk-delete toolbar */
.cj-bulk-delete-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #fff5f5;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    margin-bottom: 12px;
}
.cj-bulk-select-all-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    color: #374151;
}
.cj-bulk-select-all-wrap input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #dc2626;
    cursor: pointer;
}
.cj-bulk-selected-count {
    font-size: .875rem;
    color: #6b7280;
    min-width: 80px;
}
.cj-bulk-delete-btn {
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 16px;
    font-size: .875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.cj-bulk-delete-btn:disabled {
    background: #fca5a5;
    cursor: not-allowed;
}
.cj-bulk-delete-btn:not(:disabled):hover {
    background: #b91c1c;
}
.cj-bulk-cancel-btn {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: .875rem;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s;
}
.cj-bulk-cancel-btn:hover {
    background: #f9fafb;
}

/* ════════════════════════════════════════
   About Community Tab
════════════════════════════════════════ */
.cj-tab-about { display:flex; flex-direction:column; gap:20px; }
.cj-about-card {
    background:#fff;
    border-radius:var(--cj-radius, 12px);
    padding:24px;
    box-shadow:0 1px 4px rgba(0,0,0,.07);
}
.cj-about-heading {
    font-size:1.25rem;
    font-weight:700;
    margin:0 0 12px;
}
.cj-about-section-title {
    font-size:1rem;
    font-weight:700;
    margin:0 0 14px;
    color:#1e293b;
}
.cj-about-description {
    color:#475569;
    line-height:1.7;
    margin:0 0 16px;
}
.cj-about-meta-row {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.cj-about-meta-chip {
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:#f1f5f9;
    color:#475569;
    font-size:.8rem;
    font-weight:600;
    padding:4px 12px;
    border-radius:20px;
}
.cj-about-body {
    color:#374151;
    line-height:1.75;
    font-size:.95rem;
}
.cj-about-body p { margin:0 0 12px; }
.cj-about-body p:last-child { margin-bottom:0; }
.cj-about-join-cta { padding:28px 24px; }

/* ════════════════════════════════════════
   Event Updates / Glimpses
════════════════════════════════════════ */
.cj-event-past-item { margin-bottom:8px; }
.cj-event-past-row  { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
                       padding:10px 12px; background:#fff; border-radius:8px;
                       border:1px solid #e5e7eb; }
.cj-event-past-date  { font-size:.8rem; color:#6b7280; min-width:90px; }
.cj-event-past-title { font-weight:600; flex:1; color:#1e293b; }
.cj-event-past-rsvp  { font-size:.8rem; color:#6b7280; }

.cj-event-updates-section { margin-bottom:10px; }
.cj-event-updates-panel   { display:flex; flex-direction:column; gap:10px; padding:4px 0 8px; }

.cj-event-update-card {
    background:#f8faff;
    border:1px solid #e0e7ff;
    border-radius:10px;
    padding:14px 16px;
}
.cj-event-update-meta {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}
.cj-event-update-type-badge {
    font-size:.75rem;
    font-weight:700;
    background:#ede9fe;
    color:#6C63FF;
    padding:2px 10px;
    border-radius:12px;
}
.cj-event-update-date {
    font-size:.78rem;
    color:#9ca3af;
}
.cj-event-update-img {
    width:100%;
    max-height:220px;
    object-fit:cover;
    border-radius:8px;
    margin-bottom:10px;
    display:block;
}
.cj-event-update-content {
    margin:0;
    color:#374151;
    font-size:.9rem;
    line-height:1.65;
    white-space:pre-line;
}

/* ════════════════════════════════════════
   Share bar on feed and poll cards
════════════════════════════════════════ */
.cj-card-share-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    margin-top: 12px;
    border-top: 1px solid var(--cj-border);
}
.cj-share-label {
    font-size: .75rem;
    color: var(--cj-muted);
    font-weight: 600;
}

/* ════════════════════════════════════════
   Challenge: points rule reminder & no-points badge
════════════════════════════════════════ */
.cj-ct-points-rule {
    margin: 8px 0 0;
    font-size: .75rem;
    color: var(--cj-muted);
    line-height: 1.4;
}
.cj-ct-pts-missed {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 20px;
    padding: 2px 10px;
    margin-left: 6px;
}

/* ════════════════════════════════════════
   Announcements Tab
════════════════════════════════════════ */
.cj-announcements-list { display:flex; flex-direction:column; gap:20px; }

.cj-ann-card {
    background: #fff;
    border-radius: var(--cj-radius, 12px);
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    border-left: 4px solid transparent;
    transition: border-color .2s;
}
.cj-ann-card.cj-ann-pinned {
    border-left-color: var(--cj-accent, #6C63FF);
}

.cj-ann-header { margin-bottom: 12px; }
.cj-ann-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .8rem;
    color: var(--cj-muted);
}
.cj-ann-pin-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
}
.cj-ann-author { font-weight: 600; color: #374151; }
.cj-ann-date   { color: #9ca3af; }
.cj-ann-update-badge {
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
}

.cj-ann-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px;
}
.cj-ann-content {
    color: #475569;
    font-size: .95rem;
    line-height: 1.7;
}
.cj-ann-content p { margin: 0 0 8px; }
.cj-ann-content p:last-child { margin-bottom: 0; }

/* Updates timeline */
.cj-ann-updates {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cj-border);
}
.cj-ann-updates-label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--cj-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cj-ann-updates-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 20px;
}
.cj-ann-updates-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--cj-border);
}
.cj-ann-update-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 16px;
    position: relative;
}
.cj-ann-update-item:last-child { padding-bottom: 0; }
.cj-ann-update-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    margin-left: -20px;
    z-index: 1;
    position: relative;
}
.cj-ann-update-body { flex: 1; }
.cj-ann-update-meta { margin-bottom: 4px; }
.cj-ann-update-date {
    font-size: .78rem;
    color: #9ca3af;
    font-weight: 600;
}
.cj-ann-update-text {
    font-size: .9rem;
    color: #374151;
    line-height: 1.6;
}

/* ════════════════════════════════════════
   Distraction-free body reset
════════════════════════════════════════ */
body.cj-distraction-free {
    margin: 0;
    padding: 0 !important;
    background: #f4f6fb;
}
body.cj-distraction-free .cj-community-page {
    min-height: 100dvh;
}
body.cj-distraction-free .cj-community-body {
    max-width: 100%;
}

/* ─── Distraction-free: hide ALL theme & WooCommerce chrome ─── */
/* Theme header, nav, footer */
body.cj-distraction-free header,
body.cj-distraction-free .site-header,
body.cj-distraction-free #masthead,
body.cj-distraction-free #site-header,
body.cj-distraction-free .header-wrapper,
body.cj-distraction-free nav.main-navigation,
body.cj-distraction-free #main-nav,
body.cj-distraction-free footer,
body.cj-distraction-free .site-footer,
body.cj-distraction-free #colophon,
body.cj-distraction-free #footer,
body.cj-distraction-free .footer-wrapper,
body.cj-distraction-free .back-to-top,
body.cj-distraction-free .scroll-to-top { display: none !important; }

/* WooCommerce chrome */
body.cj-distraction-free .woocommerce-store-notice,
body.cj-distraction-free .wc-block-mini-cart,
body.cj-distraction-free .woocommerce-breadcrumb,
body.cj-distraction-free .wc-block-cart,
body.cj-distraction-free .cart-contents,
body.cj-distraction-free .header-cart,
body.cj-distraction-free #wc-quick-cart,
body.cj-distraction-free .xoo-wsc-container,
body.cj-distraction-free .ast-above-header,
body.cj-distraction-free .ast-below-header,
body.cj-distraction-free .ast-site-header-wrap,
body.cj-distraction-free .ast-primary-header,
body.cj-distraction-free .ast-footer-wrap,
body.cj-distraction-free .footer-widget-area,
body.cj-distraction-free .ast-breadcrumbs-wrapper,
body.cj-distraction-free #ast-scroll-top,
body.cj-distraction-free .fl-page-bar,
body.cj-distraction-free .fl-page-header,
body.cj-distraction-free .fl-page-footer,
body.cj-distraction-free .elementor-location-header,
body.cj-distraction-free .elementor-location-footer,
body.cj-distraction-free .cookie-notice-container,
body.cj-distraction-free #cn-notice-container,
body.cj-distraction-free .pum-overlay { display: none !important; }

/* ─── Distraction-free: hide sticky bottom navigation bars ─── */
/* Covers: Adubay/WooCommerce mobile nav, Flatsome, Astra, OceanWP,
   WoodMart, Woostify, Rehub, generic theme bottom bars             */
body.cj-distraction-free .mobile-nav-bar,
body.cj-distraction-free .mobile-bottom-nav,
body.cj-distraction-free .mobile-menu-bar,
body.cj-distraction-free .bottom-navigation,
body.cj-distraction-free .bottom-nav-bar,
body.cj-distraction-free #mobile-bottom-bar,
body.cj-distraction-free .site-mobile-footer-bar,
body.cj-distraction-free .footer-bottom-nav,
body.cj-distraction-free .flatsome-mobile-bar,
body.cj-distraction-free .ast-mobile-bottom-nav,
body.cj-distraction-free .ast-sticky-mobile-menu,
body.cj-distraction-free .ocean-mobile-bottom-bar,
body.cj-distraction-free .woodmart-mobile-nav,
body.cj-distraction-free .woostify-mobile-footer,
body.cj-distraction-free .rehub-mobile-nav,
body.cj-distraction-free .mobile-nav-bottom,
body.cj-distraction-free [class*="mobile-bottom"],
body.cj-distraction-free [class*="bottom-nav"],
body.cj-distraction-free [class*="mobile-nav-bar"],
body.cj-distraction-free [id*="mobile-bottom"],
body.cj-distraction-free [id*="bottom-nav"],
body.cj-distraction-free .woo-mobile-nav,
body.cj-distraction-free .storefront-handheld-footer-bar,
body.cj-distraction-free #handheld-footer-bar { display: none !important; }

/* Remove any theme body padding/margin that creates gaps */
body.cj-distraction-free #page,
body.cj-distraction-free #content,
body.cj-distraction-free .site-content,
body.cj-distraction-free #primary,
body.cj-distraction-free .content-area {
    padding: 0 !important;
    margin: 0 !important;
}

/* ─── Shortcode pages: hide all non-plugin page chrome ─── */
/* Hides: page title, breadcrumbs, sidebars, pagination, theme containers */
body.cj-shortcode-page .entry-title,
body.cj-shortcode-page .page-title,
body.cj-shortcode-page .page-header,
body.cj-shortcode-page .breadcrumb,
body.cj-shortcode-page .breadcrumbs,
body.cj-shortcode-page .ast-breadcrumbs-wrapper,
body.cj-shortcode-page #secondary,
body.cj-shortcode-page .sidebar,
body.cj-shortcode-page .widget-area,
body.cj-shortcode-page .wp-block-template-part,
body.cj-shortcode-page .site-branding,
body.cj-shortcode-page .navigation,
body.cj-shortcode-page .entry-meta,
body.cj-shortcode-page .entry-footer,
body.cj-shortcode-page .comments-area,
body.cj-shortcode-page .post-navigation { display: none !important; }

/* Remove entry padding so plugin content fills the full content area */
body.cj-shortcode-page .entry-content,
body.cj-shortcode-page .page-content,
body.cj-shortcode-page article.page,
body.cj-shortcode-page .post-inner,
body.cj-shortcode-page #main article,
/* Elessi / NsTheme content wrappers */
body.cj-shortcode-page .ns-col.main,
body.cj-shortcode-page .site-main,
body.cj-shortcode-page #ns-main,
body.cj-shortcode-page .ns-main-content,
body.cj-shortcode-page .page-content-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Shortcode pages: full viewport height, centered content */
body.cj-shortcode-page {
    background: var(--cj-bg, #f4f6fb) !important;
}
body.cj-shortcode-page #page,
body.cj-shortcode-page #content,
body.cj-shortcode-page .site-content {
    background: transparent !important;
}

/* duplicate mobile block removed — consolidated above */
/* ─── Sidebar back link & close button ─── */
.cj-sidebar-back-wrap {
    display: none; /* shown via mobile @media block */
}
.cj-sidebar-back-link {
    font-size: .82rem;
    font-weight: 600;
    color: var(--cj-muted, #64748b);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
    border-radius: 6px;
    transition: color .15s;
}
.cj-sidebar-back-link:hover { color: var(--cj-accent, #6C63FF); }
.cj-sidebar-close-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--cj-muted, #64748b);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: background .15s, color .15s;
}
.cj-sidebar-close-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}

/* ════════════════════════════════════════
   MOBILE — reply items, reaction bar,
   thread view (≤768px)
════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Forum toolbar ── */
    .cj-forum-toolbar { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
    .cj-forum-toolbar h2 { font-size: 1.05rem !important; }
    #cj-admin-thread-btn { width: 100% !important; justify-content: center !important; }
    .cj-back-link { font-size: .85rem !important; margin-bottom: 10px !important; display: inline-block !important; }

    /* ── Thread post ── */
    .cj-thread-post  { padding: 12px !important; }
    .cj-thread-title { font-size: 1.05rem !important; line-height: 1.4 !important; }
    .cj-thread-meta  { flex-wrap: wrap !important; gap: 4px 6px !important; }

    /* ── Share form ── */
    .cj-share-experience-wrap { padding: 12px !important; border-radius: 10px !important; }
    .cj-share-exp-header { gap: 8px !important; margin-bottom: 10px !important; }
    .cj-share-exp-header img { width: 32px !important; height: 32px !important; flex-shrink: 0 !important; }
    .cj-share-exp-header h4 { font-size: .95rem !important; }
    .cj-share-exp-hint { font-size: .78rem !important; }

    /* ── Replies toggle ── */
    .cj-replies-section { margin-top: 12px !important; }
    .cj-replies-toggle  { padding: 12px 14px !important; font-size: .88rem !important; }
    .cj-replies-toggle-hint { font-size: .7rem !important; }

    /* ══════════════════════════════════════════
       REPLY ITEM
       Layout: [checkbox absolute] [avatar 32px] [content fills rest]
       Zero left margin — nested uses border-left only
    ══════════════════════════════════════════ */
    .cj-reply-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px 10px 10px 8px !important;
        margin: 0 0 8px 0 !important;
        border-radius: 8px !important;
        position: relative !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    /* Admin: shift content right to clear the absolute checkbox */
    .cj-reply-item.cj-admin-selectable {
        padding-left: 30px !important;
    }

    /* Checkbox: absolute, doesn't affect layout */
    .cj-reply-select-wrap {
        position: absolute !important;
        top: 10px !important;
        left: 8px !important;
        width: 16px !important;
        height: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
        z-index: 2 !important;
    }
    .cj-reply-select-wrap input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
        margin: 0 !important;
    }

    /* Avatar: fixed 32px, no shrink */
    .cj-reply-avatar { flex: 0 0 32px !important; width: 32px !important; }
    .cj-reply-avatar img { width: 32px !important; height: 32px !important; border-radius: 50% !important; display: block !important; }

    /* Main: takes ALL remaining width */
    .cj-reply-main {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        width: 0 !important;
    }

    /* Nested: border-left accent, NO margin-left */
    .cj-reply-item[data-depth="1"],
    .cj-reply-item[data-depth="2"],
    .cj-reply-item[data-depth="3"] {
        margin-left: 0 !important;
        border-left: 3px solid var(--cj-accent, #6C63FF) !important;
        border-radius: 0 8px 8px 0 !important;
        background: #f8faff !important;
    }
    .cj-reply-nested-line { display: none !important; }

    /* Reply header */
    .cj-reply-header { flex-wrap: wrap !important; gap: 2px 6px !important; align-items: center !important; margin-bottom: 4px !important; }
    .cj-reply-author { font-size: .82rem !important; font-weight: 700 !important; }
    .cj-admin-author-badge { font-size: .63rem !important; padding: 1px 5px !important; }
    .cj-reply-date { font-size: .68rem !important; color: #94a3b8 !important; }
    .cj-reply-body { font-size: .88rem !important; line-height: 1.5 !important; margin-bottom: 6px !important; }
    .cj-reply-body p { margin: 0 0 4px !important; }

    /* ══════════════════════════════════════════
       REACTION BAR — 4 equal-width buttons, one row
       Text always visible, small but readable
    ══════════════════════════════════════════ */
    .cj-reaction-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        margin-top: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .cj-reaction-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        padding: 5px 2px !important;
        font-size: .58rem !important;
        height: 28px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border-width: 1px !important;
        border-style: solid !important;
        letter-spacing: -.01em !important;
    }
    /* Ensure text labels are always shown */
    .cj-reaction-btn .cj-react-label {
        display: inline !important;
        font-size: .58rem !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        max-width: 36px !important;
    }
    .cj-reaction-btn .cj-reaction-count {
        font-size: .58rem !important;
    }

    /* Admin delete row */
    .cj-reply-action-row {
        display: flex !important;
        margin-top: 6px !important;
        padding-top: 6px !important;
        border-top: 1px solid #f1f5f9 !important;
    }
    .cj-admin-delete-reply {
        font-size: .72rem !important;
        padding: 3px 10px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }
    .cj-admin-delete-thread-btn { font-size: .72rem !important; padding: 3px 8px !important; }

    /* Bulk bar */
    .cj-bulk-delete-bar { flex-wrap: wrap !important; gap: 6px !important; padding: 8px 10px !important; font-size: .8rem !important; }
    .cj-bulk-toggle-btn { font-size: .75rem !important; padding: 4px 10px !important; }
    .cj-reply-form-wrap { padding: 12px !important; }
}

/* ── Nested reply indentation via data-depth ── */
/* Desktop: indent nested replies */
.cj-reply-item[data-depth="1"] { margin-left: 44px; }
.cj-reply-item[data-depth="2"] { margin-left: 66px; }
.cj-reply-item[data-depth="3"] { margin-left: 66px; }

/* ── Event Share Memories ── */
.cj-event-participant-section {
    border-top: 1px solid var(--cj-border, #e2e8f0);
    margin-top: 16px;
    padding-top: 12px;
}

/* Action row: Share Memories + Memories count — right aligned */
.cj-ep-action-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

/* Memories count collapsible button */
.cj-ep-memories-count-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    font-size: .78rem; font-weight: 600;
    color: var(--cj-muted, #64748b);
    background: var(--cj-bg, #f8f9ff);
    border: 1.5px solid var(--cj-border, #e2e8f0);
    border-radius: 6px; cursor: pointer;
    transition: border-color .15s, color .15s;
    white-space: nowrap;
}
.cj-ep-memories-count-btn:hover,
.cj-ep-memories-count-btn.cj-ep-memories-open {
    background: var(--cj-accent, #6C63FF) !important;
    border-color: var(--cj-accent, #6C63FF) !important;
    color: #fff !important;
}

.cj-event-post-form {
    background: var(--cj-bg, #f8f9ff);
    border-radius: 10px;
    padding: 14px;
}
.cj-event-posts-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.cj-event-posts-heading {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--cj-muted, #64748b);
    margin: 0 0 10px;
}
.cj-event-post-item {
    background: var(--cj-white, #fff);
    border: 1px solid var(--cj-border, #e2e8f0);
    border-radius: 10px;
    padding: 12px 14px;
}
.cj-event-post-header {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px; margin-bottom: 8px;
}
.cj-event-post-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover; display: block; flex-shrink: 0;
}
.cj-event-post-author { font-weight: 700; font-size: .82rem; }
.cj-event-post-type {
    font-size: .7rem; background: var(--cj-bg, #f8f9ff);
    border: 1px solid var(--cj-border, #e2e8f0);
    border-radius: 20px; padding: 2px 8px;
    color: var(--cj-muted, #64748b);
}
.cj-event-post-date { font-size: .72rem; color: var(--cj-muted, #64748b); }
/* Image grid: left / centre / right alignment */
.cj-event-post-img-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
}
.cj-ep-img-cell {
    flex: 0 0 auto;
    max-width: 100%;
}
/* Left: first image */
.cj-ep-img-left   { margin-right: auto; }
/* Centre: second */
.cj-ep-img-center { margin-left: auto; margin-right: auto; }
/* Right: third */
.cj-ep-img-right  { margin-left: auto; }

.cj-event-post-img,
.cj-ep-preview-img-thumb {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 200px;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    background: transparent;
}

/* Preview grid inside the form */
.cj-ep-preview-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.cj-ep-img-preview {
    position: relative;
}
.cj-ep-remove-one {
    position: absolute; top: 2px; right: 2px;
    background: rgba(0,0,0,.55); border: none;
    color: #fff; border-radius: 50%;
    width: 20px; height: 20px;
    font-size: .65rem; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}

/* Memories list */
.cj-ep-memories-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .cj-event-post-img,
    .cj-ep-preview-img-thumb { max-height: 150px; }
    .cj-ep-action-row { gap: 6px; }
    .cj-ep-toggle-btn,
    .cj-ep-memories-count-btn { font-size: .72rem; padding: 4px 10px; }
}
.cj-event-post-content { margin: 0; font-size: .88rem; line-height: 1.55; }

/* Upload button */
.cj-ep-upload-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cj-ep-upload-label { cursor: pointer; }
.cj-ep-upload-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--cj-white, #fff);
    border: 1.5px solid var(--cj-border, #e2e8f0);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: .82rem; font-weight: 600;
    color: var(--cj-muted, #64748b);
    cursor: pointer;
    transition: border-color .15s, color .15s;
    white-space: nowrap;
}
.cj-ep-upload-label:hover .cj-ep-upload-btn,
.cj-ep-upload-label:focus-within .cj-ep-upload-btn {
    border-color: var(--cj-accent, #6C63FF);
    color: var(--cj-accent, #6C63FF);
}
.cj-ep-file-name {
    font-size: .78rem; color: var(--cj-muted, #64748b);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 160px;
}
.cj-ep-preview-wrap { width: 100%; }
.cj-ep-preview-img  {
    max-width: 100%; max-height: 200px;
    border-radius: 8px; object-fit: contain;
    border: 1px solid var(--cj-border, #e2e8f0);
}

/* Actions row */
.cj-ep-form-actions {
    display: flex; gap: 8px; align-items: center;
    flex-wrap: wrap;
}

/* Share Memories toggle button — compact, right-aligned */
.cj-ep-toggle-row {
    display: flex;
    justify-content: flex-end;   /* right-align */
    margin-top: 12px;
}
.cj-ep-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--cj-accent, #6C63FF);
    background: transparent;
    border: 1.5px solid var(--cj-accent, #6C63FF);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
/* Hover: fill with community accent colour, white text — never red */
.cj-ep-toggle-btn:hover {
    background: var(--cj-accent, #6C63FF);
    color: #fff !important;
    border-color: var(--cj-accent, #6C63FF);
}
.cj-ep-toggle-btn.active {
    background: var(--cj-accent, #6C63FF);
    color: #fff;
}

/* Mobile tweaks */
@media (max-width: 768px) {
    .cj-ep-upload-btn  { font-size: .78rem; padding: 6px 12px; }
    .cj-ep-file-name   { max-width: 120px; }
    .cj-ep-form-actions { gap: 6px; }
    .cj-ep-form-actions .cj-btn { flex: 1 1 auto; text-align: center; justify-content: center; }
    .cj-ep-toggle-btn  { font-size: .75rem; padding: 5px 12px; }
}

/* ════════════════════════════════════════
   WP Reward Points Integration
════════════════════════════════════════ */

/* Profile balance card */
.cj-wprp-card {
    background: var(--cj-white, #fff);
    border-radius: var(--cj-radius, 14px);
    padding: 20px 24px;
    box-shadow: var(--cj-shadow);
    margin-bottom: 20px;
    border-left: 4px solid var(--cj-accent, #6C63FF);
}
.cj-wprp-balance-row {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap;
    gap: 8px; margin-bottom: 16px;
}
.cj-wprp-balance-main {
    display: flex; align-items: baseline; gap: 8px;
}
.cj-wprp-pts {
    font-size: 2.2rem; font-weight: 800;
    color: var(--cj-accent, #6C63FF); line-height: 1;
}
.cj-wprp-pts-label {
    font-size: 1rem; font-weight: 700; color: var(--cj-muted, #64748b);
}
.cj-wprp-value {
    font-size: .88rem; color: #059669; font-weight: 600;
    background: #ecfdf5; border-radius: 20px;
    padding: 4px 12px; border: 1px solid #6ee7b7;
}

/* Recent activity log */
.cj-wprp-log { border-top: 1px solid var(--cj-border, #e2e8f0); padding-top: 14px; }
.cj-wprp-log-title {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--cj-muted, #64748b);
    margin: 0 0 10px;
}
.cj-wprp-log-row {
    display: grid;
    grid-template-columns: 120px 1fr auto auto;
    gap: 6px; align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--cj-border, #f1f5f9);
    font-size: .8rem;
}
.cj-wprp-log-row:last-child { border-bottom: none; }
.cj-wprp-log-type { font-weight: 600; color: var(--cj-text, #1a1a2e); }
.cj-wprp-log-note { color: var(--cj-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cj-wprp-log-pts  { font-weight: 700; min-width: 36px; text-align: right; }
.cj-wprp-pos { color: #059669; }
.cj-wprp-neg { color: #dc2626; }
.cj-wprp-log-date { color: var(--cj-muted, #64748b); font-size: .72rem; white-space: nowrap; }
.cj-wprp-shop-link { margin-top: 16px; border-top: 1px solid var(--cj-border, #e2e8f0); padding-top: 14px; }

/* Leaderboard earning card */
.cj-wprp-earn-card {
    background: var(--cj-white, #fff);
    border-radius: var(--cj-radius, 14px);
    padding: 20px 24px;
    box-shadow: var(--cj-shadow);
    margin-top: 24px;
}
.cj-wprp-rate-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--cj-border, #f1f5f9);
}
.cj-wprp-rate-row:last-of-type { border-bottom: none; }
.cj-wprp-rate-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.cj-wprp-rate-row strong { display: block; font-size: .9rem; margin-bottom: 2px; }
.cj-wprp-rate-desc { font-size: .82rem; color: var(--cj-muted, #64748b); }
.cj-wprp-badge-bonus-title {
    font-size: .88rem; font-weight: 700; margin: 16px 0 8px;
    color: var(--cj-text, #1a1a2e);
}
.cj-wprp-badge-list { margin-top: 0; }

/* Mobile */
@media (max-width: 768px) {
    .cj-wprp-pts { font-size: 1.8rem; }
    .cj-wprp-log-row { grid-template-columns: 1fr auto auto; }
    .cj-wprp-log-type { grid-column: 1 / -1; }
    .cj-wprp-card, .cj-wprp-earn-card { padding: 16px; }
}

/* ── Leaderboard collapsible sections ── */
.cj-lb-collapsible {
    border-radius: 0;
    overflow: hidden;
    border: none;                                      /* no border */
    border-bottom: 1px solid var(--cj-border, #e2e8f0); /* subtle separator only */
}
.cj-lb-collapsible:last-child { border-bottom: none; }
.cj-lb-collapse-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 4px;                                 /* no horizontal padding — flush left */
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: .9rem;
    font-weight: 600;
    color: var(--cj-accent, #6C63FF);
    letter-spacing: 0;
    text-transform: none;
    transition: color .15s;
}
.cj-lb-collapse-btn:hover {
    background: var(--cj-accent, #6C63FF);
    color: #fff !important;
    border-radius: 6px;
}
.cj-lb-collapse-btn:hover .cj-lb-collapse-plus { color: #fff !important; }
.cj-lb-collapse-plus {
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    color: var(--cj-accent, #6C63FF);
}
.cj-lb-collapsible-body { }
.cj-lb-collapsible .cj-lb-table { border-radius: 0; }
.cj-lb-collapsible .cj-lb-tiers-list { border-radius: 0; border-left: none; border-right: none; }

/* ── WPRP profile card title ── */
.cj-wprp-card-title {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--cj-muted, #64748b);
    margin-bottom: 14px; padding-bottom: 10px;
    border-bottom: 1px solid var(--cj-border, #e2e8f0);
}

/* ── WPRP shop button — accent colour via CSS variable ── */
.cj-wprp-shop-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--cj-accent, #6C63FF) !important;
    color: #fff !important;
    border: none; border-radius: 8px;
    padding: 10px 20px; font-size: .9rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: opacity .15s;
}
.cj-wprp-shop-btn:hover { opacity: .88; color: #fff !important; }