/* =========================================================
   Livrea — design system premium FR
   Palette: crème / brun / ambre (inchangée)
   ========================================================= */

:root {
  --cream: #F5F0E8;
  --warm-white: #FDFAF5;
  --brown: #8B5E3C;
  --brown-dark: #6B4226;
  --amber: #D48B2E;
  --amber-light: #F0C060;
  --text: #2C2018;
  --text-muted: #7A6652;
  --border: #E8DFD0;
  --card-bg: #FFFFFF;
  --peach: #F5E6D3;
  --surface: #FDFAF5;
  --elev: #FFFFFF;
  --focus: #D48B2E;
  --success: #5A7A4A;
  --danger: #A04838;
  --shadow: 0 2px 16px rgba(100, 60, 20, 0.08);
  --shadow-hover: 0 10px 32px rgba(100, 60, 20, 0.14);
  --radius: 14px;
  --radius-sm: 8px;
  --nav-h: 68px;
  --font-display: 'Lora', Georgia, serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Boutons pleins : ne pas réutiliser --text (inversé en dark) */
  --btn-fill: #2C2018;
  --btn-fill-text: #FDFAF5;
  --btn-fill-hover: #6B4226;
  --btn-accent: #8B5E3C;
  --btn-accent-text: #FDFAF5;
  --btn-accent-hover: #6B4226;
}

html[data-theme="dark"] {
  --cream: #14110e;
  --warm-white: #1c1713;
  --brown: #d4a574;
  --brown-dark: #f0d5b0;
  --amber: #e0a040;
  --amber-light: #f0c060;
  --text: #f0e8dc;
  --text-muted: #a89888;
  --border: #3a3228;
  --card-bg: #1e1914;
  --peach: #2a221c;
  --surface: #1a1511;
  --elev: #241e18;
  --shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.5);
  --btn-fill: #f0e8dc;
  --btn-fill-text: #1a1511;
  --btn-fill-hover: #d4a574;
  --btn-accent: #e0a040;
  --btn-accent-text: #1a1511;
  --btn-accent-hover: #f0c060;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--cream);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}

html[data-theme="dark"] body {
  background: var(--cream);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--brown); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--brown-dark);
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 { color: var(--brown); }

img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.muted { color: var(--text-muted); }
.error { color: var(--danger); font-weight: 500; }

/* ---------- Nav ---------- */
.navBar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(16px, 3.5vw, 48px);
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid transparent;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  color: var(--text);
  line-height: 0;
}
.logo:hover { opacity: 0.92; }
.logoImg {
  display: block;
  height: 36px;
  width: auto;
  max-width: min(160px, 42vw);
  object-fit: contain;
}
.logoImg--footer {
  height: 44px;
  max-width: 180px;
}
.logoMark,
.logoText,
.logoIcon { display: none; }

.navFr {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--amber);
  flex-shrink: 0;
}

.navLinks {
  display: flex;
  align-items: center;
  gap: 2px;
}

.searchWrap { position: relative; }
.searchToggle {
  list-style: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.searchToggle::-webkit-details-marker { display: none; }
.searchToggle svg { display: block; }
.searchPanel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(320px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid #e6ddd0;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(44, 32, 24, 0.16);
  z-index: 90;
  font-family: var(--font-ui);
  overflow: hidden;
}
html[data-theme="dark"] .searchPanel {
  background: var(--elev);
  border-color: var(--border);
}
.searchPanelHead {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.searchPanelForm {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  align-items: center;
}
.searchPanelField {
  flex: 1;
  min-width: 0;
}
.searchPanelField input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 9px 11px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  outline: none;
}
.searchPanelField input:focus {
  border-color: var(--brown);
  box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.12);
}
.searchPanelBtn {
  flex-shrink: 0;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  background: var(--btn-fill);
  color: var(--btn-fill-text);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.searchPanelBtn:hover { background: var(--btn-fill-hover); }
@media (max-width: 720px) {
  .searchPanel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(var(--nav-h) + 8px);
    width: auto;
  }
}

.navRight {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.navLink, .navIconBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: none;
  transition: background 0.15s, color 0.15s;
}
.navLink:hover, .navLink:focus-visible, .navIconBtn:hover {
  background: rgba(139, 94, 60, 0.08);
  color: var(--brown-dark);
}

.navCta, .navWrite {
  display: inline-flex !important;
  align-items: center;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  background: var(--btn-fill) !important;
  color: var(--btn-fill-text) !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  margin-left: 4px;
}
.navCta:hover, .navWrite:hover {
  background: var(--btn-fill-hover) !important;
  color: var(--btn-fill-text) !important;
  transform: none;
}

/* Write dropdown */
.writeMenu {
  position: relative;
  margin-left: 4px;
}
.writeMenuTrigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.writeMenuTrigger::-webkit-details-marker { display: none; }
.writeMenuTrigger:hover { background: rgba(139, 94, 60, 0.08); }
.writeChevron { transition: transform 0.2s var(--ease); opacity: 0.7; }
.writeMenu[open] .writeChevron { transform: rotate(180deg); }
.writeDrop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(44, 32, 24, 0.16);
  padding: 8px;
  z-index: 60;
}
html[data-theme="dark"] .writeDrop { background: var(--elev); }
.writeDropItem {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  text-align: left;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.writeDropItem:hover {
  background: var(--peach);
  color: var(--brown-dark);
}
.writeDropItem--primary {
  align-items: center;
  margin-bottom: 2px;
}
.writeDropItem--primary strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
}
.writeDropItem--primary small {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}
.writeDropIcon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--amber) 22%, var(--warm-white));
  color: var(--brown-dark);
  display: grid;
  place-items: center;
}
.writeDropRule {
  height: 1px;
  background: var(--border);
  margin: 6px 8px;
}

.notifWrap { position: relative; }
.notifLink {
  list-style: none;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.notifLink::-webkit-details-marker { display: none; }
.notifBell { display: block; }
.notifDot {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--amber);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.notifPanel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(360px, calc(100vw - 24px));
  max-height: min(70vh, 420px);
  overflow: auto;
  background: #fff;
  border: 1px solid #e6ddd0;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(44, 32, 24, 0.16);
  z-index: 90;
  font-family: var(--font-ui);
}
html[data-theme="dark"] .notifPanel {
  background: var(--elev);
  border-color: var(--border);
}
.notifPanelHead {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: inherit;
  font-size: 0.92rem;
}
.notifEmpty {
  margin: 0;
  padding: 20px 16px;
  font-size: 0.9rem;
}
.notifPanelList {
  margin: 0;
  padding: 6px 0;
  display: grid;
}
.notifPanelItem {
  display: grid;
  gap: 4px;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
  border: none;
  background: transparent;
  border-left: 3px solid transparent;
  transition: background 0.12s;
}
.notifPanelItem:hover {
  background: rgba(139, 94, 60, 0.06);
}
.notifPanelItem.is-unread {
  border-left-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 8%, transparent);
}
.notifPanelItem strong {
  font-size: 0.88rem;
  font-weight: 700;
}
.notifPanelItem > span {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.notifPanelItem time {
  font-size: 0.72rem;
}
@media (max-width: 720px) {
  .notifPanel {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: min(55vh, 380px);
  }
}


.avatarWrap { position: relative; margin-left: 2px; }
.avatarTrigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 180px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text);
  user-select: none;
  transition: background 0.15s;
}
.avatarTrigger:hover,
.avatarWrap[open] .avatarTrigger {
  background: rgba(139, 94, 60, 0.08);
}
.avatarTrigger--guest {
  padding: 4px;
  max-width: none;
}
.avatarTrigger::-webkit-details-marker { display: none; }
.avatarBubble {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--amber-light), var(--brown));
  color: #fff;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 8px rgba(139, 94, 60, 0.22);
  overflow: hidden;
}
.avatarBubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatarTrigger--guest .avatarBubble {
  background: var(--peach);
  color: var(--brown);
  box-shadow: none;
  border: 1px solid var(--border);
}
.avatarName {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.avatarChevron {
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.2s var(--ease);
}
.avatarWrap[open] .avatarChevron { transform: rotate(180deg); }

.avatarMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 220px;
  background: #fff;
  border: 1px solid #e6ddd0;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(44, 32, 24, 0.16);
  padding: 6px 0;
  z-index: 80;
  font-family: var(--font-ui);
}
html[data-theme="dark"] .avatarMenu {
  background: var(--elev);
  border-color: var(--border);
}
.avatarMenu::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 22px;
  width: 10px;
  height: 10px;
  background: inherit;
  border-left: 1px solid #e6ddd0;
  border-top: 1px solid #e6ddd0;
  transform: rotate(45deg);
}
html[data-theme="dark"] .avatarMenu::before { border-color: var(--border); }

.avatarMenuItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 18px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.avatarMenuItem:hover,
.avatarMenuItem:focus-visible {
  background: #f3ebe0;
  color: var(--brown-dark);
}
html[data-theme="dark"] .avatarMenuItem:hover,
html[data-theme="dark"] .avatarMenuItem:focus-visible {
  background: rgba(212, 139, 46, 0.12);
}
.avatarMenuItem--muted {
  color: var(--text-muted);
  cursor: default;
  font-weight: 500;
}
.avatarMenuItem--muted:hover {
  background: transparent;
  color: var(--text-muted);
}
.avatarMenuItem--danger:hover {
  background: rgba(139, 58, 44, 0.08);
  color: #8B3A2C;
}
.avatarMenuRule {
  height: 1px;
  margin: 6px 0;
  background: #ebe3d6;
  border: none;
}
html[data-theme="dark"] .avatarMenuRule { background: var(--border); }
.avatarMenuBadge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--amber);
  color: #2C2018;
  font-size: 0.68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 760px) {
  .avatarName { display: none; }
  .avatarTrigger { padding: 4px; max-width: none; }
  .avatarMenu { right: -4px; min-width: 200px; }
  .avatarMenu::before { right: 14px; }
}

/* ---------- Flash / banners ---------- */
.flashBanner {
  margin: 12px clamp(16px, 4vw, 40px) 0;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 500;
}
.flashError {
  background: color-mix(in srgb, var(--danger) 12%, var(--warm-white));
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  color: var(--danger);
}

/* ---------- Layout ---------- */
.pageContainer {
  width: min(1080px, calc(100% - 32px));
  margin: 28px auto 80px;
}
.readerPage { width: min(1100px, calc(100% - 24px)); }
.main {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto 96px;
  padding-top: 8px;
}

