/* ==========================================================================
   WICKRET DESIGN SYSTEM — SPECIFICATION IMPLEMENTATION
   Source: https://wickret.cuberto.com/
   Clean, minimal, color-blocking, tight Montserrat tracking, zero drop shadows
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* --- 1. EXACT WICKRET TOKENS --- */
:root {
  /* Colors */
  --colors-primary: #2128BD;
  --colors-canvas: #FFFFFF;
  --colors-surface-alt: #EEFBFF;
  --colors-ink: #000000;
  --colors-hairline: #005FFE;
  --colors-neutral-1: #FDF0E5;
  --colors-cursor-exclusion: #DED742;

  /* Typography Variables */
  --font-family-wickret: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing Scale */
  --spacing-xxs: 16px;
  --spacing-xs: 28px;
  --spacing-sm: 32px;
  --spacing-md: 36px;
  --spacing-lg: 40px;
  --spacing-xl: 52px;
  --spacing-xxl: 60px;
  --spacing-xxxl: 64px;
  --spacing-section: 72px;
  --spacing-band: 120px;

  /* Border Radius Scale */
  --rounded-none: 0px;
  --rounded-xs: 4px;
  --rounded-sm: 18px;
  --rounded-md: 20px;
  --rounded-full: 9999px;

  /* Reader Engine Defaults (Inside reader modal) */
  --reader-bg: #FFFFFF;
  --reader-text: #1e293b;
  --reader-panel-bg: #EEFBFF;
  --reader-border: rgba(0, 95, 254, 0.3);
  --reader-accent: #2128BD;
  --reader-font-family: 'Merriweather', 'Georgia', serif;
  --reader-font-size: 19px;
  --reader-line-height: 1.85;
}

/* --- 1B. WICKRET TOKENS IN DARK MODE --- */
html.dark {
  /* Colors */
  --colors-primary: #93C5FD;
  --colors-canvas: #0B0F19;
  --colors-surface-alt: #111827;
  --colors-neutral-1: #161F33;
  --colors-ink: #F8FAFC;
  --colors-hairline: #60A5FA;
  --colors-cursor-exclusion: #FDE047;

  /* Reader Engine Defaults in Dark Storefront */
  --reader-bg: #131722;
  --reader-text: #e2e8f0;
  --reader-panel-bg: #1c2233;
  --reader-border: #2d3748;
  --reader-accent: #60A5FA;
}

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

html {
  scroll-behavior: smooth;
  font-family: var(--font-family-wickret);
  background-color: var(--colors-canvas);
  color: var(--colors-ink);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family-wickret);
  color: var(--colors-primary);
  background-color: var(--colors-canvas);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Wickret Dual-State Cursor */
@media (pointer: fine) {
  body:not(.native-cursor) {
    cursor: none;
  }
  body:not(.native-cursor) * {
    cursor: none !important;
  }
}

#wt-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 44px; height: 44px;
  margin-top: -22px; margin-left: -22px;
  border-radius: 50%;
  background-color: var(--colors-cursor-exclusion);
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: exclusion;
  transition: transform 0.18s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s ease;
  transform: scale(0.35);
  opacity: 0;
}
#wt-cursor.cursor-pointer {
  transform: scale(1.6);
}
#wt-cursor.cursor-clicking {
  transform: scale(0.2);
}

/* --- 2. EXACT WICKRET TYPOGRAPHY HIERARCHY --- */
.wt-display-xxl {
  font-family: var(--font-family-wickret);
  font-size: clamp(64px, 8.2vw, 115.2px);
  font-weight: 600;
  line-height: 0.93;
  letter-spacing: -8.64px;
  color: var(--colors-primary);
}
@media (max-width: 768px) {
  .wt-display-xxl {
    letter-spacing: -4px;
    line-height: 0.98;
  }
}

