/* =====================================================================
   iBook — "Producer's Desk" reskin
   Design language lifted from ibook-prototype/app.css:
   cream paper, ink navy, stamp red, mustard tape, condensed display type,
   typewriter metadata.
   ===================================================================== */

/* ---------- Fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&family=Caveat:wght@500;600&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=switzer@400,500,600&display=swap");

/* ---------- Tokens ---------- */
:root {
  /* prototype palette */
  --paper:        #F3EEE2;
  --paper-2:      #EAE3D2;
  --paper-3:      #DFD6C2;
  --paper-line:   rgba(27, 34, 66, 0.14);
  --ink:          #1B2242;
  --ink-2:        #2A3260;
  --ink-soft:     #4C5375;
  --charcoal:     #201E1A;
  --muted-2:      #635D4E;
  --stamp:        #B4232B;
  --stamp-deep:   #8E1A21;
  --mustard:      #D9A521;
  --mustard-deep: #B98614;
  --tape:         rgba(220, 176, 78, 0.55);

  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --font-hand:    "Caveat", "Segoe Script", cursive;

  /* remap the app's tokens onto the prototype design */
  --bg:           #F3EEE2;
  --card:         #FBF8F0;
  --text:         #201E1A;
  --muted:        #5C5648;
  --accent:       #1B2242;
  --accent-hover: #2A3260;
  --accent-soft:  rgba(27, 34, 66, 0.1);
  --accent-grad:  linear-gradient(135deg, #1B2242, #2A3260);
  --border:       #DFD6C2;
  --shadow:       0 14px 32px -26px rgba(27, 34, 66, 0.5);
  --radius:       4px;
  --success:      #2F7A4F;
  --danger:       #B4232B;
  --warning:      #D9A521;
  --liked-bg:     rgba(180, 35, 43, 0.1);
  --liked-border: #B4232B;
  --liked-text:   #8E1A21;
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper:        #10152E;
  --paper-2:      #151B38;
  --paper-3:      #232B4F;
  --paper-line:   rgba(243, 238, 226, 0.14);
  --ink:          #F3EEE2;
  --ink-2:        #FFFFFF;
  --ink-soft:     #B9C0D8;
  --charcoal:     #E8E4D8;
  --muted-2:      #9AA1BD;
  --stamp:        #E34A52;
  --stamp-deep:   #F07171;
  --mustard:      #E4B832;
  --mustard-deep: #D9A521;

  --bg:           #0E1330;
  --card:         #161C3E;
  --text:         #F3EEE2;
  --muted:        #A7ADC6;
  --accent:       #D9A521;
  --accent-hover: #F0CB4F;
  --accent-soft:  rgba(217, 165, 33, 0.14);
  --accent-grad:  linear-gradient(135deg, #D9A521, #E4B832);
  --border:       #2A3260;
  --shadow:       0 14px 32px -26px rgba(0, 0, 0, 0.65);
  --success:      #56B77B;
  --danger:       #EF6166;
  --warning:      #E0A23A;
  --liked-bg:     rgba(239, 97, 102, 0.16);
  --liked-border: #EF6166;
  --liked-text:   #F07171;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--paper);
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.08;
}
h1, h2, h3, h4, h5 { text-transform: uppercase; }

input, select, textarea {
  font-family: var(--font-body);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--paper-3);
  color: var(--charcoal);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 0.62rem 0.9rem;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(27, 34, 66, 0.08);
}
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(217, 165, 33, 0.16);
}
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: rgba(14, 19, 48, 0.6);
  background-color: rgba(14, 19, 48, 0.6);
  border-color: var(--border);
  color: var(--text);
}

.form-control, .form-select {
  background-color: rgba(255, 255, 255, 0.5);
  border-color: var(--paper-3);
  color: var(--charcoal);
  border-radius: var(--radius);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(27, 34, 66, 0.08);
}
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--bg); color: var(--text); }

