/* Komikus web platform — shared stylesheet
   Ported from the approved design canvas (Main/Detail/Artist/Login .dc.html). */

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #121214;
  color: #F1F1F3;
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: #FF3D71; text-decoration: none; }
a:hover { color: #FF6B93; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.wordmark {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FF3D71, #7B2FF7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Icon mark that sits to the left of the wordmark -- a hand-drawn K
   (Permanent Marker) on the brand gradient, with a few ink-fleck dots.
   See docs/design canvas for the full exploration of alternates. */
.logo-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-mark {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, #FF3D71, #7B2FF7);
}
.logo-mark-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
}
.logo-mark-dot-1 { top: 3px; left: 4px; width: 2px; height: 2px; }
.logo-mark-dot-2 { top: 7px; left: 3px; width: 1px; height: 1px; background: rgba(255,255,255,0.4); }
.logo-mark-dot-3 { bottom: 5px; right: 3px; width: 1.5px; height: 1.5px; background: rgba(255,255,255,0.45); }
.logo-mark-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Permanent Marker', cursive;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  transform: rotate(-6deg);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 24px;
  padding: 14px 32px;
  background: rgba(18,18,20,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #26272C;
}
.search-wrap { position: relative; flex: 1; max-width: 460px; }
.search-wrap svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #6B6D76; }
.search-input {
  width: 100%; background: #1A1B1F; border: 1px solid #2C2D33; border-radius: 10px;
  padding: 10px 14px 10px 38px; color: #F1F1F3; font-family: 'Manrope', sans-serif; font-size: 13px;
}
.search-input::placeholder { color: #6B6D76; }
.nav-spacer { flex: 1; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 9px;
  border: 1px solid #34353C; color: #C7C9D1; font-size: 13px; font-weight: 700; background: transparent;
}
.btn-fill {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 9px; border: none;
  background: linear-gradient(135deg, #FF3D71, #7B2FF7); color: #fff; font-size: 13px; font-weight: 700;
}
.btn-danger {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 9px;
  border: 1px solid #7A2036; color: #FF6B8F; font-size: 13px; font-weight: 700; background: transparent;
}
.nav-user { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #C7C9D1; }
.nav-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none; overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 12px; color: #fff;
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
  padding: 0 4px; margin-left: 6px; border-radius: 999px; background: #FF3D71; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1; vertical-align: middle;
}
.nav-login-link { color: #C7C9D1; font-size: 13px; font-weight: 700; }

/* Hamburger toggle -- hidden on desktop, where .nav-collapse (search box +
   auth links/user menu) just renders inline exactly like the old flat nav
   (same flex/gap values, now one level deeper). See header.php's comment
   on .nav-toggle for why this exists. */
.nav-toggle {
  display: none; margin-left: auto; flex: none;
  width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid #2C2D33; background: #1A1B1F; color: #C7C9D1;
}
.nav-collapse { display: flex; align-items: center; gap: 24px; flex: 1; min-width: 0; }
@media (max-width: 720px) {
  .nav { flex-wrap: wrap; padding: 12px 16px; gap: 12px; }
  .nav-toggle { display: flex; }
  /* Collapsed by default; JS (header.php's inline script) toggles .open.
     flex-basis: 100% + the parent's flex-wrap puts this on its own row
     below the logo/hamburger row instead of squeezing in beside them. */
  .nav-collapse {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 10px;
  }
  .nav-collapse.open { display: flex; }
  .nav-collapse .search-wrap { max-width: none; width: 100%; }
  .nav-collapse .nav-spacer { display: none; }
  .nav-collapse .btn-ghost, .nav-collapse .btn-fill, .nav-collapse .nav-login-link {
    width: 100%; justify-content: center; box-sizing: border-box;
  }
  .nav-collapse .nav-user { width: 100%; padding: 8px 4px; box-sizing: border-box; }
}

/* ---------- Browse: chips / tabs / grid / cards ---------- */
.chips-row { display: flex; gap: 10px; padding: 16px 32px; overflow-x: auto; border-bottom: 1px solid #1D1E22; }
.chip {
  flex: none; padding: 8px 16px; border-radius: 999px; border: 1px solid #2C2D33; background: #1A1B1F;
  color: #9A9CA6; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.chip.active { background: linear-gradient(135deg, #FF3D71, #7B2FF7); border-color: transparent; color: #fff; }
button.chip { appearance: none; -webkit-appearance: none; font-family: 'Manrope', sans-serif; cursor: pointer; }
.modal-card .chips-row { padding: 0; border: none; margin: 6px 0 4px; flex-wrap: wrap; }

/* ---------- Chapters: owner edit mode (reorder / delete) ---------- */
.chip-wrap { position: relative; display: inline-flex; align-items: center; flex: none; }
.chip-wrap .chip { display: block; }
.chips-row.editing .chip-wrap { cursor: grab; }
.chip-wrap.dragging { opacity: 0.35; }
.chip-delete-form { display: none; margin-left: -10px; }
.chips-row.editing .chip-delete-form { display: block; }
.chip-delete-btn {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid #2C2D33; background: #16171B;
  color: #FF6B8F; font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
.chip-edit-btn {
  flex: none; margin-left: auto; width: 32px; height: 32px; border-radius: 9px; border: 1px solid #2C2D33;
  background: #1A1B1F; color: #C7C9D1; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.chip-edit-btn.active { background: linear-gradient(135deg, #FF3D71, #7B2FF7); border-color: transparent; color: #fff; }

.danger-zone { margin-top: 22px; padding-top: 16px; border-top: 1px solid #26272C; }
.danger-zone-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; padding: 0; cursor: pointer;
  color: #FF6B8F; font-size: 13px; font-weight: 700; font-family: inherit;
}
.danger-zone-toggle svg { transition: transform 0.15s ease; flex: none; }
.danger-zone-toggle.expanded svg { transform: rotate(180deg); }
.danger-zone-body {
  margin-top: 12px; padding: 14px; border-radius: 10px;
  border: 1px solid rgba(255,61,113,0.3); background: rgba(255,61,113,0.08);
}
.danger-zone-warning { font-size: 12.5px; color: #C7C9D1; margin: 0 0 12px; line-height: 1.5; }
.danger-zone-delete-btn {
  width: 100%; padding: 11px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255,61,113,0.4); background: rgba(255,61,113,0.15);
  color: #FF6B8F; font-size: 13.5px; font-weight: 800;
}
.danger-zone-delete-btn:hover { background: rgba(255,61,113,0.25); }
.sub-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; }
.tabs { display: flex; gap: 22px; }
.tab { font-size: 14px; font-weight: 700; color: #6B6D76; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.tab.active { color: #F1F1F3; border-color: #FF3D71; }
.count { font-size: 12px; color: #6B6D76; font-weight: 600; }

.grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; padding: 4px 32px 56px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 700px)  { .grid { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 4px 16px 40px; } }

/* ---------- Pager (index.php's Browse/Search grid, artist.php's Works tab)
   -- only rendered by either page when there's more than one page of
   results, see src/helpers.php's pager_page_numbers(). ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 8px 32px 48px; }
@media (max-width: 700px) { .pager { padding: 8px 16px 36px; } }
.pager-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px;
  background: #1A1B1F; border: 1px solid #26272C; color: #C7C8CE;
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.pager-link:hover { border-color: #3A3B42; }
.pager-link.active { background: #FF3D71; border-color: #FF3D71; color: #fff; }
.pager-link.disabled { opacity: 0.35; pointer-events: none; }
.pager-ellipsis { color: #6B6D76; font-size: 13px; font-weight: 700; padding: 0 4px; }

.card { background: #1A1B1F; border: 1px solid #26272C; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.cover { position: relative; aspect-ratio: 3 / 4; }
/* .cover-bg carries the actual thumbnail (real cover image, or the
   gradient+monogram fallback) as its own layer inside .cover, separate from
   .badge-mature -- so an Adult-rated card's thumb-blur filter (see the
   grid-card blur block further down) blurs only the artwork, never the
   maturity badge sitting on top of it. */
.cover-bg { position: absolute; inset: 0; }
.cover-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.14) 1.5px, transparent 1.6px);
  background-size: 11px 11px; mix-blend-mode: overlay;
}
.cover-mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 60px; color: rgba(255,255,255,0.26);
}
.badge-mature {
  position: absolute; top: 8px; left: 8px;
  background: rgba(10,10,11,0.72); border: 1px solid rgba(255,255,255,0.22);
  color: #F1F1F3; font-size: 10px; font-weight: 800; letter-spacing: 0.02em;
  padding: 3px 6px; border-radius: 5px; backdrop-filter: blur(4px);
}
.badge-adult { background: rgba(255,61,113,0.85); border-color: rgba(255,61,113,0.9); }
/* Owner-facing work status (artist.php's Works tab only -- see
   src/moderation.php's series_work_status()/SERIES_WORK_STATUS_LABELS).
   Opposite corner from .badge-mature so the two never collide when a card
   has both. */
.badge-status {
  position: absolute; top: 8px; right: 8px;
  color: #0A0A0B; font-size: 10px; font-weight: 800; letter-spacing: 0.02em;
  padding: 3px 6px; border-radius: 5px;
}
.badge-status-pending         { background: #FFB020; }
.badge-status-rejected        { background: #FF3D71; color: #F1F1F3; }
.badge-status-private         { background: #6B7280; color: #F1F1F3; }
.badge-status-live_public     { background: #3D8BFF; color: #F1F1F3; }
.badge-status-live_subscriber { background: #8B5CF6; color: #F1F1F3; }
.card-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 5px; }
.card-title {
  font-size: 13.5px; font-weight: 700; line-height: 1.3; color: #F1F1F3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-artist { font-size: 12px; color: #8B8D96; font-weight: 600; }
.card-stats { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.stat { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #6B6D76; font-weight: 600; }

/* ---------- Comic detail ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 36px 32px 64px; }
.top { display: grid; grid-template-columns: 300px 1fr; gap: 44px; }
@media (max-width: 800px) { .top { grid-template-columns: 1fr; } }

.cover-lg { position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; }
.cover-mono-lg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 96px; color: rgba(255,255,255,0.26);
}
.read-btn {
  margin-top: 16px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: 10px; border: none; background: linear-gradient(135deg, #FF3D71, #7B2FF7);
  color: #fff; font-size: 14px; font-weight: 800;
}
.read-btn:hover { color: #fff; }
.icon-row { margin-top: 10px; display: flex; gap: 8px; }
.icon-btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 9px; border: 1px solid #2C2D33; background: #1A1B1F; color: #C7C9D1; cursor: pointer; }
.icon-btn.active { background: linear-gradient(135deg, #FF3D71, #7B2FF7); border-color: transparent; color: #fff; }
.stat-card { margin-top: 16px; display: flex; border: 1px solid #26272C; border-radius: 12px; overflow: hidden; }
.stat-cell { flex: 1; text-align: center; padding: 12px 4px; border-right: 1px solid #26272C; }
.stat-cell:last-child { border-right: none; }
.stat-num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; }
.stat-lbl { font-size: 10.5px; color: #6B6D76; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

.rating-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: #1A1B1F; border: 1px solid #26272C; color: #9A9CA6; font-size: 11.5px; font-weight: 700; }
.breadcrumb { font-size: 12.5px; color: #6B6D76; font-weight: 700; }
.title { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 800; margin: 8px 0 16px; letter-spacing: -0.01em; }
.artist-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 16px; color: #fff; flex: none; overflow: hidden; position: relative; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artist-name { font-weight: 700; font-size: 14.5px; }
.artist-sub { font-size: 12.5px; color: #6B6D76; font-weight: 600; }
.follow-btn { margin-left: auto; padding: 9px 18px; border-radius: 9px; border: 1px solid #2C2D33; background: transparent; color: #F1F1F3; font-size: 13px; font-weight: 700; }

.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tag { padding: 6px 13px; border-radius: 999px; background: #1A1B1F; border: 1px solid #26272C; font-size: 12px; font-weight: 700; color: #9A9CA6; }

.synopsis { font-size: 15px; line-height: 1.65; color: #C7C9D1; max-width: 640px; }
.meta-row { display: flex; gap: 24px; margin-top: 20px; font-size: 12.5px; color: #8B8D96; font-weight: 600; flex-wrap: wrap; }
.meta-row b { color: #F1F1F3; }

.section-head { display: flex; align-items: baseline; gap: 10px; margin: 48px 0 14px; }
.section-title { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 800; }
.section-count { font-size: 12.5px; color: #6B6D76; font-weight: 700; }

.pages-grid { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px) { .pages-grid { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (max-width: 560px) { .pages-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.page-thumb { position: relative; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; border: 1px solid #26272C; background-size: cover; background-position: center; }
.page-thumb.cover-page { outline: 2px solid #FF3D71; outline-offset: 2px; }
.page-num { position: absolute; bottom: 6px; right: 6px; background: rgba(10,10,11,0.72); border: 1px solid rgba(255,255,255,0.16); color: #F1F1F3; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 5px; backdrop-filter: blur(3px); }

.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
@media (max-width: 700px) { .more-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.mcard { background: #1A1B1F; border: 1px solid #26272C; border-radius: 12px; overflow: hidden; }
.mcover { position: relative; aspect-ratio: 3/4; }
.mcover-mono { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 44px; color: rgba(255,255,255,0.26); }
.mbody { padding: 10px 11px; }
.mtitle { font-size: 13px; font-weight: 700; }

/* ---------- Artist profile ---------- */
.banner { width: 100%; height: 260px; position: relative; background: linear-gradient(120deg, #121214 0%, #1a2340 45%, #17516b 100%); overflow: hidden; }
.banner-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.10) 1.5px, transparent 1.6px); background-size: 13px 13px; }
.banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.artist-wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px 56px; }
/* head-row overlaps the banner above it via the negative margin below. It
   needs to be a positioned element (position + z-index) or the *banner*
   — itself position:relative — would paint over it and clip the avatar,
   since positioned elements always paint after non-positioned ones
   regardless of DOM order. */
.head-row { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 20px; margin-top: -46px; flex-wrap: wrap; }
.avatar-lg { width: 108px; height: 108px; border-radius: 50%; border: 4px solid #121214; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 40px; color: #fff; flex: none; overflow: hidden; position: relative; }
.avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.name-block { padding-bottom: 8px; }
.display-name { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 800; }
.handle { font-size: 13.5px; color: #6B6D76; font-weight: 600; margin-top: 2px; }
.head-actions { margin-left: auto; padding-bottom: 8px; display: flex; gap: 10px; }
.support-btn { padding: 10px 18px; border-radius: 9px; border: 1px solid #2C2D33; background: transparent; color: #F1F1F3; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.bio { max-width: 620px; margin: 20px 0 22px; font-size: 14.5px; line-height: 1.6; color: #C7C9D1; }
.artist-stat-row { display: flex; gap: 36px; padding: 18px 0; border-top: 1px solid #26272C; border-bottom: 1px solid #26272C; margin-bottom: 24px; flex-wrap: wrap; }

/* ---------- Artist profile: Works / About / Support tabs ---------- */
button.tab { appearance: none; -webkit-appearance: none; background: none; border: none; border-bottom: 2px solid transparent; font-family: 'Manrope', sans-serif; padding: 0 0 4px; cursor: pointer; }

.about-content { max-width: 680px; font-size: 14.5px; line-height: 1.7; color: #C7C9D1; }
.about-content p { margin: 0 0 14px; }
.about-content h2, .about-content h3, .about-content h4 { font-family: 'Space Grotesk', sans-serif; color: #F1F1F3; margin: 22px 0 10px; }
.about-content h2 { font-size: 20px; }
.about-content h3 { font-size: 17px; }
.about-content h4 { font-size: 15px; }
.about-content ul, .about-content ol { margin: 0 0 14px; padding-left: 22px; }
.about-content li { margin-bottom: 6px; }
.about-content blockquote { margin: 0 0 14px; padding: 4px 16px; border-left: 3px solid #FF3D71; color: #9A9CA6; }
.about-content a { color: #FF6B93; text-decoration: underline; }
.about-content img { max-width: 100%; border-radius: 10px; margin: 6px 0 14px; display: block; }
.about-content video, .about-content iframe { max-width: 100%; border-radius: 10px; margin: 6px 0 14px; display: block; border: none; }

.support-link-row, .social-link-row { display: flex; gap: 10px; flex-wrap: wrap; }
.support-link-btn {
  padding: 10px 18px; border-radius: 9px; background: linear-gradient(135deg, #FF3D71, #7B2FF7);
  color: #fff; font-size: 13.5px; font-weight: 700;
}
.social-link-btn {
  padding: 8px 15px; border-radius: 999px; border: 1px solid #2C2D33; background: #1A1B1F;
  color: #C7C9D1; font-size: 12.5px; font-weight: 700;
}
.social-link-btn:hover { border-color: #3A3B42; color: #F1F1F3; }

/* Rich editor toolbar for the About tab's edit modal (see artist.php). */
.rich-toolbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px; border: 1px solid #2C2D33; border-radius: 9px 9px 0 0; background: #1A1B1F; }
.rich-toolbar button {
  appearance: none; -webkit-appearance: none; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: #C7C9D1; font-size: 12.5px; font-weight: 700;
  font-family: 'Manrope', sans-serif; cursor: pointer;
}
.rich-toolbar button:hover { background: #26272C; color: #F1F1F3; }
.rich-toolbar-sep { width: 1px; background: #2C2D33; margin: 3px 4px; }
.rich-editor {
  min-height: 220px; max-height: 420px; overflow-y: auto; padding: 14px; border: 1px solid #2C2D33; border-top: none;
  border-radius: 0 0 9px 9px; background: #101114; color: #E7E8EC; font-size: 14px; line-height: 1.6;
}
.rich-editor:focus { outline: none; border-color: #3A3B42; }
.rich-editor img, .rich-editor video, .rich-editor iframe { max-width: 100%; border-radius: 8px; }
.rich-editor-hint { font-size: 11.5px; color: #6B6D76; margin: 8px 0 14px; }

/* ---------- Login ---------- */
.login-body { position: relative; overflow: hidden; }
.bg-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1.5px, transparent 1.6px); background-size: 16px 16px; }
.bg-glow { position: absolute; width: 700px; height: 700px; border-radius: 50%; top: -280px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(123,47,247,0.20), transparent 70%); pointer-events: none; }
.topbar { position: relative; padding: 22px 32px; display: flex; align-items: center; }
.back { font-size: 13px; font-weight: 700; color: #9A9CA6; display: flex; align-items: center; gap: 6px; }
.center { position: relative; display: flex; justify-content: center; padding-top: 24px; }
.login-card { width: 400px; max-width: calc(100vw - 32px); background: #17181C; border: 1px solid #26272C; border-radius: 18px; padding: 34px 32px; }
.tagline { text-align: center; font-size: 13px; color: #8B8D96; font-weight: 600; margin-top: 8px; margin-bottom: 28px; }
.oauth-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 10px; border: 1px solid #33343B; background: #F1F1F3; color: #17181C; font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }
.oauth-btn.dark { background: transparent; color: #F1F1F3; border: 1px solid #33343B; }
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.divider-line { flex: 1; height: 1px; background: #26272C; }
.divider-text { font-size: 11.5px; color: #6B6D76; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.field-label { font-size: 12px; font-weight: 700; color: #9A9CA6; margin-bottom: 6px; display: block; }
.field { width: 100%; background: #1E1F24; border: 1px solid #2C2D33; border-radius: 9px; padding: 11px 13px; color: #F1F1F3; font-size: 13.5px; font-family: 'Manrope', sans-serif; margin-bottom: 16px; }
.field::placeholder { color: #55575F; }
.submit-btn { width: 100%; padding: 13px; border-radius: 10px; border: none; background: linear-gradient(135deg, #FF3D71, #7B2FF7); color: #fff; font-size: 14px; font-weight: 800; }
.submit-btn:disabled { opacity: 0.6; cursor: default; }
.foot { text-align: center; margin-top: 22px; font-size: 12.5px; color: #8B8D96; }
.fineprint { text-align: center; margin-top: 18px; font-size: 11px; color: #55575F; line-height: 1.5; }
.form-error { background: rgba(255,61,113,0.12); border: 1px solid rgba(255,61,113,0.3); color: #FF6B93; font-size: 12.5px; font-weight: 600; padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; display: none; }

/* ---------- Reader (read.php) ---------- */
.reader-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 32px; border-bottom: 1px solid #1D1E22; background: #17181B;
}
.reader-back { display: inline-flex; align-items: center; gap: 4px; flex: none; color: #C7C9D1; font-size: 13px; font-weight: 700; }
.reader-back:hover { color: #F1F1F3; }
.reader-title-block { flex: 1; min-width: 0; }
.reader-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; color: #F1F1F3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-chapter { font-size: 12px; color: #9A9CA6; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-nav-btns { display: flex; gap: 8px; flex: none; }
.reader-nav-btn {
  display: inline-flex; padding: 7px 14px; border-radius: 8px; border: 1px solid #2C2D33;
  background: #1A1B1F; color: #C7C9D1; font-size: 12.5px; font-weight: 700;
}
.reader-nav-btn:hover { color: #F1F1F3; border-color: #3A3B42; }
.reader-nav-btn.disabled { opacity: 0.35; pointer-events: none; }

.reader-strip { max-width: 720px; margin: 0 auto; background: #000; }
.reader-page { width: 100%; line-height: 0; }
.reader-page img { width: 100%; height: auto; display: block; }
.reader-page-placeholder { position: relative; width: 100%; aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center; }
.reader-page-num { position: absolute; bottom: 12px; right: 14px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12px; color: rgba(255,255,255,0.55); }

.reader-end { max-width: 720px; margin: 0 auto; padding: 48px 24px; text-align: center; }
.reader-end p { color: #9A9CA6; font-size: 14px; margin: 0 0 18px; }
.reader-end-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 760px) {
  .reader-bar { padding: 12px 16px; gap: 10px; }
  .reader-nav-btn { padding: 7px 11px; }
}

/* ---------- Settings / edit profile ---------- */
.settings-wrap { max-width: 560px; margin: 0 auto; padding: 40px 32px 64px; }
.settings-title { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 800; margin-bottom: 22px; }
.form-success { background: rgba(31,184,171,0.12); border: 1px solid rgba(31,184,171,0.3); color: #4DE0D1; font-size: 12.5px; font-weight: 600; padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; }
.form-hint { background: rgba(123,47,247,0.10); border: 1px solid rgba(123,47,247,0.28); color: #C9B8FF; font-size: 12.5px; font-weight: 500; line-height: 1.55; padding: 12px 14px; border-radius: 8px; margin-bottom: 20px; }
.settings-form textarea.field { resize: vertical; min-height: 90px; }
.upload-btn { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 8px; border: 1px solid #34353C; color: #C7C9D1; font-size: 12.5px; font-weight: 700; background: rgba(18,18,20,0.75); cursor: pointer; }
/* .banner-upload img is position:absolute; inset:0 so it paints, in default
   stacking order, ABOVE this non-positioned sibling label once a banner is
   set -- making the button visually present but unclickable. Promoting it
   to a positioned element (z-index needs a position to apply) puts it back
   on top regardless of DOM order. */
.banner-upload .upload-btn { position: relative; z-index: 1; }

.modal-card.crop-modal-card { max-width: 560px; }
.crop-stage { max-height: 62vh; overflow: hidden; background: #000; border-radius: 10px; margin-bottom: 16px; }
.crop-stage img { display: block; max-width: 100%; }
.crop-actions { display: flex; gap: 10px; justify-content: flex-end; }
.crop-actions .submit-btn { width: auto; padding: 10px 22px; }
.crop-cancel-btn { border: 1px solid #34353C; background: transparent; color: #C7C9D1; font-size: 13px; font-weight: 700; padding: 10px 18px; border-radius: 10px; cursor: pointer; }
.banner-upload { position: relative; width: 100%; height: 260px; border-radius: 14px; overflow: hidden; background: linear-gradient(120deg, #121214 0%, #1a2340 45%, #17516b 100%); border: 1px solid #26272C; display: flex; align-items: flex-end; justify-content: flex-end; padding: 14px; }
.banner-upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-upload-empty { position: absolute; left: 14px; bottom: 14px; font-size: 12px; color: #9A9CA6; font-weight: 600; max-width: 60%; }
.avatar-upload { display: flex; align-items: center; gap: 16px; }
.avatar-upload-circle { position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 30px; color: #fff; border: 3px solid #26272C; }
.avatar-upload-circle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.handle-field-wrap { position: relative; }
.handle-at { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #6B6D76; font-size: 13.5px; font-weight: 700; pointer-events: none; }
.handle-field { padding-left: 26px; }

/* ---------- Moderation queue ---------- */
.mod-wrap { max-width: 880px; margin: 0 auto; padding: 40px 32px 64px; }
.mod-sub { font-size: 13px; color: #9A9CA6; margin: -12px 0 22px; }
.mod-row {
  display: flex; gap: 16px; align-items: flex-start; padding: 16px;
  border: 1px solid #26272C; border-radius: 14px; background: #17181C; margin-bottom: 12px; flex-wrap: wrap;
}
.mod-cover { position: relative; width: 64px; height: 85px; border-radius: 8px; overflow: hidden; flex: none; }
.mod-info { flex: 1; min-width: 220px; }
.mod-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; }
.mod-meta { font-size: 12px; color: #8B8D96; font-weight: 600; margin-top: 3px; }
.mod-synopsis { font-size: 12.5px; color: #9A9CA6; margin-top: 8px; line-height: 1.5; max-width: 480px; }
.mod-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin: 0; }
.mod-rate-btn { cursor: pointer; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 80px 32px; color: #6B6D76; }
.empty-state h2 { font-family: 'Space Grotesk', sans-serif; color: #F1F1F3; font-size: 18px; margin-bottom: 8px; }

/* ---------- Play Store badge (shared: footer + browse-page CTA) ---------- */
.play-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 10px;
  border: 1px solid #2C2D33; background: #1A1B1F; flex: none; color: inherit;
}
.play-badge svg { flex: none; }
.play-badge small { display: block; font-size: 9.5px; color: #9A9CA6; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; }
.play-badge strong { display: block; font-size: 14px; font-weight: 800; font-family: 'Space Grotesk', sans-serif; color: #F1F1F3; line-height: 1.3; }

/* ---------- Browse-page "get the app" CTA ---------- */
.app-cta {
  max-width: 1280px; margin: 20px auto 0; padding: 28px 32px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(255,61,113,0.14), rgba(123,47,247,0.14));
  border: 1px solid #26272C; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.app-cta-title { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 18px; }
.app-cta-sub { font-size: 13px; color: #9A9CA6; margin-top: 4px; max-width: 420px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid #1D1E22; margin-top: 48px; padding: 36px 32px 0; }
.footer-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-brand .wordmark { font-size: 18px; }
.footer-tagline { font-size: 12.5px; color: #6B6D76; font-weight: 600; margin-top: 4px; }
.footer-bottom { max-width: 1280px; margin: 24px auto 0; padding: 18px 0 28px; border-top: 1px solid #1D1E22; font-size: 12px; color: #6B6D76; text-align: center; }

/* ---------- comic.php: owner "Edit series" panel ---------- */
.series-edit-panel { max-width: 480px; }
.cover-edit-thumb {
  position: relative; width: 110px; height: 154px; border-radius: 10px; overflow: hidden; flex: none;
  border: 2px solid #26272C; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 30px; color: #fff;
}
.cover-edit-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- comic.php: Share / Report ---------- */
.share-toast {
  margin-top: 8px; text-align: center; font-size: 12px; font-weight: 700; color: #4DE0D1;
  background: rgba(31,184,171,0.12); border: 1px solid rgba(31,184,171,0.3); border-radius: 8px; padding: 7px 10px;
}
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200; background: rgba(8,8,10,0.72);
  align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto; background: #17181C;
  border: 1px solid #26272C; border-radius: 16px; padding: 24px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-title { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 800; }
.modal-close {
  border: none; background: transparent; color: #9A9CA6; font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.report-reason-list { display: flex; flex-direction: column; gap: 8px; }
.report-reason-option {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #2C2D33;
  border-radius: 9px; font-size: 13px; color: #C7C9D1; cursor: pointer;
}
.report-reason-option input { flex: none; accent-color: #FF3D71; }
.report-word-count { text-align: right; font-size: 11.5px; color: #6B6D76; font-weight: 600; margin: 6px 0 14px; }
.report-word-count.over-limit { color: #FF6B93; }

/* ---------- settings.php: locked username field ---------- */
.field:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- moderation.php: tabs ---------- */
.mod-tabs { display: flex; gap: 8px; margin: 22px 0 0; border-bottom: 1px solid #1D1E22; flex-wrap: wrap; }
.mod-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 4px; margin-bottom: -1px;
  border: none; border-bottom: 2px solid transparent; background: transparent; color: #8B8D96;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer;
}
.mod-tab + .mod-tab { margin-left: 18px; }
.mod-tab.active { color: #F1F1F3; border-bottom-color: #FF3D71; }
.mod-tab-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: #1A1B1F; border: 1px solid #2C2D33; color: #C7C9D1; font-size: 11px; font-weight: 800;
}
.mod-tab.active .mod-tab-count { background: linear-gradient(135deg, #FF3D71, #7B2FF7); border-color: transparent; color: #fff; }
.mod-panel[hidden] { display: none; }

/* ---------- moderation.php: Reports tab rating dropdown ---------- */
.mod-report-actions { align-items: center; }
.mod-rating-select { display: inline-flex; align-items: center; gap: 6px; }
.mod-rating-dropdown {
  background: #1A1B1F; border: 1px solid #2C2D33; border-radius: 9px; color: #C7C9D1;
  font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; padding: 9px 10px; cursor: pointer;
}

/* ---------- comic.php: edit button next to the series title ---------- */
.title-row { display: flex; align-items: center; gap: 10px; }
.title-row .title { margin: 8px 0; }
.title-row .chip-edit-btn { margin-left: 0; width: 28px; height: 28px; flex: none; }

/* ---------- Follow button states ---------- */
.follow-btn.active { background: linear-gradient(135deg, #FF3D71, #7B2FF7); border-color: transparent; color: #fff; }
.btn-fill.following { background: transparent; border: 1px solid #34353C; color: #F1F1F3; }

/* ---------- settings.php: sidebar tabs (Profile / About / Links / Danger Zone) ---------- */
.settings-shell { max-width: 900px; margin: 0 auto; padding: 40px 32px 64px; display: flex; align-items: flex-start; gap: 40px; }
.settings-sidebar { width: 190px; flex: none; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; }
.settings-nav-item {
  display: block; width: 100%; text-align: left; padding: 10px 14px; border-radius: 9px;
  border: 1px solid transparent; background: none; color: #9A9CA6;
  font-family: 'Manrope', sans-serif; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.settings-nav-item:hover { color: #F1F1F3; background: #1A1B1F; }
.settings-nav-item.active { color: #F1F1F3; background: #1A1B1F; border-color: #26272C; }
.settings-nav-item.danger { color: #FF6B8F; }
.settings-nav-item.danger:hover { background: rgba(255,61,113,0.08); }
.settings-nav-item.danger.active { background: rgba(255,61,113,0.10); border-color: rgba(255,61,113,0.3); }
.settings-content { flex: 1; min-width: 0; max-width: 560px; }
.settings-panel[hidden] { display: none; }
@media (max-width: 720px) {
  .settings-shell { flex-direction: column; padding: 28px 16px 48px; gap: 20px; }
  .settings-sidebar { width: 100%; flex-direction: row; overflow-x: auto; position: static; }
  .settings-content { max-width: none; }
}

/* ---------- settings.php: Danger Zone -- delete-account slider ---------- */
.slide-delete-track {
  position: relative; width: 100%; height: 54px; border-radius: 999px; margin-top: 18px;
  background: #1A1B1F; border: 1px solid #2C2D33; overflow: hidden; user-select: none;
}
.slide-delete-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #6B6D76; pointer-events: none;
}
.slide-delete-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(135deg, rgba(255,61,113,0.28), rgba(123,47,247,0.28));
  transition: width 0.2s ease;
}
.slide-delete-track.completed .slide-delete-fill { background: linear-gradient(135deg, rgba(255,61,113,0.4), rgba(123,47,247,0.4)); }
.slide-delete-thumb {
  position: absolute; top: 3px; left: 3px; width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #FF3D71, #7B2FF7); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none; box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.slide-delete-thumb:active { cursor: grabbing; }

/* ---------- Footer: legal links row ---------- */
.footer-legal { font-size: 11.5px; color: #6B6D76; margin-bottom: 8px; }
.footer-legal a { color: #8B8D96; font-weight: 600; }
.footer-legal a:hover { color: #F1F1F3; }
.footer-legal-sep { margin: 0 6px; color: #3A3B42; }

/* ---------- privacy.php / disclaimer.php / license.php ---------- */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 48px 32px 72px; }
.legal-updated { font-size: 12.5px; color: #6B6D76; font-weight: 600; margin: -12px 0 28px; }
.legal-note { font-size: 12.5px; color: #9A9CA6; background: #1A1B1F; border: 1px solid #26272C; border-radius: 10px; padding: 12px 14px; margin-bottom: 28px; line-height: 1.6; }

/* ---------- comic.php / read.php: casual right-click/drag/long-press
   deterrent on the actual comic art -- see src/partials/footer.php's
   $protectImages script for the JS half. Not real DRM (see that script's
   comment); this just removes the obvious "long-press / right-click ->
   save" affordance on these specific elements. ---------- */
.reader-page img, .cover-lg, .page-thumb {
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none; user-drag: none;
  -webkit-touch-callout: none;
}

/* ---------- Adult-content blur: comic.php's cover/pages-grid, read.php's
   reader-strip. See src/moderation.php's viewer_blurs_explicit() -- applied
   only once the viewer has already cleared the Subscriber-Only/explicit-
   preference gate (series_access_state()), this is just the default-blur
   convenience with a per-view "tap to reveal" button. ---------- */
.explicit-blur { position: relative; }
.explicit-blur > *:not(.explicit-reveal-btn) { filter: blur(28px); }
.cover-lg.explicit-blur, .pages-grid.explicit-blur, .reader-strip.explicit-blur { overflow: hidden; }
.explicit-reveal-btn {
  position: absolute; z-index: 5; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px;
  color: #F1F1F3; background: rgba(10,10,12,0.72); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px; padding: 10px 18px;
}
.cover-lg > .explicit-reveal-btn { top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.explicit-reveal-btn-overlay { position: sticky; top: 45%; left: 50%; margin: 0 auto; display: block; }
.pages-grid.explicit-blur { position: relative; min-height: 160px; }
.pages-grid.explicit-blur .explicit-reveal-btn-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.reader-strip.explicit-blur .explicit-reveal-btn-overlay { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ---------- Small-screen polish (phone widths) -- side padding on the main
   content wrappers matched .grid's own 700px breakpoint (16px), and a couple
   of headline sizes that were comfortable at desktop widths but oversized
   next to a 375px viewport's own margins. Nothing here changes layout
   structure (that's handled by each section's own breakpoint above --
   .top, .grid, .settings-shell, .pages-grid, .mod-tabs, etc.) -- just
   tightens spacing/type so those layouts have more room to work with. ---- */
@media (max-width: 480px) {
  .wrap, .mod-wrap, .artist-wrap, .legal-wrap { padding-left: 16px; padding-right: 16px; }
  .title { font-size: 24px; }
  .display-name { font-size: 20px; }
  .section-title { font-size: 17px; }
  .banner, .banner-upload { height: 160px; }
  /* avatar-lg shrinks with .banner above -- head-row's overlap margin is
     tuned to the desktop 108px avatar (see its own comment), so it scales
     down with the same ratio here rather than overlapping too far up into
     (or past) the shorter mobile banner. */
  .avatar-lg { width: 84px; height: 84px; font-size: 30px; }
  .head-row { margin-top: -36px; }
}

/* ---------- Adult-content blur for grid-card thumbnails (artist.php's Works
   tab -- the one grid of cards where an Adult-rated series can legitimately
   appear at all, for its owner/moderator/a follower). Unlike .explicit-blur
   above, the filter goes directly on .cover-bg itself (the layer carrying
   the real cover image or gradient+monogram fallback), so the sibling
   .badge-mature "Adult" tag stays sharp on top of the blurred artwork. ---- */
.cover-bg.thumb-blur { filter: blur(20px); }
.cover > .explicit-reveal-btn { top: 50%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; font-size: 11px; padding: 7px 12px; }