/**
 * Jere — social layer (v6.0)
 * Builds on the Velocity Flux tokens in vp-theme-v3.css (--vp-*). Nothing here
 * restyles an existing earning page; every selector is prefixed jr-.
 * Mobile first: base rules are for phones, widths are added upward.
 */

:root {
  --jr-like: #e11d48;
  --jr-card-pad: 14px;
  --jr-avatar-ring: 0 0 0 2px var(--vp-card);
}

/* ── Page column ─────────────────────────────────────────────── */
.jr-page { max-width: 680px; margin: 0 auto; }
.jr-page > * + * { margin-top: var(--vp-card-gap); }
.jr-page-title { font-size: 1.4rem; font-weight: 800; margin: 0; }
.jr-muted { color: var(--vp-text-muted); }
.jr-link-btn {
  background: none; border: 0; padding: .35rem 0; color: var(--vp-text-muted);
  font-weight: 600; font-size: .85rem; display: inline-flex; gap: .35rem; align-items: center;
}
.jr-link-btn:hover { color: var(--vp-primary); }
.jr-back { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; color: var(--vp-text-muted); }
.jr-back:hover { color: var(--vp-primary); }
.jr-section { padding: var(--jr-card-pad) 16px; }
.jr-section-title { font-size: .95rem; font-weight: 800; margin: 0 0 .6rem; }
.jr-only-narrow { display: flex; }
@media (min-width: 1400px) { .jr-only-narrow { display: none !important; } }

/* ── Brand line (homepage hierarchy: name + slogan) ──────────── */
.jr-brandline { display: flex; align-items: baseline; gap: .6rem; padding: 0 2px; }
.jr-brandline-name { font-family: var(--vp-font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: var(--vp-primary); }
.jr-brandline-slogan { font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--vp-text-muted); }

/* ── Avatars and names ───────────────────────────────────────── */
.jr-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--vp-surface); }
.jr-verified { color: var(--vp-primary); font-size: .9em; }
.jr-handle { color: var(--vp-text-muted); font-size: .85rem; font-weight: 500; }
.jr-icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent;
  display: grid; place-items: center; color: var(--vp-text-muted); font-size: 1.1rem;
}
.jr-icon-btn:hover, .jr-icon-btn[aria-expanded="true"] { background: var(--vp-surface); color: var(--vp-text); }

/* Bootstrap's .card is a column flexbox. Cards laid out as a row must say so,
   or flex-basis widths turn into heights. */
.jr-composer-card, .jr-bonus.card, .jr-search-form.card, .jr-hashtag-head.card { flex-direction: row; }

/* ── Composer card ───────────────────────────────────────────── */
.jr-composer-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; }
.jr-composer-trigger {
  flex: 1 1 200px; min-height: 44px; text-align: left; border: 0; border-radius: var(--vp-radius-pill);
  background: var(--vp-surface-low); color: var(--vp-text-muted); padding: 0 16px; font-size: .95rem;
}
.jr-composer-trigger:hover { background: var(--vp-surface); }
.jr-composer-quick { display: flex; gap: 4px; width: 100%; border-top: 1px solid var(--vp-border); padding-top: 8px; }
.jr-composer-quick button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  border: 0; background: transparent; border-radius: var(--vp-radius-sm); font-weight: 600; color: var(--vp-text-muted);
}
.jr-composer-quick button:hover { background: var(--vp-surface-low); }
.jr-composer-quick i { font-size: 1.25rem; }

