/* ========================================================
   LIRÉA READER (BOOXREADER-INSPIRED DESIGN SYSTEM)
   24 Eye-Safe Light & Warm Readable Paper Themes (No Overly Dark Themes)
   ======================================================== */
:root,
[data-app-theme="eyecare"] {
  --bg-app: #d7e4d8;
  --bg-sidebar: #cad9cc;
  --bg-surface: #e3efe4;
  --bg-elevated: #d0dfd1;
  --bg-reader: #dce8dd;
  --text-primary: #16281b;
  --text-secondary: #354f3c;
  --text-muted: #526e59;
  --border-color: rgba(27, 46, 32, 0.12);
  --border-strong: rgba(27, 46, 32, 0.24);
  --accent-crimson: #9c2b34;
  --accent-gold: #ae7720;
  --accent-soft: rgba(156, 43, 52, 0.12);
  --shadow-card: 0 10px 26px rgba(27, 46, 32, 0.08);
  --bg-pattern: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.32), transparent 60%);
}

/* 2. Warm Maple Wood (Light Golden Woodgrain Paper — Crisp Dark Ink) */
[data-app-theme="wooden"] {
  --bg-app: #ead9c3;
  --bg-sidebar: #dfccb2;
  --bg-surface: #f4e7d4;
  --bg-elevated: #e5d2b8;
  --bg-reader: #f1e2cc;
  --text-primary: #291a0e;
  --text-secondary: #543922;
  --text-muted: #785538;
  --border-color: rgba(58, 36, 18, 0.13);
  --border-strong: rgba(58, 36, 18, 0.25);
  --accent-crimson: #9e2a25;
  --accent-gold: #b06d18;
  --accent-soft: rgba(158, 42, 37, 0.12);
  --shadow-card: 0 10px 26px rgba(58, 36, 18, 0.1);
  --bg-pattern:
    repeating-linear-gradient(
      90deg,
      rgba(130, 85, 45, 0.045) 0px,
      rgba(130, 85, 45, 0.045) 2px,
      transparent 2px,
      transparent 10px
    ),
    linear-gradient(135deg, rgba(255, 248, 236, 0.45), rgba(185, 140, 90, 0.1));
}

/* 3. Vintage Sepia */
[data-app-theme="sepia"] {
  --bg-app: #efe4ce;
  --bg-sidebar: #e6d8bd;
  --bg-surface: #f7eedb;
  --bg-elevated: #eadbc0;
  --bg-reader: #f4ead5;
  --text-primary: #2e2216;
  --text-secondary: #594530;
  --text-muted: #7d644b;
  --border-color: rgba(59, 45, 31, 0.12);
  --border-strong: rgba(59, 45, 31, 0.23);
  --accent-crimson: #9e2828;
  --accent-gold: #b8731a;
  --accent-soft: rgba(158, 40, 40, 0.12);
  --shadow-card: 0 10px 26px rgba(59, 45, 31, 0.09);
  --bg-pattern: radial-gradient(circle at 50% 30%, rgba(255, 248, 231, 0.4), rgba(166, 130, 86, 0.08));
}

/* 4. Crisp Day Paper */
[data-app-theme="light"] {
  --bg-app: #f7f5f0;
  --bg-sidebar: #efeae1;
  --bg-surface: #ffffff;
  --bg-elevated: #f3efe6;
  --bg-reader: #fbf9f5;
  --text-primary: #181a1d;
  --text-secondary: #484e5c;
  --text-muted: #6e7685;
  --border-color: rgba(28, 30, 33, 0.1);
  --border-strong: rgba(28, 30, 33, 0.2);
  --accent-crimson: #b02530;
  --accent-gold: #c9821e;
  --accent-soft: rgba(176, 37, 48, 0.1);
  --shadow-card: 0 10px 28px rgba(28, 30, 33, 0.07);
  --bg-pattern: none;
}

/* 5. Soft Pearl Slate (Replaces Dark Obsidian with Soft Daylight Slate) */
[data-app-theme="dark"] {
  --bg-app: #e2e7ee;
  --bg-sidebar: #d5dce6;
  --bg-surface: #eef2f7;
  --bg-elevated: #dce2eb;
  --bg-reader: #eaeff5;
  --text-primary: #18202c;
  --text-secondary: #3b485c;
  --text-muted: #5d6b82;
  --border-color: rgba(24, 32, 44, 0.11);
  --border-strong: rgba(24, 32, 44, 0.22);
  --accent-crimson: #a82834;
  --accent-gold: #b5761e;
  --accent-soft: rgba(168, 40, 52, 0.11);
  --shadow-card: 0 10px 26px rgba(24, 32, 44, 0.08);
  --bg-pattern: none;
}

/* 6. Blush Rosewood Paper (Warm Rose-Tinted Parchment) */
[data-app-theme="rosewood"] {
  --bg-app: #f2dfe3;
  --bg-sidebar: #e8d0d6;
  --bg-surface: #fbf0f2;
  --bg-elevated: #edd8dd;
  --bg-reader: #f7e8eb;
  --text-primary: #2d1419;
  --text-secondary: #5c313a;
  --text-muted: #82515b;
  --border-color: rgba(70, 25, 35, 0.12);
  --border-strong: rgba(70, 25, 35, 0.24);
  --accent-crimson: #a32234;
  --accent-gold: #b06e1a;
  --accent-soft: rgba(163, 34, 52, 0.12);
  --shadow-card: 0 10px 26px rgba(70, 25, 35, 0.08);
  --bg-pattern:
    repeating-linear-gradient(
      90deg,
      rgba(140, 50, 65, 0.03) 0px,
      rgba(140, 50, 65, 0.03) 3px,
      transparent 3px,
      transparent 12px
    );
}

/* 7. Zen Bamboo (Golden Woven Bamboo Grain Effect) */
[data-app-theme="bamboo"] {
  --bg-app: #e7dec3;
  --bg-sidebar: #ddd1b0;
  --bg-surface: #f1e9d2;
  --bg-elevated: #e2d6b5;
  --bg-reader: #ece3c9;
  --text-primary: #241e10;
  --text-secondary: #4f442b;
  --text-muted: #736443;
  --border-color: rgba(45, 38, 22, 0.12);
  --border-strong: rgba(45, 38, 22, 0.24);
  --accent-crimson: #9e2d24;
  --accent-gold: #9c6b19;
  --accent-soft: rgba(158, 45, 36, 0.12);
  --shadow-card: 0 10px 26px rgba(45, 38, 22, 0.09);
  --bg-pattern:
    repeating-linear-gradient(
      0deg,
      rgba(120, 95, 45, 0.05) 0px,
      rgba(120, 95, 45, 0.05) 1px,
      transparent 1px,
      transparent 7px
    );
}

/* 8. Ancient Vellum (Aged Manuscript Parchment Effect) */
[data-app-theme="parchment"] {
  --bg-app: #e8d5b5;
  --bg-sidebar: #dec69f;
  --bg-surface: #f2e2c6;
  --bg-elevated: #e3cca6;
  --bg-reader: #eeddc0;
  --text-primary: #261a0e;
  --text-secondary: #523b23;
  --text-muted: #78593a;
  --border-color: rgba(74, 50, 25, 0.14);
  --border-strong: rgba(74, 50, 25, 0.26);
  --accent-crimson: #8f1d21;
  --accent-gold: #a86514;
  --accent-soft: rgba(143, 29, 33, 0.13);
  --shadow-card: 0 12px 28px rgba(60, 38, 16, 0.11);
  --bg-pattern:
    radial-gradient(ellipse at center, rgba(255, 248, 232, 0.45) 0%, rgba(138, 98, 52, 0.14) 100%);
}

/* 9. Warm Saddle Chamois (Soft Tan Folio Paper) */
[data-app-theme="leather"] {
  --bg-app: #ecddd0;
  --bg-sidebar: #e0cebe;
  --bg-surface: #f6ebe1;
  --bg-elevated: #e6d5c6;
  --bg-reader: #f2e4d8;
  --text-primary: #291c14;
  --text-secondary: #573e30;
  --text-muted: #7d5d4b;
  --border-color: rgba(55, 35, 22, 0.12);
  --border-strong: rgba(55, 35, 22, 0.24);
  --accent-crimson: #9e2b25;
  --accent-gold: #ad6c1b;
  --accent-soft: rgba(158, 43, 37, 0.12);
  --shadow-card: 0 10px 26px rgba(55, 35, 22, 0.09);
  --bg-pattern: none;
}

/* 10. Belgian Warm Linen (Cross-Woven Flax Canvas Effect) */
[data-app-theme="linen"] {
  --bg-app: #ece7dc;
  --bg-sidebar: #e2dcd0;
  --bg-surface: #f5f1e8;
  --bg-elevated: #e6e0d3;
  --bg-reader: #f1ede3;
  --text-primary: #201e1a;
  --text-secondary: #4f4b42;
  --text-muted: #757064;
  --border-color: rgba(37, 35, 31, 0.11);
  --border-strong: rgba(37, 35, 31, 0.21);
  --accent-crimson: #a32931;
  --accent-gold: #b5761e;
  --accent-soft: rgba(163, 41, 49, 0.11);
  --shadow-card: 0 10px 25px rgba(37, 35, 31, 0.07);
  --bg-pattern:
    repeating-linear-gradient(0deg, rgba(80, 70, 55, 0.03) 0px, rgba(80, 70, 55, 0.03) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(80, 70, 55, 0.03) 0px, rgba(80, 70, 55, 0.03) 1px, transparent 1px, transparent 4px);
}

/* 11. Matte E-Ink Carta (Paperwhite Monochrome Display Effect) */
[data-app-theme="eink"] {
  --bg-app: #e8e9e4;
  --bg-sidebar: #dedfd9;
  --bg-surface: #f2f3ee;
  --bg-elevated: #e2e3dd;
  --bg-reader: #eeeee9;
  --text-primary: #141514;
  --text-secondary: #3d3f3d;
  --text-muted: #666966;
  --border-color: rgba(20, 21, 20, 0.15);
  --border-strong: rgba(20, 21, 20, 0.32);
  --accent-crimson: #222422;
  --accent-gold: #4a4d4a;
  --accent-soft: rgba(20, 21, 20, 0.1);
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.06);
  --bg-pattern: none;
}

/* 12. Kyoto Matcha (Ceremonial Green Tea Leaf) */
[data-app-theme="matcha"] {
  --bg-app: #dce5ce;
  --bg-sidebar: #cfdabd;
  --bg-surface: #e7efda;
  --bg-elevated: #d5e0c4;
  --bg-reader: #e2ebd4;
  --text-primary: #1a2614;
  --text-secondary: #3d5232;
  --text-muted: #5d7550;
  --border-color: rgba(30, 43, 24, 0.11);
  --border-strong: rgba(30, 43, 24, 0.22);
  --accent-crimson: #9e2c34;
  --accent-gold: #9c721c;
  --accent-soft: rgba(158, 44, 52, 0.11);
  --shadow-card: 0 10px 26px rgba(30, 43, 24, 0.08);
  --bg-pattern: radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.35), transparent 60%);
}

/* 13. Honey Candlelight (Warm Zero-Blue Amber Paper — High Readability) */
[data-app-theme="candlelight"] {
  --bg-app: #f4e2be;
  --bg-sidebar: #ead4aa;
  --bg-surface: #fbf0d8;
  --bg-elevated: #eedbb2;
  --bg-reader: #f8e8c8;
  --text-primary: #2b1d0c;
  --text-secondary: #593e1e;
  --text-muted: #805c33;
  --border-color: rgba(65, 42, 15, 0.13);
  --border-strong: rgba(65, 42, 15, 0.25);
  --accent-crimson: #a32c1f;
  --accent-gold: #b86f14;
  --accent-soft: rgba(184, 111, 20, 0.14);
  --shadow-card: 0 10px 26px rgba(65, 42, 15, 0.09);
  --bg-pattern: radial-gradient(circle at 50% 0%, rgba(255, 230, 175, 0.45), transparent 70%);
}

/* 14. Nordic Fjord (Misty Glacier Blue-Grey) */
[data-app-theme="nordic"] {
  --bg-app: #dce5ec;
  --bg-sidebar: #cedae3;
  --bg-surface: #e8eff4;
  --bg-elevated: #d4dfe8;
  --bg-reader: #e2eaf0;
  --text-primary: #15222e;
  --text-secondary: #3a4f63;
  --text-muted: #5d758a;
  --border-color: rgba(24, 38, 51, 0.11);
  --border-strong: rgba(24, 38, 51, 0.22);
  --accent-crimson: #a62b38;
  --accent-gold: #b07822;
  --accent-soft: rgba(166, 43, 56, 0.11);
  --shadow-card: 0 10px 26px rgba(24, 38, 51, 0.08);
  --bg-pattern: none;
}

/* 15. Soft Velvet Rose (Pastel Burgundy Cream Paper) */
[data-app-theme="velvet"] {
  --bg-app: #f0dce3;
  --bg-sidebar: #e5ccd5;
  --bg-surface: #f9edf1;
  --bg-elevated: #ebd5dd;
  --bg-reader: #f5e4ea;
  --text-primary: #2b121b;
  --text-secondary: #592c3c;
  --text-muted: #804a5d;
  --border-color: rgba(65, 20, 36, 0.12);
  --border-strong: rgba(65, 20, 36, 0.24);
  --accent-crimson: #a82440;
  --accent-gold: #b3701e;
  --accent-soft: rgba(168, 36, 64, 0.12);
  --shadow-card: 0 10px 26px rgba(65, 20, 36, 0.08);
  --bg-pattern: radial-gradient(circle at 50% 25%, rgba(255, 240, 245, 0.4), transparent 65%);
}

/* 16. Florentine Marble (Cool Alabaster Stone Veining Effect) */
[data-app-theme="marble"] {
  --bg-app: #edeef0;
  --bg-sidebar: #e3e5e8;
  --bg-surface: #f7f8fa;
  --bg-elevated: #e7e9ec;
  --bg-reader: #f3f4f6;
  --text-primary: #181c22;
  --text-secondary: #454d5b;
  --text-muted: #6d7685;
  --border-color: rgba(27, 31, 38, 0.1);
  --border-strong: rgba(27, 31, 38, 0.2);
  --accent-crimson: #9e2632;
  --accent-gold: #b87c24;
  --accent-soft: rgba(158, 38, 50, 0.1);
  --shadow-card: 0 10px 28px rgba(27, 31, 38, 0.07);
  --bg-pattern:
    linear-gradient(125deg, transparent 35%, rgba(140, 150, 165, 0.06) 38%, transparent 41%),
    linear-gradient(65deg, transparent 60%, rgba(140, 150, 165, 0.05) 63%, transparent 66%);
}

/* 17. Sahara Sandstone (Warm Terracotta Ochre Clay) */
[data-app-theme="sandstone"] {
  --bg-app: #ead6c0;
  --bg-sidebar: #dfc7ad;
  --bg-surface: #f4e4d2;
  --bg-elevated: #e5ceb4;
  --bg-reader: #efdec9;
  --text-primary: #2b1b10;
  --text-secondary: #5c3d28;
  --text-muted: #825b41;
  --border-color: rgba(51, 32, 20, 0.12);
  --border-strong: rgba(51, 32, 20, 0.23);
  --accent-crimson: #a82e24;
  --accent-gold: #bf731b;
  --accent-soft: rgba(168, 46, 36, 0.12);
  --shadow-card: 0 10px 26px rgba(51, 32, 20, 0.09);
  --bg-pattern: none;
}

/* 18. Provençal Dusk (Calming Botanical Lavender Mist) */
[data-app-theme="lavender"] {
  --bg-app: #e4dff0;
  --bg-sidebar: #d8d1e8;
  --bg-surface: #efeaf9;
  --bg-elevated: #ddd6ed;
  --bg-reader: #eae5f5;
  --text-primary: #1f1830;
  --text-secondary: #483c63;
  --text-muted: #6e608c;
  --border-color: rgba(35, 28, 53, 0.11);
  --border-strong: rgba(35, 28, 53, 0.21);
  --accent-crimson: #9e2b4b;
  --accent-gold: #b37824;
  --accent-soft: rgba(158, 43, 75, 0.11);
  --shadow-card: 0 10px 26px rgba(35, 28, 53, 0.08);
  --bg-pattern: none;
}

/* 19. Mint Woodland (Soft Botanical Meadow Paper) */
[data-app-theme="forest"] {
  --bg-app: #d5eadc;
  --bg-sidebar: #c5dfd0;
  --bg-surface: #e5f5eb;
  --bg-elevated: #cee5d7;
  --bg-reader: #dff0e6;
  --text-primary: #13261b;
  --text-secondary: #2f523e;
  --text-muted: #4f755f;
  --border-color: rgba(19, 38, 27, 0.12);
  --border-strong: rgba(19, 38, 27, 0.23);
  --accent-crimson: #9c2b34;
  --accent-gold: #a67219;
  --accent-soft: rgba(156, 43, 52, 0.11);
  --shadow-card: 0 10px 26px rgba(19, 38, 27, 0.08);
  --bg-pattern: none;
}

/* 20. Creamy Oat Latte (Soft Coffee & Warm Cream Paper) */
[data-app-theme="espresso"] {
  --bg-app: #ebe0d5;
  --bg-sidebar: #dfd1c3;
  --bg-surface: #f7efe7;
  --bg-elevated: #e5d8ca;
  --bg-reader: #f2e8df;
  --text-primary: #241b15;
  --text-secondary: #524034;
  --text-muted: #786152;
  --border-color: rgba(45, 32, 24, 0.12);
  --border-strong: rgba(45, 32, 24, 0.23);
  --accent-crimson: #9e2a2b;
  --accent-gold: #b06e1c;
  --accent-soft: rgba(158, 42, 43, 0.11);
  --shadow-card: 0 10px 26px rgba(45, 32, 24, 0.08);
  --bg-pattern: none;
}

/* 21. Sunlit Apricot Copper (Soft Peach-Bronze Paper) */
[data-app-theme="copper"] {
  --bg-app: #f0ddd1;
  --bg-sidebar: #e5cdbe;
  --bg-surface: #fbf0e9;
  --bg-elevated: #ebd4c5;
  --bg-reader: #f7e6dc;
  --text-primary: #291810;
  --text-secondary: #593828;
  --text-muted: #805743;
  --border-color: rgba(58, 30, 18, 0.12);
  --border-strong: rgba(58, 30, 18, 0.24);
  --accent-crimson: #a82e22;
  --accent-gold: #b86d19;
  --accent-soft: rgba(168, 46, 34, 0.12);
  --shadow-card: 0 10px 26px rgba(58, 30, 18, 0.08);
  --bg-pattern: none;
}

/* 22. Architect Daylight Grid (Soft Sky Drafting Paper) */
[data-app-theme="blueprint"] {
  --bg-app: #dae8f5;
  --bg-sidebar: #cadbed;
  --bg-surface: #ebf4fc;
  --bg-elevated: #d3e3f2;
  --bg-reader: #e3eef9;
  --text-primary: #122438;
  --text-secondary: #314f6e;
  --text-muted: #547496;
  --border-color: rgba(18, 36, 56, 0.12);
  --border-strong: rgba(18, 36, 56, 0.24);
  --accent-crimson: #9e2835;
  --accent-gold: #ad721c;
  --accent-soft: rgba(158, 40, 53, 0.11);
  --shadow-card: 0 10px 26px rgba(18, 36, 56, 0.08);
  --bg-pattern:
    linear-gradient(rgba(30, 75, 125, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 75, 125, 0.045) 1px, transparent 1px);
}

/* 23. Morning Starlight (Soft Periwinkle & Crisp Ink) */
[data-app-theme="starlight"] {
  --bg-app: #dfe4f7;
  --bg-sidebar: #d1d8f0;
  --bg-surface: #eff2fc;
  --bg-elevated: #d8def5;
  --bg-reader: #e8ecfa;
  --text-primary: #171c36;
  --text-secondary: #3b436e;
  --text-muted: #616a96;
  --border-color: rgba(23, 28, 54, 0.11);
  --border-strong: rgba(23, 28, 54, 0.22);
  --accent-crimson: #a32644;
  --accent-gold: #b0741e;
  --accent-soft: rgba(163, 38, 68, 0.11);
  --shadow-card: 0 10px 26px rgba(23, 28, 54, 0.08);
  --bg-pattern: none;
}

/* 24. Crystal Studio (Bright Ice-Ivory High-Contrast Paper) */
[data-app-theme="cyber"] {
  --bg-app: #e6ecf2;
  --bg-sidebar: #d8e0e8;
  --bg-surface: #f5f8fc;
  --bg-elevated: #e0e7ef;
  --bg-reader: #eef3f8;
  --text-primary: #111824;
  --text-secondary: #334155;
  --text-muted: #58677d;
  --border-color: rgba(17, 24, 36, 0.11);
  --border-strong: rgba(17, 24, 36, 0.22);
  --accent-crimson: #be123c;
  --accent-gold: #0284c7;
  --accent-soft: rgba(190, 18, 60, 0.11);
  --shadow-card: 0 10px 26px rgba(17, 24, 36, 0.08);
  --bg-pattern: none;
}

:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-display: 'Cinzel', Georgia, serif;
  --font-mono: 'Space Grotesk', monospace;
  --reader-font: var(--font-serif);
  --reader-size: 18px;
  --reader-line: 1.75;
  --reader-max-width: 95%;
  --reader-brightness: 1;
  --transition-fast: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

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

body {
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  background-image: var(--bg-pattern, none);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========================================================
   1. OPENING VIDEO OVERLAY (16:9 Laptop/Tablet & 9:16 Mobile)
   ======================================================== */
.intro-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  width: 100dvw;
  height: 100dvh;
  width: var(--app-width, 100dvw);
  height: var(--app-height, 100dvh);
  z-index: 2000;
  background-color: #0a0c10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: manipulation;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.intro-container.fade-out {
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
}

.intro-video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: fill;
  object-position: center center;
  display: block;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #000;
}

.skip-intro-btn {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 2010;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: rgba(13, 17, 23, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #f0f6fc;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease;
  user-select: none;
}
.skip-intro-btn:hover {
  background: rgba(220, 38, 38, 0.88);
  border-color: rgba(220, 38, 38, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(220, 38, 38, 0.45);
}



/* ========================================================
   2. APP SHELL & SIDEBAR NAVIGATION
   ======================================================== */
.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
  min-height: 100dvh;
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease;
}

.app-shell.active {
  opacity: 1;
  transform: none;
}

.app-sidebar {
  background-color: var(--bg-sidebar);
  background-image: var(--bg-pattern, none);
  border-right: 1px solid var(--border-color);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 8px;
}

/* Natural Wax-Seal Shape — Prominent & Luxurious Unbounded Brand Emblem */
.wax-logo-img {
  width: 84px;
  height: 84px;
  border-radius: 0;
  border: none;
  background: transparent;
  object-fit: contain;
  box-shadow: none;
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, 0.42));
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), filter 0.25s ease;
}

.wax-logo-img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 9px 22px rgba(156, 43, 52, 0.52));
}

.reader-wax-logo {
  width: 44px !important;
  height: 44px !important;
  margin: 0 10px 0 4px !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)) !important;
  transition: transform 0.22s ease !important;
}

.reader-wax-logo:hover {
  transform: scale(1.08) !important;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 1.88rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-primary);
  line-height: 1;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
}

.nav-item:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-crimson);
  border-color: rgba(200, 50, 60, 0.25);
}