.wt-display-xl {
  font-family: var(--font-family-wickret);
  font-size: clamp(38px, 5.2vw, 70px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -5.22px;
  color: var(--colors-primary);
}
@media (max-width: 768px) {
  .wt-display-xl {
    letter-spacing: -2.5px;
  }
}

.wt-display-lg {
  font-family: var(--font-family-wickret);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.67px;
  color: var(--colors-primary);
}

.wt-display-lg-strong {
  font-family: var(--font-family-wickret);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.7px;
  color: var(--colors-primary);
}

.wt-heading-md {
  font-family: var(--font-family-wickret);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.48px;
  color: var(--colors-primary);
}

.wt-heading-md-strong {
  font-family: var(--font-family-wickret);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.48px;
  color: var(--colors-primary);
}

.wt-body-xl {
  font-family: var(--font-family-wickret);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.54;
  letter-spacing: -0.4px;
  color: rgba(33, 40, 189, 0.85);
}

.wt-body-xl-strong {
  font-family: var(--font-family-wickret);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.54;
  letter-spacing: -0.4px;
  color: var(--colors-primary);
}

.wt-body-lg {
  font-family: var(--font-family-wickret);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.22px;
}

/* --- 3. WICKRET STRICT BUTTON COMPONENTS --- */
/* Button Outline Primary (Height 72px, radius 20px, hover fill #2128BD & scale 1.07) */
.wt-btn-outline {
  background-color: transparent;
  border: 1px solid rgba(0, 95, 254, 0.3);
  color: var(--colors-primary);
  padding: 0 23px;
  height: 72px;
  min-width: 203px;
  font-family: var(--font-family-wickret);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -0.21px;
  border-radius: var(--rounded-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.wt-btn-outline:hover {
  background-color: var(--colors-primary);
  color: #FFFFFF;
  transform: scale(1.07);
}

.wt-btn-outline:active {
  opacity: 0.9;
}

.wt-btn-outline:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Button Outline Small (Height 60px, radius 18px) */
.wt-btn-outline-sm {
  background-color: transparent;
  border: 1px solid rgba(0, 95, 254, 0.3);
  color: var(--colors-hairline);
  padding: 0 32px;
  height: 60px;
  font-family: var(--font-family-wickret);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -0.21px;
  border-radius: var(--rounded-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.wt-btn-outline-sm:hover {
  background-color: var(--colors-primary);
  color: #FFFFFF;
  transform: scale(1.05);
}

/* Text Button (Pill 45px) */
.wt-btn-text {
  background-color: transparent;
  border: none;
  color: var(--colors-hairline);
  height: 45px;
  padding: 0 20px;
  border-radius: var(--rounded-full);
  font-family: var(--font-family-wickret);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.22px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.25s ease, opacity 0.25s ease;
  text-decoration: none;
}

.wt-btn-text:hover {
  color: rgba(33, 40, 189, 0.75);
  opacity: 0.85;
  text-decoration: none;
}

/* Wickret Inputs */
.wt-input {
  border: 1px solid rgba(0, 95, 254, 0.3);
  border-radius: var(--rounded-md);
  background: #FFFFFF;
  color: var(--colors-ink);
  font-family: var(--font-family-wickret);
  font-size: 15px;
  letter-spacing: -0.22px;
  padding: 0 20px;
  height: 60px;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.wt-input:hover {
  border-color: rgba(33, 40, 189, 0.5);
}

.wt-input:focus {
  outline: none;
  border-color: rgba(33, 40, 189, 0.7);
  color: rgba(0, 25, 172, 0.9);
}

/* --- 4. SIGNATURE WICKRET NAVIGATION & SKEW ROLLING TEXT --- */
.wt-roll {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
}
.wt-roll span {
  display: inline-block;
  transition: transform 0.65s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
}
.wt-roll span::after {
  content: attr(data-text);
  position: absolute;
  top: 140%;
  left: 0;
  transform: skewY(7deg);
  transition: transform 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}
.group:hover .wt-roll span,
.wt-roll-trigger:hover .wt-roll span {
  transform: translateY(-140%) skewY(-7deg);
}
.group:hover .wt-roll span::after,
.wt-roll-trigger:hover .wt-roll span::after {
  transform: skewY(0deg);
}

/* Continuous Marquee Ticker */
@keyframes wt-marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-wt-marquee {
  display: flex;
  width: max-content;
  animation: wt-marquee 15s linear infinite;
}
.animate-wt-marquee:hover {
  animation-play-state: paused;
}

/* Hollow to Solid Text Shift */
.wt-feature-item {
  opacity: 0.35;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--colors-primary);
  transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
  cursor: pointer;
}
.wt-feature-item.active,
.wt-feature-item:hover {
  opacity: 1;
  color: var(--colors-primary);
  -webkit-text-stroke: 1.5px transparent;
  transform: translateX(18px);
}

/* --- 5. COLOR-BLOCKING SECTION BANDS (NO SHADOWS!) --- */
.wt-band-canvas {
  background-color: var(--colors-canvas);
  width: 100%;
}

.wt-band-surface-alt {
  background-color: var(--colors-surface-alt);
  width: 100%;
}

.wt-band-neutral {
  background-color: var(--colors-neutral-1);
  width: 100%;
}

/* Fixed 1200px Max-Width Content Column Container */
.wt-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (min-width: 1280px) {
  .wt-container {
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* --- 6. WICKRET CARD SPECIFICATION (SHARP CORNERS 0px, NO SHADOWS) --- */
.wt-card {
  background-color: transparent;
  border: 1px solid rgba(0, 95, 254, 0.2);
  border-radius: var(--rounded-none); /* 0px sharp corners per spec */
  color: var(--colors-primary);
  font-family: var(--font-family-wickret);
  font-size: 14px;
  font-weight: 400;
  transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  overflow: hidden;
}

.wt-card:hover {
  border-color: var(--colors-primary);
  transform: translateY(-8px) scale(1.02);
}

.wt-card-surface-alt {
  background-color: var(--colors-surface-alt);
  border: 1px solid rgba(0, 95, 254, 0.2);
  border-radius: var(--rounded-none);
  transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
}

.wt-card-surface-alt:hover {
  border-color: var(--colors-primary);
  transform: translateY(-8px) scale(1.02);
}



/* --- 8. NOVEL CLOUD READER ENGINE (FULL EXPERIENCE) --- */
#novel-reader-view {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: var(--reader-bg);
  color: var(--reader-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#novel-reader-view.hidden {
  display: none !important;
}

.reader-toolbar {
  background-color: var(--reader-bg);
  border-bottom: 1px solid var(--reader-border);
  color: var(--reader-text);
  transition: all 0.3s ease;
  z-index: 50;
}

.reader-viewport {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 40px 20px 120px 20px;
  background-color: var(--reader-bg);
}

.reader-content {
  max-width: var(--reader-max-width);
  margin: 0 auto;
  font-family: var(--reader-font-family);
  font-size: var(--reader-font-size);
  line-height: var(--reader-line-height);
  color: var(--reader-text);
}

.reader-content p {
  margin-bottom: 1.6em;
}

.reader-para-wrap {
  position: relative;
  transition: background-color 0.2s ease;
  padding: 4px 8px;
}
.reader-para-wrap:hover {
  background-color: rgba(33, 40, 189, 0.05);
}
.para-reaction-btn {
  position: absolute;
  right: -36px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  background: var(--reader-panel-bg);
  border: 1px solid var(--reader-border);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
}
.reader-para-wrap:hover .para-reaction-btn {
  opacity: 1;
}

/* Reader Themes */
.theme-sepia {
  --reader-bg: #fbf0d9;
  --reader-text: #3c2f1f;
  --reader-panel-bg: #f4e4c2;
  --reader-border: #e3d0aa;
}
.theme-dark {
  --reader-bg: #131722;
  --reader-text: #e2e8f0;
  --reader-panel-bg: #1c2233;
  --reader-border: #2d3748;
}
.theme-black {
  --reader-bg: #000000;
  --reader-text: #e4e4e7;
  --reader-panel-bg: #09090b;
  --reader-border: #27272a;
}

/* Spoiler Shield */
.spoiler-shield {
  filter: blur(6px);
  user-select: none;
  cursor: pointer;
  transition: filter 0.3s ease;
}
.spoiler-shield.revealed {
  filter: none !important;
  user-select: auto;
}

/* Toast */
#app-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999999;
  background: var(--colors-primary);
  color: #ffffff;
  padding: 14px 24px;
  border-radius: var(--rounded-md);
  font-family: var(--font-family-wickret);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.21px;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(120px);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}
#app-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   COOL KINETIC ANIMATIONS & INTERACTIVE 3D HERO BOOK
   ========================================================================== */

/* Keyframe Animations */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1.5deg); }
}

@keyframes float-reverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-1.5deg); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 0.2; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

@keyframes shimmer-sheen {
  0% { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}

@keyframes flow-dash {
  to { stroke-dashoffset: -40; }
}

.animate-float-slow {
  animation: float-slow 5s ease-in-out infinite;
}

.animate-float-reverse {
  animation: float-reverse 6s ease-in-out infinite;
}

.animate-pulse-ring {
  animation: pulse-ring 2.5s ease-in-out infinite;
}

/* 3D Hero Hardcover Book */
.hero-3d-stage {
  perspective: 1600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-3d-book {
  width: 290px;
  height: 420px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-26deg) rotateX(12deg);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  cursor: pointer;
}

.hero-3d-book:hover {
  transform: rotateY(-12deg) rotateX(4deg) scale(1.06);
}

.hero-book-spine {
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 100%;
  transform: rotateY(-90deg) translateZ(20px);
  background: linear-gradient(to right, #0019ac, #2128bd);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.hero-book-back {
  position: absolute;
  inset: 0;
  background: #0f172a;
  transform: translateZ(-20px);
  border: 1px solid rgba(0, 95, 254, 0.3);
}

.hero-book-pages-right {
  position: absolute;
  top: 5px; right: 0;
  width: 38px;
  height: calc(100% - 10px);
  transform: rotateY(90deg) translateZ(19px);
  background: repeating-linear-gradient(
    to bottom,
    #fdf6e2 0px,
    #f3e8c9 2px,
    #e2d5b3 3px,
    #fffbf0 4px
  );
  box-shadow: inset 0 0 4px rgba(0,0,0,0.15);
}

.hero-book-cover-front {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: linear-gradient(135deg, #2128bd 0%, #0019ac 60%, #000d66 100%);
  border: 2px solid #005ffe;
  padding: 28px 24px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 18px 20px 40px rgba(0, 25, 172, 0.25);
}

.hero-3d-book:hover .hero-book-cover-front {
  transform: rotateY(-36deg);
}

.hero-book-inside-page {
  position: absolute;
  inset: 4px 6px 4px 10px;
  background: #fbf7ee;
  padding: 28px 20px;
  transform-origin: left center;
  transform-style: preserve-3d;
  color: #1e293b;
  font-family: 'Merriweather', serif;
  font-size: 10px;
  line-height: 1.6;
  border-left: 2px solid #e2d5b3;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: 0.05s;
}

.hero-3d-book:hover .hero-book-inside-page {
  transform: rotateY(-20deg);
}

/* Sheen effect on hover */
.hero-book-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.hero-3d-book:hover .hero-book-sheen {
  opacity: 1;
  animation: shimmer-sheen 1.8s infinite;
}


/* Scroll Reveal Elements */
.reveal-item {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   HERO 3D BOOK ZOOM EXPANSION (ULTRA-SMOOTH FLUID DOCK TRANSITION)
   ========================================================================== */
#hero-book-deck {
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.hero-zoom-book {
  position: relative;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.28s ease,
              box-shadow 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Default Rest Positions (Compact/Chhoti Size with Clear Stacking) */
.hero-zoom-left {
  transform: rotateY(14deg) rotateZ(-3deg) translateZ(0px);
  z-index: 10;
}

.hero-zoom-center {
  transform: translateY(-16px) translateZ(35px);
  z-index: 20;
}

.hero-zoom-right {
  transform: rotateY(-14deg) rotateZ(3deg) translateZ(0px);
  z-index: 10;
}

/* When deck has active zoom: non-active books smoothly step back without jarring filters */
#hero-book-deck.has-active-zoom .hero-zoom-book:not(.is-zoomed) {
  opacity: 0.6;
  transform: scale(0.92) translateY(6px) translateZ(-15px);
}

/* Active Zoomed Book: Silky Smooth Magnification */
.hero-zoom-book.is-zoomed {
  transform: translateY(-34px) translateZ(90px) scale(1.4) rotateY(0deg) rotateZ(0deg) !important;
  z-index: 50 !important;
  opacity: 1 !important;
}

.hero-zoom-book.is-zoomed > div {
  box-shadow: 0 35px 70px -10px rgba(0, 0, 0, 0.42), 0 20px 30px -10px rgba(0, 95, 254, 0.3) !important;
}

.hero-zoom-book.is-zoomed .hero-book-btn {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Pure CSS fallback if JS is disabled */
@media (hover: hover) and (pointer: fine) {
  #hero-book-deck:not(.has-active-zoom) .hero-zoom-book:hover {
    transform: translateY(-34px) translateZ(90px) scale(1.4) rotateY(0deg) rotateZ(0deg);
    z-index: 50;
    opacity: 1;
  }
}

/* Mobile Friendly Scale */
@media (max-width: 640px) {
  .hero-zoom-book.is-zoomed {
    transform: translateY(-20px) translateZ(60px) scale(1.22) rotateY(0deg) rotateZ(0deg) !important;
  }
}

/* ==========================================================================
   SCROLL ENGINE INTERACTIONS & KINETIC REVEALS
   ========================================================================== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Snappy Stagger Delays for Fluid Cascading */
.stagger-1 { transition-delay: 0.04s; }
.stagger-2 { transition-delay: 0.08s; }
.stagger-3 { transition-delay: 0.12s; }
.stagger-4 { transition-delay: 0.16s; }

/* Subtle Parallax Background Watermarks */
.scroll-watermark {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(80px, 15vw, 220px);
  font-weight: 900;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 95, 254, 0.035);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* Catalog Grid Layout (Ensures responsive columns) */
#catalogGrid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (min-width: 640px) {
  #catalogGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  #catalogGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem;
  }
}

/* 3D Interactive Tilt on Catalog Cards */
.card-3d-wrapper {
  perspective: 1000px;
  position: relative;
  z-index: 10;
}

.card-3d-wrapper .wt-card {
  position: relative;
  z-index: 10;
  background-color: #FFFFFF;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
  will-change: transform;
  transform-style: preserve-3d;
}

.card-3d-wrapper:hover .wt-card {
  box-shadow: 0 25px 50px -12px rgba(0, 95, 254, 0.2), 0 10px 20px -5px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 95, 254, 0.4);
}

/* Workflow Step Cards Neon Indicator */
.workflow-step-card {
  position: relative;
  z-index: 10;
  background-color: #FFFFFF;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}

.workflow-step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 45px -10px rgba(0, 95, 254, 0.18);
  border-color: #005FFE;
}

/* Live Split Simulator Pulse Glow when in view */
@keyframes simulator-spotlight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 95, 254, 0); }
  50% { box-shadow: 0 0 25px 2px rgba(0, 95, 254, 0.15); }
}

