/* ═══════════════════════════════════════════════════════════════
   LSF COMMUNITY — styles for /community
   Extracted from inline <style> blocks and refreshed for a more
   premium, alive feel. Organized by section; all existing class
   names preserved so no HTML/JS changes were required to move here.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cm-ease: cubic-bezier(.22,1,.36,1);
  --cm-ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --cm-t-fast: .15s;
  --cm-t-med: .25s;
  --cm-t-slow: .4s;
  --cm-shadow-sm: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03);
  --cm-shadow-md: 0 8px 24px rgba(15,23,42,.07), 0 2px 6px rgba(15,23,42,.04);
  --cm-shadow-lg: 0 16px 40px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.06);
  --cm-radius: 20px;
}

body { opacity: 0; transition: opacity 0.35s ease; }
body.access-granted { opacity: 1; }
@keyframes _cm-reveal { to { opacity: 1; } }
body { animation: _cm-reveal 0s 4s forwards; }

.cm-wrap { max-width: 620px; margin: 0 auto; padding: 0 18px 90px; }

/* ════ HERO (compact — item 2) ════ */
.cm-hero { padding: 20px 0 14px; text-align: center; }
.cm-hero .pill {
  display: inline-block; background: rgba(37,99,235,0.1); color: var(--indigo);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 5px 14px; border-radius: 99px; margin-bottom: 8px;
}
.cm-hero h1 { font-family: var(--font-display,'Syne',sans-serif); font-weight: 700; font-size: clamp(1.4rem, 3.6vw, 1.8rem); margin-bottom: 4px; color: var(--text-main); letter-spacing: -.01em; }
.cm-hero p { color: var(--text-dim); font-size: 0.84rem; max-width: 460px; margin: 0 auto; line-height: 1.5; }

/* ════ GATE ════ */
.cm-gate { text-align: center; padding: 44px 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow-sm); }
.cm-gate-btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 22px; border-radius: 99px; background: var(--gradient); color: #fff; font-weight: 700; font-size: 0.88rem; text-decoration: none; margin-top: 12px; transition: transform var(--cm-t-fast) var(--cm-ease-bounce); }
.cm-gate-btn:active { transform: scale(.96); }

/* ════ COMPOSE (item 5, 6) ════ */
.cm-compose { background: var(--card); border: 1px solid var(--border); border-radius: var(--cm-radius); padding: 20px 20px 16px; margin-bottom: 22px; box-shadow: var(--cm-shadow-sm); transition: box-shadow var(--cm-t-med) var(--cm-ease); }
.cm-compose:focus-within { box-shadow: var(--cm-shadow-md); }
.cm-compose-top { display: flex; gap: 13px; align-items: flex-start; }
.cm-compose-top .cm-avatar { width: 42px; height: 42px; font-size: .9rem; margin-top: 2px; flex-shrink: 0; }
.cm-compose-top .cm-compose-input-col { flex: 1; min-width: 0; }
.cm-compose-top textarea { width: 100%; }
.cm-compose textarea {
  width: 100%; border: none; background: transparent; color: var(--text-main);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; line-height: 1.6;
  resize: none; outline: none; min-height: 46px; box-sizing: border-box;
}
.cm-compose textarea::placeholder { color: var(--text-muted); }
.cm-compose-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.cm-char-count { font-size: 0.72rem; color: var(--text-muted); }
.cm-char-count.warn { color: #f97316; }
.cm-post-btn { padding: 10px 24px; border-radius: 99px; background: var(--gradient); color: #fff; border: none; font-weight: 700; font-size: 0.86rem; cursor: pointer; box-shadow: 0 6px 16px rgba(37,99,235,.22); transition: transform var(--cm-t-fast) var(--cm-ease-bounce), box-shadow var(--cm-t-fast) var(--cm-ease), opacity var(--cm-t-fast); }
.cm-post-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37,99,235,.3); }
.cm-post-btn:not(:disabled):active { transform: scale(.96); }
.cm-post-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

/* Simplified primary toolbar (Photo / Feeling / More) */
.cm-compose-toolbar { display: flex; align-items: center; gap: 4px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--border); }
.cm-compose-tool-labeled { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; border: none; background: var(--bg-alt); color: var(--text-dim); font-size: 0.8rem; font-weight: 700; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; transition: background var(--cm-t-fast) var(--cm-ease), color var(--cm-t-fast) var(--cm-ease), transform var(--cm-t-fast) var(--cm-ease-bounce); }
.cm-compose-tool-labeled i { font-size: .85rem; }
.cm-compose-tool-labeled:hover { background: rgba(255,107,53,.1); color: var(--coral); }
.cm-compose-tool-labeled:active { transform: scale(.95); }
.cm-compose-tool-labeled.active { background: rgba(255,107,53,.14); color: var(--coral); }
.cm-compose-tool { width: 36px; height: 36px; border-radius: 50%; border: none; background: none; color: var(--text-dim); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--cm-t-fast) var(--cm-ease), color var(--cm-t-fast) var(--cm-ease); }
.cm-compose-tool:hover { background: var(--bg-alt); color: var(--coral); }
.cm-compose-tool.active { color: var(--coral); background: rgba(255,107,53,0.12); }

.cm-compose-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cm-preview-item { position: relative; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; background: var(--bg-alt); flex-shrink: 0; animation: cmPopIn var(--cm-t-med) var(--cm-ease-bounce); }
.cm-preview-item img, .cm-preview-item video { width: 100%; height: 100%; object-fit: cover; }
.cm-preview-item.is-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; text-align: center; }
.cm-preview-item.is-doc i { font-size: 1.4rem; color: var(--coral); }
.cm-preview-item.is-doc span { font-size: 0.6rem; color: var(--text-dim); word-break: break-all; line-height: 1.2; max-height: 2.2em; overflow: hidden; }
.cm-preview-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none; font-size: 0.68rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform var(--cm-t-fast) var(--cm-ease-bounce); }
.cm-preview-remove:hover { transform: scale(1.12); background: rgba(239,68,68,.85); }

.cm-compose-feeling-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-dim); margin-top: 10px; background: var(--bg-alt); padding: 5px 12px; border-radius: 99px; animation: cmPopIn var(--cm-t-med) var(--cm-ease-bounce); }
.cm-compose-feeling-tag button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.7rem; margin-left: 2px; line-height: 1; }