.nav-badge {
  margin-left: auto;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  padding: 2px 8px;
  border-radius: 99px;
}

.sidebar-collections {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  flex: 1;
}

.sidebar-collections-scroll {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding-right: 4px;
}

.sidebar-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  font-weight: 700;
  padding: 0 12px 6px;
}

.collection-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  padding: 8px 11px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.81rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-fast);
}

.collection-chip-rank {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.collection-chip:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.collection-chip.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.collection-chip.active .collection-chip-rank {
  color: var(--accent-crimson);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.offline-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
  padding: 6px 8px;
}

.offline-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

/* ========================================================
   3. TOPBAR & WORKSPACE CONTROLS
   ======================================================== */
.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 48px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px;
  background-color: var(--bg-app);
  background-image: var(--bg-pattern, none);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(12px);
}

/* On desktop (>920px), the top-left sidebar-brand already displays the logo at the top-left corner.
   On tablet/mobile (<=920px), sidebar moves to bottom nav, so .topbar-left-brand displays the top-left logo. */
.topbar-left-brand {
  display: none;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.topbar-brand-name {
  font-family: var(--font-display);
  font-size: 1.78rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.9px;
  line-height: 1;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 9px 14px;
  width: 100%;
  max-width: 440px;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.search-box:focus-within {
  border-color: var(--accent-crimson);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-box input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.88rem;
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Theme & Effects + Category Selector Buttons (Left of Import PDF / EPUB) */
.theme-picker-wrap {
  position: relative;
}

.theme-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 7px 14px;
  border-radius: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  white-space: nowrap;
}

.theme-select-btn:hover,
.theme-select-btn.active {
  border-color: var(--accent-crimson);
  background: var(--bg-elevated);
}

.theme-btn-swatch {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid rgba(0, 0, 0, 0.22);
  flex-shrink: 0;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.35);
}

.category-btn-swatch {
  width: auto;
  min-width: 26px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-crimson), var(--accent-gold));
  border-color: rgba(255, 255, 255, 0.25);
}

.theme-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.theme-btn-kicker {
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  font-weight: 700;
}

.theme-btn-current {
  font-size: 0.81rem;
  font-weight: 700;
  color: var(--text-primary);
}

.theme-chevron {
  color: var(--text-muted);
  transition: transform 0.22s ease;
}

.theme-select-btn[aria-expanded="true"] .theme-chevron {
  transform: rotate(180deg);
  color: var(--accent-crimson);
}

/* Floating Theme & Category Vault Overlay Sections (Open directly over books at any scroll position) */
.theme-effects-vault {
  position: fixed;
  top: var(--topbar-vault-top, 76px);
  left: calc(260px + 32px);
  right: 32px;
  max-height: calc(100dvh - var(--topbar-vault-top, 76px) - 24px);
  margin: 0;
  padding: 22px 24px;
  background: var(--bg-surface);
  background-image: var(--bg-pattern, none);
  border: 1.5px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32), 0 6px 20px rgba(0, 0, 0, 0.14);
  z-index: 125;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vaultSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-effects-vault[hidden] {
  display: none !important;
}

@keyframes vaultSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.theme-vault-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.theme-vault-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text-primary);
}

.theme-vault-sub {
  font-size: 0.79rem;
  color: var(--text-muted);
  margin-top: 3px;
}

.theme-vault-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px;
  max-height: min(380px, calc(100dvh - var(--topbar-vault-top, 76px) - 120px));
  overflow-y: auto;
  padding-right: 4px;
}

.category-vault-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}

.theme-effect-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-sans);
  cursor: pointer;
  text-align: left;
  transition: var(--transition-fast);
}

.theme-effect-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.theme-effect-card.active {
  border-color: var(--accent-crimson);
  background: var(--accent-soft);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.effect-swatch {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
}

.effect-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.effect-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.effect-badge {
  font-size: 0.66rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.import-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #c8323c, #9e2028);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(200, 50, 60, 0.28);
  transition: var(--transition-fast);
  white-space: nowrap;
}

.import-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* ========================================================
   4. BOOKSHELF & CONTINUE READING BANNER
   ======================================================== */
.view-section {
  display: none;
  padding: 28px 32px;
  max-width: 1260px;
  width: 100%;
  margin: 0 auto;
}

.view-section.active {
  display: block;
}

.continue-banner {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: var(--shadow-card);
}

.continue-left {
  display: flex;
  align-items: center;
  gap: 22px;
}

.mini-cover {
  width: 68px;
  height: 96px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 8px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  border-left: 4px solid rgba(255, 255, 255, 0.22);
}

.continue-meta {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 5px;
}

.continue-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--accent-crimson);
  font-weight: 700;
}

.continue-title {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--text-primary);
}

.continue-author {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.continue-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.mini-progress-track {
  width: 160px;
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 99px;
  overflow: hidden;
}

.mini-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-crimson), var(--accent-gold));
  border-radius: 99px;
}

.mini-progress-label {
  font-size: 0.76rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.resume-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 11px 20px;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.resume-btn:hover {
  background: var(--accent-crimson);
  color: #fff;
  border-color: var(--accent-crimson);
}

.mobile-categories {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 14px;
  margin-bottom: 12px;
  scrollbar-width: none;
}

.mobile-categories::-webkit-scrollbar {
  display: none;
}

.m-chip {
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-fast);
}

.m-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.m-chip.active {
  background: var(--accent-crimson);
  color: #fff;
  border-color: var(--accent-crimson);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.section-sub {
  font-size: 0.83rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.layout-toggle {
  display: flex;
  gap: 6px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.icon-btn.active,
.icon-btn:hover {
  color: var(--accent-crimson);
  border-color: var(--accent-crimson);
  background: var(--accent-soft);
}

/* Separated Recent Books, Paid Books & Free Books Tier Blocks */
.shelf-tier-block {
  margin-bottom: 34px;
  padding: 22px 24px 26px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}

.shelf-tier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
}

.shelf-tier-title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.tier-pill {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 99px;
  text-transform: uppercase;
}

.tier-pill-recent {
  background: rgba(59, 130, 246, 0.16);
  color: #2563eb;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.tier-pill-paid {
  background: linear-gradient(135deg, var(--accent-crimson), var(--accent-gold));
  color: #fff;
  box-shadow: 0 3px 10px rgba(200, 50, 60, 0.28);
}

.tier-pill-free {
  background: rgba(16, 185, 129, 0.16);
  color: #0f9f6e;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.shelf-tier-title {
  font-size: 1.14rem;
  font-weight: 800;
  color: var(--text-primary);
}

.shelf-tier-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.shelf-tier-count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  padding: 4px 12px;
  border-radius: 99px;
  border: 1px solid var(--border-color);
}

/* Bookshelf Grid & Book Cards */
.bookshelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 22px;
}

.bookshelf-grid.list-mode {
  grid-template-columns: 1fr;
  gap: 14px;
}

.book-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  transition: var(--transition-fast);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  position: relative;
}

.book-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.bookshelf-grid.list-mode .book-card {
  flex-direction: row;
  align-items: center;
}

.book-cover-art {
  width: 100%;
  aspect-ratio: 2 / 2.85;
  border-radius: 10px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), inset 4px 0 10px rgba(255, 255, 255, 0.14);
  border-left: 5px solid rgba(255, 255, 255, 0.2);
}

.bookshelf-grid.list-mode .book-cover-art {
  width: 84px;
  flex-shrink: 0;
  padding: 10px 8px;
}

.cover-top-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.price-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.price-badge.paid {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.price-badge.free {
  background: rgba(16, 185, 129, 0.88);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.format-badge {
  background: rgba(0, 0, 0, 0.55);
  color: #f8fafc;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.8px;
  backdrop-filter: blur(4px);
}

.bookshelf-grid.list-mode .price-badge {
  display: none;
}

.cover-center-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.bookshelf-grid.list-mode .cover-center-title {
  font-size: 0.62rem;
}

.cover-seal-footer {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  font-weight: 600;
}

.book-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.book-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.book-category-tag {
  font-size: 0.7rem;
  color: var(--accent-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.book-tier-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--accent-crimson);
}

.book-tier-tag.is-free {
  color: #0f9f6e;
}

.book-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}

.book-author {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.book-progress-wrap {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.book-progress-bar {
  flex: 1;
  height: 5px;
  background: var(--bg-elevated);
  border-radius: 99px;
  overflow: hidden;
}

.book-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-crimson), var(--accent-gold));
  border-radius: 99px;
}

.book-progress-pct {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ========================================================
   5. BOOKMARKS & HIGHLIGHTS / STUDY NOTES LISTS
   ======================================================== */
.study-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.study-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-card);
}

.study-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.study-book-name {
  font-weight: 700;
  color: var(--accent-crimson);
}

.study-quote {
  font-family: var(--font-serif);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text-primary);
  padding-left: 12px;
  border-left: 3px solid var(--accent-gold);
}

.study-note-text {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  padding: 10px 12px;
  border-radius: 8px;
}

.study-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.small-link-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 5px 11px;
  border-radius: 7px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.small-link-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  background: var(--bg-surface);
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ========================================================
   6. LIRÉA ADMIN PDF PROCESSING PIPELINE MODAL
   ======================================================== */
.pdf-processor-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(14, 15, 18, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pdf-processor-modal.open {
  display: flex;
}

.pdf-processor-card {
  width: 100%;
  max-width: 560px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pdf-proc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pdf-proc-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pdf-proc-emblem {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-crimson), #59161c);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(156, 43, 52, 0.28);
}

.pdf-proc-kicker {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--accent-crimson);
}

.pdf-proc-heading {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.pdf-proc-status-text {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.pdf-proc-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.pdf-proc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-crimson), var(--accent-gold));
  border-radius: 99px;
  transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.pdf-proc-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
}

.proc-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.proc-step-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-strong);
  flex-shrink: 0;
}

.proc-step.active {
  color: var(--text-primary);
  font-weight: 700;
}

.proc-step.active .proc-step-dot {
  background: var(--accent-gold);
  box-shadow: 0 0 0 4px rgba(174, 119, 32, 0.2);
}

.proc-step.done {
  color: var(--text-secondary);
}

.proc-step.done .proc-step-dot {
  background: #15803d;
}

.pdf-proc-publish-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.pdf-proc-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.proc-metric-pill {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}

.proc-metric-pill strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--accent-crimson);
}

.proc-metric-pill span {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.pdf-proc-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.proc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.proc-field:last-child {
  grid-column: 1 / -1;
}

.proc-field input,
.proc-field select {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.84rem;
}

.lirea-primary-btn {
  width: 100%;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, var(--accent-crimson), #6e1c24);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(156, 43, 52, 0.26);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.lirea-primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(156, 43, 52, 0.34);
}

/* ========================================================
   6B. LIRÉA PROPRIETARY INTERACTIVE DIGITAL BOOK ENGINE
   ======================================================== */
.reader-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  width: var(--app-width, 100dvw);
  height: var(--app-height, 100dvh);
  z-index: 1600;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(38, 33, 28, 0.86) 0%, rgba(16, 15, 14, 0.96) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  overflow: hidden;
  user-select: text;
}

.reader-modal.open {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Paper Stock Palettes (Preserving Book Visual Identity) */
.lirea-book-stage[data-paper-stock="ivoire"] {
  --book-paper: #fbf8f1;
  --book-paper-verso: #f8f4eb;
  --book-ink: #1c1917;
  --book-ink-secondary: #44403c;
  --book-ink-muted: #78716c;
  --book-rule: rgba(28, 25, 23, 0.11);
  --book-edge-stack: #e5dec9;
}

.lirea-book-stage[data-paper-stock="creme"] {
  --book-paper: #f4ecdc;
  --book-paper-verso: #efe5d2;
  --book-ink: #231d16;
  --book-ink-secondary: #4a3f33;
  --book-ink-muted: #7c6f5e;
  --book-rule: rgba(35, 29, 22, 0.12);
  --book-edge-stack: #dfd3bc;
}

.lirea-book-stage[data-paper-stock="sepia"] {
  --book-paper: #eadbc4;
  --book-paper-verso: #e4d3b9;
  --book-ink: #281d12;
  --book-ink-secondary: #523e29;
  --book-ink-muted: #7e664c;
  --book-rule: rgba(40, 29, 18, 0.14);
  --book-edge-stack: #d2bfa1;
}

.lirea-book-stage[data-paper-stock="lin"] {
  --book-paper: #eef1ec;
  --book-paper-verso: #e8ece5;
  --book-ink: #1b241e;
  --book-ink-secondary: #3d4a41;
  --book-ink-muted: #6c7a70;
  --book-rule: rgba(27, 36, 30, 0.12);
  --book-edge-stack: #d5dcd2;
}

.lirea-book-stage[data-paper-stock="nuit"] {
  --book-paper: #1e2024;
  --book-paper-verso: #1a1c20;
  --book-ink: #e7e2d8;
  --book-ink-secondary: #b8b2a6;
  --book-ink-muted: #847f75;
  --book-rule: rgba(231, 226, 216, 0.11);
  --book-edge-stack: #2c2f36;
}

/* ========================================================
   DISCREET TOP BAR & BOTTOM BAR (AUTO-HIDE WHEN READING)
   ======================================================== */
.lirea-topbar {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(95%, 1120px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(24, 22, 20, 0.84);
  color: #f5f0e6;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 60;
  opacity: 1;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.reader-modal.hud-hidden .lirea-topbar {
  opacity: 0;
  transform: translate(-50%, -24px);
  pointer-events: none;
}

.lirea-topbar-left,
.lirea-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lirea-topbar-left {
  min-width: 0;
  flex: 1;
}

.lirea-title-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-left: 4px;
}

.lirea-book-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: #faf6ee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.lirea-title-sep {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.75rem;
}

.lirea-chapter-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.8rem;
  color: rgba(245, 240, 230, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.lirea-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f3ede2;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lirea-ctrl-btn:hover,
.lirea-ctrl-btn.active {
  background: var(--accent-crimson);
  border-color: var(--accent-crimson);
  color: #fff;
}

.lirea-aa-icon {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.86rem;
}

.lirea-zoom-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.lirea-zoom-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lirea-zoom-btn:hover {
  background: var(--accent-crimson);
}

.lirea-zoom-val {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  min-width: 38px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

/* ========================================================
   ON-DEMAND BOOK DOWNLOAD MODAL (DECOUPLED STORAGE VAULT)
   ======================================================== */
.book-download-modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: rgba(10, 6, 4, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.book-download-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.book-download-card {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(160deg, #1f1612 0%, #140d0a 100%);
  border: 1px solid rgba(224, 146, 81, 0.28);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: dlModalSlideUp 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dlModalSlideUp {
  from { transform: translateY(14px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.book-dl-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #d8c8b8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.book-dl-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.book-dl-preview {
  display: flex;
  gap: 16px;
  align-items: center;
}

.book-dl-cover {
  width: 72px;
  height: 108px;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.book-dl-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.book-dl-title {
  font-family: var(--font-display, "Cinzel", Georgia, serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: #f7eee2;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-dl-author {
  font-size: 0.82rem;
  color: #bfa993;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-dl-size-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: #e09251;
  margin-top: 4px;
  font-weight: 600;
}

.book-dl-info-box {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.book-dl-bullet {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.78rem;
  color: #cfbeae;
  line-height: 1.35;
}

.book-dl-bullet strong {
  color: #f4e8dc;
}

.book-dl-bullet svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.book-dl-progress-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.book-dl-progress-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.book-dl-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d36b28 0%, #e09251 100%);
  transition: width 0.2s ease;
}

.book-dl-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #a89481;
}

.book-dl-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.lirea-dl-primary-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #d36b28 0%, #b85012 100%);
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(211, 107, 40, 0.35);
  transition: all 0.16s ease;
}

.lirea-dl-primary-btn:hover {
  background: linear-gradient(135deg, #e07733 0%, #c45718 100%);
  transform: translateY(-1px);
}

.lirea-dl-secondary-btn {
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #bba793;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.lirea-dl-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ========================================================
   PHYSICAL BOOK VIEWPORT & RESPONSIVE SCALING STAGE
   (ZERO INTERNAL OR VIEWPORT SCROLLING — 100% FITTED PAGES)
   ======================================================== */
body:has(.reader-modal.open) {
  overflow: hidden !important;
}

.lirea-book-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  overflow: hidden !important;
  perspective: 2400px;
}

.reader-modal.hud-hidden .lirea-book-viewport {
  padding: 8px 12px;
}

.lirea-book-viewport::-webkit-scrollbar,
.lirea-page::-webkit-scrollbar,
.lirea-page-body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.lirea-book-stage {
  position: relative;
  width: var(--book-stage-width, 94vw);
  height: var(--book-stage-height, 92vh);
  transform: scale(var(--book-zoom-scale, 1));
  transform-origin: center center;
  display: flex;
  align-items: stretch;
  justify-content: center;
  border-radius: 6px;
  background: #231c18;
  padding: 4px;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.62),
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  filter: brightness(var(--reader-brightness, 1));
  user-select: text;
  touch-action: pan-y pinch-zoom;
  will-change: transform;
}

/* Layered Paper Stack Thickness on Left & Right of Physical Book */
.lirea-paper-stack {
  height: 100%;
  flex-shrink: 0;
  background-color: var(--book-edge-stack, #e5dec9);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.04) 0px,
    rgba(0, 0, 0, 0.04) 1px,
    rgba(255, 255, 255, 0.35) 1px,
    rgba(255, 255, 255, 0.35) 2.5px
  );
  transition: width 0.3s ease;
}

.lirea-stack-left {
  width: var(--stack-left-px, 6px);
  border-radius: 3px 0 0 3px;
  box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.18);
}

.lirea-stack-right {
  width: var(--stack-right-px, 12px);
  border-radius: 0 3px 3px 0;
  box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.18);
}

/* Physical Silk Bookmark Ribbon */
.lirea-bookmark-ribbon {
  position: absolute;
  top: -4px;
  right: 48px;
  width: 20px;
  height: 54px;
  background: linear-gradient(180deg, #9c2b34 0%, #741b22 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32);
  z-index: 32;
  pointer-events: none;
}

/* Book Sheets Grid (Two-Page Spread vs. Single-Page Mode) */
.lirea-book-sheets {
  position: relative;
  z-index: 5;
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: stretch;
  background: var(--book-paper, #fbf8f1);
  border-radius: 3px;
  overflow: hidden !important;
  font-family: var(--reader-font, var(--font-serif));
  font-size: var(--reader-size, 18px);
  line-height: var(--reader-line, 1.65);
  color: var(--book-ink, #1c1917);
}

/* Single-Page Mode (Mobile, Portrait Tablet, or User Setting) */
.lirea-book-stage[data-spread-layout="single"] .lirea-book-sheets {
  grid-template-columns: minmax(0, 1fr);
}

.lirea-book-stage[data-spread-layout="single"] .lirea-page-right,
.lirea-book-stage[data-spread-layout="single"] .lirea-book-spine {
  display: none !important;
}

.lirea-page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: var(--page-pad-y, 20px) var(--page-pad-x, 34px);
  overflow: hidden !important;
  font-size: var(--page-font-size, var(--reader-size, 17px));
  line-height: var(--page-line-height, var(--reader-line, 1.62));
  color: var(--book-ink, #1c1917);
}

/* Realistic Book Curvature & Gutter Shading on Verso (Left) and Recto (Right) Pages */
.lirea-page-left {
  background-color: var(--book-paper-verso, #f8f4eb);
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.03) 0%,
      rgba(255, 255, 255, 0.35) 14%,
      transparent 78%,
      rgba(0, 0, 0, 0.04) 92%,
      rgba(0, 0, 0, 0.11) 100%
    );
}

.lirea-page-right {
  background-color: var(--book-paper, #fbf8f1);
  background-image:
    linear-gradient(
      270deg,
      rgba(0, 0, 0, 0.035) 0%,
      rgba(255, 255, 255, 0.35) 14%,
      transparent 78%,
      rgba(0, 0, 0, 0.04) 92%,
      rgba(0, 0, 0, 0.11) 100%
    );
}

.lirea-book-stage[data-spread-layout="single"] .lirea-page-left {
  background-color: var(--book-paper, #fbf8f1);
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.085) 0%,
      rgba(0, 0, 0, 0.02) 5%,
      transparent 14%,
      transparent 92%,
      rgba(0, 0, 0, 0.04) 100%
    );
}

/* Central Bookbinding Spine Gutter */
.lirea-book-spine {
  width: 24px;
  height: 100%;
  background-color: var(--book-paper, #fbf8f1);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.11) 0%,
    rgba(0, 0, 0, 0.24) 45%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(0, 0, 0, 0.22) 55%,
    rgba(0, 0, 0, 0.1) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.lirea-spine-crease {
  width: 1px;
  height: 95%;
  background: rgba(0, 0, 0, 0.22);
}

/* Running Page Headers & Footers */
.lirea-page-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: var(--page-header-pad, 6px);
  margin-bottom: var(--page-header-gap, 8px);
  border-bottom: 1px solid var(--book-rule, rgba(0, 0, 0, 0.1));
  flex-shrink: 0;
}

.lirea-running-head {
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--book-ink-muted, #78716c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lirea-page-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--page-footer-pad, 6px);
  margin-top: var(--page-footer-gap, 8px);
  border-top: 1px solid var(--book-rule, rgba(0, 0, 0, 0.08));
  flex-shrink: 0;
}

.lirea-page-footer.right {
  justify-content: flex-end;
}

.lirea-folio-num {
  font-family: var(--font-serif);
  font-size: 0.74rem;
  color: var(--book-ink-muted, #78716c);
  letter-spacing: 0.8px;
}

/* Page Body & Preserved PDF / Literary Typography (Strict Non-Scrolling Viewport) */
.lirea-page-body {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden !important;
  padding-right: 0;
  scrollbar-width: none !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.lirea-page-body h1,
.lirea-page-body .lirea-block-heading {
  font-family: var(--font-display);
  font-size: calc(1.32em * var(--page-heading-scale, 1));
  font-weight: 700;
  line-height: 1.22;
  margin: 0.16em 0 calc(0.5em * var(--page-heading-scale, 1));
  color: var(--book-ink);
  letter-spacing: 0.25px;
}

.lirea-page-body h2,
.lirea-page-body .lirea-block-subheading {
  font-family: var(--font-display);
  font-size: calc(1.12em * var(--page-heading-scale, 1));
  font-weight: 600;
  line-height: 1.28;
  margin: 0.24em 0 calc(0.42em * var(--page-heading-scale, 1));
  color: var(--book-ink);
}

.lirea-page-body p {
  margin-top: 0;
  margin-bottom: var(--page-para-gap, 0.65em);
  text-align: justify;
  hyphens: auto;
  color: var(--book-ink);
  overflow-wrap: break-word;
}

.lirea-page-body p:last-child {
  margin-bottom: 0;
}

.lirea-page-body p.drop-cap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 2.55em;
  line-height: 0.84;
  padding-right: 8px;
  padding-top: 2px;
  color: var(--accent-crimson);
  font-weight: 700;
}

.lirea-page-body blockquote,
.lirea-page-body .lirea-block-quote {
  margin: calc(0.45em * var(--page-heading-scale, 1)) 0;
  padding: 0.35em 0.95em;
  border-left: 2px solid var(--accent-gold);
  font-style: italic;
  color: var(--book-ink-secondary);
}

/* Cover Page (Page 1) Presentation */
.lirea-cover-sheet {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 6px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  color: #fdfaf3;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 0 42px rgba(0, 0, 0, 0.34);
  position: relative;
  overflow: hidden;
}

.lirea-cover-frame {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 235, 190, 0.36);
  border-radius: 4px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.lirea-cover-kicker {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(255, 240, 205, 0.85);
}

.lirea-cover-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 2.05rem);
  font-weight: 800;
  line-height: 1.2;
  color: #fff !important;
  margin: 10px 0 8px !important;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.lirea-cover-ornament {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 224, 150, 0.85), transparent);
  margin: 10px auto;
}

.lirea-cover-author {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.98rem;
  color: rgba(255, 248, 235, 0.92);
}

.lirea-cover-footer {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 240, 210, 0.78);
}

/* Frontispiece (Verso opposite Cover or Colophon) */
.lirea-frontispiece {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: var(--book-ink-muted);
}

.lirea-frontispiece-emblem {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--book-rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--accent-crimson);
  margin-bottom: 14px;
}

/* Final Page Colophon Interaction */
.lirea-final-colophon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 18px;
  gap: 10px;
}

.lirea-finis-mark {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent-crimson);
}

.lirea-colophon-Restart-btn {
  margin-top: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--book-rule);
  background: transparent;
  color: var(--book-ink);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lirea-colophon-Restart-btn:hover {
  border-color: var(--accent-crimson);
  color: var(--accent-crimson);
}

/* Preserved Illustrations & Scanned PDF Page OCR Fallback */
.lirea-page-figure {
  margin: 6px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 0;
  flex-shrink: 1;
}

.lirea-page-figure img,
.lirea-page-figure canvas {
  max-width: 100%;
  max-height: var(--page-fig-max-h, 220px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.lirea-page-figure.full-page-figure img {
  max-height: 100%;
}

.lirea-figure-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.74em;
  color: var(--book-ink-muted);
  text-align: center;
}

.lirea-scanned-page-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lirea-scanned-page-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 2px;
}

.lirea-ocr-text-layer {
  position: absolute;
  inset: 0;
  color: transparent;
  user-select: text;
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 12px;
  overflow: hidden;
}

.lirea-ocr-text-layer::selection,
.lirea-ocr-text-layer span::selection {
  background: rgba(156, 43, 52, 0.25);
  color: transparent;
}

/* Search & User Highlights */
.lirea-search-match {
  background: rgba(245, 158, 11, 0.45);
  color: inherit;
  padding: 1px 3px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.5);
}

.user-highlight {
  padding: 1px 3px;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 0.15s ease, filter 0.15s ease;
}
.user-highlight:hover {
  filter: brightness(1.08);
}
/* Vivid Fluorescent Highlighting Palette */
.user-highlight[data-color="gold"],
.user-highlight[data-color="yellow"] { background: rgba(254, 240, 138, 0.58); border-bottom: 2px solid rgba(234, 179, 8, 0.45); }
.user-highlight[data-color="rose"],
.user-highlight[data-color="coral"] { background: rgba(254, 205, 211, 0.58); border-bottom: 2px solid rgba(244, 63, 94, 0.45); }
.user-highlight[data-color="sage"],
.user-highlight[data-color="mint"] { background: rgba(187, 247, 208, 0.58); border-bottom: 2px solid rgba(34, 197, 94, 0.45); }
.user-highlight[data-color="cyan"],
.user-highlight[data-color="blue"] { background: rgba(186, 230, 253, 0.58); border-bottom: 2px solid rgba(14, 165, 233, 0.45); }

/* Night/Dark mode fluorescent intensity adjustment */
.reader-modal[data-paper-stock="night"] .user-highlight[data-color="gold"],
.reader-modal[data-paper-stock="night"] .user-highlight[data-color="yellow"] { background: rgba(250, 204, 21, 0.28); color: #fef08a; }
.reader-modal[data-paper-stock="night"] .user-highlight[data-color="rose"],
.reader-modal[data-paper-stock="night"] .user-highlight[data-color="coral"] { background: rgba(244, 63, 94, 0.28); color: #fecdd3; }
.reader-modal[data-paper-stock="night"] .user-highlight[data-color="sage"],
.reader-modal[data-paper-stock="night"] .user-highlight[data-color="mint"] { background: rgba(34, 197, 94, 0.28); color: #bbf7d0; }
.reader-modal[data-paper-stock="night"] .user-highlight[data-color="cyan"],
.reader-modal[data-paper-stock="night"] .user-highlight[data-color="blue"] { background: rgba(14, 165, 233, 0.28); color: #bae6fd; }

.lirea-page-body p.tts-speaking {
  background: rgba(197, 160, 89, 0.12);
  border-left: 3px solid #c5a059;
  padding-left: 8px;
  border-radius: 4px;
}
.tts-word-highlight {
  background: rgba(250, 204, 21, 0.55);
  color: #111827;
  padding: 0 2px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.6);
  font-weight: 600;
}

/* ========================================================
   REAL-TIME PHYSICS PAGE-TURNING ENGINE & CORNER CURL
   ======================================================== */
.lirea-curl-engine {
  position: absolute;
  inset: 4px;
  z-index: 22;
  pointer-events: none;
  overflow: hidden;
  perspective: 2200px;
}

.lirea-curl-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.36) 0%, transparent 75%);
  will-change: transform, opacity, left;
}

.lirea-peeling-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  opacity: 0;
  transform-style: preserve-3d;
  will-change: transform, left, width, opacity;
}

.lirea-book-stage[data-spread-layout="single"] .lirea-peeling-leaf,
.lirea-book-stage[data-spread-layout="single"] .lirea-curl-shadow {
  width: 100%;
}

.lirea-leaf-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 2px;
}