.simulator-highlight {
  animation: simulator-spotlight 3s ease-in-out infinite;
  position: relative;
  z-index: 10;
}

/* ==========================================================================
   AMBIENT FULLSCREEN WAVY FLOATING KINETIC TYPOGRAPHY
   ========================================================================== */
/* ==========================================================================
   AMBIENT FULLSCREEN WAVY FLOATING KINETIC TYPOGRAPHY
   ========================================================================== */
#wavy-ambient-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  user-select: none;
}

header.wt-band-canvas {
  background-color: transparent !important;
}

#wavy-text-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ==========================================================================
   REAL PDF & EPUB READER STYLES
   ========================================================================== */
.pdf-page-sheet {
  background-color: #FFFFFF;
  color: #1a1a1a;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  margin-bottom: 32px;
  position: relative;
  border-radius: 2px;
  padding: 56px 64px 48px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 620px;
  min-height: 877px; /* A4 aspect ratio 1 : 1.414 */
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  user-select: text;
}

.pdf-spread-mode {
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.pdf-spread-mode .pdf-page-sheet {
  margin-bottom: 24px;
}

/* Authentic physical book page gutter line */
.pdf-page-sheet.pdf-left-page {
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.pdf-page-sheet.pdf-right-page {
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.pdf-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888888;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 12px;
  margin-bottom: 28px;
}

.pdf-page-body {
  flex: 1;
  font-family: 'Merriweather', 'Georgia', serif;
  font-size: 13.5px;
  line-height: 1.82;
  color: #222222;
  text-align: justify;
}

.pdf-page-body p {
  margin-bottom: 1.25em;
  text-indent: 1.5em;
}
.pdf-page-body p:first-of-type {
  text-indent: 0;
}

.pdf-page-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #999999;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 12px;
  margin-top: 28px;
}

/* EPUB 2-Column Spread Mode */
#epub-page-surface.spread-active {
  max-width: 1240px;
}
#epub-page-surface.spread-active #epub-page-content {
  column-count: 2;
  column-gap: 56px;
  column-rule: 1px solid var(--reader-border);
}

