/*
 * Novel Comments (YouTube + Tree)
 * - Uses CSS variables for themeability
 * - Hardcoded hex colors per requirements
 */

.nvc {
  /* Light mode defaults */
  --nvc-bg: #ffffff;
  --nvc-text: #000000;
  --nvc-muted: #666666;
  --nvc-card-bg: #f7f7f7;
  --nvc-card-bg-alt: #f0f0f0;
  --nvc-border: #e6e6e6;
  --nvc-line: #d0d0d0;
  --nvc-link: #1a73e8;

  --nvc-author-gold: #d4af37;
  --nvc-author-bg: #fff7d6;

  --nvc-mod-blue: #3ea6ff;
  --nvc-vip-purple: #b26bff;

  /* VIP tiers (early access subscriptions) */
  --nvc-vip1-accent: #3ea6ff;
  /* VIP2 requested: green theme */
  --nvc-vip2-accent: #2ecc71;
  --nvc-vip3-accent: #d4af37;
  --nvc-vipmax-accent: #ff6bd6;
  
  /* Force background/text in case the theme overrides plugin containers. */
  color: var(--nvc-text) !important;
  background: var(--nvc-bg) !important;
  border: 1px solid var(--nvc-border);
  border-radius: 18px;
  padding: 14px;
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.4;
}

/* =========================================================
   RTL SUPPORT (Arabic Direction Fixes)
   إصلاح اتجاه النصوص العربية
   ========================================================= */
.nvc.nvc-rtl {
  direction: rtl;
  text-align: right; /* Force right alignment base */
}

/* Force body text to right */
.nvc.nvc-rtl .nvc-body,
.nvc.nvc-rtl .nvc-body p,
.nvc.nvc-rtl .nvc-reply-box,
.nvc.nvc-rtl .nvc-form textarea,
.nvc.nvc-rtl .nvc-editor {
    text-align: right !important;
    direction: rtl !important;
}

.nvc.nvc-rtl .nvc-compose,
.nvc.nvc-rtl .nvc-comment {
  flex-direction: row-reverse;
}

.nvc.nvc-rtl .nvc-icon {
  margin-right: 0;
  margin-left: 4px;
}

/* Dark mode detection */
body.dark .nvc,
body.dark-mode .nvc,
html.dark .nvc,
body.theme-dark .nvc,
body.night .nvc {
  --nvc-bg: #262626;
  --nvc-text: #ffffff;
  --nvc-muted: #bbbbbb;
  --nvc-card-bg: #303030;
  --nvc-card-bg-alt: #353535;
  --nvc-border: #3c3c3c;
  --nvc-line: #4a4a4a;
  --nvc-link: #3ea6ff;

  --nvc-author-bg: #2f2814;
  --nvc-vipmax-accent: #ff7ae0;
}