.sectionHeader {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.8vw, 2rem);
  margin: 0;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sectionRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 36px 0 14px;
}
.seeAll {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.seeAll:hover { color: var(--brown); }

/* ---------- Hero (home) — Wattpad-like split ---------- */
.hero {
  position: relative;
  background: var(--cream);
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.heroInner {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  min-height: min(72vh, 640px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 5vh, 56px) 0 clamp(40px, 6vh, 72px);
}
.heroCopy {
  position: relative;
  z-index: 2;
  animation: heroTextIn 0.85s var(--ease) both;
}
@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.heroKicker {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}
.heroHeadline {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.6vw, 4.15rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--text);
  margin: 0 0 18px;
}
.heroLead {
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 28em;
  margin: 0 0 28px;
  font-weight: 500;
}
.heroButtons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}
.btnPrimary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--btn-fill);
  color: var(--btn-fill-text);
  font-weight: 700;
  font-size: 1rem;
  border: none;
  transition: transform 0.2s var(--ease), background 0.2s;
}
.btnPrimary:hover {
  background: var(--btn-fill-hover);
  color: var(--btn-fill-text);
  transform: translateY(-2px);
}
.btnText {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.btnText strong { color: var(--text); font-weight: 700; }
.btnText:hover { color: var(--brown); }

.heroArt {
  position: relative;
  min-height: 420px;
  animation: heroArtIn 1s var(--ease) 0.12s both;
}
@keyframes heroArtIn {
  from { opacity: 0; transform: translateX(24px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.heroBlob {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.heroScene {
  width: min(100%, 520px);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(139, 94, 60, 0.28));
  border-radius: 8px;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}
.heroArt, .heroBlob {
  user-select: none;
  -webkit-user-select: none;
}

.proofCard {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: min(240px, 70%);
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(44, 32, 24, 0.14);
  border: 1px solid rgba(232, 223, 208, 0.9);
}
html[data-theme="dark"] .proofCard { background: var(--elev); }
.proofCard--a {
  top: 12%;
  left: -4%;
  animation: proofFloat 5s ease-in-out infinite;
}
.proofCard--b {
  bottom: 14%;
  right: -2%;
  animation: proofFloat 5.5s ease-in-out 0.8s infinite;
}
@keyframes proofFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.proofAv {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.proofUser {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.proofText {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.proofMeta {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--amber);
}

.btnExplore, .btnPublish, .btnSecondary, button[type="submit"], .likeBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s, background 0.2s;
}
.btnExplore {
  background: var(--btn-fill);
  color: var(--btn-fill-text);
}
.btnExplore:hover {
  background: var(--btn-fill-hover);
  color: var(--btn-fill-text);
  transform: translateY(-2px);
}
.btnPublish {
  background: transparent;
  color: var(--brown-dark);
  border: 1.5px solid var(--border);
}
.btnPublish:hover {
  background: var(--peach);
  color: var(--brown-dark);
}
.btnSecondary, .pageContainer .btnSecondary {
  background: var(--peach);
  color: var(--brown-dark);
  border: 1px solid var(--border);
}
.btnSecondary:hover { background: color-mix(in srgb, var(--amber) 20%, var(--peach)); }
button[type="submit"], .likeBtn {
  background: var(--btn-accent);
  color: var(--btn-accent-text);
}
button[type="submit"]:hover, .likeBtn:hover {
  background: var(--btn-accent-hover);
  color: var(--btn-accent-text);
}
.likeBtn.liked { background: var(--amber); color: var(--btn-accent-text); }

/* ---------- Rails & ranking (Webtoon-like) ---------- */
.railSection { margin-bottom: 8px; }
.sortTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.sortTab {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #ebe4d8;
  color: var(--text);
}
html[data-theme="dark"] .sortTab { background: var(--peach); }
.sortTab.is-active {
  background: var(--btn-fill);
  color: var(--btn-fill-text);
}
.sortTab:hover { color: inherit; }

.coverRail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 172px);
  gap: 16px;
  overflow-x: auto;
  padding: 4px 4px 18px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.railCard {
  scroll-snap-align: start;
  display: grid;
  gap: 8px;
  color: inherit;
  transition: transform 0.3s var(--ease);
}
.railCard:hover {
  transform: translateY(-5px);
  color: inherit;
}
.railCover {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--peach);
  box-shadow: 0 4px 18px rgba(44, 32, 24, 0.12);
}
.railCover .coverArt,
.railCover .coverImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.railRank {
  position: absolute;
  left: 8px;
  bottom: 4px;
  font-family: var(--font-ui);
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.8);
  letter-spacing: -0.06em;
}
.bookMeta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---------- Grids / cards ---------- */
.trendingGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 18px 14px;
  margin-top: 18px;
}
@media (min-width: 900px) {
  .trendingGrid { grid-template-columns: repeat(6, 1fr); gap: 22px 16px; }
}

.bookCard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease);
}
.bookCard:hover {
  transform: translateY(-5px);
  color: inherit;
}
.bookCoverWrap {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(44, 32, 24, 0.1);
}
.bookCard .coverArt,
.bookCard .coverImg,
.bookCoverWrap .coverArt,
.bookCoverWrap .coverImg {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0;
  background: var(--peach);
  display: block;
}
.coverBadge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--amber);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
}
.bookInfo { display: grid; gap: 2px; }
.bookTitle {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.railCard .bookTitle { font-size: 0.92rem; }
.bookAuthor { font-size: 0.78rem; color: var(--text-muted); }
.bookTags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.authorRail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
}
.authorChip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
html[data-theme="dark"] .authorChip { background: var(--elev); }
.authorChip strong { display: block; font-size: 0.9rem; }
.authorChip .muted { font-size: 0.75rem; }
.authorAv {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--amber), var(--brown));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.storyTag, .ratingBadge, .userBadge, .tag, .aiBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--peach);
  color: var(--brown);
  border: 1px solid var(--border);
}
.aiBadge {
  background: color-mix(in srgb, #3d4f6f 18%, var(--cream));
  color: #243248;
  border-color: color-mix(in srgb, #3d4f6f 42%, var(--border));
  vertical-align: middle;
}
html[data-theme="dark"] .aiBadge {
  background: color-mix(in srgb, #9eb4d8 22%, var(--elev));
  color: #e8eef8;
  border-color: color-mix(in srgb, #9eb4d8 40%, var(--border));
}
.userBadge--mod, .userBadge--dev, .userBadge--beta, .userBadge--earn {
  font-weight: 800;
}
.searchToggle:focus-visible,
.notifLink:focus-visible,
.themeToggle:focus-visible,
.searchLiveItem:focus-visible,
.notifPanelItem:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.searchLiveResults {
  border-top: 1px solid var(--border);
  max-height: 280px;
  overflow: auto;
  padding: 6px 0;
}
.searchLiveResults[hidden] { display: none !important; }
.searchLiveLabel {
  margin: 8px 14px 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.searchLiveItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  text-decoration: none;
  color: var(--text);
}
.searchLiveItem:hover { background: rgba(139, 94, 60, 0.08); }
.searchLiveItem strong { display: block; font-size: 0.88rem; }
.searchLiveItem small { display: block; font-size: 0.75rem; }
.searchLiveThumb {
  width: 36px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--peach);
}
.searchLiveThumb .coverArt,
.searchLiveThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.searchLiveEmpty { margin: 0; padding: 12px 14px; font-size: 0.85rem; }
.continuePct {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(44, 32, 24, 0.78);
  color: #FDFAF5;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}
.continueCard .railCover { position: relative; }
.continueCard .miniProgress { margin-top: 6px; }
.sectionMore {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brown);
}
.charteOverlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 20px;
}
.charteOverlay[hidden] { display: none !important; }
.charteBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 20, 14, 0.55);
  backdrop-filter: blur(6px);
}
.charteModal {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  background: #fff;
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 24px 60px rgba(28, 20, 14, 0.28);
}
html[data-theme="dark"] .charteModal { background: var(--elev); border: 1px solid var(--border); }
.charteList { display: grid; gap: 14px; margin: 16px 0; padding-left: 1.2em; line-height: 1.45; }
.charteList--modal { font-size: 0.92rem; }
.clubHead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 20px;
}
.clubSection { margin: 22px 0; }
.clubMemberList {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 8px 0 0;
}
.clubMemberList li { display: inline-flex; align-items: center; gap: 6px; }
.clubRoleBadge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--peach);
  color: var(--brown-dark);
  border: 1px solid var(--border);
}
.storyCoHelp { margin-bottom: 12px; font-size: 0.9rem; line-height: 1.45; }
.storyCoItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.storyCoRole {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}
.aiNotice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 18px;
  font-size: 0.88rem;
  line-height: 1.4;
}
.aiDisclose {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--peach) 55%, transparent);
}
.aiDisclose legend {
  padding: 0 6px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brown);
}
.aiDiscloseHelp {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 1.45;
}
.aiDiscloseCheck {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.35;
}
.aiDiscloseCheck input {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--brown);
}
.aiDiscloseCheck--chapter {
  margin: 10px 16px 4px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.aiDiscloseCheck small { font-weight: 500; }
.userBadge--earn {
  background: color-mix(in srgb, var(--amber) 18%, var(--cream));
  color: var(--brown);
  border-color: color-mix(in srgb, var(--amber) 35%, var(--border));
}
.userBadge--mod {
  background: color-mix(in srgb, #2f6b4f 16%, var(--cream));
  color: #1f4a36;
  border-color: color-mix(in srgb, #2f6b4f 40%, var(--border));
}
.userBadge--dev {
  background: color-mix(in srgb, #3a5a8c 16%, var(--cream));
  color: #243a5c;
  border-color: color-mix(in srgb, #3a5a8c 40%, var(--border));
}
.userBadge--beta {
  background: color-mix(in srgb, var(--amber) 28%, var(--cream));
  color: #6b3d12;
  border-color: color-mix(in srgb, var(--amber) 50%, var(--border));
}
html[data-theme="dark"] .userBadge--mod {
  background: color-mix(in srgb, #2f6b4f 28%, var(--elev));
  color: #b8e0c8;
}
html[data-theme="dark"] .userBadge--dev {
  background: color-mix(in srgb, #3a5a8c 28%, var(--elev));
  color: #b8c8e8;
}
html[data-theme="dark"] .userBadge--beta {
  background: color-mix(in srgb, var(--amber) 24%, var(--elev));
  color: #f0c898;
}
.tagDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.tagFantasy { color: #5A6B8A; background: color-mix(in srgb, #5A6B8A 12%, var(--warm-white)); }
.tagRomance { color: #8A5A6A; background: color-mix(in srgb, #8A5A6A 12%, var(--warm-white)); }
.tagScifi { color: #3A7A7A; background: color-mix(in srgb, #3A7A7A 12%, var(--warm-white)); }
.tagAdventure { color: var(--brown); }
.rating12 { background: color-mix(in srgb, #4A7AB0 15%, var(--warm-white)); color: #3A5A80; }
.rating16 { background: color-mix(in srgb, var(--amber) 18%, var(--warm-white)); color: #8A5A18; }
.rating18 { background: color-mix(in srgb, var(--danger) 14%, var(--warm-white)); color: var(--danger); }
.ratingAll { color: var(--text-muted); }

.cardReveal {
  animation: fadeUp 0.65s var(--ease) both;
  animation-delay: var(--delay, 0s);
}
.cardReveal.revealPending {
  opacity: 0;
  transform: translateY(18px);
  animation: none;
}
.cardReveal.revealIn {
  animation: fadeUp 0.65s var(--ease) both;
  animation-delay: var(--delay, 0s);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Browse ---------- */
.browseSection { margin-top: 8px; }
.categoryChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.chip {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  background: #ebe4d8;
  border: none;
  color: var(--text);
  transition: background 0.2s, color 0.2s;
}
html[data-theme="dark"] .chip { background: var(--peach); }
.chip:hover { background: #ddd4c4; color: var(--text); }
.chipActive {
  background: var(--btn-fill);
  color: var(--btn-fill-text);
}
.chipActive:hover { color: var(--btn-fill-text); background: var(--btn-fill-hover); }
.tagsRow .chip {
  background: transparent;
  border: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-muted);
}
.tagsRow .chipActive {
  background: var(--peach);
  border-color: var(--brown);
  color: var(--brown-dark);
}

.filterRow {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 12px 0 8px;
}
.filterRow label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.filterRow select {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--elev);
}

.simpleList {
  list-style: none;
  display: grid;
  gap: 10px;
}
.simpleList li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.simpleList a {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brown-dark);
}
.simpleList a:hover { color: var(--amber); }

.monthPodium {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}
.monthItem {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
html[data-theme="dark"] .monthItem { background: var(--elev); }
.monthItem:hover {
  border-color: color-mix(in srgb, var(--amber) 50%, var(--border));
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  color: inherit;
}
.monthRank {
  font-family: var(--font-ui);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.05em;
  line-height: 1;
}
.monthBody {
  display: grid;
  gap: 2px;
}
.monthBody strong {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
}
.monthVotes {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--amber);
}

/* ---------- Forms / cards ---------- */
.card, .formCard, .blockCard {
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.formCard label, .card label, .pageContainer label {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
}
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], input[type="datetime-local"], input[type="file"],
textarea, select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(212, 139, 46, 0.15);
}
textarea { resize: vertical; min-height: 100px; }
.checkLabel {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  font-weight: 500 !important;
}
.inlineForm { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.profileGrid, .editorGrid {
  display: grid;
  gap: 20px;
}
@media (min-width: 800px) {
  .profileGrid { grid-template-columns: 1fr 1fr; }
  .editorGrid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Story ---------- */
.storyHero {
  display: grid;
  gap: 32px;
  margin-bottom: 40px;
  padding-bottom: 8px;
}
@media (min-width: 720px) {
  .storyHero {
    grid-template-columns: minmax(200px, 260px) 1fr;
    align-items: start;
  }
}
.storyCover {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(44, 32, 24, 0.18);
}
.storyCover .coverArt,
.storyCover .coverImg {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0;
}
.storyMeta h1 {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  letter-spacing: -0.035em;
  margin: 12px 0 8px;
  color: var(--text);
}
.storyDesc {
  margin: 16px 0 20px;
  line-height: 1.7;
  color: var(--text);
  max-width: 42em;
  font-size: 1.02rem;
}
.storyActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}

.chapterList {
  list-style: none;
  display: grid;
  gap: 4px;
  margin-top: 12px;
}
.chapterList li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.chapterList li a:hover {
  background: var(--elev);
  border-color: var(--border);
}
.chapterNum {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--amber);
  min-width: 1.5em;
}

/* ---------- Reader ---------- */
.chapterProgress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 250;
  background: transparent;
}
.chapterProgress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--brown));
  transition: width 0.2s;
}

.bookCrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.bookCrumb a { font-weight: 600; color: var(--brown); }
.chapterPos { margin-left: auto; }

.bookReader {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 40px;
}
@media (max-width: 920px) {
  .bookReader { grid-template-columns: 1fr; }
}

.readerPanel {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.readerPanel.is-collapsed { width: auto; padding: 10px; }
.readerPanel.is-collapsed .readerPanelBody,
.readerPanel.is-collapsed .readerPanelTitle { display: none; }
.readerPanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.readerPanelTitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--brown-dark);
}
.readerControls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.readerBtn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--brown);
}
.readerBtn:hover, .readerBtn.active {
  background: var(--peach);
  border-color: var(--brown);
}
.readerBtn.primary {
  background: var(--btn-accent);
  color: var(--btn-accent-text);
  border-color: var(--btn-accent);
  width: 100%;
}
.readerTts { display: grid; gap: 6px; }
.ttsLabel {
  display: grid;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ttsLabel select, .ttsLabel input[type="range"] { width: 100%; }

.bookColumn {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 48px) clamp(22px, 4vw, 56px);
  box-shadow: var(--shadow);
  min-height: 50vh;
}
.bookColumn .bookTitle {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.chapterBody {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.85;
  color: var(--text);
}
.chapterBody .focusPara { margin-bottom: 1.15em; }
.mdH { margin: 1.4em 0 0.6em; color: var(--brown-dark); }
.sceneBreak {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.2em auto;
  width: 35%;
}
.chapterImage img {
  max-width: 100%;
  margin: 1.2rem auto;
  border-radius: var(--radius-sm);
}

.bookColumn.is-night {
  background: #1a1511;
  color: #ebe4d8;
  border-color: #3a3228;
}
.bookColumn.is-night .bookTitle { color: var(--amber-light); }
.bookColumn.is-contrast {
  background: #120e0a;
  color: #F5F0E8;
}
.bookColumn.is-dyslexic,
.bookColumn.is-dyslexic .focusPara,
.bookColumn.is-dyslexic .bookTitle {
  font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif;
}
.bookColumn.is-focus .focusPara.is-dimmed { opacity: 0.28; }
.bookColumn.is-focus .focusPara.is-focused {
  background: rgba(240, 192, 96, 0.16);
  outline: 1px solid rgba(212, 139, 46, 0.3);
  border-radius: 4px;
  padding: 4px 6px;
}

.chapterNav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.chapterEnter { animation: fadeUp 0.45s var(--ease) both; }
.chapterLeave { opacity: 0; transform: translateY(-12px); transition: 0.22s; }

.bookReader:fullscreen,
.bookReader:-webkit-full-screen {
  background: var(--cream);
  padding: 28px;
  overflow: auto;
}
body.reader-fullscreen .navBar,
body.reader-fullscreen .mobileNav,
body.reader-fullscreen .footer,
body.reader-fullscreen .breadcrumb,
body.reader-fullscreen .socialBar,
body.reader-fullscreen .comments { display: none !important; }
.readerFsBtn { margin-left: 4px; }

.socialBar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin: 24px 0;
}

/* ---------- Comments ---------- */
.comments { margin: 40px 0 60px; }
.commentForm, .replyForm { margin-bottom: 20px; max-width: 520px; }
.commentList { list-style: none; display: grid; gap: 16px; }
.commentItem {
  padding: 16px;
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.commentHead {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 0.85rem;
}
.commentHead time { color: var(--text-muted); }
.commentActions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.commentReplies {
  list-style: none;
  margin: 14px 0 0 12px;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--border);
  display: grid;
  gap: 10px;
}
.linkDanger {
  background: none;
  border: none;
  color: var(--danger);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0;
}
.reportWrap summary, .replyWrap summary {
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.85rem;
}

/* ---------- Author / stats ---------- */
.authorHero {
  display: grid;
  gap: 28px;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 800px) {
  .authorHero { grid-template-columns: 1.4fr 1fr; align-items: start; }
}
.statsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.statCard {
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: 4px;
}
.statCard strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--brown);
}
.statCard span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.profileStats { margin-bottom: 24px; }

/* ---------- Profile / author pages ---------- */
.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.profilePage {
  width: min(1100px, calc(100% - 24px));
  margin: 0 auto 72px;
}
.profileHero {
  margin: 0 0 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .profileHero { background: var(--elev); }
.profileBanner {
  position: relative;
  height: clamp(140px, 28vw, 220px);
  background:
    linear-gradient(135deg, rgba(212, 139, 46, 0.35), rgba(139, 94, 60, 0.55)),
    radial-gradient(ellipse at 20% 30%, rgba(240, 192, 96, 0.45), transparent 55%),
    #c4a484;
  overflow: hidden;
}
.profileBannerImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profileBannerShade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44, 32, 24, 0.35), transparent 55%);
  pointer-events: none;
}
.profileBanner--empty .profileBannerShade {
  background: linear-gradient(to top, rgba(44, 32, 24, 0.2), transparent 60%);
}
.profileMediaBtn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(44, 32, 24, 0.72);
  color: #FDFAF5;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.profileMediaBtn input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.profileHeroInner {
  display: grid;
  gap: 20px;
  padding: 0 22px 22px;
}
.profileIdentity {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: end;
  margin-top: -48px;
  position: relative;
  z-index: 2;
}
.profileAvatar,
.userAvatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 8px 24px rgba(44, 32, 24, 0.18);
  background: linear-gradient(145deg, var(--amber-light), var(--brown));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 2.2rem;
  font-weight: 800;
  overflow: hidden;
  flex-shrink: 0;
}
html[data-theme="dark"] .profileAvatar,
html[data-theme="dark"] .userAvatar { border-color: var(--elev); }
.profileAvatar img,
.userAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profileAvatarEdit {
  position: relative;
  display: block;
  cursor: pointer;
  width: 112px;
}
.profileAvatarEdit input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.profileAvatarPencil {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #3d6ea8;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  pointer-events: none;
}
.profileIdentityText { min-width: 0; padding-top: 52px; }
.profileHandle {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.profileName {
  margin: 2px 0 8px;
  font-family: var(--font-ui);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
.profileBio {
  margin: 0 0 12px;
  color: var(--text);
  line-height: 1.55;
  max-width: 42em;
}
.profileBioField textarea {
  width: 100%;
  min-height: 84px;
  margin-bottom: 12px;
  font-weight: 500;
}
.profileHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.profileStatStrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-top: 4px;
}
.profileStatStrip div {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  display: grid;
  gap: 2px;
}
html[data-theme="dark"] .profileStatStrip div { background: var(--cream); }
.profileStatStrip strong {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--brown-dark);
}
.profileStatStrip span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.profileMain { display: grid; gap: 28px; }
.profileSection { display: grid; gap: 12px; }
.profileSeriesList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.profileSeriesList a {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
html[data-theme="dark"] .profileSeriesList a { background: var(--elev); }
.profileSeriesList a:hover { border-color: var(--amber); color: var(--brown-dark); }

.profileTabs {
  display: flex;
  gap: 4px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.profileTab {
  flex-shrink: 0;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-muted);
  text-decoration: none;
  box-shadow: inset 0 -3px 0 transparent;
}
.profileTab.is-active {
  color: var(--brown-dark);
  box-shadow: inset 0 -3px 0 var(--amber);
}
.profileSettingsGrid {
  display: grid;
  gap: 16px;
}
@media (min-width: 800px) {
  .profileSettingsGrid { grid-template-columns: 1fr 1fr; }
}
.profileCard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  align-content: start;
}
html[data-theme="dark"] .profileCard { background: var(--elev); }
.profileCard h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 800;
}
.profileForm { display: grid; gap: 12px; }
.profileLinkGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.profileLinkGrid a {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--cream);
  border: 1px solid var(--border);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.profileLinkGrid a:hover { border-color: var(--amber); color: var(--brown-dark); }