/* ============================================================
   ANTI-PIRACY DRM, ANTI-SCREENSHOT & WATERMARK SHIELD
   ============================================================ */

/* Disable printing entirely */
@media print {
  html, body, #novel-reader-view, #reader-viewport, #pdf-reader-container, #epub-reader-container {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Strict copy and text-selection blocking on reader stage */
#novel-reader-view,
#reader-viewport,
#reader-content,
#pdf-pages-viewport,
#epub-page-surface,
.drm-protected-text {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Dynamic Anti-Piracy Watermark Pattern */
.drm-watermark-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 35;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;
  opacity: 0.16;
}

.drm-watermark-stamp {
  transform: rotate(-22deg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #1e293b;
  padding: 8px 18px;
  border: 1px dashed rgba(0, 95, 254, 0.35);
  border-radius: 9999px;
  background: rgba(238, 251, 255, 0.4);
  user-select: none;
  white-space: nowrap;
  margin: 16px 12px;
}

.theme-dark .drm-watermark-stamp,
.theme-black .drm-watermark-stamp {
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}

/* Privacy shield curtain when window loses focus */
#reader-blur-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 15, 30, 0.94);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease-in-out;
}

#reader-blur-curtain.hidden {
  display: none !important;
}

/* ==========================================================================
   KINDLE-STYLE HIGHLIGHTS & NOTES STYLING
   ========================================================================== */