/* Markazz template theme modes (html[data-theme]) */
html[data-theme="night"] .nvc{
  --nvc-bg: var(--bg, #000000);
  --nvc-text: var(--text, #ffffff);
  --nvc-muted: var(--muted, #9aa0aa);
  --nvc-card-bg: var(--surface, #14161b);
  --nvc-card-bg-alt: var(--surface-2, #1b1e25);
  --nvc-border: var(--border, rgba(255,255,255,0.08));
  --nvc-line: rgba(255,255,255,0.14);
  --nvc-link: rgba(255,255,255,0.92);
  --nvc-author-bg: #2f2814;
}

body[data-theme="night"] .nvc{
  --nvc-bg: var(--bg, #000000);
  --nvc-text: var(--text, #ffffff);
  --nvc-muted: var(--muted, #9aa0aa);
  --nvc-card-bg: var(--surface, #14161b);
  --nvc-card-bg-alt: var(--surface-2, #1b1e25);
  --nvc-border: var(--border, rgba(255,255,255,0.08));
  --nvc-line: rgba(255,255,255,0.14);
  --nvc-link: rgba(255,255,255,0.92);
  --nvc-author-bg: #2f2814;
}

html[data-theme="day"] .nvc{
  --nvc-bg: var(--surface, #ffffff);
  --nvc-text: var(--text, #000000);
  --nvc-muted: var(--muted, #4b5563);
  --nvc-card-bg: var(--surface-2, #eef2f8);
  --nvc-card-bg-alt: rgba(0,0,0,0.02);
  --nvc-border: var(--border, rgba(0,0,0,0.10));
  --nvc-line: rgba(0,0,0,0.10);
  --nvc-link: var(--primary, #1a73e8);
  --nvc-author-bg: #fff7d6;
}

body[data-theme="day"] .nvc{
  --nvc-bg: var(--surface, #ffffff);
  --nvc-text: var(--text, #000000);
  --nvc-muted: var(--muted, #4b5563);
  --nvc-card-bg: var(--surface-2, #eef2f8);
  --nvc-card-bg-alt: rgba(0,0,0,0.02);
  --nvc-border: var(--border, rgba(0,0,0,0.10));
  --nvc-line: rgba(0,0,0,0.10);
  --nvc-link: var(--primary, #1a73e8);
  --nvc-author-bg: #fff7d6;
}

html[data-theme="paper"] .nvc{
  --nvc-bg: var(--surface, #fffaf1);
  --nvc-text: var(--text, #1b1b1b);
  --nvc-muted: var(--muted, #5b5246);
  --nvc-card-bg: var(--surface-2, #f1e6d4);
  --nvc-card-bg-alt: rgba(0,0,0,0.02);
  --nvc-border: var(--border, rgba(0,0,0,0.10));
  --nvc-line: rgba(0,0,0,0.10);
  --nvc-link: var(--primary, #1a73e8);
  --nvc-author-bg: #fff2cd;
}

body[data-theme="paper"] .nvc{
  --nvc-bg: var(--surface, #fffaf1);
  --nvc-text: var(--text, #1b1b1b);
  --nvc-muted: var(--muted, #5b5246);
  --nvc-card-bg: var(--surface-2, #f1e6d4);
  --nvc-card-bg-alt: rgba(0,0,0,0.02);
  --nvc-border: var(--border, rgba(0,0,0,0.10));
  --nvc-line: rgba(0,0,0,0.10);
  --nvc-link: var(--primary, #1a73e8);
  --nvc-author-bg: #fff2cd;
}

/* Theme Override Classes */
html:not([data-theme]) .nvc.nvc-theme-dark {
  background: #262626 !important;
  color: #ffffff !important;
  --nvc-bg: #262626;
  --nvc-text: #ffffff;
  --nvc-muted: #bbbbbb;
  --nvc-card-bg: #303030;
  --nvc-card-bg-alt: #353535;
  --nvc-border: #3c3c3c;
  --nvc-line: #4a4a4a;
  --nvc-link: #3ea6ff;
  --nvc-author-bg: #2f2814;
}

html:not([data-theme]) .nvc.nvc-theme-light {
  background: #ffffff !important;
  color: #000000 !important;
  --nvc-bg: #ffffff;
  --nvc-text: #000000;
  --nvc-muted: #666666;
  --nvc-card-bg: #f7f7f7;
  --nvc-card-bg-alt: #f0f0f0;
  --nvc-border: #e6e6e6;
  --nvc-line: #d0d0d0;
  --nvc-link: #1a73e8;
  --nvc-author-bg: #fff7d6;
}

html:not([data-theme]) .nvc.nvc-theme-dark .nvc-reactions{
  background: #262626 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.nvc-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
  text-align: center;
}

.nvc .nvc-list{
  /* Extra bottom breathing room so the ⋯ menu on the last comment doesn't overlap
     the action area below the comments (e.g., تثبيت). */
  padding-bottom: 96px;
  padding-bottom: calc(96px + constant(safe-area-inset-bottom));
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

@media (max-width: 768px){
  .nvc .nvc-list{
    padding-bottom: 140px;
    padding-bottom: calc(140px + constant(safe-area-inset-bottom));
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
  }
}

.nvc-header .nvc-title{
  font-weight: 800;
}

.nvc-header .nvc-count{
  color: #ff5c5c;
  font-size: 18px;
  font-weight: 800;
}

/* Reactions Panel */
.nvc .nvc-reactions{
  margin: 0 0 18px;
  padding: 16px 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.30) 100%) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.nvc .nvc-reactions-head{
  display:flex !important;
  justify-content:center;
  align-items:center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

.nvc .nvc-reactions-total{
  color: #ff5c5c;
  font-size: 18px;
}

.nvc .nvc-reactions-label{
  color: rgba(255,255,255,.80);
  font-weight: 800;
}

.nvc .nvc-reactions-row{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  align-items: stretch;
}

.nvc .nvc-react-btn{
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 10px 25px rgba(0,0,0,.25);
  border-radius: 22px !important;
  width: 100% !important;
  height: 126px !important;
  display:flex !important;
  flex-direction: column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap: 10px !important;
  padding: 14px 10px 12px !important;
  cursor: pointer;
  user-select: none;
  position: relative;
  box-sizing: border-box;
  font: inherit;
  line-height: 1;
  text-decoration: none !important;
}

.nvc .nvc-react-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.16) !important;
}

.nvc .nvc-react-btn:active{
  transform: translateY(-1px) scale(.99);
}

.nvc .nvc-react-btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.nvc .nvc-react-btn[aria-pressed="true"]{
  background: linear-gradient(180deg, rgba(62,166,255,.22) 0%, rgba(255,255,255,.08) 100%) !important;
  border-color: rgba(62,166,255,.55) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.30),
    0 0 0 2px rgba(62,166,255,.18);
}

.nvc .nvc-react-emoji{
  font-size: 40px;
  line-height: 1;
  margin-top: 4px;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.35));
}

.nvc .nvc-react-count{
  position: absolute;
  left: 50%;
  bottom: 11px;
  transform: translateX(-50%);
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.45) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 800;
}

.nvc.nvc-theme-light .nvc-reactions{
  border: 1px solid rgba(0,0,0,.08) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(245,245,245,.92) 60%, rgba(240,240,240,.92) 100%) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.nvc.nvc-theme-light .nvc-reactions-head,
.nvc.nvc-theme-light .nvc-reactions-label{
  color: rgba(0,0,0,.82);
}

.nvc.nvc-theme-light .nvc-reactions-total{
  color: #e53935;
}

.nvc.nvc-theme-light .nvc-react-btn{
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.70) !important;
  color: #000000 !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.04),
    0 10px 25px rgba(0,0,0,.10);
}

.nvc.nvc-theme-light .nvc-react-btn:hover{
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(0,0,0,.16) !important;
}

.nvc.nvc-theme-light .nvc-react-count{
  background: rgba(0,0,0,.12) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: #000000 !important;
}

@media (max-width: 720px){
  .nvc .nvc-reactions{ padding: 14px 10px; border-radius: 20px; }
  .nvc .nvc-reactions-row{ gap: 10px; max-width: 100%; }
  .nvc .nvc-react-btn{ height: 108px !important; border-radius: 18px !important; padding: 12px 8px 10px !important; }
  .nvc .nvc-react-emoji{ font-size: 24px; }
  .nvc .nvc-react-count{ bottom: 9px; min-width: 32px; padding: 5px 10px; font-size: 12px; }
  .nvc .nvc-reactions-head{ margin-bottom: 12px; font-size: 15px; }
  .nvc .nvc-reactions-total{ font-size: 17px; }
}

.nvc-title {
  margin: 0;
  font-size: 16px;
}

.nvc-count {
  color: var(--nvc-muted);
  font-size: 13px;
}

/* Compose */
.nvc-compose {
  display: flex;
  flex-direction: row-reverse;
  gap: 12px;
  background: var(--nvc-card-bg);
  border: 1px solid var(--nvc-border);
  border-radius: 18px;
  padding: 12px;
}

.nvc-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 40px;
  position: relative;
}

.nvc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.nvc-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nvc-guest-fields {
  display: flex;
  gap: 10px;
}

/* Formatting toolbar */
.nvc-formatbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.nvc-fmt {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-bg);
  color: var(--nvc-text);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.nvc-fmt:hover {
  filter: brightness(1.06);
}

/* Attachments */
.nvc-attach-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nvc-attach {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-bg);
  color: var(--nvc-text);
  cursor: pointer;
  user-select: none;
}

.nvc-attach input[type="file"] {
  display: none;
}

.nvc-attach-note {
  color: var(--nvc-muted);
  font-size: 12px;
}

.nvc-previews {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
}

/* Prevent flex items from shrinking on narrow screens (keeps previews square) */
.nvc-preview {
  flex: 0 0 auto;
  min-width: 54px;
}

/* Hide scrollbars (still scrollable) */
.nvc-previews::-webkit-scrollbar {
  display: none;
}
.nvc-previews {
  scrollbar-width: none;
}

.nvc-preview-img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--nvc-border);
}

/* Sticker previews (remove button overlay) */
.nvc-preview {
  position: relative;
  width: 54px;
  height: 54px;
}

.nvc-preview-remove {
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg);
  color: var(--nvc-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.nvc-preview-remove:hover {
  filter: brightness(1.06);
}

/* Stickers picker (lazy loaded) */
.nvc-sticker-overlay {
  position: fixed;
  inset: 0;
  /* Keep below the global NVC modal (z-index: 10050) so alerts can appear above it. */
  z-index: 10040;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}

.nvc-sticker-overlay[hidden] {
  display: none;
}

.nvc-sticker-modal {
  width: min(720px, 100%);
  max-height: min(78vh, 720px);
  background: var(--nvc-card-bg);
  border: 1px solid var(--nvc-border);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Bottom-sheet drag handle (mobile only) */
.nvc-sticker-handle {
  display: none;
}

.nvc-sticker-modal.is-anim {
  transition: height 180ms ease, max-height 180ms ease;
}

.nvc-sticker-close {
  position: absolute;
  inset-inline-end: 18px;
  top: 12px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg-alt);
  color: var(--nvc-text);
  cursor: pointer;
}

.nvc-sticker-title {
  padding: 14px 18px;
  padding-inline-end: 64px;
  font-weight: 700;
  color: var(--nvc-text);
  border-bottom: 1px solid var(--nvc-border);
  /* Prevent header from being squashed in compact picker height */
  flex: 0 0 auto;
  flex-shrink: 0;
}

.nvc-sticker-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  overflow: auto;
  border-bottom: 1px solid var(--nvc-border);
  /* Keep tabs readable; let body scroll */
  flex: 0 0 auto;
  flex-shrink: 0;
}

.nvc-sticker-tab {
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg-alt);
  color: var(--nvc-text);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
}

.nvc-sticker-tab.is-active {
  outline: 2px solid rgba(255, 255, 255, 0.14);
  filter: brightness(1.07);
}

.nvc-sticker-tab.is-locked {
  opacity: 0.85;
}

.nvc-sticker-body {
  padding: 12px;
  overflow: auto;
  /* Let sticker grid take remaining height and scroll */
  flex: 1 1 auto;
  min-height: 0;
}

.nvc-sticker-loading,
.nvc-sticker-empty {
  padding: 14px;
  color: var(--nvc-muted);
  text-align: center;
}

.nvc-sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
}

.nvc-sticker-tile {
  position: relative;
}

.nvc-sticker-tile .nvc-sticker-btn {
  width: 100%;
}

.nvc-sticker-fav {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--nvc-border);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 16px;
  padding: 0;
}

.nvc-sticker-fav:hover {
  filter: brightness(1.06);
}

.nvc-sticker-fav.is-on {
  background: rgba(0, 0, 0, 0.42);
}

.nvc-sticker-btn {
  position: relative;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg-alt);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}

.nvc-sticker-btn:hover {
  filter: brightness(1.06);
}

/* Selected sticker (user picked it for the current comment)
   Show a clear check mark and a subtle highlight. */
.nvc-sticker-btn.is-selected {
  border-color: var(--nvc-link);
  box-shadow: 0 0 0 2px rgba(127, 127, 127, 0.25);
}

.nvc-sticker-btn.is-selected::after {
  content: '✓';
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid var(--nvc-border);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

.nvc-sticker-btn.is-locked {
  filter: saturate(0.85);
}

.nvc-sticker-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nvc-sticker-lock {
  position: absolute;
  inset-inline-start: 6px;
  inset-inline-end: 6px;
  bottom: 6px;
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  padding: 3px 6px;
  text-align: center;
}

.nvc-store-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg-alt);
  color: var(--nvc-text);
  text-decoration: none;
}

.nvc-store-link:hover {
  filter: brightness(1.06);
}

/* On phones, keep the sticker picker as a compact bottom sheet (so the user can
   still see what they've added in the comment form behind it). */
@media (max-width: 768px) {
  .nvc-sticker-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 22px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: grab;
    touch-action: none;
  }

  .nvc-sticker-handle:active {
    cursor: grabbing;
  }

  .nvc-sticker-handle-bar {
    width: 48px;
    height: 5px;
    border-radius: 999px;
    background: rgba(127, 127, 127, 0.55);
  }

  .nvc-sticker-modal {
    height: 30vh;
    max-height: 30vh;
    width: 100%;
    border-radius: 16px 16px 0 0;
  }
}

@media (max-width: 480px) {
  .nvc-sticker-grid {
    /* Bigger stickers in the picker on mobile (WhatsApp-like feel).
       Target sticker preview ~50x50 while keeping a comfortable tap area. */
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  }
  .nvc-sticker-btn {
    min-height: 70px;
    padding: 6px;
  }
  .nvc-sticker-img {
    width: 50px;
    height: 50px;
  }
}

/* Slight RTL tweak for "مكتبة الستيكرات" title (requested) */
.nvc-sticker-overlay[dir="rtl"] .nvc-sticker-title {
  text-align: right;
}

/* Comment attachments lightbox (similar to theme gallery) */
.nvc-lightbox[hidden] {
  display: none;
}

.nvc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10045;
  /* Force a consistent sticker/attachment preview size inside the lightbox */
  --nvc-lightbox-media-size: 200px;
}

.nvc-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
}

.nvc-lightbox__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(980px, 92vw);
  max-height: min(86vh, 760px);
  background: var(--nvc-card-bg);
  border: 1px solid var(--nvc-border);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.nvc-lightbox__main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  touch-action: pan-y;
}

.nvc-lightbox__img {
  width: var(--nvc-lightbox-media-size);
  height: var(--nvc-lightbox-media-size);
  max-width: var(--nvc-lightbox-media-size);
  max-height: var(--nvc-lightbox-media-size);
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg-alt);
}

.nvc-lightbox__caption {
  margin-top: 10px;
  font-weight: 800;
  color: var(--nvc-text);
  text-align: center;
}

.nvc-lightbox__close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg-alt);
  color: var(--nvc-text);
  cursor: pointer;
  font-size: 24px;
  font-weight: 900;
  z-index: 2;
}

.nvc-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg-alt);
  color: var(--nvc-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
  z-index: 2;
}

.nvc-lightbox__nav svg {
  width: 22px;
  height: 22px;
}

.nvc-lightbox__nav svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nvc-lightbox__prev {
  left: 10px;
}

.nvc-lightbox__next {
  right: 10px;
}

@media (max-width: 520px) {
  .nvc-lightbox__nav {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }
  .nvc-lightbox__close {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }
}

body.nvc-no-scroll {
  overflow: hidden !important;
}

.nvc-input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-bg);
  color: var(--nvc-text);
}

.nvc-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-bg);
  color: var(--nvc-text);
  resize: vertical;
  min-height: 56px;
}

/* Rich editor (WYSIWYG) */
.nvc-editor {
  display: none;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-bg);
  color: var(--nvc-text);
  min-height: 56px;
  outline: none;
  line-height: 1.7;
  white-space: pre-wrap;
}

.nvc-editor:empty:before {
  content: attr(data-placeholder);
  color: var(--nvc-muted);
}

html.nvc-has-js .nvc-editor {
  display: block;
}

html.nvc-has-js .nvc-textarea {
  display: none;
}

.nvc-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.nvc-spoiler-toggle {
  color: var(--nvc-muted);
  user-select: none;
}

.nvc-submit {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-bg);
  color: var(--nvc-text);
  cursor: pointer;
}

.nvc-submit:hover {
  filter: brightness(1.06);
}

.nvc-reply-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nvc-cancel {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--nvc-border);
  background: transparent;
  color: var(--nvc-muted);
  cursor: pointer;
}