.lirea-leaf-front {
  background-color: var(--book-paper, #fbf8f1);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.14) 0%,
    rgba(255, 255, 255, 0.55) 26%,
    rgba(255, 255, 255, 0.1) 70%,
    rgba(0, 0, 0, 0.18) 100%
  );
  box-shadow: -18px 0 42px rgba(0, 0, 0, 0.28), 10px 0 26px rgba(0, 0, 0, 0.16);
}

.lirea-leaf-back {
  transform: rotateY(180deg);
  background-color: var(--book-paper-verso, #f8f4eb);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(255, 255, 255, 0.76) 22%,
    rgba(245, 238, 224, 0.94) 58%,
    rgba(0, 0, 0, 0.15) 100%
  );
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.32);
}

/* Interactive Outer Page Edge & Corner Drag Zones */
.lirea-edge-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 68px;
  z-index: 26;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.lirea-edge-zone:active {
  cursor: grabbing;
}

.lirea-edge-zone.disabled {
  pointer-events: none;
  opacity: 0;
}

.lirea-edge-prev {
  left: 0;
}

.lirea-edge-next {
  right: 0;
}

.lirea-corner-hint {
  position: absolute;
  bottom: 4px;
  width: 28px;
  height: 28px;
  opacity: 0;
  transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}

.lirea-corner-hint.right {
  right: 4px;
  background: linear-gradient(315deg, rgba(0, 0, 0, 0.22) 0%, rgba(255, 255, 255, 0.88) 48%, transparent 52%);
  border-top-left-radius: 8px;
  box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.14);
}

.lirea-corner-hint.left {
  left: 4px;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.22) 0%, rgba(255, 255, 255, 0.88) 48%, transparent 52%);
  border-top-right-radius: 8px;
  box-shadow: 3px -3px 8px rgba(0, 0, 0, 0.14);
}

.lirea-edge-zone:hover .lirea-corner-hint {
  opacity: 0.92;
  width: 44px;
  height: 44px;
}

/* Reduced Motion Accessibility Support */
@media (prefers-reduced-motion: reduce) {
  .lirea-peeling-leaf,
  .lirea-curl-shadow {
    display: none !important;
  }
}

/* ========================================================
   SLIDE-OVER PANELS: CONTENTS, FULL-BOOK SEARCH & SETTINGS
   ======================================================== */
.lirea-panel {
  position: absolute;
  top: 64px;
  bottom: 68px;
  width: min(90vw, 350px);
  background: rgba(24, 22, 20, 0.94);
  color: #f5f0e6;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 70;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.lirea-toc-panel {
  left: 20px;
  transform: translateX(-20px);
}

.lirea-search-panel,
.lirea-settings-popover {
  right: 20px;
  transform: translateX(20px);
}

.lirea-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.lirea-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lirea-panel-kicker {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--accent-gold);
}

.lirea-panel-header h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.lirea-panel-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f0e6;
  cursor: pointer;
}

/* Table of Contents List (01 — Introduction) */
.lirea-toc-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toc-item-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(245, 240, 230, 0.82);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.toc-item-btn:hover,
.toc-item-btn.active {
  background: rgba(156, 43, 52, 0.28);
  color: #fff;
}

.toc-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-gold);
  margin-right: 8px;
}

.toc-page-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.48);
  flex-shrink: 0;
}

/* Full-Book Search Panel */
.lirea-search-box-wrap {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lirea-search-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.84rem;
}

.lirea-search-count {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.56);
}

.lirea-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lirea-search-hit {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #f5f0e6;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.lirea-search-hit:hover {
  border-color: var(--accent-gold);
  background: rgba(255, 255, 255, 0.09);
}

.lirea-hit-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 4px;
}

.lirea-hit-snippet {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  color: rgba(245, 240, 230, 0.85);
  line-height: 1.4;
}

/* Discreet Reading Settings Panel */
.lirea-settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lirea-setting-row {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lirea-setting-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lirea-setting-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: rgba(245, 240, 230, 0.64);
}

.lirea-setting-val {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--accent-gold);
}

.lirea-paper-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.paper-stock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #f5f0e6;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
}

.paper-stock-btn.active {
  border-color: var(--accent-gold);
  background: rgba(174, 119, 32, 0.18);
}

.stock-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.lirea-seg-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.lirea-seg-group.two-cols {
  grid-template-columns: repeat(2, 1fr);
}

.lirea-seg-group.four-cols {
  grid-template-columns: repeat(4, 1fr);
}

.lirea-seg-btn {
  padding: 6px 8px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: rgba(245, 240, 230, 0.75);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.lirea-seg-btn.active {
  background: var(--accent-crimson);
  color: #fff;
}

.lirea-stepper-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lirea-stepper-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent-gold);
  cursor: pointer;
}

.lirea-step-btn {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}

.lirea-toggles-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lirea-toggle-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lirea-secondary-btn {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

.lirea-secondary-btn:hover {
  border-color: var(--accent-gold);
}

.reading-theme-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.reading-theme-strip::-webkit-scrollbar {
  display: none;
}

.r-theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f0e6;
  font-size: 0.68rem;
  white-space: nowrap;
  cursor: pointer;
}

.r-theme-chip.active {
  border-color: var(--accent-gold);
  background: rgba(174, 119, 32, 0.22);
}

.swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ========================================================
   DISCREET BOTTOM BAR (PAGE SCRUBBER & PREV/NEXT)
   ======================================================== */
.lirea-bottombar {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(94%, 760px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 16px;
  background: rgba(24, 22, 20, 0.84);
  color: #f5f0e6;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 60;
  opacity: 1;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.reader-modal.hud-hidden .lirea-bottombar {
  opacity: 0;
  transform: translate(-50%, 24px);
  pointer-events: none;
}

.lirea-nav-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f0e6;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.lirea-nav-arrow:hover:not(:disabled) {
  background: var(--accent-crimson);
  border-color: var(--accent-crimson);
  color: #fff;
}

.lirea-nav-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.lirea-scrubber-cluster {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lirea-scrubber-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.lirea-progress-label {
  font-family: var(--font-mono);
  font-size: 0.71rem;
  color: rgba(245, 240, 230, 0.86);
}

.lirea-bm-indicator {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-gold);
}

.lirea-scrubber-track-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lirea-page-scrubber {
  width: 100%;
  accent-color: var(--accent-gold);
  cursor: pointer;
  height: 4px;
}

.lirea-progress-hairline {
  display: none;
}

/* Floating Text Selection Toolbar */
.selection-toolbar {
  position: fixed;
  z-index: 95;
  background: rgba(24, 22, 20, 0.95);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.hl-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hl-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.hl-btn:hover {
  transform: scale(1.1);
  border-color: #ffffff;
}

.hl-btn .hl-cross-icon {
  display: none;
  pointer-events: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  color: #141414;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.95);
}

.hl-btn.hl-rose .hl-cross-icon {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.hl-btn.is-active-hl {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.36);
  transform: scale(1.12);
}

.hl-btn.is-active-hl .hl-cross-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hl-gold, .hl-yellow { background: #facc15; }
.hl-rose, .hl-coral { background: #f43f5e; }
.hl-sage, .hl-mint { background: #22c55e; }
.hl-cyan, .hl-blue { background: #38bdf8; }

.sel-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
}

.sel-action-btn {
  background: transparent;
  border: none;
  color: #f5f0e6;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 7px;
  cursor: pointer;
}

.sel-action-btn:hover {
  color: var(--accent-gold);
}

/* ========================================================
   7. RESPONSIVE MEDIA QUERIES (TABLET, FOLDABLE, MOBILE)
   ======================================================== */
@media (max-width: 920px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    height: auto;
    z-index: 90;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    border-right: none;
    border-top: 1px solid var(--border-color);
  }

  .sidebar-brand,
  .sidebar-collections,
  .sidebar-footer {
    display: none;
  }

  .topbar-left-brand {
    display: inline-flex;
  }

  .sidebar-nav {
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
  }

  .nav-item {
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px;
    font-size: 0.72rem;
    justify-content: center;
    text-align: center;
  }

  .nav-badge,
  .hide-md {
    display: none;
  }

  .mobile-categories {
    display: flex;
  }

  .app-main {
    padding-bottom: 84px;
  }

  .theme-effects-vault {
    left: 16px;
    right: 16px;
    margin: 0;
    padding: 18px;
    max-height: calc(100dvh - var(--topbar-vault-top, 76px) - 86px);
  }

  .lirea-page {
    padding: var(--page-pad-y, 16px) var(--page-pad-x, 22px);
  }
}

@media (max-width: 640px) {
  .topbar {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .topbar-left-brand {
    order: 1;
  }

  .topbar-actions {
    order: 2;
    margin-left: auto;
    gap: 8px;
  }

  .theme-btn-kicker,
  .import-btn span,
  .hide-sm,
  .hide-xs,
  .lirea-title-sep,
  .lirea-chapter-title {
    display: none;
  }

  .search-box {
    max-width: 100%;
    order: 3;
  }

  .view-section {
    padding: 18px 16px;
  }

  .continue-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }

  .resume-btn {
    width: 100%;
    justify-content: center;
  }

  .bookshelf-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .book-card {
    padding: 12px;
  }

  .lirea-book-viewport {
    padding: 8px 6px;
  }

  .reader-modal.hud-hidden .lirea-book-viewport {
    padding: 4px 4px;
  }

  .lirea-page {
    padding: var(--page-pad-y, 14px) var(--page-pad-x, 16px);
  }

  .lirea-book-title {
    max-width: 150px;
    font-size: 0.8rem;
  }

  .pdf-proc-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .pdf-proc-fields {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   9. GOOGLE SIGN-IN GATE (RIGHT AFTER LOADING SCREEN)
      & PAID BOOK OWNERSHIP / PURCHASE MODAL
   ======================================================== */
.google-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 1950;
  background: rgba(12, 16, 22, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.google-auth-gate.open {
  opacity: 1;
  pointer-events: auto;
}

.google-auth-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--bg-surface);
  background-image: var(--bg-pattern, none);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  padding: 28px 26px 24px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 92dvh;
  overflow-y: auto;
}

.auth-gate-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.auth-gate-close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
  transform: scale(1.08);
}

.google-auth-gate.open .google-auth-card {
  transform: translateY(0) scale(1);
}

.google-auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.google-auth-brand-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 1px;
}

.google-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.google-auth-heading {
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.google-auth-sub {
  font-size: 0.83rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 18px;
}

.saved-accounts-wrap {
  width: 100%;
  margin-bottom: 14px;
  text-align: left;
}

.saved-accounts-wrap[hidden] {
  display: none !important;
}

.saved-accounts-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.saved-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.saved-account-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: var(--transition-fast);
}

.saved-account-chip:hover {
  border-color: var(--accent-crimson);
  background: var(--accent-soft);
}

.saved-account-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.saved-account-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.saved-account-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text-primary);
}

.saved-account-email {
  font-size: 0.73rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-account-badge {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-crimson);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.saved-account-badge.trusted {
  color: #059669;
}

.saved-account-badge.locked {
  color: var(--accent-crimson);
}

.google-auth-error {
  width: 100%;
  padding: 10px 13px;
  border-radius: 11px;
  border: 1px solid rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.4;
  margin-bottom: 12px;
}

.google-auth-error.info {
  border-color: rgba(37, 99, 235, 0.4);
  background: rgba(37, 99, 235, 0.1);
  color: var(--text-primary);
}

.google-auth-error[hidden] {
  display: none !important;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.google-signin-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 11px;
  text-align: left;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auth-field label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.password-mode-hint {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent-crimson);
}

.auth-field input {
  width: 100%;
  padding: 10px 13px;
  border-radius: 11px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  outline: none;
  transition: var(--transition-fast);
}

.password-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password-input-wrap input {
  padding-right: 64px;
}

.toggle-pass-btn {
  position: absolute;
  right: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.toggle-pass-btn:hover {
  border-color: var(--accent-crimson);
  color: var(--text-primary);
}

.auth-field input:focus {
  border-color: var(--accent-crimson);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.remember-device-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--text-secondary);
  cursor: pointer;
  margin-top: 2px;
  line-height: 1.35;
}

.remember-device-check input {
  accent-color: var(--accent-crimson);
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}

.google-continue-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #c8323c, #9e2028);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(200, 50, 60, 0.3);
  transition: var(--transition-fast);
  margin-top: 4px;
}

.google-continue-btn .google-g-icon {
  background: #fff;
  border-radius: 50%;
  padding: 2px;
}

.google-continue-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.google-guest-btn {
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 100%;
  padding: 9px 14px;
  border-radius: 11px;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.google-guest-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.auth-step-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.auth-step-panel[hidden] {
  display: none !important;
}

.auth-requirement-note {
  margin-top: 14px;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 600;
}

.verified-gmail-box {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  margin-bottom: 16px;
  text-align: left;
}

.verified-gmail-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.verified-gmail-addr {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.verified-gmail-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: #059669;
}

.profile-setup-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.field-compulsory {
  font-size: 0.68rem;
  font-weight: 700;
  color: #dc2626;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.phone-input-group {
  display: flex;
  gap: 8px;
  width: 100%;
}

.phone-country-select {
  flex: 0 0 148px;
  padding: 10px 8px;
  border-radius: 11px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: var(--transition-fast);
}

.phone-country-select:focus {
  border-color: var(--accent-crimson);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.phone-number-input {
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border-radius: 11px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  outline: none;
  transition: var(--transition-fast);
}

.phone-number-input:focus {
  border-color: var(--accent-crimson);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.no-otp-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 9px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #059669;
  font-size: 0.74rem;
  font-weight: 700;
  justify-content: center;
  width: 100%;
}

.no-otp-badge svg {
  flex-shrink: 0;
}

.profile-back-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition-fast);
  text-align: center;
  width: 100%;
}

.profile-back-btn:hover {
  color: var(--text-primary);
}

.account-dropdown-phone {
  font-size: 0.72rem;
  color: #059669;
  font-weight: 700;
  margin-top: 2px;
  font-family: var(--font-mono);
}

.primary-glow {
  box-shadow: 0 6px 20px rgba(200, 50, 60, 0.4);
}

/* Topbar Google Account Pill & Dropdown */
.google-account-wrap {
  position: relative;
}

.google-topbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.google-topbar-btn:hover {
  border-color: var(--accent-crimson);
  background: var(--bg-elevated);
}

.google-user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4285F4, #34A853);
  color: #fff;
  font-weight: 800;
  font-size: 0.76rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.google-user-avatar.lg {
  width: 38px;
  height: 38px;
  font-size: 0.95rem;
}

.account-dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 280px;
  background: var(--bg-surface);
  background-image: var(--bg-pattern, none);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-card);
  z-index: 95;
}

.account-dropdown-panel[hidden] {
  display: none !important;
}

.account-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.account-dropdown-meta {
  min-width: 0;
}

.account-dropdown-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
}

.account-dropdown-email {
  font-size: 0.74rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.account-stat-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-num {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--accent-crimson);
}

.stat-lbl {
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.account-dropdown-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-action-btn {
  width: 100%;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-fast);
}

.account-action-btn.primary {
  background: var(--accent-crimson);
  color: #fff;
  border-color: var(--accent-crimson);
}

.account-action-btn:hover {
  filter: brightness(1.06);
}

/* Owned Paid Book Badges */
.price-badge.owned {
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
}

.book-tier-tag.is-owned {
  background: rgba(16, 185, 129, 0.16);
  color: #059669;
}

/* Paid Book Purchase & Ownership Modal */
.purchase-modal {
  position: fixed;
  inset: 0;
  z-index: 1900;
  background: rgba(10, 14, 20, 0.78);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.purchase-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.purchase-card {
  position: relative;
  width: 100%;
  max-width: 430px;
  background: var(--bg-surface);
  background-image: var(--bg-pattern, none);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  padding: 26px 24px 22px;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.45);
}

.purchase-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
}

.purchase-book-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.purchase-cover {
  width: 74px;
  height: 106px;
  border-radius: 10px;
  flex-shrink: 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  border-left: 4px solid rgba(255, 255, 255, 0.25);
}

.purchase-book-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.purchase-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
}

.purchase-author {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.purchase-price {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-crimson);
  margin-top: 2px;
}

.purchase-identity-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 13px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.purchase-actions {
  display: flex;
  flex-direction: column;
}

/* ============================================================================
   LIRÉA BOOK-COVER SYSTEM, REDESIGNED CARDS & ADMIN OPTIMIZATION STUDIO
   ============================================================================ */

/* 1. Bespoke Book Cover Architecture (2:3 Aspect Ratio, Spine Crease & Foil) */
.lirea-cover-stage {
  position: relative;
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  min-height: 255px;
  padding: 0 !important;
  border-radius: 10px 13px 13px 10px !important;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--cov-rx, 0deg)) rotateY(var(--cov-ry, 0deg));
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
  box-shadow:
    -4px 0 10px rgba(0, 0, 0, 0.22),
    0 12px 28px rgba(0, 0, 0, 0.24),
    inset 4px 0 8px rgba(255, 255, 255, 0.14);
}

.lirea-premium-card:hover .lirea-cover-stage {
  box-shadow:
    -6px 6px 18px rgba(0, 0, 0, 0.28),
    0 20px 38px rgba(0, 0, 0, 0.32),
    inset 4px 0 10px rgba(255, 255, 255, 0.2);
}

.lirea-bespoke-cover {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 13px 11px 17px;
  color: var(--cov-text, #ffffff);
  user-select: none;
  overflow: hidden;
}

.lirea-cover-spine-crease {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 11px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(255, 255, 255, 0.22) 38%,
    rgba(0, 0, 0, 0.32) 72%,
    transparent 100%
  );
  z-index: 4;
  pointer-events: none;
}

.lirea-cover-inner-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  padding: 9px 10px 8px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0.18) 100%);
}