/* ── Quick earning strip + chips (narrow screens) ────────────── */
.jr-quickbar, .jr-chips { gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; -webkit-overflow-scrolling: touch; }
.jr-quickbar::-webkit-scrollbar, .jr-chips::-webkit-scrollbar { display: none; }
.jr-quick {
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: var(--vp-radius-pill); background: var(--vp-card); border: 1px solid var(--vp-border);
  font-weight: 600; font-size: .85rem; color: var(--vp-text); text-decoration: none; white-space: nowrap;
}
.jr-quick i { color: var(--vp-primary); }
.jr-quick-wallet { background: var(--vp-primary); border-color: var(--vp-primary); color: #fff; }
.jr-quick-wallet i { color: #fff; }
.jr-quick.is-ready { border-color: var(--vp-success); color: var(--vp-success); }
.jr-quick.is-ready i { color: var(--vp-success); }
.jr-chips { display: flex; }
.jr-chips-wrap { flex-wrap: wrap; overflow: visible; }
.jr-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--vp-radius-pill);
  background: var(--vp-primary-lt); color: var(--vp-primary); font-weight: 700; font-size: .85rem; text-decoration: none;
}
.jr-chip small { color: var(--vp-text-muted); font-weight: 600; }
.jr-chip:hover { background: var(--vp-primary); color: #fff; }
.jr-chip:hover small { color: rgba(255,255,255,.8); }

.jr-bonus {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: #fff; border: 0;
  background: linear-gradient(135deg, var(--vp-success), #16a34a);
}
.jr-bonus > i { font-size: 1.6rem; }
.jr-bonus span:nth-child(2) { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.jr-bonus small { opacity: .85; }

/* ── Tabs ────────────────────────────────────────────────────── */
.jr-tabs {
  display: flex; gap: 4px; background: var(--vp-card); border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius); padding: 4px; overflow-x: auto; scrollbar-width: none;
}
.jr-tab {
  flex: 1 0 auto; text-align: center; padding: 9px 14px; border-radius: calc(var(--vp-radius) - 4px);
  font-weight: 700; font-size: .9rem; color: var(--vp-text-muted); text-decoration: none; white-space: nowrap;
}
.jr-tab:hover { background: var(--vp-surface-low); color: var(--vp-text); }
.jr-tab.active { background: var(--vp-primary-lt); color: var(--vp-primary); }
.jr-profile-tabs { border: 0; border-top: 1px solid var(--vp-border); border-radius: 0; margin-top: 12px; }

/* ── Post card ───────────────────────────────────────────────── */
.jr-feed { display: flex; flex-direction: column; gap: var(--vp-card-gap); }
.jr-post.card { padding: 0; overflow: visible; content-visibility: auto; contain-intrinsic-size: auto 480px; }
.jr-repost-label { padding: 10px 16px 0; font-size: .8rem; font-weight: 600; color: var(--vp-text-muted); }
.jr-repost-label a { color: inherit; }
.jr-post-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px 0 14px; }
.jr-post-meta { flex: 1; min-width: 0; }
.jr-post-author { font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-post-author a { color: var(--vp-text); text-decoration: none; }
.jr-post-author a:hover { text-decoration: underline; }
.jr-post-sub { font-size: .78rem; color: var(--vp-text-muted); display: flex; gap: 5px; align-items: center; }
.jr-post-sub a { color: inherit; text-decoration: none; }
.jr-post-sub a:hover { text-decoration: underline; }
.jr-post-body { padding: 8px 16px 0; }
.jr-post-body:empty { display: none; }
.jr-post-text { font-size: .98rem; line-height: 1.55; overflow-wrap: anywhere; white-space: normal; }
.jr-post-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 8; line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.jr-see-more { background: none; border: 0; padding: 2px 0; font-weight: 700; color: var(--vp-text-muted); }
.jr-link, .jr-hashtag { color: var(--vp-primary); font-weight: 600; text-decoration: none; }
.jr-link:hover, .jr-hashtag:hover { text-decoration: underline; }

/* Media */
.jr-media { margin-top: 10px; background: var(--vp-surface-low); overflow: hidden; }
.jr-media-grid { display: grid; gap: 2px; }
.jr-media-grid.jr-media-1 { grid-template-columns: 1fr; }
.jr-media-grid.jr-media-2 { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1.2; }
.jr-media-grid.jr-media-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.jr-media-grid.jr-media-3 .jr-media-item:first-child { grid-row: span 2; }
.jr-media-grid.jr-media-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; }
.jr-media-item { display: block; position: relative; overflow: hidden; min-height: 0; background: var(--vp-surface); }
.jr-media-1 .jr-media-item { max-height: 620px; }
.jr-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-media-1 .jr-media-item img { object-fit: contain; background: #0b0d10; }
.jr-media-video { position: relative; background: #000; max-height: 620px; width: 100%; }
.jr-video-el { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.jr-video-duration {
  position: absolute; right: 10px; top: 10px; background: rgba(0,0,0,.65); color: #fff;
  font-size: .72rem; font-weight: 700; padding: 2px 7px; border-radius: 6px; pointer-events: none;
}

/* Repost */
.jr-original { margin: 10px 14px 0; border: 1px solid var(--vp-border); border-radius: var(--vp-radius-md); overflow: hidden; }
.jr-original-label { font-size: .75rem; color: var(--vp-text-muted); padding: 8px 12px 0; }
.jr-original-label a { font-weight: 700; color: var(--vp-text); }
.jr-post-embedded .jr-post-head { padding: 8px 12px 0; }
.jr-post-embedded .jr-post-body { padding: 6px 12px 0; }
.jr-post-embedded .jr-media { margin-top: 8px; }
.jr-original-open { display: block; padding: 8px 12px; font-size: .8rem; font-weight: 600; text-decoration: none; }
.jr-unavailable { padding: 18px; color: var(--vp-text-muted); text-align: center; font-size: .9rem; }

/* Counts + actions */
.jr-post-stats {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 16px 6px; font-size: .82rem; color: var(--vp-text-muted);
}
.jr-stat-like { color: var(--jr-like); }
.jr-stat-right { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.jr-stat-link { background: none; border: 0; padding: 0; color: inherit; }
.jr-stat-link:hover { text-decoration: underline; }
.jr-actions { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--vp-border); margin: 0 8px; padding: 4px 0; }
.jr-action-wrap { display: flex; }
.jr-action {
  flex: 1; width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px;
  background: transparent; border: 0; border-radius: var(--vp-radius-sm); color: var(--vp-text-muted); font-weight: 600; font-size: .88rem;
  transition: background .15s, color .15s, transform .1s;
}
.jr-action i { font-size: 1.15rem; }
.jr-action:hover { background: var(--vp-surface-low); color: var(--vp-text); }
.jr-action:active { transform: scale(.96); }
.jr-action.is-active[data-jr="like"] { color: var(--jr-like); }
.jr-action.is-active[data-jr="bookmark"] { color: var(--vp-primary); }
.jr-action[disabled] { opacity: .45; }
.jr-action.jr-pop i { animation: jrPop .32s ease-out; }
@keyframes jrPop { 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (max-width: 420px) { .jr-action span { display: none; } }
.jr-post .dropdown-item i { width: 18px; margin-right: 4px; }

/* ── Comments ────────────────────────────────────────────────── */
.jr-comments { border-top: 1px solid var(--vp-border); padding: 10px 14px 12px; }
.jr-comment-list:empty + .jr-comments-more { display: none; }
.jr-comment { display: flex; gap: 8px; margin-bottom: 10px; }
.jr-comment-main { flex: 1; min-width: 0; }
.jr-comment-bubble {
  display: inline-block; max-width: 100%; background: var(--vp-surface-low);
  border-radius: 16px; padding: 7px 12px; font-size: .9rem; line-height: 1.45;
}
.jr-comment-bubble.is-deleted { font-style: italic; color: var(--vp-text-muted); }
.jr-comment-author { font-weight: 700; font-size: .85rem; color: var(--vp-text); text-decoration: none; }
.jr-comment-text { overflow-wrap: anywhere; }
.jr-comment-actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 3px 12px 0; font-size: .75rem; color: var(--vp-text-muted); }
.jr-comment-actions button { background: none; border: 0; padding: 0; font-weight: 700; color: var(--vp-text-muted); font-size: .75rem; }
.jr-comment-actions button:hover { text-decoration: underline; color: var(--vp-text); }
.jr-replies { margin-top: 8px; }
.jr-replies:empty { display: none; }
.jr-replies .jr-comment { margin-bottom: 8px; }
.jr-comment-form {
  display: flex; align-items: flex-end; gap: 6px; margin-top: 8px; background: var(--vp-surface-low);
  border-radius: 22px; padding: 4px 4px 4px 14px; border: 1.5px solid transparent;
}
.jr-comment-form:focus-within { border-color: var(--vp-primary); background: var(--vp-card); }
.jr-comment-form textarea {
  flex: 1; border: 0; background: transparent; resize: none; min-height: 36px; max-height: 140px;
  padding: 8px 0; font: inherit; font-size: .92rem; outline: none; color: var(--vp-text);
}
.jr-send {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--vp-primary); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.jr-send:disabled { opacity: .5; }
.jr-reply-to { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--vp-text-muted); margin: 6px 0 -2px 14px; }
.jr-reply-to button { background: none; border: 0; color: var(--vp-text-muted); padding: 0 4px; }

/* ── People rows ─────────────────────────────────────────────── */
.jr-user-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.jr-user-row + .jr-user-row { border-top: 1px solid var(--vp-border); }
.jr-user-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.jr-user-row-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.jr-user-row-name { font-weight: 700; color: var(--vp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-user-row-bio { font-size: .8rem; color: var(--vp-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-follow-btn { min-width: 92px; border-radius: var(--vp-radius-pill); }

/* ── Notifications ───────────────────────────────────────────── */
.jr-notifs { display: flex; flex-direction: column; }
.jr-notif {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--vp-text);
  border-bottom: 1px solid var(--vp-border); position: relative;
}
.jr-notif:last-child { border-bottom: 0; }
.jr-notif:hover { background: var(--vp-surface-low); }
.jr-notif.is-unread { background: var(--vp-primary-lt); }
.jr-notif-avatar { position: relative; flex-shrink: 0; }
.jr-notif-system { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fef3c7; color: #b45309; font-size: 1.2rem; }
.jr-notif-icon {
  position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: .7rem; box-shadow: var(--jr-avatar-ring);
}
.jr-notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jr-notif-text { font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.jr-notif-time { font-size: .75rem; color: var(--vp-text-muted); }
.jr-unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vp-primary); flex-shrink: 0; }

/* ── Empty state + load more ─────────────────────────────────── */
.jr-empty { text-align: center; padding: 40px 20px; }
.jr-empty > i { font-size: 2.6rem; color: var(--vp-outline); }
.jr-empty h3 { font-size: 1.05rem; font-weight: 800; margin: .6rem 0 .3rem; }
.jr-empty p { color: var(--vp-text-muted); margin: 0 auto; max-width: 380px; font-size: .92rem; }
.jr-load-more-wrap { display: flex; justify-content: center; margin-top: var(--vp-card-gap); }
.jr-load-more-wrap:has(> [hidden]) { margin-top: 0; }
.jr-skeleton { height: 160px; border-radius: var(--vp-radius); background: linear-gradient(90deg, var(--vp-surface-low) 25%, var(--vp-surface) 50%, var(--vp-surface-low) 75%); background-size: 200% 100%; animation: jrShimmer 1.2s infinite; }
@keyframes jrShimmer { to { background-position: -200% 0; } }

/* ── Right rail cards ────────────────────────────────────────── */
.jr-trend { display: flex; gap: 10px; align-items: center; padding: 7px 0; text-decoration: none; color: inherit; }
.jr-trend + .jr-trend { border-top: 1px solid var(--vp-border); }
.jr-trend-rank { width: 22px; font-weight: 800; color: var(--vp-text-muted); text-align: center; }
.jr-trend > span:last-child { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.jr-trend-tag { font-weight: 700; color: var(--vp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-trend-count { font-size: .75rem; color: var(--vp-text-muted); }
.jr-trend:hover .jr-trend-tag { color: var(--vp-primary); }
.jr-earn-balance { font-family: var(--vp-font-display); font-weight: 800; color: var(--vp-success); text-decoration: none; }
.jr-earn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.jr-earn-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: var(--vp-radius-sm);
  background: var(--vp-surface-low); color: var(--vp-text); text-decoration: none; font-size: .72rem; font-weight: 600; text-align: center;
}
.jr-earn-grid a:hover { background: var(--vp-surface); }
.jr-earn-grid i { font-size: 1.2rem; }
.jr-earn-all { background: var(--vp-primary-lt); color: var(--vp-primary); font-weight: 700; }

/* Left rail profile */
.jr-rail-profile { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--vp-radius-md); text-decoration: none; color: inherit; }
.jr-rail-profile:hover { background: var(--vp-surface); }
.jr-rail-profile-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.jr-rail-profile-name { font-weight: 800; color: var(--vp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-rail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 0 10px; }
.jr-rail-stats a { display: flex; flex-direction: column; align-items: center; padding: 6px 2px; border-radius: var(--vp-radius-sm); text-decoration: none; color: var(--vp-text-muted); font-size: .7rem; }
.jr-rail-stats a:hover { background: var(--vp-surface); }
.jr-rail-stats strong { color: var(--vp-text); font-size: .95rem; }

/* ── Bottom nav with the central + ───────────────────────────── */
.jr-bottom-nav .vp-tab-btn span { font-size: .62rem; }
.jr-tab-create { position: relative; }
.jr-plus {
  width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--vp-primary), var(--vp-primary-ctr));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--vp-primary) 38%, transparent);
  transform: translateY(-6px);
}
.jr-plus i { font-size: 1.5rem; }
.jr-create-btn { border-radius: var(--vp-radius-pill); min-height: 40px; }

/* ── Profile ─────────────────────────────────────────────────── */
.jr-profile { padding: 0 0 4px; overflow: hidden; }
.jr-cover {
  height: 150px; background: linear-gradient(135deg, var(--vp-primary), #7c3aed 60%, #ec4899);
  background-size: cover; background-position: center;
}
@media (min-width: 640px) { .jr-cover { height: 210px; } }
.jr-profile-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 16px; margin-top: -56px; }
.jr-profile-avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--vp-card); background: var(--vp-card); }
.jr-profile-actions { display: flex; gap: 8px; align-items: center; padding-bottom: 6px; }
.jr-profile-id { padding: 10px 16px 0; }
.jr-profile-id h1 { font-size: 1.45rem; font-weight: 800; margin: 0; }
.jr-follows-you { margin-left: 6px; font-size: .7rem; background: var(--vp-surface); padding: 2px 8px; border-radius: 6px; font-weight: 700; }
.jr-profile-bio { margin-top: 8px; line-height: 1.5; overflow-wrap: anywhere; }
.jr-profile-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .85rem; color: var(--vp-text-muted); }
.jr-profile-facts a { overflow-wrap: anywhere; }
.jr-profile-stats { display: flex; gap: 18px; margin-top: 10px; font-size: .9rem; color: var(--vp-text-muted); }
.jr-profile-stats a { color: inherit; text-decoration: none; }
.jr-profile-stats a:hover { text-decoration: underline; }
.jr-profile-stats strong { color: var(--vp-text); }
.jr-about { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; margin: 0; }
.jr-about dt { color: var(--vp-text-muted); font-weight: 600; font-size: .85rem; }
.jr-about dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .jr-about { grid-template-columns: 1fr; } .jr-about dd { margin-bottom: 6px; } }