.nvc-cancel:hover {
  background: var(--nvc-card-bg-alt);
  color: var(--nvc-text);
}

/* Comment item */
.nvc-comment {
  display: flex;
  flex-direction: row-reverse;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: var(--nvc-card-bg);
  border: 1px solid var(--nvc-border);
  position: relative;
}

.nvc-main {
  flex: 1;
  min-width: 0;
}

.nvc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.nvc-author {
  color: var(--nvc-text);
  text-decoration: none;
}

.nvc-author:hover {
  text-decoration: underline;
}

.nvc-time {
  color: var(--nvc-muted);
  font-size: 12px;
}

.nvc-in-response {
  color: var(--nvc-muted);
  font-size: 12px;
}

.nvc-response-link {
  color: var(--nvc-link);
  text-decoration: none;
}

.nvc-response-link:hover {
  text-decoration: underline;
}

.nvc-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--nvc-border);
  color: var(--nvc-muted);
  background: var(--nvc-bg);
}

.badge-author {
  border-color: var(--nvc-author-gold);
  color: var(--nvc-author-gold);
}

.badge-moderator {
  border-color: var(--nvc-mod-blue);
  color: var(--nvc-mod-blue);
}

.badge-vip {
  border-color: var(--nvc-vip-purple);
  color: var(--nvc-vip-purple);
}

.badge-vip1 {
  border-color: var(--nvc-vip1-accent);
  color: var(--nvc-vip1-accent);
}

.badge-vip2 {
  border-color: var(--nvc-vip2-accent);
  color: var(--nvc-vip2-accent);
}

.badge-vip3 {
  border-color: var(--nvc-vip3-accent);
  color: var(--nvc-vip3-accent);
}

.badge-vipmax {
  border-color: var(--nvc-vipmax-accent);
  color: var(--nvc-vipmax-accent);
}

.nvc-body {
  margin-top: 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.nvc-body p {
  margin: 0 0 8px;
}

.nvc-body p:last-child {
  margin-bottom: 0;
}

.nvc-mention {
  color: var(--nvc-link);
  text-decoration: none;
  font-weight: 600;
}

.nvc-mention:hover {
  text-decoration: underline;
}

.nvc-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.nvc-actions button {
  border: none;
  background: transparent;
  color: var(--nvc-muted);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 999px;
}

.nvc-actions button:hover {
  background: var(--nvc-card-bg-alt);
}

.nvc-vote[aria-pressed="true"] {
  color: var(--nvc-text);
  background: var(--nvc-card-bg-alt);
}

.nvc-icon {
  margin-right: 4px;
}

/* Spoiler blur */
.nvc-spoiler {
  position: relative;
}

.nvc-spoiler .nvc-body-inner {
  filter: blur(8px);
  transition: filter 180ms ease;
}

.nvc-spoiler .nvc-spoiler-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  border-radius: 12px;
  background: #00000080; /* 50% black */
  color: #ffffff;
  cursor: pointer;
  transition: opacity 180ms ease;
}

.nvc-spoiler[data-revealed="1"] .nvc-body-inner {
  filter: none;
}

.nvc-spoiler[data-revealed="1"] .nvc-spoiler-overlay {
  opacity: 0;
  pointer-events: none;
}

/* Rank frames + subtle author highlight */
.nvc-comment.rank-author {
  background: var(--nvc-author-bg);
  border-color: #d4af3733;
}

/* VIP tiers: unique backgrounds to encourage subscriptions */
.nvc-comment.rank-vip1 {
  background: linear-gradient(135deg, rgba(62,166,255,.16), rgba(62,166,255,.06));
  border-color: rgba(62,166,255,.35);
}

.nvc-comment.rank-vip2 {
  background: linear-gradient(135deg, rgba(46,204,113,.18), rgba(46,204,113,.06));
  border-color: rgba(46,204,113,.38);
}

.nvc-comment.rank-vip3 {
  background: linear-gradient(135deg, rgba(212,175,55,.18), rgba(212,175,55,.06));
  border-color: rgba(212,175,55,.40);
}

.nvc-comment.rank-vipmax {
  background: linear-gradient(135deg,
    rgba(212,175,55,.20),
    rgba(178,107,255,.16),
    rgba(255,122,224,.10)
  );
  border-color: rgba(255,122,224,.45);
}

body.dark .nvc .nvc-comment.rank-author,
body.dark-mode .nvc .nvc-comment.rank-author,
html.dark .nvc .nvc-comment.rank-author,
body.theme-dark .nvc .nvc-comment.rank-author,
body.night .nvc .nvc-comment.rank-author {
  border-color: #d4af3740;
}

.nvc-avatar.rank-author {
  border: 2px solid var(--nvc-author-gold);
  box-shadow: 0 0 16px #d4af37aa;
}

.nvc-avatar.rank-moderator {
  border: 2px solid var(--nvc-mod-blue);
  box-shadow: 0 0 14px #3ea6ff80;
}

.nvc-avatar.rank-vip {
  border: 2px solid var(--nvc-vip-purple);
  box-shadow: 0 0 14px #b26bff80;
}

.nvc-avatar.rank-vip1 {
  border: 2px solid var(--nvc-vip1-accent);
  box-shadow:
    0 0 0 2px rgba(62,166,255,.22),
    0 0 0 4px rgba(62,166,255,.12),
    0 0 14px rgba(62,166,255,.48);
}

.nvc-avatar.rank-vip2 {
  border: 2px solid var(--nvc-vip2-accent);
  box-shadow:
    0 0 0 2px rgba(46,204,113,.22),
    0 0 0 4px rgba(46,204,113,.12),
    0 0 14px rgba(46,204,113,.46);
}

.nvc-avatar.rank-vip3 {
  border: 2px solid var(--nvc-vip3-accent);
  box-shadow:
    0 0 0 2px rgba(212,175,55,.22),
    0 0 0 4px rgba(212,175,55,.12),
    0 0 14px rgba(212,175,55,.50);
}

.nvc-avatar.rank-vipmax {
  border: 2px solid var(--nvc-vipmax-accent);
  /* Multi-ring frame to feel "MAX" */
  box-shadow:
    0 0 0 2px rgba(212,175,55,.22),
    0 0 0 4px rgba(178,107,255,.18),
    0 0 0 6px rgba(255,122,224,.14),
    0 0 16px rgba(255,122,224,.55);
}

/* Subtle inner shine for VIP frames (keeps the face crisp) */
.nvc-avatar.rank-vip1::after,
.nvc-avatar.rank-vip2::after,
.nvc-avatar.rank-vip3::after,
.nvc-avatar.rank-vipmax::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

/* Tree: vertical spine + curved branches (Desktop Default) */
.nvc-children {
  margin-top: 10px;
  margin-left: 0;
  padding-left: 18px;
  border-left: 1px solid var(--nvc-line);
}

.nvc.nvc-rtl .nvc-children {
  margin-left: 0;
  padding-left: 0;
  padding-right: 18px;
  border-left: none;
  border-right: 1px solid var(--nvc-line);
}

.nvc-children .nvc-comment {
  background: var(--nvc-card-bg-alt);
}