mark.stepzi-highlight {
  border-radius: 4px;
  padding: 1px 3px;
  cursor: pointer;
  transition: opacity 0.15s ease, filter 0.15s ease;
  color: inherit;
  text-decoration: none;
}
mark.stepzi-highlight:hover {
  filter: brightness(0.92);
}
mark.stepzi-highlight.hl-yellow {
  background-color: #FEF08A !important;
  color: #713F12 !important;
}
mark.stepzi-highlight.hl-blue {
  background-color: #BAE6FD !important;
  color: #0369A1 !important;
}
mark.stepzi-highlight.hl-purple {
  background-color: #E9D5FF !important;
  color: #6B21A8 !important;
}
.theme-dark mark.stepzi-highlight.hl-yellow,
.theme-black mark.stepzi-highlight.hl-yellow {
  background-color: #854D0E !important;
  color: #FEF08A !important;
}
.theme-dark mark.stepzi-highlight.hl-blue,
.theme-black mark.stepzi-highlight.hl-blue {
  background-color: #0369A1 !important;
  color: #E0F2FE !important;
}
.theme-dark mark.stepzi-highlight.hl-purple,
.theme-black mark.stepzi-highlight.hl-purple {
  background-color: #581C87 !important;
  color: #F3E8FF !important;
}
.highlight-note-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  vertical-align: super;
  margin-left: 2px;
  cursor: pointer;
}

/* ==========================================================================
   STOREFRONT & CLOUD READER UNIFIED DARK MODE SPECIFICATION
   High-contrast, cohesive slate-obsidian palette, accessible typography
   ========================================================================== */