.lirea-bespoke-cover.border-double-frame .lirea-cover-inner-frame {
  border: 2px double var(--cov-foil, rgba(255, 255, 255, 0.45));
}

.lirea-bespoke-cover.border-deco-corner .lirea-cover-inner-frame {
  border: 1.5px solid var(--cov-accent, #eab308);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.lirea-bespoke-cover.border-razor-line .lirea-cover-inner-frame {
  border-left: 2.5px solid var(--cov-accent, #ef4444);
  border-right: none;
  border-radius: 2px;
}

/* Top Badges on Cover */
.lirea-cover-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.lirea-cov-pill {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 99px;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.lirea-cov-pill.paid {
  background: rgba(245, 158, 11, 0.92);
  color: #1c1917;
}

.lirea-cov-pill.free {
  background: rgba(16, 185, 129, 0.9);
  color: #052e16;
}

.lirea-cov-pill.owned {
  background: rgba(56, 189, 248, 0.95);
  color: #082f49;
}

.lirea-cov-genre {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cov-foil, #fef08a);
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 1. BOOK TITLE Hierarchy (Readable even at 120x180px thumbnail size) */
.lirea-cover-title-zone {
  text-align: center;
  padding: 2px 2px 0;
  z-index: 3;
}

.lirea-cov-title {
  color: var(--cov-text, #ffffff);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
  line-height: 1.14;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lirea-cov-title.title-short {
  font-size: 1.12rem;
}

.lirea-cov-title.title-med {
  font-size: 0.98rem;
}

.lirea-cov-title.title-long {
  font-size: 0.86rem;
}

/* Variant C (Social Bold) enlarges title for instant feed impact */
.lirea-bespoke-cover.variant-c .lirea-cov-title {
  font-size: 1.16rem;
  letter-spacing: 0.04em !important;
  color: var(--cov-foil, #fef08a);
}

/* 2. MAIN VISUAL Stage */
.lirea-cover-motif-stage {
  flex: 1;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 2px 0;
}

.lirea-bespoke-motif-svg {
  width: 86%;
  height: 86%;
  max-height: 136px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  transition: transform 0.35s ease;
}

.lirea-premium-card:hover .lirea-bespoke-motif-svg {
  transform: scale(1.05);
}

/* Variant B: Official / Archival Cover Frame */
.lirea-cover-archival-frame {
  flex: 1;
  min-height: 84px;
  margin: 4px auto;
  width: 82%;
  border-radius: 4px;
  overflow: hidden;
  border: 1.5px solid var(--cov-foil, rgba(255, 255, 255, 0.5));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lirea-archival-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 3. AUTHOR & 4. SUPPORTING TEXT + SUBTLE LIRÉA MARK */
.lirea-cover-bottom-zone {
  text-align: center;
  z-index: 3;
}

.lirea-cov-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--cov-accent, #eab308);
  font-size: 0.62rem;
  margin-bottom: 3px;
  opacity: 0.85;
}

.lirea-cov-divider::before,
.lirea-cov-divider::after {
  content: '';
  height: 1px;
  width: 24%;
  background: linear-gradient(90deg, transparent, var(--cov-foil, #fef08a), transparent);
}

.lirea-cov-author {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--cov-foil, #fef08a);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lirea-cov-supporting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.lirea-cov-sub-text {
  font-size: 0.54rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 74%;
}

.lirea-cov-brand-mark {
  font-family: var(--font-serif);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--cov-foil, #fef08a);
  opacity: 0.88;
}

/* Desktop Hover "Open Book" Overlay Pill */
.lirea-cover-hover-cta {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 10, 18, 0.78) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14px;
  opacity: 0;
  transition: opacity 0.24s ease;
  z-index: 6;
  pointer-events: none;
}

.lirea-premium-card:hover .lirea-cover-hover-cta {
  opacity: 1;
}

.lirea-open-book-pill {
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 99px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transform: translateY(6px);
  transition: transform 0.24s ease;
}

.lirea-premium-card:hover .lirea-open-book-pill {
  transform: translateY(0);
}

/* 2. Redesigned Book Card Body (Cover-Dominant + Curiosity Hook + Metadata) */
.lirea-premium-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.26s ease !important;
}

.lirea-premium-card:hover {
  transform: translateY(-5px) !important;
}

.lirea-card-rating {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent-gold, #b47818);
}

.lirea-card-hook {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.79rem;
  line-height: 1.38;
  color: var(--text-secondary);
  margin: 5px 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lirea-card-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 7px;
  flex-wrap: wrap;
}

.lirea-card-Quick-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lirea-card-tool-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.lirea-card-tool-btn:hover {
  background: var(--accent-crimson, #9c2b34);
  color: #ffffff;
  border-color: transparent;
}

/* Mini Cover in Continue Reading Banner */
.mini-cover.lirea-mini-bespoke {
  padding: 0 !important;
  overflow: hidden;
  width: 68px !important;
  height: 100px !important;
  border-radius: 7px !important;
}

.mini-cover.lirea-mini-bespoke .lirea-bespoke-cover {
  padding: 4px;
}

.mini-cover.lirea-mini-bespoke .lirea-cov-title {
  font-size: 0.44rem !important;
  -webkit-line-clamp: 2;
}

.mini-cover.lirea-mini-bespoke .lirea-cov-author,
.mini-cover.lirea-mini-bespoke .lirea-cov-supporting,
.mini-cover.lirea-mini-bespoke .lirea-cov-divider {
  display: none;
}

/* Reader Front Cover Page (Page 1 inside Interactive Book) */
.lirea-reader-front-cover-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 4px;
  overflow: hidden;
}

.lirea-reader-front-cover-wrap .lirea-bespoke-cover {
  flex: 1;
  padding: 24px 28px;
}

.lirea-reader-front-cover-wrap .lirea-cov-title {
  font-size: 1.75rem !important;
}

.lirea-reader-front-cover-wrap .lirea-bespoke-motif-svg {
  max-height: 210px;
}

.lirea-reader-cover-hook-bar {
  background: rgba(12, 16, 23, 0.94);
  color: #fef3c7;
  padding: 10px 16px;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* 3. ADMIN INTERFACE: BOOK COVER OPTIMIZATION (#view-cover-admin & Modal) */
.lirea-cover-admin-section {
  padding-bottom: 48px;
}

.lirea-admin-header-banner {
  background: linear-gradient(135deg, #16222f 0%, #0b1118 100%);
  color: #f8fafc;
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.lirea-admin-kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: #fbbf24;
  font-weight: 700;
}

.lirea-admin-title {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 800;
  margin: 4px 0 6px;
  color: #ffffff;
}

.lirea-admin-sub {
  font-size: 0.85rem;
  color: rgba(248, 250, 252, 0.78);
  max-width: 640px;
  line-height: 1.45;
}

.lirea-admin-kpi-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.lirea-admin-kpi {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 10px 14px;
  min-width: 118px;
  display: flex;
  flex-direction: column;
}

.lirea-admin-kpi strong {
  font-size: 1.15rem;
  color: #fde047;
  font-weight: 800;
}

.lirea-admin-kpi span {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.75);
}

/* Workbench Shell */
.lirea-workbench-shell {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.lirea-workbench-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 18px;
}

.lirea-wb-cat {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-crimson);
  text-transform: uppercase;
}

.lirea-wb-heading {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--text-primary);
  margin-top: 2px;
}

.lirea-wb-heading small {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.lirea-wb-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lirea-wb-tab {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.lirea-wb-tab.active {
  background: var(--accent-crimson, #9c2b34);
  color: #ffffff;
  border-color: transparent;
}

.lirea-workbench-grid {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (max-width: 900px) {
  .lirea-workbench-grid {
    grid-template-columns: 1fr;
  }
}

.lirea-wb-current-cover {
  width: 220px;
  aspect-ratio: 2 / 3;
  margin: 0 auto 14px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.lirea-wb-status-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 0.76rem;
  margin-bottom: 12px;
}

.wb-status-line {
  display: flex;
  flex-direction: column;
  margin-bottom: 7px;
}

.wb-status-line:last-child {
  margin-bottom: 0;
}

.wb-status-line span {
  color: var(--text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wb-status-line strong {
  color: var(--text-primary);
  font-weight: 700;
}

.wb-status-line strong.license-ok,
.wb-status-line strong.score-ok {
  color: #15803d;
}

.lirea-wb-admin-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lirea-wb-action-btn {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.lirea-wb-action-btn.approve {
  background: #15803d;
  color: #ffffff;
  border-color: transparent;
}

.lirea-wb-action-btn.approve.is-locked {
  background: #0f766e;
}

.lirea-wb-action-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* Workbench Right Panels */
.lirea-wb-panel-block {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.lirea-wb-panel-block h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.wb-helper {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.lirea-variants-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 640px) {
  .lirea-variants-row {
    grid-template-columns: 1fr;
  }
}

.lirea-variant-option {
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  background: var(--bg-surface);
  transition: all 0.2s ease;
  text-align: center;
}

.lirea-variant-option.active {
  border-color: var(--accent-crimson, #9c2b34);
  box-shadow: 0 8px 22px rgba(156, 43, 52, 0.18);
}

.lirea-variant-preview {
  width: 128px;
  aspect-ratio: 2 / 3;
  margin: 0 auto 8px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.lirea-variant-caption strong {
  display: block;
  font-size: 0.78rem;
  color: var(--text-primary);
}

.lirea-variant-caption span {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.lirea-wb-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 780px) {
  .lirea-wb-two-col {
    grid-template-columns: 1fr;
  }
}

.lirea-analysis-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.lirea-analysis-list strong {
  color: var(--text-primary);
}

/* 10-Dimension Quality Score Bars */
.lirea-quality-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.q-bar-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.q-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.73rem;
  color: var(--text-secondary);
}

.q-bar-track {
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 99px;
  overflow: hidden;
}

.q-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #15803d, #10b981);
  border-radius: 99px;
}

/* Thumbnail Stress-Test Stage (120x180px, 200x300px, 260x390px) */
.lirea-thumbnail-test-stage {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px;
  background: var(--bg-surface);
  border-radius: 12px;
  border: 1px dashed var(--border-color);
}

.thumb-test-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.thumb-test-item span {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.thumb-box {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26);
}

.thumb-box.size-120 {
  width: 120px;
  height: 180px;
}

.thumb-box.size-120 .lirea-bespoke-cover {
  padding: 7px 7px 6px 10px;
}

.thumb-box.size-120 .lirea-cov-title {
  font-size: 0.68rem !important;
}

.thumb-box.size-120 .lirea-cov-author {
  font-size: 0.52rem !important;
}

.thumb-box.size-120 .lirea-cov-supporting {
  display: none;
}

.thumb-box.size-200 {
  width: 200px;
  height: 300px;
}

.thumb-box.size-260 {
  width: 240px;
  height: 360px;
}

/* Social Media Multi-Format Suite (1:1 Square, 9:16 Vertical, 1.91:1 OG) */
.lirea-social-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.lirea-social-share-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lirea-share-pill {
  padding: 6px 12px;
  border-radius: 99px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.lirea-share-pill.primary {
  background: var(--accent-crimson, #9c2b34);
  color: #ffffff;
  border-color: transparent;
}

.lirea-social-previews-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 16px;
}

@media (max-width: 820px) {
  .lirea-social-previews-grid {
    grid-template-columns: 1fr;
  }
}

.social-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.social-preview-wrap.wide {
  grid-column: 1 / -1;
}

.social-format-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.social-card-1x1 {
  aspect-ratio: 1 / 1;
  max-height: 320px;
  border-radius: 14px;
  padding: 18px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.social-1x1-cover {
  width: 132px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}

.social-kicker {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: #fde047;
  font-weight: 700;
  display: block;
}

.social-1x1-copy h5 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 4px 0 6px;
  color: #ffffff;
}

.social-1x1-copy p {
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 10px;
}

.social-cta-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 99px;
}

.social-card-9x16 {
  width: 210px;
  height: 340px;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.social-9x16-cover {
  width: 118px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
}

.social-9x16-hook {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.72rem;
  line-height: 1.32;
  color: #fef3c7;
}

.social-card-og {
  border-radius: 14px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

.social-og-cover {
  width: 116px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
}

.social-og-meta h5 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  margin: 4px 0 6px;
  color: #ffffff;
}

.social-og-meta p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.84);
  margin-bottom: 10px;
  line-height: 1.45;
}

.social-og-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.social-og-domain {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #fde047;
}

/* A/B Table */
.lirea-ab-table-wrap {
  overflow-x: auto;
}

.lirea-ab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.lirea-ab-table th,
.lirea-ab-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.lirea-ab-table tr.active-row {
  background: rgba(16, 185, 129, 0.09);
}

.ab-active-tag {
  background: #15803d;
  color: #ffffff;
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 99px;
  margin-left: 5px;
}

.ab-score-val {
  color: #15803d;
  font-size: 0.9rem;
}

/* Admin Catalog Matrix Grid */
.lirea-admin-catalog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.lirea-admin-search-input {
  min-width: 270px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.84rem;
}

.lirea-admin-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}

.lirea-admin-matrix-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  padding: 12px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

.lirea-admin-matrix-card.selected,
.lirea-admin-matrix-card:hover {
  border-color: var(--accent-crimson, #9c2b34);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.lirea-admin-matrix-cover {
  width: 88px;
  aspect-ratio: 2 / 3;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.lirea-admin-matrix-cover .lirea-cov-title {
  font-size: 0.56rem !important;
}

.lirea-admin-matrix-cover .lirea-cov-supporting {
  display: none;
}

.lirea-admin-matrix-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.lirea-score-pill {
  background: rgba(21, 128, 61, 0.14);
  color: #15803d;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
}

.lirea-var-pill {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
}

.lirea-locked-pill {
  background: rgba(15, 118, 110, 0.16);
  color: #0f766e;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
}

.lirea-admin-matrix-meta h4 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matrix-author {
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.matrix-license {
  font-size: 0.66rem;
  color: #15803d;
  margin: 3px 0 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lirea-admin-matrix-actions {
  display: flex;
  gap: 6px;
}

.lirea-matrix-btn {
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.lirea-matrix-btn.primary {
  background: var(--accent-crimson, #9c2b34);
  color: #ffffff;
  border-color: transparent;
}

/* Quick Cover Inspector Modal */
.lirea-cover-modal-card {
  width: min(1040px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 20px;
}

/* ============================================================================
   AUTHENTIC BOOK-COVER MARKETPLACE & COVER DISCOVERY STUDIO (REAL COVERS ONLY)
   ============================================================================ */

/* 1. Clean Rectangular Portrait Cover Presentation (No Fake 3D, No Borders Over Art) */
.lirea-marketplace-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.lirea-marketplace-card:hover {
  transform: translateY(-4px) !important;
}

.lirea-marketplace-cover-box {
  position: relative;
  aspect-ratio: 2 / 3 !important;
  height: auto !important;
  min-height: 250px;
  padding: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transition: box-shadow 0.22s ease;
}

.lirea-marketplace-card:hover .lirea-marketplace-cover-box {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32);
}

.lirea-clean-cover-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #14181f;
  overflow: hidden;
}

.lirea-real-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Continue Reading Banner Mini Cover & Reader Page 1 Front Cover */
.mini-cover.lirea-clean-mini-cover {
  padding: 0 !important;
  width: 68px !important;
  height: 102px !important;
  border-radius: 6px !important;
  overflow: hidden;
  background: transparent !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.lirea-reader-canonical-cover {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.lirea-reader-canonical-cover .lirea-clean-cover-wrap {
  max-height: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}

/* Legal Safety & Unverified / Missing Cover Placeholders (Sections 8 & 15) */
.lirea-unverified-cover-notice,
.lirea-no-cover-placeholder,
.lirea-explicit-original-cover {
  width: 100%;
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px dashed var(--border-color);
  gap: 6px;
}

.unverified-badge,
.no-cov-status {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(234, 179, 8, 0.16);
  color: #b45309;
}

.lirea-unverified-cover-notice p {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* 2. Cover Studio (Discovery, Verification & Source Provenance UI — Section 10) */
.lirea-cover-studio-section {
  padding-bottom: 48px;
}

.cs-header-bar {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.cs-kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-crimson, #9c2b34);
}

.cs-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 4px 0;
}

.cs-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  max-width: 640px;
}

.cs-stats-group {
  display: flex;
  gap: 12px;
}

.cs-stat-pill {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
}

.cs-stat-pill strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
}

.cs-stat-pill span {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* Selected Book Inspector Panel */
.cs-inspector-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

@media (max-width: 820px) {
  .cs-inspector-panel {
    grid-template-columns: 1fr;
  }
}

.cs-large-cover-frame {
  width: 220px;
  aspect-ratio: 2 / 3;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.cs-inspector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 14px;
}

.cs-inspector-head h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--text-primary);
}

.cs-inspector-author {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.cs-rights-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 99px;
}

.cs-rights-badge.verified {
  background: rgba(21, 128, 61, 0.14);
  color: #15803d;
}

.cs-rights-badge.review {
  background: rgba(234, 179, 8, 0.18);
  color: #b45309;
}

.cs-source-record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.cs-record-field {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-record-field span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.cs-record-field strong {
  font-size: 0.8rem;
  color: var(--text-primary);
  word-break: break-word;
}

/* Legitimate Published Editions Row (Official Cover / Historical Edition / Alternative Edition) */
.cs-editions-block {
  margin-bottom: 16px;
}

.cs-editions-block h4 {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.cs-editions-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cs-edition-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border-color);
  background: var(--bg-elevated);
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
}

.cs-edition-card.active,
.cs-edition-card:hover {
  border-color: var(--accent-crimson, #9c2b34);
  background: var(--bg-surface);
}

.cs-edition-card img {
  width: 44px;
  height: 66px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}

.cs-edition-meta strong {
  display: block;
  font-size: 0.78rem;
  color: var(--text-primary);
}

.cs-edition-meta span {
  font-size: 0.68rem;
  color: var(--text-secondary);
}

.cs-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.16s ease;
}

.cs-btn.sm {
  padding: 6px 10px;
  font-size: 0.72rem;
}

.cs-btn.primary {
  background: var(--accent-crimson, #9c2b34);
  color: #ffffff;
  border-color: transparent;
}

.cs-btn.primary.approved {
  background: #15803d;
}

.cs-btn:hover {
  filter: brightness(1.06);
}

/* Catalog Toolbar & Section 10 Verification Cards Grid */
.cs-catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.cs-search-input {
  min-width: 280px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.84rem;
}

.cs-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.cs-book-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.cs-book-card.selected,
.cs-book-card:hover {
  border-color: var(--accent-crimson, #9c2b34);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.cs-card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.cs-card-cover {
  width: 136px;
  aspect-ratio: 2 / 3;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.cs-card-titles h4 {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.cs-card-titles p {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.cs-card-specs {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.74rem;
}

.cs-spec-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.cs-spec-line span {
  color: var(--text-muted);
}

.cs-spec-line strong {
  color: var(--text-primary);
  text-align: right;
  max-width: 68%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-spec-line strong.ok {
  color: #15803d;
}

.cs-spec-line strong.warn {
  color: #b45309;
}

.cs-card-actions {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

/* ================================================================
   GOOGLE PLAY BOOKS — 100% VIDEO-MATCHING READING INTERFACE
   ================================================================ */
:root {
  --reader-font-family: 'Literata', Georgia, serif;
  --reader-font-size: 16.5px;
  --reader-line-height: 1.62;
  --reader-text-align: justify;
}

/* 1. Viewing Themes (White / Sepia / Dark / Sage) */
.reader-modal[data-paper-stock="day"],
.reader-modal[data-paper-stock="ivoire"],
.lirea-book-stage[data-paper-stock="day"],
.lirea-book-stage[data-paper-stock="ivoire"] {
  --paper-bg: #ffffff;
  --paper-ink: #1f1f1f;
  --paper-ink-muted: #5f6368;
  --paper-accent: #1a73e8;
  --paper-rule: rgba(60, 64, 67, 0.16);
  --book-paper: #ffffff;
  --book-paper-verso: #ffffff;
  --book-ink: #1f1f1f;
  --book-ink-secondary: #3c4043;
  --book-ink-muted: #5f6368;
}

.reader-modal[data-paper-stock="sepia"],
.reader-modal[data-paper-stock="creme"],
.lirea-book-stage[data-paper-stock="sepia"],
.lirea-book-stage[data-paper-stock="creme"] {
  --paper-bg: #ede4d1;
  --paper-ink: #2c2219;
  --paper-ink-muted: #6b5b49;
  --paper-accent: #1a56db;
  --paper-rule: rgba(82, 63, 42, 0.18);
  --book-paper: #ede4d1;
  --book-paper-verso: #ede4d1;
  --book-ink: #2c2219;
  --book-ink-secondary: #4a3a2c;
  --book-ink-muted: #6b5b49;
}

.reader-modal[data-paper-stock="night"],
.reader-modal[data-paper-stock="nuit"],
.lirea-book-stage[data-paper-stock="night"],
.lirea-book-stage[data-paper-stock="nuit"] {
  --paper-bg: #000000;
  --paper-ink: #e3e3e3;
  --paper-ink-muted: #9aa0a6;
  --paper-accent: #8ab4f8;
  --paper-rule: rgba(255, 255, 255, 0.16);
  --book-paper: #000000;
  --book-paper-verso: #000000;
  --book-ink: #e3e3e3;
  --book-ink-secondary: #bdc1c6;
  --book-ink-muted: #9aa0a6;
}

.reader-modal[data-paper-stock="lin"],
.lirea-book-stage[data-paper-stock="lin"] {
  --paper-bg: #eef1ec;
  --paper-ink: #1f2922;
  --paper-ink-muted: #546358;
  --paper-accent: #1b6d3e;
  --paper-rule: rgba(31, 41, 34, 0.16);
  --book-paper: #eef1ec;
  --book-paper-verso: #eef1ec;
  --book-ink: #1f2922;
  --book-ink-secondary: #37453b;
  --book-ink-muted: #546358;
}

/* 2. Reader Modal & Stage Base Reset (No 3D Book Spine Crease, Pure Flat Sheets) */
.reader-modal,
.gpb-reader-modal {
  background: #000000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.lirea-paper-stack,
.lirea-spine-crease,
.lirea-corner-hint {
  display: none !important;
}

.lirea-book-viewport,
.gpb-book-viewport {
  position: relative;
  width: var(--app-width, 100dvw) !important;
  height: var(--app-height, 100dvh) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
  background: #000000 !important;
  transition: background-color 0.26s ease;
}

/* In Flowing Text Full-Screen Reading, background always matches paper edge-to-edge */
.reader-modal[data-view-mode="flowing"] .lirea-book-viewport,
.reader-modal:not([data-view-mode="original"]) .lirea-book-viewport {
  background: var(--book-paper, #ffffff) !important;
}

/* 3. Book Spread Dimensions: Flowing Text (100dvw x 100dvh) vs. Original Pages (1.36:1 Fixed Aspect Ratio) */
.lirea-book-stage,
.gpb-book-stage {
  position: relative;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  background: var(--book-paper, #ffffff) !important;
  box-shadow: none !important;
  transform-origin: center center;
  z-index: 8;
  transition:
    transform 0.22s cubic-bezier(0.2, 0, 0, 1),
    box-shadow 0.22s ease,
    border-radius 0.22s ease !important;
}

/* FLOWING TEXT MODE: Edge-to-Edge 100dvw x 100dvh when reading */
.reader-modal[data-view-mode="flowing"] .lirea-book-stage,
.reader-modal:not([data-view-mode="original"]) .lirea-book-stage {
  width: var(--app-width, 100dvw) !important;
  height: var(--app-height, 100dvh) !important;
}

/* ORIGINAL PAGES MODE: Fixed Book Spread Aspect Ratio (~1.36:1 for 2-page spread, ~0.68:1 for 1-page) with black pillar-bars */
.reader-modal[data-view-mode="original"] .lirea-book-stage {
  width: min(92vw, calc(var(--app-height, 100dvh) * 1.36)) !important;
  height: min(var(--app-height, 100dvh), calc(92vw / 1.36)) !important;
}

.reader-modal[data-view-mode="original"] .lirea-book-stage[data-spread-layout="single"] {
  width: min(94vw, calc(var(--app-height, 100dvh) * 0.68)) !important;
  height: min(var(--app-height, 100dvh), calc(94vw / 0.68)) !important;
}

/* Always Full-Screen Reading Interface (No zoomed-out 0.72x carousel shrink) */
.reader-modal:not(.hud-hidden) .lirea-book-stage,
.reader-modal.hud-hidden .lirea-book-stage {
  transform: scale(var(--book-zoom-scale, 1)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: default;
}

/* Hide Neighboring Spread Previews & Carousel Caption so Reader Stays Full Screen Only */
.gpb-neighbor-spread,
.gpb-carousel-neighbor,
.gpb-hud-chapter-caption,
.gpb-hud-chapter-pages-left {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 4. Book Sheets & Center 1px Divider Line (00:47-00:50, 01:37-01:46) */
.lirea-book-sheets {
  background: var(--book-paper, #ffffff) !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
}

.lirea-book-stage[data-spread-layout="single"] .lirea-book-sheets {
  grid-template-columns: minmax(0, 1fr) !important;
}

.lirea-book-spine {
  width: 1px !important;
  background-color: var(--paper-rule, rgba(128, 128, 128, 0.22)) !important;
  background-image: none !important;
}

.lirea-page-left,
.lirea-page-right {
  background-color: var(--book-paper, #ffffff) !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Page Padding & Proportions in Flowing Text vs. Original Pages */
.reader-modal[data-view-mode="flowing"] .lirea-page,
.reader-modal:not([data-view-mode="original"]) .lirea-page {
  padding: var(--page-pad-top, 26px) var(--page-pad-x, 42px) var(--page-pad-bottom, 18px) var(--page-pad-x, 42px) !important;
}

.reader-modal[data-view-mode="flowing"] .lirea-book-stage[data-spread-layout="single"] .lirea-page-left,
.reader-modal:not([data-view-mode="original"]) .lirea-book-stage[data-spread-layout="single"] .lirea-page-left {
  padding: var(--page-pad-top, 28px) var(--page-pad-x, 7vw) var(--page-pad-bottom, 20px) var(--page-pad-x, 7vw) !important;
}

.reader-modal[data-view-mode="original"] .lirea-page {
  padding: var(--page-pad-top, 24px) var(--page-pad-x, 36px) var(--page-pad-bottom, 18px) var(--page-pad-x, 36px) !important;
}

/* Full-Bleed Authentic Cover on Right Page of Spread 1 (00:00, 00:08, 00:41, 01:51) */
.lirea-page:has(.lirea-reader-canonical-cover) {
  padding: 0 !important;
}

.lirea-page:has(.lirea-reader-canonical-cover) .lirea-page-header,
.lirea-page:has(.lirea-reader-canonical-cover) .lirea-page-footer {
  display: none !important;
}

.lirea-reader-canonical-cover {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--book-paper, #ffffff);
}

.lirea-reader-canonical-cover .lirea-clean-cover-wrap {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--book-paper, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lirea-reader-canonical-cover .lirea-real-cover-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
}

.reader-modal[data-view-mode="original"] .lirea-reader-canonical-cover .lirea-real-cover-img {
  object-fit: cover !important;
}

/* Running Headers & Bottom Corner Labels ("4 pages left in chapter" & "5%") */
.lirea-page-header {
  display: none !important;
}

.lirea-page-footer {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px !important;
  margin-top: 2px !important;
  border-top: none !important;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.72rem !important;
  color: var(--book-ink-muted, #5f6368) !important;
  min-height: 18px;
}

.lirea-page-footer.right {
  justify-content: flex-end !important;
}

.lirea-folio-num {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: var(--book-ink-muted, #5f6368) !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lirea-page-footer.right .lirea-folio-num {
  justify-content: flex-end;
}

/* Hide bottom corner labels in Original pages mode */
.reader-modal[data-view-mode="original"] .lirea-page-footer {
  display: none !important;
}

/* 5. Typography, Chapters, 3-Line Monochrome Drop Cap & Front-Matter Pages */
.lirea-page-body {
  font-family: var(--reader-font-family) !important;
  font-size: var(--page-font-size, var(--reader-font-size)) !important;
  line-height: var(--page-line-height, var(--reader-line-height)) !important;
  text-align: var(--reader-text-align, justify) !important;
  text-align-last: left !important;
  text-justify: inter-word !important;
  color: var(--book-ink, var(--paper-ink)) !important;
  letter-spacing: 0.002em !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.lirea-page-body p {
  font-family: var(--reader-font-family) !important;
  font-size: var(--page-font-size, var(--reader-font-size)) !important;
  line-height: var(--page-line-height, var(--reader-line-height)) !important;
  text-align: var(--reader-text-align, justify) !important;
  text-align-last: left !important;
  text-justify: inter-word !important;
  color: var(--book-ink, var(--paper-ink)) !important;
  margin-top: 0 !important;
  margin-bottom: var(--page-para-gap, 0.38em) !important;
  text-indent: 1.25em !important;
  hyphens: auto !important;
  -webkit-hyphens: auto !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.lirea-page-body p:last-child {
  margin-bottom: 0 !important;
}

.lirea-page-body p.lirea-first-para,
.lirea-page-body p.drop-cap,
.lirea-page-body p.lirea-continuation-para {
  text-indent: 0 !important;
}

/* Clean 3-Line Monochrome Drop Cap Matching Video (00:13, 00:15, 00:50, 01:10, 01:43) */
.lirea-page-body p.drop-cap::first-letter {
  float: left !important;
  font-family: var(--reader-font-family) !important;
  font-size: 3.15em !important;
  line-height: 0.82 !important;
  padding-right: 9px !important;
  padding-top: 3px !important;
  margin-bottom: -2px !important;
  color: var(--book-ink, var(--paper-ink)) !important;
  font-weight: 400 !important;
}

.lirea-page-body em,
.lirea-page-body i {
  font-style: italic !important;
}

/* Chapter Heading: Number on Top + Centered Uppercase Title Below (00:13, 00:50, 01:10) */
.lirea-chapter-banner {
  text-align: center !important;
  margin: 1.05em 0 0.9em !important;
  padding: 0 !important;
  border: none !important;
}

.lirea-page-body > .lirea-chapter-banner:first-child {
  margin-top: 0.2em !important;
}

.gpb-chapter-num {
  display: block !important;
  font-family: var(--reader-font-family) !important;
  font-size: 1.12em !important;
  font-weight: 700 !important;
  color: var(--book-ink, var(--paper-ink)) !important;
  margin-bottom: 0.32em !important;
}

.lirea-chapter-banner h1 {
  font-family: var(--reader-font-family) !important;
  font-size: 1.04em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--book-ink, var(--paper-ink)) !important;
  text-align: center !important;
  margin: 0 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.32 !important;
}

/* Front Matter Pages: Title Page, Copyright, Dedication, Interactive CONTENTS (00:42-00:46) */
.gpb-frontmatter-page {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  color: var(--book-ink);
  font-family: var(--reader-font-family);
}

.gpb-fm-brand-seal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(140, 102, 57, 0.09);
  border: 1px solid rgba(140, 102, 57, 0.26);
  margin-bottom: 1.25rem;
}

.gpb-fm-logo {
  width: 104px;
  height: 104px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.28));
}

.gpb-fm-brand-name {
  font-size: 0.94em;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--book-ink-secondary);
  margin-top: 4px;
}

.gpb-fm-seal-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.8em;
}

.gpb-fm-logo-lg {
  width: 148px;
  height: 148px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.32));
}

.gpb-fm-logo-sm {
  width: 112px;
  height: 112px;
  object-fit: contain;
  margin-bottom: 1.25em;
  opacity: 0.98;
  filter: drop-shadow(0 7px 18px rgba(0, 0, 0, 0.26));
}

.gpb-fm-seal-title {
  font-size: 0.96em;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--book-ink);
}

.gpb-fm-title {
  font-size: 1.55em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35em;
  color: var(--book-ink);
}

.gpb-fm-subtitle {
  font-size: 0.95em;
  font-style: italic;
  color: var(--book-ink-secondary);
  margin-bottom: 2.2em;
}

.gpb-fm-author {
  font-size: 1.12em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 3.5em;
  color: var(--book-ink);
}

.gpb-fm-publisher {
  font-size: 0.78em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--book-ink-muted);
  margin-top: auto;
}

.gpb-fm-copyright-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}

.lirea-page-body .gpb-fm-copyright-wrap p {
  font-size: 0.78em !important;
  line-height: 1.55 !important;
  text-indent: 0 !important;
  text-align: center !important;
  margin-bottom: 1em !important;
  color: var(--book-ink-secondary) !important;
}

.gpb-fm-dedication {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 380px;
  margin: 0 auto;
}

.lirea-page-body .gpb-fm-dedication p {
  text-indent: 0 !important;
  text-align: center !important;
  font-style: italic !important;
  font-size: 0.96em !important;
  line-height: 1.65 !important;
}

/* Interactive CONTENTS Page (00:46) */
.gpb-inline-toc-wrap {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding-top: 1.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gpb-inline-toc-heading {
  font-family: var(--reader-font-family);
  font-size: 1.12em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--book-ink);
  margin-bottom: 1.4em;
  text-align: center;
}

.gpb-inline-toc-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.52em;
  align-items: flex-start;
}

.gpb-inline-toc-link {
  background: none;
  border: none;
  padding: 2px 0;
  font-family: var(--reader-font-family);
  font-size: 0.92em;
  color: var(--paper-accent, #1a73e8);
  text-decoration: underline;
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
}

.gpb-inline-toc-link:hover {
  opacity: 0.8;
}

/* 6. Horizontal Sliding Page-Turn Physics with Vertical Cast Shadow (00:37-00:46, 01:11-01:13) */
.lirea-curl-engine {
  inset: 0 !important;
}

.lirea-peeling-leaf {
  background: var(--book-paper, #ffffff) !important;
  box-shadow: -14px 0 32px rgba(0, 0, 0, 0.28), 14px 0 32px rgba(0, 0, 0, 0.28);
  border-left: 1px solid rgba(0, 0, 0, 0.14);
  border-right: 1px solid rgba(0, 0, 0, 0.14);
}

.reader-modal[data-paper-stock="night"] .lirea-peeling-leaf,
.lirea-book-stage[data-paper-stock="night"] .lirea-peeling-leaf {
  background: #111317 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.26);
  border-right: 1px solid rgba(255, 255, 255, 0.26);
}

.lirea-leaf-front,
.lirea-leaf-back {
  background-color: var(--book-paper, #ffffff) !important;
  background-image: none !important;
  transform: none !important;
}

/* 7. Google Play Books Dark Top App Bar (#lirea-reader-topbar — 00:03, 00:16, 00:33, 00:51) */
.gpb-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(0) !important;
  width: 100% !important;
  height: 56px !important;
  padding: 0 16px !important;
  border-radius: 0 !important;
  background: #131314 !important;
  color: #e3e3e3 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45) !important;
  z-index: 120 !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}

.reader-modal.hud-hidden .gpb-topbar {
  opacity: 0 !important;
  transform: translateY(-100%) !important;
  pointer-events: none !important;
}

.gpb-back-btn,
.gpb-icon-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  color: #e3e3e3 !important;
  cursor: pointer;
}

.gpb-back-btn:hover,
.gpb-icon-btn:hover,
.gpb-icon-btn.active {
  background: rgba(168, 199, 250, 0.14) !important;
  color: #a8c7fa !important;
}

.gpb-book-title,
.gpb-topbar-title-wrap .lirea-topbar-book-title {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: #e3e3e3 !important;
  max-width: 55vw !important;
}

.gpb-topbar-right,
.gpb-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px !important;
}

.gpb-aa-trigger {
  width: 42px !important;
  height: 40px !important;
}

.gpb-aa-glyph {
  font-family: 'Roboto', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* 8. Google Play Books Bottom Scrubber Bar (#reader-bottom-dock — 00:03, 00:16, 00:51, 01:49) */
.gpb-bottombar {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(0) !important;
  width: 100% !important;
  height: 58px !important;
  padding: 0 20px !important;
  border-radius: 0 !important;
  background: #131314 !important;
  color: #e3e3e3 !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.45) !important;
  z-index: 120 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}

.reader-modal.hud-hidden .gpb-bottombar {
  opacity: 0 !important;
  transform: translateY(100%) !important;
  pointer-events: none !important;
}

.gpb-toc-dock-btn,
.gpb-bottom-toc-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: #e3e3e3 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 !important;
}

.gpb-toc-dock-btn:hover,
.gpb-bottom-toc-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.gpb-scrubber-cluster,
.gpb-scrubber-center {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.gpb-scrubber-track-wrap,
.gpb-scrubber-track-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.gpb-scrubber-slider {
  width: 100% !important;
  height: 4px !important;
  accent-color: #a8c7fa !important;
  cursor: pointer;
}

/* Rectangular Track Return Marker (#scrubber-return-chip — 01:51, 02:01) */
.gpb-scrubber-page-marker,
.gpb-track-return-marker {
  position: absolute;
  top: 50%;
  left: var(--return-marker-pct, 10%);
  transform: translate(-50%, -50%);
  width: 12px;
  height: 16px;
  border-radius: 2px;
  background: #3c4043;
  border: 1.5px solid #a8c7fa;
  cursor: pointer;
  z-index: 15;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
}

.gpb-scrubber-page-marker[hidden],
.gpb-track-return-marker[hidden] {
  display: none !important;
}

.gpb-scrubber-page-marker:hover,
.gpb-track-return-marker:hover {
  background: #a8c7fa;
  transform: translate(-50%, -50%) scale(1.2);
}

.gpb-scrubber-right-meta,
.gpb-bottom-right-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 72px;
  justify-content: flex-end;
}

.gpb-progress-fraction,
.gpb-fraction-counter {
  font-family: 'Roboto', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  color: #e3e3e3 !important;
}

/* 9. Mode-Specific Dark `Aa` Popover Card (#reader-settings-panel — 00:17, 00:25, 00:58, 01:25) */
.gpb-aa-sheet {
  position: fixed !important;
  top: 62px !important;
  right: 16px !important;
  bottom: auto !important;
  width: 356px !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 84px) !important;
  overflow-y: auto !important;
  background: #1e1f22 !important;
  color: #e3e3e3 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  padding: 6px 20px 20px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65) !important;
  z-index: 260 !important;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.gpb-aa-tabs-bar,
.gpb-aa-top-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0 -20px 14px -20px;
  padding: 0 12px;
}

.gpb-aa-top-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 13px 12px 11px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: #9aa0a6;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.gpb-aa-top-tab.active {
  color: #a8c7fa;
  border-bottom-color: #a8c7fa;
}

.gpb-settings-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px !important;
}

.gpb-aa-pane,
.gpb-aa-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gpb-aa-pane[hidden],
.gpb-aa-tab-pane[hidden],
.gpb-page-layout-block[hidden] {
  display: none !important;
}

.gpb-page-layout-block,
.gpb-aa-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gpb-section-title,
.gpb-aa-section-title {
  font-size: 0.8rem;
  font-weight: 400;
  color: #9aa0a6;
  display: block;
}

/* 4 Circular Font Buttons (Original, Sans, Literata, Merriweather — 00:58, 01:17) */
.gpb-font-circles-strip,
.gpb-font-circles-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 4px 0;
}

.gpb-font-circle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  color: #c4c7c5;
  cursor: pointer;
  padding: 2px;
}

.gpb-font-circle-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #2b2c30;
  color: #e3e3e3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 500;
  transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
}

.gpb-font-circle-item.active .gpb-font-circle-avatar {
  background: #a8c7fa;
  color: #062e6f;
  font-weight: 600;
}

.gpb-font-circle-label {
  font-size: 0.75rem;
  color: #c4c7c5;
  white-space: nowrap;
}

.gpb-font-circle-item.active .gpb-font-circle-label {
  color: #a8c7fa;
  font-weight: 500;
}

/* Font Size & Line Spacing Pill Steppers ([ T↓ ] 100% [ T↑ ] — 00:58, 01:08) */
.gpb-stepper-pill-row,
.gpb-pill-stepper-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.gpb-dark-pill-btn {
  height: 44px;
  border-radius: 999px;
  border: none;
  background: #2b2c30;
  color: #a8c7fa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.16s ease;
}

.gpb-dark-pill-btn:hover {
  background: #37393e;
}

.gpb-t-small {
  font-family: 'Roboto', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #a8c7fa;
}

.gpb-t-large {
  font-family: 'Roboto', sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  color: #a8c7fa;
}

.gpb-center-pct,
.gpb-stepper-center-val {
  min-width: 54px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 500;
  color: #e3e3e3;
}

/* Justification Dropdown Row (00:58, 01:19) */
.gpb-align-dropdown-wrap,
.gpb-justify-dropdown-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}

.gpb-align-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #2b2c30;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #e3e3e3;
  font-size: 0.9rem;
  padding: 11px 16px;
  cursor: pointer;
}

.gpb-align-trigger-left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.gpb-align-menu,
.gpb-align-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #2b2c30;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 6px 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  z-index: 30;
  display: flex;
  flex-direction: column;
}

.gpb-align-menu[hidden],
.gpb-align-dropdown-menu[hidden] {
  display: none !important;
}

.gpb-align-option {
  background: transparent;
  border: none;
  color: #e3e3e3;
  text-align: left;
  padding: 10px 16px;
  font-size: 0.88rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
}

.gpb-align-option:hover,
.gpb-align-option.active {
  background: rgba(168, 199, 250, 0.16);
  color: #a8c7fa;
}

/* Page Layout Segmented Bar (Auto | 2 pages | 1 page — 00:25, 00:58, 01:02) */
.gpb-layout-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #2b2c30;
  border-radius: 999px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.gpb-layout-seg-btn {
  height: 38px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #c4c7c5;
  font-size: 0.83rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.gpb-layout-seg-btn.active {
  background: #004a77;
  color: #c2e7ff;
  font-weight: 600;
}

.gpb-seg-check {
  display: none;
  font-size: 0.8rem;
}

.gpb-layout-seg-btn.active .gpb-seg-check {
  display: inline;
}

/* Zoom & Night Light Switch Rows (Remember zoom, Tap to scroll, Reading Night Light) */
.gpb-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  color: #e3e3e3;
  cursor: pointer;
  padding: 4px 0;
}

.gpb-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.gpb-switch-slider,
.gpb-toggle-pill-switch {
  position: relative;
  width: 46px;
  height: 26px;
  background: #3c4043;
  border: 1.5px solid #8e918f;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
}

.gpb-switch-slider::after,
.gpb-toggle-pill-switch .gpb-toggle-thumb {
  content: '';
  position: absolute;
  top: 4px;
  left: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #8e918f;
  transition: transform 0.2s ease, background 0.2s ease, width 0.2s ease, height 0.2s ease, top 0.2s ease;
}

.gpb-switch-input:checked + .gpb-switch-slider,
.gpb-toggle-pill-switch.active {
  background: #a8c7fa;
  border-color: #a8c7fa;
}

.gpb-switch-input:checked + .gpb-switch-slider::after,
.gpb-toggle-pill-switch.active .gpb-toggle-thumb {
  transform: translateX(19px);
  top: 2px;
  width: 18px;
  height: 18px;
  background: #062e6f;
}

/* Lighting Tab: Thick Pill Brightness Slider + 3 Rectangular Theme Cards (White / Sepia / Dark — 00:17, 01:25) */
.gpb-brightness-pill-wrap,
.gpb-brightness-pill-track {
  position: relative;
  height: 44px;
  border-radius: 999px;
  background: #2b2c30;
  display: flex;
  align-items: center;
  padding: 0 14px;
  overflow: hidden;
}

.gpb-brightness-sun {
  color: #a8c7fa;
  z-index: 2;
  pointer-events: none;
  margin-right: 10px;
  font-size: 1rem;
}

.gpb-brightness-pill-slider,
.gpb-brightness-range {
  width: 100%;
  accent-color: #a8c7fa;
  cursor: pointer;
}

.gpb-viewing-theme-grid,
.gpb-viewing-theme-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gpb-rect-theme-btn,
.gpb-theme-rect-card {
  height: 62px;
  border-radius: 12px !important;
  border: 2px solid rgba(255, 255, 255, 0.18) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gpb-rect-white,
.gpb-theme-rect-white {
  background: #ffffff !important;
  color: #1f1f1f !important;
}

.gpb-rect-sepia,
.gpb-theme-rect-sepia {
  background: #ede4d1 !important;
  color: #2c2219 !important;
}

.gpb-rect-dark,
.gpb-theme-rect-dark {
  background: #000000 !important;
  color: #e3e3e3 !important;
}

.gpb-rect-theme-btn.active,
.gpb-theme-rect-card.active {
  border-color: #a8c7fa !important;
  box-shadow: 0 0 0 2px rgba(168, 199, 250, 0.35);
}

.gpb-theme-check {
  display: none;
  font-weight: 700;
}

.gpb-rect-theme-btn.active .gpb-theme-check,
.gpb-theme-rect-card.active .gpb-theme-check {
  display: inline;
}

/* 10. 3-Dots (⋮) Overflow Dropdown Menu (#gpb-more-menu — 00:34, 00:52) */
.gpb-more-menu,
.gpb-more-dropdown {
  position: fixed;
  top: 56px;
  right: 12px;
  width: 224px;
  background: #1e1f22;
  color: #e3e3e3;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 6px 0;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.65);
  z-index: 280;
  display: flex;
  flex-direction: column;
}

.gpb-more-menu[hidden],
.gpb-more-dropdown[hidden] {
  display: none !important;
}

.gpb-more-item {
  width: 100%;
  background: transparent;
  border: none;
  color: #e3e3e3;
  text-align: left;
  padding: 12px 18px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s ease;
}

.gpb-more-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* 11. Dual Circular Loading Transition & 3D Riffle (#gpb-loading-transition — 00:22, 00:37–00:39, 01:02, 01:18–01:22) */
.gpb-loading-transition {
  position: fixed;
  inset: 0;
  background: var(--book-paper, #efe6d5) !important;
  z-index: 320;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gpb-loading-transition.active {
  display: block !important;
}

.gpb-spinner-pair,
.gpb-dual-spinner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.gpb-spinner-ring {
  position: absolute;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  margin-left: -14px;
  border-radius: 50%;
  border: 2.5px solid rgba(128, 128, 128, 0.22);
  border-top-color: var(--book-ink-muted, #7a7467);
  border-right-color: var(--book-ink-muted, #7a7467);
  animation: gpbSpinOuter 0.85s linear infinite;
}

/* Left Page Center Spinner (25%) & Right Page Center Spinner (75%) — Matches Video 00:22, 00:37–00:39, 01:20 */
.gpb-spinner-ring:nth-child(1) {
  left: 25%;
}

.gpb-spinner-ring:nth-child(2) {
  left: 75%;
}

.gpb-riffle-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  display: none;
}

.gpb-loading-transition.riffle-active .gpb-riffle-stage {
  display: block;
}

.gpb-riffle-sheet {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14%;
  left: 110%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.18) 0%,
    var(--book-paper, #efe6d5) 18%,
    rgba(255, 255, 255, 0.35) 52%,
    var(--book-paper, #efe6d5) 84%,
    rgba(0, 0, 0, 0.24) 100%
  );
  box-shadow: -22px 0 38px rgba(0, 0, 0, 0.22), 20px 0 34px rgba(0, 0, 0, 0.22);
}

.gpb-loading-transition.riffle-active .gpb-riffle-sheet-1 {
  animation: gpbRiffleSweep 0.44s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.gpb-loading-transition.riffle-active .gpb-riffle-sheet-2 {
  animation: gpbRiffleSweep 0.44s cubic-bezier(0.22, 0.61, 0.36, 1) 0.14s forwards;
}

@keyframes gpbRiffleSweep {
  0% { left: 105%; }
  100% { left: -20%; }
}

@keyframes gpbSpinOuter {
  to { transform: rotate(360deg); }
}

/* 11B. Google Play Books 3D Cylindrical Page-Curl & Dual-Spread Carousel Engine (00:10–00:15, 00:42–00:46, 01:08–01:13, 01:38–01:40) */
.gpb-underlay-sheets {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  opacity: 0;
  pointer-events: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
  background: var(--book-paper, #ffffff) !important;
  will-change: transform, opacity;
}

.lirea-book-stage[data-spread-layout="single"] .gpb-underlay-sheets,
.gpb-underlay-sheets[data-spread-layout="single"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

.gpb-underlay-sheets.is-active {
  opacity: 1 !important;
}

#reader-content.gpb-book-sheets {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  will-change: clip-path, transform;
}

#lirea-curl-engine.lirea-curl-engine {
  position: absolute !important;
  inset: 0 !important;
  z-index: 16 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  perspective: 1400px !important;
}

#lirea-curl-shadow.lirea-curl-shadow {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 15 !important;
  opacity: 0;
  will-change: left, width, opacity, background;
}

#lirea-peeling-leaf.lirea-peeling-leaf {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 17 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0;
  transform-style: preserve-3d;
  will-change: left, width, transform, opacity, box-shadow;
}

.gpb-cylinder-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--book-paper, #efe6d5);
}

.reader-modal[data-paper-stock="night"] .gpb-cylinder-viewport,
.lirea-book-stage[data-paper-stock="night"] .gpb-cylinder-viewport {
  background: #14161b;
}

.gpb-cylinder-clone {
  position: absolute;
  top: 0;
  height: 100%;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) !important;
  background: var(--book-paper, #efe6d5);
  color: var(--book-ink, #221d15);
  transform-origin: center center;
  will-change: left, width, transform, opacity;
  pointer-events: none;
}

.lirea-book-stage[data-spread-layout="single"] .gpb-cylinder-clone,
.gpb-cylinder-clone[data-spread-layout="single"] {
  grid-template-columns: minmax(0, 1fr) !important;
}

.gpb-cylinder-shader {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* 12. Full-Screen Navigation Modal: Chapters | Bookmarks | Notes (#toc-drawer — 01:51-01:58) */
.gpb-fullscreen-toc,
.gpb-fullscreen-nav-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #131314 !important;
  color: #e3e3e3 !important;
  border: none !important;
  border-radius: 0 !important;
  z-index: 290 !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateY(16px) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
}

.gpb-fullscreen-toc.open,
.gpb-fullscreen-nav-modal.open {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.gpb-toc-topbar,
.gpb-nav-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
}

.gpb-toc-tabs,
.gpb-nav-modal-tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0 24px;
}

.gpb-toc-tab,
.gpb-nav-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 12px 24px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: #9aa0a6;
  cursor: pointer;
}

.gpb-toc-tab.active,
.gpb-nav-tab.active {
  color: #a8c7fa;
  border-bottom-color: #a8c7fa;
}

.gpb-toc-tab-panels {
  flex: 1;
  overflow-y: auto;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px 40px;
}

.gpb-chapters-list[hidden] {
  display: none !important;
}

.gpb-chapters-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toc-item-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #e3e3e3 !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 0.94rem !important;
  border: none;
  cursor: pointer;
}

.toc-item-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.toc-item-btn.active {
  color: #a8c7fa !important;
  font-weight: 500 !important;
}

.toc-page-tag {
  font-family: 'Roboto', sans-serif !important;
  font-size: 0.85rem !important;
  color: #9aa0a6 !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.toc-item-btn.active .toc-page-tag::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a8c7fa;
  display: inline-block;
}

.gpb-notes-empty-state,
.gpb-empty-tab-state {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  color: #9aa0a6;
}

.gpb-notes-empty-state h4,
.gpb-empty-tab-state h4 {
  font-size: 1.05rem;
  font-weight: 500;
  color: #e3e3e3;
  margin-top: 8px;
}

.gpb-notes-empty-state p,
.gpb-empty-tab-state p {
  font-size: 0.88rem;
  color: #9aa0a6;
}

/* 14. Night Light Overlay & Bottom Toast Banner ("Night Light begins this evening." — 01:27) */
.lirea-book-stage {
  filter: brightness(var(--reader-brightness, 1));
}

.gpb-night-light-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 95;
  background: rgba(255, 148, 42, 0.22);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.reader-modal[data-paper-stock="night"] .gpb-night-light-overlay {
  background: rgba(255, 142, 36, 0.22);
  mix-blend-mode: normal;
}

.reader-modal.night-light-on .gpb-night-light-overlay,
.reader-modal[data-night-light="on"] .gpb-night-light-overlay {
  opacity: 1;
}

.gpb-toast-banner {
  position: fixed;
  bottom: 72px;
  left: 24px;
  right: 24px;
  max-width: 560px;
  margin: 0 auto;
  background: #e3e3e3;
  color: #1f1f1f;
  padding: 12px 18px;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.88rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  z-index: 310;
}

.gpb-toast-banner[hidden] {
  display: none !important;
}

/* 15. Selection Bubble & Empty Home Section Placeholder */
.gpb-selection-bubble {
  background: #1e1f22 !important;
  color: #e3e3e3 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-empty-section {
  min-height: 60vh;
  width: 100%;
}

@media (orientation: landscape) and (max-height: 700px) {
  .reader-modal[data-view-mode="flowing"] .lirea-book-stage,
  .reader-modal:not([data-view-mode="original"]) .lirea-book-stage {
    width: 100dvw !important;
    height: 100dvh !important;
  }

  .reader-modal .lirea-book-stage[data-spread-layout="single"] .lirea-page-left {
    padding-left: clamp(22px, 10vw, 120px) !important;
    padding-right: clamp(22px, 10vw, 120px) !important;
  }

  .reader-modal .lirea-page-body {
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .reader-modal .lirea-page-body p,
  .reader-modal .lirea-page-body h1,
  .reader-modal .lirea-page-body h2,
  .reader-modal .lirea-page-body blockquote {
    font-size: var(--page-font-size, var(--reader-font-size, 16px)) !important;
    line-height: var(--page-line-height, var(--reader-line-height, 1.6)) !important;
  }
}

/* ========================================================
   16. COMPREHENSIVE MOBILE PHONE OPTIMIZATION (<= 680px)
   Fixes Topbar Overflow, 2-Column Book Cards, Cover Aspect Ratio,
   Bottom Navigation Bar, Floating Vaults, and Single-Page Reader
   ======================================================== */
html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 680px) {
  /* 1. App Shell & Bottom Navigation Bar */
  .app-shell {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .app-sidebar {
    height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 950 !important;
  }

  .sidebar-nav {
    gap: 4px !important;
  }

  .nav-item {
    padding: 6px 4px !important;
    font-size: 0.72rem !important;
    border-radius: 10px !important;
  }

  /* 2. Topbar: Compact 2-Row Layout (Row 1 = Brand + Action Pills, Row 2 = Full-Width Search) */
  .topbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .topbar-left-brand {
    order: 1 !important;
    flex: 0 0 auto !important;
  }

  .topbar-brand-sub {
    display: none !important;
  }

  .topbar-brand-name {
    font-size: 1.05rem !important;
  }

  .wax-logo-img {
    width: 64px !important;
    height: 64px !important;
  }

  .topbar-actions {
    order: 2 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    min-width: 0 !important;
  }

  .search-wrapper {
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .search-input {
    height: 38px !important;
    font-size: 16px !important; /* Prevents iOS Safari auto-zoom on focus */
    padding-left: 36px !important;
    border-radius: 10px !important;
  }

  /* Compact Topbar Action Pills so all 4 buttons fit 360px-414px screens cleanly */
  .category-drawer-toggle-btn,
  .theme-drawer-toggle-btn {
    padding: 6px 9px !important;
    font-size: 0.74rem !important;
    gap: 4px !important;
    border-radius: 9px !important;
  }

  .cat-pill-chevron {
    display: none !important;
  }

  .import-btn {
    padding: 6px 9px !important;
    font-size: 0.74rem !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
  }

  .google-topbar-btn {
    padding: 4px 8px !important;
    max-width: 112px !important;
    border-radius: 999px !important;
  }

  .google-user-email {
    display: none !important;
  }

  .google-user-name {
    font-size: 0.72rem !important;
    max-width: 64px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* 3. Floating Panels (Categories, Themes, Account Dropdown) */
  .account-dropdown-panel {
    top: 56px !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
  }

  .theme-effects-vault,
  #category-vault-section {
    top: 104px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-height: 74dvh !important;
    padding: 14px 12px !important;
    border-radius: 16px !important;
  }

  .category-catalog-grid,
  .theme-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  /* 4. Main Content Area, Section Headers & 2-Column Bookshelf Grid */
  .content-area {
    padding: 12px 10px 32px !important;
  }

  .mobile-categories {
    padding: 4px 2px 10px !important;
    gap: 6px !important;
  }

  .cat-chip {
    padding: 6px 11px !important;
    font-size: 0.76rem !important;
  }

  .library-master-header {
    padding: 14px 14px !important;
    margin-bottom: 14px !important;
    border-radius: 14px !important;
  }

  .library-master-title {
    font-size: 1.2rem !important;
  }

  .library-master-sub {
    font-size: 0.78rem !important;
  }

  .section-header {
    margin-bottom: 10px !important;
    gap: 8px !important;
  }

  .section-title {
    font-size: 1.02rem !important;
  }

  .bookshelf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .bookshelf-grid.list-mode {
    grid-template-columns: 1fr !important;
  }

  /* 5. Book Card & Cover Stage — Fix Stretched/Distorted Covers on Phone */
  .book-card {
    padding: 8px !important;
    border-radius: 12px !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  .lirea-cover-stage,
  .lirea-marketplace-cover-box {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    padding: 6px !important;
    border-radius: 9px !important;
  }

  .lirea-clean-cover-wrap {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
  }

  .book-card-body {
    gap: 4px !important;
    padding: 2px 2px 0 !important;
  }

  .book-card-cat {
    font-size: 0.62rem !important;
  }

  .book-card-title {
    font-size: 0.86rem !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .book-card-author {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .book-card-desc {
    font-size: 0.7rem !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 2 !important;
    margin-top: 2px !important;
  }

  .book-card-footer {
    padding-top: 6px !important;
    margin-top: auto !important;
    gap: 4px !important;
  }

  .card-pages {
    font-size: 0.65rem !important;
  }

  .read-link {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
  }

  /* 6. Google Sign-In & Paid Book Purchase Modals on Phone */
  .google-auth-card,
  .purchase-card {
    width: min(94vw, 420px) !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }

  /* 7. Book Reader Modal (Google Play Books Single-Page Mobile Experience) */
  .reader-modal[data-view-mode="flowing"] .lirea-page,
  .reader-modal:not([data-view-mode="original"]) .lirea-page,
  .reader-modal[data-view-mode="flowing"] .lirea-book-stage[data-spread-layout="single"] .lirea-page-left,
  .reader-modal:not([data-view-mode="original"]) .lirea-book-stage[data-spread-layout="single"] .lirea-page-left,
  .reader-modal[data-view-mode="original"] .lirea-page {
    padding: var(--page-pad-top, 22px) var(--page-pad-x, 20px) var(--page-pad-bottom, 16px) var(--page-pad-x, 20px) !important;
  }

  .lirea-page:has(.lirea-reader-canonical-cover) {
    padding: 0 !important;
  }

  /* Narrow edge zones on phone so Page 6 CONTENTS links and text are never blocked */
  .lirea-edge-zone {
    width: 18px !important;
  }

  /* Allow vertical touch scrolling on interactive CONTENTS page on phone */
  .lirea-page-body:has(.gpb-inline-toc-wrap) {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .gpb-inline-toc-wrap {
    padding: 4px 2px 12px !important;
  }

  .gpb-inline-toc-heading {
    font-size: 1.15rem !important;
    margin-bottom: 12px !important;
  }

  .gpb-inline-toc-link {
    padding: 8px 4px !important;
    font-size: 0.9rem !important;
  }

  /* Hide neighboring spread previews on narrow phones so single-page zoom-out HUD is clean */
  .gpb-neighbor-spread,
  .gpb-carousel-neighbor {
    display: none !important;
  }

  .reader-modal:not(.hud-hidden) .lirea-book-stage {
    transform: scale(var(--book-zoom-scale, 1)) !important;
  }

  /* Reader Topbar & Bottom Scrubber Bar with Safe Area Insets */
  .gpb-topbar,
  .lirea-hud-top {
    height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    padding: env(safe-area-inset-top, 0px) 8px 0 8px !important;
  }

  .gpb-book-title {
    font-size: 0.95rem !important;
  }

  .gpb-icon-btn {
    width: 38px !important;
    height: 38px !important;
  }

  .gpb-bottombar,
  .lirea-hud-bottom {
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 12px env(safe-area-inset-bottom, 0px) 12px !important;
    gap: 10px !important;
  }

  .gpb-hud-chapter-caption,
  .gpb-hud-chapter-pages-left {
    bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 0.76rem !important;
  }

  /* Display Options (`Aa`) Popover as Mobile Bottom Sheet */
  .gpb-aa-sheet,
  #reader-settings-panel {
    position: fixed !important;
    top: auto !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: 70dvh !important;
    border-radius: 18px !important;
  }

  /* Search Drawer & 3-Dots Overflow Menu on Phone */
  #search-drawer,
  .gpb-search-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .gpb-more-dropdown {
    top: calc(54px + env(safe-area-inset-top, 0px)) !important;
    right: 8px !important;
    min-width: 200px !important;
  }

  .gpb-toc-tab-panels {
    padding: 12px 14px 32px !important;
  }
}

/* Google Identity Services (GSI) Button Container & Avatar Image */
.google-gsi-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 10px 0 6px;
}

.google-gsi-btn-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
}

.google-gsi-btn-container:empty {
  display: none;
}

.google-user-avatar-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* ========================================================
   17. PREMIUM CATEGORY-WISE HORIZONTAL SHELVES (FREE BOOK SECTION)
   - Vertically stacked category shelves
   - Category Title + Subheading on left, "View all" on extreme right
   - Horizontal book track with Left & Right circular arrow buttons
   - Arrows auto-hide (.is-hidden) when at start or end of track
   ======================================================== */
.bookshelf-grid.lirea-category-shelves-mode {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  grid-template-columns: none !important;
}

.lirea-cat-shelf-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px 20px;
  border-radius: 20px;
  background: var(--bg-card, rgba(255, 252, 245, 0.78));
  border: 1px solid var(--border-subtle, rgba(139, 94, 52, 0.16));
  box-shadow: 0 10px 28px rgba(28, 21, 14, 0.05);
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.lirea-cat-shelf-block:hover {
  border-color: var(--accent-gold, rgba(180, 123, 56, 0.36));
  box-shadow: 0 14px 34px rgba(28, 21, 14, 0.08);
}

.lirea-cat-row-header,
.lirea-single-cat-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.lirea-single-cat-banner {
  padding: 18px 22px;
  margin-bottom: 8px;
  border-radius: 18px;
  background: var(--bg-card, rgba(255, 252, 245, 0.86));
  border: 1px solid var(--border-subtle, rgba(139, 94, 52, 0.2));
  box-shadow: 0 8px 24px rgba(28, 21, 14, 0.06);
}

.lirea-cat-row-title-group {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}

.lirea-cat-rank-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  color: #ffffff;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  flex-shrink: 0;
}

.lirea-cat-row-headings {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.lirea-cat-row-title {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Literata', Georgia, serif;
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary, #1f1a15);
  letter-spacing: -0.01em;
}

.lirea-cat-row-sub {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-muted, #6e6256);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lirea-cat-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, rgba(139, 94, 52, 0.24));
  background: var(--bg-elevated, rgba(255, 255, 255, 0.85));
  color: var(--text-primary, #2b2118);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.lirea-cat-view-all-btn:hover {
  background: var(--accent-primary, #8b2635);
  color: #ffffff;
  border-color: var(--accent-primary, #8b2635);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(139, 38, 53, 0.22);
}

.lirea-cat-view-all-btn svg {
  transition: transform 0.2s ease;
}

.lirea-cat-view-all-btn:hover svg {
  transform: translateX(2px);
}

.lirea-cat-view-all-btn.is-back-btn:hover svg {
  transform: translateX(-2px);
}

.lirea-cat-row-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.lirea-cat-horizontal-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 18px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  padding: 6px 4px 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lirea-cat-horizontal-track::-webkit-scrollbar {
  display: none;
}

.lirea-cat-horizontal-track > .book-card {
  flex: 0 0 212px;
  width: 212px;
  max-width: 212px;
  scroll-snap-align: start;
}

/* Circular Left & Right Scroll Arrow Buttons */
.lirea-cat-circle-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(139, 94, 52, 0.28);
  background: rgba(255, 252, 247, 0.96);
  color: #241a12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  box-shadow: 0 8px 24px rgba(18, 12, 8, 0.18), 0 0 0 4px rgba(255, 252, 247, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.22s ease, transform 0.22s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, visibility 0.22s ease;
}

[data-app-theme="midnight"] .lirea-cat-circle-arrow,
[data-app-theme="obsidian"] .lirea-cat-circle-arrow,
[data-app-theme="forest"] .lirea-cat-circle-arrow {
  background: rgba(30, 32, 38, 0.95);
  color: #f4efe6;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(20, 22, 28, 0.4);
}

.lirea-cat-circle-arrow.is-left {
  left: -14px;
}

.lirea-cat-circle-arrow.is-right {
  right: -14px;
}

.lirea-cat-circle-arrow:hover {
  background: var(--accent-primary, #8b2635);
  color: #ffffff;
  border-color: var(--accent-primary, #8b2635);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 28px rgba(139, 38, 53, 0.34);
}

.lirea-cat-circle-arrow:active {
  transform: translateY(-50%) scale(0.96);
}

.lirea-cat-circle-arrow.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-50%) scale(0.82) !important;
}

@media (max-width: 680px) {
  .bookshelf-grid.lirea-category-shelves-mode {
    gap: 18px !important;
  }

  .lirea-cat-shelf-block {
    padding: 14px 12px 14px !important;
    border-radius: 16px !important;
    gap: 12px !important;
  }

  .lirea-cat-row-header,
  .lirea-single-cat-banner {
    gap: 10px !important;
  }

  .lirea-single-cat-banner {
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  .lirea-cat-row-title-group {
    gap: 10px !important;
  }

  .lirea-cat-rank-pill {
    min-width: 34px !important;
    height: 34px !important;
    font-size: 0.74rem !important;
    border-radius: 9px !important;
  }

  .lirea-cat-row-title {
    font-size: 1.1rem !important;
  }

  .lirea-cat-row-sub {
    font-size: 0.73rem !important;
  }

  .lirea-cat-view-all-btn {
    padding: 6px 11px !important;
    font-size: 0.73rem !important;
    gap: 4px !important;
  }

  .lirea-cat-horizontal-track {
    gap: 12px !important;
    padding: 4px 2px 8px !important;
  }

  .lirea-cat-horizontal-track > .book-card {
    flex: 0 0 156px !important;
    width: 156px !important;
    max-width: 156px !important;
  }

  .lirea-cat-circle-arrow {
    width: 36px !important;
    height: 36px !important;
    top: 40% !important;
  }

  .lirea-cat-circle-arrow.is-left {
    left: -6px !important;
  }

  .lirea-cat-circle-arrow.is-right {
    right: -6px !important;
  }
}

/* ========================================================
   18. READER LIGHTING INTERFACE — 24 VIEWING THEMES (8 ROWS × 3 COLUMNS)
   Impressive, Eye-Soothing, Non-Dark Literary & Pastel Paper Stocks
   ======================================================== */
.gpb-viewing-theme-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.gpb-active-theme-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(168, 199, 250, 0.14);
  color: #a8c7fa;
  font-family: 'Roboto', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
}

.gpb-viewing-theme-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-height: 292px;
  overflow-y: auto;
  padding: 4px 2px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}

.gpb-viewing-theme-grid::-webkit-scrollbar {
  width: 5px;
}

.gpb-viewing-theme-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.24);
  border-radius: 999px;
}

.gpb-viewing-theme-grid .gpb-rect-theme-btn {
  height: 46px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-family: 'Plus Jakarta Sans', 'Roboto', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.gpb-viewing-theme-grid .gpb-rect-theme-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(168, 199, 250, 0.65) !important;
}

.gpb-viewing-theme-grid .gpb-rect-theme-btn.active {
  border: 2px solid #a8c7fa !important;
  box-shadow: 0 0 0 2px rgba(168, 199, 250, 0.42), 0 4px 12px rgba(0, 0, 0, 0.32) !important;
}

.gpb-theme-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Swatch Colors for All 24 Website Themes + Extra Reader Viewing Themes */
.gpb-rect-eyecare     { background: linear-gradient(135deg, #dce8dd, #a9c7ad) !important; color: #16281b !important; }
.gpb-rect-wooden      { background: repeating-linear-gradient(90deg, rgba(130, 85, 45, 0.08) 0px, rgba(130, 85, 45, 0.08) 2px, transparent 2px, transparent 8px), linear-gradient(135deg, #f4e7d4, #d4b48c) !important; color: #291a0e !important; }
.gpb-rect-light       { background: linear-gradient(135deg, #ffffff, #e6e1d6) !important; color: #181a1d !important; }
.gpb-rect-rosewood    { background: linear-gradient(135deg, #fbf0f2, #dfaab5) !important; color: #2d1419 !important; }
.gpb-rect-bamboo      { background: linear-gradient(135deg, #f1e9d2, #c4b282) !important; color: #241e10 !important; }
.gpb-rect-leather     { background: linear-gradient(135deg, #f6ebe1, #cfaea0) !important; color: #291c14 !important; }
.gpb-rect-parchment   { background: linear-gradient(135deg, #f2e2c6, #c4a06e) !important; color: #261a0e !important; }
.gpb-rect-linen       { background: linear-gradient(135deg, #f5f1e8, #cfc7b6) !important; color: #201e1a !important; }
.gpb-rect-eink        { background: linear-gradient(135deg, #f2f3ee, #bfc2ba) !important; color: #141514 !important; }
.gpb-rect-matcha      { background: linear-gradient(135deg, #e7efda, #a7be88) !important; color: #1a2614 !important; }
.gpb-rect-candlelight { background: linear-gradient(135deg, #fbf0d8, #deb878) !important; color: #2b1d0c !important; }
.gpb-rect-nordic      { background: linear-gradient(135deg, #e8eff4, #a9bfd1) !important; color: #15222e !important; }
.gpb-rect-velvet      { background: linear-gradient(135deg, #f9edf1, #d8a7b8) !important; color: #2b121b !important; }
.gpb-rect-marble      { background: linear-gradient(135deg, #f7f8fa, #cfd4dc) !important; color: #181c22 !important; }
.gpb-rect-sandstone   { background: linear-gradient(135deg, #f4e4d2, #c99e76) !important; color: #2b1b10 !important; }
.gpb-rect-lavender    { background: linear-gradient(135deg, #efeaf9, #bcaee0) !important; color: #1f1830 !important; }
.gpb-rect-forest      { background: linear-gradient(135deg, #e5f5eb, #9fd1b4) !important; color: #13261b !important; }
.gpb-rect-espresso    { background: linear-gradient(135deg, #f7efe7, #cbb39e) !important; color: #241b15 !important; }
.gpb-rect-copper      { background: linear-gradient(135deg, #fbf0e9, #dba88f) !important; color: #291810 !important; }
.gpb-rect-blueprint   { background: linear-gradient(135deg, #ebf4fc, #a3c6e8) !important; color: #122438 !important; }
.gpb-rect-starlight   { background: linear-gradient(135deg, #eff2fc, #b3bef0) !important; color: #171c36 !important; }
.gpb-rect-cyber       { background: linear-gradient(135deg, #f5f8fc, #bdcad9) !important; color: #111824 !important; }
.gpb-rect-pearl       { background: linear-gradient(135deg, #eef2f7, #b8c4d4) !important; color: #18202c !important; }
.gpb-rect-sage        { background: linear-gradient(135deg, #e5f1e7, #d2e6d5) !important; color: #182b1e !important; }
.gpb-rect-ivory       { background: linear-gradient(135deg, #fdfbf4, #f5eedc) !important; color: #241e17 !important; }
.gpb-rect-honey       { background: linear-gradient(135deg, #fbf0d8, #efd9ad) !important; color: #30210e !important; }
.gpb-rect-oat         { background: linear-gradient(135deg, #f7eee4, #e9d8c7) !important; color: #2a2018 !important; }
.gpb-rect-rose        { background: linear-gradient(135deg, #fbeef1, #f0d7de) !important; color: #311a20 !important; }
.gpb-rect-sky         { background: linear-gradient(135deg, #ebf3f9, #d4e5f2) !important; color: #172634 !important; }
.gpb-rect-mint        { background: linear-gradient(135deg, #e5f6ee, #cdeadd) !important; color: #152b21 !important; }
.gpb-rect-peach       { background: linear-gradient(135deg, #fcf0e8, #f2d8c7) !important; color: #321e15 !important; }
.gpb-rect-alabaster   { background: linear-gradient(135deg, #f8f9fb, #eaedf2) !important; color: #1c1f24 !important; }
.gpb-rect-butter      { background: linear-gradient(135deg, #fdf6e1, #f3e5be) !important; color: #2b2312 !important; }
.gpb-rect-pistachio   { background: linear-gradient(135deg, #edf4e3, #dbe8c9) !important; color: #202917 !important; }
.gpb-rect-chamomile   { background: linear-gradient(135deg, #faf3de, #ede0ba) !important; color: #2c2413 !important; }
.gpb-rect-cloud       { background: linear-gradient(135deg, #eaf0f8, #d5e2f1) !important; color: #192535 !important; }

/* Enable Tactile Paper Surface Patterns on Reader Sheets when a Textured Website Theme is Selected */
.lirea-page-left,
.lirea-page-right,
.gpb-neighbor-page {
  background-image: var(--paper-pattern, none) !important;
  background-size: var(--paper-pattern-size, auto) !important;
}

/* Live Book Spread & Page Variables for All 24 Website Themes + Extra Viewing Themes */
[data-app-theme="eyecare"] .reader-modal,
[data-app-theme="eyecare"] .lirea-book-stage,
[data-app-theme="sage"] .reader-modal,
[data-app-theme="sage"] .lirea-book-stage,
.reader-modal[data-theme="eyecare"],
.reader-modal[data-paper-stock="eyecare"],
.reader-modal[data-theme="sage"],
.reader-modal[data-paper-stock="sage"],
.lirea-book-stage[data-theme="eyecare"],
.lirea-book-stage[data-paper-stock="eyecare"],
.lirea-book-stage[data-theme="sage"],
.lirea-book-stage[data-paper-stock="sage"] {
  --paper-bg: #d9e7da;
  --paper-ink: #112516;
  --paper-ink-muted: #496950;
  --paper-accent: #1b6d3e;
  --paper-rule: rgba(17, 37, 22, 0.16);
  --book-paper: #d9e7da;
  --book-paper-verso: #d9e7da;
  --book-ink: #112516;
  --book-ink-secondary: #2b4c34;
  --book-ink-muted: #496950;
  --paper-pattern: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35), transparent 60%);
}

[data-app-theme="wooden"] .reader-modal,
[data-app-theme="wooden"] .lirea-book-stage,
.reader-modal[data-theme="wooden"],
.reader-modal[data-paper-stock="wooden"],
.lirea-book-stage[data-theme="wooden"],
.lirea-book-stage[data-paper-stock="wooden"] {
  --paper-bg: #f0dec8;
  --paper-ink: #2d1709;
  --paper-ink-muted: #785338;
  --paper-accent: #a63a17;
  --paper-rule: rgba(45, 23, 9, 0.18);
  --book-paper: #f0dec8;
  --book-paper-verso: #f0dec8;
  --book-ink: #2d1709;
  --book-ink-secondary: #56331b;
  --book-ink-muted: #785338;
  --paper-pattern: repeating-linear-gradient(90deg, rgba(130, 85, 45, 0.05) 0px, rgba(130, 85, 45, 0.05) 2px, transparent 2px, transparent 10px), linear-gradient(135deg, rgba(255, 248, 236, 0.45), rgba(185, 140, 90, 0.12));
}

[data-app-theme="sepia"] .reader-modal,
[data-app-theme="sepia"] .lirea-book-stage,
[data-app-theme="creme"] .reader-modal,
[data-app-theme="creme"] .lirea-book-stage,
.reader-modal[data-theme="sepia"],
.reader-modal[data-paper-stock="sepia"],
.reader-modal[data-theme="creme"],
.reader-modal[data-paper-stock="creme"],
.lirea-book-stage[data-theme="sepia"],
.lirea-book-stage[data-paper-stock="sepia"],
.lirea-book-stage[data-theme="creme"],
.lirea-book-stage[data-paper-stock="creme"] {
  --paper-bg: #ebddbe;
  --paper-ink: #291c0e;
  --paper-ink-muted: #73573a;
  --paper-accent: #8c2d19;
  --paper-rule: rgba(41, 28, 14, 0.18);
  --book-paper: #ebddbe;
  --book-paper-verso: #ebddbe;
  --book-ink: #291c0e;
  --book-ink-secondary: #4d3822;
  --book-ink-muted: #73573a;
}

[data-app-theme="light"] .reader-modal,
[data-app-theme="light"] .lirea-book-stage,
[data-app-theme="day"] .reader-modal,
[data-app-theme="day"] .lirea-book-stage,
.reader-modal[data-theme="light"],
.reader-modal[data-paper-stock="light"],
.reader-modal[data-theme="day"],
.reader-modal[data-paper-stock="day"],
.lirea-book-stage[data-theme="light"],
.lirea-book-stage[data-paper-stock="light"],
.lirea-book-stage[data-theme="day"],
.lirea-book-stage[data-paper-stock="day"] {
  --paper-bg: #ffffff;
  --paper-ink: #16171a;
  --paper-ink-muted: #646a78;
  --paper-accent: #b3261e;
  --paper-rule: rgba(22, 23, 26, 0.14);
  --book-paper: #ffffff;
  --book-paper-verso: #ffffff;
  --book-ink: #16171a;
  --book-ink-secondary: #424652;
  --book-ink-muted: #646a78;
}

[data-app-theme="dark"] .reader-modal,
[data-app-theme="dark"] .lirea-book-stage,
[data-app-theme="night"] .reader-modal,
[data-app-theme="night"] .lirea-book-stage,
.reader-modal[data-theme="dark"],
.reader-modal[data-paper-stock="dark"],
.reader-modal[data-theme="night"],
.reader-modal[data-paper-stock="night"],
.lirea-book-stage[data-theme="dark"],
.lirea-book-stage[data-paper-stock="dark"],
.lirea-book-stage[data-theme="night"],
.lirea-book-stage[data-paper-stock="night"] {
  --paper-bg: #0f1217;
  --paper-ink: #e3e7f0;
  --paper-ink-muted: #828c9e;
  --paper-accent: #6ea8fe;
  --paper-rule: rgba(255, 255, 255, 0.15);
  --book-paper: #0f1217;
  --book-paper-verso: #0f1217;
  --book-ink: #e3e7f0;
  --book-ink-secondary: #b5bed0;
  --book-ink-muted: #828c9e;
}

[data-app-theme="rosewood"] .reader-modal,
[data-app-theme="rosewood"] .lirea-book-stage,
[data-app-theme="rose"] .reader-modal,
[data-app-theme="rose"] .lirea-book-stage,
.reader-modal[data-theme="rosewood"],
.reader-modal[data-paper-stock="rosewood"],
.reader-modal[data-theme="rose"],
.reader-modal[data-paper-stock="rose"],
.lirea-book-stage[data-theme="rosewood"],
.lirea-book-stage[data-paper-stock="rosewood"],
.lirea-book-stage[data-theme="rose"],
.lirea-book-stage[data-paper-stock="rose"] {
  --paper-bg: #f5dbe1;
  --paper-ink: #35101a;
  --paper-ink-muted: #7d4452;
  --paper-accent: #a82442;
  --paper-rule: rgba(53, 16, 26, 0.16);
  --book-paper: #f5dbe1;
  --book-paper-verso: #f5dbe1;
  --book-ink: #35101a;
  --book-ink-secondary: #5e2535;
  --book-ink-muted: #7d4452;
}

[data-app-theme="bamboo"] .reader-modal,
[data-app-theme="bamboo"] .lirea-book-stage,
.reader-modal[data-theme="bamboo"],
.reader-modal[data-paper-stock="bamboo"],
.lirea-book-stage[data-theme="bamboo"],
.lirea-book-stage[data-paper-stock="bamboo"] {
  --paper-bg: #e8dcbc;
  --paper-ink: #221c10;
  --paper-ink-muted: #6e6145;
  --paper-accent: #6b7029;
  --paper-rule: rgba(34, 28, 16, 0.16);
  --book-paper: #e8dcbc;
  --book-paper-verso: #e8dcbc;
  --book-ink: #221c10;
  --book-ink-secondary: #483d28;
  --book-ink-muted: #6e6145;
}

[data-app-theme="parchment"] .reader-modal,
[data-app-theme="parchment"] .lirea-book-stage,
.reader-modal[data-theme="parchment"],
.reader-modal[data-paper-stock="parchment"],
.lirea-book-stage[data-theme="parchment"],
.lirea-book-stage[data-paper-stock="parchment"] {
  --paper-bg: #e4cba0;
  --paper-ink: #2b1708;
  --paper-ink-muted: #755233;
  --paper-accent: #8c3116;
  --paper-rule: rgba(43, 23, 8, 0.18);
  --book-paper: #e4cba0;
  --book-paper-verso: #e4cba0;
  --book-ink: #2b1708;
  --book-ink-secondary: #52341b;
  --book-ink-muted: #755233;
  --paper-pattern: radial-gradient(ellipse at center, rgba(255, 248, 232, 0.45) 0%, rgba(138, 98, 52, 0.15) 100%);
}

[data-app-theme="leather"] .reader-modal,
[data-app-theme="leather"] .lirea-book-stage,
.reader-modal[data-theme="leather"],
.reader-modal[data-paper-stock="leather"],
.lirea-book-stage[data-theme="leather"],
.lirea-book-stage[data-paper-stock="leather"] {
  --paper-bg: #e2c5a2;
  --paper-ink: #2d1608;
  --paper-ink-muted: #754e33;
  --paper-accent: #993d18;
  --paper-rule: rgba(45, 22, 8, 0.18);
  --book-paper: #e2c5a2;
  --book-paper-verso: #e2c5a2;
  --book-ink: #2d1608;
  --book-ink-secondary: #54331b;
  --book-ink-muted: #754e33;
}

[data-app-theme="linen"] .reader-modal,
[data-app-theme="linen"] .lirea-book-stage,
[data-app-theme="lin"] .reader-modal,
[data-app-theme="lin"] .lirea-book-stage,
.reader-modal[data-theme="linen"],
.reader-modal[data-paper-stock="linen"],
.reader-modal[data-theme="lin"],
.reader-modal[data-paper-stock="lin"],
.lirea-book-stage[data-theme="linen"],
.lirea-book-stage[data-paper-stock="linen"],
.lirea-book-stage[data-theme="lin"],
.lirea-book-stage[data-paper-stock="lin"] {
  --paper-bg: #eae2d0;
  --paper-ink: #1c1f1e;
  --paper-ink-muted: #666e69;
  --paper-accent: #9c3328;
  --paper-rule: rgba(28, 31, 30, 0.16);
  --book-paper: #eae2d0;
  --book-paper-verso: #eae2d0;
  --book-ink: #1c1f1e;
  --book-ink-secondary: #404543;
  --book-ink-muted: #666e69;
  --paper-pattern: repeating-linear-gradient(0deg, rgba(80, 70, 55, 0.035) 0px, rgba(80, 70, 55, 0.035) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(90deg, rgba(80, 70, 55, 0.035) 0px, rgba(80, 70, 55, 0.035) 1px, transparent 1px, transparent 4px);
}

[data-app-theme="eink"] .reader-modal,
[data-app-theme="eink"] .lirea-book-stage,
.reader-modal[data-theme="eink"],
.reader-modal[data-paper-stock="eink"],
.lirea-book-stage[data-theme="eink"],
.lirea-book-stage[data-paper-stock="eink"] {
  --paper-bg: #edf0ea;
  --paper-ink: #050505;
  --paper-ink-muted: #545754;
  --paper-accent: #111111;
  --paper-rule: rgba(5, 5, 5, 0.2);
  --book-paper: #edf0ea;
  --book-paper-verso: #edf0ea;
  --book-ink: #050505;
  --book-ink-secondary: #262926;
  --book-ink-muted: #545754;
}

[data-app-theme="matcha"] .reader-modal,
[data-app-theme="matcha"] .lirea-book-stage,
.reader-modal[data-theme="matcha"],
.reader-modal[data-paper-stock="matcha"],
.lirea-book-stage[data-theme="matcha"],
.lirea-book-stage[data-paper-stock="matcha"] {
  --paper-bg: #d8e7c3;
  --paper-ink: #18270f;
  --paper-ink-muted: #4e6b3f;
  --paper-accent: #3e7025;
  --paper-rule: rgba(24, 39, 15, 0.16);
  --book-paper: #d8e7c3;
  --book-paper-verso: #d8e7c3;
  --book-ink: #18270f;
  --book-ink-secondary: #334d26;
  --book-ink-muted: #4e6b3f;
}

[data-app-theme="candlelight"] .reader-modal,
[data-app-theme="candlelight"] .lirea-book-stage,
.reader-modal[data-theme="candlelight"],
.reader-modal[data-paper-stock="candlelight"],
.lirea-book-stage[data-theme="candlelight"],
.lirea-book-stage[data-paper-stock="candlelight"] {
  --paper-bg: #fae2a3;
  --paper-ink: #331a04;
  --paper-ink-muted: #7d4d23;
  --paper-accent: #b5540b;
  --paper-rule: rgba(51, 26, 4, 0.18);
  --book-paper: #fae2a3;
  --book-paper-verso: #fae2a3;
  --book-ink: #331a04;
  --book-ink-secondary: #5c3312;
  --book-ink-muted: #7d4d23;
}

[data-app-theme="nordic"] .reader-modal,
[data-app-theme="nordic"] .lirea-book-stage,
.reader-modal[data-theme="nordic"],
.reader-modal[data-paper-stock="nordic"],
.lirea-book-stage[data-theme="nordic"],
.lirea-book-stage[data-paper-stock="nordic"] {
  --paper-bg: #d3e3f2;
  --paper-ink: #0b1f33;
  --paper-ink-muted: #3d6082;
  --paper-accent: #1967d2;
  --paper-rule: rgba(11, 31, 51, 0.16);
  --book-paper: #d3e3f2;
  --book-paper-verso: #d3e3f2;
  --book-ink: #0b1f33;
  --book-ink-secondary: #214366;
  --book-ink-muted: #3d6082;
}

[data-app-theme="velvet"] .reader-modal,
[data-app-theme="velvet"] .lirea-book-stage,
.reader-modal[data-theme="velvet"],
.reader-modal[data-paper-stock="velvet"],
.lirea-book-stage[data-theme="velvet"],
.lirea-book-stage[data-paper-stock="velvet"] {
  --paper-bg: #1c0e17;
  --paper-ink: #f9e2ed;
  --paper-ink-muted: #ab7f96;
  --paper-accent: #e55383;
  --paper-rule: rgba(255, 255, 255, 0.16);
  --book-paper: #1c0e17;
  --book-paper-verso: #1c0e17;
  --book-ink: #f9e2ed;
  --book-ink-secondary: #d6acc2;
  --book-ink-muted: #ab7f96;
}

[data-app-theme="marble"] .reader-modal,
[data-app-theme="marble"] .lirea-book-stage,
.reader-modal[data-theme="marble"],
.reader-modal[data-paper-stock="marble"],
.lirea-book-stage[data-theme="marble"],
.lirea-book-stage[data-paper-stock="marble"] {
  --paper-bg: #eceef5;
  --paper-ink: #141821;
  --paper-ink-muted: #576478;
  --paper-accent: #4a5568;
  --paper-rule: rgba(20, 24, 33, 0.15);
  --book-paper: #eceef5;
  --book-paper-verso: #eceef5;
  --book-ink: #141821;
  --book-ink-secondary: #333d4f;
  --book-ink-muted: #576478;
}

[data-app-theme="sandstone"] .reader-modal,
[data-app-theme="sandstone"] .lirea-book-stage,
.reader-modal[data-theme="sandstone"],
.reader-modal[data-paper-stock="sandstone"],
.lirea-book-stage[data-theme="sandstone"],
.lirea-book-stage[data-paper-stock="sandstone"] {
  --paper-bg: #ebd1ae;
  --paper-ink: #331908;
  --paper-ink-muted: #7a5135;
  --paper-accent: #b8471b;
  --paper-rule: rgba(51, 25, 8, 0.18);
  --book-paper: #ebd1ae;
  --book-paper-verso: #ebd1ae;
  --book-ink: #331908;
  --book-ink-secondary: #59351d;
  --book-ink-muted: #7a5135;
}

[data-app-theme="lavender"] .reader-modal,
[data-app-theme="lavender"] .lirea-book-stage,
.reader-modal[data-theme="lavender"],
.reader-modal[data-paper-stock="lavender"],
.lirea-book-stage[data-theme="lavender"],
.lirea-book-stage[data-paper-stock="lavender"] {
  --paper-bg: #e1d4f7;
  --paper-ink: #20103d;
  --paper-ink-muted: #624b82;
  --paper-accent: #7230b8;
  --paper-rule: rgba(32, 16, 61, 0.16);
  --book-paper: #e1d4f7;
  --book-paper-verso: #e1d4f7;
  --book-ink: #20103d;
  --book-ink-secondary: #42296e;
  --book-ink-muted: #624b82;
}

[data-app-theme="forest"] .reader-modal,
[data-app-theme="forest"] .lirea-book-stage,
[data-app-theme="mint"] .reader-modal,
[data-app-theme="mint"] .lirea-book-stage,
.reader-modal[data-theme="forest"],
.reader-modal[data-paper-stock="forest"],
.reader-modal[data-theme="mint"],
.reader-modal[data-paper-stock="mint"],
.lirea-book-stage[data-theme="forest"],
.lirea-book-stage[data-paper-stock="forest"],
.lirea-book-stage[data-theme="mint"],
.lirea-book-stage[data-paper-stock="mint"] {
  --paper-bg: #cde5d4;
  --paper-ink: #0c2615;
  --paper-ink-muted: #3d694b;
  --paper-accent: #1e7e43;
  --paper-rule: rgba(12, 38, 21, 0.16);
  --book-paper: #cde5d4;
  --book-paper-verso: #cde5d4;
  --book-ink: #0c2615;
  --book-ink-secondary: #224d30;
  --book-ink-muted: #3d694b;
}

[data-app-theme="espresso"] .reader-modal,
[data-app-theme="espresso"] .lirea-book-stage,
.reader-modal[data-theme="espresso"],
.reader-modal[data-paper-stock="espresso"],
.lirea-book-stage[data-theme="espresso"],
.lirea-book-stage[data-paper-stock="espresso"] {
  --paper-bg: #eed7c0;
  --paper-ink: #2b160b;
  --paper-ink-muted: #73503d;
  --paper-accent: #783818;
  --paper-rule: rgba(43, 22, 11, 0.18);
  --book-paper: #eed7c0;
  --book-paper-verso: #eed7c0;
  --book-ink: #2b160b;
  --book-ink-secondary: #4f3120;
  --book-ink-muted: #73503d;
}

[data-app-theme="copper"] .reader-modal,
[data-app-theme="copper"] .lirea-book-stage,
.reader-modal[data-theme="copper"],
.reader-modal[data-paper-stock="copper"],
.lirea-book-stage[data-theme="copper"],
.lirea-book-stage[data-paper-stock="copper"] {
  --paper-bg: #f3d4c0;
  --paper-ink: #331406;
  --paper-ink-muted: #7d4934;
  --paper-accent: #b84118;
  --paper-rule: rgba(51, 20, 6, 0.18);
  --book-paper: #f3d4c0;
  --book-paper-verso: #f3d4c0;
  --book-ink: #331406;
  --book-ink-secondary: #572917;
  --book-ink-muted: #7d4934;
}

[data-app-theme="blueprint"] .reader-modal,
[data-app-theme="blueprint"] .lirea-book-stage,
.reader-modal[data-theme="blueprint"],
.reader-modal[data-paper-stock="blueprint"],
.lirea-book-stage[data-theme="blueprint"],
.lirea-book-stage[data-paper-stock="blueprint"] {
  --paper-bg: #0a2442;
  --paper-ink: #e0f0fe;
  --paper-ink-muted: #79a6d2;
  --paper-accent: #64b5f6;
  --paper-rule: rgba(224, 240, 254, 0.16);
  --book-paper: #0a2442;
  --book-paper-verso: #0a2442;
  --book-ink: #e0f0fe;
  --book-ink-secondary: #add2f7;
  --book-ink-muted: #79a6d2;
  --paper-pattern: linear-gradient(rgba(100, 181, 246, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 181, 246, 0.12) 1px, transparent 1px);
  --paper-pattern-size: 24px 24px;
}

[data-app-theme="starlight"] .reader-modal,
[data-app-theme="starlight"] .lirea-book-stage,
.reader-modal[data-theme="starlight"],
.reader-modal[data-paper-stock="starlight"],
.lirea-book-stage[data-theme="starlight"],
.lirea-book-stage[data-paper-stock="starlight"] {
  --paper-bg: #0b1028;
  --paper-ink: #e0e7fc;
  --paper-ink-muted: #7d8ec7;
  --paper-accent: #829fff;
  --paper-rule: rgba(255, 255, 255, 0.15);
  --book-paper: #0b1028;
  --book-paper-verso: #0b1028;
  --book-ink: #e0e7fc;
  --book-ink-secondary: #b0c1f5;
  --book-ink-muted: #7d8ec7;
}

[data-app-theme="cyber"] .reader-modal,
[data-app-theme="cyber"] .lirea-book-stage,
.reader-modal[data-theme="cyber"],
.reader-modal[data-paper-stock="cyber"],
.lirea-book-stage[data-theme="cyber"],
.lirea-book-stage[data-paper-stock="cyber"] {
  --paper-bg: #0d1117;
  --paper-ink: #00f0ff;
  --paper-ink-muted: #4e8c9c;
  --paper-accent: #00e5ff;
  --paper-rule: rgba(0, 240, 255, 0.18);
  --book-paper: #0d1117;
  --book-paper-verso: #0d1117;
  --book-ink: #00f0ff;
  --book-ink-secondary: #8ef5fc;
  --book-ink-muted: #4e8c9c;
}

[data-app-theme="pearl"] .reader-modal,
[data-app-theme="pearl"] .lirea-book-stage,
.reader-modal[data-theme="pearl"],
.reader-modal[data-paper-stock="pearl"],
.lirea-book-stage[data-theme="pearl"],
.lirea-book-stage[data-paper-stock="pearl"] {
  --paper-bg: #e1e9f2;
  --paper-ink: #111c2b;
  --paper-ink-muted: #51657d;
  --paper-accent: #1a73e8;
  --paper-rule: rgba(17, 28, 43, 0.16);
  --book-paper: #e1e9f2;
  --book-paper-verso: #e1e9f2;
  --book-ink: #111c2b;
  --book-ink-secondary: #2f435c;
  --book-ink-muted: #51657d;
}

[data-app-theme="ivory"] .reader-modal,
[data-app-theme="ivory"] .lirea-book-stage,
.reader-modal[data-theme="ivory"],
.reader-modal[data-paper-stock="ivory"],
.lirea-book-stage[data-theme="ivory"],
.lirea-book-stage[data-paper-stock="ivory"] {
  --paper-bg: #fcf2d9;
  --paper-ink: #251c10;
  --paper-ink-muted: #6e5c46;
  --paper-accent: #8a4f1d;
  --paper-rule: rgba(37, 28, 16, 0.16);
  --book-paper: #fcf2d9;
  --book-paper-verso: #fcf2d9;
  --book-ink: #251c10;
  --book-ink-secondary: #4a3c28;
  --book-ink-muted: #6e5c46;
}

[data-app-theme="butter"] .reader-modal,
[data-app-theme="butter"] .lirea-book-stage,
.reader-modal[data-theme="butter"],
.reader-modal[data-paper-stock="butter"],
.lirea-book-stage[data-theme="butter"],
.lirea-book-stage[data-paper-stock="butter"] {
  --paper-bg: #faefc4;
  --paper-ink: #281d08;
  --paper-ink-muted: #735d33;
  --paper-accent: #9e6b12;
  --paper-rule: rgba(40, 29, 8, 0.18);
  --book-paper: #faefc4;
  --book-paper-verso: #faefc4;
  --book-ink: #281d08;
  --book-ink-secondary: #4d3c1c;
  --book-ink-muted: #735d33;
}

[data-app-theme="pistachio"] .reader-modal,
[data-app-theme="pistachio"] .lirea-book-stage,
.reader-modal[data-theme="pistachio"],
.reader-modal[data-paper-stock="pistachio"],
.lirea-book-stage[data-theme="pistachio"],
.lirea-book-stage[data-paper-stock="pistachio"] {
  --paper-bg: #d6e6c8;
  --paper-ink: #13230e;
  --paper-ink-muted: #49633e;
  --paper-accent: #3b7a22;
  --paper-rule: rgba(19, 35, 14, 0.16);
  --book-paper: #d6e6c8;
  --book-paper-verso: #d6e6c8;
  --book-ink: #13230e;
  --book-ink-secondary: #2f4724;
  --book-ink-muted: #49633e;
}

[data-app-theme="chamomile"] .reader-modal,
[data-app-theme="chamomile"] .lirea-book-stage,
.reader-modal[data-theme="chamomile"],
.reader-modal[data-paper-stock="chamomile"],
.lirea-book-stage[data-theme="chamomile"],
.lirea-book-stage[data-paper-stock="chamomile"] {
  --paper-bg: #f8ecc5;
  --paper-ink: #261d09;
  --paper-ink-muted: #705b35;
  --paper-accent: #8c6214;
  --paper-rule: rgba(38, 29, 9, 0.18);
  --book-paper: #f8ecc5;
  --book-paper-verso: #f8ecc5;
  --book-ink: #261d09;
  --book-ink-secondary: #4a3b1d;
  --book-ink-muted: #705b35;
}

[data-app-theme="cloud"] .reader-modal,
[data-app-theme="cloud"] .lirea-book-stage,
.reader-modal[data-theme="cloud"],
.reader-modal[data-paper-stock="cloud"],
.lirea-book-stage[data-theme="cloud"],
.lirea-book-stage[data-paper-stock="cloud"] {
  --paper-bg: #dbe8f5;
  --paper-ink: #0e1e30;
  --paper-ink-muted: #446080;
  --paper-accent: #1b65c2;
  --paper-rule: rgba(14, 30, 48, 0.16);
  --book-paper: #dbe8f5;
  --book-paper-verso: #dbe8f5;
  --book-ink: #0e1e30;
  --book-ink-secondary: #244161;
  --book-ink-muted: #446080;
}

[data-app-theme="peach"] .reader-modal,
[data-app-theme="peach"] .lirea-book-stage,
.reader-modal[data-theme="peach"],
.reader-modal[data-paper-stock="peach"],
.lirea-book-stage[data-theme="peach"],
.lirea-book-stage[data-paper-stock="peach"] {
  --paper-bg: #fae0cf;
  --paper-ink: #2f1408;
  --paper-ink-muted: #784835;
  --paper-accent: #b84d28;
  --paper-rule: rgba(47, 20, 8, 0.18);
  --book-paper: #fae0cf;
  --book-paper-verso: #fae0cf;
  --book-ink: #2f1408;
  --book-ink-secondary: #522b1c;
  --book-ink-muted: #784835;
}

/* Dark-Theme Reading Polish: High-contrast headings and luminous page text */
.reader-modal[data-theme="night"],
.reader-modal[data-theme="dark"],
.reader-modal[data-theme="blueprint"],
.reader-modal[data-theme="starlight"],
.reader-modal[data-theme="cyber"],
.reader-modal[data-theme="velvet"],
.reader-modal[data-paper-stock="night"],
.reader-modal[data-paper-stock="dark"],
.reader-modal[data-paper-stock="blueprint"],
.reader-modal[data-paper-stock="starlight"],
.reader-modal[data-paper-stock="cyber"],
.reader-modal[data-paper-stock="velvet"] {
  color-scheme: dark;
}

.reader-modal[data-theme="night"] .lirea-chapter-banner h1,
.reader-modal[data-theme="dark"] .lirea-chapter-banner h1,
.reader-modal[data-theme="blueprint"] .lirea-chapter-banner h1,
.reader-modal[data-theme="starlight"] .lirea-chapter-banner h1,
.reader-modal[data-theme="cyber"] .lirea-chapter-banner h1,
.reader-modal[data-theme="velvet"] .lirea-chapter-banner h1,
.reader-modal[data-paper-stock="night"] .lirea-chapter-banner h1,
.reader-modal[data-paper-stock="dark"] .lirea-chapter-banner h1,
.reader-modal[data-paper-stock="blueprint"] .lirea-chapter-banner h1,
.reader-modal[data-paper-stock="starlight"] .lirea-chapter-banner h1,
.reader-modal[data-paper-stock="cyber"] .lirea-chapter-banner h1,
.reader-modal[data-paper-stock="velvet"] .lirea-chapter-banner h1 {
  color: var(--book-ink) !important;
}


/* ========================================================
   PERSONAL CLOUD VAULT (1.0 GB QUOTA), SILENT COMPRESSOR
   & DRAG-AND-DROP PDF / EPUB IMPORTER (HOME SECTION)
   ======================================================== */
.home-empty-section {
  min-height: auto !important;
  padding: 6px 0 36px;
}

.lirea-personal-vault-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.lirea-vault-dashboard-card {
  background: linear-gradient(145deg, rgba(32, 24, 20, 0.92) 0%, rgba(18, 13, 11, 0.96) 100%);
  border: 1px solid rgba(214, 173, 106, 0.28);
  border-radius: 20px;
  padding: 26px 28px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.lirea-vault-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.lirea-vault-brand-col {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lirea-vault-badges-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lirea-vault-pill-gold {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: rgba(214, 173, 106, 0.18);
  color: #e6c280;
  border: 1px solid rgba(214, 173, 106, 0.38);
}

.lirea-vault-pill-green {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.34);
}

.lirea-vault-heading {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  font-weight: 700;
  color: #f9f2e7;
  margin: 2px 0 0;
  line-height: 1.2;
}

.lirea-vault-sub {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(236, 224, 210, 0.82);
  margin: 0;
  max-width: 68ch;
}

.lirea-vault-quota-box {
  flex: 0 1 320px;
  min-width: 265px;
  background: rgba(12, 9, 7, 0.68);
  border: 1px solid rgba(214, 173, 106, 0.24);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lirea-vault-quota-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: rgba(236, 224, 210, 0.85);
}

.lirea-vault-quota-header strong {
  color: #f5d799;
  font-weight: 700;
}

.lirea-vault-quota-track {
  width: 100%;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.lirea-vault-quota-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d6ad6a 0%, #4ade80 100%);
  transition: width 0.35s ease;
}

.lirea-vault-quota-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.73rem;
  color: rgba(218, 204, 188, 0.76);
  gap: 8px;
}

.lirea-vault-dropzone {
  border: 1.5px dashed rgba(214, 173, 106, 0.42);
  border-radius: 16px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.025);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lirea-vault-dropzone:hover,
.lirea-vault-dropzone.is-dragover {
  border-color: #e5c17c;
  background: rgba(214, 173, 106, 0.09);
  transform: translateY(-1px);
}

.lirea-dropzone-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(214, 173, 106, 0.15);
  border: 1px solid rgba(214, 173, 106, 0.34);
  color: #e6c280;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lirea-dropzone-text {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lirea-dropzone-text strong {
  font-size: 1rem;
  color: #f9f2e7;
}

.lirea-dropzone-text span {
  font-size: 0.8rem;
  color: rgba(230, 216, 198, 0.76);
}

.lirea-vault-upload-btn {
  flex-shrink: 0;
  padding: 11px 20px !important;
  border-radius: 11px !important;
  font-weight: 700 !important;
}

/* Imported Card Badges & Delete Button */
.lirea-delete-imported-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(15, 11, 9, 0.82);
  color: #f87171;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.book-card:hover .lirea-delete-imported-btn,
.lirea-delete-imported-btn:focus-visible {
  opacity: 1;
}

.lirea-delete-imported-btn:hover {
  background: #dc2626;
  color: #ffffff;
  transform: scale(1.08);
}

.lirea-streaming-pill {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(15, 12, 10, 0.88);
  border: 1px solid rgba(214, 173, 106, 0.45);
  color: #f4d08c;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  z-index: 5;
}

.book-tier-tag.is-vault-compressed {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
  font-weight: 700 !important;
}

/* Inline Book Figures / Illustrations inside Reader Pages */
.lirea-page-figure {
  margin: 10px auto 12px !important;
  text-align: center;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  break-inside: avoid;
}

.lirea-page-figure img {
  max-width: 96% !important;
  max-height: var(--page-fig-max-h, 240px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.lirea-figure-caption {
  margin-top: 5px;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--book-ink-muted, #6b6358);
  line-height: 1.3;
}

/* ========================================================
   GOOGLE TRANSLATE READER POPOVER & GADGET STYLING
   Real-Time Translation with Default English Base
   ======================================================== */
.lirea-translate-popover {
  position: fixed;
  top: 56px;
  right: 52px;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #1e1f22;
  color: #e3e3e3;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
  z-index: 285;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: lireaTranslateFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.lirea-translate-popover[hidden] {
  display: none !important;
}

@keyframes lireaTranslateFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.lirea-translate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lirea-translate-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #f1f1f1;
}

.lirea-translate-desc {
  font-family: 'Roboto', sans-serif;
  font-size: 0.8rem;
  color: #9aa0a6;
  line-height: 1.4;
}

.google-translate-box {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #131314;
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.lirea-reset-lang-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e3e3e3;
  font-family: 'Roboto', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lirea-reset-lang-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* Hide Google's intrusive banner and keep page positioned naturally */
.goog-te-banner-frame.skiptranslate,
body > .skiptranslate[style*="visibility: visible"] {
  display: none !important;
}

#google_translate_element .goog-te-gadget,
#google_translate_element .skiptranslate {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body {
  top: 0px !important;
}

/* Style the Google Translate Gadget Dropdown */
.goog-te-gadget {
  font-family: 'Roboto', sans-serif !important;
  font-size: 0.85rem !important;
  color: #9aa0a6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.goog-te-gadget .goog-te-combo {
  background: #25282d !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  outline: none !important;
  font-family: 'Roboto', sans-serif !important;
}

.goog-te-gadget .goog-te-combo:focus {
  border-color: #8ab4f8 !important;
}

.goog-logo-link,
.goog-te-gadget > span {
  display: none !important;
}

.lirea-translate-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.lirea-translate-label {
  font-family: 'Roboto', sans-serif;
  font-size: 0.8rem;
  color: #c4c7c5;
  font-weight: 500;
}

.lirea-language-dropdown,
.gpb-lang-select-input {
  width: 100%;
  background: #2b2e33;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3e3e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

.lirea-language-dropdown:focus,
.gpb-lang-select-input:focus {
  border-color: #8ab4f8;
  background-color: #32363d;
}

.gpb-lang-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 6px;
}

.gpb-lang-control-row .gpb-control-row-label {
  font-family: 'Roboto', sans-serif;
  font-size: 0.86rem;
  color: #c4c7c5;
  white-space: nowrap;
}

.gpb-lang-control-row .gpb-lang-select-input {
  flex: 1;
  max-width: 220px;
  padding: 8px 12px;
  padding-right: 32px;
  font-size: 0.84rem;
}

@media (max-width: 600px) {
  .lirea-translate-popover {
    top: 52px;
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
  }
  .gpb-lang-control-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .gpb-lang-control-row .gpb-lang-select-input {
    max-width: 100%;
    width: 100%;
  }
}

/* ========================================================
   AESTHETIC QUOTE CARD STUDIO
   ======================================================== */
.quote-studio-modal {
  position: fixed;
  inset: 0;
  z-index: 3500 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.quote-studio-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 16, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.quote-studio-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 580px;
  background: #161b22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 94vh;
  overflow-y: auto;
}
.quote-studio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.quote-studio-kicker {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c5a059;
  font-weight: 700;
}
.quote-studio-header h3 {
  margin: 2px 0 0;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: #f0f6fc;
}
.quote-studio-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #c9d1d9;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.quote-card-preview-area {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}
.quote-card-artistic {
  position: relative;
  width: 100%;
  max-width: 440px;
  min-height: 340px;
  border-radius: 18px;
  padding: 34px 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, min-height 0.2s ease;
  overflow: hidden;
}
.quote-card-artistic[data-aspect="story"] {
  min-height: 480px;
  max-width: 320px;
}
.quote-card-artistic[data-aspect="square"] {
  min-height: 380px;
  max-width: 380px;
}
.quote-card-artistic[data-aspect="portrait"] {
  min-height: 420px;
  max-width: 350px;
}

/* Gradients for Quote Cards */
.theme-gradient-aurora {
  background: linear-gradient(135deg, #09203f 0%, #537895 50%, #1e3c72 100%);
  color: #ffffff;
}
.theme-gradient-sunset {
  background: linear-gradient(135deg, #42275a 0%, #734b6d 50%, #bd6779 100%);
  color: #ffffff;
}
.theme-gradient-editorial {
  background: linear-gradient(145deg, #0b1329 0%, #172445 60%, #2a3c68 100%);
  border: 1px solid rgba(197, 160, 89, 0.4);
  color: #fdfaf3;
}
.theme-gradient-editorial .quote-card-blockquote {
  font-family: 'Cinzel', 'Literata', serif;
}
.theme-gradient-matcha {
  background: linear-gradient(135deg, #1d331c 0%, #2f4e2e 50%, #466b44 100%);
  color: #f1f8ed;
}
.theme-gradient-minimal {
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f0f6fc;
}
.theme-gradient-parchment {
  background: linear-gradient(135deg, #f5ebd7 0%, #e6d3b3 100%);
  color: #2b1f13;
  border: 1px solid rgba(139, 105, 60, 0.25);
}

.quote-card-watermark-seal {
  position: absolute;
  top: 18px;
  right: 18px;
  opacity: 0.25;
}
.quote-card-seal-icon {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.quote-card-quotation-mark {
  font-family: var(--font-serif);
  font-size: 3.6rem;
  line-height: 0.8;
  opacity: 0.35;
  margin-bottom: 4px;
}
.quote-card-blockquote {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.58;
  font-style: italic;
  margin: 0 0 20px;
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.theme-gradient-parchment .quote-card-blockquote {
  text-shadow: none;
}
.quote-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 14px;
}
.theme-gradient-parchment .quote-card-footer {
  border-top: 1px solid rgba(43, 31, 19, 0.18);
}
.quote-card-author-block {
  display: flex;
  flex-direction: column;
}
.quote-card-author {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-style: normal;
}
.quote-card-book {
  font-size: 0.74rem;
  opacity: 0.8;
}
.quote-card-brand-badge {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
}
.theme-gradient-parchment .quote-card-brand-badge {
  background: rgba(43, 31, 19, 0.1);
  color: #2b1f13;
}
.quote-studio-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 12px;
  padding: 12px;
}
.quote-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.quote-control-label {
  font-size: 0.8rem;
  color: #8b949e;
  font-weight: 600;
}
.quote-palette-swatches {
  display: flex;
  gap: 8px;
}
.quote-palette-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease;
}
.quote-palette-btn[data-quote-theme="theme-gradient-aurora"] { background: linear-gradient(135deg, #09203f, #537895); }
.quote-palette-btn[data-quote-theme="theme-gradient-sunset"] { background: linear-gradient(135deg, #42275a, #bd6779); }
.quote-palette-btn[data-quote-theme="theme-gradient-editorial"] { background: linear-gradient(135deg, #0b1329, #c5a059); }
.quote-palette-btn[data-quote-theme="theme-gradient-matcha"] { background: linear-gradient(135deg, #1d331c, #466b44); }
.quote-palette-btn[data-quote-theme="theme-gradient-minimal"] { background: #161b22; border: 1px solid #484f58; }
.quote-palette-btn[data-quote-theme="theme-gradient-parchment"] { background: #e6d3b3; }
.quote-palette-btn.active {
  border-color: #ffffff;
  transform: scale(1.18);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.quote-aspect-btns {
  display: flex;
  gap: 6px;
}
.quote-aspect-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c9d1d9;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}
.quote-aspect-btn.active {
  background: #c5a059;
  color: #0b1329;
  border-color: #c5a059;
}
.quote-studio-actions {
  display: flex;
  gap: 10px;
}
.quote-action-btn {
  flex: 1;
}

/* ========================================================
   AMBIENT IMMERSION & SOUNDSCAPES POPOVER
   ======================================================== */
.ambient-popover-card {
  position: fixed;
  top: 56px;
  right: 64px;
  z-index: 3500 !important;
  width: 310px;
  background: #1e2229;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: fadeInDown 0.16s ease;
}
.ambient-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ambient-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c5a059;
}
.ambient-title-group h4 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #f0f6fc;
}
.ambient-tracks-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ambient-track-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  color: #e6edf3;
}
.ambient-track-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}
.ambient-track-btn.active {
  background: rgba(197, 160, 89, 0.18);
  border-color: #c5a059;
  box-shadow: 0 0 10px rgba(197, 160, 89, 0.2);
}
.ambient-track-icon {
  font-size: 1.25rem;
}
.ambient-track-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.ambient-track-title {
  font-size: 0.84rem;
  color: #ffffff;
}
.ambient-track-desc {
  font-size: 0.72rem;
  color: #8b949e;
}
.ambient-play-indicator {
  font-size: 0.74rem;
  color: #8b949e;
}
.ambient-track-btn.active .ambient-play-indicator {
  color: #c5a059;
  font-weight: bold;
}
.ambient-volume-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ambient-stop-pill {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

/* ========================================================
   AI "CATCH ME UP" FLOATING PILL
   ======================================================== */
.catch-me-up-pill {
  position: fixed;
  bottom: 74px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 92;
  max-width: 520px;
  width: 90%;
  background: rgba(22, 27, 34, 0.94);
  border: 1px solid rgba(197, 160, 89, 0.45);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: slideUpFade 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.catch-pill-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.catch-pill-sparkle {
  font-size: 0.9rem;
}
.catch-pill-tag {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #c5a059;
  flex: 1;
}
.catch-pill-dismiss {
  background: transparent;
  border: none;
  color: #8b949e;
  font-size: 0.84rem;
  cursor: pointer;
  padding: 2px;
}
.catch-pill-body {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #e6edf3;
}

/* ========================================================
   INSTANT CHARACTER & TERMINOLOGY INSPECTOR
   ======================================================== */
.term-inspector-card {
  position: fixed;
  z-index: 130;
  max-width: 320px;
  background: #181c24;
  border: 1px solid rgba(197, 160, 89, 0.38);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
  animation: fadeInDown 0.15s ease;
}
.term-inspector-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.term-type-badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(197, 160, 89, 0.16);
  color: #c5a059;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.term-inspector-header h4 {
  margin: 4px 0 0;
  font-size: 0.94rem;
  color: #ffffff;
}
.term-inspector-body {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #d1d5db;
  margin-bottom: 8px;
}
.term-inspector-context {
  font-size: 0.72rem;
  font-style: italic;
  color: #9ca3af;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 6px;
}

/* ========================================================
   PWA INSTALL BANNER
   ======================================================== */
.pwa-install-banner {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 999;
  background: #161b22;
  border: 1px solid rgba(197, 160, 89, 0.4);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  animation: slideUpFade 0.25s ease;
}
.pwa-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pwa-banner-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}
.pwa-banner-text {
  display: flex;
  flex-direction: column;
}
.pwa-banner-text strong {
  font-size: 0.88rem;
  color: #ffffff;
}
.pwa-banner-text span {
  font-size: 0.75rem;
  color: #8b949e;
}
.pwa-banner-actions {
  display: flex;
  gap: 8px;
}
.pwa-btn {
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.pwa-btn-install {
  background: #c5a059;
  color: #0b1329;
  border: none;
}
.pwa-btn-dismiss {
  background: transparent;
  color: #8b949e;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}