/* Keep VIP tier backgrounds even inside replies */
.nvc-children .nvc-comment.rank-vip1 {
  background: linear-gradient(135deg, rgba(62,166,255,.16), rgba(62,166,255,.06));
}
.nvc-children .nvc-comment.rank-vip2 {
  background: linear-gradient(135deg, rgba(46,204,113,.18), rgba(46,204,113,.06));
}
.nvc-children .nvc-comment.rank-vip3 {
  background: linear-gradient(135deg, rgba(212,175,55,.18), rgba(212,175,55,.06));
}
.nvc-children .nvc-comment.rank-vipmax {
  background: linear-gradient(135deg,
    rgba(212,175,55,.20),
    rgba(178,107,255,.16),
    rgba(255,122,224,.10)
  );
}

.nvc-children .nvc-comment::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 22px;
  width: 18px;
  height: 18px;
  border-left: 1px solid var(--nvc-line);
  border-bottom: 1px solid var(--nvc-line);
  border-bottom-left-radius: 12px;
}

.nvc.nvc-rtl .nvc-children .nvc-comment::before {
  left: auto;
  right: -18px;
  border-left: none;
  border-right: 1px solid var(--nvc-line);
  border-bottom: 1px solid var(--nvc-line);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 12px;
}

/* Rendered attachments */
.nvc-attachments {
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
  align-items: flex-start;
}

.nvc-attachments::-webkit-scrollbar {
  display: none;
}
.nvc-attachments {
  scrollbar-width: none;
}

.nvc-attachment {
  display: inline-block;
  flex: 0 0 auto;
  min-width: 110px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--nvc-border);
  scroll-snap-align: start;
}

.nvc-attachment-img {
  display: block;
  width: 110px !important;
  height: 110px !important;
  object-fit: cover;
}

/* Size helpers from BBCode toolbar */
.nvc-size-lg {
  font-size: 1.15em;
}

.nvc-size-sm {
  font-size: 0.9em;
}

.nvc-view-replies,
.nvc-load-more {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-bg);
  color: var(--nvc-text);
  cursor: pointer;
}

.nvc-view-replies:hover,
.nvc-load-more:hover {
  filter: brightness(1.06);
}

.nvc-empty {
  padding: 14px;
  color: var(--nvc-muted);
}

/* Inline reply form container (injected by JS) */
.nvc-reply-box {
  margin-top: 10px;
  background: var(--nvc-card-bg-alt);
  border: 1px solid var(--nvc-border);
  border-radius: 16px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

.nvc-reply-to {
  color: var(--nvc-muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.nvc-reply-box .nvc-textarea {
  min-height: 46px;
}


/* ========= Fixes (Avatar RTL + toolbar + performance) ========= */

/*
  Force avatar to appear on the RIGHT side in BOTH RTL and LTR.
  - Markup order is: avatar then main.
  - In LTR: use row-reverse to push avatar to the right.
  - In RTL: keep direction:rtl and use row so the first item (avatar) sits on the right.
*/
.nvc .nvc-comment,
.nvc .nvc-compose{
  display:flex;
  align-items:flex-start;
  gap:12px;
  flex-direction: row-reverse; /* LTR */
}
.nvc.nvc-rtl .nvc-comment,
.nvc.nvc-rtl .nvc-compose{
  flex-direction: row;
  /* RTL */
}

/* ===== Sort bar (under composer) ===== */
.nvc .nvc-sort{
  margin: 8px 0 10px;
  display: flex;
  justify-content: flex-end;
  position: relative;
}
.nvc.nvc-rtl .nvc-sort{
  /* In RTL, flex-start is the visual RIGHT. */
  justify-content: flex-start;
}
.nvc .nvc-sort-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg);
  color: var(--nvc-text);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.nvc .nvc-sort-toggle:hover{
  background: var(--nvc-card-bg-alt);
}
.nvc .nvc-sort-icon{
  width: 18px;
  height: 12px;
  display: inline-block;
  opacity: .9;
  background:
    linear-gradient(currentColor, currentColor) 0 0/18px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 5px/12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 10px/6px 2px no-repeat;
}
.nvc .nvc-sort-menu{
  position: absolute;
  top: 44px;
  right: 0;
  min-width: 180px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg);
  box-shadow: 0 12px 30px rgba(0,0,0,.20);
  z-index: 99999;
}

/* Chapters: force sort menu opaque + follow current theme variables */
.nvc[data-type="chapter"] .nvc-sort-menu,
.nvc[data-chapter]:not([data-chapter="0"]) .nvc-sort-menu{
  background: var(--nvc-card-bg, #14161b) !important;
  background-color: var(--nvc-card-bg, #14161b) !important;
  color: var(--nvc-text) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}
.nvc[data-type="chapter"] .nvc-sort-opt,
.nvc[data-chapter]:not([data-chapter="0"]) .nvc-sort-opt{
  color: var(--nvc-text) !important;
}

.nvc.nvc-rtl .nvc-sort-menu{
  right: 0;
  left: auto;
}
.nvc .nvc-sort-opt{
  width: 100%;
  text-align: right;
  border: 0;
  background: transparent;
  color: var(--nvc-text);
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}
.nvc.nvc-rtl .nvc-sort-opt{
  text-align: right;
}
.nvc .nvc-sort-opt:hover{
  background: var(--nvc-card-bg-alt);
}
.nvc .nvc-sort-opt.is-active{
  background: var(--nvc-card-bg-alt);
  border: 1px solid var(--nvc-border);
}

/* Toolbar: active state */
.nvc .nvc-fmt[aria-pressed="true"],
.nvc .nvc-fmt.is-active{
  background: var(--nvc-card-bg-alt);
  border-color: var(--nvc-border);
}

/* Prevent toolbar buttons from shifting layout on focus */
.nvc .nvc-fmt{
  line-height: 1;
}

/* Lazy initial load button */
.nvc .nvc-load-initial{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--nvc-border);
  background: var(--nvc-card-bg);
  color: var(--nvc-text);
  cursor:pointer;
}
.nvc .nvc-load-initial:hover{
  background: var(--nvc-card-bg-alt);
}

/* Legacy thread: make it visually lighter */
.nvc.nvc-legacy .nvc-title{
  opacity: .9;
}
.nvc.nvc-legacy .nvc-form{ display:none;
}

/* Performance hints (safe fallbacks) */
@supports (content-visibility: auto){
  .nvc{ content-visibility:auto; contain-intrinsic-size: 1px 600px;
}
}



/* ===== Reply box UX improvements ===== */
.nvc .nvc-reply-box{
  width: 100%;
  box-sizing: border-box;
}

.nvc .nvc-reply-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.nvc .nvc-reply-title{
  color: var(--nvc-muted);
  font-size: 12px;
  line-height: 1.2;
}

.nvc .nvc-cancel{
  appearance:none;
  border:1px solid var(--nvc-border);
  background: var(--nvc-card-bg);
  color: var(--nvc-text);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  line-height: 1;
}

.nvc .nvc-cancel:hover{
  background: var(--nvc-card-bg-alt);
}

/* Force comment layout stable: avatar stays right, content stays left, reply box stays inside content */
.nvc .nvc-comment,
.nvc .nvc-compose{
  display:flex;
  flex-direction: row;
  align-items:flex-start;
  gap:12px;
}

.nvc .nvc-avatar{ order: 2; }
.nvc .nvc-main,
.nvc .nvc-form{ order: 1; flex: 1; min-width: 0;
}

/* RTL: keep avatar on the RIGHT (start side in RTL). */
.nvc.nvc-rtl .nvc-avatar{ order: 1; }
.nvc.nvc-rtl .nvc-main,
.nvc.nvc-rtl .nvc-form{ order: 2;
}


/* ---------- More menu (⋯) ---------- */
.nvc-more-wrap{
  position: relative;
  display: inline-flex;
}

.nvc-more{
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
}

.nvc-more-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 9999;
  min-width: 160px;
  background: var(--nvc-bg);
  color: var(--nvc-text);
  border: 1px solid var(--nvc-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

.nvc.nvc-rtl .nvc-more-menu{
  left: auto;
  right: 0;
}

.nvc-more-menu .nvc-more-item{
  width: 100%;
  border: none;
  background: transparent;
  color: var(--nvc-text);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-align: start;
}

.nvc-more-menu .nvc-more-item:hover{
  background: var(--nvc-card-bg-alt);
}

.nvc-more-menu .nvc-more-item.is-danger{
  color: #ff6b6b;
}

/* ---------- Edit UI ---------- */
.nvc-edit-wrap{
  margin-top: 6px;
}

.nvc-edit-editor{
  min-height: 64px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-bg);
  color: var(--nvc-text);
  outline: none;
}

.nvc-edit-actions{
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.nvc-edit-actions button{
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg);
  color: var(--nvc-text);
  cursor: pointer;
}

.nvc-edit-actions button:hover{
  background: var(--nvc-card-bg-alt);
}

/* ---------- Pinned ---------- */
.nvc-comment.nvc-pinned{
  border-color: rgba(212, 175, 55, .55);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .20);
}

.nvc-pin-badge{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, .45);
  background: rgba(212, 175, 55, .12);
}

/* ---------- Modal (in-page alerts) ---------- */
.nvc-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.nvc-modal-overlay.is-open{
  display: flex;
}