.jr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: var(--vp-radius); overflow: hidden; }
.jr-grid-item { position: relative; aspect-ratio: 1; background: var(--vp-surface); display: block; overflow: hidden; }
.jr-grid-item img { width: 100%; height: 100%; object-fit: cover; }
.jr-grid-play { position: absolute; right: 6px; top: 4px; color: #fff; font-size: 1.4rem; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.jr-grid-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--vp-text-muted); font-size: 1.6rem; }

/* Hashtag + search */
.jr-hashtag-head { display: flex; align-items: center; gap: 14px; padding: 16px; flex-wrap: wrap; }
.jr-hashtag-head h1 { font-size: 1.4rem; font-weight: 800; margin: 0; overflow-wrap: anywhere; }
.jr-hashtag-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.8rem; font-weight: 800; background: var(--vp-primary-lt); color: var(--vp-primary); }
.jr-search-form { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: var(--vp-radius-pill); }
.jr-search-form i { color: var(--vp-text-muted); }
.jr-search-form input { flex: 1; border: 0; outline: 0; background: transparent; min-height: 40px; font-size: .95rem; min-width: 0; color: var(--vp-text); }
.jr-search-form .btn { border-radius: var(--vp-radius-pill); }
.jr-join-card { padding: 20px; text-align: center; }
.jr-join-card .d-flex { justify-content: center; }