.profileMetaLine { margin: 8px 0 0; }
.profileInlineLink { font-weight: 700; color: var(--brown); }
.profileAlert { margin-bottom: 20px; }
.profileDanger { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }

@media (max-width: 700px) {
  .profileIdentity { grid-template-columns: 1fr; justify-items: start; margin-top: -40px; }
  .profileIdentityText { padding-top: 8px; }
  .profileAvatar, .profileAvatarEdit, .userAvatar { width: 88px; height: 88px; font-size: 1.7rem; }
  .profileAvatarEdit { width: 88px; }
  .profileStatStrip { grid-template-columns: repeat(2, 1fr); }
  .profileMediaBtn span { font-size: 0.72rem; }
}
.badgeRow { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

/* ---------- Auth pages ---------- */
.authCard, .authShell {
  width: min(440px, 100%);
  margin: 36px auto 80px;
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
}
.authCard h1, .authShell h1 {
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  margin-bottom: 8px;
}
.authLead, .authShell .lead {
  color: var(--text-muted);
  margin-bottom: 22px;
  line-height: 1.5;
}
.authFr {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}
.authForm { display: grid; gap: 4px; margin: 16px 0; }
.authForm button[type="submit"] { margin-top: 8px; width: 100%; }
.authLegal { margin-top: 20px; font-size: 0.8rem; line-height: 1.45; }
.oauthStack { display: grid; gap: 10px; margin-bottom: 18px; }
.btnGoogle, .btnDiscord {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.btnGoogle:hover, .btnDiscord:hover {
  background: var(--peach);
  border-color: var(--brown);
  color: var(--brown-dark);
  transform: translateY(-1px);
}
.btnDiscord { color: #5865F2; }
.authDivider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}
.authDivider::before, .authDivider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.authDivider span { white-space: nowrap; }
.pageContainer > h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin-bottom: 8px;
}
.pageContainer > .muted:first-of-type,
.pageLead {
  margin-bottom: 24px;
  max-width: 40em;
  line-height: 1.55;
}
.editorWorkspace h1 {
  margin-bottom: 6px;
}
.editorWorkspace .pageLead { margin-bottom: 28px; }

.pageContainer .btnExplore,
.chapterNav .btnExplore {
  background: var(--btn-accent);
  color: var(--btn-accent-text);
  box-shadow: var(--shadow);
}
.pageContainer .btnExplore:hover,
.chapterNav .btnExplore:hover {
  background: var(--btn-accent-hover);
  color: var(--btn-accent-text);
  transform: translateY(-1px);
}

/* ---------- Notifs ---------- */
.notifList { list-style: none; display: grid; gap: 10px; }
.notifItem {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--elev);
}
.notifItem.unread { border-left: 3px solid var(--amber); }