option { background-color: #ffffff; color: #201E1A; }
[data-theme="dark"] option { background-color: #1A2144; color: #F3EEE2; }

label, .form-label, .field__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

/* paper grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 2147480000;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: 0.05; }

/* ---------- Header / topbar ---------- */
header,
.custom-topbar {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--paper-line);
  box-shadow: none;
}
.custom-topbar { backdrop-filter: none; }

.logo {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.logo:hover { color: var(--stamp); }
.logo img {
  border-radius: 6px;
  border: 1px solid var(--paper-line);
  padding: 2px;
  background: #FBF8F0;
}

.nav-btn {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
  background: transparent;
  border-radius: 2px;
  padding: 0.5rem 0.7rem;
  box-shadow: none;
}
.nav-btn:hover, .nav-btn:focus { background: transparent; color: var(--ink); box-shadow: none; }
.nav-btn.active { color: var(--ink); background: transparent; font-weight: 600; box-shadow: inset 0 -2px 0 var(--stamp); }

.hamburger span { background: var(--ink); }

.theme-btn, .icon-btn {
  background: transparent !important;
  border: 1px solid var(--paper-line) !important;
  border-radius: var(--radius);
  color: var(--ink-soft);
}
.theme-btn:hover, .icon-btn:hover { background: var(--paper-2) !important; color: var(--ink); }

.avatar, .avatar-btn, .profile-avatar, .profile-img {
  background: var(--accent-grad);
  color: #fff;
  border-radius: 50%;
  border: 2px solid var(--paper-3);
}
.profile-img, .profile-avatar { border: 3px solid var(--paper-2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }

.header-username { color: var(--ink); font-family: var(--font-display); letter-spacing: 0.03em; }
.header-username:hover { color: var(--stamp); }

/* ---------- Sidebar ---------- */
#navMy {
  background: var(--paper-2) !important;
  border-right: 1px solid var(--paper-line);
}
#navMy .nav-link { color: var(--ink) !important; }
#navMy .nav-link:hover { background: rgba(27, 34, 66, 0.07); color: var(--ink) !important; }
#navMy .nav-link.active {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: 3px;
}
#navMy .nav-link.active i { color: var(--paper) !important; }
#navMy h6 { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--ink-soft); }
#navMy .text-muted, #navMy small { color: var(--ink-soft) !important; }
#navMy .text-primary { color: var(--stamp) !important; }
#navMy .border-top { border-color: var(--paper-line) !important; }
.sidebar-inner { border-right: 1px solid var(--paper-line); }
.sidebar-toggle-btn { color: var(--ink-soft); border-radius: var(--radius); }
.sidebar-toggle-btn:hover { background: rgba(27, 34, 66, 0.08); color: var(--ink); }

.progress { background: var(--paper-3); border-radius: 999px; }
.progress-bar, .progress-bar.bg-primary { background: var(--stamp) !important; }

/* ---------- Mobile drawer + bottom nav ---------- */
.mobile-menu { background: var(--paper) !important; border-left: 1px solid var(--paper-line); box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18); }
.mm-head { border-bottom: 1px solid var(--paper-line); }
.mm-user-pill { background: var(--card); border: 1px solid var(--paper-3); border-radius: var(--radius); }
.mm-nav a, .mm-link { color: var(--ink); font-weight: 500; border-radius: 3px; }
.mm-link:hover { background: var(--accent-soft); }
.mm-link.active { background: var(--ink); color: var(--paper) !important; }
.mm-link.active i { color: var(--paper) !important; }
.mm-link i { color: var(--ink-soft); }
.mm-foot { border-top: 1px solid var(--paper-line); color: var(--muted-2); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; }