/* Earn hub */
.jr-earn-hero { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.jr-earn-hero-amount { font-family: var(--vp-font-display); font-size: 2rem; font-weight: 800; line-height: 1.15; }
.jr-earn-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .jr-earn-tiles { grid-template-columns: repeat(3, 1fr); } }
.jr-earn-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; text-decoration: none; color: var(--vp-text); transition: transform .15s, box-shadow .15s; }
.jr-earn-tile:hover { transform: translateY(-2px); box-shadow: var(--vp-shadow-lg); }
.jr-earn-tile-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; margin-bottom: 4px; }
.jr-earn-tile-title { font-weight: 800; }
.jr-earn-tile-sub { font-size: .78rem; color: var(--vp-text-muted); }

/* ── Modals: composer, repost, report ────────────────────────── */
.jr-modal-md { max-width: 560px; }
.modal .btn-close { background: transparent; }
.jr-composer .modal-body { padding-top: .25rem; }
.jr-composer-who { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.jr-visibility .form-select { min-height: 30px; padding: 2px 28px 2px 8px; font-size: .78rem; border-radius: 8px; width: auto; }
.jr-composer-text {
  width: 100%; border: 0; outline: 0; resize: none; font-size: 1.1rem; line-height: 1.5; min-height: 110px;
  padding: 4px 0; background: transparent; color: var(--vp-text);
}
.jr-composer-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.jr-composer-previews:empty { display: none; }
.jr-preview { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--vp-surface); }
.jr-preview.is-video { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.jr-preview img, .jr-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-preview.is-video video { object-fit: contain; background: #000; }
.jr-preview-remove {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.65); color: #fff; display: grid; place-items: center; z-index: 2;
}
.jr-preview-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0,0,0,.25); }
.jr-preview-bar span { display: block; height: 100%; width: 0; background: var(--vp-primary); transition: width .2s; }
.jr-preview-status {
  position: absolute; left: 8px; bottom: 10px; font-size: .7rem; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.6); padding: 2px 7px; border-radius: 6px;
}
.jr-preview.is-done .jr-preview-bar { display: none; }
.jr-preview.is-error { outline: 2px solid var(--vp-danger); }
.jr-preview.is-error .jr-preview-status { background: var(--vp-danger); }
.jr-composer-footer { flex-wrap: wrap; justify-content: space-between; border-top: 1px solid var(--vp-border); padding-top: .75rem; }
.jr-composer-tools { display: flex; gap: 2px; }
.jr-composer-tools button {
  display: flex; align-items: center; gap: 6px; border: 0; background: transparent; min-height: 40px; padding: 0 10px;
  border-radius: var(--vp-radius-sm); font-weight: 600; font-size: .85rem; color: var(--vp-text-muted);
}
.jr-composer-tools button:hover:not([disabled]) { background: var(--vp-surface-low); }
.jr-composer-tools button[disabled] { opacity: .45; }
.jr-composer-tools i { font-size: 1.2rem; }
@media (max-width: 420px) { .jr-composer-tools span { display: none; } }
.jr-counter { font-size: .78rem; color: var(--vp-text-muted); margin-left: auto; margin-right: 10px; }
.jr-counter.is-over { color: var(--vp-danger); font-weight: 700; }
.jr-post-btn { min-width: 96px; border-radius: var(--vp-radius-pill); }
@media (max-width: 575.98px) {
  #jrComposer .modal-dialog { margin: 0; max-width: none; height: 100%; }
  #jrComposer .modal-content { height: 100%; border-radius: 0; }
}
.jr-repost-preview { border: 1px solid var(--vp-border); border-radius: 12px; padding: 10px 12px; font-size: .88rem; color: var(--vp-text-muted); max-height: 160px; overflow: hidden; }
.jr-reasons { display: grid; gap: 6px; }
.jr-reason { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--vp-border); border-radius: 10px; font-weight: 600; cursor: pointer; }
.jr-reason:has(input:checked) { border-color: var(--vp-danger); background: var(--vp-danger-ctr); }
.jr-welcome-icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 20px; display: grid; place-items: center; font-size: 2rem; color: #fff; background: linear-gradient(135deg, var(--vp-primary), #7c3aed); }