/* 1. Global Document & Canvas Inversion */
html.dark {
  background-color: #0B0F19;
  color: #F1F5F9;
  color-scheme: dark;
}

html.dark body {
  background-color: #0B0F19 !important;
  color: #E2E8F0 !important;
}

/* 2. Top Navigation Bar */
html.dark nav#navbar {
  background-color: rgba(11, 15, 25, 0.95) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5) !important;
}

html.dark nav#navbar a,
html.dark nav#navbar button {
  color: #E2E8F0 !important;
}

html.dark nav#navbar a:hover,
html.dark nav#navbar button:hover {
  color: #38BDF8 !important;
}

html.dark nav#navbar .text-\[\#2128BD\] {
  color: #FFFFFF !important;
}

html.dark nav#navbar .text-\[\#005FFE\] {
  color: #38BDF8 !important;
}

/* User profile capsule in navbar */
html.dark #navbar-profile-btn {
  background-color: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #F1F5F9 !important;
}

html.dark #navbar-profile-dropdown {
  background-color: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
}

html.dark #navbar-profile-dropdown .bg-slate-50 {
  background-color: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark #navbar-profile-dropdown .text-slate-900,
html.dark #navbar-profile-dropdown .text-slate-800 {
  color: #F8FAFC !important;
}

html.dark #navbar-profile-dropdown .text-slate-500,
html.dark #navbar-profile-dropdown .text-slate-400 {
  color: #94A3B8 !important;
}

html.dark #navbar-profile-dropdown .hover\:bg-slate-50:hover,
html.dark #navbar-profile-dropdown .hover\:bg-slate-100:hover {
  background-color: #1E293B !important;
}

/* 3. Typography & Text Hierarchy */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark .wt-display-xxl,
html.dark .wt-display-xl,
html.dark .wt-display-lg,
html.dark .wt-display-lg-strong,
html.dark .wt-heading-md,
html.dark .wt-heading-md-strong,
html.dark .wt-body-xl-strong {
  color: #93C5FD !important;
}

html.dark .wt-body-xl,
html.dark .wt-body-lg,
html.dark p.text-black\/70,
html.dark p.text-black\/60,
html.dark .text-black\/70,
html.dark .text-black\/60,
html.dark .text-slate-700,
html.dark .text-slate-600 {
  color: #CBD5E1 !important;
}

html.dark .text-black\/50,
html.dark .text-black\/40,
html.dark .text-slate-500,
html.dark .text-slate-400 {
  color: #94A3B8 !important;
}

html.dark .text-black,
html.dark .text-slate-900,
html.dark .text-cuberto-dark {
  color: #F8FAFC !important;
}

html.dark .text-\[\#2128BD\] {
  color: #93C5FD !important;
}

html.dark .text-\[\#2128BD\]\/70 {
  color: #94A3B8 !important;
}