.nvc-modal{
  width: min(520px, 95vw);
  background: var(--nvc-bg, #ffffff);
  color: var(--nvc-text, #000000);
  border: 1px solid var(--nvc-border, #e6e6e6);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  padding: 18px 18px 16px;
  position: relative;
}

.nvc-modal-title{
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
  padding-left: 44px;
  /* leave space for close button */
}

.nvc-modal-message{
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* RTL: align modal content to the right and keep comfortable right padding */
.nvc-modal-overlay[dir="rtl"] .nvc-modal{
  direction: rtl;
  text-align: right;
}

.nvc-modal-overlay[dir="rtl"] .nvc-modal-title{
  padding-left: 0;
  padding-right: 44px;
}

.nvc-modal-overlay[dir="rtl"] .nvc-modal-close{
  left: auto;
  right: 10px;
}

.nvc-modal-overlay[dir="rtl"] .nvc-modal-message{
  text-align: right;
}

/* Footer buttons (RTL): align to the right BUT keep DOM order (أسبوع، شهر، 3 أشهر، إلغاء) */
.nvc-modal-overlay[dir="rtl"] .nvc-modal-footer{
  direction: rtl;
  flex-direction: row;
  justify-content: flex-start;
}

/* Discord link: icon on the right in RTL */
.nvc-modal-overlay[dir="rtl"] .nvc-discord-link{
  flex-direction: row-reverse;
}

.nvc-modal-close{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,0,0,.26);
  background: rgba(255,0,0,.12);
  color: #ff3b3b;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nvc-modal-close:hover{
  background: rgba(255,0,0,.18);
}

/* ---------- Guest Auth (login/register buttons) ---------- */
.nvc-auth-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* In RTL, flex-start is the right edge (so buttons appear on the right). */
.nvc.nvc-rtl .nvc-auth-actions{
  justify-content: flex-start;
}

/* Alert modal is appended to <body>, so mirror RTL alignment there too. */
.nvc-modal-overlay[dir="rtl"] .nvc-auth-actions{
  justify-content: flex-start;
}

.nvc-auth-btn{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-bg);
  color: var(--nvc-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.nvc-auth-btn:hover{
  filter: brightness(1.06);
}

.nvc-auth-note{
  color: var(--nvc-muted);
  font-size: 12px;
  text-align: right;
  margin-top: -4px;
}

/* Elements that open the auth modal */
.nvc-auth-lock{
  cursor: pointer;
}

.nvc-editor.nvc-auth-lock,
.nvc-textarea.nvc-auth-lock{
  opacity: .88;
}

/* ---------- Auth Modal (login/register) ---------- */
.nvc-auth-overlay .nvc-modal{
  width: min(560px, 95vw);
}

.nvc-auth-tabs{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin: 4px 0 14px;
}

.nvc-auth-tab{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg);
  color: var(--nvc-text);
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}

.nvc-auth-tab.is-active{
  background: var(--nvc-card-bg-alt);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}

.nvc-auth-error{
  display: none;
  margin: 6px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,0,0,.25);
  background: rgba(255,0,0,.08);
  color: #ff3b3b;
  font-size: 13px;
  line-height: 1.6;
}

.nvc-auth-error.is-show{
  display: block;
}

.nvc-auth-form{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nvc-auth-field label{
  display: block;
  font-size: 12px;
  color: var(--nvc-muted);
  margin: 0 0 6px;
}

.nvc-auth-field input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-bg);
  color: var(--nvc-text);
}

.nvc-auth-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.nvc-auth-remember{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nvc-muted);
  font-size: 12px;
}

.nvc-auth-submit{
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg-alt);
  color: var(--nvc-text);
  cursor: pointer;
  font-weight: 800;
}

.nvc-auth-submit:hover{
  filter: brightness(1.06);
}

.nvc-auth-links{
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12px;
}

.nvc-auth-links a{
  color: var(--nvc-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--nvc-border);
}

.nvc-auth-links a:hover{
  color: var(--nvc-text);
}

/* ==========================================================================
   🚀 ULTRA COMPACT MOBILE FIX (With Text-Align Fix)
   ========================================================================== */