/* Lightbox */
.jr-lightbox .modal-content { background: transparent; border: 0; box-shadow: none; align-items: center; justify-content: center; min-height: 60vh; }
.jr-lightbox-img { max-width: 100%; max-height: 88vh; border-radius: 8px; object-fit: contain; }
.jr-lightbox-close, .jr-lightbox-nav {
  position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff;
  display: grid; place-items: center; font-size: 1.2rem; z-index: 2;
}
.jr-lightbox-close { top: 8px; right: 8px; }
.jr-lightbox-nav.prev { left: 8px; top: 50%; transform: translateY(-50%); }
.jr-lightbox-nav.next { right: 8px; top: 50%; transform: translateY(-50%); }
.jr-lightbox-nav[hidden] { display: none; }

/* Toasts */
.jr-toasts { position: fixed; left: 50%; bottom: calc(var(--bottom-nav-h) + 16px); transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
@media (min-width: 768px) { .jr-toasts { bottom: 24px; } }
.jr-toast {
  background: #1f2937; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: .9rem; font-weight: 600;
  box-shadow: var(--vp-shadow-lg); animation: jrToastIn .2s ease-out; pointer-events: auto; max-width: 100%;
}
.jr-toast.is-error { background: var(--vp-danger); }
.jr-toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.jr-toast a { color: #fff; text-decoration: underline; margin-left: 8px; }
@keyframes jrToastIn { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .jr-action.jr-pop i, .jr-toast, .jr-skeleton { animation: none; }
}