.cm-emoji-picker { display: grid; grid-template-columns: repeat(8,1fr); gap: 2px; max-height: 160px; overflow-y: auto; padding: 10px; margin-top: 10px; background: var(--bg-alt); border-radius: 14px; animation: cmSlideDown var(--cm-t-med) var(--cm-ease); }
.cm-emoji-picker button { background: none; border: none; font-size: 1.3rem; padding: 5px; border-radius: 8px; cursor: pointer; line-height: 1; transition: transform var(--cm-t-fast) var(--cm-ease-bounce); }
.cm-emoji-picker button:hover { background: var(--card); transform: scale(1.2); }

.cm-poll-builder { margin-top: 10px; padding: 14px; background: var(--bg-alt); border-radius: 16px; animation: cmSlideDown var(--cm-t-med) var(--cm-ease); }
.cm-poll-builder input[type="text"] { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card); color: var(--text-main); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.84rem; outline: none; margin-bottom: 8px; transition: border-color var(--cm-t-fast) var(--cm-ease); }
.cm-poll-builder input[type="text"]:focus { border-color: var(--coral); }
.cm-poll-option-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cm-poll-option-row input { margin-bottom: 0 !important; }
.cm-poll-option-row button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; flex-shrink: 0; }
.cm-poll-add-option { display: inline-block; font-size: 0.76rem; font-weight: 700; color: var(--coral); background: none; border: none; cursor: pointer; padding: 4px 0; }
.cm-poll-duration { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.78rem; color: var(--text-dim); }
.cm-poll-duration select { border: 1.5px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text-main); font-size: 0.78rem; padding: 5px 9px; }
.cm-poll-close-builder { display: block; margin-left: auto; font-size: 0.74rem; color: var(--text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; margin-top: 10px; }

/* "More" attachment sheet items (Poll / PDF / GIF / Emoji / Camera / Video) */
.cm-more-grid-inline { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 10px; padding: 6px 2px 4px; animation: cmSlideDown var(--cm-t-med) var(--cm-ease); }
.cm-more-grid-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 16px; background: var(--bg-alt); border: none; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; transition: transform var(--cm-t-fast) var(--cm-ease-bounce), background var(--cm-t-fast) var(--cm-ease); }
.cm-more-grid-item:hover { background: rgba(255,107,53,.1); transform: translateY(-2px); }
.cm-more-grid-item:active { transform: scale(.95); }
.cm-more-grid-item i { font-size: 1.35rem; color: var(--coral); }
.cm-more-grid-item span { font-size: 0.76rem; font-weight: 700; color: var(--text-main); }

/* ════ FEED (item 1 — visual hierarchy, breathing room) ════ */
.cm-feed { display: flex; flex-direction: column; gap: 18px; }
.cm-post {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--cm-radius); padding: 20px 20px 16px;
  box-shadow: var(--cm-shadow-sm);
  transition: box-shadow var(--cm-t-med) var(--cm-ease), transform var(--cm-t-med) var(--cm-ease), opacity var(--cm-t-med), border-color var(--cm-t-med);
  animation: cmFadeInUp var(--cm-t-slow) var(--cm-ease) backwards;
}
.cm-post:hover { box-shadow: var(--cm-shadow-md); border-color: rgba(37,99,235,.14); }
.cm-post.cm-post-removing { opacity: 0; transform: scale(.97) translateY(-6px); }
.cm-reshare-banner { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; font-weight: 700; color: var(--text-muted); margin-bottom: 12px; }
.cm-reshare-banner i { color: var(--emerald,#00c9a7); }
.cm-reshare-comment { font-size: 0.85rem; color: var(--text-dim); margin: -6px 0 12px; padding-left: 2px; }

.cm-post-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 13px; }
.cm-avatar { box-sizing: border-box; width: 40px; height: 40px; border-radius: 50%; background: var(--gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; transition: transform var(--cm-t-fast) var(--cm-ease-bounce); position: relative; }
.cm-online-dot { position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid var(--card); }
.cm-clickable-author .cm-avatar, .cm-post-head > .cm-avatar { cursor: pointer; }
.cm-post-head > .cm-avatar:hover { transform: scale(1.06); }
/* subtle IG-style gradient ring on post author avatars */
.cm-post-head > .cm-avatar { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--coral); }
.cm-post-meta { flex: 1; min-width: 0; }
.cm-post-author { font-weight: 800; font-size: 0.95rem; color: var(--text-main); letter-spacing: -.005em; }
.cm-post-time { font-size: 0.7rem; color: var(--text-muted); font-weight: 500; margin-top: 1px; }
.cm-follow-btn { font-size: 0.72rem; font-weight: 700; padding: 5px 13px; border-radius: 99px; border: 1.5px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; flex-shrink: 0; transition: all var(--cm-t-fast) var(--cm-ease); }
.cm-follow-btn:hover { border-color: var(--coral); color: var(--coral); }
.cm-follow-btn.following { color: var(--coral); border-color: var(--coral); }
.cm-post-menu-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px 8px; font-size: 0.9rem; flex-shrink: 0; border-radius: 50%; transition: background var(--cm-t-fast) var(--cm-ease); min-width: 34px; min-height: 34px; }
.cm-post-menu-btn:hover { background: var(--bg-alt); color: var(--text-main); }

.cm-feeling-line { font-size: 0.82rem; color: var(--text-dim); margin: -4px 0 10px; }
.cm-post-body { font-size: 0.94rem; color: var(--text-main); line-height: 1.68; white-space: pre-wrap; word-break: break-word; margin-bottom: 14px; }