html.dark .text-\[\#005FFE\],
html.dark .text-cuberto-electric {
  color: #60A5FA !important;
}

html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-emerald-800 {
  color: #34D399 !important;
}

html.dark .text-emerald-900,
html.dark .text-emerald-950 {
  color: #6EE7B7 !important;
}

html.dark .text-rose-600 {
  color: #FB7185 !important;
}

html.dark .text-rose-700 {
  color: #FDA4AF !important;
}

html.dark .text-blue-600 {
  color: #60A5FA !important;
}

html.dark .text-purple-600,
html.dark .text-purple-700 {
  color: #C084FC !important;
}

html.dark .text-amber-900,
html.dark .text-amber-800 {
  color: #FDE68A !important;
}

/* 4. Section Bands (Prevents bright background flashes) */
html.dark .wt-band-canvas {
  background-color: #0B0F19 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .wt-band-surface-alt {
  background-color: #111827 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .wt-band-neutral {
  background-color: #161F33 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .scroll-watermark {
  -webkit-text-stroke: 1px rgba(96, 165, 250, 0.07) !important;
}

/* 5. Cards & Surfaces */
html.dark .bg-white {
  background-color: #111827 !important;
  color: #F1F5F9 !important;
}

html.dark .bg-slate-50 {
  background-color: #1A2236 !important;
  color: #E2E8F0 !important;
}

html.dark .bg-slate-100 {
  background-color: #1E293B !important;
  color: #E2E8F0 !important;
}

html.dark .wt-card {
  background-color: #111827;
  border-color: rgba(255, 255, 255, 0.1);
  color: #F1F5F9;
}

html.dark .wt-card:hover {
  border-color: #60A5FA;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
}

html.dark .wt-card-surface-alt {
  background-color: #161F33;
  border-color: rgba(255, 255, 255, 0.1);
  color: #F1F5F9;
}

html.dark .workflow-step-card {
  background-color: #111827 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Borders */
html.dark .border-black\/5,
html.dark .border-black\/10,
html.dark .border-black\/15,
html.dark .border-black\/20,
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-\[rgba\(0\,95\,254\,0\.15\)\],
html.dark .border-\[rgba\(0\,95\,254\,0\.2\)\],
html.dark .border-\[rgba\(0\,95\,254\,0\.25\)\],
html.dark .border-\[rgba\(0\,95\,254\,0\.3\)\] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark .border-\[\#005FFE\],
html.dark .border-\[\#005FFE\]\/20,
html.dark .border-\[\#005FFE\]\/30 {
  border-color: rgba(96, 165, 250, 0.35) !important;
}

/* 6. Pastel Accent Containers Inversion */
html.dark .bg-\[\#EEFBFF\],
html.dark .bg-\[\#EEFBFF\]\/70,
html.dark .bg-cuberto-ice {
  background-color: rgba(30, 58, 138, 0.3) !important;
  color: #93C5FD !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
}

html.dark .bg-\[\#FDF0E5\] {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #FDE68A !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
}

/* Tag chips & pills */
html.dark .quick-tag-chip.bg-rose-50,
html.dark .bg-rose-50 {
  background-color: rgba(136, 19, 55, 0.3) !important;
  color: #FDA4AF !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
}

html.dark .quick-tag-chip.bg-blue-50,
html.dark .bg-blue-50 {
  background-color: rgba(30, 58, 138, 0.3) !important;
  color: #93C5FD !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html.dark .quick-tag-chip.bg-amber-50,
html.dark .bg-amber-50 {
  background-color: rgba(120, 53, 15, 0.3) !important;
  color: #FDE68A !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}

html.dark .quick-tag-chip.bg-emerald-50,
html.dark .bg-emerald-50 {
  background-color: rgba(6, 78, 59, 0.3) !important;
  color: #A7F3D0 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

html.dark .quick-tag-chip.bg-purple-50,
html.dark .bg-purple-50 {
  background-color: rgba(88, 28, 135, 0.3) !important;
  color: #D8B4FE !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

/* 7. Buttons & Inputs */
html.dark .wt-btn-outline {
  border-color: rgba(96, 165, 250, 0.4);
  color: #93C5FD;
}

html.dark .wt-btn-outline:hover {
  background-color: #3B82F6;
  color: #0B0F19;
  border-color: #3B82F6;
}

html.dark .wt-btn-outline-sm {
  border-color: rgba(96, 165, 250, 0.4);
  color: #60A5FA;
}

html.dark .wt-btn-outline-sm:hover {
  background-color: #3B82F6;
  color: #0B0F19;
  border-color: #3B82F6;
}

html.dark .wt-btn-text {
  color: #93C5FD;
}

html.dark .wt-btn-text:hover {
  color: #60A5FA;
}

html.dark .wt-input,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark select,
html.dark textarea {
  background-color: #111827 !important;
  color: #F8FAFC !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.dark .wt-input:focus,
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #60A5FA !important;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2) !important;
}

/* 8. Hero Search & Dropdown */
html.dark #hero-search-input {
  background-color: #111827 !important;
  color: #F8FAFC !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
}

html.dark #hero-search-input:focus {
  border-color: #60A5FA !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2) !important;
}

html.dark #hero-search-dropdown {
  background-color: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
}

html.dark #hero-search-dropdown .hover\:bg-slate-50:hover {
  background-color: #1E293B !important;
}

html.dark #hero-search-clear {
  color: #94A3B8 !important;
}

html.dark #hero-search-clear:hover {
  color: #F8FAFC !important;
}

/* 9. Marquee Banner */
html.dark .w-full.bg-\[\#2128BD\] {
  background-color: #0F172A !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  color: #F1F5F9 !important;
}

/* 10. Split & Royalty Simulator */
html.dark .simulator-highlight {
  background-color: #111827 !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
}

html.dark #calc-tier-standard,
html.dark #calc-tier-mature {
  color: #94A3B8;
}

html.dark #calc-tier-standard.bg-white {
  background-color: #1E293B !important;
  color: #60A5FA !important;
}

html.dark #calc-price-display {
  color: #60A5FA !important;
}

html.dark #calc-author-amount {
  color: #34D399 !important;
}

html.dark #calc-platform-amount {
  color: #93C5FD !important;
}

html.dark #calc-projection-amount {
  color: #34D399 !important;
}

/* 11. Modals, Sheets & Overlays */
html.dark #authorStudioModal > div,
html.dark #checkoutModal > div,
html.dark #authModal > div,
html.dark #dashboardModal > div,
html.dark #authorPublishSuccessModal > div,
html.dark #ageGateModal > div,
html.dark #drmStrikeModal > div,
html.dark #drmBannedModal > div,
html.dark #authorShareModal > div,
html.dark #myShelfDrawer {
  background-color: #0F172A !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85) !important;
}

html.dark #authorFileDropzone {
  background-color: rgba(30, 58, 138, 0.2) !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
}

html.dark #authorFileDropzone:hover {
  background-color: rgba(30, 58, 138, 0.35) !important;
  border-color: #60A5FA !important;
}