/* ---------- Editor ---------- */
.mdToolbar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.editorActions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.autosaveStatus { font-size: 0.8rem; margin: 4px 0 8px; }

/* ---------- Footer ---------- */
.footer {
  margin-top: 64px;
  padding: 48px clamp(20px, 4vw, 48px) 100px;
  border-top: 1px solid var(--border);
  background: #efe8dc;
  display: grid;
  gap: 14px;
  justify-items: start;
}
html[data-theme="dark"] .footer { background: var(--warm-white); }
.footerLogo .logoImg { height: 48px; }
.footerFr {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
}
.footerLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.footerLink {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}
.footerLink:hover { color: var(--brown); }
.footerNote {
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 36em;
  line-height: 1.5;
}

/* ---------- Mobile nav ---------- */
.mobileNav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  background: color-mix(in srgb, var(--warm-white) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}
.mobileNavItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: 12px;
}
.mobileNavItem span { font-size: 1.1rem; line-height: 1; }
.mobileNavItem:hover, .mobileNavItem:focus-visible,
.mobileNavItem.is-active {
  color: var(--brown);
  background: var(--peach);
}

body.night-active .bookColumn.is-night {
  background: #14110e;
}

@media (max-width: 640px) {
  .bookReader { gap: 16px; }
  .readerPanel {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .readerPanelBody { width: 100%; }
  .bookColumn {
    padding: 22px 18px 32px;
  }
  .authCard { padding: 24px 18px; margin-top: 20px; }
}

.pager {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 32px 0;
  flex-wrap: wrap;
}
.pager[hidden] {
  display: none !important;
}

.miniProgress {
  height: 4px;
  background: var(--border);
  border-radius: 99px;
  margin-top: 8px;
  overflow: hidden;
}
.miniProgress span {
  display: block;
  height: 100%;
  background: var(--amber);
}

.hourlyBars {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
  align-items: end;
  height: 80px;
  margin-top: 12px;
}
.hourlyBars span {
  display: block;
  background: var(--amber);
  min-height: 2px;
  border-radius: 2px 2px 0 0;
}

#themeToggle,
.themeToggle {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.themeToggle:hover,
.themeToggle:focus-visible {
  background: rgba(139, 94, 60, 0.08);
  color: var(--brown-dark);
}
.themeToggleTrack {
  position: relative;
  width: 18px;
  height: 18px;
  display: block;
}
.themeToggleIcon {
  position: absolute;
  inset: 0;
  transition: opacity 0.22s ease, transform 0.28s ease;
}
.themeToggleIcon--sun {
  opacity: 0;
  transform: rotate(-45deg) scale(0.7);
}
.themeToggleIcon--moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
html[data-theme="dark"] .themeToggleIcon--sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
html[data-theme="dark"] .themeToggleIcon--moon {
  opacity: 0;
  transform: rotate(45deg) scale(0.7);
}
@media (prefers-reduced-motion: reduce) {
  .themeToggleIcon { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .heroInner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 28px;
    padding-bottom: 48px;
  }
  .heroArt {
    min-height: 340px;
    order: -1;
  }
  .heroScene { width: min(100%, 400px); }
  .proofCard--a { left: 0; }
  .proofCard--b { right: 0; }
}

@media (max-width: 760px) {
  body { padding-bottom: 72px; }
  .mobileNav { display: grid; }
  .hideMobile { display: none !important; }
  .navFr { display: none; }
  .heroHeadline { font-size: clamp(2rem, 9vw, 2.8rem); }
  .heroArt { min-height: 280px; }
  .proofCard { width: min(200px, 62%); padding: 10px; }
  .proofText { font-size: 0.72rem; }
  .trendingGrid { grid-template-columns: repeat(3, 1fr); gap: 12px 10px; }
  .coverRail { grid-auto-columns: minmax(120px, 140px); gap: 12px; }
  .railRank { font-size: 2rem; }
  .main { width: calc(100% - 28px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Auth modal ---------- */
body.auth-locked { overflow: hidden; }
.authOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}
.authOverlay[hidden] { display: none !important; }
.authBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 20, 14, 0.55);
  backdrop-filter: blur(6px);
}
.authModal {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: min(92vh, 720px);
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  padding: 36px 28px 28px;
  box-shadow: 0 24px 64px rgba(20, 12, 8, 0.28);
}
html[data-theme="dark"] .authModal { background: var(--elev); border: 1px solid var(--border); }
.authClose {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: #9a8c7c;
  cursor: pointer;
  border-radius: 8px;
}
.authClose:hover { background: var(--peach); color: var(--text); }
.authModalTitle {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.45rem;
  text-align: center;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 8px;
}
.authModalLead {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0 0 22px;
}
.authModalError { text-align: center; margin-bottom: 12px; }
.authProviders { display: grid; gap: 10px; }
.authProviderBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #e4ddd2;
  border-radius: 8px;
  background: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
html[data-theme="dark"] .authProviderBtn {
  background: var(--surface);
  border-color: var(--border);
}
.authProviderBtn:hover {
  background: #f7f2ea;
  border-color: #d4c8b6;
  color: var(--text);
}
.authProviderIcon {
  display: grid;
  place-items: center;
  width: 22px;
  flex-shrink: 0;
}
.authProviderIcon--discord { color: #5865F2; }
.authEmailForm {
  display: grid;
  gap: 4px;
  margin-top: 16px;
}
.authEmailForm .authSubmit { width: 100%; margin-top: 8px; }
.authSwitchLine {
  text-align: center;
  margin-top: 18px;
  font-size: 0.9rem;
}
.authTextBtn {
  border: none;
  background: none;
  color: var(--brown);
  font-weight: 700;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.authLegal {
  text-align: center;
  font-size: 0.75rem;
  margin-top: 14px;
  line-height: 1.4;
}
button.avatarMenuItem {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-ui);
}

/* ---------- Logged-in feed / selections ---------- */
.main--feed { padding-top: 20px; }
.selectSection { margin-bottom: 36px; }
.selectEyebrow {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  margin: 8px 0 0;
}
.selectSection .sectionRow { margin-top: 4px; }
.railWrap {
  position: relative;
}
.railNext {
  position: absolute;
  right: 8px;
  top: 38%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 6px 18px rgba(44, 32, 24, 0.14);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
}
.railNext:hover { background: var(--peach); }
html[data-theme="dark"] .railNext { background: var(--elev); }

.masonryGrid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  grid-template-rows: 180px 180px;
  gap: 12px;
  margin-top: 8px;
}
.masonryGrid--n2 {
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 200px 200px;
}
.masonryGrid--n2 .masonryCard--0 { grid-row: 1 / 3; grid-column: 1; }
.masonryGrid--n2 .masonryCard--1 { grid-column: 2; grid-row: 1 / 3; }
.masonryGrid--n3 {
  grid-template-columns: 1.4fr 1fr 1fr;
}
.masonryGrid--n3 .masonryCard--0 { grid-row: 1 / 3; }
.masonryGrid--n3 .masonryCard--1 { grid-column: 2; }
.masonryGrid--n3 .masonryCard--2 { grid-column: 3; grid-row: 1 / 3; }
.masonryCard {
  display: block;
  border-radius: 6px;
  overflow: hidden;
  background: var(--peach);
  box-shadow: 0 4px 16px rgba(44, 32, 24, 0.1);
  transition: transform 0.3s var(--ease);
}
.masonryCard:hover { transform: translateY(-3px); color: inherit; }
.masonryCard .coverArt,
.masonryCard .coverImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}
.masonryCard--0 { grid-row: 1 / 3; }
.masonryCard--1 { grid-column: 2; }
.masonryCard--2 { grid-column: 2; grid-row: 2; }
.masonryCard--3 { grid-column: 3; grid-row: 1 / 3; }
.masonryCard--4 { grid-column: 4; }
.masonryCard--5 { grid-column: 4; grid-row: 2; }

.browseSection.is-browsing [data-browse-results] {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.browseSection [data-browse-results] {
  transition: opacity 0.2s ease;
}

.footer--compact {
  margin-top: 40px;
  padding-top: 28px;
}

@media (max-width: 900px) {
  .masonryGrid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 160px 160px;
  }
  .masonryCard--0 { grid-row: 1 / 3; grid-column: 1; }
  .masonryCard--1 { grid-column: 2; grid-row: 1; }
  .masonryCard--2 { grid-column: 2; grid-row: 2; }
  .masonryCard--3 { grid-column: 1 / 3; grid-row: 3; }
  .masonryCard--4,
  .masonryCard--5 { display: none; }
  .masonryGrid--n2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px;
  }
  .masonryGrid--n2 .masonryCard--0,
  .masonryGrid--n2 .masonryCard--1 {
    grid-row: 1;
    grid-column: auto;
  }
  .masonryGrid--n3 .masonryCard--2 { grid-column: 1 / 3; grid-row: 3; }
}