@media (max-width: 600px) {
    /* 1. Reduce Main Container Padding */
    .nvc {
        padding: 8px !important;
    }

    /* 2. Shrink Comment Cards Aggressively */
    .nvc-comment {
        padding: 6px !important;     /* Was 12px -> Now 6px to save width */
        gap: 6px !important;         /* Reduce gap between avatar and text */
        border-radius: 12px !important;
        margin-top: 8px !important;
    }

    /* 3. Tiny Avatars on Mobile */
    .nvc-avatar {
        width: 22px !important;      /* Was 40px -> Now 22px */
        height: 22px !important;
        flex: 0 0 22px !important;   /* Prevent shrinking */
        border-width: 1px !important;
    }

    /* 4. Minimal Indentation (The 5px Request) */
    .nvc-children {
        margin-top: 6px !important;
        /* Force minimal indent */
        padding-left: 5px !important;
        border-left-width: 1px !important;
    }
    .nvc.nvc-rtl .nvc-children {
        padding-right: 5px !important; /* RTL */
        padding-left: 0 !important;
        border-right-width: 1px !important;
        border-left: none !important;
    }

    /* Adjust the connecting line to match 5px */
    .nvc-children .nvc-comment::before {
        width: 5px !important;
        height: 12px !important; /* Shorter vertical line */
        left: -5px !important;
        top: 18px !important;
    }
    .nvc.nvc-rtl .nvc-children .nvc-comment::before {
        right: -5px !important;
        left: auto !important;
    }

    /* 5. STOP Indenting after Level 3 (Flattening) */
    /* This forces deep replies to use full width and NOTsquish text */
    .nvc-children .nvc-children .nvc-children {
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Hide the connector line for flattened comments */
    .nvc-children .nvc-children .nvc-children .nvc-comment::before {
        display: none !important;
    }

    /* Add a subtle top border instead of indenting for deep comments */
    .nvc-children .nvc-children .nvc-children .nvc-comment {
        margin-top: 4px !important;
        background: rgba(0,0,0,0.02) !important; /* Slightly distinct bg */
        border: 1px solid var(--nvc-border) !important;
    }

    /* 6. Font Size Scaling (Visual Hierarchy) */
    /* Level 1 */
    .nvc-comment .nvc-body { font-size: 14px; }
    /* Level 2 */
    .nvc-children .nvc-comment .nvc-body { font-size: 13.5px; }
    /* Level 3+ */
    .nvc-children .nvc-children .nvc-comment .nvc-body { font-size: 13px; }
}

/* ---------------------------------------------------------
   Fix: remove any forced black text for Translator (rank-author) + VIP3 (rank-vip3)
   and make them follow the same dark/light theme colors as other ranks
   (especially inside chapter comments panel).
   --------------------------------------------------------- */
html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-meta,
html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-meta *,
html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-body,
html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-body *,
html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-actions button,
html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-more,
html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-more-menu,
html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-more-item,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-meta,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-meta *,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-body,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-body *,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-actions button,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-more,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-more-item,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta *,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body *,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-actions button,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-menu,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-item,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta *,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body *,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-actions button,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-item,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-meta,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-meta *,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-body,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-body *,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-actions button,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-more,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-more-menu,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-more-item,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-meta,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-meta *,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-body,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-body *,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-actions button,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-more,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-more-item,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta *,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body *,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-actions button,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-menu,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-item,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta *,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body *,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-actions button,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-item,
body.dark .nvc .nvc-comment.rank-author .nvc-meta,
body.dark .nvc .nvc-comment.rank-author .nvc-meta *,
body.dark .nvc .nvc-comment.rank-author .nvc-body,
body.dark .nvc .nvc-comment.rank-author .nvc-body *,
body.dark .nvc .nvc-comment.rank-author .nvc-actions button,
body.dark .nvc .nvc-comment.rank-author .nvc-more,
body.dark .nvc .nvc-comment.rank-author .nvc-more-menu,
body.dark .nvc .nvc-comment.rank-author .nvc-more-item,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-meta,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-meta *,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-body,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-body *,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-actions button,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-more,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-more-item,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta *,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body *,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-actions button,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-menu,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-item,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta *,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body *,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-actions button,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-item,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-meta,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-meta *,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-body,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-body *,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-actions button,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-more,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-more-menu,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-more-item,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-meta,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-meta *,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-body,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-body *,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-actions button,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-more,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-more-item,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta *,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body *,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-actions button,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-menu,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-item,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta *,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body *,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-actions button,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-item,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-meta,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-meta *,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-body,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-body *,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-actions button,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-more,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-more-menu,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-more-item,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-meta,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-meta *,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-body,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-body *,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-actions button,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-more,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-more-item,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta *,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body *,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-actions button,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-menu,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-item,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta *,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body *,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-actions button,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-item,
body.night .nvc .nvc-comment.rank-author .nvc-meta,
body.night .nvc .nvc-comment.rank-author .nvc-meta *,
body.night .nvc .nvc-comment.rank-author .nvc-body,
body.night .nvc .nvc-comment.rank-author .nvc-body *,
body.night .nvc .nvc-comment.rank-author .nvc-actions button,
body.night .nvc .nvc-comment.rank-author .nvc-more,
body.night .nvc .nvc-comment.rank-author .nvc-more-menu,
body.night .nvc .nvc-comment.rank-author .nvc-more-item,
body.night .nvc .nvc-comment.rank-vip3 .nvc-meta,
body.night .nvc .nvc-comment.rank-vip3 .nvc-meta *,
body.night .nvc .nvc-comment.rank-vip3 .nvc-body,
body.night .nvc .nvc-comment.rank-vip3 .nvc-body *,
body.night .nvc .nvc-comment.rank-vip3 .nvc-actions button,
body.night .nvc .nvc-comment.rank-vip3 .nvc-more,
body.night .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
body.night .nvc .nvc-comment.rank-vip3 .nvc-more-item,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta *,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body *,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-actions button,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-menu,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-item,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta *,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body *,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-actions button,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-item,
html.dark .nvc .nvc-comment.rank-author .nvc-meta,
html.dark .nvc .nvc-comment.rank-author .nvc-meta *,
html.dark .nvc .nvc-comment.rank-author .nvc-body,
html.dark .nvc .nvc-comment.rank-author .nvc-body *,
html.dark .nvc .nvc-comment.rank-author .nvc-actions button,
html.dark .nvc .nvc-comment.rank-author .nvc-more,
html.dark .nvc .nvc-comment.rank-author .nvc-more-menu,
html.dark .nvc .nvc-comment.rank-author .nvc-more-item,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-meta,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-meta *,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-body,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-body *,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-actions button,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-more,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-more-item,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-meta *,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body *,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-actions button,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-menu,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-more-item,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-meta *,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body *,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-actions button,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-menu,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-more-item {
  color: var(--nvc-text) !important;
}

/* Day/Paper mode: ensure usernames stay readable
   - Some themes keep --text light even in day/paper.
   - Force username color to dark only in day/paper modes.
*/
html[data-theme="day"] .nvc .nvc-author,
body[data-theme="day"] .nvc .nvc-author {
  color: #000 !important;
}

html[data-theme="paper"] .nvc .nvc-author,
body[data-theme="paper"] .nvc .nvc-author {
  color: #1b1b1b !important;
}

html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-time,
html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-in-response,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-time,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-in-response,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-time,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-in-response,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-time,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-in-response,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-time,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-in-response,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-time,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-in-response,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-time,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-in-response,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-time,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-in-response,
body.dark .nvc .nvc-comment.rank-author .nvc-time,
body.dark .nvc .nvc-comment.rank-author .nvc-in-response,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-time,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-in-response,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-time,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-in-response,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-time,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-in-response,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-time,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-in-response,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-time,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-in-response,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-time,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-in-response,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-time,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-in-response,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-time,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-in-response,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-time,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-in-response,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-time,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-in-response,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-time,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-in-response,
body.night .nvc .nvc-comment.rank-author .nvc-time,
body.night .nvc .nvc-comment.rank-author .nvc-in-response,
body.night .nvc .nvc-comment.rank-vip3 .nvc-time,
body.night .nvc .nvc-comment.rank-vip3 .nvc-in-response,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-time,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-in-response,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-time,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-in-response,
html.dark .nvc .nvc-comment.rank-author .nvc-time,
html.dark .nvc .nvc-comment.rank-author .nvc-in-response,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-time,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-in-response,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-time,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-in-response,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-time,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-in-response {
  color: var(--nvc-muted) !important;
}

html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-body a,
html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-body a *,
html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-response-link,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-body a,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-body a *,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-response-link,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a *,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-response-link,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a *,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-response-link,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-body a,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-body a *,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-response-link,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-body a,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-body a *,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-response-link,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a *,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-response-link,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a *,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-response-link,
body.dark .nvc .nvc-comment.rank-author .nvc-body a,
body.dark .nvc .nvc-comment.rank-author .nvc-body a *,
body.dark .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
body.dark .nvc .nvc-comment.rank-author .nvc-response-link,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-body a,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-body a *,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-response-link,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a *,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-response-link,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a *,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-response-link,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-body a,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-body a *,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-response-link,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-body a,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-body a *,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-response-link,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a *,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-response-link,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a *,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-response-link,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-body a,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-body a *,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-response-link,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-body a,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-body a *,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-response-link,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a *,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-response-link,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a *,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-response-link,
body.night .nvc .nvc-comment.rank-author .nvc-body a,
body.night .nvc .nvc-comment.rank-author .nvc-body a *,
body.night .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
body.night .nvc .nvc-comment.rank-author .nvc-response-link,
body.night .nvc .nvc-comment.rank-vip3 .nvc-body a,
body.night .nvc .nvc-comment.rank-vip3 .nvc-body a *,
body.night .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
body.night .nvc .nvc-comment.rank-vip3 .nvc-response-link,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a *,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-response-link,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a *,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-response-link,
html.dark .nvc .nvc-comment.rank-author .nvc-body a,
html.dark .nvc .nvc-comment.rank-author .nvc-body a *,
html.dark .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
html.dark .nvc .nvc-comment.rank-author .nvc-response-link,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-body a,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-body a *,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-response-link,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body a *,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-body .nvc-mention,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-response-link,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body a *,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-body .nvc-mention,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-response-link {
  color: var(--nvc-link) !important;
}

html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.dark .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.night .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.night .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
html.dark .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3 {
  background: var(--nvc-bg) !important;
}

html[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body[data-theme="night"] .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.dark .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.dark-mode .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.theme-dark .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.night .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
html.dark .nvc .nvc-comment.rank-author .nvc-badge.badge-author,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-author .nvc-badge.badge-author {
  border-color: var(--nvc-author-gold) !important;
  color: var(--nvc-author-gold) !important;
}

html[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body[data-theme="night"] .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.dark .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.dark-mode .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.dark-mode section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.theme-dark .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.theme-dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.night .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
body.night section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
html.dark .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3,
html.dark section.mmr-comments-panel .nvc .nvc-comment.rank-vip3 .nvc-badge.badge-vip3 {
  border-color: var(--nvc-vip3-accent) !important;
  color: var(--nvc-vip3-accent) !important;
}

/* =========================================================
   NOVEL MENTION (@) - clickable highlighted tag
   ========================================================= */

/* Mention link styling inside comments */
.nvc .nvc-body a.nvc-novel-mention {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--nvc-vip1-accent);
  background: var(--nvc-vip1-accent);
  /* Day/Paper default: black like regular names */
  color: #000000;
  text-decoration: none;
  font-weight: 700;
}

.nvc .nvc-body a.nvc-novel-mention:hover {
  text-decoration: underline;
}

/* Night mode: white text on the blue chip */
html[data-theme="night"] .nvc .nvc-body a.nvc-novel-mention,
body[data-theme="night"] .nvc .nvc-body a.nvc-novel-mention,
body.dark .nvc .nvc-body a.nvc-novel-mention,
body.dark-mode .nvc .nvc-body a.nvc-novel-mention,
body.theme-dark .nvc .nvc-body a.nvc-novel-mention,
body.night .nvc .nvc-body a.nvc-novel-mention,
html.dark .nvc .nvc-body a.nvc-novel-mention,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-body a.nvc-novel-mention,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-body a.nvc-novel-mention,
body.dark section.mmr-comments-panel .nvc .nvc-body a.nvc-novel-mention,
body.dark-mode section.mmr-comments-panel .nvc .nvc-body a.nvc-novel-mention,
body.theme-dark section.mmr-comments-panel .nvc .nvc-body a.nvc-novel-mention,
body.night section.mmr-comments-panel .nvc .nvc-body a.nvc-novel-mention,
html.dark section.mmr-comments-panel .nvc .nvc-body a.nvc-novel-mention {
  color: #ffffff !important;
}

/* Day/Paper: keep black (some themes may override link color) */
html[data-theme="day"] .nvc .nvc-body a.nvc-novel-mention,
body[data-theme="day"] .nvc .nvc-body a.nvc-novel-mention,
html[data-theme="paper"] .nvc .nvc-body a.nvc-novel-mention,
body[data-theme="paper"] .nvc .nvc-body a.nvc-novel-mention,
html[data-theme="day"] section.mmr-comments-panel .nvc .nvc-body a.nvc-novel-mention,
body[data-theme="day"] section.mmr-comments-panel .nvc .nvc-body a.nvc-novel-mention,
html[data-theme="paper"] section.mmr-comments-panel .nvc .nvc-body a.nvc-novel-mention,
body[data-theme="paper"] section.mmr-comments-panel .nvc .nvc-body a.nvc-novel-mention {
  color: #000000 !important;
}

/* Editor mention chip */
.nvc .nvc-editor a.nvc-novel-mention--editor {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--nvc-vip1-accent);
  background: var(--nvc-vip1-accent);
  color: #000000;
  font-weight: 700;
  text-decoration: none;
}

html[data-theme="night"] .nvc .nvc-editor a.nvc-novel-mention--editor,
body[data-theme="night"] .nvc .nvc-editor a.nvc-novel-mention--editor,
body.dark .nvc .nvc-editor a.nvc-novel-mention--editor,
body.dark-mode .nvc .nvc-editor a.nvc-novel-mention--editor,
body.theme-dark .nvc .nvc-editor a.nvc-novel-mention--editor,
body.night .nvc .nvc-editor a.nvc-novel-mention--editor,
html.dark .nvc .nvc-editor a.nvc-novel-mention--editor,
html[data-theme="night"] section.mmr-comments-panel .nvc .nvc-editor a.nvc-novel-mention--editor,
body[data-theme="night"] section.mmr-comments-panel .nvc .nvc-editor a.nvc-novel-mention--editor,
body.dark section.mmr-comments-panel .nvc .nvc-editor a.nvc-novel-mention--editor,
body.dark-mode section.mmr-comments-panel .nvc .nvc-editor a.nvc-novel-mention--editor,
body.theme-dark section.mmr-comments-panel .nvc .nvc-editor a.nvc-novel-mention--editor,
body.night section.mmr-comments-panel .nvc .nvc-editor a.nvc-novel-mention--editor,
html.dark section.mmr-comments-panel .nvc .nvc-editor a.nvc-novel-mention--editor {
  color: #ffffff !important;
}

html[data-theme="day"] .nvc .nvc-editor a.nvc-novel-mention--editor,
body[data-theme="day"] .nvc .nvc-editor a.nvc-novel-mention--editor,
html[data-theme="paper"] .nvc .nvc-editor a.nvc-novel-mention--editor,
body[data-theme="paper"] .nvc .nvc-editor a.nvc-novel-mention--editor,
html[data-theme="day"] section.mmr-comments-panel .nvc .nvc-editor a.nvc-novel-mention--editor,
body[data-theme="day"] section.mmr-comments-panel .nvc .nvc-editor a.nvc-novel-mention--editor,
html[data-theme="paper"] section.mmr-comments-panel .nvc .nvc-editor a.nvc-novel-mention--editor,
body[data-theme="paper"] section.mmr-comments-panel .nvc .nvc-editor a.nvc-novel-mention--editor {
  color: #000000 !important;
}

/* Dropdown (portal to body) */
.nvc-novel-dd {
  /* Fallback vars (JS will override from nearest .nvc) */
  --nvc-bg: #ffffff;
  --nvc-text: #000000;
  --nvc-muted: #666666;
  --nvc-card-bg: #f7f7f7;
  --nvc-card-bg-alt: #f0f0f0;
  --nvc-border: #e6e6e6;
  --nvc-link: #1a73e8;

  position: fixed;
  max-height: 260px;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-bg);
  color: var(--nvc-text);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  padding: 6px;
  z-index: 2147483647;
  direction: rtl;
}