html.dark #authorFileDropzone .bg-white {
  background-color: #1E293B !important;
  color: #60A5FA !important;
}

html.dark #dashboardModal header {
  background-color: #0F172A !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark #dash-sidebar {
  background-color: #0B0F19 !important;
  border-right-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark #dash-content-area {
  background-color: #0F172A !important;
  color: #F1F5F9 !important;
}

html.dark #dash-content-area .bg-slate-50,
html.dark #dash-content-area .bg-slate-100 {
  background-color: #1E293B !important;
  color: #F1F5F9 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark #dash-content-area .bg-white {
  background-color: #131A2A !important;
  color: #F1F5F9 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark #dash-content-area table th {
  background-color: #1E293B !important;
  color: #94A3B8 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark #dash-content-area table td {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: #E2E8F0 !important;
}

html.dark #dash-wallet-pill {
  background-color: rgba(6, 78, 59, 0.35) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #6EE7B7 !important;
}

/* 12. Floating Scroll Jump Dock */
html.dark #scroll-jump-pill {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(96, 165, 250, 0.3) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

html.dark #scroll-jump-pill a {
  color: #CBD5E1 !important;
}

html.dark #scroll-jump-pill a:hover {
  background-color: rgba(59, 130, 246, 0.2) !important;
  color: #60A5FA !important;
}

/* 13. Novel Cloud Reader Dedicated Theme Synchronizations */
.theme-dark,
.theme-black {
  color-scheme: dark;
}

.theme-dark .reader-toolbar,
.theme-black .reader-toolbar {
  background-color: var(--reader-bg) !important;
  border-bottom-color: var(--reader-border) !important;
  color: var(--reader-text) !important;
}

.theme-dark .reader-toolbar button,
.theme-black .reader-toolbar button {
  border-color: var(--reader-border) !important;
  color: var(--reader-text) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.theme-dark .reader-toolbar button:hover,
.theme-black .reader-toolbar button:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: #38BDF8 !important;
}

.theme-dark #reader-novel-title,
.theme-black #reader-novel-title {
  color: var(--reader-text) !important;
}

.theme-dark #reader-chapter-title,
.theme-black #reader-chapter-title {
  color: #94A3B8 !important;
}

.theme-dark #reader-settings-panel,
.theme-black #reader-settings-panel,
.theme-dark #reader-toc-drawer,
.theme-black #reader-toc-drawer,
.theme-dark #reader-bookmarks-drawer,
.theme-black #reader-bookmarks-drawer,
.theme-dark #reader-highlights-drawer,
.theme-black #reader-highlights-drawer {
  background-color: var(--reader-panel-bg) !important;
  border-color: var(--reader-border) !important;
  color: var(--reader-text) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
}

.theme-dark #reader-settings-panel button,
.theme-black #reader-settings-panel button {
  border-color: var(--reader-border) !important;
  color: var(--reader-text) !important;
}

.theme-dark #reader-settings-panel .bg-black\/5,
.theme-black #reader-settings-panel .bg-black\/5 {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

.theme-dark #reader-settings-panel .bg-white,
.theme-black #reader-settings-panel .bg-white {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--reader-text) !important;
}

.theme-dark #reader-note-modal > div,
.theme-black #reader-note-modal > div {
  background-color: var(--reader-panel-bg) !important;
  border-color: var(--reader-border) !important;
  color: var(--reader-text) !important;
}

.theme-dark #reader-note-quote-preview,
.theme-black #reader-note-quote-preview {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #CBD5E1 !important;
  border-left-color: #38BDF8 !important;
}

.theme-dark #reader-note-textarea,
.theme-black #reader-note-textarea {
  background-color: rgba(0, 0, 0, 0.3) !important;
  border-color: var(--reader-border) !important;
  color: var(--reader-text) !important;
}

/* Highlights Drawer Dark & OLED Mode High-Contrast Overrides */
.theme-dark #reader-highlights-drawer,
.theme-black #reader-highlights-drawer {
  background-color: var(--reader-panel-bg) !important;
  border-color: var(--reader-border) !important;
  color: var(--reader-text) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.95) !important;
}

.theme-dark #reader-highlights-drawer .highlight-item-card,
.theme-black #reader-highlights-drawer .highlight-item-card {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
}

.theme-dark #reader-highlights-drawer .highlight-quote,
.theme-black #reader-highlights-drawer .highlight-quote {
  color: #FFFFFF !important;
  border-left-color: #38BDF8 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.theme-dark #reader-highlights-drawer .highlight-note,
.theme-black #reader-highlights-drawer .highlight-note {
  background-color: rgba(0, 0, 0, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #F1F5F9 !important;
}

.theme-dark #reader-highlights-drawer button.text-slate-400,
.theme-black #reader-highlights-drawer button.text-slate-400 {
  color: #94A3B8 !important;
}