@media (max-width: 760px) {
  .authModal { padding: 28px 18px 22px; }
  .railNext { display: none; }
  .main--feed { padding-top: 12px; }
}

/* ---------- Create story studio ---------- */
.createStudio {
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto 80px;
}
.createTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 0 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
}
.createTopLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.createBack {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
}
html[data-theme="dark"] .createBack { background: var(--elev); }
.createBack:hover { background: var(--peach); color: var(--brown-dark); }
.createStepLabel {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}
.createWorkingTitle {
  font-family: var(--font-ui);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(52vw, 420px);
}
.createTopActions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.createNextBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border: none;
  border-radius: 10px;
  background: var(--amber);
  color: #2C2018;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.createNextBtn:hover {
  background: var(--amber-light);
  transform: translateY(-1px);
}
.createStudioError { margin: 0 0 16px; }
.createBody {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 28px;
  align-items: start;
}
.createCoverCol { display: grid; gap: 12px; }
.createCoverDrop {
  cursor: pointer;
  display: block;
  position: relative;
}
.createCoverDrop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.createCoverPreview {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background: #ebe4d8;
  border: 1.5px dashed color-mix(in srgb, var(--brown) 35%, var(--border));
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.createCoverDrop:hover .createCoverPreview {
  border-color: var(--amber);
  background: #e4d9c8;
}
.createCoverPreview.has-cover {
  border-style: solid;
  border-color: var(--border);
  background: #1a120c;
}
.createCoverDrop:hover .createCoverPreview.has-cover {
  border-color: var(--amber);
  background: #1a120c;
  box-shadow: 0 0 0 3px rgba(212, 139, 46, 0.18);
}
.createCoverPlaceholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  text-align: center;
  padding: 16px;
  font-weight: 700;
  font-size: 0.92rem;
}
.createCoverPlaceholder small {
  font-weight: 500;
  font-size: 0.75rem;
}
.createCoverImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.createCoverChange {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(44, 32, 24, 0.72);
  color: #FDFAF5;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}
.createCoverPreview.has-cover .createCoverChange { display: flex; }
.createFormCard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 24px 28px;
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .createFormCard { background: var(--elev); }
.createTabs {
  display: flex;
  gap: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
}
.createTab {
  padding: 0 0 12px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.createTab.is-active {
  color: var(--brown-dark);
  box-shadow: inset 0 -3px 0 var(--amber);
}
.createField {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}
.createField span { letter-spacing: 0.01em; }
.createField input,
.createField textarea,
.createField select {
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid #ddd4c6;
  background: var(--surface);
  padding: 12px 14px;
}
.createField--compact { margin-bottom: 0; }
.createRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.createHint { margin-top: 4px; font-size: 0.88rem; }
.editorLaunch { margin: 0 0 24px; }

/* ---------- Mon atelier hub ---------- */
.atelier {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto 80px;
}
.atelierHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.atelierHead h1 {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
}
.atelierNewBtn {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--amber);
  color: #2C2018;
  font-weight: 800;
  font-size: 0.9rem;
  text-decoration: none;
}
.atelierNewBtn:hover {
  background: var(--amber-light);
  color: #2C2018;
}
.atelierTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  border-bottom: 1px solid var(--border);
  margin: 18px 0 8px;
}
.atelierTab {
  padding: 12px 2px 14px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-muted);
  text-decoration: none;
}
.atelierTab:hover { color: var(--brown-dark); }
.atelierTab.is-active {
  color: var(--brown-dark);
  box-shadow: inset 0 -3px 0 var(--amber);
}
.atelierList {
  list-style: none;
  margin: 0;
  padding: 0;
}
.atelierRow {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--border);
}
.atelierCover {
  display: block;
  width: 72px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(44, 32, 24, 0.12);
  flex-shrink: 0;
}
.atelierCover .coverArt,
.atelierCover .coverImg {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
.atelierMeta { min-width: 0; }
.atelierTitle {
  font-family: var(--font-ui);
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.atelierTitle:hover { color: var(--brown); }
.atelierStatus {
  margin: 4px 0 2px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #6a8aaa;
}
html[data-theme="dark"] .atelierStatus { color: #9bb4cc; }
.atelierUpdated { font-size: 0.78rem; margin: 0 0 6px; }
.atelierStats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}
.atelierActions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 160px;
}
.atelierPrimary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--amber);
  color: #2C2018;
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
}
.atelierPrimary:hover {
  background: var(--amber-light);
  color: #2C2018;
}
.atelierSecondary {
  display: flex;
  gap: 6px;
}
.atelierGhost {
  flex: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
}
html[data-theme="dark"] .atelierGhost { background: var(--elev); }
.atelierGhost:hover {
  border-color: var(--brown);
  color: var(--brown-dark);
}
.atelierEmptyBox {
  padding: 48px 16px;
  text-align: center;
  display: grid;
  gap: 16px;
  justify-items: center;
}
.atelierSubHead {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 800;
  margin: 36px 0 12px;
}
.atelierDrafts { margin-top: 12px; }
.atelierSeriesForm {
  margin-top: 28px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}