.nvc-novel-dd-item {
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
}

.nvc-novel-dd-item:hover,
.nvc-novel-dd-item.is-active {
  background: var(--nvc-card-bg);
}

.nvc-novel-dd-title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: var(--nvc-text);
  flex: 1 1 auto;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nvc-novel-dd-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg-alt);
  flex: 0 0 auto;
}

.nvc-novel-dd-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nvc-novel-dd-msg {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--nvc-muted);
  text-align: right;
  direction: rtl;
}




/* ==========================================================================
   🎨 MODERN UI REDESIGN — SAFE LAYER (NO FUNCTIONAL CHANGES)
   - Enhances visuals only (cards, buttons, soft blue tint)
   - Keeps menus/auth buttons clickable (no overlays blocking clicks)
   ========================================================================== */

/* Soft blue tint on the whole comments panel (matches VIP1 accent) */
.nvc{
  background:
    linear-gradient(135deg, rgba(62,166,255,0.06) 0%, rgba(62,166,255,0.00) 55%),
    var(--nvc-bg) !important;
}

/* Comment cards */
.nvc .nvc-comment{
  border: 1px solid var(--nvc-border) !important;
  border-radius: 20px !important;
  padding: 14px !important;
  margin-top: 14px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  overflow: visible; /* IMPORTANT: allow ⋯ menu to show */
}
/* Default (non‑VIP) card background */
.nvc .nvc-comment:not(.rank-vip1):not(.rank-vip2):not(.rank-vip3):not(.rank-vipmax):not(.rank-author){
  background: linear-gradient(135deg, var(--nvc-card-bg) 0%, var(--nvc-card-bg-alt) 100%) !important;
}

/* VIP card backgrounds (restore tier identity) */
.nvc .nvc-comment.rank-vip1{
  background: linear-gradient(135deg, rgba(62,166,255,.16), rgba(62,166,255,.06)) !important;
}
.nvc .nvc-comment.rank-vip2{
  background: linear-gradient(135deg, rgba(46,204,113,.18), rgba(46,204,113,.06)) !important;
}
.nvc .nvc-comment.rank-vip3{
  background: linear-gradient(135deg, rgba(212,175,55,.18), rgba(212,175,55,.06)) !important;
}
.nvc .nvc-comment.rank-vipmax{
  background: linear-gradient(135deg,
    rgba(212,175,55,.20),
    rgba(178,107,255,.16),
    rgba(255,122,224,.10)
  ) !important;
}

.nvc .nvc-comment:hover{
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}

