/* ================================================================
   NiteVelour Community — community.css
   Styles for: nav auth zone, auth modal, profile editor, toasts,
   avatar picker, password reset page.
   Matches site palette: bg #07070b, accent #6a5acd, card #101018
   ================================================================ */

/* ── Nav auth zone ──────────────────────────────────────────── */
.nvNavAuth {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.nvNavLoginBtn {
  border: 1px solid #2a2a35;
  color: #cfcfe6;
  background: transparent;
  border-radius: 6px;
  padding: 8px 12px;
  font: 700 13px system-ui;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.nvNavLoginBtn:hover { border-color: #3a3a55; color: #fff; }

.nvNavJoinBtn {
  background: #6a5acd;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font: 800 13px system-ui;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.nvNavJoinBtn:hover { background: #7b6ddb; }

/* ── User avatar button in nav ──────────────────────────────── */
.nvNavUserBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid #2a2a35;
  border-radius: 999px;
  padding: 5px 10px 5px 5px;
  cursor: pointer;
  color: #cfcfe6;
  font: 700 13px system-ui;
  transition: border-color .15s, background .15s;
}
.nvNavUserBtn:hover { border-color: #3a3a55; background: #101018; }

.nvNavAvatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* ── User dropdown ───────────────────────────────────────────── */
.nvUserDropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  background: #0b0b10;
  border: 1px solid #222233;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  z-index: 1100;
  overflow: hidden;
}
.nvUserDropdownInner {
  padding: 6px;
}
.nvUserDropdownHeader {
  padding: 10px 12px 8px;
  border-bottom: 1px solid #1a1a25;
  margin-bottom: 4px;
}
.nvUserDropdownName {
  font: 800 13px system-ui;
  color: #ecebff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nvUserDropdownUsername {
  font: 600 11px system-ui;
  color: #a9a9c2;
  margin-top: 2px;
}
.nvDropdownItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 5px;
  font: 600 13px system-ui;
  color: #cfcfe6;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: background .1s, color .1s;
}
.nvDropdownItem:hover { background: #101018; color: #fff; }
.nvDropdownItem.danger { color: #f87171; }
.nvDropdownItem.danger:hover { background: rgba(248,113,113,.1); }

/* ── Auth modal ─────────────────────────────────────────────── */
.nvModalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: nvFadeIn .15s ease;
}
@keyframes nvFadeIn { from { opacity: 0 } to { opacity: 1 } }

.nvModal {
  background: #101018;
  border: 1px solid #2a2a35;
  border-radius: 10px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  animation: nvSlideUp .2s ease;
  position: relative;
}
@keyframes nvSlideUp { from { transform: translateY(16px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.nvModalHeader {
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.nvModalTitle {
  font: 800 18px system-ui;
  color: #ecebff;
}
.nvModalClose {
  background: transparent;
  border: 1px solid #2a2a35;
  color: #a9a9c2;
  border-radius: 5px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.nvModalClose:hover { border-color: #3a3a55; color: #fff; }

.nvTabRow {
  display: flex;
  gap: 4px;
  padding: 16px 20px 0;
  border-bottom: 1px solid #1a1a25;
}
.nvTab {
  padding: 8px 12px;
  font: 700 13px system-ui;
  color: #a9a9c2;
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s;
}
.nvTab.active { color: #ecebff; border-bottom-color: #6a5acd; }
.nvTab:hover:not(.active) { color: #cfcfe6; }

.nvModalBody {
  padding: 20px;
}

/* ── Forms ───────────────────────────────────────────────────── */
.nvFormGroup {
  margin-bottom: 14px;
}
.nvFormLabel {
  display: block;
  font: 700 12px system-ui;
  color: #a9a9c2;
  margin-bottom: 5px;
  letter-spacing: .02em;
}
.nvFormInput {
  width: 100%;
  background: #0b0b10;
  border: 1px solid #2a2a35;
  border-radius: 6px;
  color: #fff;
  padding: 10px 12px;
  font: 600 13px system-ui;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  -webkit-appearance: none;
}
.nvFormInput:focus {
  border-color: rgba(106,90,205,.6);
  box-shadow: 0 0 0 3px rgba(106,90,205,.15);
}
.nvFormInput.error { border-color: rgba(248,113,113,.6); }

.nvFormHint {
  font: 600 11px system-ui;
  color: #a9a9c2;
  margin-top: 4px;
}
.nvFormError {
  font: 600 11px system-ui;
  color: #f87171;
  margin-top: 4px;
}

.nvSubmitBtn {
  width: 100%;
  background: #6a5acd;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 11px 16px;
  font: 800 14px system-ui;
  cursor: pointer;
  margin-top: 4px;
  transition: background .15s, opacity .15s;
}
.nvSubmitBtn:hover { background: #7b6ddb; }
.nvSubmitBtn:disabled { opacity: .6; cursor: not-allowed; }

.nvFormLink {
  font: 600 12px system-ui;
  color: #9987e8;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
}
.nvFormLink:hover { color: #b8a8f8; }

.nvFormSplit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.nvErrorBox {
  background: rgba(248,113,113,.1);
  border: 1px solid rgba(248,113,113,.35);
  border-radius: 6px;
  padding: 10px 12px;
  color: #fca5a5;
  font: 600 13px system-ui;
  margin-bottom: 14px;
}

.nvSuccessBox {
  background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.35);
  border-radius: 6px;
  padding: 10px 12px;
  color: #6ee7b7;
  font: 600 13px system-ui;
  margin-bottom: 14px;
}

/* ── Toast notifications ─────────────────────────────────────── */
#nvToastContainer {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.nvToast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a1a28;
  border: 1px solid #2a2a35;
  border-radius: 8px;
  padding: 12px 16px;
  font: 600 13px system-ui;
  color: #cfcfe6;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  animation: nvToastIn .2s ease, nvToastOut .3s ease 2.7s forwards;
  pointer-events: auto;
}
.nvToast.success { border-color: rgba(52,211,153,.4); color: #6ee7b7; }
.nvToast.error   { border-color: rgba(248,113,113,.4); color: #fca5a5; }

@keyframes nvToastIn  { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0) } }
@keyframes nvToastOut { from { opacity: 1 } to { opacity: 0; transform: translateY(4px) } }

/* ── Avatar picker ───────────────────────────────────────────── */
.nvAvatarGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.nvAvatarOption {
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.nvAvatarOption:hover      { transform: scale(1.08); }
.nvAvatarOption.selected   { border-color: #6a5acd; }
.nvAvatarOption img        { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Profile editor sheet ────────────────────────────────────── */
.nvProfileEditor {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  animation: nvFadeIn .15s ease;
}
@media(min-width: 600px) {
  .nvProfileEditor { align-items: center; justify-content: center; padding: 16px; }
}

.nvProfileEditorInner {
  background: #101018;
  border: 1px solid #2a2a35;
  border-radius: 10px 10px 0 0;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
  animation: nvSlideUp .2s ease;
}
@media(min-width: 600px) {
  .nvProfileEditorInner { max-width: 480px; border-radius: 10px; max-height: 80vh; }
}

/* ── Color palette ───────────────────────────────────────────── */
.nvColorRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.nvColorSwatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s, border-color .15s;
}
.nvColorSwatch:hover    { transform: scale(1.15); }
.nvColorSwatch.selected { border-color: #fff; }

/* ── Utility ─────────────────────────────────────────────────── */
.nvSectionTitle {
  font: 800 11px system-ui;
  color: #a9a9c2;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.nvDivider {
  height: 1px;
  background: #1a1a25;
  margin: 16px 0;
}

.nvRelUserRow {
  position: relative;
}

/* ── Star Ratings Widget ─────────────────────────────────────── */
.nvRatingsWidget {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nvStars {
  display: inline-flex;
  gap: 3px;
}

.nvStar {
  font-size: 22px;
  color: #3d3d52;
  cursor: default;
  transition: color .12s, transform .1s;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

/* Interactive stars (for logged-in users) */
.nvStarsInteractive .nvStar {
  cursor: pointer;
}
.nvStarsInteractive .nvStar:hover,
.nvStarsInteractive .nvStar.hovered {
  transform: scale(1.15);
}

.nvStar.filled    { color: #f59e0b; }
.nvStar.half      { color: #f59e0b; opacity: .5; }
.nvStar.pending   { color: #9987e8; }

.nvRatingsMeta {
  font: 600 12px system-ui;
  color: #a9a9c2;
  min-height: 16px;
  white-space: nowrap;
}

.nvRatingsMeta b {
  color: #ecebff;
  font-weight: 800;
}

.nvRatingsPrompt {
  font: 600 12px system-ui;
  color: #9987e8;
}

.nvRatingsSection {
  margin-top: 14px;
  padding: 14px 16px;
  background: #0b0b10;
  border: 1px solid #1e1e2e;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.nvRatingsSection h3 {
  font: 800 12px system-ui;
  color: #a9a9c2;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.nvRatingsLeft {
  flex: 0 0 auto;
}

.nvRatingsRight {
  flex: 1;
  min-width: 140px;
}

.nvRatingsUserLabel {
  font: 700 11px system-ui;
  color: #a9a9c2;
  margin-bottom: 5px;
}

.nvRatingsLoginMsg {
  font: 600 12px system-ui;
  color: #a9a9c2;
}

.nvRatingsLoginMsg a {
  color: #9987e8;
  cursor: pointer;
  text-decoration: underline;
}

.nvRatingsSaved {
  font: 600 11px system-ui;
  color: #6ee7b7;
  margin-top: 4px;
  display: none;
}
.nvRatingsSaved.show { display: block; }

/* ─── Save Button ─────────────────────────────────────────── */

.nvSaveBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid #2a2a3a;
  border-radius: 6px;
  background: #0b0b10;
  color: #a9a9c2;
  font: 700 12px system-ui;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.nvSaveBtn:hover {
  border-color: #6a5acd;
  color: #cfcfe6;
  background: #111120;
}

.nvSaveBtn:active {
  transform: scale(.97);
}

.nvSaveBtn.nvSaveBtnSaved {
  border-color: #6a5acd;
  color: #9987e8;
  background: rgba(106, 90, 205, .10);
}

.nvSaveBtn.nvSaveBtnSaved:hover {
  border-color: #cf4444;
  color: #f87171;
  background: rgba(207, 68, 68, .08);
}

.nvSaveBtnIcon {
  font-size: 14px;
  line-height: 1;
}

.nvSaveBtnLabel {
  font: 700 12px system-ui;
}

/* ─── Saved Items Grid (profile page) ─────────────────────── */

.nvSavedGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.nvSavedCard {
  border: 1px solid #222233;
  border-radius: 7px;
  background: #0b0b10;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color .15s, transform .12s;
}

.nvSavedCard:hover {
  border-color: #6a5acd;
  transform: translateY(-2px);
}

.nvSavedCardThumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #111120;
  display: block;
}

.nvSavedCardThumbPlaceholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #111120 60%, #1a1a2e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.nvSavedCardBody {
  padding: 8px 10px;
}

.nvSavedCardType {
  font: 700 10px system-ui;
  color: #9987e8;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}

.nvSavedCardTitle {
  font: 700 12px system-ui;
  color: #cfcfe6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nvSavedEmpty {
  color: #a9a9c2;
  font: 600 13px system-ui;
  padding: 20px 0;
}

/* ─── Comments Widget ─────────────────────────────────────── */

.nvCommentsWidget {
  margin-top: 14px;
}

.nvCommentsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.nvCommentsTitle {
  font: 800 12px system-ui;
  color: #a9a9c2;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
}

.nvCommentsCount {
  font: 600 12px system-ui;
  color: #a9a9c2;
}

/* ── Post form (top of thread) ── */
.nvCommentPostForm {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.nvCommentFormAvatar {
  flex-shrink: 0;
  margin-top: 2px;
}

.nvCommentFormBody {
  flex: 1;
  min-width: 0;
}

.nvCommentTextarea {
  width: 100%;
  background: #0b0b10;
  border: 1px solid #2a2a35;
  border-radius: 6px;
  color: #cfcfe6;
  padding: 9px 11px;
  font: 600 13px/1.5 system-ui;
  box-sizing: border-box;
  resize: vertical;
  min-height: 66px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.nvCommentTextarea:focus {
  border-color: rgba(106,90,205,.6);
  box-shadow: 0 0 0 3px rgba(106,90,205,.15);
}
.nvCommentTextarea::placeholder { color: #5a5a78; }

.nvCommentFormActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  gap: 8px;
  flex-wrap: wrap;
}

.nvCommentCharCount {
  font: 600 11px system-ui;
  color: #5a5a78;
}
.nvCommentCharCount.nvCharWarn { color: #f59e0b; }
.nvCommentCharCount.nvCharOver  { color: #f87171; }

.nvCommentSubmitBtn {
  background: #6a5acd;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font: 800 12px system-ui;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  white-space: nowrap;
}
.nvCommentSubmitBtn:hover { background: #7b6ddb; }
.nvCommentSubmitBtn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Guest CTA (not logged in) ── */
.nvCommentsGuest {
  background: #0b0b10;
  border: 1px solid #1e1e2e;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font: 600 13px system-ui;
  color: #a9a9c2;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.nvCommentsGuest a {
  color: #9987e8;
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

/* ── Thread list ── */
.nvCommentList {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Single comment ── */
.nvComment {
  display: flex;
  gap: 10px;
  animation: nvFadeIn .18s ease;
}

.nvCommentAvatar {
  flex-shrink: 0;
  margin-top: 2px;
  width: 32px;
  height: 32px;
}
.nvCommentAvatar img,
.nvCommentAvatar svg {
  border-radius: 50%;
  display: block;
  width: 32px;
  height: 32px;
}

.nvCommentBody {
  flex: 1;
  min-width: 0;
}

.nvCommentMeta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.nvCommentAuthor {
  font: 800 13px system-ui;
  color: #ecebff;
  text-decoration: none;
}
.nvCommentAuthor:hover { color: #9987e8; }

.nvCommentTimestamp {
  font: 600 11px system-ui;
  color: #5a5a78;
  white-space: nowrap;
}

.nvCommentText {
  font: 600 13px/1.55 system-ui;
  color: #cfcfe6;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  margin: 0;
}

.nvCommentText.nvDeleted {
  color: #5a5a78;
  font-style: italic;
}

.nvCommentActions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.nvCommentLikeBtn,
.nvCommentReplyBtn,
.nvCommentDeleteBtn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: 600 11px system-ui;
  color: #5a5a78;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .12s;
}
.nvCommentLikeBtn:hover  { color: #e85d9c; }
.nvCommentLikeBtn.liked  { color: #e85d9c; }
.nvCommentReplyBtn:hover { color: #9987e8; }
.nvCommentDeleteBtn { color: #5a5a78; }
.nvCommentDeleteBtn:hover { color: #f87171; }

/* ── Replies indent ── */
.nvCommentReplies {
  margin-top: 12px;
  margin-left: 16px;
  padding-left: 14px;
  border-left: 2px solid #1e1e2e;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Inline reply form ── */
.nvReplyForm {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  animation: nvFadeIn .15s ease;
}

.nvReplyForm .nvCommentTextarea {
  min-height: 52px;
}

.nvReplyFormBody {
  flex: 1;
  min-width: 0;
}

/* ── Load more ── */
.nvCommentsLoadMore {
  text-align: center;
  margin-top: 14px;
}

.nvLoadMoreBtn {
  background: transparent;
  border: 1px solid #2a2a35;
  color: #a9a9c2;
  border-radius: 6px;
  padding: 8px 16px;
  font: 700 12px system-ui;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.nvLoadMoreBtn:hover { border-color: #6a5acd; color: #cfcfe6; background: #101018; }
.nvLoadMoreBtn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Empty / loading states ── */
.nvCommentsEmpty {
  color: #5a5a78;
  font: 600 13px system-ui;
  padding: 8px 0;
}

.nvCommentsLoading {
  color: #5a5a78;
  font: 600 13px system-ui;
  padding: 8px 0;
}

.nvCommentError {
  color: #fca5a5;
  font: 600 12px system-ui;
  margin-top: 4px;
}

/* ── Phase 5: Content Like Button ── */
.nvContentLikeBtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid #2a2a35;
  color: #a9a9c2;
  border-radius: 6px;
  padding: 8px 13px;
  font: 700 12px system-ui;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .1s;
  user-select: none;
  -webkit-user-select: none;
}
.nvContentLikeBtn:hover {
  border-color: #e85d9c;
  color: #f9a8d4;
  background: rgba(232, 93, 156, .08);
}
.nvContentLikeBtn.nvLiked {
  border-color: rgba(232, 93, 156, .6);
  color: #e85d9c;
  background: rgba(232, 93, 156, .08);
}
.nvContentLikeBtn:active { transform: scale(.94); }
.nvLikeBtnIcon { font-style: normal; font-size: 15px; line-height: 1; }
.nvLikeBtnCount { font: 700 11px system-ui; }

/* ── Phase 5: Notification Toast ── */
.nvToast.info {
  background: #1a1a28;
  border-color: #6a5acd;
  color: #ecebff;
}

/* ── Phase 5: Notification dot on avatar ── */
.nvNotifDot {
  pointer-events: none;
  animation: nvNotifPulse 2s ease-in-out infinite;
}
@keyframes nvNotifPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* ── Community Hub (unified ratings + reactions + comments) ── */
.nvCommunityHub { }
.nvHubBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.nvHubBarLeft {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.nvHubBarDivider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: #2a2a3a;
  margin: 0 2px;
  flex-shrink: 0;
}
.nvHubReactions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nvReactBtn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border: 1px solid #2a2a3a;
  border-radius: 14px;
  background: #12121e;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  font: 600 11px system-ui;
  color: #a9a9c2;
}
.nvReactBtn:hover {
  background: #1e1e30;
  border-color: #6a5acd;
}
.nvReactBtn:active { transform: scale(.93); }
.nvReactBtn.active {
  background: #1e1e30;
  border-color: #7c6fe0;
  color: #ecebff;
}
.nvReactEmoji { font-size: 13px; line-height: 1; }
.nvReactCount { font: 700 10px system-ui; min-width: 0; }
.nvReactCount:empty { display: none; }

/* Rating row — compact inline */
.nvHubRating {
  margin-top: 10px;
}
.nvHubRatingRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.nvHubRatingRow .nvRatingsDisplayStars { flex-shrink: 0; }
.nvHubRatingRow .nvRatingsMeta {
  font: 600 12px system-ui;
  color: #a9a9c2;
  white-space: nowrap;
  margin: 0;
}
.nvHubRatingRow .nvRatingsMeta b { color: #ecebff; }
.nvHubRatingRow .nvRatingsUserLabel {
  font: 700 11px system-ui;
  color: #a9a9c2;
  margin: 0;
  white-space: nowrap;
}
.nvHubRatingRow .nvRatingsLoginMsg {
  font: 600 11px system-ui;
  color: #5a5a78;
  margin: 0;
}
.nvHubRatingRow .nvRatingsLoginMsg a {
  color: #9987e8;
  text-decoration: underline;
  cursor: pointer;
}
.nvHubRatingRow .nvRatingsSaved {
  font: 600 11px system-ui;
  color: #6ee7b7;
  display: none;
  margin: 0;
}
.nvHubRatingRow .nvRatingsSaved.show { display: inline; }

/* Divider between ratings and comments */
.nvHubDivider {
  border-top: 1px solid #1e1e2e;
  margin: 12px 0;
}

/* Comments inside hub — tighter */
.nvHubComments .nvCommentsHeader { margin-bottom: 10px; }
.nvHubComments .nvCommentsGuest {
  background: #0b0b10;
  border: 1px solid #1a1a28;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font: 600 12px system-ui;
  color: #a9a9c2;
}
.nvHubComments .nvCommentsGuest a {
  color: #9987e8;
  text-decoration: underline;
  cursor: pointer;
}