html[data-theme="dark"] .atelierSeriesForm { background: var(--elev); }
.atelierSeriesList {
  list-style: none;
  display: grid;
  gap: 12px;
}
.atelierSeriesList li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 4px;
}
.atelierCrumb {
  margin-bottom: 16px;
  font-weight: 600;
}
.atelierCrumb a { color: var(--brown); }

@media (max-width: 720px) {
  .atelierRow {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "cover meta"
      "actions actions";
  }
  .atelierCover { grid-area: cover; width: 64px; }
  .atelierMeta { grid-area: meta; }
  .atelierActions {
    grid-area: actions;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }
  .atelierPrimary { flex: 1; }
  .atelierSecondary { width: 100%; }
}

@media (max-width: 820px) {
  .createBody { grid-template-columns: 1fr; }
  .createCoverPreview { max-width: 220px; margin: 0 auto; }
  .createRow { grid-template-columns: 1fr; }
  .createWorkingTitle { max-width: 48vw; }
}

/* ---------- Story studio (Wattpad-like) ---------- */
.atelier--studio,
.atelier--write {
  width: min(1120px, calc(100% - 24px));
  margin: 0 auto 80px;
}
.atelierStudioError { margin: 12px 0; }

.storyStudioTop,
.chapterStudioTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
  position: sticky;
  top: var(--nav-h);
  z-index: 30;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
}
.storyStudioLeft,
.chapterStudioLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.storyStudioBack,
.chapterStudioBack {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
}
html[data-theme="dark"] .storyStudioBack,
html[data-theme="dark"] .chapterStudioBack { background: var(--elev); }
.storyStudioKicker {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}
.storyStudioTitle {
  margin: 2px 0 0;
  font-family: var(--font-ui);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.storyStudioActions,
.chapterStudioActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chapterBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  white-space: nowrap;
}
.chapterBtn--solid {
  background: var(--amber);
  color: #2C2018;
  border-color: var(--amber);
}
.chapterBtn--solid:hover { background: var(--amber-light); color: #2C2018; }
.chapterBtn--outline {
  background: #fff;
  border-color: #d9d0c3;
}
html[data-theme="dark"] .chapterBtn--outline { background: var(--elev); border-color: var(--border); }
.chapterBtn--outline:hover { border-color: var(--brown); color: var(--brown-dark); }
.chapterBtn--ghost {
  width: 38px;
  height: 38px;
  padding: 0;
  border-color: #d9d0c3;
  background: #fff;
  letter-spacing: 0.08em;
}
html[data-theme="dark"] .chapterBtn--ghost { background: var(--elev); }

.storyStudioBody {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
}
.storyStudioAside { display: grid; gap: 12px; justify-items: stretch; }
.storyCoverEdit { cursor: pointer; display: block; position: relative; }
.storyCoverFile {
  position: absolute;
  width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0,0,0,0);
}
.storyCoverFrame {
  display: block;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--peach);
  box-shadow: 0 8px 24px rgba(44, 32, 24, 0.14);
}
.storyCoverFrame .coverArt,
.storyCoverFrame .coverImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.storyCoverPencil {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3d6ea8;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.storyPreviewBtn { width: 100%; }
.storyShareLabel {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
}
.storyShareRow { display: flex; gap: 8px; }
.storyShareBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  text-decoration: none;
}
.storyShareBtn--fb { background: #3b5998; }
.storyShareBtn--x { background: #4aa3df; }
.storyShareBtn--pin { background: #bd081c; }

.storyStudioCard {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 0 0 24px;
  min-height: 420px;
}
html[data-theme="dark"] .storyStudioCard { background: var(--elev); }
.storyStudioTabs {
  display: flex;
  gap: 8px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.storyStudioTab {
  flex-shrink: 0;
  padding: 16px 10px 14px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: inset 0 -3px 0 transparent;
}
.storyStudioTab.is-active {
  color: var(--brown-dark);
  box-shadow: inset 0 -3px 0 var(--amber);
}
.storyTabNew {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #2f6fed;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}
.storyPanel { padding: 22px 24px 8px; }
.storyPanelHeading {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-family: var(--font-ui);
}
.storyNewChapter { margin-bottom: 18px; }
.storyEmptyChapters { margin-top: 12px; }
.storyChapterList {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.storyChapterRow {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
}
.storyChapterHandle {
  color: var(--text-muted);
  font-size: 0.95rem;
  opacity: 0.7;
}
.storyChapterMain {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.storyChapterMain strong {
  font-size: 0.98rem;
  font-weight: 700;
}
.storyChapterStats { font-size: 0.8rem; }
.storyChapterMenu { position: relative; }
.storyChapterMenu summary {
  list-style: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
.storyChapterMenu summary::-webkit-details-marker { display: none; }
.storyChapterMenu summary:hover { background: var(--peach); color: var(--text); }
.storyChapterMenuDrop {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 150px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-hover);
  padding: 6px;
  z-index: 20;
  display: grid;
}
html[data-theme="dark"] .storyChapterMenuDrop { background: var(--elev); }
.storyChapterMenuDrop a,
.storyChapterMenuDrop button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.storyChapterMenuDrop a:hover,
.storyChapterMenuDrop button:hover { background: var(--peach); }

.storyCoList {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.storyCoList li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.storyAddCoauthor,
.storyDeleteForm {
  width: min(1120px, calc(100% - 24px));
  margin: 16px auto 0;
  max-width: calc(1120px - 248px);
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(220px + 28px);
}
.storyAddCoauthor {
  display: grid;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}
html[data-theme="dark"] .storyAddCoauthor { background: var(--elev); }
.storyDeleteForm { margin-top: 10px; }

/* ---------- Chapter writer ---------- */
.chapterStudio {
  display: grid;
  gap: 0;
}
.chapterStudioThumb {
  width: 40px;
  height: 54px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  background: var(--peach);
}
.chapterStudioThumb .coverArt,
.chapterStudioThumb .coverImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chapterStudioMeta { min-width: 0; }
.chapterStudioStory {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(46vw, 360px);
}
.chapterStudioChapter {
  margin: 1px 0 0;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(46vw, 360px);
}
.chapterStudioStatus {
  margin: 3px 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.chapterStudioSaved { color: #2f7a45; font-weight: 600; }

.chapterMore { position: relative; }
.chapterMore summary { list-style: none; }
.chapterMore summary::-webkit-details-marker { display: none; }
.chapterMoreMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-hover);
  padding: 8px;
  z-index: 40;
  display: grid;
  gap: 4px;
}
html[data-theme="dark"] .chapterMoreMenu { background: var(--elev); }
.chapterMoreItem {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.chapterMoreItem:hover { background: var(--peach); }
.chapterMoreItem input {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-weight: 500;
}

.chapterMediaBar {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  background: #ebe4d8;
  border-radius: 12px;
  margin-bottom: 18px;
}
html[data-theme="dark"] .chapterMediaBar { background: var(--elev); }
.chapterMediaBtn {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  border: 1px solid #d9d0c3;
  background: #fff;
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1rem;
}
html[data-theme="dark"] .chapterMediaBtn { background: var(--cream); border-color: var(--border); }
.chapterMediaBtn:hover { border-color: var(--amber); color: var(--brown-dark); }

.chapterCanvas {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 28px clamp(18px, 4vw, 48px) 48px;
  min-height: 60vh;
}
html[data-theme="dark"] .chapterCanvas { background: var(--elev); }
.chapterTitleInput {
  width: 100%;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--text);
  padding: 0 0 18px !important;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
}
.chapterTitleInput:focus { outline: none; }
.chapterBodyInput {
  width: 100%;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  resize: vertical;
  min-height: 55vh;
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.85;
  color: var(--text);
  padding: 12px 0 0 !important;
  border-radius: 0 !important;
}
.chapterBodyInput:focus { outline: none; }
.chapterBodyInput::placeholder { color: #b5a898; }

@media (max-width: 900px) {
  .storyStudioBody { grid-template-columns: 1fr; }
  .storyCoverFrame { max-width: 200px; }
  .storyAddCoauthor,
  .storyDeleteForm { padding-left: 0; max-width: none; width: min(1120px, calc(100% - 24px)); }
  .chapterStudioActions { width: 100%; justify-content: flex-end; }
}