/* Compose (new comment) */
.nvc .nvc-compose{
  background: linear-gradient(135deg, var(--nvc-card-bg) 0%, var(--nvc-card-bg-alt) 100%) !important;
  border: 1px solid var(--nvc-border) !important;
  border-radius: 20px !important;
  padding: 14px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* Author name + meta */
.nvc .nvc-author{ font-size: 14px; letter-spacing: .2px; }
.nvc .nvc-author strong{ font-weight: 900; }
.nvc .nvc-time{ font-size: 11px; opacity: .75; }

/* Actions buttons */
.nvc .nvc-actions button{
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 800;
  transition: background .12s ease, border-color .12s ease, transform .10s ease;
}

.nvc .nvc-actions button:hover{
  background: var(--nvc-card-bg-alt);
  border-color: var(--nvc-border);
  transform: translateY(-1px);
}

.nvc .nvc-actions button:active{
  transform: translateY(0) scale(.98);
}

.nvc .nvc-actions button:focus-visible{
  outline: 2px solid var(--nvc-link);
  outline-offset: 2px;
}

/* Reply action highlight */
.nvc .nvc-reply{
  color: var(--nvc-link) !important;
  font-weight: 900 !important;
}

/* Submit button */
.nvc .nvc-submit{
  background: linear-gradient(135deg, rgba(62,166,255,0.22), rgba(62,166,255,0.10)) !important;
  border: 1px solid rgba(62,166,255,0.35) !important;
  color: var(--nvc-text) !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  padding: 10px 18px !important;
  transition: background .12s ease, box-shadow .12s ease, transform .10s ease;
}

.nvc .nvc-submit:hover{
  background: linear-gradient(135deg, rgba(62,166,255,0.30), rgba(62,166,255,0.16)) !important;
  box-shadow: 0 4px 14px rgba(62,166,255,0.20);
}

.nvc .nvc-submit:active{ transform: scale(.98); }

.nvc .nvc-submit:focus-visible{
  outline: 2px solid rgba(62,166,255,0.55);
  outline-offset: 2px;
}


/* Formatting buttons (match submit) */
.nvc .nvc-fmt{
  background: linear-gradient(135deg, rgba(62,166,255,0.18), rgba(62,166,255,0.08)) !important;
  border: 1px solid rgba(62,166,255,0.30) !important;
  color: var(--nvc-text) !important;
  font-weight: 900;
  border-radius: 14px;
  min-height: 34px;
}

.nvc .nvc-fmt:hover{
  background: linear-gradient(135deg, rgba(62,166,255,0.26), rgba(62,166,255,0.14)) !important;
  box-shadow: 0 4px 14px rgba(62,166,255,0.14);
}

.nvc .nvc-fmt[aria-pressed="true"],
.nvc .nvc-fmt.is-active{
  background: linear-gradient(135deg, rgba(62,166,255,0.30), rgba(62,166,255,0.18)) !important;
  border-color: rgba(62,166,255,0.45) !important;
}

/* @ Novel mention button */
.nvc .nvc-fmt-novel{
  min-width: 40px;
  letter-spacing: .2px;
}
/* Editor */
.nvc .nvc-editor,
.nvc .nvc-textarea{
  border-radius: 14px !important;
  line-height: 1.7;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.nvc .nvc-editor:focus,
.nvc .nvc-textarea:focus{
  border-color: rgba(62,166,255,0.45) !important;
  box-shadow: 0 0 0 3px rgba(62,166,255,0.12) !important;
  outline: none !important;
}

/* VIP badge icon */
.nvc .nvc-vip-icon{
  vertical-align: -2px;
  margin-inline-end: 4px;
  opacity: .95;
}

/* Make dropdown menus crisp and always on top */
.nvc .nvc-more-menu{
  z-index: 99999;
  border-radius: 14px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22) !important;
}

/* Auth buttons (login/register) — keep clickable, just enhance look */
.nvc .nvc-auth-btn{
  border-radius: 14px !important;
  font-weight: 900 !important;
  transition: background .12s ease, border-color .12s ease, transform .10s ease;
}

.nvc .nvc-auth-btn:hover{
  background: var(--nvc-card-bg-alt) !important;
  border-color: var(--nvc-border) !important;
  transform: translateY(-1px);
}

/* Theme-specific shadows */
html[data-theme="night"] .nvc .nvc-comment{ box-shadow: 0 2px 12px rgba(0,0,0,0.24); }
html[data-theme="night"] .nvc .nvc-comment:hover{ box-shadow: 0 4px 20px rgba(0,0,0,0.32); }

html[data-theme="paper"] .nvc .nvc-comment{ box-shadow: 0 2px 12px rgba(90,70,40,0.08); }
html[data-theme="paper"] .nvc .nvc-comment:hover{ box-shadow: 0 4px 20px rgba(90,70,40,0.12); }

/* Keep existing VIP card gradients; just add nicer borders/shadows */
.nvc .nvc-comment.rank-vip1,
.nvc .nvc-comment.rank-vip2,
.nvc .nvc-comment.rank-vip3,
.nvc .nvc-comment.rank-vipmax,
.nvc .nvc-comment.rank-author{
  overflow: visible;
}

.nvc .nvc-comment.rank-vip1{ border-color: rgba(62,166,255,0.30) !important; }
.nvc .nvc-comment.rank-vip2{ border-color: rgba(46,204,113,0.30) !important; }
.nvc .nvc-comment.rank-vip3{ border-color: rgba(212,175,55,0.35) !important; }
.nvc .nvc-comment.rank-vipmax{ border-color: rgba(255,122,224,0.35) !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .nvc .nvc-comment,
  .nvc .nvc-actions button,
  .nvc .nvc-submit,
  .nvc .nvc-auth-btn{
    transition: none !important;
  }
}


/* =========================================================
   PATCH: buttons + VIP icon colors
   - Make "عرض مزيد من الردود" + "إرفاق صور" match submit button style
   - Make VIP star icon follow rank accent (fix VIP3 star white)
   ========================================================= */

/* Load / View replies buttons — match submit */
.nvc .nvc-view-replies,
.nvc .nvc-load-more,
.nvc .nvc-load-initial{
  background: linear-gradient(135deg, rgba(62,166,255,0.22), rgba(62,166,255,0.10)) !important;
  border: 1px solid rgba(62,166,255,0.35) !important;
  color: var(--nvc-text) !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  padding: 10px 18px !important;
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease, transform .10s ease;
}

.nvc .nvc-view-replies:hover,
.nvc .nvc-load-more:hover,
.nvc .nvc-load-initial:hover{
  background: linear-gradient(135deg, rgba(62,166,255,0.30), rgba(62,166,255,0.16)) !important;
  box-shadow: 0 4px 14px rgba(62,166,255,0.20);
}

.nvc .nvc-view-replies:active,
.nvc .nvc-load-more:active,
.nvc .nvc-load-initial:active{
  transform: scale(.98);
}

.nvc .nvc-view-replies:focus-visible,
.nvc .nvc-load-more:focus-visible,
.nvc .nvc-load-initial:focus-visible{
  outline: 2px solid rgba(62,166,255,0.55);
  outline-offset: 2px;
}

/* Attach images — match submit */
.nvc .nvc-attach{
  background: linear-gradient(135deg, rgba(62,166,255,0.22), rgba(62,166,255,0.10)) !important;
  border: 1px solid rgba(62,166,255,0.35) !important;
  color: var(--nvc-text) !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  transition: background .12s ease, box-shadow .12s ease, transform .10s ease;
}

.nvc .nvc-attach:hover{
  background: linear-gradient(135deg, rgba(62,166,255,0.30), rgba(62,166,255,0.16)) !important;
  box-shadow: 0 4px 14px rgba(62,166,255,0.20);
  transform: translateY(-1px);
}

.nvc .nvc-attach:active{
  transform: scale(.98);
}

/* Sort toggle — match attach sticker button */
.nvc .nvc-sort-toggle{
  background: linear-gradient(135deg, rgba(62,166,255,0.22), rgba(62,166,255,0.10)) !important;
  border: 1px solid rgba(62,166,255,0.35) !important;
  color: var(--nvc-text) !important;
  font-weight: 900 !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  transition: background .12s ease, box-shadow .12s ease, transform .10s ease;
}

.nvc .nvc-sort-toggle:hover{
  background: linear-gradient(135deg, rgba(62,166,255,0.30), rgba(62,166,255,0.16)) !important;
  box-shadow: 0 4px 14px rgba(62,166,255,0.20);
  transform: translateY(-1px);
}

.nvc .nvc-sort-toggle:active{
  transform: scale(.98);
}

/* VIP star icon — always follow rank color */
.nvc .nvc-badge.badge-vip1 .nvc-vip-icon{
  color: var(--nvc-vip1-accent) !important;
  fill: currentColor !important;
}
.nvc .nvc-badge.badge-vip2 .nvc-vip-icon{
  color: var(--nvc-vip2-accent) !important;
  fill: currentColor !important;
}
.nvc .nvc-badge.badge-vip3 .nvc-vip-icon{
  color: var(--nvc-vip3-accent) !important;
  fill: currentColor !important;
}
.nvc .nvc-badge.badge-vipmax .nvc-vip-icon{
  color: var(--nvc-vipmax-accent) !important;
  fill: currentColor !important;
}
/* =========================================================
   VIP3 star color hard-fix
   بعض القوالب تفرض لون SVG أبيض في الوضع الليلي، لذا نثبت نجمة VIP3 ذهبية دائماً.
   ========================================================= */
.nvc .nvc-badge.badge-vip3 .nvc-vip-icon,
.nvc .nvc-badge.badge-vip3 .nvc-vip-icon path{
  color: var(--nvc-vip3-accent) !important;
  fill: var(--nvc-vip3-accent) !important;
}

/* ========================================================================== 
   Reactions panel — subtle blue glow (night/day/paper)
   ========================================================================== */

/* Default (dark-ish): add a faint blue aura so it doesn't feel plain black */
.nvc .nvc-reactions{
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(62,166,255,.16) 0%, rgba(62,166,255,0) 55%),
    radial-gradient(90% 120% at 0% 30%, rgba(62,166,255,.10) 0%, rgba(62,166,255,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.38) 60%, rgba(0,0,0,.32) 100%) !important;
  border-color: rgba(62,166,255,.18) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.22),
    0 0 0 1px rgba(62,166,255,.10),
    0 0 28px rgba(62,166,255,.08),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Light (day/paper): tint the white panel slightly blue instead of flat white */
.nvc.nvc-theme-light .nvc-reactions{
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(26,115,232,.18) 0%, rgba(26,115,232,0) 55%),
    radial-gradient(90% 120% at 0% 30%, rgba(26,115,232,.10) 0%, rgba(26,115,232,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(245,248,255,.96) 60%, rgba(240,244,255,.98) 100%) !important;
  border-color: rgba(26,115,232,.16) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.10),
    0 0 0 1px rgba(26,115,232,.08),
    0 0 24px rgba(26,115,232,.06),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}


/* ======================================================================
   Publisher moderation UI (ban/delete confirm) + Discord link
   ====================================================================== */
.nvc-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.nvc-modal-btn {
  border: 1px solid var(--nvc-border);
  background: var(--nvc-card-bg);
  color: var(--nvc-text);
  border-radius: 14px;
  padding: 8px 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.nvc-modal-btn:hover {
  background: var(--nvc-card-bg-alt);
  border-color: var(--nvc-border);
  transform: translateY(-1px);
}

.nvc-modal-btn:active {
  transform: translateY(0) scale(0.98);
}

.nvc-modal-btn-primary {
  background: linear-gradient(135deg, rgba(92,124,255,0.22), rgba(92,124,255,0.12));
  border: 1px solid rgba(92,124,255,0.35);
}

.nvc-discord-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  text-decoration: none;
  font-weight: 900;
  color: #5865F2;
}

.nvc-discord-link svg {
  display: inline-block;
}


/* FINAL: make sort menu fully opaque in chapters + respect theme (dark/light) */
.nvc[data-type="chapter"].nvc-theme-dark .nvc-sort-menu,
.nvc.nvc-theme-dark[data-chapter]:not([data-chapter="0"]) .nvc-sort-menu{
  background: #0f1115 !important;
  background-color: #0f1115 !important;
  color: #eaeef5 !important;
  border-color: rgba(255,255,255,.14) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}
.nvc[data-type="chapter"].nvc-theme-light .nvc-sort-menu,
.nvc.nvc-theme-light[data-chapter]:not([data-chapter="0"]) .nvc-sort-menu{
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111111 !important;
  border-color: rgba(0,0,0,.12) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}
.nvc[data-type="chapter"] .nvc-sort-opt,
.nvc[data-chapter]:not([data-chapter="0"]) .nvc-sort-opt{
  color: inherit !important;
}
.nvc[data-type="chapter"] .nvc-sort-opt:hover,
.nvc[data-type="chapter"] .nvc-sort-opt.is-active,
.nvc[data-chapter]:not([data-chapter="0"]) .nvc-sort-opt:hover,
.nvc[data-chapter]:not([data-chapter="0"]) .nvc-sort-opt.is-active{
  background: rgba(127,127,127,.18) !important;
}



/* HARD OVERRIDE: sort menu must be opaque in chapter pages (theme may override) */
.nvc.nvc-theme-dark[data-chapter]:not([data-chapter="0"]) .nvc-sort .nvc-sort-menu,
.nvc.nvc-theme-dark[data-type="chapter"] .nvc-sort .nvc-sort-menu{
  background: #0f1115 !important;
  background-color: #0f1115 !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #eaeef5 !important;
  border-color: rgba(255,255,255,.14) !important;
}

.nvc.nvc-theme-light[data-chapter]:not([data-chapter="0"]) .nvc-sort .nvc-sort-menu,
.nvc.nvc-theme-light[data-type="chapter"] .nvc-sort .nvc-sort-menu{
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #111111 !important;
  border-color: rgba(0,0,0,.12) !important;
}