.mobile-bottom-nav {
  background: rgba(251, 248, 240, 0.92) !important;
  border-top: 1px solid var(--paper-line);
  border-radius: 0;
  box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.12);
}
.mobile-bottom-nav .nav-link { color: var(--ink-soft); font-family: var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }
.mobile-bottom-nav .nav-link.active { color: var(--stamp); }
.mobile-bottom-nav .nav-link.active i { color: var(--stamp); transform: scale(1.2); }
.mobile-bottom-nav .nav-link.active::after { background: var(--stamp); }
[data-theme="dark"] .mobile-bottom-nav { background: rgba(14, 19, 48, 0.96) !important; }
[data-theme="dark"] .mobile-bottom-nav .nav-link.active,
[data-theme="dark"] .mobile-bottom-nav .nav-link.active i { color: var(--mustard); }
[data-theme="dark"] .mobile-bottom-nav .nav-link.active::after { background: var(--mustard); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-ink: var(--paper);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.78rem 1.35rem 0.72rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-ink);
  white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn:hover {
  background: var(--btn-bg);
  color: var(--btn-ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -10px rgba(27, 34, 66, 0.5);
}
.btn:active { transform: translateY(0); }
.btn:disabled, .btn.disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-secondary {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-bd: var(--ink);
}
.btn-secondary:hover { --btn-bg: var(--ink); --btn-ink: var(--paper); }
.btn-primary { --btn-bg: var(--ink); --btn-ink: var(--paper); --btn-bd: var(--ink); }
.btn-primary:hover { --btn-bg: var(--ink-2); }
.btn-outline-primary, .btn-outline-secondary {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-bd: var(--ink);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover { --btn-bg: var(--ink); --btn-ink: var(--paper); }
.btn-danger { --btn-bg: var(--stamp); --btn-ink: #fff; --btn-bd: var(--stamp); box-shadow: 0 6px 18px -10px rgba(180, 35, 43, 0.6); }
.btn-danger:hover { --btn-bg: var(--stamp-deep); --btn-ink: #fff; }
.btn-success { --btn-bg: var(--success); --btn-ink: #fff; --btn-bd: var(--success); }
.btn-success:hover { --btn-bg: #1f6a42; --btn-ink: #fff; }
.btn-warning { --btn-bg: var(--mustard); --btn-ink: #1B2242; --btn-bd: var(--mustard-deep); }
.btn-info { --btn-bg: var(--ink-2); --btn-ink: var(--paper); --btn-bd: var(--ink-2); }
.btn-outline-danger { --btn-bg: transparent; --btn-ink: var(--stamp); --btn-bd: var(--stamp); }
.btn-outline-danger:hover { --btn-bg: var(--stamp); --btn-ink: #fff; }
.btn-outline-success { --btn-bg: transparent; --btn-ink: var(--success); --btn-bd: var(--success); }
.btn-outline-success:hover { --btn-bg: var(--success); --btn-ink: #fff; }
.btn-outline-warning { --btn-bg: transparent; --btn-ink: var(--mustard-deep); --btn-bd: var(--mustard-deep); }
.btn-outline-warning:hover { --btn-bg: var(--mustard); --btn-ink: #1B2242; }

.btn-sm {
  font-size: 0.74rem;
  padding: 0.42rem 0.85rem 0.38rem;
  letter-spacing: 0.07em;
}
.btn-lg { font-size: 1.02rem; padding: 1.1rem 1.75rem 1rem; }
.btn-block, .btn-block.btn { width: 100%; justify-content: center; }

[data-theme="dark"] .btn { --btn-ink: #0E1330; }
[data-theme="dark"] .btn-danger, [data-theme="dark"] .btn-danger:hover { --btn-ink: #fff; }
[data-theme="dark"] .btn-success, [data-theme="dark"] .btn-success:hover { --btn-ink: #fff; }
[data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-outline-primary, [data-theme="dark"] .btn-outline-secondary {
  --btn-ink: #F3EEE2;
  --btn-bd: rgba(243, 238, 226, 0.55);
}
[data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .btn-outline-primary:hover, [data-theme="dark"] .btn-outline-secondary:hover {
  --btn-bg: var(--paper);
  --btn-ink: var(--ink);
}

/* ---------- Reader tool buttons ---------- */
.like-btn, .follow-btn, .share-icon-btn, .react-btn, .tts-btn, .chapter-btn {
  border-radius: var(--radius);
  font-family: var(--font-body);
}
.like-btn, .follow-btn {
  background: var(--card);
  border: 1.5px solid var(--paper-3);
  color: var(--ink);
}
.like-btn:hover, .follow-btn:hover { border-color: var(--ink); }
.like-btn.liked { background: var(--liked-bg); border-color: var(--liked-border); color: var(--liked-text); }
.follow-btn.following { background: var(--success); border-color: var(--success); color: white; }
.share-icon-btn { background: var(--card); border: 1.5px solid var(--paper-3); color: var(--ink); }
.share-icon-btn:hover { background: var(--accent-soft); border-color: var(--ink); color: var(--ink); }
.share-icon-btn--card { background: rgba(251, 248, 240, 0.94); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
[data-theme="dark"] .share-icon-btn--card { background: rgba(22, 28, 62, 0.94); }
.share-icon-btn--ghost { background: none; border: none; color: var(--muted); }

.react-btn { background: var(--paper-2); border: 1px solid var(--paper-line); color: var(--ink-soft); }
.react-btn:hover { background: var(--ink); color: var(--paper); }
.react-btn.active { background: var(--ink); color: var(--paper); transform: scale(1.05); }

.star { color: var(--paper-3); }
.star.on { color: var(--mustard); }
.contest-rating .star { color: var(--mustard); }

.tts-btn { border: 1.5px solid var(--paper-3); color: var(--ink); }
.tts-btn:hover, .tts-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.chapter-btn { background: var(--card); border: 1.5px solid var(--paper-3); color: var(--ink); }
.chapter-btn:hover { border-color: var(--ink); }
.chapter-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.link-btn { color: var(--ink); border-bottom: 1px solid transparent; }
.link-btn:hover { color: var(--stamp); border-bottom-color: var(--stamp); }
.link-danger, .link-danger:hover { color: var(--stamp); }

/* ---------- Cards ---------- */
.card, .form-card, .auth-card, .reader, .profile-card,
.dash-card, .wb-card, .pa-card, .lib-item, .comment, .chapter-item,
.authors-card, .contest-card, .edition-card, .achievement-card,
.shelf-card, .rec-card, .discussion-card, .collab-item, .schedule-item,
.feed-item, .analytics-card, .ref-stat-card, .end-card, .highlight-item,
.streak-display, .bookshelf-select-item, .service-card, .bank-details-box,
.export-option, .import-dropzone, .svc-features, .modal-box {
  background: var(--card);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.story-card, .book-card, .new-release-card, .trending-slide, .last-read-card {
  border-radius: var(--radius);
}
.story-card {
  background: var(--card);
  border: 1px solid var(--paper-3);
  box-shadow: var(--shadow);
}
.story-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -30px rgba(27, 34, 66, 0.65); border-color: var(--ink); }
.story-card:hover .story-cover img { transform: scale(1.05); }
.story-cover {
  background: var(--accent-grad);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

.author-card, .author-slide { background: var(--paper-2); border: 1px solid var(--paper-line); border-radius: var(--radius); }
.author-card img, .author-slide img, .author-slide .author-avatar { border-color: var(--paper-3); }
.author-slide-wrap:hover .author-slide { background: var(--accent-soft); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }
.author-card small, .author-slide small { color: var(--ink-soft); }

.last-read-card {
  background: linear-gradient(135deg, #1B2242, #2E3A6E);
  color: #F3EEE2;
  border: 1px solid rgba(243, 238, 226, 0.14);
}
.last-read-card small { color: rgba(243, 238, 226, 0.8); }
.last-read-card h6 { color: #F3EEE2; }

.trending-slide { background: var(--card); border: 1px solid var(--paper-3); box-shadow: var(--shadow); }
.book-card img, .new-release-card img { border-radius: calc(var(--radius) - 1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); }

.pcover-box { background: var(--paper-2); border-radius: var(--radius); }
.profile-hero { background: var(--card); border: 1px solid var(--paper-3); border-radius: var(--radius); }

.sale-price  { color: var(--stamp); }
.rated-dot   { background: var(--mustard); }
.badge-dot:not([style*="background"]) { background: var(--stamp); }

/* ---------- Badges / tags ---------- */
.badge, .status-badge, .genre-tag, .tag-chip, .card-badge, .access-badge, .lb-title {
  font-family: var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 500;
  border-radius: 2px;
}
.badge, .status-badge {
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--paper-line);
  padding: 0.28rem 0.6rem;
}
.badge-draft { background: var(--paper-2); color: var(--muted); border: 1px dashed var(--paper-3); }
.badge-published { background: var(--success); color: white; border: none; }

.genre-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent !important;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 0.22rem 0.6rem;
}
.genre-tag.status-completed { border-color: var(--success); color: var(--success); }
.genre-tag.status-hiatus { border-color: var(--warning); color: var(--warning); }
.genre-tag.lang-tag, .genre-tag.access-badge { border: 1px solid var(--accent); color: var(--accent); background: transparent; }
.genre-tag.access-badge.subscribe { border-color: #7048e8; color: #7048e8; }
.genre-tag.access-badge.buy { border-color: #0b7285; color: #0b7285; }

.tag-chip { background: transparent; border: 1px solid var(--paper-3); color: var(--ink-soft); }
.tag-chip:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.card-badge { background: var(--stamp); color: #fff; box-shadow: 0 4px 12px -6px rgba(180, 35, 43, 0.8); }
.card-badge.maturity-T { background: var(--mustard-deep); }
.card-badge.maturity-M { background: var(--stamp); }

[data-theme="dark"] .genre-tag { border-color: rgba(243, 238, 226, 0.5); color: var(--ink); }
[data-theme="dark"] .genre-tag.status-completed { color: var(--success); border-color: var(--success); }

/* ---------- Tabs ---------- */
.tab-btn, .view-tab {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--paper-3);
  color: var(--ink-soft);
}
.tab-btn:hover, .view-tab:hover { border-color: var(--ink); color: var(--ink); opacity: 1; }
.tab-btn.active, .view-tab.active { background: var(--ink); border-color: var(--ink); color: var(--paper) !important; }
[data-theme="dark"] .tab-btn.active, [data-theme="dark"] .view-tab.active { color: #0E1330 !important; }

/* ---------- Controls / filter strip ---------- */
.controls {
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 0.9rem;
  margin-bottom: 2rem;
  align-items: center;
}
:root:not([data-theme="dark"]) .controls input, :root:not([data-theme="dark"]) .controls select { background: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5); }
[data-theme="dark"] .controls input, [data-theme="dark"] .controls select { background: rgba(14, 19, 48, 0.6); background-color: rgba(14, 19, 48, 0.6); color: var(--text); border-color: var(--border); }

.advanced-filters { background: var(--paper-2); border: 1px dashed var(--paper-3); border-radius: var(--radius); }

/* ---------- Tabs of view ---------- */
.view > h2 {
  position: relative;
  padding-bottom: 0.7rem;
  margin-bottom: 1.5rem;
}
.view > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.5rem;
  height: 3px;
  background: var(--stamp);
}
.view > h2, .view h3, .page-header h1 {
  color: var(--ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* ---------- Swiper ---------- */
.swiper-button-prev, .swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--paper-3);
  box-shadow: var(--shadow);
}
.swiper-button-prev::after, .swiper-button-next::after { font-size: 1rem; color: var(--ink); }
.swiper-button-prev:hover, .swiper-button-next:hover { background: var(--ink); }
.swiper-button-prev:hover::after, .swiper-button-next:hover::after { color: var(--paper); }
.swiper-pagination-bullet { background: var(--paper-3); opacity: 1; border-radius: 999px; }
.swiper-pagination-bullet-active { background: var(--stamp); }

/* ---------- Pagination ---------- */
.pagination .btn { margin: 0; }
#browsePageInfo, #commentPageInfo { color: var(--muted-2) !important; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; }

/* ---------- Modals ---------- */
.modal { background: rgba(14, 19, 48, 0.66); backdrop-filter: blur(2px); }
.modal-content, .modal-box {
  background: var(--paper);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius);
  box-shadow: 0 40px 90px -50px rgba(8, 12, 29, 0.85);
}
.modal-content h2, .modal-content h3, .modal-box h2, .modal-box h3 { color: var(--ink); margin-bottom: 0.9rem; }
.modal-close {
  background: var(--paper-2);
  color: var(--ink-soft);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
}
.modal-close:hover { background: var(--stamp); border-color: var(--stamp); color: #fff; }
.modal-actions { gap: 0.7rem; }

.modal-overlay { background: rgba(14, 19, 48, 0.66); }

/* ---------- Tables ---------- */
.table, .withdrawal-table, .admin-table, .earnings-table, .admin-pay-table, .purchase-history-item {
  border-collapse: collapse;
}
.table thead th, .withdrawal-table th, .admin-table th, .earnings-table th, .admin-pay-table th {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper-2);
  border-bottom: 1px solid var(--paper-line);
}
.table th, .table td,
.withdrawal-table th, .withdrawal-table td,
.admin-table th, .admin-table td,
.earnings-table th, .earnings-table td,
.admin-pay-table th, .admin-pay-table td {
  border-bottom: 1px solid var(--paper-line);
  padding: 0.7rem 0.8rem;
}

/* ---------- Notifications / theme / dropdown ---------- */
.notif-panel, .theme-panel {
  background: var(--card);
  border: 1px solid var(--paper-3);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.notif-item { border-bottom: 1px solid var(--paper-line); color: var(--charcoal); }
.notif-item:hover { background: var(--paper-2); }
.notif-item.unread { background: var(--accent-soft); }
.notif-header { border-bottom: 1px solid var(--paper-line); color: var(--ink); font-family: var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.notif-time { color: var(--muted); }
.theme-option { color: var(--ink); border-radius: var(--radius); }
.theme-option:hover { background: var(--paper-2); }
.theme-option .check { color: var(--stamp); }
.nav-badge { background: var(--stamp); color: #fff; font-family: var(--font-mono);}

.dropdown-menu { background: var(--card); border: 1px solid var(--paper-3); border-radius: var(--radius); box-shadow: var(--shadow); }
.dropdown-item { color: var(--ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--paper-2); color: var(--ink); }

/* ---------- Toasts ---------- */
.toast {
  background: var(--card);
  color: var(--charcoal);
  border: 1px solid var(--paper-3);
  border-left: 4px solid var(--success);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 0.92rem;
}
.toast.error { border-left-color: var(--stamp); }

/* ---------- Footer ---------- */
.site-footer {
  background: #1B2242;
  color: rgba(243, 238, 226, 0.9);
  border-top: none;
  margin-top: 4rem;
  position: relative;
}
.site-footer .logo { color: #F3EEE2; }
.site-footer .logo:hover { color: var(--mustard); }
.site-footer .logo img { border-color: rgba(243, 238, 226, 0.22); background: rgba(243, 238, 226, 0.07); }
.footer-tagline { color: rgba(243, 238, 226, 0.75); }
.footer-social a { background: rgba(243, 238, 226, 0.08); border: 1px solid rgba(243, 238, 226, 0.22); color: rgba(243, 238, 226, 0.88); border-radius: var(--radius); }
.footer-social a:hover { background: var(--stamp); border-color: var(--stamp); color: #fff; }
.footer-col h4 { color: #ee858a; }
.footer-col a { color: rgba(243, 238, 226, 0.92); }
.footer-col a:hover { color: var(--mustard); }
.footer-bottom { border-top: 1px solid rgba(243, 238, 226, 0.15); }
.footer-bottom-inner { color: rgba(243, 238, 226, 0.72); }

/* ---------- Reader ---------- */
.reader { max-width: 900px; }
.reader h1 { font-size: 2.2rem; }
.reader-content { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.85; }
.reader-meta, .reader-stats { color: var(--muted-2); }

.chapter-nav, .reader-footer { border-color: var(--paper-line); }

.comment { border-left: 3px solid var(--paper-3); }
.comment-replies { border-left-color: var(--paper-line); }
.comment-header { color: var(--ink); }
.comment-time { color: var(--muted); }

/* ---------- Toc drawer ---------- */
.toc-drawer { background: var(--paper); border-left: 1px solid var(--paper-line); }
.toc-head { color: var(--ink); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--paper-line); }
.toc-item { color: var(--ink); border-bottom: 1px solid var(--paper-line); }
.toc-item:hover, .toc-item.active { background: var(--accent-soft); }
.toc-item.active { border-left: 3px solid var(--stamp); }

/* ---------- Leaderboard ---------- */
.leaderboard { border: 1px solid var(--paper-3); border-radius: var(--radius); background: var(--card); }
.lb-col { border-right: 1px solid var(--paper-line); }
.lb-col:last-child { border-right: 0; }
.lb-title { color: var(--ink); margin-bottom: 0.8rem; }
.lb-item { background: var(--card); border-bottom: 1px solid var(--paper-line); }
.lb-item:hover { background: var(--paper-2); }

/* ---------- Payment accounts ---------- */
.pa-card .pa-icon { border-radius: var(--radius); }
.pa-card .pa-icon.paypal { background: #003087; }
.pa-card .pa-icon.stripe { background: #6f3bff; }
.pa-card .pa-icon.bank { background: var(--success); }
.pa-card .pa-default { background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }
.wb-card.primary { border-color: var(--ink); }
.wb-card.primary .wb-num { color: var(--ink); }

/* ---------- Share targets ---------- */
.share-target { background: var(--paper-2); border: 1px solid var(--paper-3); border-radius: var(--radius); color: var(--ink-soft); }
.share-target:hover { border-color: var(--stamp); color: var(--stamp); }
.share-url-row { border-color: var(--paper-3); }

/* ---------- Misc ---------- */
.audio-player-bar { background: #1B2242; border: 1px solid rgba(243, 238, 226, 0.16); border-radius: var(--radius); color: #F3EEE2; }
.audio-player-bar .ap-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: rgba(243, 238, 226, 0.75); }

.offline-banner { background: var(--mustard); color: #1B2242; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; font-weight: 600; }

.warn-box { background: rgba(217, 165, 33, 0.1); border: 1px solid rgba(217, 165, 33, 0.55); color: var(--charcoal); border-radius: var(--radius); }
[data-theme="dark"] .warn-box { background: rgba(217, 165, 33, 0.14); border-color: rgba(217, 165, 33, 0.6); }

.form__alert, .form__error, .pay__alert { border-left-color: var(--stamp); }

.empty { color: var(--muted-2); }
.empty h2 { color: var(--ink); }

.toctree { border-color: var(--paper-line); }

/* ---------- Dark-mode sweep for hardcoded bright/blue bits ---------- */
[data-theme="dark"] .text-primary { color: var(--mustard) !important; }
[data-theme="dark"] .bg-primary { background-color: var(--ink) !important; }
[data-theme="dark"] .bg-white { background-color: var(--card) !important; }
[data-theme="dark"] .bg-light { background-color: var(--paper-2) !important; }
[data-theme="dark"] .text-dark { color: var(--text) !important; }
[data-theme="dark"] .border { border-color: var(--border) !important; }
[data-theme="dark"] .table, [data-theme="dark"] .table-hover tbody tr { color: var(--text); }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--bg); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .notif-item.unread { background: rgba(217, 165, 33, 0.12); }

[data-theme="dark"] .author-card, [data-theme="dark"] .author-slide { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .author-card img, [data-theme="dark"] .author-slide img, [data-theme="dark"] .author-slide .author-avatar { border-color: var(--border); }

/* ---------- Sharp-corner sweep for Bootstrap rounding utilities ---------- */
.rounded, .rounded-1, .rounded-2, .rounded-3, .rounded-4, .rounded-pill {
  border-radius: var(--radius) !important;
}

/* ---------- Light-mode primary utilities ---------- */
.text-primary { color: var(--stamp) !important; }
.bg-primary { background-color: var(--ink) !important; }