.cm-post-actions { display: flex; align-items: center; gap: 2px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border); position: relative; z-index: 1; }
.cm-action-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 99px;
  background: none; border: none; color: var(--text-dim); font-size: 0.81rem; font-weight: 700; cursor: pointer;
  min-height: 38px; transition: background var(--cm-t-fast) var(--cm-ease), color var(--cm-t-fast) var(--cm-ease), transform var(--cm-t-fast) var(--cm-ease-bounce);
}
.cm-action-btn:hover { background: var(--bg-alt); color: var(--text-main); }
.cm-action-btn:active { transform: scale(.93); }
.cm-action-btn.liked { color: #ef4444; }
.cm-action-btn.reshared { color: var(--emerald,#00c9a7); }
@keyframes cmHeartPop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.cm-action-btn.liked i, .cm-comment-action.liked i { display: inline-block; animation: cmHeartPop .4s var(--cm-ease-bounce); }
.cm-rx-stack { display: inline-flex; margin-right: -2px; }
.cm-rx-stack-icon { font-size: .78rem; margin-left: -5px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.cm-rx-stack-icon:first-child { margin-left: 0; }
.cm-rx-pop { animation: cmRxPop .35s var(--cm-ease-bounce); }
@keyframes cmRxPop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* ════ COMMENTS (item 9) ════ */
.cm-comments { max-height: 0; overflow: hidden; opacity: 0; margin-top: 0; padding-top: 0; border-top: 0 solid var(--border); transition: max-height var(--cm-t-slow) var(--cm-ease), opacity var(--cm-t-med) var(--cm-ease), margin-top var(--cm-t-med) var(--cm-ease), padding-top var(--cm-t-med) var(--cm-ease); }
.cm-comments.open { max-height: 3000px; opacity: 1; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.cm-comment-item { display: flex; gap: 10px; margin-bottom: 14px; animation: cmFadeInUp var(--cm-t-med) var(--cm-ease); }
.cm-comment-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 700; flex-shrink: 0; cursor: pointer; }
.cm-comment-item.is-reply { margin-left: 38px; position: relative; }
.cm-comment-item.is-reply::before { content: ''; position: absolute; left: -20px; top: 14px; width: 14px; height: 1px; background: var(--border); }
.cm-comment-bubble { background: var(--bg-alt); border-radius: 4px 16px 16px 16px; padding: 10px 14px; flex: 1; min-width: 0; transition: background var(--cm-t-fast) var(--cm-ease), transform var(--cm-t-fast) var(--cm-ease-bounce); }
.cm-comment-item:hover .cm-comment-bubble { background: var(--border); }
.cm-comment-avatar { transition: transform var(--cm-t-fast) var(--cm-ease-bounce); }
.cm-comment-avatar:hover { transform: scale(1.08); }
.cm-comment-name { font-size: 0.75rem; font-weight: 800; color: var(--text-main); }
.cm-comment-text { font-size: 0.85rem; color: var(--text-main); line-height: 1.55; word-break: break-word; margin-top: 2px; }
.cm-comment-input-row { display: flex; gap: 8px; margin-top: 10px; }
.cm-comment-input { flex: 1; padding: 10px 14px; border-radius: 99px; border: 1.5px solid var(--border); background: var(--bg-alt); color: var(--text-main); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.84rem; outline: none; min-height: 38px; box-sizing: border-box; transition: border-color var(--cm-t-fast) var(--cm-ease); }
.cm-comment-input:focus { border-color: var(--coral); }
.cm-comment-send { width: 38px; height: 38px; border-radius: 50%; background: var(--gradient); color: #fff; border: none; cursor: pointer; flex-shrink: 0; transition: transform var(--cm-t-fast) var(--cm-ease-bounce); }
.cm-comment-send:active { transform: scale(.9); }

.cm-comment-actions-row { display: flex; align-items: center; gap: 14px; margin-top: 4px; padding-left: 3px; flex-wrap: wrap; }
.cm-comment-meta-time { font-size: 0.7rem; color: var(--text-muted); font-weight: 500; }
.cm-comment-edited-tag { margin-left: 4px; }
.cm-comment-action { background: none; border: none; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); cursor: pointer; padding: 2px 0; display: inline-flex; align-items: center; gap: 4px; min-height: 30px; transition: color var(--cm-t-fast) var(--cm-ease); }
.cm-comment-action:hover { color: var(--text-main); }
.cm-comment-action.liked { color: #ef4444; }
.cm-comment-edit-input { width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--coral); background: var(--card); color: var(--text-main); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.84rem; outline: none; margin-top: 4px; resize: vertical; animation: cmPopIn var(--cm-t-fast) var(--cm-ease-bounce); }
.cm-reply-target-chip { display: flex; align-items: center; justify-content: space-between; background: var(--bg-alt); border-radius: 12px; padding: 7px 12px; margin-bottom: 8px; font-size: 0.76rem; color: var(--text-dim); animation: cmSlideDown var(--cm-t-fast) var(--cm-ease); }
.cm-reply-target-chip button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 4px; }

.cm-empty { text-align: center; padding: 56px 24px; background: var(--card); border: 1px dashed var(--border); border-radius: var(--cm-radius); color: var(--text-dim); }
.cm-empty .ic { font-size: 2.6rem; margin-bottom: 14px; display: block; }
.cm-empty h3 { font-family: 'Syne', sans-serif; font-size: 1.05rem; color: var(--text-main); margin-bottom: 6px; }
.cm-empty p { font-size: 0.85rem; line-height: 1.55; max-width: 320px; margin: 0 auto 16px; }
.cm-empty-cta { display: inline-flex; align-items: center; gap: 7px; padding: 10px 22px; border-radius: 99px; background: var(--gradient); color: #fff; border: none; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.cm-load-more { text-align: center; margin-top: 4px; }
.cm-load-more button { padding: 9px 20px; border-radius: 99px; border: 1.5px solid var(--border); background: var(--card); color: var(--text-dim); font-weight: 600; font-size: 0.82rem; cursor: pointer; transition: all var(--cm-t-fast) var(--cm-ease); }
.cm-load-more button:hover { border-color: var(--coral); color: var(--coral); }

/* ════ MODALS ════ */
.cm-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(2px); z-index: 9999; align-items: center; justify-content: center; padding: 20px; }
.cm-modal-overlay.show { display: flex; animation: cmFadeIn var(--cm-t-fast) var(--cm-ease); }
.cm-modal-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--cm-radius); padding: 26px; max-width: 380px; width: 100%; box-shadow: var(--cm-shadow-lg); animation: cmPopIn var(--cm-t-med) var(--cm-ease-bounce); }
.cm-modal-box h3 { font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
.cm-modal-box p { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 14px; }
.cm-modal-box textarea { width: 100%; box-sizing: border-box; padding: 10px 13px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg-alt); color: var(--text-main); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.85rem; min-height: 70px; resize: vertical; outline: none; margin-bottom: 14px; }
.cm-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.cm-safety-note { font-size: 0.74rem; color: var(--text-muted); text-align: center; margin: 20px 0 4px; line-height: 1.6; }

/* ════ AVATARS / BADGES ════ */
.cm-avatar, .cm-comment-avatar { position: relative; overflow: hidden; }
.cm-avatar img, .cm-comment-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cm-badge { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; margin-left: 4px; font-size: 8px; color: #fff; vertical-align: middle; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.cm-clickable-author { cursor: pointer; transition: opacity var(--cm-t-fast) var(--cm-ease); }
.cm-clickable-author:hover { text-decoration: underline; opacity: .85; }

/* ════ REACTIONS ════ */
.cm-reaction-wrap { position: relative; display: inline-flex; }
.cm-rx-icon { font-size: 0.98rem; line-height: 1; display: inline-block; transition: transform var(--cm-t-fast) var(--cm-ease-bounce); }
.cm-reaction-btn:hover .cm-rx-icon { transform: scale(1.15) rotate(-6deg); }
.cm-action-btn.rx-like { color: #2563EB; }
.cm-action-btn.rx-love { color: #ef4444; }
.cm-action-btn.rx-funny, .cm-action-btn.rx-wow { color: #f59e0b; }
.cm-action-btn.rx-respect { color: #6c3ce1; }
.cm-action-btn.rx-fire { color: #f97316; }
.cm-reaction-picker {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 10px; background: var(--card); border: 1px solid var(--border);
  border-radius: 99px; padding: 7px 9px; display: flex; gap: 3px; box-shadow: var(--cm-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.85); transform-origin: bottom left;
  transition: opacity var(--cm-t-fast) var(--cm-ease), transform var(--cm-t-fast) var(--cm-ease-bounce), visibility var(--cm-t-fast);
  z-index: 40;
}
.cm-reaction-picker.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.cm-reaction-picker button { background: none; border: none; font-size: 1.4rem; padding: 5px 6px; border-radius: 50%; cursor: pointer; line-height: 1; transition: transform var(--cm-t-fast) var(--cm-ease-bounce); }
.cm-reaction-picker button:hover, .cm-reaction-picker button:focus-visible { transform: scale(1.4) translateY(-6px); }
.cm-reaction-picker button:active { transform: scale(1.15); }

.cm-post-media, .cm-post-body { position: relative; }
.cm-dtap-heart { position: absolute; top: 50%; left: 50%; font-size: 64px; color: var(--coral); text-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 4px 16px rgba(0,0,0,.25); pointer-events: none; transform: translate(-50%,-50%) scale(0); opacity: 0; z-index: 5; }
.cm-dtap-heart.burst { animation: cmDtapBurst .75s var(--cm-ease) forwards; }
@keyframes cmDtapBurst { 0%{transform:translate(-50%,-50%) scale(0);opacity:0;} 18%{transform:translate(-50%,-50%) scale(1.15);opacity:1;} 32%{transform:translate(-50%,-50%) scale(1);opacity:1;} 100%{transform:translate(-50%,-50%) scale(1);opacity:0;} }

/* ════ MEDIA (item 12 — blur placeholder → sharp) ════ */
.cm-post-media { margin: 6px 0 14px; border-radius: 16px; overflow: hidden; background: linear-gradient(110deg, var(--bg-alt) 8%, var(--border) 18%, var(--bg-alt) 33%); background-size: 200% 100%; animation: cmShimmer 1.4s linear infinite; }
.cm-post-media img, .cm-post-media video { width: 100%; max-height: 460px; object-fit: cover; display: block; }
.cm-post-media img { opacity: 0; filter: blur(14px); transform: scale(1.03); transition: opacity var(--cm-t-slow) var(--cm-ease), filter var(--cm-t-slow) var(--cm-ease), transform var(--cm-t-slow) var(--cm-ease); cursor: pointer; }
.cm-post-media img.loaded { opacity: 1; filter: blur(0); transform: scale(1); }
.cm-post-media:has(img.loaded), .cm-post-media:has(video) { animation: none; background: var(--bg-alt); }

.cm-media-carousel { position: relative; margin: 6px 0 14px; border-radius: 16px; overflow: hidden; background: #000; }
.cm-media-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cm-media-track::-webkit-scrollbar { display: none; }
.cm-media-slide { flex: 0 0 100%; scroll-snap-align: center; max-height: 460px; display: flex; align-items: center; justify-content: center; background: #000; }
.cm-media-slide img, .cm-media-slide video { width: 100%; max-height: 460px; object-fit: cover; display: block; opacity: 0; filter: blur(14px); transition: opacity var(--cm-t-slow) var(--cm-ease), filter var(--cm-t-slow) var(--cm-ease); cursor: pointer; }
.cm-media-slide img.loaded, .cm-media-slide video.loaded { opacity: 1; filter: blur(0); }
.cm-media-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.cm-media-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: all var(--cm-t-fast) var(--cm-ease); }
.cm-media-dots span.active { background: #fff; width: 18px; border-radius: 3px; }
.cm-media-count-badge { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; backdrop-filter: blur(4px); }
.cm-doc-card { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; padding: 13px 15px; background: var(--bg-alt); border-radius: 16px; text-decoration: none; transition: background var(--cm-t-fast) var(--cm-ease); }
.cm-doc-card:hover { background: rgba(239,68,68,.08); }
.cm-doc-card i { font-size: 1.7rem; color: #ef4444; flex-shrink: 0; }
.cm-doc-card .cm-doc-name { font-size: 0.84rem; font-weight: 700; color: var(--text-main); word-break: break-word; }
.cm-doc-card .cm-doc-sub { font-size: 0.71rem; color: var(--text-muted); }

/* ════ POLLS (item 11) ════ */
.cm-poll-card { margin: 6px 0 14px; }
.cm-poll-question { font-size: 0.92rem; font-weight: 800; color: var(--text-main); margin-bottom: 11px; }
.cm-poll-opt { position: relative; border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 13px; margin-bottom: 8px; cursor: pointer; overflow: hidden; background: var(--card); transition: border-color var(--cm-t-fast) var(--cm-ease), transform var(--cm-t-fast) var(--cm-ease); }
.cm-poll-opt:not([onclick=""]):hover { border-color: var(--coral); transform: translateX(2px); }
.cm-poll-opt-fill { position: absolute; inset: 0; background: rgba(37,99,235,0.12); width: 0%; transition: width .7s var(--cm-ease); z-index: 0; }
.cm-poll-opt.voted-mine { border-color: #2563EB; }
.cm-poll-opt.winning { border-color: #fbbf24; }
.cm-poll-opt.winning .cm-poll-opt-fill { background: rgba(251,191,36,.16); }
.cm-poll-opt-row { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; color: var(--text-main); font-weight: 500; }
.cm-poll-opt-pct { font-weight: 800; flex-shrink: 0; }
.cm-poll-meta { font-size: 0.73rem; color: var(--text-muted); margin-top: 4px; }

/* ════ ACTION SHEET ITEMS ════ */
.cm-sheet-action-item { display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; padding: 15px 4px; background: none; border: none; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.92rem; font-weight: 600; color: var(--text-main); cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; min-height: 44px; transition: background var(--cm-t-fast) var(--cm-ease); }
.cm-sheet-action-item:hover { background: var(--bg-alt); }
.cm-sheet-action-item:last-child { border-bottom: none; }
.cm-sheet-action-item i { width: 20px; text-align: center; color: var(--text-dim); font-size: 0.98rem; }
.cm-sheet-action-item.danger { color: #ef4444; }
.cm-sheet-action-item.danger i { color: #ef4444; }

/* ════ SKELETON (premium shimmer) ════ */
.cm-skel-post { background: var(--card); border: 1px solid var(--border); border-radius: var(--cm-radius); padding: 20px 20px 16px; }
.cm-skel-row { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.cm-skel-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.cm-skel-lines { flex: 1; }
.cm-skel-line { height: 9px; border-radius: 5px; margin-bottom: 7px; }
.cm-skel-line.w40 { width: 40%; } .cm-skel-line.w60 { width: 60%; } .cm-skel-line.w80 { width: 80%; } .cm-skel-line.w100 { width: 100%; }
.cm-skel-actions { display: flex; gap: 18px; margin-top: 14px; }
.cm-skel-pill { width: 54px; height: 22px; border-radius: 99px; }

/* ════ FLOATING COMPOSE BUTTON (item 15) ════ */
.cm-fab {
  position: fixed; right: 18px; bottom: 86px; width: 58px; height: 58px; border-radius: 50%;
  background: var(--gradient); color: #fff; border: none; font-size: 1.4rem; box-shadow: 0 12px 28px rgba(37,99,235,.4), 0 4px 10px rgba(37,99,235,.2);
  display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 50;
  transition: transform var(--cm-t-med) var(--cm-ease-bounce), opacity var(--cm-t-med) var(--cm-ease), box-shadow var(--cm-t-fast) var(--cm-ease);
  animation: cmFabIn .45s var(--cm-ease-bounce) .15s backwards;
}
.cm-fab:hover { box-shadow: 0 16px 34px rgba(37,99,235,.46), 0 6px 14px rgba(37,99,235,.24); }
.cm-fab:active { transform: scale(.88); }
.cm-fab.cm-fab-hidden { transform: translateY(120px) scale(.7); opacity: 0; pointer-events: none; }
@keyframes cmFabIn { from { transform: scale(0) rotate(-45deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@media (max-width: 768px) { .cm-fab { display: flex; } }

/* ════ REALTIME / FEED TABS / HASHTAGS ════ */
.cm-new-posts-banner { display: none; text-align: center; margin-bottom: 14px; }
.cm-new-posts-banner button { padding: 9px 20px; border-radius: 99px; background: var(--gradient); color: #fff; border: none; font-weight: 700; font-size: 0.84rem; cursor: pointer; box-shadow: 0 6px 16px rgba(37,99,235,.25); animation: cmFadeInDown var(--cm-t-med) var(--cm-ease); }
.cm-typing-line { font-size: 0.72rem; color: var(--text-muted); font-style: italic; margin: -2px 0 8px 2px; min-height: 14px; }

.cm-feed-tabs { display: flex; gap: 6px; margin-bottom: 16px; background: var(--bg-alt); padding: 4px; border-radius: 99px; }
.cm-feed-tab { flex: 1; text-align: center; padding: 9px 0; border-radius: 99px; border: none; background: none; color: var(--text-dim); font-weight: 700; font-size: 0.81rem; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; transition: all var(--cm-t-fast) var(--cm-ease); min-height: 36px; }
.cm-feed-tab.active { background: var(--card); color: var(--text-main); box-shadow: var(--cm-shadow-sm); }

.cm-trending-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; }
.cm-trending-row::-webkit-scrollbar { display: none; }
.cm-trending-chip { flex-shrink: 0; padding: 8px 15px; border-radius: 99px; background: var(--card); border: 1.5px solid var(--border); font-size: 0.79rem; font-weight: 700; color: var(--text-dim); cursor: pointer; white-space: nowrap; transition: all var(--cm-t-fast) var(--cm-ease-bounce); }
.cm-trending-chip:hover { border-color: var(--coral); color: var(--coral); transform: translateY(-1px); }
.cm-trending-chip.active { background: var(--gradient); color: #fff; border-color: transparent; }
.cm-hashtag-filter-banner { display: flex; align-items: center; justify-content: space-between; background: var(--bg-alt); padding: 10px 15px; border-radius: 14px; margin-bottom: 14px; font-size: 0.83rem; color: var(--text-main); animation: cmFadeInDown var(--cm-t-med) var(--cm-ease); }
.cm-hashtag-filter-banner button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.78rem; font-weight: 700; }
.cm-hashtag-link, .cm-mention-link { color: #2563EB; font-weight: 700; cursor: pointer; }

/* ════ MENTIONS AUTOCOMPLETE ════ */
.cm-mention-autocomplete { position: absolute; z-index: 30; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--cm-shadow-lg); max-height: 200px; overflow-y: auto; width: 260px; max-width: 84vw; display: none; }
.cm-mention-autocomplete.show { display: block; animation: cmSlideDown var(--cm-t-fast) var(--cm-ease); }
.cm-mention-item { display: flex; align-items: center; gap: 9px; padding: 9px 13px; cursor: pointer; transition: background var(--cm-t-fast) var(--cm-ease); }
.cm-mention-item:hover { background: var(--bg-alt); }
.cm-mention-item .cm-avatar { width: 26px; height: 26px; font-size: 0.6rem; }
.cm-mention-item-name { font-size: 0.82rem; font-weight: 700; color: var(--text-main); }
.cm-mention-item-user { font-size: 0.7rem; color: var(--text-muted); }

/* ════ STORIES (item 3) ════ */
.cm-stories-row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 16px; margin-bottom: 4px; scrollbar-width: none; }
.cm-stories-row::-webkit-scrollbar { display: none; }
.cm-story-item { flex-shrink: 0; width: 68px; text-align: center; cursor: pointer; background: none; border: none; font-family: 'Plus Jakarta Sans', sans-serif; transition: transform var(--cm-t-fast) var(--cm-ease-bounce); }
.cm-story-item:hover { transform: translateY(-2px); }
.cm-story-ring { width: 64px; height: 64px; border-radius: 50%; padding: 3px; background: var(--gradient); display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; position: relative; box-shadow: 0 4px 14px rgba(255,107,53,.22); transition: transform var(--cm-t-fast) var(--cm-ease-bounce), box-shadow var(--cm-t-fast) var(--cm-ease); }
.cm-story-item:hover .cm-story-ring { transform: scale(1.06); }
.cm-story-ring.seen { background: var(--border); box-shadow: none; }
.cm-story-ring-inner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 2.5px solid var(--card); position: relative; background: var(--gradient); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.88rem; }
.cm-story-ring-inner img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.cm-story-add-badge { position: absolute; bottom: -1px; right: -1px; width: 20px; height: 20px; border-radius: 50%; background: var(--coral); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; border: 2.5px solid var(--card); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.cm-story-label { font-size: 0.69rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 68px; font-weight: 600; }
.cm-story-item:first-child .cm-story-label { color: var(--text-main); font-weight: 700; }

.cm-story-viewer { display: none; position: fixed; inset: 0; background: #000; z-index: 10001; }
.cm-story-viewer.show { display: block; animation: cmFadeIn var(--cm-t-fast) var(--cm-ease); }
.cm-story-progress-row { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.cm-story-progress-bar { flex: 1; height: 2.5px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.cm-story-progress-fill { height: 100%; width: 0%; background: #fff; }
.cm-story-progress-fill.done { width: 100% !important; }
.cm-story-viewer-head { position: absolute; top: 22px; left: 14px; right: 14px; display: flex; align-items: center; gap: 10px; z-index: 3; }
.cm-story-viewer-meta { flex: 1; min-width: 0; }
.cm-story-viewer-name { color: #fff; font-weight: 700; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-story-viewer-time { color: rgba(255,255,255,.7); font-size: 0.7rem; }
.cm-story-viewer-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cm-story-viewer-close, .cm-story-viewer-delete { background: rgba(255,255,255,.15); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; flex-shrink: 0; min-width: 34px; transition: background var(--cm-t-fast) var(--cm-ease), transform var(--cm-t-fast) var(--cm-ease-bounce); }
.cm-story-viewer-close:hover, .cm-story-viewer-delete:hover { background: rgba(255,255,255,.28); }
.cm-story-viewer-close:active, .cm-story-viewer-delete:active { transform: scale(.92); }
.cm-story-viewer-delete { color: #ff6b6b; }
.cm-story-media-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cm-story-media-wrap img, .cm-story-media-wrap video { max-width: 100%; max-height: 100%; }
.cm-story-tap-zone { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 2; background: none; border: none; }
.cm-story-tap-prev { left: 0; } .cm-story-tap-next { right: 0; }
.cm-story-caption { position: absolute; bottom: 26px; left: 14px; right: 14px; color: #fff; font-size: 0.85rem; text-align: center; background: rgba(0,0,0,.35); padding: 9px 13px; border-radius: 14px; z-index: 3; }

/* ════ USER PROFILE OVERLAY (item 13) ════ */
.cm-pf-overlay { display: none; position: fixed; inset: 0; background: var(--bg); z-index: 10002; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cm-pf-overlay.show { display: block; animation: cmFadeIn var(--cm-t-fast) var(--cm-ease); }

/* Topbar: fixed-width back button + a title block that takes the rest of
   the row. No `order`/flex tricks — the DOM order IS the visual order.
   Title uses the same display font as the card name below (Syne) so the
   compact header and the large profile name read as one design system. */
.cm-pf-topbar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; background: var(--card); border-bottom: 1px solid var(--border);
}
.cm-pf-back-btn {
  background: none; border: none; color: var(--text-main); font-size: 1.05rem; cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex: 0 0 38px; transition: background var(--cm-t-fast) var(--cm-ease);
}
.cm-pf-back-btn:hover { background: var(--bg-alt); }
.cm-pf-topbar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.cm-pf-topbar-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Syne', 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.05rem;
  color: var(--text-main); line-height: 1.25;
}
.cm-pf-topbar-count { font-size: 0.76rem; color: var(--text-muted); line-height: 1.2; margin-top: 1px; }

/* Left-aligned, Twitter-style profile card. No cover banner — just a
   clean avatar + compact action button row, then name/handle/bio/meta.
   Each row gets exactly one deliberate margin-top; nothing else adds
   spacing (the previous extra gaps came from an unrelated sitewide
   [class*="profile-card"] mobile rule that no longer matches these
   renamed cm-pf-* classes). */
.cm-pf-card-wrap {
  padding: 18px 18px 14px; max-width: 560px; margin: 0 auto; box-sizing: border-box;
}

.cm-pf-head-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px;
}
.cm-pf-card-avatar {
  box-sizing: border-box; border-radius: 50% !important; overflow: hidden;
  width: 76px !important; height: 76px !important; min-width: 76px; min-height: 76px; max-width: 76px; max-height: 76px;
  aspect-ratio: 1 / 1 !important; flex: 0 0 76px;
  font-size: 1.7rem; border: 3px solid var(--border); box-shadow: var(--cm-shadow-sm);
  animation: cmProfileAvatarIn .5s var(--cm-ease-bounce) backwards;
}
.cm-pf-card-avatar img { border-radius: 50%; }
@keyframes cmProfileAvatarIn { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Action button (Edit profile / Follow): pill, thin border, background
   matches the card so it reads as part of it rather than a CTA slapped
   on top — same treatment in light or dark theme. Never stretches full
   width; sits compact next to the avatar. */
.cm-pf-action-btn {
  flex: 0 0 auto; align-self: flex-start; width: auto !important; margin-top: 8px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 18px; border-radius: 99px; font-weight: 700; font-size: 0.84rem; line-height: 1.2;
  cursor: pointer; text-decoration: none; transition: all var(--cm-t-fast) var(--cm-ease);
}
.cm-pf-action-btn.cm-follow-btn { padding: 8px 18px; font-size: 0.84rem; }
.cm-pf-edit-btn { background: var(--card); border: 1.5px solid var(--border); color: var(--text-main); }
.cm-pf-edit-btn:hover { border-color: var(--coral); color: var(--coral); }
.cm-pf-message-btn { background: var(--indigo); border: 1.5px solid var(--indigo); color: #fff; margin-right: 8px; }
.cm-pf-message-btn:hover { opacity: 0.9; }
.cm-pf-head-row { flex-wrap: wrap; }

/* Display name: same font family as the topbar title above. Wraps and
   shrinks instead of ever clipping or overflowing on long names. */
.cm-pf-card-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  font-family: 'Syne', 'Plus Jakarta Sans', sans-serif; font-weight: 800; line-height: 1.25;
  font-size: clamp(1.05rem, 5.5vw, 1.3rem);
  color: var(--text-main); word-break: break-word; overflow-wrap: anywhere; max-width: 100%;
  animation: cmFadeInUp var(--cm-t-med) var(--cm-ease) backwards; animation-delay: .05s;
}
.cm-pf-card-username {
  display: block; font-size: 0.85rem; line-height: 1.3; color: var(--text-muted);
  margin-top: 2px; word-break: break-word; overflow-wrap: anywhere;
  animation: cmFadeInUp var(--cm-t-med) var(--cm-ease) backwards; animation-delay: .08s;
}
.cm-pf-card-bio {
  display: block; font-size: 0.88rem; color: var(--text-dim); line-height: 1.45;
  margin-top: 10px; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}

/* Info rows (school / course / joined) — each on its own line with an
   icon from the site's existing Font Awesome set. A row that has no
   data is simply never rendered, so there's never an empty gap. */
.cm-pf-card-meta {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.82rem; color: var(--text-muted); margin-top: 10px;
}
.cm-pf-card-meta span { display: inline-flex; align-items: center; gap: 8px; line-height: 1.3; }
.cm-pf-card-meta i { width: 14px; text-align: center; color: var(--text-muted); flex-shrink: 0; }

/* Followers / Following — bold count, muted label, real DB values only. */
.cm-pf-card-stats {
  display: flex; gap: 18px; margin-top: 12px;
  font-size: 0.85rem; color: var(--text-muted); line-height: 1.3;
  animation: cmFadeInUp var(--cm-t-med) var(--cm-ease) backwards; animation-delay: .12s;
}
.cm-pf-card-stats strong { color: var(--text-main); font-weight: 800; }

.cm-pf-posts { padding: 10px 18px 40px; display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin: 0 auto; }
.cm-pf-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 0.85rem; }


/* ════ DESKTOP SIDEBARS (item 14) ════ */
.cm-sidebar-left, .cm-sidebar-right { display: none; }
.cm-sidebar-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--cm-radius); padding: 18px; box-shadow: var(--cm-shadow-sm); }
.cm-sidebar-card h4 { font-family: 'Syne', sans-serif; font-size: 0.83rem; font-weight: 700; color: var(--text-main); margin-bottom: 12px; }
.cm-sidebar-profile { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.cm-sidebar-profile .cm-avatar { width: 44px; height: 44px; font-size: 0.92rem; }
.cm-sidebar-profile-name { font-weight: 700; font-size: 0.87rem; color: var(--text-main); }
.cm-sidebar-profile-link { font-size: 0.75rem; color: var(--indigo); text-decoration: none; }
.cm-sidebar-shortcut { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 0.84rem; color: var(--text-dim); background: none; border: none; width: 100%; text-align: left; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; transition: color var(--cm-t-fast) var(--cm-ease); min-height: 38px; }
.cm-sidebar-shortcut:hover { color: var(--text-main); }
.cm-sidebar-shortcut i { width: 18px; text-align: center; color: var(--coral); }
.cm-sidebar-user-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-radius: 10px; transition: background var(--cm-t-fast) var(--cm-ease); }
.cm-sidebar-user-row:hover { background: var(--bg-alt); }
.cm-sidebar-user-row .cm-avatar { width: 34px; height: 34px; font-size: 0.72rem; flex-shrink: 0; }
.cm-sidebar-user-info { flex: 1; min-width: 0; }
.cm-sidebar-user-name { font-size: 0.8rem; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-sidebar-user-sub { font-size: 0.69rem; color: var(--text-muted); }
.cm-sidebar-follow-btn { font-size: 0.69rem; font-weight: 700; padding: 5px 11px; border-radius: 99px; border: 1.5px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; flex-shrink: 0; transition: all var(--cm-t-fast) var(--cm-ease); }
.cm-sidebar-follow-btn:hover { border-color: var(--coral); color: var(--coral); }
.cm-sidebar-rank-badge { width: 22px; text-align: center; font-size: 0.78rem; font-weight: 800; color: var(--text-muted); flex-shrink: 0; }

@media (min-width: 1100px) {
  .cm-wrap { max-width: 1140px; padding: 0 24px 90px; }
  .cm-hero { text-align: left; padding: 30px 0 20px; }
  .cm-hero p { margin: 0; }
  #cm-main-wrap, #cm-gate-wrap { display: grid; grid-template-columns: 250px minmax(0,600px) 270px; gap: 26px; align-items: start; }
  #cm-gate-wrap { grid-template-columns: 1fr; }
  .cm-sidebar-left, .cm-sidebar-right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 90px; }
  .cm-sidebar-left { grid-column: 1; }
  .cm-sidebar-right { grid-column: 3; }
  #cm-main-wrap > .cm-stories-row,
  #cm-main-wrap > input,
  #cm-main-wrap > .cm-compose,
  #cm-main-wrap > .cm-trending-row,
  #cm-main-wrap > .cm-hashtag-filter-banner,
  #cm-main-wrap > .cm-feed-tabs,
  #cm-main-wrap > .cm-new-posts-banner,
  #cm-main-wrap > .cm-feed,
  #cm-main-wrap > .cm-load-more,
  #cm-main-wrap > .cm-safety-note,
  #cm-main-wrap > .cm-fab { grid-column: 2; }
  .cm-fab { display: none !important; }
}

/* ════ LIGHTBOX ════ */
.cm-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 10000; align-items: center; justify-content: center; }
.cm-lightbox.show { display: flex; animation: cmFadeIn var(--cm-t-fast) var(--cm-ease); }
.cm-lightbox-img { max-width: 94vw; max-height: 88vh; touch-action: none; user-select: none; transition: transform var(--cm-t-fast) var(--cm-ease); }
.cm-lightbox-close { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; border: none; font-size: 1.1rem; cursor: pointer; z-index: 2; transition: background var(--cm-t-fast) var(--cm-ease); }
.cm-lightbox-close:hover { background: rgba(255,255,255,.28); }
.cm-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; border: none; font-size: 1.1rem; cursor: pointer; z-index: 2; transition: background var(--cm-t-fast) var(--cm-ease); }
.cm-lightbox-nav:hover { background: rgba(255,255,255,.28); }
.cm-lightbox-prev { left: 14px; } .cm-lightbox-next { right: 14px; }
.cm-lightbox-counter { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.78rem; background: rgba(255,255,255,.15); padding: 4px 12px; border-radius: 99px; z-index: 2; }

/* ════ ANIMATIONS ════ */
@keyframes cmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmFadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cmFadeInDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cmPopIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes cmSlideDown { from { opacity: 0; transform: translateY(-6px); max-height: 0; } to { opacity: 1; transform: translateY(0); max-height: 400px; } }
@keyframes cmShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes cmGradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.skeleton { background: linear-gradient(110deg, var(--bg-alt) 8%, var(--border) 18%, var(--bg-alt) 33%); background-size: 200% 100%; animation: cmShimmer 1.4s linear infinite; border-radius: 8px; }

/* ════ ACCESSIBILITY (item 22) ════ */
.cm-action-btn:focus-visible, .cm-post-menu-btn:focus-visible, .cm-follow-btn:focus-visible,
.cm-comment-action:focus-visible, .cm-reaction-picker button:focus-visible, .cm-post-btn:focus-visible,
.cm-compose-tool:focus-visible, .cm-compose-tool-labeled:focus-visible, .cm-trending-chip:focus-visible,
.cm-feed-tab:focus-visible, .cm-story-item:focus-visible, .cm-sheet-action-item:focus-visible,
.cm-clickable-author:focus-visible {
  outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 6px;
}
.cm-comment-input:focus-visible, .cm-compose textarea:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* ════════════════════════════════════════════════════════
   COMPOSER MODAL (FAB-triggered, replaces inline compose box)
════════════════════════════════════════════════════════ */
.cm-composer-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(15,15,20,.55); backdrop-filter: blur(3px);
  align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px;
}
.cm-composer-modal-overlay.show { display: flex; animation: cmFadeIn var(--cm-t-fast) var(--cm-ease); }
.cm-composer-modal {
  width: 100%; max-width: 560px; max-height: 84vh; overflow-y: auto;
  background: var(--card); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: cmPopIn var(--cm-t-med) var(--cm-ease-bounce);
}
.cm-composer-modal-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--card);
  font-weight: 700; font-size: 1rem; color: var(--text-main); border-radius: 18px 18px 0 0;
}
.cm-composer-modal-close {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--bg-alt);
  color: var(--text-dim); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--cm-t-fast) var(--cm-ease);
}
.cm-composer-modal-close:hover { background: var(--border); }
.cm-composer-modal .cm-compose { border: none; border-radius: 0; box-shadow: none; padding: 16px 18px 18px; }

/* ════════════════════════════════════════════════════════
   HEART-ONLY REACTION
════════════════════════════════════════════════════════ */
.cm-reaction-btn .cm-rx-icon { color: var(--text-muted); transition: color var(--cm-t-fast) var(--cm-ease); }
.cm-reaction-btn.rx-heart .cm-rx-icon { color: #e0245e; }
.cm-reaction-btn.rx-heart { color: #e0245e; }
.cm-rx-pop .cm-rx-icon { animation: cmHeartPop .35s var(--cm-ease-bounce); }
@keyframes cmHeartPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ════════════════════════════════════════════════════════
   VIEW COUNT
════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   LONG POST TRUNCATION ("See more")
════════════════════════════════════════════════════════ */
.cm-post-body-clamped { position: relative; }
.cm-see-more-btn {
  background: none; border: none; padding: 0; margin-left: 2px; cursor: pointer;
  color: var(--coral); font-weight: 700; font-size: inherit; font-family: inherit;
}
.cm-see-more-btn:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════
   PROFILE OVERLAY: clickable stats
════════════════════════════════════════════════════════ */
.cm-clickable-stat { cursor: pointer; }
.cm-clickable-stat:hover strong { color: var(--coral); }
.cm-clickable-stat:hover { color: var(--coral); }

/* ════════════════════════════════════════════════════════
   PROFILE TABS (Posts / Comments / Saved) — icon + label
════════════════════════════════════════════════════════ */
.cm-pf-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  background: var(--bg); max-width: 560px; margin: 0 auto;
}
.cm-pf-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 8px; background: none; border: none; border-bottom: 2.5px solid transparent;
  color: var(--text-muted); font-weight: 700; font-size: 0.8rem; cursor: pointer;
  transition: color var(--cm-t-fast) var(--cm-ease), border-color var(--cm-t-fast) var(--cm-ease), background var(--cm-t-fast) var(--cm-ease);
}
.cm-pf-tab i { font-size: 0.9em; }
.cm-pf-tab:hover { color: var(--text-main); background: var(--bg-alt); }
.cm-pf-tab.active { color: var(--coral); border-bottom-color: var(--coral); }


.cm-pf-comment-card {
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; cursor: pointer;
  background: var(--card); transition: background var(--cm-t-fast) var(--cm-ease);
}
.cm-pf-comment-card:hover { background: var(--bg-alt); }
.cm-pf-comment-body { font-size: 0.9rem; color: var(--text-main); margin-bottom: 6px; white-space: pre-wrap; }
.cm-pf-comment-context { font-size: 0.76rem; color: var(--text-muted); }

/* ════════════════════════════════════════════════════════
   FOLLOWERS / FOLLOWING LIST SHEET
════════════════════════════════════════════════════════ */
.cm-follow-list-overlay {
  display: none; position: fixed; inset: 0; z-index: 10011;
  background: rgba(15,15,20,.55); backdrop-filter: blur(3px);
  align-items: flex-end; justify-content: center;
}
.cm-follow-list-overlay.show { display: flex; animation: cmFadeIn var(--cm-t-fast) var(--cm-ease); }
.cm-follow-list-sheet {
  width: 100%; max-width: 480px; max-height: 76vh; background: var(--card);
  border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden;
  animation: cmSlideUpSheet var(--cm-t-med) var(--cm-ease);
}
@media (min-width: 640px) {
  .cm-follow-list-overlay { align-items: center; }
  .cm-follow-list-sheet { border-radius: 18px; max-height: 70vh; }
}
@keyframes cmSlideUpSheet { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cm-follow-list-head {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  border-bottom: 1px solid var(--border); font-weight: 700; font-size: 1rem; color: var(--text-main);
}
.cm-follow-list-head button {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--bg-alt);
  color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cm-follow-list-body { overflow-y: auto; padding: 6px 8px; -webkit-overflow-scrolling: touch; }
.cm-follow-list-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; }
.cm-follow-list-row:hover { background: var(--bg-alt); }
.cm-follow-list-info { flex: 1; min-width: 0; cursor: pointer; }
.cm-follow-list-name { font-weight: 700; font-size: 0.9rem; color: var(--text-main); display: flex; align-items: center; gap: 4px; }
.cm-follow-list-username { font-size: 0.78rem; color: var(--text-muted); }