/* ── Moderator sites — shared overrides ──────────────────────────────────────
   Loaded on top of the main /style.css. Moderator pages intentionally look
   and feel different from BTW itself: dark background by default, different
   type, no dark-on-dark "card" boxes for body content — only the side nav
   is a box. Keep BTW-specific styling out of the root style.css — anything
   moderator-only belongs in here instead. Only pages that link this
   stylesheet are affected; nothing here touches the main site. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Cinzel is already imported by /style.css — reused here for the same serif
   heading font BTW itself uses, per request. */

html { background: #0a0a0a; }

/* ── NSFW toggle switch — same pill/slider component as the account
   settings page's SFW Mode switch (defined in /style.css), redeclared here
   so pages that only load fanpages.css (no /style.css), like
   create-character.html, still get it. Checked = red/NSFW, unchecked =
   green/Safe For Work. */
.nsfw-toggle-row { display: flex; align-items: center; gap: 0.7rem; }
.nsfw-toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.nsfw-toggle-switch input { opacity: 0; width: 0; height: 0; }
.nsfw-toggle-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: #d97a72; border-radius: 999px; transition: background 0.2s;
}
.nsfw-toggle-slider::before {
  content: ''; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.2s;
}
.nsfw-toggle-switch input:not(:checked) + .nsfw-toggle-slider { background: #2fbf5f; }
.nsfw-toggle-switch input:checked + .nsfw-toggle-slider::before { transform: translateX(20px); }
.nsfw-toggle-label { font-weight: 700; font-size: 0.95rem; color: #d97a72; }
.nsfw-toggle-label--sfw { color: #2fbf5f; }

/* ── e621-style numbered pager — shared by anywhere a grid gets paged
   42-at-a-time (Submissions search, a profile's own Gallery tab, etc).
   Originally search.html-only; redeclared here so any fanpages page can
   reuse the exact same look without duplicating the rules per-page. ── */
.fp-pagination { display: flex; justify-content: center; gap: 0.6rem; margin-top: 2.5rem; }
.fp-page-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.18); color: #ccc; border-radius: 8px;
  min-width: 2.2rem; height: 2.2rem; padding: 0 0.5em; cursor: pointer; font-family: inherit; font-size: 0.9rem; font-weight: 600;
}
.fp-page-btn:hover:not(:disabled):not(.fp-page-btn--active) { border-color: #7fa8d9; color: #7fa8d9; }
.fp-page-btn:disabled { opacity: 0.35; cursor: default; }
.fp-page-btn--active { background: #f0c060; border-color: #f0c060; color: #14121a; box-shadow: 0 0 16px rgba(240,192,96,0.65); }
.fp-page-ellipsis { color: #777; padding: 0 0.2rem; font-size: 0.9rem; }
#fp-pagination-top { margin-bottom: 1.75rem; }
#fp-pagination-top:not([hidden]) { margin-top: 0.5rem; }

/* Characters/Chapters/Gallery share .site-banner with the main BTW site
   (art.html, spicy.html, etc. in style.css) at a shorter 320px — bumped up
   here to match the story home page's .wiki-cover (460px) so the banner is
   consistent across every story sub-page. Scoped to this stylesheet only,
   so the main site's own use of .site-banner is untouched. */
.site-banner-inner { max-height: 460px; }
.site-banner img { height: 460px; }
/* Same reason as .wiki-cover's z-index:1 above — .mod-page-bg-wrap right
   after this is a positioned stack-level-0 box now, which without this
   would paint its (now viewport-covering, fixed) background straight over
   this banner instead of staying behind it. */
.site-banner-inner { position: relative; z-index: 1; }

/* Cozy blue/red theme, dark background by default. Redeclaring these custom
   properties re-skins every reused BTW class (rules, borders, footer text,
   nav links) without touching a single rule in the root stylesheet. */
body.mod-theme {
  background: #0a0a0a;
  color: #f0f0f0;
  font-family: 'Inter', 'Lato', sans-serif;
  --violet: #7fa8d9; /* soft blue, legible on dark */
  --rose:   #d97a72; /* warm coral red */
  --gold:   #7fa8d9; /* accent — reuses the blue */
  --mist:   #b0b0b0; /* body text tint */
  --light:  #f0f0f0;
  --border: rgba(255,255,255,0.1);
}

/* The two side-column boxes (account + nav) are theme-aware — driven by the
   same --mod-* custom properties the theme picker sets on <body>. Fallback
   values keep them looking right on pages that don't run the theme JS yet
   (characters/chapters/gallery). */
.mod-return-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none !important;
  border: 1px solid var(--mod-accent-border, rgba(127, 168, 217, 0.4)) !important;
  border-radius: 20px;
  padding: 0.4rem 0.75rem !important;
  color: var(--mod-text-primary, #f0f0f0) !important;
  transition: background 0.2s, border-color 0.2s, color 0.2s !important;
}
.mod-return-btn:hover {
  background: var(--mod-accent-bg, rgba(127, 168, 217, 0.1));
  border-color: var(--violet);
  color: var(--violet) !important;
}

.mod-account-box .nav-user-btn {
  width: 100%;
  background: var(--mod-accent2-bg, rgba(217, 122, 114, 0.08));
  border: 1px solid var(--mod-accent2-border, rgba(217, 122, 114, 0.3));
  color: var(--mod-text-primary, #f0f0f0);
}
.mod-account-box .nav-user-btn:hover { background: var(--mod-accent2-bg-hover, rgba(217, 122, 114, 0.14)); border-color: var(--rose); }
.mod-account-box .nav-user-dropdown { background: var(--mod-card-bg, #161616); border: 1px solid var(--mod-card-border, rgba(255,255,255,0.1)); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.mod-account-box .nav-user-dropdown a { color: var(--mod-text-primary, #f0f0f0); }
.mod-account-box .nav-user-dropdown a:hover { background: var(--mod-accent-bg, #1e1e1e); color: var(--mod-text-primary, #fff); }

.mod-placeholder-wrap {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

/* ── Cover ── */
.wiki-cover {
  /* z-index:1 is required, not optional — .mod-page-bg-wrap (a sibling
     right after this) is position:relative + z-index:0 (needed so ITS OWN
     negative-z-index children stay contained), which makes the whole wrap
     a "positioned, stack-level-0" box that paints AFTER ordinary
     non-positioned siblings like this banner regardless of DOM order.
     Without an explicit z-index here to counter that, the wrap's now-
     viewport-covering fixed background overlay paints straight over the
     banner, hiding it completely. */
  position: relative;
  z-index: 1;
  width: 100%;
  height: 460px;
  overflow: hidden;
}
.wiki-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 0.2s;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
/* Hidden until JS confirms which image (the moderator's own, or the shared
   fallback) actually belongs here — prevents a flash of the wrong banner. */
.wiki-cover img.mod-banner-loading {
  opacity: 0;
  transition: none;
}
.wiki-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(10,10,10,0.95) 100%);
}

/* Editing state — blur + greenish haze over the banner, Wattpad-style */
.wiki-cover img { transition: filter 0.2s; }
.wiki-cover.mod-editing-banner img { filter: blur(6px) saturate(0.85) brightness(0.9); }
.wiki-cover.mod-editing-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(24, 74, 62, 0.55);
  z-index: 2;
}

/* Owner-only shortcut into the banner's image editor — fades in on hover
   instead of sitting there all the time, hidden once already editing (the
   full mod-banner-edit-wrap camera controls take over then). Mirrors the
   profile editor's fp-banner-edit-pencil exactly. */
.mod-banner-edit-pencil {
  position: absolute; bottom: 1.1rem; right: 1.1rem; z-index: 6;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.35); color: #fff;
  font-size: 1.05rem; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.18s, background 0.15s;
}
.wiki-cover:hover .mod-banner-edit-pencil { opacity: 1; }
.mod-banner-edit-pencil:hover { background: rgba(0,0,0,0.85); }

/* Bookmark toggle — icon-only circle sitting just left of the banner
   pencil (same size/position pattern), for owners and visitors alike. */
.mod-bookmark-btn {
  position: absolute; bottom: 1.1rem; right: 4.75rem; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.35);
  cursor: pointer; backdrop-filter: blur(4px); transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.mod-bookmark-btn:hover { background: rgba(0,0,0,0.85); }
.mod-bookmark-btn.bookmarked {
  color: #7fa8d9; border-color: #7fa8d9; background: rgba(127,168,217,0.22);
  box-shadow: 0 0 16px rgba(127,168,217,0.55);
}

/* VeekitPaws-only VIP badge — top-left of her own story's banner. Purely a
   data-driven check against the site's author_username, not a special file. */
.mod-vip-badge {
  position: absolute; top: 1.25rem; left: 1.5rem; z-index: 3;
  display: flex; align-items: center; gap: 0.4rem;
  background: linear-gradient(135deg, rgba(107,63,160,0.85), rgba(194,84,122,0.85));
  border: 1px solid rgba(240,192,96,0.6); border-radius: 20px;
  padding: 0.4rem 1rem; backdrop-filter: blur(4px);
  color: #fff; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 700;
  box-shadow: 0 0 18px rgba(240,192,96,0.4);
}
.mod-vip-badge-star { color: #f0c060; text-shadow: 0 0 10px rgba(240,192,96,0.8); }

/* "Written by" bubble — bottom-left of the banner, mirrors Edit Story's corner */
.mod-written-by {
  position: absolute; left: 1.5rem; bottom: 1.25rem; z-index: 3;
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(0,0,0,0.55); border-radius: 26px; padding: 0.4rem 1rem 0.4rem 0.4rem;
  text-decoration: none; backdrop-filter: blur(4px); transition: background 0.15s;
}
.mod-written-by:hover { background: rgba(0,0,0,0.75); }
/* .wiki-cover img { width:100%; height:100%; } outweighs a single class on
   specificity, which is what blew this avatar up to fill the whole banner —
   scoped selector here beats it back down to its intended 32px. */
.wiki-cover img.mod-written-by-avatar {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #333; flex-shrink: 0;
}
.mod-written-by-avatar-fallback {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7fa8d9, #d97a72); color: #fff; font-size: 0.8rem; font-weight: 700;
}
.mod-written-by-text { display: flex; flex-direction: column; line-height: 1.25; }
.mod-written-by-label { font-size: 0.65rem; color: rgba(255,255,255,0.65); font-family: 'Inter', sans-serif; }
.mod-written-by-name { font-size: 0.85rem; color: #fff; font-weight: 700; font-family: 'Inter', sans-serif; }

/* Author box — sits directly under the Navigate side-nav box */
.mod-author-box {
  background: var(--mod-card-bg, #161616);
  border: 1px solid var(--mod-card-border, rgba(255,255,255,0.08));
  border-top: 3px solid var(--violet);
  border-radius: 14px;
  padding: 1.25rem 1rem;
  margin-top: 1.25rem;
}
.mod-author-box-label {
  font-family: 'Cinzel', serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--violet); margin: 0 0 0.9rem; padding: 0 0.25rem;
}
.mod-author-box-row { display: flex; align-items: center; gap: 0.7rem; }
.mod-author-box-link { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex: 1; min-width: 0; }
.mod-author-box-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #333; flex-shrink: 0; }
.mod-author-box-avatar-fallback {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7fa8d9, #d97a72); color: #fff; font-size: 0.9rem; font-weight: 700;
}
.mod-author-box-name {
  font-size: 0.88rem; font-weight: 700; color: var(--mod-text-primary, #f0f0f0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mod-author-box-btn {
  flex-shrink: 0; border: none; cursor: pointer; text-decoration: none; display: inline-block;
  font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700;
  padding: 0.4rem 0.85rem; border-radius: 16px;
  background: var(--mod-accent-bg, rgba(127,168,217,0.15)); color: var(--violet);
  border: 1px solid var(--mod-accent-border, rgba(127,168,217,0.4));
}
.mod-author-box-btn:hover { background: var(--mod-accent-bg-hover, rgba(127,168,217,0.22)); }
.mod-author-box-btn.following { color: var(--mod-text-secondary, #999); border-color: var(--mod-card-border, rgba(255,255,255,0.15)); background: transparent; }

/* ── Book box — sits under Navigate on a story's Characters/Gallery pages:
   the book's own cover + a follow-the-author row, so browsing feels like
   you're looking at this content through the lens of that specific book
   instead of a generic character/art feed. Gold accent (vs. the plain
   author box's violet) to read as "about this book" rather than "about
   this page." ── */
.mod-book-box {
  background: var(--mod-card-bg, #161616);
  border: 1px solid var(--mod-card-border, rgba(255,255,255,0.08));
  border-top: 3px solid #f0c060;
  border-radius: 14px;
  padding: 1.1rem 1rem;
  text-align: center;
}
.mod-book-box-cover-link { display: block; margin-bottom: 0.9rem; }
.mod-book-box-cover {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block;
  border-radius: 10px; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
  transition: transform 0.2s;
}
.mod-book-box-cover-link:hover .mod-book-box-cover { transform: translateY(-3px); }
.mod-book-box-title {
  font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 700; color: #f0f0f0;
  line-height: 1.3; margin-bottom: 0.9rem;
}
.mod-book-box-author-row { display: flex; align-items: center; gap: 0.55rem; text-align: left; }
.mod-book-box-author-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex: 1; min-width: 0; }
.mod-book-box-author-avatar, .mod-book-box-author-avatar-fallback {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: #333;
}
.mod-book-box-author-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7fa8d9, #d97a72); color: #fff; font-size: 0.8rem; font-weight: 700;
}
.mod-book-box-author-name {
  font-size: 0.82rem; font-weight: 700; color: #ddd;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mod-book-box-follow-btn {
  flex-shrink: 0; border: none; cursor: pointer; text-decoration: none; display: inline-block;
  font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 700;
  padding: 0.35rem 0.75rem; border-radius: 16px;
  background: rgba(240,192,96,0.15); color: #f0c060; border: 1px solid rgba(240,192,96,0.4);
}
.mod-book-box-follow-btn:hover { background: rgba(240,192,96,0.22); }
.mod-book-box-follow-btn.following { color: #999; border-color: rgba(255,255,255,0.15); background: transparent; }

/* ── Quick-nav cards — Characters/Chapters on top, Gallery centered below,
   forming an upside-down triangle. Sized to sit only in the left/main
   column, never spanning the page — hence the max-width cap. ── */
.mod-quick-nav {
  max-width: 560px;
  /* Centered in display mode so it doesn't sit flush-left with a big dead
     gap on the right now that the main column is much wider — editor mode
     resets left/right back to 0 below since it's a flex item there
     (cards+cover side by side), where auto margins would fight the flex
     layout instead of centering anything. */
  margin: 0 auto 2.5rem;
}
.mod-quick-nav-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.25rem;
}
.mod-quick-nav-row + .mod-quick-nav-row {
  margin-top: 1.25rem;
}
.mod-quick-nav-row--single {
  display: flex;
  justify-content: center;
}

.mod-quick-nav-card {
  position: relative; display: block; text-decoration: none;
  /* 16:9 — matches the full-width card row on the live story page, so the
     editor preview (and the crop tool, see uploadQnCard's aspectRatio in
     edit.html) shows moderators exactly the shape their crop will end up
     displaying as. */
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  /* Forces its own compositing layer so the rounded overflow:hidden clip
     stays crisp while the img inside scales on hover — without this, some
     browsers rasterize the clip and the scaled child separately and leave a
     faint aliased sliver of the square image poking past the rounded edge. */
  transform: translateZ(0);
  background: #0a0a0a; border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.3s, box-shadow 0.3s;
}
/* Matches the top row's per-card width: (100% - row gap) / 2 */
.mod-quick-nav-row--single .mod-quick-nav-card { width: calc(50% - 1.125rem); }
.mod-quick-nav-card:hover { border-color: var(--violet); box-shadow: 0 0 24px rgba(127,168,217,0.18); }
.mod-quick-nav-card img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease, filter 0.2s;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
.mod-quick-nav-card:hover img { transform: scale(1.06); }
.mod-quick-nav-card.mod-editing img { filter: blur(4px) brightness(0.7); }
.mod-quick-nav-card.mod-editing:hover img { transform: none; }

/* Recrop shortcut — reopens the Cropper.js modal on the existing card
   image, only shown once a custom (non-default) image is set. Sits at the
   bottom of the card, away from the camera "change image" button up in the
   top-right corner — on the compact editor-sized cards, the pill's text is
   wide enough to reach clear across the card and cover the camera button
   otherwise. */
.mod-quick-nav-card-recrop-btn {
  position: absolute; bottom: 0.5rem; left: 0.5rem; z-index: 2;
  width: auto; max-width: calc(100% - 1rem); white-space: nowrap; box-sizing: border-box;
}
.mod-quick-nav-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.3) 45%, transparent 100%);
  display: flex; align-items: flex-end; padding: 0.9rem 1rem;
}
.mod-quick-nav-card-label {
  font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em;
  color: #fff; text-transform: uppercase; transition: color 0.3s;
}
.mod-quick-nav-card:hover .mod-quick-nav-card-label { color: var(--violet); }

/* Owner-only camera badge, appears while editing */
.mod-quick-nav-card-edit-btn {
  position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.3); color: #fff;
  font-size: 0.85rem; cursor: pointer;
}
.mod-quick-nav-card-edit-btn:hover { background: rgba(0,0,0,0.9); }

@media (max-width: 560px) {
  .mod-quick-nav { max-width: 100%; }
}


.mod-banner-edit-wrap {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.mod-banner-edit-btn {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(0,0,0,0.65); color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 10px;
  padding: 0.7rem 1.2rem; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s;
}
.mod-banner-edit-btn:hover { background: rgba(0,0,0,0.8); }
.mod-banner-edit-hint { color: rgba(255,255,255,0.85); font-size: 0.72rem; font-family: 'Inter', sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

.mod-banner-reposition {
  position: absolute; right: 1.5rem; top: 1.25rem; z-index: 3;
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(0,0,0,0.5); border-radius: 20px; padding: 0.4rem 0.9rem;
}
.mod-banner-reposition label { color: #fff; font-size: 0.72rem; font-family: 'Inter', sans-serif; white-space: nowrap; }
.mod-banner-reposition input[type="range"] { width: 100px; }

/* Fully replaces the main nav bar while editing — same pattern as the
   profile editor's bar, which sits at top:0 and hides #fanpages-topbar-root
   entirely rather than stacking below it. */
.mod-edit-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  height: 84px; box-sizing: border-box;
  align-items: center; justify-content: space-between;
  background: #161616; border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 0 1.75rem; font-family: 'Inter', sans-serif;
}
body.mod-editing-active #fanpages-topbar-root { display: none; }
/* The fixed 84px .mod-edit-bar replaces the normal topbar while editing,
   but nothing pushed the banner down to clear it -- it rendered flush at
   y:0 and sat hidden underneath the bar. (The mobile breakpoint already
   had a `margin-top: 0 !important` reset for this exact rule, implying a
   base margin was always meant to exist here; it just never got added.) */
body.mod-editing-active .wiki-cover { margin-top: 84px; }
.mod-edit-bar-left { display: flex; align-items: center; gap: 1.1rem; }
/* Back to the Creator Hub — Wattpad-style: a plain chevron beside the
   "Editing Your Story" eyebrow + big story title, instead of the old flat
   "Editing your story" label with a Delete button glued next to it (Delete
   now only lives in the Creator Hub's "..." menu and the last-part-deleted
   safeguard). */
.mod-edit-bar-back {
  display: inline-flex; align-items: center; justify-content: center;
  color: #aaa; text-decoration: none; line-height: 1;
  padding: 0.2rem 0.3rem; flex-shrink: 0; transition: color 0.15s;
}
.mod-edit-bar-back:hover { color: #fff; }
.mod-edit-bar-titles { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.mod-edit-bar-label {
  font-size: 0.78rem; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.06em;
}
.mod-edit-bar-title {
  font-family: 'Baloo 2', 'Cinzel', serif; font-size: 1.4rem; font-weight: 700; color: #f5f5f5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw;
}
.mod-edit-bar-actions { display: flex; gap: 0.8rem; align-items: center; }
/* Mimics the profile editor's fp-edit-btn Save/Cancel pills exactly. */
.mod-edit-bar-save,
.mod-edit-bar-cancel {
  border: none; cursor: pointer; font-family: 'Fredoka', 'Inter', sans-serif;
  font-size: 1.02rem; font-weight: 600;
  padding: 0.8rem 1.85rem; border-radius: 26px;
}
.mod-edit-bar-cancel { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #f0f0f0; }
.mod-edit-bar-cancel:hover { border-color: #f0f0f0; }
.mod-edit-bar-save { background: #1fb6a8; color: #fff; transition: background 0.15s, box-shadow 0.2s; }
.mod-edit-bar-save:hover { background: #1a9d91; }
/* Glows once it's actually clickable, so becoming enabled reads as "there's
   a real, savable change waiting" rather than a silent color swap. */
.mod-edit-bar-save:not(:disabled) { box-shadow: 0 0 16px rgba(31,182,168,0.55); }
.mod-edit-bar-save:not(:disabled):hover { box-shadow: 0 0 22px rgba(31,182,168,0.75); }

.mod-edit-bar-theme-btn {
  background: none; border: 1px solid rgba(255,255,255,0.15); border-radius: 20px;
  padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; color: #bbb; cursor: pointer;
  display: flex; align-items: center; gap: 0.4rem;
}
.mod-edit-bar-theme-btn:hover { border-color: #7fa8d9; color: #7fa8d9; }

/* Floating theme-wheel — sits directly under the banner pencil (same right
   offset), fades in on hover, hidden while editing. Mirrors the profile
   editor's fp-theme-picker--floating exactly.
   NOTE: uses the doubled-up selector (not just .mod-theme-picker--floating)
   so its `position: absolute` beats the plain .mod-theme-picker's
   `position: relative` declared further down — same specificity (0,1,0)
   otherwise, and that rule wins on source order, which silently drops this
   out of absolute positioning and left it stuck at the top-left in flow. */
.mod-theme-picker.mod-theme-picker--floating {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 20;
  opacity: 0; pointer-events: none; transition: opacity 0.18s;
}
.mod-page-bg-wrap:hover .mod-theme-picker--floating { opacity: 1; pointer-events: auto; }
.mod-theme-btn-floating {
  background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #f0f0f0;
  cursor: pointer; font-size: 1.1rem;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.mod-theme-btn-floating:hover { border-color: #f0f0f0; background: rgba(255,255,255,0.08); }

/* ── Theme picker popover (Chrome-style) ─────────────────────────────────── */
.mod-theme-picker { position: relative; }
.mod-theme-popover {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  background: #161616; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); padding: 1rem; width: 260px;
}
.mod-theme-popover-label { font-size: 0.75rem; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; }
.mod-theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.mod-theme-swatch {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; padding: 0; overflow: hidden;
  display: flex; box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.mod-theme-swatch span { display: block; width: 50%; height: 100%; }
.mod-theme-swatch.active { border-color: #7fa8d9; }
.mod-theme-swatch--upload {
  align-items: center; justify-content: center; background: #1e1e1e; color: #999; font-size: 1.1rem;
}
.mod-theme-swatch--upload:hover { background: #292929; }

.mod-editable-block { position: relative; }
.mod-edit-input { margin-top: 0.25rem; }

/* ── Compact editing layout — while actively editing, the page reflows
   into a dedicated editor view: side column gone (Navigate/Author box
   aren't editable), quick-nav cards stack vertically on the left with the
   cover to their right, and Description/Bio/Links/Tags read as one
   continuous form. None of this touches display mode — it's all scoped
   under body.mod-editing-active, and the wrapping divs it targets
   (#editor-top-row, #editor-form-box) carry no styling of their own
   outside that class. ── */
body.mod-editing-active .wiki-side-col { display: none; }
body.mod-editing-active .wiki-layout { grid-template-columns: 1fr; max-width: 820px; }
body.mod-editing-active .wiki-title { margin-bottom: 1.5rem; }
body.mod-editing-active .mod-cover-wrap { width: 170px; height: 255px; float: none; margin: 0; flex-shrink: 0; }

/* Cards column (left) + cover (right) — #editor-cover-slot is empty in
   display mode; JS reparents #cover-wrap into it only while editing. */
body.mod-editing-active #editor-top-row {
  display: flex; align-items: flex-start; gap: 1.75rem; margin-bottom: 2rem;
}
body.mod-editing-active #editor-top-row .mod-quick-nav {
  width: 110px; flex-shrink: 0; margin: 0;
}
body.mod-editing-active #editor-top-row .mod-quick-nav-row {
  grid-template-columns: 1fr; gap: 0.75rem;
}
body.mod-editing-active #editor-top-row .mod-quick-nav-row + .mod-quick-nav-row { margin-top: 0.75rem; }
body.mod-editing-active #editor-top-row .mod-quick-nav-row--single { display: block; }
body.mod-editing-active #editor-top-row .mod-quick-nav-row--single .mod-quick-nav-card { width: 100%; }

/* One continuous bordered form — Description → Bio → Links → Tags — with
   generous breathing room between each field so nothing feels cramped. */
body.mod-editing-active .mod-editor-form-box {
  background: var(--mod-card-bg, #161616);
  border: 1px solid var(--mod-card-border, rgba(255,255,255,0.08));
  border-radius: 16px;
  padding: 1.85rem 2rem 2.1rem;
}
body.mod-editing-active .mod-editor-form-box .wiki-section { margin-bottom: 2.5rem; }
body.mod-editing-active .mod-editor-form-box .wiki-section:last-child { margin-bottom: 0; }
/* Gives Title its own breathing room above "Story Description" — the
   About/Meet headings below are hidden (redundant with the field labels),
   which otherwise collapsed that gap to almost nothing. */
body.mod-editing-active .mod-editor-form-box > .mod-editable-block { margin-bottom: 2rem; }
/* The About/Meet the Author section headings are redundant with the field
   labels now sitting right on their fields (Story Description / Meet
   {author}) — hidden while editing. Tags keeps its heading. */
body.mod-editing-active .mod-editor-form-box > .wiki-section:nth-child(2) > .wiki-section-title,
body.mod-editing-active .mod-editor-form-box > .wiki-section:nth-child(2) > .wiki-rule,
body.mod-editing-active .mod-editor-form-box > .wiki-section:nth-child(3) > .wiki-section-title,
body.mod-editing-active .mod-editor-form-box > .wiki-section:nth-child(3) > .wiki-rule {
  display: none;
}

/* Description/Bio get noticeably more room to write in while editing. */
body.mod-editing-active #site-synopsis-input { min-height: 260px; }
body.mod-editing-active #site-bio-input { min-height: 240px; }

/* Find Me drops underneath Meet {author} instead of sitting beside it —
   both fields get the full box width, so they can be bigger too. */
body.mod-editing-active .wiki-meet-split { grid-template-columns: 1fr; gap: 1.75rem; }
body.mod-editing-active .wiki-meet-divider { display: none; }

/* Thin, dark scrollbar for anything that scrolls inside the editor —
   matches the inbox/DM thread's scrollbar treatment. */
.mod-textarea {
  scrollbar-width: thin;
  scrollbar-color: rgba(212,175,85,0.25) transparent;
}
.mod-textarea::-webkit-scrollbar { width: 6px; }
.mod-textarea::-webkit-scrollbar-track { background: transparent; }
.mod-textarea::-webkit-scrollbar-thumb { background: rgba(212,175,85,0.25); border-radius: 6px; }
.mod-textarea::-webkit-scrollbar-thumb:hover { background: rgba(212,175,85,0.4); }

/* Small uppercase labels above each editable field (Title/Description/Bio),
   matching the profile editor's PRONOUNS/BIO/FUN FACT labels — only shown
   while editing, since the section headings (About/Meet the Author) already
   label things fine in display mode. */
.mod-field-label {
  display: none;
  font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose, #d97a72);
  margin-bottom: 0.4rem;
}
body.mod-editing-active .mod-field-label { display: block; }

/* Label + a small "how to format" hint on the same line — used for fields
   that accept *italic*/**bold** (Description, Bio). */
.mod-field-label-row { display: none; align-items: baseline; gap: 0.65rem; margin-bottom: 0.4rem; position: relative; }
body.mod-editing-active .mod-field-label-row { display: flex; }
.mod-field-label-row .mod-field-label { margin-bottom: 0; }
.mod-field-hint {
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 400;
  color: var(--mod-text-secondary, #888); font-style: italic;
}

/* Custom uploaded background — sits beneath the wiki-layout content only,
   never overlapping the banner above it */
/* z-index:0 here used to mean "these two paint above any ordinary
   non-positioned content in .mod-page-bg-wrap" — position:absolute +
   z-index:0 outranks static content in paint order regardless of DOM
   order, so real page content (tabs, and now the page title) rendered
   visibly washed out underneath this overlay whenever a custom theme
   background was active. Negative z-index keeps both firmly behind
   everything else in this wrapper's own stacking context instead. */
/* z-index:0 (not just position:relative) is required here — a positioned
   element with z-index:auto does NOT establish its own stacking context,
   so the negative z-index on .mod-page-bg-img/.mod-page-bg-overlay below
   would otherwise escape upward looking for the nearest ancestor that
   does establish one, landing who-knows-where instead of staying safely
   behind this wrapper's own real content (which is exactly what broke
   custom theme backgrounds the moment those two went negative). */
.mod-page-bg-wrap { position: relative; z-index: 0; }
/* Fixed, not absolute — .mod-page-bg-wrap only grows as tall as its own
   content (title/tabs/list), so an absolutely-positioned bg only ever
   covered that content's height. On a page with a short list, that left
   the blurred background as a visibly short box that stopped partway
   down instead of reading as a full-page ambient background, cutting off
   to plain black beyond it. Fixed positioning covers the whole viewport
   regardless of how tall the actual content ends up being. */
.mod-page-bg-img {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(14px) brightness(0.95); z-index: -2;
}
.mod-page-bg-overlay { position: fixed; inset: 0; background: rgba(10,10,10,0.72); z-index: -1; }

/* ── Wiki layout — single column now that Navigate/quick-nav/Author have
   all moved out of a side rail (into tabs, a full-width card row, and the
   Description box respectively), so this can stretch to use the space
   that column used to eat. Only index.html uses this class — the other
   story sub-pages (.chars-layout/.mod-page-row) keep their own side
   column untouched. ── */
.wiki-layout {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  padding: 4.5rem 3rem 4rem;
}

.wiki-title {
  font-family: 'Cinzel', serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: #f0c060;
  text-shadow: 0 0 18px rgba(240,192,96,0.55), 0 0 42px rgba(240,192,96,0.25);
  margin-bottom: 2.5rem;
}
/* Hidden while editing — only ever relevant on the display view. */
body.mod-editing-active .fp-share-icon-btn { display: none; }

/* Big centered title, sitting right under the banner, above the tab row —
   pulled out of the hero card entirely now. */
.wiki-page-title-block { text-align: center; margin-bottom: 0.6rem; }
/* On Chapters/Characters/Gallery, this sits as a direct child right after
   the banner instead of nested a few levels deep inside the editing form
   box like it is on Home — give it the same breathing room it effectively
   gets there instead of sitting flush against the banner. */
/* Matches .wiki-layout's own padding-top (4.5rem) exactly — Home's title
   effectively gets that same offset for free by sitting inside
   .wiki-layout; this needs to say so explicitly since it's a direct
   .mod-page-bg-wrap child instead, so banner->title distance reads
   identically switching between Home and these three tabs. */
.mod-page-bg-wrap > .wiki-page-title-block { margin-top: 4.5rem; }
.wiki-page-title { display: inline-block; margin-bottom: 0; font-size: 3rem; transition: opacity 0.15s; }
/* Starts empty/invisible in the markup and gets its real text set by JS on
   load — without this, "Untitled Story" (the hardcoded HTML fallback)
   flashes on screen for a beat on every refresh before the real title
   loads in and replaces it. Reserves its own height via min-height so nothing
   shifts when the text (and the class) appears. */
.wiki-page-title.mod-title-loading { opacity: 0; min-height: 1.2em; }

/* ── "Start Reading" card — AO3-style. Cover on the left, a vertical
   divider, then a clamped-height tag cloud (every Rating/Fandom/
   Category/Relationship in red, Additional Tags in blue, no labels —
   see renderHeroTagCloud in index.html), the actions row, and a compact
   stat bar at the bottom. Tag cloud height is driven entirely by the
   cover's height via flex, not a hardcoded number, so it stays in sync
   if the cover size ever changes. ── */
.wiki-hero {
  display: flex; align-items: stretch; gap: 0;
  margin: 0 0 2.75rem;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 1.75rem;
}
.wiki-hero-cover-col { flex-shrink: 0; }
.wiki-hero-cover { width: 260px; height: 400px; margin: 0; }
.wiki-hero-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,0.1); margin: 0 1.85rem; }
.wiki-hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.wiki-hero-tagcloud-wrap { position: relative; flex: 1; min-height: 0; }
.wiki-hero-tagcloud {
  height: 100%; overflow: hidden;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.5rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}
/* Expanded: the wrap stops being flex:1-clamped to the cover's height and
   grows to fit the full list instead, pushing Start Reading/Share/Edit
   and the stat bar further down — the whole card grows, nothing overlaps. */
.wiki-hero-tagcloud-wrap.expanded { flex: none; }
.wiki-hero-tagcloud-wrap.expanded .wiki-hero-tagcloud {
  height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none;
}
.wiki-hero-tagcloud-expand {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25);
  background: rgba(20,20,20,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #f0f0f0; font-size: 1.3rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: background 0.15s, transform 0.15s;
}
.wiki-hero-tagcloud-expand:hover { background: rgba(20,20,20,0.8); transform: scale(1.06); }
.wiki-hero-tagcloud-expand.expanded { font-size: 1.7rem; }

.wiki-hero-actions { display: flex; align-items: center; gap: 0.9rem; margin: 1.5rem 0 1.25rem; }
.wiki-hero-actions .fp-share-icon-btn { width: 42px; height: 42px; }
.wiki-hero-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 1.02rem; font-weight: 700;
  padding: 0.7em 2.2em; border-radius: 30px; cursor: pointer; text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}
/* Same transparent-box treatment as .wiki-hero-btn--edit (border + color,
   no fill) — just teal instead of blue, and Inter like every other button
   here instead of the previous filled Baloo-2 gradient. */
.wiki-hero-btn--start {
  background: transparent; border: 1px solid rgba(31,182,168,0.6); color: #1fb6a8;
  box-shadow: 0 0 12px rgba(31,182,168,0.3);
}
.wiki-hero-btn--start:hover { border-color: #1fb6a8; color: #3dd6b8; background: rgba(31,182,168,0.08); box-shadow: 0 0 20px rgba(31,182,168,0.55); }
.wiki-hero-btn--edit {
  background: transparent; border: 1px solid rgba(127,168,217,0.6); color: #7fa8d9;
  box-shadow: 0 0 12px rgba(127,168,217,0.3);
}
.wiki-hero-btn--edit:hover { border-color: #7fa8d9; color: #a8c6e8; background: var(--mod-accent-bg, rgba(127,168,217,0.08)); box-shadow: 0 0 20px rgba(127,168,217,0.55); }

.wiki-section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* "X Published Parts" / "X Drafts" — sits under the hero card. Published
   is visible to everyone the moment the story has one; Drafts (and the
   nudge to publish) only ever show to the story's own owner, same as the
   draft banner above — a purely-drafted story stays completely private. */
/* Pulls up into most of .wiki-hero's own 2.75rem bottom margin, so this
   sits snug under the card instead of floating a whole card-gap below it. */
.wiki-hero + .wiki-parts-status {
  display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap;
  gap: 0.9rem; margin: -2rem 0 1.75rem;
  font-family: 'Inter', sans-serif; font-size: 0.92rem;
}
.wiki-parts-published { color: #7fa8d9; font-weight: 700; }
.wiki-parts-draft { color: #a8a8a8; font-weight: 700; font-size: 1.05rem; }
.wiki-parts-hint { color: #888; font-style: italic; }
.wiki-parts-private-badge {
  display: inline-flex; align-items: center; gap: 0.3em;
  background: rgba(217,122,114,0.12); border: 1px solid rgba(217,122,114,0.4);
  color: #d97a72; border-radius: 20px; padding: 0.2em 0.85em;
  font-size: 0.78rem; font-weight: 700;
}

/* Compact Reads/Likes/Parts strip along the bottom of the card. */
.wiki-hero-stats-bar {
  display: flex; align-items: center; gap: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 0.9rem; margin-top: auto;
}
.wiki-hero-stat-sm {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 700; color: #ddd;
}
.wiki-hero-stat-sm-icon { font-size: 0.88rem; opacity: 0.85; }
.wiki-hero-stat-sm-label {
  font-size: 0.66rem; font-weight: 600; color: var(--mod-text-secondary, #999);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.wiki-hero-stat-sm-divider { width: 1px; height: 16px; background: rgba(255,255,255,0.15); }

/* ── Story tabs — Home/Chapters/Characters/Gallery, replaces the old
   "Navigate" side box on every story-context page. Transparent, clean
   underline-on-active style — same idiom as .fp-tab on the profile page
   (profile-template.html), just reused here so the whole site's tab
   language stays consistent. Used both on the story home page (inline,
   above Story Description) and as the top-of-page nav on Characters/
   Chapters/Gallery (via .wiki-story-tabs--top). ── */
.wiki-story-tabs {
  display: flex; align-items: baseline; gap: 2.1rem; background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 2.75rem;
}
/* Sits under the page title now (home page only) instead of above
   Description — centered under the centered title, thin line bleeding
   straight down into the "Start Reading" card below it. */
.wiki-story-tabs--centered { justify-content: center; gap: 2.6rem; margin-bottom: 2.25rem; }
.wiki-story-tabs--centered .wiki-story-tab { font-size: 1.1rem; }
.wiki-story-tab {
  background: none; border: none; cursor: pointer; text-decoration: none;
  color: #999; font-family: 'Inter', sans-serif; font-size: 1.06rem; font-weight: 700;
  padding: 1rem 0.1rem; position: relative;
  transition: color 0.15s;
}
.wiki-story-tab:hover { color: #ccc; }
.wiki-story-tab.active { color: #f0f0f0; }
.wiki-story-tab.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: #f0c060; border-radius: 2px;
}
/* Top-of-page variant — Characters/Chapters/Gallery, sitting right under
   the banner instead of inline above Story Description. Same visual tab,
   just its own max-width/padding so it lines up with each page's content
   below it regardless of that page's own layout class. */
/* margin-bottom matches --centered's own 2.25rem (not a separate 2.5rem) —
   this and Home's version of the tab row need to read as pixel-identical
   switching between them. */
.wiki-story-tabs--top { max-width: 1300px; margin: 0 auto 2.25rem; padding: 0 3rem; }

/* New block-formatting context so this block's own height still wraps
   around the floated cover+avatar box below, instead of collapsing to
   the (possibly shorter) text and letting the next section overlap it. */
#about-row { display: flow-root; }

/* Small cover + clickable author avatar, floated on the right so the
   paragraph text wraps cleanly underneath once it runs taller. Wide
   enough that a full 20-character display name next to the avatar
   never needs to ellipsis. */
.wiki-desc-side {
  float: right;
  width: 210px;
  margin: 0 0 1rem 2rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.wiki-desc-cover-wrap {
  position: relative; width: 100%; aspect-ratio: 2 / 3;
  border-radius: 8px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.wiki-desc-cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.wiki-desc-cover-wrap .wiki-generated-cover { width: 100%; height: 100%; }
/* Centered as its own unit under the cover — width:auto (capped to the
   column) instead of stretching full-width and reading left-aligned. */
.wiki-desc-author-link {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: auto; max-width: 100%; text-decoration: none; min-width: 0;
}
.wiki-desc-author-avatar, .wiki-desc-author-avatar-fallback {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.18); box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: border-color 0.15s;
}
.wiki-desc-author-avatar { object-fit: cover; background: #333; }
.wiki-desc-author-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7fa8d9, #d97a72); color: #fff; font-weight: 700; font-size: 0.88rem;
}
.wiki-desc-author-name {
  font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 700; color: #ddd;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  transition: color 0.15s;
}
.wiki-desc-author-link:hover .wiki-desc-author-avatar,
.wiki-desc-author-link:hover .wiki-desc-author-avatar-fallback { border-color: #7fa8d9; }
.wiki-desc-author-link:hover .wiki-desc-author-name { color: #7fa8d9; }

/* Characters/Chapters/Gallery — one full-width row of three, sitting
   between Description and Notes From the Author. Reuses .mod-quick-nav-card
   itself (and its hover/overlay/edit-btn styling) unchanged — just a
   different, wider grid wrapper and a shorter card shape than the square
   cards edit.html's own quick-nav still uses. */
.wiki-story-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; margin: 0 0 2.75rem; }
.wiki-story-cards-row .mod-quick-nav-card { aspect-ratio: 16 / 9; width: 100%; }

.wiki-section { margin-bottom: 2.75rem; }

.wiki-section-title {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #f0f0f0;
  border-bottom: 3px solid var(--rose);
  padding-bottom: 0.3rem;
}

.wiki-rule {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 0.75rem 0 1.5rem;
}

.wiki-quote {
  /* Browsers give <blockquote> a hefty default margin (~1em 40px) — left
     alone, that extra right-side inset was eating into the space next to
     the floated cover+avatar box and made the text look like it wasn't
     actually wrapping around it. */
  margin: 0;
  border-left: 3px solid var(--rose);
  padding: 0.2rem 0 0.2rem 1.25rem;
  font-style: italic;
  color: #ccc;
  font-size: 1.02rem;
  line-height: 1.75;
  white-space: pre-line; /* preserve line breaks from pasted text (e.g. Wattpad bios) */
}

.mod-cover-wrap {
  position: relative;
  margin: 0;
  width: 220px;
  height: 330px; /* 2:3 ratio, matches BTW's cover box */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  flex-shrink: 0;
}
.mod-cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.mod-cover-wrap .wiki-generated-cover { width: 100%; height: 100%; }
.mod-cover-placeholder {
  width: 100%; height: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem;
  border: 2px dashed var(--mod-card-border, rgba(255,255,255,0.15));
  background: var(--mod-card-bg, #161616);
  color: var(--mod-text-secondary, #999);
  font-size: 0.8rem;
}

.mod-cover-edit-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  background: rgba(0,0,0,0.65); color: #fff; border: 1px solid rgba(255,255,255,0.4); border-radius: 8px;
  padding: 0.5rem 0.8rem; font-size: 0.78rem; font-family: 'Inter', sans-serif; font-weight: 600;
  cursor: pointer; text-align: center;
}
.mod-cover-edit-btn:hover { background: rgba(0,0,0,0.8); }

.mod-cover-reposition {
  position: absolute; bottom: 8px; left: 8px; right: 8px; z-index: 3;
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(0,0,0,0.55); border-radius: 8px; padding: 6px 8px;
}
.mod-cover-reposition label { display: flex; align-items: center; gap: 5px; color: #fff; font-size: 0.62rem; font-family: 'Inter', sans-serif; }
.mod-cover-reposition input[type="range"] { flex: 1; width: 100%; }

.wiki-section p {
  color: #ccc;
  font-size: 1rem;
  line-height: 1.8;
  white-space: pre-line; /* preserve line breaks from pasted text (e.g. Wattpad bios) */
}

/* "Meet Blue" split — bio text | vertical divider | links */
.wiki-meet-split {
  display: grid;
  grid-template-columns: 1fr 1px 200px;
  gap: 2rem;
  align-items: start;
}
.wiki-meet-divider { align-self: stretch; background: rgba(255,255,255,0.1); }
.wiki-meet-links-label {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 0.75rem;
}
.wiki-links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.wiki-links-list li { color: var(--mod-text-secondary, #999); font-size: 0.92rem; }

/* Teaser card linking out to the author's real account profile — kept
   transparent so it reads as a "peek" rather than a competing content box */
.wiki-author-teaser-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  background: transparent;
  border: 1px solid var(--mod-card-border, rgba(255,255,255,0.1));
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.wiki-author-teaser-card:hover {
  background: rgba(240,192,96,0.06);
  border-color: rgba(240,192,96,0.4);
  box-shadow: 0 0 18px rgba(240,192,96,0.15);
}
.wiki-author-teaser-avatar-wrap { flex-shrink: 0; }
.wiki-author-teaser-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #333; display: block; }
.wiki-author-teaser-avatar-fallback {
  width: 46px; height: 46px; border-radius: 50%; background: #333;
  display: flex; align-items: center; justify-content: center;
  color: var(--mod-text-secondary, #999); font-weight: 700; font-size: 1.1rem;
}
.wiki-author-teaser-text { flex: 1; min-width: 0; }
.wiki-author-teaser-name {
  margin: 0 0 0.2rem; font-weight: 700; font-size: 0.95rem;
  color: #f0c060; text-shadow: 0 0 10px rgba(240,192,96,0.4);
}
.wiki-author-teaser-bio {
  margin: 0; font-size: 0.82rem; line-height: 1.5;
  color: var(--mod-text-secondary, #999);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wiki-author-teaser-arrow {
  flex-shrink: 0; font-size: 1.2rem; color: var(--mod-text-secondary, #999);
  transition: transform 0.2s, color 0.2s;
}
.wiki-author-teaser-card:hover .wiki-author-teaser-arrow { color: #f0c060; transform: translateX(3px); }

/* Boxed link item, matching BTW's own Links card style — transparent by
   default so it never clashes with whatever theme/background is active */
.wiki-link-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--mod-text-primary, #f0f0f0);
  background: transparent;
  border: 1px solid var(--mod-card-border, rgba(255,255,255,0.1));
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.wiki-link-item:hover {
  background: var(--mod-accent-bg, rgba(127, 168, 217, 0.1));
  border-color: var(--violet);
  color: var(--violet);
}
.wiki-link-item .link-icon { font-size: 1rem; flex-shrink: 0; }
.wiki-link-item .link-name { flex: 1; font-size: 0.88rem; }
.wiki-link-item .link-arrow { font-size: 0.8rem; opacity: 0.5; }

/* ── Tags — full-width row underneath both wiki-layout columns ── */
.wiki-tags-section { margin-bottom: 0; }
.wiki-tags-title-row { display: flex; align-items: center; gap: 0.6rem; position: relative; }
.wiki-tags-tip-icon {
  background: none; border: 1px solid rgba(255,255,255,0.25); border-radius: 50%;
  width: 20px; height: 20px; flex-shrink: 0; color: #999; font-size: 0.78rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
  transition: color 0.2s, border-color 0.2s;
}
.wiki-tags-tip-icon:hover { color: var(--violet); border-color: var(--violet); }
.wiki-tags-tip-popover {
  position: absolute; top: 100%; left: 0; margin-top: 0.6rem; z-index: 20;
  width: min(480px, 90vw); background: #141018; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px; padding: 1rem 1.15rem; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  color: #ccc; font-size: 0.82rem; line-height: 1.65; font-weight: 400; text-transform: none; letter-spacing: normal;
}
.wiki-tags-count { margin-left: auto; font-size: 0.78rem; color: #888; font-weight: 600; }

.wiki-tags-wrap { position: relative; }
.wiki-tags-display { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wiki-tags-empty { color: #888; font-size: 0.9rem; }
.wiki-tag-bubble {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; border: 1px solid rgba(127,168,217,0.4);
  color: #7fa8d9; border-radius: 20px; padding: 0.35em 0.9em; font-size: 0.82rem; font-weight: 600;
  text-decoration: none; transition: background 0.15s, border-color 0.15s;
}
a.wiki-tag-bubble:hover { background: rgba(127,168,217,0.15); border-color: rgba(127,168,217,0.65); }

/* Categories/Relationships, moved up to sit right above the Tags heading. */
.wiki-tags-meta-row { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 1.5rem; }

.wiki-tags-input-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  padding: 0.75rem;
}
.wiki-tag-bubble--editable { background: rgba(194,84,122,0.12); border-color: rgba(194,84,122,0.35); color: #c2547a; padding-right: 0.5em; }
.wiki-tag-bubble-remove { background: none; border: none; color: inherit; cursor: pointer; font-size: 0.85rem; padding: 0; line-height: 1; opacity: 0.7; }
.wiki-tag-bubble-remove:hover { opacity: 1; }
.wiki-tags-input {
  flex: 1; min-width: 160px; background: none; border: none; outline: none;
  color: #f0f0f0; font-family: 'Inter', sans-serif; font-size: 0.88rem; padding: 0.3em 0;
}
.wiki-tags-input::placeholder { color: #777; }

/* ── Story Metadata — Rating / Category / Relationships (AO3-style) ──
   Lives in the narrow side column under the cover art now, so labels stack
   above their values instead of sitting side-by-side in a wide row. */
.wiki-meta-display {
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 0.9rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--mod-card-border, rgba(255,255,255,0.08));
}
.wiki-meta-badge-group { display: flex; flex-direction: column; gap: 0.35rem; }
.wiki-meta-badge-label {
  font-family: 'Cinzel', serif; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rose);
}
.wiki-meta-badge-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wiki-meta-badge-list-item {
  display: inline-flex; align-items: center; background: rgba(194,84,122,0.1); border: 1px solid rgba(194,84,122,0.3);
  color: #c2547a; border-radius: 20px; padding: 0.28em 0.85em; font-size: 0.78rem; font-weight: 600;
}
.wiki-meta-badge-list-item--relationship { background: rgba(127,168,217,0.12); border-color: rgba(127,168,217,0.3); color: #7fa8d9; }

.wiki-rating-badge {
  display: inline-flex; align-items: center; border-radius: 20px; padding: 0.28em 0.9em;
  font-size: 0.78rem; font-weight: 700; border: 1px solid transparent;
}
.wiki-rating-badge--not-rated { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #bbb; }
.wiki-rating-badge--general   { background: rgba(122,201,141,0.14); border-color: rgba(122,201,141,0.4); color: #7ac98d; }
.wiki-rating-badge--teen      { background: rgba(240,192,96,0.14); border-color: rgba(240,192,96,0.4); color: #f0c060; }
.wiki-rating-badge--mature    { background: rgba(224,140,74,0.16); border-color: rgba(224,140,74,0.45); color: #e08c4a; }
.wiki-rating-badge--explicit  { background: rgba(217,122,114,0.16); border-color: rgba(217,122,114,0.5); color: #d97a72; }

.wiki-meta-check-row { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.wiki-meta-check-item {
  display: inline-flex; align-items: center; gap: 0.5rem; background: transparent;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 20px; padding: 0.45em 1rem;
  font-size: 0.82rem; color: #bbb; cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
}
.wiki-meta-check-item:hover { border-color: rgba(127,168,217,0.5); background: rgba(127,168,217,0.07); color: #f0f0f0; }
/* Fully custom checkbox — browsers render the native square as an opaque
   white/gray box regardless of accent-color, so it has to be rebuilt from
   scratch to actually read as transparent. */
.wiki-meta-check-item input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; flex-shrink: 0; margin: 0;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 5px;
  background: transparent; cursor: pointer; position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.wiki-meta-check-item input:checked {
  background: rgba(127,168,217,0.25); border-color: #7fa8d9;
}
.wiki-meta-check-item input:checked::after {
  content: '✓'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: #cfe0f5;
}
/* Selected state — toggled via JS alongside the checkbox itself, so the
   whole pill reads as "on" instead of just the tiny native checkbox. */
.wiki-meta-check-item--checked {
  background: rgba(127,168,217,0.14); border-color: rgba(127,168,217,0.6); color: #f0f0f0;
  box-shadow: 0 0 16px rgba(127,168,217,0.25);
}
.wiki-meta-check-item--checked:hover { background: rgba(127,168,217,0.2); }

/* Side column — account box + nav box, stacked. Not sticky/position:fixed —
   stays where it's placed in the page and scrolls normally with the rest of
   the content instead of trailing the viewport. */
.wiki-side-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}

/* Account box — profile / login + link back to Between Two Worlds */
.mod-account-box {
  background: var(--mod-card-bg, #161616);
  border: 1px solid var(--mod-card-border, rgba(255,255,255,0.08));
  border-top: 3px solid var(--violet);
  border-radius: 14px;
  padding: 1.25rem 1rem;
}
.mod-account-list { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.mod-account-list a.nav-login { color: var(--mod-text-primary, #f0f0f0) !important; }

/* Side nav box — Home / Characters / Gallery / Chapters */
.mod-side-nav {
  background: var(--mod-card-bg, #161616);
  border: 1px solid var(--mod-card-border, rgba(255,255,255,0.08));
  border-top: 3px solid var(--rose);
  border-radius: 14px;
  padding: 1.5rem 1rem;
}
.mod-side-nav-label {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 0.9rem;
  padding: 0 0.5rem;
}
.mod-side-nav-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 0 0.5rem 0.9rem; }
.mod-side-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.mod-side-nav-link {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--mod-text-secondary, #aaa);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}
.mod-side-nav-link:hover { background: var(--mod-accent-bg, rgba(255,255,255,0.06)); color: var(--mod-text-primary, #fff); }
.mod-side-nav-link.active {
  background: var(--mod-accent-bg, rgba(127, 168, 217, 0.15));
  color: var(--violet);
  font-weight: 700;
}

/* ── Borrowed BTW templates (characters / chapters / gallery) ──────────────
   These pages intentionally keep BTW's own dark styling/fonts untouched —
   only the persistent account/nav side column (above) is added on top. */

/* Adds a 3rd column to BTW's characters page grid for the side column */
.chars-layout { grid-template-columns: 200px 1fr 220px; }

/* Boxed "Explore the cast!" panel — same treatment as BTW's own character
   sidebar, just re-skinned to the dark blue/red mod-theme instead of gold. */
.chars-sidebar-label {
  font-family: 'Cinzel', serif;
  color: #f0f0f0;
  font-size: 0.72rem;
}
.chars-tab {
  color: #f0f0f0;
  border-radius: 8px;
  font-size: 1.02rem;
  padding: 0.65em 0.9em;
}
.chars-tab:hover { background: rgba(127,168,217,0.1); color: #a8c6e8; }
.chars-tab.active {
  background: rgba(127,168,217,0.15);
  color: #f0f0f0;
  font-weight: 700;
  border-left-color: #7fa8d9;
}

/* "Create New Character" — owner-only, its own little boxed card sitting
   directly above "Explore the Cast", not squeezed inside it. */
.chars-sidebar-col { display: flex; flex-direction: column; gap: 1rem; }

.chars-create-box {
  background: rgba(8,8,8,0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 1rem;
}

/* Same violet→rose gradient glow as the site's age-gate button
   (--violet/--rose get overridden to blue in mod-theme, so this uses the
   real brand colors explicitly rather than the theme variables). */
.chars-create-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; box-sizing: border-box;
  background: linear-gradient(135deg, #6b3fa0, #c2547a); border: none; border-radius: 10px;
  padding: 0.75em 0.9em; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.92rem; font-weight: 700; color: #fff;
  box-shadow: 0 0 16px rgba(107,63,160,0.5);
  transition: box-shadow 0.2s, transform 0.2s;
}
.chars-create-btn:hover {
  box-shadow: 0 0 26px rgba(107,63,160,0.75);
  transform: translateY(-1px);
}
.chars-create-btn-icon { font-size: 1.1rem; line-height: 1; }

/* Edit box — same boxed-card treatment as "Create New Character", sitting
   right below it, but a blue accent instead of the violet→rose create
   gradient so the two read as distinct actions. */
.chars-create-btn--edit {
  background: linear-gradient(135deg, #3d6fa8, #7fa8d9); box-shadow: 0 0 16px rgba(127,168,217,0.5);
}
.chars-create-btn--edit:hover { box-shadow: 0 0 26px rgba(127,168,217,0.75); }
.chars-create-btn--danger {
  background: linear-gradient(135deg, #a83d3d, #d97a72); box-shadow: 0 0 16px rgba(217,122,114,0.5);
}
.chars-create-btn--danger:hover { box-shadow: 0 0 26px rgba(217,122,114,0.75); }

/* ── Character editor modal ── */
.char-editor-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8,6,14,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem;
}
.char-editor-modal {
  width: 100%; max-width: 880px; max-height: 88vh; overflow-y: auto;
  background: #141018; border: 1px solid rgba(127,168,217,0.25); border-radius: 18px;
  padding: 2.25rem 2.5rem; box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
.char-editor-title { font-family: 'Cinzel', serif; font-size: 1.6rem; color: #f0f0f0; margin-bottom: 1.75rem; }
.char-editor-title.editor-title-glow {
  font-size: 2.1rem; color: #f7dda0;
  text-shadow: 0 0 18px rgba(240,192,96,0.65), 0 0 42px rgba(240,192,96,0.35);
}

/* Sits at the very top of the gallery editor, above the Media field — a
   loud, unmissable callout for "you're missing something required" instead
   of relying only on the small message near the Post button. */
.mod-error-banner {
  display: none; align-items: center; gap: 0.6rem;
  background: rgba(217,122,114,0.14); border: 1px solid rgba(217,122,114,0.5);
  border-radius: 10px; padding: 0.8rem 1rem; margin-bottom: 1.5rem;
  color: #f5b3ac; font-size: 0.9rem; font-weight: 700;
}
.mod-error-banner.show { display: flex; }
.mod-error-banner-icon { flex-shrink: 0; font-size: 1.15rem; }

.char-editor-ref-wrap {
  position: relative; width: 100%; max-width: 340px; aspect-ratio: 1 / 1; margin: 0 auto 1.75rem;
  border-radius: 14px; overflow: hidden; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.char-editor-ref-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.char-editor-ref-placeholder { color: #888; font-size: 0.88rem; text-align: center; padding: 1rem; }
.char-editor-ref-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45); color: #fff; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600;
  opacity: 0; transition: opacity 0.2s;
}
.char-editor-ref-wrap:hover .char-editor-ref-overlay { opacity: 1; }

.char-editor-facts-hint { color: #888; font-size: 0.75rem; margin-top: 0.6rem; margin-bottom: 1.25rem; }

/* A more visible callout for helper tips (e.g. the artist-credit syntax)
   that would otherwise get lost as plain grey text under a field. */
.mod-tip-box {
  background: rgba(127,168,217,0.08); border: 1px solid rgba(127,168,217,0.25);
  border-radius: 8px; padding: 0.65rem 0.85rem; margin-top: 0.6rem; margin-bottom: 1.25rem;
  color: #aecbe8; font-size: 0.8rem; line-height: 1.5;
}

.char-editor-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; }
/* Delete sits apart on the far left — Cancel/Save stay grouped on the right,
   so a destructive action is never adjacent to the safe ones. */
#char-editor-delete, #gallery-editor-delete, #chapter-editor-delete { margin-right: auto; }

/* Small centered confirm dialog — replaces the native browser confirm()
   with something that matches the site instead of an OS-styled popup. */
.mod-confirm-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(8,6,14,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.mod-confirm-modal {
  width: 100%; max-width: 360px;
  background: #141018; border: 1px solid rgba(255,255,255,0.12); border-top: 3px solid #d97a72;
  border-radius: 16px; padding: 1.75rem; text-align: center;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
.mod-confirm-title { font-family: 'Cinzel', serif; font-size: 1.1rem; color: #fff; margin: 0 0 0.5rem; }
.mod-confirm-text { color: #999; font-size: 0.88rem; margin: 0 0 1.5rem; }
.mod-confirm-actions { display: flex; justify-content: center; gap: 0.75rem; }

/* Generic Name | Link row — still used by the chapter editor's "link
   references" rows (Preview Name | Link). Character relationships used to
   share this too but now use the card layout below. */
.char-rel-row {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center;
}
.char-rel-row-headings { margin-bottom: 0.35rem; }
.char-rel-heading {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #999;
}

.char-rel-name-wrap { display: flex; gap: 0.35rem; }
.char-rel-name-wrap .mod-input { flex: 1; min-width: 0; }
.char-rel-link-btn {
  flex-shrink: 0; width: 34px; border-radius: 8px; border: 1px solid rgba(127,168,217,0.4);
  background: rgba(127,168,217,0.1); color: #7fa8d9; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.char-rel-link-btn:hover { background: rgba(127,168,217,0.2); }
.char-rel-link-btn.linked { border-color: #f0c060; background: rgba(240,192,96,0.15); color: #f0c060; }

/* Relationship entries redesigned to match the "Link To" card-grid look —
   a square-ish card per relationship (linked-character avatar up top, the
   "+" badge on it opens the same character-link picker as before, then
   Name + Type fields stacked below) plus a big dashed "+ Add Relationship"
   tile as the first grid item, wrapping into multiple rows just like the
   gallery/story "Link To" sections. The permanent first card keeps an
   invisible (but space-reserving) remove badge so it lines up with the rest. */
.char-rel-card {
  position: relative; width: 152px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  background: #161616; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  padding: 0.85rem 0.7rem 0.7rem;
}
.char-rel-card-avatar-wrap { position: relative; flex-shrink: 0; }
.char-rel-card-avatar {
  width: 58px; height: 58px; border-radius: 50%; object-fit: cover; display: block;
  background: #222; border: 1px solid rgba(255,255,255,0.15);
}
.char-rel-card-link-btn {
  position: absolute; bottom: -2px; right: -2px; width: 21px; height: 21px; border-radius: 50%;
  background: #1a1a1a; border: 1px solid rgba(127,168,217,0.5); color: #7fa8d9;
  font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; line-height: 1;
}
.char-rel-card-link-btn.linked { background: rgba(240,192,96,0.2); border-color: #f0c060; color: #f0c060; }
.char-rel-card-divider { width: 100%; height: 1px; background: rgba(255,255,255,0.12); border: none; margin: 0.15rem 0 0.05rem; }
.char-rel-card-fields { width: 100%; display: flex; flex-direction: column; gap: 0.2rem; }
.char-rel-card-fields .mod-input { font-size: 0.8rem; padding: 0.45em 0.5em; text-align: center; margin-bottom: 0.25rem; }
.char-rel-card-field-label {
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: #f0c060; text-shadow: 0 0 10px rgba(240,192,96,0.5); text-align: center;
}
/* Extra breathing room above "Relation:" so it doesn't crowd the Name box
   sitting right above it. */
.char-rel-card-field-label:not(:first-child) { margin-top: 0.4rem; }
.char-rel-card-remove {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
  background: #d97a72; color: #fff; border: 2px solid #141018; font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; padding: 0;
}
.char-rel-card-remove:hover { background: #c9645c; }
.char-rel-card-linked-note {
  width: 100%; margin: 0; text-align: center; font-size: 0.68rem; font-weight: 700;
  color: #7fd99a; text-shadow: 0 0 8px rgba(127,217,154,0.4);
}

.char-rel-add-tile {
  width: 152px; min-height: 176px; flex-shrink: 0; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 2px dashed rgba(255,255,255,0.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  color: #aaa; font-size: 0.8rem; font-weight: 700; cursor: pointer; text-align: center; padding: 0.5rem;
  font-family: 'Inter', sans-serif; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.char-rel-add-tile-icon { font-size: 1.8rem; line-height: 1; color: #f0c060; }
.char-rel-add-tile:hover { border-color: #f0c060; color: #f0c060; background: rgba(240,192,96,0.07); }

/* Link-picker mini-modal — sits on top of the character editor */
.char-link-picker-overlay {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(8,6,14,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.char-link-picker-modal {
  width: 100%; max-width: 420px; max-height: 70vh; overflow-y: auto;
  background: #141018; border: 1px solid rgba(127,168,217,0.3); border-radius: 16px;
  padding: 1.5rem; box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
.char-link-picker-title { font-family: 'Cinzel', serif; font-size: 1.15rem; color: #f0f0f0; margin-bottom: 1rem; }
.char-link-picker-empty { color: #999; font-size: 0.88rem; line-height: 1.6; text-align: center; padding: 1rem 0; }
.char-link-picker-item {
  display: flex; align-items: center; gap: 0.7rem; width: 100%; text-align: left;
  background: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
  padding: 0.5rem 0.7rem; margin-bottom: 0.5rem; cursor: pointer; color: #f0f0f0; font-size: 0.9rem;
}
.char-link-picker-item:hover { border-color: #7fa8d9; background: rgba(127,168,217,0.08); }
.char-link-picker-item img {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #333; flex-shrink: 0;
}

/* ── Relationship picker: "Characters You Own" / "Other Characters" tabs ── */
.char-link-picker-tabs {
  display: flex; gap: 1rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.char-link-picker-tab {
  background: none; border: none; color: #999; font-family: 'Inter', sans-serif;
  font-size: 0.85rem; font-weight: 700; padding: 0 0 0.6rem; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.char-link-picker-tab:hover { color: #ccc; }
.char-link-picker-tab.active { color: #f0c060; border-bottom-color: #f0c060; }
.char-link-picker-scroll { max-height: 340px; overflow-y: auto; }
/* Bigger "shopping list" style card — image + name + (for the Other tab)
   the owner's name, so two people's same-named characters are never
   ambiguous before you click one. */
.char-link-picker-item--big {
  display: flex; align-items: center; gap: 0.85rem; width: 100%; text-align: left;
  background: #161616; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  padding: 0.6rem 0.8rem; margin-bottom: 0.55rem; cursor: pointer; color: #f0f0f0; font-family: 'Inter', sans-serif;
}
.char-link-picker-item--big:hover { border-color: #7fa8d9; background: rgba(127,168,217,0.08); }
.char-link-picker-item--big img {
  width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #333; flex-shrink: 0;
}
.char-link-picker-item-name { display: block; font-size: 0.92rem; font-weight: 700; }
.char-link-picker-item-owner { display: block; font-size: 0.76rem; color: #999; margin-top: 0.15rem; }
/* Toggle/multi-select state — used by the gallery editor's "Link To" story
   and character pickers, where clicking adds/removes instead of picking
   one and closing. */
.char-link-picker-item--big.selected { border-color: #f0c060; background: rgba(240,192,96,0.12); }
.char-link-picker-item-check {
  margin-left: auto; width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: transparent;
}
.char-link-picker-item--big.selected .char-link-picker-item-check {
  background: #f0c060; border-color: #f0c060; color: #0d0d0d;
}

/* ── "Link To:" field on the gallery editor — a boxed panel split into
   "Stories" and "Characters" sections, each a grid of big square add-tiles
   and linked-item cards, so what's linked (and what kind it is) is obvious
   at a glance instead of buried in small pill chips. ── */
.gallery-linkto-box {
  background: rgba(240,192,96,0.05); border: 1px solid rgba(240,192,96,0.25);
  border-radius: 12px; padding: 1rem 1.1rem 1.1rem; margin-bottom: 1.5rem;
}
.gallery-linkto-box > label {
  display: block; font-size: 0.95rem; font-weight: 700; color: #f0c060; margin-bottom: 0.75rem;
}
/* Story-context gallery editor: instead of a "+ Story" picker (the post is
   already linked to this story by default), a bold note explains that and
   points to the account-level gallery editor for adding more / unlinking. */
.gallery-linkto-note {
  background: rgba(240,192,96,0.1); border: 1px solid rgba(240,192,96,0.35);
  border-radius: 10px; padding: 0.75rem 0.9rem; margin: 0 0 0.85rem;
  font-size: 0.85rem; font-weight: 700; color: #f7dda0; line-height: 1.5;
}

.gallery-linkto-section { margin-bottom: 1.1rem; }
.gallery-linkto-section:last-child { margin-bottom: 0; }
.gallery-linkto-section-label {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #999; margin: 0 0 0.65rem;
}
.gallery-linkto-section-note {
  text-transform: none; font-weight: 400; letter-spacing: normal; color: #777; margin-left: 0.4rem;
}
.gallery-linkto-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }

.gallery-linkto-add-tile {
  width: 104px; height: 132px; flex-shrink: 0; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 2px dashed rgba(255,255,255,0.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  color: #aaa; font-size: 0.78rem; font-weight: 700; cursor: pointer; text-align: center; padding: 0.5rem;
  font-family: 'Inter', sans-serif; transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.gallery-linkto-add-tile-icon { font-size: 1.7rem; line-height: 1; color: #f0c060; }
.gallery-linkto-add-tile:hover { border-color: #f0c060; color: #f0c060; background: rgba(240,192,96,0.07); }

.gallery-linkto-card { position: relative; width: 104px; flex-shrink: 0; }
.gallery-linkto-card-img {
  width: 104px; height: 104px; border-radius: 12px; object-fit: cover; display: block;
  background: #1a1a1a; border: 1px solid rgba(255,255,255,0.14);
}
.gallery-linkto-card-name {
  margin: 0.4rem 0 0; font-size: 0.76rem; font-weight: 600; color: #ddd; text-align: center;
  line-height: 1.25; word-break: break-word; font-family: 'Inter', sans-serif;
}
.gallery-linkto-card-remove {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
  background: #d97a72; color: #fff; border: 2px solid #141018; font-size: 0.7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; padding: 0;
}
.gallery-linkto-card-remove:hover { background: #c9645c; }
/* Locked variant — the story-context editor's default story link, which
   can't be removed from here (only from the account-level gallery editor),
   so it gets a gold outline instead of a remove button. */
.gallery-linkto-card--locked .gallery-linkto-card-img { border-color: rgba(240,192,96,0.55); border-width: 2px; }

/* ── Gallery post editor — category picker + consent checkbox ── */
/* Live crop preview for the gallery tile thumbnail — same 6:7 portrait ratio
   as .gallery-tile so what you see here matches what shows on the grid. */
.gallery-preview-crop-wrap {
  width: 150px; aspect-ratio: 6 / 7; border-radius: 10px; overflow: hidden;
  background: #1a1a1a; border: 1px solid rgba(255,255,255,0.1);
}
/* Deliberately NOT width/height:100%+object-fit:cover here — that's a
   leftover from the pre-Cropper.js slider version, and it fights with
   Cropper's own container-size measurement (it wraps/measures the raw img
   at its natural rendered box, so forcing a stretched/cropped box on the
   img itself makes Cropper's crop box come out mismatched with what's
   actually visible, like the modal's img wrap already gets right). */
.gallery-preview-crop-wrap img {
  display: block; max-width: 100%;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
/* The crop box here is locked (non-resizable/non-movable) and always
   meant to cover the whole preview, so there's no reason to ever actually
   see it — the black .gallery-preview-crop-wrap box already shows the
   boundary. Several targeted attempts to hide just its border/grid/focus-
   ring kept leaving some part of it visibly mispositioned, so this just
   makes the entire crop box fully transparent instead. opacity (not
   display:none/visibility:hidden) is deliberate — a fully transparent
   element still receives pointer events, so drag-to-pan keeps working. */
.gallery-preview-crop-wrap .cropper-crop-box { opacity: 0 !important; }

.gallery-cat-field { margin: 0.5rem 0 1.5rem; }
.gallery-cat-label { font-size: 0.85rem; font-weight: 600; color: #ccc; margin: 0 0 0.5rem; }
.gallery-cat-row { display: flex; gap: 0.6rem; }
.gallery-cat-option {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0.55em 0.5em; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.88rem; font-weight: 600; color: #ccc; transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.gallery-cat-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.gallery-cat-option:has(input:checked) {
  background: rgba(127,168,217,0.18); border-color: #7fa8d9; color: #fff;
}
.gallery-cat-option--spicy:has(input:checked) {
  background: rgba(217,122,114,0.2); border-color: #d97a72; color: #fff;
}

.gallery-consent-row {
  display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer;
  font-size: 0.85rem; color: #bbb; line-height: 1.55; margin-bottom: 1.25rem;
  background: rgba(217,122,114,0.08); border: 1px solid rgba(217,122,114,0.25); border-radius: 10px; padding: 0.85rem 1rem;
}
.gallery-consent-row input { margin-top: 0.2rem; width: 16px; height: 16px; flex-shrink: 0; }

/* ── Gallery post detail page (reuses the site's .art-view-* classes from
   style.css so it "feels special" the same way the main gallery does).
   The profile page's Gallery tab reuses this exact same detail view, just
   under fp-prefixed ids — these rules were only ever written for the
   story-context ids, which is why the profile version looked smaller/
   plainer despite using identical classes: no white-space:pre-line (so
   paragraph breaks in the description collapsed), no big image display,
   no top spacing. Every rule below is duplicated for both id sets. ── */
#gallery-detail-desc, #fp-gallery-detail-desc { white-space: pre-line; }
/* Sized by WIDTH now, not viewport height — a max-height here meant most
   images hit that cap long before using the new wider column, and even a
   square/portrait piece couldn't reach full column width without also
   getting taller than the screen (impossible under a height cap). Per
   request, width wins: the image always fills the column at true,
   undistorted size, and a tall square/portrait piece just extends past
   the fold — scroll to see the rest — instead of shrinking to fit. */
#gallery-detail-view .art-view-image-wrap,
#fp-gallery-detail-view .art-view-image-wrap {
  display: block; background: transparent; border: none; box-shadow: none;
}
#gallery-detail-view .art-view-image-wrap img,
#fp-gallery-detail-view .art-view-image-wrap img { max-width: 100%; width: 100%; height: auto; border-radius: 16px; }
#gallery-detail-view, #fp-gallery-detail-view { padding-top: 1.5rem; }
#gallery-detail-view .art-view-back,
#chapter-detail-view .art-view-back {
  color: #fff; border-color: #2fbf5f; background: #2fbf5f;
  font-size: 0.95rem; font-weight: 700; padding: 0.7em 1.6em;
  margin-top: 2.5rem; margin-bottom: 2.5rem;
}
#gallery-detail-view .art-view-back:hover,
#chapter-detail-view .art-view-back:hover {
  color: #fff; border-color: #29a852; background: #29a852;
}

/* Edit sits right next to Back to Gallery instead of its own sidebar box —
   the row owns the vertical spacing the back button used to carry alone.
   Story-context gets NO top margin -- same "hug the tabs, no floating
   4rem down the page" treatment .mod-page-row .mod-gallery-main already
   gets, which this row was missing (profile-template's back button is a
   different element entirely and already tunes its own top spacing). */
#gallery-detail-view .art-view-back-row,
#fp-gallery-detail-view .art-view-back-row {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 1.5rem;
}
#gallery-detail-view .art-view-back-row { margin-top: 0; }
#fp-gallery-detail-view .art-view-back-row { margin-top: 2.5rem; }
#gallery-detail-view .art-view-back-row .art-view-back,
#fp-gallery-detail-view .art-view-back-row .art-view-back { margin-top: 0; margin-bottom: 0; }
.art-view-edit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-width: 220px;
  font-family: 'Inter', sans-serif; font-size: 0.92rem; font-weight: 700;
  padding: 0.5em 1.8em; border-radius: 20px; cursor: pointer; border: none;
  background: linear-gradient(135deg, #3d6fa8, #7fa8d9); color: #fff;
  box-shadow: 0 0 16px rgba(127,168,217,0.5);
  transition: box-shadow 0.2s, transform 0.2s;
}
.art-view-edit-btn:hover { box-shadow: 0 0 26px rgba(127,168,217,0.75); transform: translateY(-1px); }

/* Character name + Stats/Facts/Lore labels — same gold glow BTW's own
   character pages use, bumped up a bit brighter per request. */
.char-name { color: #f0c060; font-weight: 700; text-shadow: 0 0 36px rgba(240,192,96,0.65), 0 1px 3px rgba(0,0,0,0.4); }
.char-name-row { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.3rem; }
.char-name-row .char-name { margin-bottom: 0; }

/* Prev/Next slideshow nav under the Lore box — neither .char-lore-box nor
   the base .art-nav carry any margin between them, so the nav pill sat
   flush against the box above it. */
#char-detail-nav, #fp-char-detail-nav { margin-top: 2.25rem; }

/* Views/Like/Bookmark footer -- bottom of the character card, after Lore
   and before the slideshow nav above. */
.char-detail-footer {
  display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem;
}
.char-detail-views {
  display: inline-flex; align-items: center; gap: 0.5rem; box-sizing: border-box;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15);
  height: 48px; border-radius: 24px; color: #ddd; font-size: 1.05rem; font-weight: 700;
  padding: 0 1.3rem;
}

.char-box-title { color: #f0c060; font-weight: 700; text-shadow: 0 0 26px rgba(240,192,96,0.7); }
.char-stat-label { color: #f0c060; font-weight: 700; text-shadow: 0 0 22px rgba(240,192,96,0.6); }

/* Tiny square portrait next to a relationship's name, sized to the line of
   text it sits in rather than a fixed pixel size. Always shows something
   (falls back to the default placeholder) even for an unlinked relationship. */
.char-rel-avatar {
  width: 1.3em; height: 1.3em; border-radius: 4px; object-fit: cover;
  vertical-align: middle; margin-right: 0.35em; margin-top: -0.15em;
  background: #222; border: 1px solid rgba(255,255,255,0.15); display: inline-block;
}
.char-stat-value { color: #ccc; }
.char-stat-row { border-bottom: 1px solid rgba(255,255,255,0.08); }

/* Generic content + side-column row, used on the chapters & gallery pages */
.mod-page-row {
  position: relative; z-index: 1;
  max-width: 1340px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 2rem;
  align-items: start;
}

/* Book info card (cover/title/author) on the gallery page — flush with the
   top of the picture grid, same starting line as everything else on the
   page instead of floating 5.5rem down. */
.mod-page-row .wiki-side-col {
  margin-top: 0;
}

/* Unboxed "fandom style" chapters list — no card, just heading + rule + list.
   Small top padding, not 4rem — the heading should sit right under the
   tabs, not float halfway down the page. */
.mod-chapters-main { text-align: left; padding: 0 0 4rem; }

/* ── Chapter detail page (title + teaser + optional image on the left,
   "Where to Read!" links + PDF button on the right) ── */
.chapter-detail-view { text-align: left; padding: 3rem 0; }
.chapter-detail-card {
  display: grid; grid-template-columns: 260px 1fr; gap: 2.75rem; align-items: start;
}
.chapter-detail-title {
  font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  color: #f0c060; font-weight: 700; text-shadow: 0 0 30px rgba(240,192,96,0.55);
  margin: 0 0 0.85rem; line-height: 1.25;
}
.chapter-detail-teaser { color: #ccc; font-size: 0.98rem; line-height: 1.8; margin: 0 0 1.75rem; }
.chapter-detail-image-wrap {
  border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6); background: #0d0d0d;
}
.chapter-detail-image-wrap img { width: 100%; display: block; }
.chapter-detail-side-label {
  font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #999; margin: 0 0 1rem;
}
.chapter-detail-no-pdf { color: #888; font-size: 0.85rem; margin-top: 0.85rem; }

#chapter-detail-pdf-btn { margin-left: 0; }

#chapter-pdf-view { margin-top: 1.5rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; }
#chapter-pdf-view .chapter-pdf-viewer { width: 100%; height: 75vh; min-height: 0; background: #fff; }

/* PDF/Docx attach row in the chapter editor */
.chapter-doc-picker-row { display: flex; align-items: center; gap: 0.75rem; }
.chapter-doc-picker-name { color: #999; font-size: 0.85rem; }

@media (max-width: 760px) {
  .chapter-detail-card { grid-template-columns: 1fr; }
}

/* Unboxed gallery — no card, plain wiki-style sidebar (SFW/Spicy toggles) that
   just makes way for the card grid, MediaWiki-sidebar style */
.mod-gallery-main {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2.5rem;
  align-items: start;
  padding: 4rem 0;
}
/* No more Browse/category sidebar -- every rating shows together in one
   grid now, so the gallery main area is just a single block, not a
   sidebar+content grid. */
.mod-gallery-main--no-sidebar { display: block; }
/* Title + "by <uploader>" caption under a profile's own Gallery tab
   tiles -- same FurAffinity-style treatment the submissions tiles use,
   just without the type-badge emoji since every tile here is already art. */
.gallery-tile-card { display: flex; flex-direction: column; min-width: 0; }
.gallery-tile-caption { padding: 0.5rem 0.05rem 0; min-width: 0; text-align: center; }
.gallery-tile-caption-title {
  display: block; font-size: 0.86rem; font-weight: 700; color: #6fb3e0; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gallery-tile-caption-title:hover { color: #96cbef; text-decoration: underline; }
.gallery-tile-caption-author { display: block; font-size: 0.78rem; color: #999; margin-top: 0.15rem; }
.gallery-tile-caption-author a { color: #a8c6e8; text-decoration: none; }
.gallery-tile-caption-author a:hover { text-decoration: underline; }
.gallery-grid--4up { grid-template-columns: repeat(4, 1fr); }
.mod-gallery-empty-state {
  text-align: center; padding: 4rem 1rem; color: #999;
}
.mod-gallery-empty-state .mod-gallery-sidebar-label { margin-bottom: 1rem; }
@media (max-width: 1100px) {
  .gallery-grid--4up { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .gallery-grid--4up { grid-template-columns: repeat(2, 1fr); }
}
/* Story gallery tab (.mod-page-row wrapper only, not profile-template's
   own .fp-gallery-page-row) — pull the grid up flush under the tabs, same
   distance as the Characters tab's own content instead of floating 4rem
   down the page. */
.mod-page-row .mod-gallery-main {
  padding-top: 0;
}
.mod-gallery-sidebar-label {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f0c060;
  text-shadow: 0 0 12px rgba(240,192,96,0.4);
  margin: 0 0 0.9rem;
}
.mod-gallery-cat {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255,255,255,0.68);
  padding: 0.5em 0.6em;
  border-radius: 0 8px 8px 0;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, text-shadow 0.15s;
}
.mod-gallery-cat:hover {
  background: rgba(127,168,217,0.1); color: #a8c6e8;
  text-decoration: none;
}
.mod-gallery-cat.active {
  color: #f0f0f0; font-weight: 700; background: rgba(127,168,217,0.15);
  border-left-color: #7fa8d9;
}

.mod-gallery-content { min-width: 0; }
.mod-gallery-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d97a72;
  margin-bottom: 0.4rem;
}

.mod-gallery-locked { grid-column: 1 / -1; padding: 2rem 0; }
.mod-gallery-locked-icon { font-size: 1.8rem; margin-bottom: 0.75rem; }
.mod-gallery-locked-title { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 700; color: #f0f0f0; margin-bottom: 0.5rem; }
.mod-gallery-locked-text { color: #aaa; font-size: 0.92rem; line-height: 1.7; margin-bottom: 1.2rem; }
.mod-gallery-locked-btn { color: #7fa8d9; font-weight: 600; text-decoration: underline; }

/* ── Creator Panel ────────────────────────────────────────────────────────── */
.mod-panel-wrap { max-width: 900px; margin: 0 auto; padding: 3rem; }
.mod-panel-title { font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 700; color: #f0f0f0; margin-bottom: 0.25rem; }
.mod-panel-sub { color: #999; font-size: 0.9rem; margin-bottom: 2rem; }

.mod-panel-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 2rem; }
.mod-panel-tab {
  background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.9rem; color: #999;
  padding: 0.6rem 0.9rem; border-bottom: 2px solid transparent;
}
.mod-panel-tab:hover { color: #f0f0f0; }
.mod-panel-tab.active { color: #7fa8d9; border-bottom-color: #7fa8d9; font-weight: 700; }

.mod-panel-section { display: none; }
.mod-panel-section.active { display: block; }

.mod-field { margin-bottom: 1.25rem; }
.mod-field label { display: block; font-size: 0.8rem; font-weight: 600; color: #bbb; margin-bottom: 0.35rem; }
.mod-field-label-standalone { font-size: 0.8rem; font-weight: 600; color: #bbb; margin-bottom: 0.35rem; }
.mod-input, .mod-textarea, .mod-select {
  width: 100%; box-sizing: border-box; font-family: 'Inter', sans-serif; font-size: 0.9rem;
  padding: 0.55rem 0.7rem; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: #f0f0f0; background: #161616;
}
.mod-textarea { resize: vertical; min-height: 90px; }
.mod-input:focus, .mod-textarea:focus, .mod-select:focus { outline: none; border-color: #7fa8d9; }

.mod-btn {
  display: inline-block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.85rem;
  padding: 0.5rem 1.1rem; border-radius: 20px; border: 1px solid #7fa8d9; color: #7fa8d9;
  background: none; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.mod-btn:hover { background: #7fa8d9; color: #0a0a0a; }
.mod-btn--danger { border-color: #d97a72; color: #d97a72; }
.mod-btn--danger:hover { background: #d97a72; color: #0a0a0a; }
/* Solid-filled, not just outline — for a confirm action that isn't
   destructive (Unpublish) but still deserves more visual weight than the
   plain outline default. */
.mod-btn--teal { background: #1fb6a8; border-color: #1fb6a8; color: #fff; }
.mod-btn--teal:hover { background: #1a9d91; border-color: #1a9d91; color: #fff; }
.mod-btn--small { padding: 0.3rem 0.7rem; font-size: 0.75rem; }
/* Bigger, easier-to-hit target than the default .mod-btn size, for Cancel
   specifically — it's the most-clicked "get me out of here" button on
   every create/edit screen. */
.mod-btn--cancel { padding: 0.75rem 1.6rem; font-size: 0.95rem; }

/* ── Shared blurred full-bleed background, fixed behind everything — the
   exact same treatment as the Fanpage Hub, reused on the create/edit
   pages (character, gallery, story). Deliberately NOT named .fp-bg-wrap/
   .fp-bg-img/.fp-bg-overlay — profile-template.html already defines its
   own classes with those exact names (a differently-designed wrapper that
   holds the whole page's content, not just a decorative background layer),
   and since it also loads this shared stylesheet, those names collided:
   this rule's z-index:-1 leaked onto the profile page's content wrapper
   and pushed the entire page behind everything, making it look broken. ── */
.mod-page-bg-wrap-static { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #0d0d0d; }
.mod-page-bg-img-static {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(16px); transform: scale(1.08);
  opacity: 0.55;
}
.mod-page-bg-overlay-static { position: absolute; inset: 0; background: rgba(10,10,10,0.72); }

.mod-panel-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.mod-panel-list-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 0.9rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: #161616;
}
.mod-panel-list-item span { font-size: 0.88rem; color: #f0f0f0; }
.mod-panel-list-item .mod-panel-list-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

.mod-panel-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.mod-panel-thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.mod-panel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mod-panel-thumb button {
  position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.6); color: #fff; border: none;
  border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 0.75rem; line-height: 1;
}

.mod-panel-msg { font-size: 0.85rem; margin-bottom: 1rem; }
.mod-panel-msg--error   { color: #d97a72; }
.mod-panel-msg--success { color: #6fbf73; }
.mod-required-star { color: #d97a72; font-weight: 700; }

/* Momentary highlight on whichever field/box failed validation, so the
   error message isn't the only thing pointing at what needs fixing. */
.mod-input--flash-error { border-color: #d97a72 !important; box-shadow: 0 0 0 3px rgba(217,122,114,0.25); }
@keyframes mod-flash-error {
  0%, 100% { box-shadow: 0 0 0 3px rgba(217,122,114,0.25); }
  50% { box-shadow: 0 0 0 5px rgba(217,122,114,0.4); }
}
.mod-input--flash-error { animation: mod-flash-error 0.6s ease-in-out 2; }

.mod-stat-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; margin-bottom: 0.5rem; align-items: center; }

/* ── Gallery post detail: bigger Like + Bookmark next to the title ── */
.art-view-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.art-view-like--big {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0; box-sizing: border-box;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15);
  height: 48px; border-radius: 24px; color: #ddd; font-size: 1.05rem; font-weight: 700;
  padding: 0 1.3rem;
}
.art-view-like--big:hover { color: #e06080; border-color: #e06080; background: rgba(224,96,128,0.08); }
.art-view-like--big.liked { color: #e06080; border-color: #e06080; background: rgba(224,96,128,0.12); }
.art-view-like--big:disabled, .art-view-bookmark-btn:disabled { opacity: 0.6; cursor: default; }
.art-view-bookmark-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; box-sizing: border-box;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15);
  color: #ddd; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.art-view-bookmark-btn:hover { border-color: #7fa8d9; }
.art-view-bookmark-btn.bookmarked {
  color: #7fa8d9; border-color: #7fa8d9; background: rgba(127,168,217,0.18);
  box-shadow: 0 0 14px rgba(127,168,217,0.6);
}
/* Twitter/X-style bookmark ribbon — outlined when not bookmarked, filled
   solid blue when it is. Shared by the story banner's bookmark button too. */
.art-view-bookmark-btn svg, .mod-bookmark-btn svg { width: 22px; height: 22px; display: block; }
.art-view-bookmark-btn path, .mod-bookmark-btn path {
  fill: none; stroke: currentColor; stroke-width: 1.8; transition: fill 0.15s, stroke 0.15s;
}
.art-view-bookmark-btn.bookmarked path, .mod-bookmark-btn.bookmarked path { fill: currentColor; }

/* Recrop shortcut — reopens the shared Cropper.js modal (see
   fanpages/crop-modal.js) on an already-uploaded image, without needing to
   pick a new file. Positioning is left to each page's own usage. */
.fp-recrop-btn {
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.3); border-radius: 14px;
  color: #fff; font-family: inherit; font-size: 0.66rem; font-weight: 600;
  padding: 0.28rem 0.6rem; cursor: pointer; transition: background 0.15s;
}
.fp-recrop-btn:hover { background: rgba(0,0,0,0.8); }

/* ── Characters Featured / Relevant Stories — tagged content, living
   INSIDE the description box (separated from the description text by its
   own divider), not as a separate box below it. ── */
.art-view-tags-section { margin: 0; }
.art-view-tags-hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 0 0 1.25rem; }
.art-view-tags-label { font-family: 'Cinzel', Georgia, serif; font-size: 0.95rem; font-weight: 700; color: #f0c060; margin: 0 0 0.85rem; }
.art-view-tags-empty { color: #888; font-size: 0.86rem; margin: 0 0 1.25rem; }
.art-view-tags-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.5rem; }

/* Rectangular card: portrait/cover on the left, name + species (or a
   synopsis snippet, for stories) on the right. */
.art-view-tag-card {
  display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit;
  width: 240px; flex-shrink: 0; padding: 0.6rem; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09);
  transition: border-color 0.15s, background 0.15s;
}
.art-view-tag-card:hover { border-color: rgba(240,192,96,0.4); background: rgba(255,255,255,0.06); }
.art-view-tag-card-imgwrap {
  position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12); background: #1a1a1a;
}
.art-view-tag-card-imgwrap--story { width: 48px; height: 64px; border-radius: 6px; }
.art-view-tag-card-imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Gallery detail view stats box (FurAffinity-style) — image/title/desc
   sit in a left column, this sits in a fixed-width right column that
   stretches to match the left column's height via grid's default
   align-items:stretch. Comments live OUTSIDE this grid entirely (their own
   full-width zone below), so the grid ends exactly where comments begin. ── */
#gallery-detail-view .art-view-detail-grid,
#fp-gallery-detail-view .art-view-detail-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2rem;
  margin-bottom: 2.25rem;
}
#gallery-detail-view .art-view-main-col,
#fp-gallery-detail-view .art-view-main-col { min-width: 0; display: flex; flex-direction: column; }
#gallery-detail-view .art-view-main-col .art-view-desc,
#fp-gallery-detail-view .art-view-main-col .art-view-desc { margin-bottom: 0; }
/* Slideshow prev/next pill — pinned to the bottom of the main column so it
   lines up with the bottom of the stats box beside it, instead of hugging
   right up under the description whenever the stats box (more tags, etc.)
   ends up taller. */
#gallery-detail-view .art-view-main-col .art-nav,
#fp-gallery-detail-view .art-view-main-col .art-nav { margin-top: auto; padding-top: 1.5rem; }

#gallery-detail-view .art-view-stats-box,
#fp-gallery-detail-view .art-view-stats-box {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
#gallery-detail-view .art-view-stats-title,
#fp-gallery-detail-view .art-view-stats-title {
  font-family: 'Cinzel', Georgia, serif; font-size: 0.95rem; font-weight: 700; color: #f0c060; margin: 0;
}
#gallery-detail-view .art-view-stats-rows,
#fp-gallery-detail-view .art-view-stats-rows { display: flex; flex-direction: column; gap: 0.55rem; }
#gallery-detail-view .art-view-stat-row,
#fp-gallery-detail-view .art-view-stat-row {
  display: flex; align-items: center; justify-content: space-between; font-size: 0.86rem; gap: 0.75rem;
}
#gallery-detail-view .art-view-stat-row span:first-child,
#fp-gallery-detail-view .art-view-stat-row span:first-child { color: rgba(200,184,232,0.55); }
#gallery-detail-view .art-view-stat-row span:last-child,
#fp-gallery-detail-view .art-view-stat-row span:last-child { font-weight: 600; color: #f0f0f0; text-align: right; }
#gallery-detail-view .art-view-stat-row a,
#fp-gallery-detail-view .art-view-stat-row a { color: var(--gold); text-decoration: none; font-weight: 600; }
#gallery-detail-view .art-view-stat-row a:hover,
#fp-gallery-detail-view .art-view-stat-row a:hover { opacity: 0.75; }

#gallery-detail-view .art-view-stats-hr,
#fp-gallery-detail-view .art-view-stats-hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 0; }
#gallery-detail-view .art-view-stats-tags,
#fp-gallery-detail-view .art-view-stats-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
#gallery-detail-view .art-view-stats-tag-pill,
#fp-gallery-detail-view .art-view-stats-tag-pill {
  font-size: 0.78rem; color: rgba(220,210,240,0.85);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  padding: 0.3em 0.8em; border-radius: 20px; text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#gallery-detail-view .art-view-stats-tag-pill:hover,
#fp-gallery-detail-view .art-view-stats-tag-pill:hover {
  color: var(--gold); border-color: rgba(212,175,85,0.45); background: rgba(212,175,85,0.07);
}
#gallery-detail-view .art-view-stats-tags-empty,
#fp-gallery-detail-view .art-view-stats-tags-empty { font-size: 0.8rem; color: #888; margin: 0; }

@media (max-width: 900px) {
  #gallery-detail-view .art-view-detail-grid,
  #fp-gallery-detail-view .art-view-detail-grid { grid-template-columns: 1fr; }
  #gallery-detail-view .art-view-stats-box,
  #fp-gallery-detail-view .art-view-stats-box { height: auto; }
}

/* ── Shared "generated cover" — a story with no cover_url gets a blurred,
   zoomed-in crop of the author's avatar with the title lettered over it,
   instead of one static stock image everywhere. Deliberately has NO width/
   height of its own — every call site passes the same sizing class the
   plain <img> would've had (via opts.imgClass), so this only ever adds the
   decorative blur/gradient/title on top of whatever size that class
   already defines, instead of fighting it over which rule wins the
   cascade. Built via wikiGeneratedCoverHtml()/wikiBuildGeneratedCover() in
   fanpages-nav.js. ── */
.wiki-generated-cover {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6b3fa0, #c2547a);
}
.wiki-generated-cover-bg {
  position: absolute; inset: -25%; background-size: cover; background-position: center;
  filter: blur(12px) saturate(1.3) brightness(0.6); transform: scale(1.15);
}
.wiki-generated-cover-title {
  position: relative; z-index: 1; color: #fff; text-align: center; padding: 0 0.6rem;
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 0.92rem; line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85);
}
/* A few call sites size their cover through a tag-qualified `... img { }`
   rule (works on an <img>, not the generated <div>) or a wrapper element
   that never had its own size — these give the generated cover its size
   explicitly instead, scoped so they can't leak into any other context. */
.art-view-tag-card-imgwrap .wiki-generated-cover { width: 100%; height: 100%; }
.char-link-picker-item--big .wiki-generated-cover { width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0; }

/* Small/icon-sized slots (28-48px list rows) — the title text is unreadable
   that tiny, so just the blurred texture shows. */
.wiki-generated-cover--sm .wiki-generated-cover-bg { filter: blur(6px) saturate(1.3) brightness(0.6); }
.art-view-tag-card-img--blurred { filter: blur(6px) brightness(0.6); transform: scale(1.1); }
.art-view-tag-card-lock-msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.5rem; font-weight: 700; color: #fff; text-align: center; padding: 0 0.2rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.art-view-tag-card-info { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.art-view-tag-card-name {
  font-size: 0.85rem; font-weight: 700; color: #f0f0f0; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.art-view-tag-card-sub {
  font-size: 0.74rem; color: #999; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Universal comment system — target_type/target_id based, reused across
   gallery posts now and Newspaper/Social later. One level of replies,
   "@username" prefix, avatar-card layout. ── */
.cc-section { margin-top: 0.5rem; }
.cc-title { font-family: 'Cinzel', Georgia, serif; font-size: 1.1rem; font-weight: 700; color: #f0f0f0; margin-bottom: 1rem; }
.cc-compose { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
.cc-compose textarea {
  flex: 1; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
  color: #f0f0f0; font-family: inherit; font-size: 0.9rem; padding: 0.6rem 0.8rem; resize: vertical; min-height: 44px;
}
.cc-compose textarea:focus { outline: none; border-color: #7fa8d9; }
.cc-compose-btn {
  background: #f0c060; color: #0d0d0d; border: none; border-radius: 20px; padding: 0.55rem 1.2rem;
  font-weight: 700; font-size: 0.85rem; cursor: pointer; align-self: flex-end; white-space: nowrap;
}
.cc-compose-btn:hover { background: #e0b050; }
.cc-compose-btn:disabled { opacity: 0.6; cursor: default; }
.cc-list { display: flex; flex-direction: column; gap: 1.25rem; }
.cc-item { display: flex; gap: 0.75rem; }
.cc-avatar, .cc-avatar-fallback { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cc-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #7fa8d9, #d97a72); color: #fff; font-weight: 700; font-size: 1.15rem;
}
.cc-body-wrap { flex: 1; min-width: 0; }
/* Same lightly-tinted glass box as the sidebar cards (.cl-side etc.) —
   a real see-through glass, not the darker/more opaque
   .chars-sidebar-style box tried first. Bigger padding per feedback
   that the bubbles felt cramped. */
.cc-bubble {
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 1rem 1.25rem;
}
.cc-name { font-weight: 700; font-size: 0.88rem; color: #f0f0f0; }
.cc-name a { color: inherit; text-decoration: none; }
.cc-name a:hover { text-decoration: underline; }
.cc-time { color: #888; font-size: 0.72rem; margin-left: 0.5rem; }
.cc-mention { color: #7fa8d9; font-weight: 700; }
.cc-text { font-size: 0.88rem; color: #ddd; margin-top: 0.3rem; white-space: pre-line; word-break: break-word; }
.cc-actions { display: flex; gap: 1rem; margin-top: 0.4rem; padding-left: 0.2rem; }
.cc-action-btn { background: none; border: none; color: #888; font-size: 0.76rem; font-weight: 700; cursor: pointer; padding: 0; }
.cc-action-btn:hover { color: #f0f0f0; }
.cc-replies { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.9rem; padding-left: 1.5rem; border-left: 2px solid rgba(255,255,255,0.08); }
.cc-reply-box { display: flex; gap: 0.6rem; margin-top: 0.7rem; }
.cc-reply-box textarea {
  flex: 1; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;
  color: #f0f0f0; font-family: inherit; font-size: 0.85rem; padding: 0.5rem 0.7rem; resize: vertical; min-height: 38px;
}
.cc-empty { color: #888; font-size: 0.85rem; padding: 1rem 0; text-align: center; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — a first pass across every layout this stylesheet touches
   (story hub/characters/chapters/gallery pages, profile edit mode, the
   character/gallery editors, comments). Two tiers: 820px collapses the
   multi-column layouts to one column, 480px tightens padding/type further
   for phones. Loaded last, so these safely override the desktop rules
   above at matching widths — including .chars-layout/.mod-page-row, which
   otherwise clobber style.css's own mobile rules since this file loads
   after it unconditionally. ══════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Story hub/characters/chapters/gallery: side column (Navigate/Author/
     Book box) drops below the main content instead of sitting beside it. */
  .wiki-layout {
    grid-template-columns: 1fr;
    padding: 3rem 1.25rem 3rem;
    gap: 2rem;
  }
  .wiki-side-col { order: 2; }
  .chars-layout { grid-template-columns: 1fr !important; }
  .mod-page-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .mod-page-row .wiki-side-col { margin-top: 0; order: 2; }
  .mod-gallery-main { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; }

  /* Banner shorter on mobile — 560px of a phone screen is most of the page. */
  .wiki-cover { height: 320px; }
  .wiki-title { font-size: 1.8rem; }

  .mod-quick-nav-row--single .mod-quick-nav-card { width: 100%; }
  .mod-quick-nav-row { gap: 1rem; }

  .wiki-page-title { font-size: 2rem; }

  /* "Start Reading" card — cover stacks above the tag cloud instead of
     sitting beside it, centered, at a saner size than the desktop 260×400.
     Tag cloud drops its height clamp on mobile — a fixed-height column
     next to nothing (the cover's now above it, not beside it) doesn't
     mean much, so just let the card grow with however many tags there are. */
  .wiki-hero { flex-direction: column; align-items: center; text-align: center; padding: 1.25rem; }
  .wiki-hero-cover { margin: 0 auto 1.25rem; width: 160px; height: 240px; }
  .wiki-hero-divider { display: none; }
  .wiki-hero-info { align-items: center; width: 100%; }
  .wiki-hero-tagcloud-wrap { flex: none; width: 100%; }
  .wiki-hero-tagcloud {
    height: auto; max-height: 220px; justify-content: center;
  }
  .wiki-hero-actions { justify-content: center; flex-wrap: wrap; }
  .wiki-hero-stats-bar { justify-content: center; flex-wrap: wrap; }
  .mod-cover-wrap { margin: 0 auto; width: 160px; height: 240px; }
  .wiki-meta-display { width: 100%; max-width: 260px; }

  /* Story tabs — scroll horizontally instead of wrapping onto a cramped
     second line. */
  .wiki-story-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .wiki-story-tab { flex-shrink: 0; }

  /* Description's floated cover+avatar box — full-width above the text
     instead of a narrow float, same as the old cover+meta column used to
     stack on mobile. */
  .wiki-desc-side { float: none; width: 200px; margin: 0 auto 1.25rem; }

  /* Three cards stack instead of squeezing into one row. */
  .wiki-story-cards-row { grid-template-columns: 1fr; gap: 1rem; }

  /* Bio | divider | links → stacked, divider becomes a horizontal rule. */
  .wiki-meet-split { grid-template-columns: 1fr; gap: 1.5rem; }
  .wiki-meet-divider { display: none; }

  /* Edit bar: stop trying to fit "Currently editing…" + Delete + Save +
     Cancel on one line — wrap onto two instead of squeezing/overflowing. */
  .mod-edit-bar { flex-wrap: wrap; height: auto; padding: 0.75rem 1rem; gap: 0.6rem; }
  .mod-edit-bar-actions { width: 100%; justify-content: flex-end; }
  body.mod-editing-active .wiki-cover { margin-top: 0 !important; }

  /* Editor: cards+cover row and the unified form box both go full-width,
     single column, same as the rest of the mobile story layout. */
  body.mod-editing-active #editor-top-row { flex-direction: column; }
  body.mod-editing-active #editor-top-row .mod-quick-nav { width: 100%; }
  body.mod-editing-active #editor-top-row .mod-quick-nav-row { grid-template-columns: 1fr 1fr; }
  body.mod-editing-active .mod-cover-wrap { width: 160px; height: 240px; margin: 0 auto; }
  body.mod-editing-active .wiki-layout { max-width: 100%; }
  body.mod-editing-active .mod-editor-form-box { padding: 1.4rem 1.25rem 1.6rem; }

  /* Character editor / link-to modals: full-bleed instead of a fixed
     max-width card that can overflow a narrow screen. */
  .char-editor-modal, .gallery-editor-modal { max-width: 100%; margin: 0 1rem; }

  /* Panel/admin pages: less padding, they're mostly forms. */
  .mod-panel-wrap { padding: 1.5rem 1rem; }
}

@media (max-width: 520px) {
  .wiki-layout { padding: 2.25rem 1rem 2.5rem; }
  .wiki-cover { height: 240px; }
  .wiki-title { font-size: 1.5rem; }
  .mod-quick-nav-row { grid-template-columns: 1fr; gap: 0.75rem; }
  .mod-quick-nav-row--single { display: block; }
  .mod-quick-nav-row--single .mod-quick-nav-card { width: 100%; }
  .mod-cover-wrap, body.mod-editing-active .mod-cover-wrap { width: 135px; height: 202px; }
  .mod-edit-bar-left { flex-wrap: wrap; gap: 0.6rem; }
  body.mod-editing-active #editor-top-row .mod-quick-nav-row { grid-template-columns: 1fr; }
  .wiki-tags-editor, .wiki-tags-wrap { font-size: 0.9rem; }
}

/* ── Share button — small circular icon button used next to story/character
   titles, on profile header rows, and beside the gallery Bookmark button.
   Behavior lives in fanpages-nav.js (window.fpShare). ── */
.fp-share-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; box-sizing: border-box; flex-shrink: 0;
  background: transparent; border: 1px solid rgba(240,192,96,0.55); color: #f0f0f0;
  cursor: pointer; box-shadow: 0 0 10px rgba(240,192,96,0.35);
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}
.fp-share-icon-btn:hover { border-color: #f0c060; color: #f0c060; background: rgba(240,192,96,0.08); box-shadow: 0 0 16px rgba(240,192,96,0.6); }
.fp-share-icon-btn svg { width: 19px; height: 19px; display: block; }

/* Compact "Copy link" pill popover — appears right over the share button,
   not a dropdown-style menu. */
.fp-share-popover {
  position: fixed; z-index: 600;
  background: #1e1e1e; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55); padding: 0.25rem;
  animation: fpSharePopIn 0.14s ease-out both;
}
@keyframes fpSharePopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.fp-share-popover-item {
  display: flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  background: none; border: none; cursor: pointer;
  color: #f0f0f0; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600;
  padding: 0.5rem 0.75rem; border-radius: 7px;
}
.fp-share-popover-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.fp-share-popover-item:hover { background: rgba(255,255,255,0.08); }

.fp-share-toast {
  position: fixed; bottom: 2rem; left: 50%; z-index: 999;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a1a; border: 1px solid rgba(255,255,255,0.15); color: #f0f0f0;
  padding: 0.7rem 1.3rem; border-radius: 24px;
  font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 600;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
}
.fp-share-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }