/*
Theme Name: Fictioneer Child - Lunaria Aura
Template: fictioneer
Author: Tetrakern, Robbie
Author URI: https://github.com/Tetrakern
Donate link: https://ko-fi.com/tetrakern
Contributors: tetrakern

License: GNU General Public License v3.0 or later
License URI: http://www.gnu.org/licenses/gpl.html

Requires at least: 5.5
Tested up to: 6.5.0
Requires PHP: 7.4
Version: 2.16.0

Description: Lunaria Aura edition of the Fictioneer child theme featuring celestial obsidian & pearl aesthetics, parser-blocking JS-gated chapter delivery with preserved CMPPP paid-content containers, responsive media queries, and optimized modular architecture.

Fictioneer Child WordPress Theme, (C) 2023-2026 Tetrakern
Fictioneer Child is distributed under the terms of the GNU GPL.
*/

:root{--moon-accent:#8c82ff;--moon-accent-light:#a594fd;--moon-accent-dark:#6358dc;--moon-accent-soft:rgba(140,130,255,0.12);--moon-accent-subtle:rgba(140,130,255,0.06);--moon-glow:0 0 16px rgba(140,130,255,0.22);--moon-glow-subtle:0 0 8px rgba(140,130,255,0.12);--moon-divider:linear-gradient(90deg,transparent 0%,rgba(140,130,255,0.25) 35%,rgba(140,130,255,0.25) 65%,transparent 100%);--moon-border-radius:8px;--moon-border-radius-sm:4px;--moon-border-radius-pill:9999px;--moon-transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}:root[data-mode="dark"]{--bg-950-free:222deg 16% 25%;--bg-900-free:222deg 18% 29%;--bg-800-free:222deg 18% 33%;--bg-700-free:222deg 18% 37%;--bg-600-free:222deg 18% 41%;--bg-500-free:222deg 18% 46%;--bg-400-free:222deg 18% 51%;--bg-300-free:222deg 18% 58%;--bg-200-free:222deg 18% 65%;--bg-100-free:222deg 18% 72%;--bg-50-free:222deg 18% 80%;--bg-950:#303648;--bg-900:#363d50;--bg-800:#3d465c;--bg-700:#424c66;--bg-600:#4a5572;--bg-500:#546080;--bg-400:#5f6c90;--bg-300:#6c7aa0;--bg-200:#7d8bb2;--bg-100:#919fc4;--bg-50:#a8b5d6;--moon-bg-base:#282e3d;--moon-bg-surface:#424c66;--moon-bg-elevated:#4e5978;--moon-bg-subtle:#5c688c;--moon-border:rgba(255,255,255,0.22);--moon-border-hover:rgba(255,255,255,0.38);--moon-text-primary:#ffffff;--moon-text-secondary:#dce3f4;--moon-text-muted:#b8c4df;--moon-shadow:0 4px 20px rgba(0,0,0,0.14);--body-bg-color:#282e3d;--site-bg-color:#282e3d;--page-bg-color:#282e3d;--card-bg-color:#424c66;--card-footer-bg-color:#363d50;--card-overlay-bg-color:#4e5978;--navigation-background:#141720;--navigation-submenu-background:#1c202b;--navigation-item-background-hover:#4e5978;--modal-bg-color:#1c202b;--mobile-menu-background:#141720;--input-background:#5c688c;--comment-background:rgba(255,255,255,0.08);--blockquote-background:rgba(255,255,255,0.08);--placeholder-background:#282e3d;--micro-menu-background:#141720;--bg-isolated-footer:#282e3d;--consent-banner-background:#282e3d;--tts-background:#282e3d;--fg-100:#ffffff;--fg-200:#ffffff;--fg-300:#f8faff;--fg-400:#f1f4fb;--fg-500:#dce3f4;--fg-600:#cad3e7;--fg-700:#b8c4df;--fg-800:#9eaac7;--fg-900:#8390af;--fg-950:#687595}:root[data-mode="dark"] body,:root[data-mode="dark"] .site,:root[data-mode="dark"] .site.background-texture,:root[data-mode="dark"] .background-texture,:root[data-mode="dark"] body.site-bg{background-color:var(--moon-bg-base,#282e3d)!important;background:var(--moon-bg-base,#282e3d)!important;background-image:none!important}:root[data-mode="dark"] .site.background-texture::before,:root[data-mode="dark"] .site.background-texture::after,:root[data-mode="dark"] .background-texture::before,:root[data-mode="dark"] .background-texture::after{opacity:0.05!important}:root[data-mode="dark"] .main__background,:root[data-mode="dark"] .polygon,:root[data-mode="dark"] .polygon--main,:root[data-mode="dark"] .background-texture{background-color:var(--moon-bg-base,#282e3d)!important;background:var(--moon-bg-base,#282e3d)!important}:root[data-mode="light"]{--moon-bg-base:#f8faff;--moon-bg-surface:#ffffff;--moon-bg-elevated:#f0f4ff;--moon-bg-subtle:#e2e8f0;--moon-border:rgba(99,102,241,0.15);--moon-border-hover:rgba(99,102,241,0.30);--moon-text-primary:#1e293b;--moon-text-secondary:#475569;--moon-text-muted:#94a3b8;--moon-shadow:0 4px 20px rgba(99,102,241,0.08)}*,*::before,*::after{box-sizing:border-box}img,video,svg{max-width:100%;height:auto}

/* =============================================================================
   CMPPP PAYBOX — LUMINOUS SOFT DARK MODE STYLING
   ============================================================================= */

:root[data-mode="dark"] .cmppp-paybox,
:root[data-mode="dark"] .cmppp-paybox-container,
:root[data-mode="dark"] .cmppp-plan-card,
:root[data-mode="dark"] .cmppp-refund-box,
:root[data-mode="dark"] .cmppp_messages_block {
  background: #424c66 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16) !important;
}

:root[data-mode="dark"] .cmppp-plan-header,
:root[data-mode="dark"] .cmppp-paybox h3,
:root[data-mode="dark"] .cmppp-refund-box h3 {
  background: #4e5978 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

:root[data-mode="dark"] .cmppp-wallet-balance {
  background: #4e5978 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

:root[data-mode="dark"] .cmppp-wallet-amount {
  color: #ffffff !important;
}

:root[data-mode="dark"] .cmppp-wallet-label,
:root[data-mode="dark"] .cmppp-price-label,
:root[data-mode="dark"] .cmppp-chapters-count,
:root[data-mode="dark"] .cmppp-plan-note {
  color: #dce3f4 !important;
}

:root[data-mode="dark"] .cmppp-plan-tabs {
  background: #363d50 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

:root[data-mode="dark"] .cmppp-tab {
  background: #363d50 !important;
  color: #dce3f4 !important;
  border-right-color: rgba(255, 255, 255, 0.18) !important;
}

:root[data-mode="dark"] .cmppp-tab.active {
  background: #4e5978 !important;
  color: #ffffff !important;
}

:root[data-mode="dark"] .cmppp-tab:hover:not(.active) {
  background: #46506a !important;
  color: #ffffff !important;
}

:root[data-mode="dark"] .cmppp-option-content {
  background: #363d50 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

:root[data-mode="dark"] .cmppp-plan-option input[type="radio"]:checked + .cmppp-option-content {
  border-color: #a3b0ff !important;
  background: rgba(163, 176, 255, 0.15) !important;
}

:root[data-mode="dark"] .cmppp-option-price {
  color: #ffffff !important;
}

:root[data-mode="dark"] .cmppp-option-points {
  color: #dce3f4 !important;
}

:root[data-mode="dark"] .cmppp-price-value {
  color: #ffffff !important;
}

:root[data-mode="dark"] .cmppp-plan-footer,
:root[data-mode="dark"] .cmppp-paybox form:not(:last-child) {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

:root[data-mode="dark"] .cmppp-plan-button,
:root[data-mode="dark"] .cmppp-paybox input[type="submit"] {
  background: linear-gradient(135deg, #7075ff 0%, #5850ec 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35) !important;
  font-weight: 600 !important;
}

:root[data-mode="dark"] .cmppp-plan-button:hover:not([disabled]),
:root[data-mode="dark"] .cmppp-paybox input[type="submit"]:hover:not([disabled]) {
  background: linear-gradient(135deg, #8185ff 0%, #635bff 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45) !important;
}

:root[data-mode="dark"] .cmppp-topup-button {
  background: #10b981 !important;
  color: #ffffff !important;
}

:root[data-mode="dark"] .cmppp-topup-button:hover {
  background: #059669 !important;
  color: #ffffff !important;
}

:root[data-mode="dark"] .cmppp-points-status.sufficient {
  color: #4ade80 !important;
}

:root[data-mode="dark"] .cmppp-points-status.insufficient {
  color: #f87171 !important;
}

:root[data-mode="dark"] .cmppp-paybox p,
:root[data-mode="dark"] .cmppp-paybox label {
  color: #dce3f4 !important;
}

:root[data-mode="dark"] .cmppp-paybox select {
  background: #363d50 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
}

/* =============================================================================
   MEMBERSHIP ASTRAL VAULT ASCII TERMINAL
   ============================================================================= */

.redemption-terminal {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 0.75rem;
  background: #1e222d;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  transition: all 0.25s ease;
}

.terminal-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  background: #282f42;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  font-weight: 700;
}

.terminal-hud__left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.terminal-hud__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #818cf8;
  box-shadow: 0 0 6px #818cf8;
  transition: all 0.2s ease;
}

.terminal-hud__title {
  color: #ffffff;
  text-transform: uppercase;
}

.terminal-hud__badge {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #dce3f4;
  font-size: 0.62rem;
}

.terminal-screen-container {
  position: relative;
  padding: 0.85rem 0.65rem;
  background: #141722;
  overflow: hidden;
}

.terminal-ascii-screen {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 10.5px;
  line-height: 1.3;
  text-align: center;
  white-space: pre;
  color: #c4ccff;
  text-shadow: 0 0 8px rgba(163, 176, 255, 0.35);
  user-select: none;
  transition: color 0.2s ease;
}

.terminal-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  animation: terminal-scan 3.5s linear infinite;
}

@keyframes terminal-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

.redemption-terminal.state-processing {
  border-color: #38bdf8;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.25);
}

.redemption-terminal.state-processing .terminal-hud__dot {
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.redemption-terminal.state-processing .terminal-ascii-screen {
  color: #38bdf8;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.redemption-terminal.state-success {
  border-color: #4ade80;
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.3);
}

.redemption-terminal.state-success .terminal-hud__dot {
  background: #4ade80;
  box-shadow: 0 0 8px #4ade80;
}

.redemption-terminal.state-success .terminal-ascii-screen {
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

.redemption-terminal.state-error {
  border-color: #f87171;
  box-shadow: 0 0 18px rgba(248, 113, 113, 0.25);
  animation: terminal-glitch 0.3s ease;
}

.redemption-terminal.state-error .terminal-hud__dot {
  background: #f87171;
  box-shadow: 0 0 8px #f87171;
}

.redemption-terminal.state-error .terminal-ascii-screen {
  color: #f87171;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.5);
}

@keyframes terminal-glitch {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

:root[data-mode="light"] .redemption-terminal {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

:root[data-mode="light"] .terminal-hud {
  background: #e2e8f0;
  border-bottom-color: #cbd5e1;
}

:root[data-mode="light"] .terminal-hud__title {
  color: #0f172a;
}

:root[data-mode="light"] .terminal-hud__badge {
  background: #ffffff;
  color: #475569;
}

:root[data-mode="light"] .terminal-screen-container {
  background: #ffffff;
}

:root[data-mode="light"] .terminal-ascii-screen {
  color: #4338ca;
  text-shadow: none;
}

/* =============================================================================
   CHAPTER REPORT BUTTON IN MICRO MENU — HIGH CONTRAST & VISIBILITY
   ============================================================================= */

.micro-menu__item.micro-menu__report,
.micro-menu__report,
button.report-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: all 0.18s ease !important;
  font-size: inherit !important;
  line-height: 1 !important;
}

.micro-menu__item.micro-menu__report i,
.micro-menu__report i,
button.report-btn i {
  font-size: 0.92em !important;
  line-height: 1 !important;
}

/* Light Mode — Crisp High-Contrast Coral/Crimson */
:root[data-mode="light"] .micro-menu__item.micro-menu__report,
:root[data-mode="light"] .micro-menu__report,
:root[data-mode="light"] button.report-btn,
body[data-mode="light"] .micro-menu__item.micro-menu__report,
body[data-mode="light"] .micro-menu__report,
body[data-mode="light"] button.report-btn {
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.08) !important;
  border-radius: 4px !important;
}

:root[data-mode="light"] .micro-menu__item.micro-menu__report:hover,
:root[data-mode="light"] .micro-menu__report:hover,
:root[data-mode="light"] button.report-btn:hover,
body[data-mode="light"] .micro-menu__item.micro-menu__report:hover,
body[data-mode="light"] .micro-menu__report:hover,
body[data-mode="light"] button.report-btn:hover {
  color: #991b1b !important;
  background: rgba(220, 38, 38, 0.16) !important;
  transform: scale(1.08) !important;
}

/* Dark Mode — Luminous Warm Coral */
:root[data-mode="dark"] .micro-menu__item.micro-menu__report,
:root[data-mode="dark"] .micro-menu__report,
:root[data-mode="dark"] button.report-btn,
body[data-mode="dark"] .micro-menu__item.micro-menu__report,
body[data-mode="dark"] .micro-menu__report,
body[data-mode="dark"] button.report-btn {
  color: #f87171 !important;
  background: rgba(248, 113, 113, 0.12) !important;
  border-radius: 4px !important;
}

:root[data-mode="dark"] .micro-menu__item.micro-menu__report:hover,
:root[data-mode="dark"] .micro-menu__report:hover,
:root[data-mode="dark"] button.report-btn:hover,
body[data-mode="dark"] .micro-menu__item.micro-menu__report:hover,
body[data-mode="dark"] .micro-menu__report:hover,
body[data-mode="dark"] button.report-btn:hover {
  color: #fca5a5 !important;
  background: rgba(248, 113, 113, 0.22) !important;
  transform: scale(1.08) !important;
}

/* =============================================================================
   SEAMLESS SITE BACKGROUND & CLOUD-STYLE STORY ARTICLE
   ============================================================================= */

:root[data-mode="dark"] body,
:root[data-mode="dark"] .site,
:root[data-mode="dark"] .site.background-texture,
:root[data-mode="dark"] .background-texture,
:root[data-mode="dark"] body.site-bg,
:root[data-mode="dark"] .main,
:root[data-mode="dark"] .main__background,
:root[data-mode="dark"] .polygon,
:root[data-mode="dark"] .polygon--main,
:root[data-mode="dark"] .page-polygon,
:root[data-mode="dark"] .header-polygon {
  background-color: var(--moon-bg-base, #282e3d) !important;
  background: var(--moon-bg-base, #282e3d) !important;
  background-image: none !important;
}

:root[data-mode="dark"] .main__background::before,
:root[data-mode="dark"] .main__background::after {
  background-color: var(--moon-bg-base, #282e3d) !important;
  background: var(--moon-bg-base, #282e3d) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Story Article Card — Cloud Aesthetic (No Outline, Blurred Edges) */
body.single-fcn_story .story__article,
.story__article {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  padding: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.25rem, 3.5vw, 3rem) !important;
  box-sizing: border-box !important;
  border: none !important;
  outline: none !important;
}

/* Dark Mode: Slightly darker background (#2b3141) with soft cloud blur edges */
:root[data-mode="dark"] body.single-fcn_story .story__article,
:root[data-mode="dark"] .story__article,
body[data-mode="dark"] .story__article {
  background: #202532 !important;
  border: none !important;
  outline: none !important;
  border-radius: 28px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 
    0 0 35px 12px rgba(32, 37, 50, 0.85),
    0 0 80px 30px rgba(32, 37, 50, 0.55),
    0 15px 45px rgba(0, 0, 0, 0.28) !important;
}

/* Light Mode: Luminous ethereal cloud pearl with soft blurred edges */
:root[data-mode="light"] body.single-fcn_story .story__article,
:root[data-mode="light"] .story__article,
body[data-mode="light"] .story__article {
  background: rgba(255, 255, 255, 0.90) !important;
  border: none !important;
  outline: none !important;
  border-radius: 28px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 
    0 0 40px 15px rgba(255, 255, 255, 0.9),
    0 0 90px 35px rgba(226, 232, 240, 0.75),
    0 10px 35px rgba(0, 0, 0, 0.05) !important;
}

/* =============================================================================
   MICRO MENU RESPONSIVE MOBILE FITTING & SCALING (FLUID FIT ON ALL SCREENS)
   ============================================================================= */

.micro-menu {
  position: fixed !important;
  left: 50% !important;
  bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
  transform: translateX(-50%) !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: calc(100vw - 20px) !important;
  box-sizing: border-box !important;
  padding: 3px 6px !important;
  border-radius: 8px !important;
}

.micro-menu::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  display: block !important;
  background: var(--micro-menu-background) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.micro-menu__item {
  cursor: pointer !important;
  display: grid !important;
  place-content: center !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  color: var(--micro-menu-color) !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  width: var(--size, 36px) !important;
  height: var(--size, 36px) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

.micro-menu__item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--micro-menu-color-hover) !important;
}

:root[data-mode="light"] .micro-menu__item:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

.micro-menu__item:is(.previous, .next, .up) {
  font-size: 20px !important;
}

.micro-menu__item svg,
.micro-menu__report-icon,
.micro-menu__report svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  max-width: 100% !important;
  max-height: 100% !important;
  color: currentColor !important;
  fill: currentColor !important;
}

/* Tablet & Large Mobile (<= 768px) */
@media only screen and (max-width: 768px) {
  .micro-menu {
    --size: clamp(30px, 7.5vw, 36px) !important;
    gap: clamp(1px, 0.8vw, 3px) !important;
    padding: 2px 4px !important;
    max-width: calc(100vw - 16px) !important;
    bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
  }

  .micro-menu__item {
    width: var(--size) !important;
    height: var(--size) !important;
    font-size: clamp(13px, 3.8vw, 15px) !important;
  }

  .micro-menu__item:is(.previous, .next, .up) {
    font-size: clamp(17px, 4.8vw, 20px) !important;
  }

  .micro-menu__item svg,
  .micro-menu__report-icon,
  .micro-menu__report svg {
    width: clamp(13px, 3.8vw, 15px) !important;
    height: clamp(13px, 3.8vw, 15px) !important;
  }
}

/* Standard Mobile (<= 480px) */
@media only screen and (max-width: 480px) {
  .micro-menu {
    --size: clamp(26px, 8.8vw, 32px) !important;
    gap: 1.5px !important;
    padding: 2px 3px !important;
    max-width: calc(100vw - 10px) !important;
    bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
  }

  .micro-menu__item {
    width: var(--size) !important;
    height: var(--size) !important;
    font-size: 13px !important;
  }

  .micro-menu__item:is(.previous, .next, .up) {
    font-size: 17px !important;
  }

  .micro-menu__item svg,
  .micro-menu__report-icon,
  .micro-menu__report svg {
    width: 13px !important;
    height: 13px !important;
  }
}

/* Compact Mobile (<= 360px) */
@media only screen and (max-width: 360px) {
  .micro-menu {
    --size: 25px !important;
    gap: 1px !important;
    padding: 1.5px 2px !important;
    max-width: calc(100vw - 6px) !important;
  }

  .micro-menu__item {
    width: 25px !important;
    height: 25px !important;
    font-size: 11.5px !important;
  }

  .micro-menu__item:is(.previous, .next, .up) {
    font-size: 14.5px !important;
  }

  .micro-menu__item svg,
  .micro-menu__report-icon,
  .micro-menu__report svg {
    width: 11.5px !important;
    height: 11.5px !important;
  }
}

/* =============================================================================
   UNIVERSAL MODAL & DIALOG ARCHITECTURE — SLEEK DARK MODE OVERHAUL
   ============================================================================= */

/* Universal Modal & Dialog Containers in Dark Mode */
:root[data-mode="dark"] dialog.dialog-modal,
:root[data-mode="dark"] .dialog-modal,
:root[data-mode="dark"] .modal__wrapper,
:root[data-mode="dark"] .modal__window,
:root[data-mode="dark"] #fictioneer-chapter-index-dialog,
:root[data-mode="dark"] #formatting-modal .modal__wrapper,
:root[data-mode="dark"] #age-confirmation-modal .modal__wrapper,
:root[data-mode="dark"] #login-modal .modal__wrapper,
:root[data-mode="dark"] #site-settings-modal .modal__wrapper,
:root[data-mode="dark"] #sharing-modal .modal__wrapper,
:root[data-mode="dark"] #bbcodes-modal .modal__wrapper,
:root[data-mode="dark"] #suggestions-modal .modal__wrapper,
:root[data-mode="dark"] #fictioneer-tooltip-dialog,
:root[data-mode="dark"] .report-modal-content,
:root[data-mode="dark"] .report-modal-wrapper,
:root[data-mode="dark"] .report-modal .modal-content,
:root[data-mode="dark"] .fcn-modal,
:root[data-mode="dark"] .cmppp-modal-content {
  background: #1c202b !important;
  background-color: #1c202b !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/* Modal Backdrops / Overlays */
:root[data-mode="dark"] dialog.dialog-modal::backdrop,
:root[data-mode="dark"] .dialog-modal::backdrop,
:root[data-mode="dark"] .modal,
:root[data-mode="dark"] .report-modal,
:root[data-mode="dark"] .modal::backdrop,
:root[data-mode="dark"] .fcn-modal-overlay {
  background: rgba(10, 12, 18, 0.75) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Modal Headers */
:root[data-mode="dark"] .dialog-modal__header,
:root[data-mode="dark"] .modal__header,
:root[data-mode="dark"] .report-modal-header,
:root[data-mode="dark"] .report-modal h2,
:root[data-mode="dark"] .report-modal h3 {
  background: #242938 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: 13px 13px 0 0 !important;
}

/* Modal Close Buttons */
:root[data-mode="dark"] .dialog-modal__close,
:root[data-mode="dark"] .modal .close,
:root[data-mode="dark"] .report-modal-close,
:root[data-mode="dark"] .report-modal .close {
  color: #94a3b8 !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
}

:root[data-mode="dark"] .dialog-modal__close:hover,
:root[data-mode="dark"] .modal .close:hover,
:root[data-mode="dark"] .report-modal-close:hover,
:root[data-mode="dark"] .report-modal .close:hover {
  color: #ffffff !important;
  transform: scale(1.1) !important;
}

/* Modal Rows, Descriptions, Infoboxes & Interactive Cards */
:root[data-mode="dark"] .modal__row,
:root[data-mode="dark"] .dialog-modal__row,
:root[data-mode="dark"] .modal__description,
:root[data-mode="dark"] .dialog-modal__description {
  color: #dce3f4 !important;
}

:root[data-mode="dark"] .modal__description._bbcodes > div,
:root[data-mode="dark"] .dialog-modal__description._bbcodes > div,
:root[data-mode="dark"] .reader-settings__row,
:root[data-mode="dark"] .site-settings__row {
  background: #262c3a !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  padding: 0.65rem 0.85rem !important;
  margin-bottom: 6px !important;
}

:root[data-mode="dark"] .modal__setting-toggle,
:root[data-mode="dark"] .dialog-modal .modal__setting-toggle {
  color: #ffffff !important;
}

:root[data-mode="dark"] .dialog-modal__actions,
:root[data-mode="dark"] .modal__actions {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: #202532 !important;
  border-radius: 0 0 13px 13px !important;
  padding: 0.75rem 1rem !important;
}

:root[data-mode="dark"] .modal input:not([type="checkbox"]):not([type="radio"]),
:root[data-mode="dark"] .modal select,
:root[data-mode="dark"] .modal textarea,
:root[data-mode="dark"] .dialog-modal input:not([type="checkbox"]):not([type="radio"]),
:root[data-mode="dark"] .dialog-modal select,
:root[data-mode="dark"] .dialog-modal textarea,
:root[data-mode="dark"] .report-modal input,
:root[data-mode="dark"] .report-modal select,
:root[data-mode="dark"] .report-modal textarea {
  background: #141720 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 6px !important;
}

:root[data-mode="dark"] .modal input:focus,
:root[data-mode="dark"] .modal select:focus,
:root[data-mode="dark"] .modal textarea:focus,
:root[data-mode="dark"] .dialog-modal input:focus,
:root[data-mode="dark"] .dialog-modal select:focus,
:root[data-mode="dark"] .dialog-modal textarea:focus,
:root[data-mode="dark"] .report-modal input:focus,
:root[data-mode="dark"] .report-modal select:focus,
:root[data-mode="dark"] .report-modal textarea:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.25) !important;
}

/* Chapter Index specific list rows inside modal */
:root[data-mode="dark"] .dialog-modal._chapter-index .chapter-group__name {
  color: #dce3f4 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 6px !important;
}

:root[data-mode="dark"] .dialog-modal._chapter-index .chapter-group__list-item {
  background: #262c3a !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 6px !important;
  margin-bottom: 4px !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

:root[data-mode="dark"] .dialog-modal._chapter-index .chapter-group__list-item:hover {
  background: #31384a !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

:root[data-mode="dark"] .dialog-modal._chapter-index .chapter-group__list-item-link {
  color: #ffffff !important;
}

:root[data-mode="dark"] .dialog-modal._chapter-index .chapter-group__list-item-subrow {
  color: #94a3b8 !important;
}

:root[data-mode="dark"] .dialog-modal._chapter-index .chapter-group__list-item-icon {
  color: #818cf8 !important;
}

/* Modal Scrollbars */
:root[data-mode="dark"] .modal ::-webkit-scrollbar-track,
:root[data-mode="dark"] .dialog-modal ::-webkit-scrollbar-track,
:root[data-mode="dark"] .report-modal ::-webkit-scrollbar-track {
  background: #141720 !important;
}

:root[data-mode="dark"] .modal ::-webkit-scrollbar-thumb,
:root[data-mode="dark"] .dialog-modal ::-webkit-scrollbar-thumb,
:root[data-mode="dark"] .report-modal ::-webkit-scrollbar-thumb {
  background-color: #3b4356 !important;
  border-radius: 3px !important;
}
/* =============================================================================
   CHAPTER SERIES STATUS & COMMUNITY LINKS — SLEEK DARK MODE OVERHAUL
   ============================================================================= */

:root[data-mode="dark"] #chapter-series-status,
:root[data-mode="dark"] #story-series-status,
:root[data-mode="dark"] #chapter-community-links,
:root[data-mode="dark"] .chapter__series-status,
:root[data-mode="dark"] .story__series-status,
:root[data-mode="dark"] .chapter__discord-link,
:root[data-mode="dark"] section.chapter__series-status,
:root[data-mode="dark"] section.chapter__discord-link {
  background: #1c202b !important;
  background-color: #1c202b !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

:root[data-mode="dark"] #chapter-series-status:hover,
:root[data-mode="dark"] #story-series-status:hover,
:root[data-mode="dark"] #chapter-community-links:hover,
:root[data-mode="dark"] .chapter__series-status:hover,
:root[data-mode="dark"] .story__series-status:hover,
:root[data-mode="dark"] .chapter__discord-link:hover {
  background: #222734 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45) !important;
}

:root[data-mode="dark"] #chapter-series-status .ssn-message,
:root[data-mode="dark"] #story-series-status .ssn-message,
:root[data-mode="dark"] #chapter-community-links .ssn-message,
:root[data-mode="dark"] .chapter__series-status .ssn-message,
:root[data-mode="dark"] .story__series-status .ssn-message,
:root[data-mode="dark"] .chapter__discord-link .ssn-message {
  color: #dce3f4 !important;
}

:root[data-mode="dark"] #chapter-series-status .ssn-message a,
:root[data-mode="dark"] #story-series-status .ssn-message a,
:root[data-mode="dark"] #chapter-community-links .ssn-message a,
:root[data-mode="dark"] .chapter__series-status .ssn-message a,
:root[data-mode="dark"] .story__series-status .ssn-message a,
:root[data-mode="dark"] .chapter__discord-link .ssn-message a {
  color: #a5b4fc !important;
  text-decoration: underline !important;
}

:root[data-mode="dark"] #chapter-series-status .ssn-message a:hover,
:root[data-mode="dark"] #story-series-status .ssn-message a:hover,
:root[data-mode="dark"] #chapter-community-links .ssn-message a:hover,
:root[data-mode="dark"] .chapter__series-status .ssn-message a:hover,
:root[data-mode="dark"] .story__series-status .ssn-message a:hover,
:root[data-mode="dark"] .chapter__discord-link .ssn-message a:hover {
  color: #ffffff !important;
}

:root[data-mode="dark"] .ssn-general-news-section,
:root[data-mode="dark"] .ssn-epub-offer-section {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* =============================================================================
   DARK MODE BUTTONS & MICRO MENU OVERHAUL
   ============================================================================= */

/* Micro Menu Dark Mode */
:root[data-mode="dark"] .micro-menu::before {
  background: #141720 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

:root[data-mode="dark"] .micro-menu .micro-menu__item,
:root[data-mode="dark"] .micro-menu__item {
  color: #e2e8f0 !important;
}

:root[data-mode="dark"] .micro-menu .micro-menu__item:hover,
:root[data-mode="dark"] .micro-menu__item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* Primary Buttons in Dark Mode */
:root[data-mode="dark"] .button:not(._secondary):not(._danger):not(._disabled),
:root[data-mode="dark"] input[type="submit"]:not(._secondary),
:root[data-mode="dark"] button.button:not(._secondary):not(._danger):not(.micro-menu__item) {
  background: #1e2330 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.15s ease !important;
}

:root[data-mode="dark"] .button:not(._secondary):not(._danger):not(._disabled):hover,
:root[data-mode="dark"] input[type="submit"]:not(._secondary):hover,
:root[data-mode="dark"] button.button:not(._secondary):not(._danger):not(.micro-menu__item):hover {
  background: #2d3548 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}

/* Secondary Buttons in Dark Mode */
:root[data-mode="dark"] .button._secondary,
:root[data-mode="dark"] button._secondary,
:root[data-mode="dark"] a.button._secondary,
:root[data-mode="dark"] .btn-secondary,
:root[data-mode="dark"] .wp-block-button.is-style-outline .wp-block-button__link {
  background: #161922 !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.15s ease !important;
}

:root[data-mode="dark"] .button._secondary:hover,
:root[data-mode="dark"] button._secondary:hover,
:root[data-mode="dark"] a.button._secondary:hover,
:root[data-mode="dark"] .btn-secondary:hover,
:root[data-mode="dark"] .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #222734 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35) !important;
}
/* =============================================================================
   MAIN NAVIGATION BACKGROUND — SLEEK DARK MODE OVERHAUL
   ============================================================================= */

:root[data-mode="dark"] .main-navigation__background,
:root[data-mode="dark"] .main-navigation,
:root[data-mode="dark"] .main-navigation.is-sticky .main-navigation__background,
:root[data-mode="dark"] #full-navigation .main-navigation__background {
  background-color: #141720 !important;
  background: #141720 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

:root[data-mode="dark"] .main-navigation__submenu,
:root[data-mode="dark"] .main-navigation .sub-menu {
  background-color: #1c202b !important;
  background: #1c202b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

:root[data-mode="dark"] .main-navigation .menu-item:hover > a,
:root[data-mode="dark"] .main-navigation .page_item:hover > a {
  background-color: #222734 !important;
  color: #ffffff !important;
}
/* =============================================================================
   MOBILE MENU DRAWER & PANELS — SLEEK DARK MODE OVERHAUL
   ============================================================================= */

:root[data-mode="dark"] .mobile-menu,
:root[data-mode="dark"] .mobile-menu._advanced-mobile-menu,
:root[data-mode="dark"] #mobile-menu {
  background-color: #141720 !important;
  background: #141720 !important;
  color: #f1f5f9 !important;
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.7) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

:root[data-mode="dark"] .mobile-menu__panel {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

:root[data-mode="dark"] .mobile-menu__panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

:root[data-mode="dark"] .mobile-menu a,
:root[data-mode="dark"] .mobile-menu button,
:root[data-mode="dark"] .mobile-navigation a {
  color: #e2e8f0 !important;
}

:root[data-mode="dark"] .mobile-menu a:hover,
:root[data-mode="dark"] .mobile-menu button:hover,
:root[data-mode="dark"] .mobile-navigation a:hover {
  color: #ffffff !important;
}

:root[data-mode="dark"] .mobile-menu__frame-button,
:root[data-mode="dark"] .mobile-menu .button {
  background: #1c202b !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
}

:root[data-mode="dark"] .mobile-menu__frame-button:hover,
:root[data-mode="dark"] .mobile-menu .button:hover {
  background: #242a38 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

:root[data-mode="dark"] .mobile-menu__item-icon {
  color: #818cf8 !important;
}
/* =============================================================================
   CHAPTER TIER FILTER BAR — FLUID MOBILE FIT (NO SCROLLBAR) & DISTINCT COLORS
   ============================================================================= */

/* Container: Full-width responsive 3-column equal grid */
.chapter-tier-filter-bar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 1.25rem 0 !important;
  padding: 4px 6px !important;
  background: #1c202b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}

.chapter-tier-filter-bar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

:root[data-mode="light"] .chapter-tier-filter-bar {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Base Filter Button: Equal width, centered content, auto-clamping text */
.tier-filter-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 0.35rem !important;
  padding: 0.4rem 0.5rem !important;
  min-height: 1.85rem !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  touch-action: manipulation;
}

.tier-filter-btn .tier-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  border-radius: 9999px !important;
  margin-left: 2px !important;
  flex-shrink: 0 !important;
}

.tier-filter-btn i,
.tier-filter-btn svg {
  font-size: 0.85rem !important;
  width: 0.85rem !important;
  height: 0.85rem !important;
  flex-shrink: 0 !important;
}

/* -------------------------------------------------------------------------
   FILTER 1: "ALL" (Neutral Moon / Indigo Tone)
   ------------------------------------------------------------------------- */
/* Dark Mode */
.tier-filter-btn[data-filter="all"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}
.tier-filter-btn[data-filter="all"] .tier-count {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #e2e8f0 !important;
}
.tier-filter-btn[data-filter="all"]:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}
.tier-filter-btn[data-filter="all"].is-active {
  background: #31384a !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.40) !important;
}
.tier-filter-btn[data-filter="all"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
}

/* Light Mode */
:root[data-mode="light"] .tier-filter-btn[data-filter="all"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"] .tier-count {
  background: #e2e8f0 !important;
  color: #334155 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"]:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"].is-active {
  background: #1e293b !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.20) !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   FILTER 2: "FREE" (Emerald / Mint Green Tone)
   ------------------------------------------------------------------------- */
/* Dark Mode */
.tier-filter-btn[data-filter="free"] {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
  color: #34d399 !important;
}
.tier-filter-btn[data-filter="free"] .tier-count {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}
.tier-filter-btn[data-filter="free"]:hover {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(16, 185, 129, 0.40) !important;
  color: #a7f3d0 !important;
}
.tier-filter-btn[data-filter="free"].is-active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.45) !important;
}
.tier-filter-btn[data-filter="free"].is-active .tier-count {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

/* Light Mode */
:root[data-mode="light"] .tier-filter-btn[data-filter="free"] {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #047857 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"] .tier-count {
  background: #d1fae5 !important;
  color: #065f46 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"]:hover {
  background: #d1fae5 !important;
  border-color: #6ee7b7 !important;
  color: #064e3b !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"].is-active {
  background: #059669 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   FILTER 3: "ADVANCED" (Radiant Gold / Amber Tone)
   ------------------------------------------------------------------------- */
/* Dark Mode */
.tier-filter-btn[data-filter="advanced"] {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.22) !important;
  color: #fbbf24 !important;
}
.tier-filter-btn[data-filter="advanced"] .tier-count {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fde68a !important;
}
.tier-filter-btn[data-filter="advanced"]:hover {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.40) !important;
  color: #fef3c7 !important;
}
.tier-filter-btn[data-filter="advanced"].is-active {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  border-color: #fbbf24 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.45) !important;
}
.tier-filter-btn[data-filter="advanced"].is-active .tier-count {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

/* Light Mode */
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"] {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"] .tier-count {
  background: #fef3c7 !important;
  color: #92400e !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"]:hover {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #78350f !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"].is-active {
  background: #d97706 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25) !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   RESPONSIVE MOBILE BREAKPOINTS (STRICT ZERO SCROLLBAR, FLUID FIT)
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {
  .chapter-tier-filter-bar {
    gap: 4px !important;
    padding: 3px !important;
    margin-bottom: 1rem !important;
  }
  
  .tier-filter-btn {
    padding: 0.35rem 0.25rem !important;
    font-size: clamp(0.68rem, 2.7vw, 0.75rem) !important;
    gap: 3px !important;
    min-height: 1.7rem !important;
  }
  
  .tier-filter-btn .tier-count {
    font-size: clamp(0.62rem, 2.3vw, 0.68rem) !important;
    padding: 1px 4px !important;
    margin-left: 1px !important;
  }
  
  .tier-filter-btn i,
  .tier-filter-btn svg {
    font-size: 0.75rem !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
  }
}

@media only screen and (max-width: 380px) {
  .chapter-tier-filter-bar {
    gap: 3px !important;
    padding: 2.5px !important;
  }
  
  .tier-filter-btn {
    padding: 0.3rem 0.15rem !important;
    font-size: clamp(0.62rem, 2.8vw, 0.68rem) !important;
    gap: 2px !important;
    min-height: 1.6rem !important;
  }
  
  .tier-filter-btn .tier-count {
    font-size: 0.60rem !important;
    padding: 0.5px 3px !important;
  }
  
  .tier-filter-btn i,
  .tier-filter-btn svg {
    font-size: 0.68rem !important;
    width: 0.68rem !important;
    height: 0.68rem !important;
  }
}.tier-filter-btn[data-filter="all"].is-active {
  background: #31384a !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.40) !important;
}
.tier-filter-btn[data-filter="all"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
}

/* Light Mode */
:root[data-mode="light"] .tier-filter-btn[data-filter="all"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"] .tier-count {
  background: #e2e8f0 !important;
  color: #334155 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"]:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"].is-active {
  background: #1e293b !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.20) !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   FILTER 2: "FREE" (Emerald / Mint Green Tone)
   ------------------------------------------------------------------------- */
/* Dark Mode */
.tier-filter-btn[data-filter="free"] {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
  color: #34d399 !important;
}
.tier-filter-btn[data-filter="free"] .tier-count {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}
.tier-filter-btn[data-filter="free"]:hover {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(16, 185, 129, 0.40) !important;
  color: #a7f3d0 !important;
}
.tier-filter-btn[data-filter="free"].is-active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.45) !important;
}
.tier-filter-btn[data-filter="free"].is-active .tier-count {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

/* Light Mode */
:root[data-mode="light"] .tier-filter-btn[data-filter="free"] {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #047857 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"] .tier-count {
  background: #d1fae5 !important;
  color: #065f46 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"]:hover {
  background: #d1fae5 !important;
  border-color: #6ee7b7 !important;
  color: #064e3b !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"].is-active {
  background: #059669 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   FILTER 3: "ADVANCED" (Radiant Gold / Amber Tone)
   ------------------------------------------------------------------------- */
/* Dark Mode */
.tier-filter-btn[data-filter="advanced"] {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.22) !important;
  color: #fbbf24 !important;
}
.tier-filter-btn[data-filter="advanced"] .tier-count {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fde68a !important;
}
.tier-filter-btn[data-filter="advanced"]:hover {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.40) !important;
  color: #fef3c7 !important;
}
.tier-filter-btn[data-filter="advanced"].is-active {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  border-color: #fbbf24 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.45) !important;
}
.tier-filter-btn[data-filter="advanced"].is-active .tier-count {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

/* Light Mode */
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"] {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"] .tier-count {
  background: #fef3c7 !important;
  color: #92400e !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"]:hover {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #78350f !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"].is-active {
  background: #d97706 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25) !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   RESPONSIVE MOBILE BREAKPOINTS (STRICT ZERO SCROLLBAR, FLUID FIT)
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {
  .chapter-tier-filter-bar {
    gap: 4px !important;
    padding: 3px !important;
    margin-bottom: 1rem !important;
  }
  
  .tier-filter-btn {
    padding: 0.35rem 0.25rem !important;
    font-size: clamp(0.68rem, 2.7vw, 0.75rem) !important;
    gap: 3px !important;
    min-height: 1.7rem !important;
  }
  
  .tier-filter-btn .tier-count {
    font-size: clamp(0.62rem, 2.3vw, 0.68rem) !important;
    padding: 1px 4px !important;
    margin-left: 1px !important;
  }
  
  .tier-filter-btn i,
  .tier-filter-btn svg {
    font-size: 0.75rem !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
  }
}

@media only screen and (max-width: 380px) {
  .chapter-tier-filter-bar {
    gap: 3px !important;
    padding: 2.5px !important;
  }
  
  .tier-filter-btn {
    padding: 0.3rem 0.15rem !important;
    font-size: clamp(0.62rem, 2.8vw, 0.68rem) !important;
    gap: 2px !important;
    min-height: 1.6rem !important;
  }
  
  .tier-filter-btn .tier-count {
    font-size: 0.60rem !important;
    padding: 0.5px 3px !important;
  }
  
  .tier-filter-btn i,
  .tier-filter-btn svg {
    font-size: 0.68rem !important;
    width: 0.68rem !important;
    height: 0.68rem !important;
  }
}.tier-filter-btn[data-filter="all"].is-active {
  background: #31384a !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.40) !important;
}
.tier-filter-btn[data-filter="all"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
}

/* Light Mode */
:root[data-mode="light"] .tier-filter-btn[data-filter="all"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"] .tier-count {
  background: #e2e8f0 !important;
  color: #334155 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"]:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"].is-active {
  background: #1e293b !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.20) !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   FILTER 2: "FREE" (Emerald / Mint Green Tone)
   ------------------------------------------------------------------------- */
/* Dark Mode */
.tier-filter-btn[data-filter="free"] {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
  color: #34d399 !important;
}
.tier-filter-btn[data-filter="free"] .tier-count {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}
.tier-filter-btn[data-filter="free"]:hover {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(16, 185, 129, 0.40) !important;
  color: #a7f3d0 !important;
}
.tier-filter-btn[data-filter="free"].is-active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.45) !important;
}
.tier-filter-btn[data-filter="free"].is-active .tier-count {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

/* Light Mode */
:root[data-mode="light"] .tier-filter-btn[data-filter="free"] {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #047857 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"] .tier-count {
  background: #d1fae5 !important;
  color: #065f46 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"]:hover {
  background: #d1fae5 !important;
  border-color: #6ee7b7 !important;
  color: #064e3b !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"].is-active {
  background: #059669 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   FILTER 3: "ADVANCED" (Radiant Gold / Amber Tone)
   ------------------------------------------------------------------------- */
/* Dark Mode */
.tier-filter-btn[data-filter="advanced"] {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.22) !important;
  color: #fbbf24 !important;
}
.tier-filter-btn[data-filter="advanced"] .tier-count {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fde68a !important;
}
.tier-filter-btn[data-filter="advanced"]:hover {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.40) !important;
  color: #fef3c7 !important;
}
.tier-filter-btn[data-filter="advanced"].is-active {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  border-color: #fbbf24 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.45) !important;
}
.tier-filter-btn[data-filter="advanced"].is-active .tier-count {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

/* Light Mode */
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"] {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"] .tier-count {
  background: #fef3c7 !important;
  color: #92400e !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"]:hover {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #78350f !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"].is-active {
  background: #d97706 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25) !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}.tier-filter-btn[data-filter="all"].is-active {
  background: #31384a !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.40) !important;
}
.tier-filter-btn[data-filter="all"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
}

/* Light Mode */
:root[data-mode="light"] .tier-filter-btn[data-filter="all"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"] .tier-count {
  background: #e2e8f0 !important;
  color: #334155 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"]:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"].is-active {
  background: #1e293b !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.20) !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="all"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   FILTER 2: "FREE" (Emerald / Mint Green Tone)
   ------------------------------------------------------------------------- */
/* Dark Mode */
.tier-filter-btn[data-filter="free"] {
  background: rgba(16, 185, 129, 0.08) !important;
  border: 1px solid rgba(16, 185, 129, 0.22) !important;
  color: #34d399 !important;
}
.tier-filter-btn[data-filter="free"] .tier-count {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
}
.tier-filter-btn[data-filter="free"]:hover {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(16, 185, 129, 0.40) !important;
  color: #a7f3d0 !important;
}
.tier-filter-btn[data-filter="free"].is-active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.45) !important;
}
.tier-filter-btn[data-filter="free"].is-active .tier-count {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

/* Light Mode */
:root[data-mode="light"] .tier-filter-btn[data-filter="free"] {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #047857 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"] .tier-count {
  background: #d1fae5 !important;
  color: #065f46 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"]:hover {
  background: #d1fae5 !important;
  border-color: #6ee7b7 !important;
  color: #064e3b !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"].is-active {
  background: #059669 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="free"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   FILTER 3: "ADVANCED" (Radiant Gold / Amber Tone)
   ------------------------------------------------------------------------- */
/* Dark Mode */
.tier-filter-btn[data-filter="advanced"] {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.22) !important;
  color: #fbbf24 !important;
}
.tier-filter-btn[data-filter="advanced"] .tier-count {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fde68a !important;
}
.tier-filter-btn[data-filter="advanced"]:hover {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.40) !important;
  color: #fef3c7 !important;
}
.tier-filter-btn[data-filter="advanced"].is-active {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  border-color: #fbbf24 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.45) !important;
}
.tier-filter-btn[data-filter="advanced"].is-active .tier-count {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #ffffff !important;
}

/* Light Mode */
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"] {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"] .tier-count {
  background: #fef3c7 !important;
  color: #92400e !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"]:hover {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #78350f !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"].is-active {
  background: #d97706 !important;
  border-color: #b45309 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25) !important;
}
:root[data-mode="light"] .tier-filter-btn[data-filter="advanced"].is-active .tier-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* =============================================================================
   UNIVERSAL MODAL MOBILE RESPONSIVENESS & ANTI-SQUISHING SYSTEM
   ============================================================================= */

/* 1. Universal Dialog & Modal Wrapper Constraints */
dialog.dialog-modal,
.modal__wrapper,
.report-modal-content,
.fcn-modal-card,
.fcn-modal-content,
.cmppp-modal-content,
.modal-dialog {
  width: min(calc(100vw - 20px), var(--modal-width, 420px)) !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100dvh - 24px) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Modal Headers */
.dialog-modal__header,
.modal__header,
.report-modal-header,
.fcn-modal-header {
  font-size: clamp(0.85rem, 3.5vw, 1.05rem) !important;
  padding: 10px 36px 10px 12px !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
}

/* Close Buttons: Guaranteed Touch Targets */
.dialog-modal__close,
.modal .close,
.report-close,
.fcn-modal-close {
  width: 32px !important;
  height: 32px !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: 4px !important;
  right: 4px !important;
}

/* 2. Reader Settings & Formatting Modal Mobile Fit */
@media only screen and (max-width: 640px) {
  .reader-settings.modal .modal__wrapper,
  #formatting-modal .modal__wrapper {
    width: calc(100vw - 20px) !important;
    max-width: 380px !important;
    padding: 0 !important;
  }

  .reader-settings__row,
  .modal__row {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .reader-settings__row > :is(i, .icon),
  .modal__row > :is(i, .icon) {
    min-width: 22px !important;
    font-size: 15px !important;
    margin: 0 !important;
  }

  /* Sliders & Number Input Anti-Squish */
  .modal input[type="range"],
  .dialog-modal input[type="range"] {
    flex-grow: 1 !important;
    min-width: 60px !important;
    height: 24px !important;
  }

  .modal input:where([type=text], [type=number]):not(:first-child):last-child,
  .dialog-modal input:where([type=text], [type=number]):not(:first-child):last-child {
    width: 44px !important;
    min-width: 40px !important;
    font-size: 11px !important;
    padding: 2px !important;
    flex-shrink: 0 !important;
  }

  /* Select dropdowns + Steppers */
  .reader-settings .select-wrapper {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  .reader-settings select {
    width: 100% !important;
    font-size: 12px !important;
    text-overflow: ellipsis !important;
    padding: 4px 8px !important;
  }

  .reader-settings .button.font-stepper,
  .reader-settings .button.font-color-stepper,
  .reader-settings .button--left,
  .reader-settings .button--right {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }

  /* 7 Toggles Row: Perfect Distribution with 0 Wrapping */
  .reader-settings__toggles {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(2px, 1.2vw, 6px) !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .reader-settings__toggle.toggle {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .reader-settings__toggle-icon {
    font-size: clamp(12px, 3.2vw, 15px) !important;
  }
}

/* 3. Chapter Index Modal Mobile Fitting */
dialog.dialog-modal._chapter-index,
#fictioneer-chapter-index-dialog {
  width: min(calc(100vw - 20px), 480px) !important;
  max-height: min(calc(100dvh - 32px), 640px) !important;
}

.chapter-index__search input,
.chapter-index-search-input {
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
}

.chapter-index-group__list-item,
.chapter-item,
.chapter-index__item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  min-width: 0 !important;
}

.chapter-index-group__list-item .chapter-title,
.chapter-item .chapter-title,
.chapter-index__item .chapter-title,
.chapter-index__item-link {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.76rem, 2.9vw, 0.86rem) !important;
}

.chapter-index-group__list-item .chapter-meta,
.chapter-item .chapter-meta,
.chapter-index__item-meta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  font-size: clamp(0.68rem, 2.5vw, 0.76rem) !important;
  white-space: nowrap !important;
}

/* 4. Age Confirmation Modal Mobile Layout */
.dialog-modal__actions._age-confirmation,
.modal__actions._age-confirmation {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 12px 12px !important;
}

.dialog-modal__actions._age-confirmation .button,
.modal__actions._age-confirmation .button {
  flex: 1 1 0 !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: clamp(0.76rem, 2.9vw, 0.86rem) !important;
  padding: 6px 8px !important;
  white-space: normal !important;
  word-break: break-word !important;
}

@media only screen and (max-width: 360px) {
  .dialog-modal__actions._age-confirmation,
  .modal__actions._age-confirmation {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .dialog-modal__actions._age-confirmation .button,
  .modal__actions._age-confirmation .button {
    width: 100% !important;
  }
}

/* 5. Login & Social Buttons Full Mobile Width */
.login__options,
.modal__login .login-form {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
}

.login__options .button,
.modal__login .button {
  width: 100% !important;
  min-height: 40px !important;
  font-size: clamp(0.78rem, 3.2vw, 0.88rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  gap: 8px !important;
}

/* 6. Chapter Report Modal Mobile Responsiveness */
.report-modal {
  padding: 8px !important;
}

.report-modal-content {
  width: 100% !important;
  max-width: 480px !important;
  margin: auto !important;
  box-sizing: border-box !important;
}

.report-modal-content .form-group {
  margin-bottom: 0.85rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.report-modal-content label {
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  word-break: break-word !important;
}

.report-modal-content .report-select,
.report-modal-content .report-input,
.report-modal-content textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 0.85rem !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
}

.report-modal-content textarea {
  min-height: 85px !important;
  resize: vertical !important;
}

/* Term pair fields: Stack cleanly on mobile to prevent extreme input squishing */
.term-entry {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 8px !important;
  background: rgba(0, 0, 0, 0.20) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  margin-bottom: 8px !important;
}

.term-entry .term-fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
}

.term-entry .term-actions {
  display: flex !important;
  justify-content: flex-end !important;
}

.paragraph-selector-btn,
.mistranslation-add-btn,
.term-add-btn {
  width: 100% !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  box-sizing: border-box !important;
}

.report-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 1rem !important;
}

.report-submit {
  width: 100% !important;
  min-height: 42px !important;
  font-size: 0.90rem !important;
  font-weight: 700 !important;
  justify-content: center !important;
}

/* 7. Chapter Range Purchase Modal Mobile Fitting */
.fcn-modal-overlay {
  padding: 8px !important;
}

.fcn-modal-card {
  width: 100% !important;
  max-width: 480px !important;
  box-sizing: border-box !important;
}

.fcn-modal-body {
  padding: 12px !important;
  box-sizing: border-box !important;
}

.fcn-modal-range-grid,
.fcn-range-controls {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media only screen and (max-width: 360px) {
  .fcn-modal-range-grid,
  .fcn-range-controls {
    grid-template-columns: 1fr !important;
  }
}

.fcn-modal-footer {
  display: flex !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 10px 12px 12px !important;
  box-sizing: border-box !important;
}

.fcn-modal-footer .button,
.fcn-modal-footer button {
  flex: 1 1 0 !important;
  min-height: 38px !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: clamp(0.78rem, 3vw, 0.88rem) !important;
}

/* 8. BBCodes & Sharing Modals Content Wrap */
.dialog-modal__description._bbcodes,
.modal__description._bbcodes {
  word-break: break-word !important;
}

.dialog-modal__description._bbcodes code,
.modal__description._bbcodes code {
  white-space: pre-wrap !important;
  word-break: break-all !important;
}

.sharing-grid,
.modal__sharing-links {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

/* =============================================================================
   MODAL DISPLAY & VISIBILITY SAFETY (CRITICAL FIX FOR MOBILE SCREEN BLOCK)
   ============================================================================= */

/* 1. CLOSED MODALS ARE STRICTLY HIDDEN & NON-BLOCKING */
.modal[hidden],
.modal[aria-hidden="true"],
.report-modal:not(.active):not(.is-open),
.report-modal[aria-hidden="true"],
.fcn-modal-overlay:not(.active):not(.is-open),
.fcn-modal-overlay[aria-hidden="true"],
dialog.dialog-modal:not([open]) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  content-visibility: hidden !important;
  opacity: 0 !important;
  z-index: -9999 !important;
}

/* 2. BASE OVERLAYS: DEFAULT TO DISPLAY NONE (NEVER FLEX BY DEFAULT) */
.fcn-modal-overlay {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 12px !important;
  box-sizing: border-box !important;
  background: rgba(10, 12, 18, 0.75) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.report-modal {
  display: none;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 12px !important;
  box-sizing: border-box !important;
  background: rgba(10, 12, 18, 0.75) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* 3. ACTIVELY OPENED MODALS */
.modal:not([hidden]),
.report-modal.active,
.report-modal.is-open,
.report-modal[aria-hidden="false"],
.fcn-modal-overlay.active,
.fcn-modal-overlay.is-open,
.fcn-modal-overlay[aria-hidden="false"] {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

dialog.dialog-modal[open] {
  display: block !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =============================================================================
   DARKER PAYBOX IN DARK MODE
   ============================================================================= */
:root[data-mode="dark"] .cmppp-paybox,
:root[data-mode="dark"] .cmppp-paybox-container,
:root[data-mode="dark"] .cmppp-plan-card,
:root[data-mode="dark"] .cmppp-refund-box,
:root[data-mode="dark"] .cmppp_messages_block,
:root[data-mode="dark"] .cmppp-range-trigger-box,
:root[data-mode="dark"] .cm_shortcode_group_paybox {
  background: #1c202b !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50) !important;
}

:root[data-mode="dark"] .cmppp-plan-header,
:root[data-mode="dark"] .cmppp-paybox h3,
:root[data-mode="dark"] .cmppp-refund-box h3 {
  background: #242938 !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

:root[data-mode="dark"] .cmppp-wallet-balance,
:root[data-mode="dark"] .cmppp-plan-tabs,
:root[data-mode="dark"] .cmppp-plan-option {
  background: #141720 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

:root[data-mode="dark"] .cmppp-paybox select,
:root[data-mode="dark"] .cmppp-paybox input:not([type="submit"]) {
  background: #141720 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

:root[data-mode="dark"] .cmppp-paybox input[type="submit"],
:root[data-mode="dark"] .cmppp-range-trigger-button,
:root[data-mode="dark"] .cmppp-plan-button {
  background: #1e2330 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

:root[data-mode="dark"] .cmppp-paybox input[type="submit"]:hover:not([disabled]),
:root[data-mode="dark"] .cmppp-range-trigger-button:hover,
:root[data-mode="dark"] .cmppp-plan-button:hover {
  background: #2d3548 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
}

/* =============================================================================
   UNIVERSAL COMPACT (NON-FULLSCREEN) MOBILE MODALS
   ============================================================================= */
@media only screen and (max-width: 640px) {
  /* Backdrops with visible padding around modal cards when open */
  .modal:not([hidden]),
  .report-modal.active,
  .report-modal.is-open,
  .fcn-modal-overlay.active,
  .fcn-modal-overlay.is-open {
    padding: 16px 12px !important;
    box-sizing: border-box !important;
  }

  /* Compact Modal Cards (Strictly No Full-Screen Takeover) */
  dialog.dialog-modal,
  .modal__wrapper,
  .report-modal-content,
  .fcn-modal-card,
  .fcn-modal-content,
  .cmppp-modal-content,
  #formatting-modal .modal__wrapper,
  #site-settings-modal .modal__wrapper,
  #login-modal .modal__wrapper,
  #sharing-modal .modal__wrapper,
  #bbcodes-modal .modal__wrapper,
  #suggestions-modal .modal__wrapper,
  dialog.dialog-modal._chapter-index {
    width: min(calc(100vw - 32px), 360px) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: min(80dvh, 520px) !important;
    margin: auto !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.70) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  /* Smaller Chapter Report Modal on Mobile */
  .report-modal-content {
    width: min(calc(100vw - 32px), 340px) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: min(76dvh, 480px) !important;
    border-radius: 14px !important;
    padding: 0 !important;
  }

  .report-modal-header {
    padding: 10px 14px !important;
  }

  .report-modal-header h3 {
    font-size: 0.88rem !important;
  }

  .report-modal-content .report-form {
    padding: 10px 14px 14px !important;
  }

  .report-modal-content .form-group {
    margin-bottom: 0.65rem !important;
  }

  .report-modal-content textarea {
    min-height: 60px !important;
    max-height: 100px !important;
  }
}

/* =============================================================================
   UNLOCK RANGE MODAL PRESETS — 3+1 GRID (PREVENTS "ALL REMAINING" SQUISHING)
   ============================================================================= */
.fcn-range-presets-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 5px !important;
  padding: 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.fcn-preset-btn {
  flex: unset !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0.4rem 0.25rem !important;
  min-height: 1.95rem !important;
  font-size: clamp(0.70rem, 2.6vw, 0.76rem) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  justify-content: center !important;
  text-align: center !important;
}

/* "All Remaining" spans full width row so text NEVER squishes */
.fcn-preset-btn[data-preset="all"] {
  grid-column: 1 / -1 !important;
  min-height: 2.15rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

.fcn-range-summary-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  word-break: break-word !important;
}

/* =============================================================================
   UNIVERSAL STORY PAGE COVER & HEADER OVERHAUL (v2.0.0)
   ============================================================================= */

/* Universal Container: Strict Vertical Flex Column */
.story__header,
.story__article .story__header,
body.single-fcn_story .story__header,
body.single .story__header,
article.story__article .story__header,
.story__header._child-cover-led,
.story__header._float-top-left,
.story__header._float-top-right,
.story__header:not(._no-thumbnail) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto 1.5rem !important;
  padding: 0 0 1.25rem 0 !important;
  position: relative !important;
  float: none !important;
  clear: both !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid var(--story-ui-line, rgba(255, 255, 255, 0.08)) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

/* Universal Story Cover Figure: Placed Directly Above Title */
.story__thumbnail,
.story__cover,
.story__header .story__thumbnail,
.story__header .story__cover,
.story__header figure.story__thumbnail,
.story__header figure.story__cover,
body.single-fcn_story .story__header :is(.story__thumbnail, .story__cover),
:root.no-covers .story__header .story__thumbnail,
:root.no-covers .story__header .story__cover {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  content-visibility: visible !important;
  order: -1 !important;
  position: relative !important;
  float: none !important;
  clear: both !important;
  inset: auto !important;
  grid-area: auto !important;
  width: clamp(260px, 32vw, 360px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 200px !important;
  max-height: none !important;
  margin: 0 auto 1.25rem !important;
  padding: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  z-index: 5 !important;
}

/* Universal Story Cover Anchor Wrapper */
.story__thumbnail > a,
.story__cover > a,
.story__header .story__thumbnail > a,
.story__header .story__cover > a {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: var(--story-ui-cover-radius, 10px) !important;
  border: 1px solid var(--story-ui-border, rgba(255, 255, 255, 0.14)) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.40) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}

.story__thumbnail > a:hover,
.story__cover > a:hover {
  border-color: var(--story-ui-border-hover, rgba(255, 255, 255, 0.35)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.50) !important;
}

/* Universal Story Cover Image (Crisp, High-Res, Proportional) */
.story__thumbnail img,
.story__cover img,
.story__thumbnail-image,
.story__cover-image,
.story__header .story__thumbnail img,
.story__header .story__cover img,
.story__header .story__thumbnail-image,
.story__header .story__cover-image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  min-height: 200px !important;
  max-height: none !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border: 0 !important;
  border-radius: calc(var(--story-ui-cover-radius, 10px) - 1px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Universal Story Identity (Title & Metadata Below Cover) */
.story__identity,
.story__header .story__identity {
  display: block !important;
  order: 1 !important;
  position: relative !important;
  grid-area: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 0.65rem 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.story__identity-title,
.story__identity h1,
.story__header .story__identity-title {
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: clamp(1.4rem, 4vw, 2.2rem) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

/* Universal Story Taxonomies (Directly Below Title) */
.story__taxonomies,
.story__header .story__taxonomies {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  order: 2 !important;
  position: relative !important;
  grid-area: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0.5rem auto 0 !important;
  padding: 0 !important;
  gap: 0.35rem 0.5rem !important;
}

/* Mobile Mode: 100% Screen Width Cover */
@media only screen and (max-width: 640px) {
  .story__thumbnail,
  .story__cover,
  .story__header .story__thumbnail,
  .story__header .story__cover,
  .story__header figure.story__thumbnail,
  .story__header figure.story__cover {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 1rem !important;
  }

  .story__thumbnail > a,
  .story__cover > a,
  .story__header .story__thumbnail > a,
  .story__header .story__cover > a {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30) !important;
  }

  .story__thumbnail img,
  .story__cover img,
  .story__thumbnail-image,
  .story__cover-image {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    border-radius: 7px !important;
  }
}
/* =============================================================================
   UNIVERSAL STORY PAGE COVER & HEADER OVERHAUL (v2.0.0)
   ============================================================================= */

/* Universal Container: Strict Vertical Flex Column */
.story__header,
.story__article .story__header,
body.single-fcn_story .story__header,
body.single .story__header,
article.story__article .story__header,
.story__header._child-cover-led,
.story__header._float-top-left,
.story__header._float-top-right,
.story__header:not(._no-thumbnail) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto 1.5rem !important;
  padding: 0 0 1.25rem 0 !important;
  position: relative !important;
  float: none !important;
  clear: both !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid var(--story-ui-line, rgba(255, 255, 255, 0.08)) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

/* Universal Story Cover Figure: Placed Directly Above Title */
.story__thumbnail,
.story__cover,
.story__header .story__thumbnail,
.story__header .story__cover,
.story__header figure.story__thumbnail,
.story__header figure.story__cover,
body.single-fcn_story .story__header :is(.story__thumbnail, .story__cover),
:root.no-covers .story__header .story__thumbnail,
:root.no-covers .story__header .story__cover {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  content-visibility: visible !important;
  order: -1 !important;
  position: relative !important;
  float: none !important;
  clear: both !important;
  inset: auto !important;
  grid-area: auto !important;
  width: clamp(260px, 32vw, 360px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 200px !important;
  max-height: none !important;
  margin: 0 auto 1.25rem !important;
  padding: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  z-index: 5 !important;
}

/* Universal Story Cover Anchor Wrapper */
.story__thumbnail > a,
.story__cover > a,
.story__header .story__thumbnail > a,
.story__header .story__cover > a {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: var(--story-ui-cover-radius, 10px) !important;
  border: 1px solid var(--story-ui-border, rgba(255, 255, 255, 0.14)) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.40) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}

.story__thumbnail > a:hover,
.story__cover > a:hover {
  border-color: var(--story-ui-border-hover, rgba(255, 255, 255, 0.35)) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.50) !important;
}

/* Universal Story Cover Image (Crisp, High-Res, Proportional) */
.story__thumbnail img,
.story__cover img,
.story__thumbnail-image,
.story__cover-image,
.story__header .story__thumbnail img,
.story__header .story__cover img,
.story__header .story__thumbnail-image,
.story__header .story__cover-image {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: auto !important;
  min-height: 200px !important;
  max-height: none !important;
  aspect-ratio: 2 / 3 !important;
  object-fit: cover !important;
  object-position: center top !important;
  border: 0 !important;
  border-radius: calc(var(--story-ui-cover-radius, 10px) - 1px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Universal Story Identity (Title & Metadata Below Cover) */
.story__identity,
.story__header .story__identity {
  display: block !important;
  order: 1 !important;
  position: relative !important;
  grid-area: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 0.65rem 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.story__identity-title,
.story__identity h1,
.story__header .story__identity-title {
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: clamp(1.4rem, 4vw, 2.2rem) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

/* Universal Story Taxonomies (Directly Below Title) */
.story__taxonomies,
.story__header .story__taxonomies {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  order: 2 !important;
  position: relative !important;
  grid-area: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0.5rem auto 0 !important;
  padding: 0 !important;
  gap: 0.35rem 0.5rem !important;
}

/* Mobile Mode: 100% Screen Width Cover */
@media only screen and (max-width: 640px) {
  .story__thumbnail,
  .story__cover,
  .story__header .story__thumbnail,
  .story__header .story__cover,
  .story__header figure.story__thumbnail,
  .story__header figure.story__cover {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 1rem !important;
  }

  .story__thumbnail > a,
  .story__cover > a,
  .story__header .story__thumbnail > a,
  .story__header .story__cover > a {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30) !important;
  }

  .story__thumbnail img,
  .story__cover img,
  .story__thumbnail-image,
  .story__cover-image {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    border-radius: 7px !important;
  }
}

/* =============================================================================
   COMPACT UNLOCK RANGE MODAL SYSTEM (STREAMLINED FOR MOBILE)
   ============================================================================= */

.fcn-modal-card {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(calc(100vw - 24px), 360px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(84dvh, 490px) !important;
  margin: auto !important;
  background: #1c202b !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.70) !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

:root[data-mode="light"] .fcn-modal-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important;
  color: #0f172a !important;
}

.fcn-modal-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 12px !important;
  min-height: 40px !important;
  background: #242938 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-sizing: border-box !important;
}

:root[data-mode="light"] .fcn-modal-header {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

.fcn-modal-title {
  margin: 0 !important;
  font-size: 0.90rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

:root[data-mode="light"] .fcn-modal-title {
  color: #0f172a !important;
}

.fcn-modal-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.fcn-modal-body {
  padding: 10px 12px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Wallet Bar */
.fcn-range-wallet-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 5px 8px !important;
  background: #141720 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 6px !important;
  font-size: 0.74rem !important;
}

:root[data-mode="light"] .fcn-range-wallet-bar {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

.fcn-range-wallet-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  color: #dce3f4 !important;
  font-weight: 500 !important;
}

:root[data-mode="light"] .fcn-range-wallet-label {
  color: #64748b !important;
}

.fcn-range-wallet-balance strong {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

:root[data-mode="light"] .fcn-range-wallet-balance strong {
  color: #0f172a !important;
}

.fcn-range-wallet-balance span {
  font-size: 0.70rem !important;
  color: #dce3f4 !important;
  margin-left: 2px !important;
}

.fcn-range-topup-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
  padding: 0.2rem 0.45rem !important;
  border-radius: 4px !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

:root[data-mode="light"] .fcn-range-topup-link {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Quick Select 4-Button Equal Grid */
.fcn-range-presets-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.fcn-range-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #dce3f4 !important;
  margin: 0 !important;
}

:root[data-mode="light"] .fcn-range-label {
  color: #64748b !important;
}

.fcn-range-presets-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px !important;
  background: #141720 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 6px !important;
  padding: 2.5px !important;
  box-sizing: border-box !important;
}

:root[data-mode="light"] .fcn-range-presets-buttons {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

.fcn-preset-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.28rem 0.2rem !important;
  min-height: 1.75rem !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #dce3f4 !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.fcn-preset-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.fcn-preset-btn.active {
  color: #ffffff !important;
  background: #242938 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

:root[data-mode="light"] .fcn-preset-btn {
  color: #64748b !important;
}

:root[data-mode="light"] .fcn-preset-btn.active {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: #0f172a !important;
}

/* Selectors Grid */
.fcn-range-selectors-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.fcn-range-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.fcn-range-field label {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: #dce3f4 !important;
  margin: 0 !important;
}

:root[data-mode="light"] .fcn-range-field label {
  color: #64748b !important;
}

.fcn-range-select {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0.35rem 0.5rem !important;
  height: 30px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #141720 !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  line-height: 1.2 !important;
  outline: none !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:root[data-mode="light"] .fcn-range-select {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Summary Card */
.fcn-range-summary-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 6px 8px !important;
  background: #141720 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  font-size: 0.72rem !important;
}

:root[data-mode="light"] .fcn-range-summary-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.fcn-range-summary-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #dce3f4 !important;
}

:root[data-mode="light"] .fcn-range-summary-row {
  color: #64748b !important;
}

.fcn-range-summary-row strong {
  color: #ffffff !important;
}

:root[data-mode="light"] .fcn-range-summary-row strong {
  color: #0f172a !important;
}

.fcn-range-total-row {
  padding-top: 2px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

:root[data-mode="light"] .fcn-range-total-row {
  border-top-color: #e2e8f0 !important;
}

.fcn-range-cost-display {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.2rem !important;
}

.fcn-range-cost-display strong {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #f59e0b !important;
}

/* Modal Footer */
.fcn-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  padding: 8px 12px 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

:root[data-mode="light"] .fcn-modal-footer {
  border-top-color: #e2e8f0 !important;
}

.fcn-btn-secondary {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.35rem 0.75rem !important;
  min-height: 1.95rem !important;
  border-radius: 5px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #dce3f4 !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

:root[data-mode="light"] .fcn-btn-secondary {
  color: #64748b !important;
  border-color: #cbd5e1 !important;
}

.fcn-btn-primary {
  flex: 1 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3rem !important;
  padding: 0.35rem 0.85rem !important;
  min-height: 1.95rem !important;
  border-radius: 5px !important;
  background: #1e2330 !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

.fcn-btn-primary:hover:not(:disabled) {
  background: #2d3548 !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

:root[data-mode="light"] .fcn-btn-primary {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
}
:root[data-mode="light"] .fcn-range-wallet-balance strong {
  color: #0f172a !important;
}

.fcn-range-wallet-balance span {
  font-size: 0.70rem !important;
  color: #dce3f4 !important;
  margin-left: 2px !important;
}

.fcn-range-topup-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.2rem !important;
  padding: 0.2rem 0.45rem !important;
  border-radius: 4px !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

:root[data-mode="light"] .fcn-range-topup-link {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Quick Select 4-Button Equal Grid */
.fcn-range-presets-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.fcn-range-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #dce3f4 !important;
  margin: 0 !important;
}

:root[data-mode="light"] .fcn-range-label {
  color: #64748b !important;
}

.fcn-range-presets-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px !important;
  background: #141720 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 6px !important;
  padding: 2.5px !important;
  box-sizing: border-box !important;
}

:root[data-mode="light"] .fcn-range-presets-buttons {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
}

.fcn-preset-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.28rem 0.2rem !important;
  min-height: 1.75rem !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #dce3f4 !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.fcn-preset-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.fcn-preset-btn.active {
  color: #ffffff !important;
  background: #242938 !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

:root[data-mode="light"] .fcn-preset-btn {
  color: #64748b !important;
}

:root[data-mode="light"] .fcn-preset-btn.active {
  color: #0f172a !important;
  background: #ffffff !important;
  border-color: #0f172a !important;
}

/* Selectors Grid */
.fcn-range-selectors-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.fcn-range-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.fcn-range-field label {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: #dce3f4 !important;
  margin: 0 !important;
}

:root[data-mode="light"] .fcn-range-field label {
  color: #64748b !important;
}

.fcn-range-select {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0.35rem 0.5rem !important;
  height: 30px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #141720 !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  line-height: 1.2 !important;
  outline: none !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:root[data-mode="light"] .fcn-range-select {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Summary Card */
.fcn-range-summary-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 6px 8px !important;
  background: #141720 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  font-size: 0.72rem !important;
}

:root[data-mode="light"] .fcn-range-summary-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.fcn-range-summary-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #dce3f4 !important;
}

:root[data-mode="light"] .fcn-range-summary-row {
  color: #64748b !important;
}

.fcn-range-summary-row strong {
  color: #ffffff !important;
}

:root[data-mode="light"] .fcn-range-summary-row strong {
  color: #0f172a !important;
}

.fcn-range-total-row {
  padding-top: 2px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

:root[data-mode="light"] .fcn-range-total-row {
  border-top-color: #e2e8f0 !important;
}

.fcn-range-cost-display {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.2rem !important;
}

.fcn-range-cost-display strong {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #f59e0b !important;
}

/* Modal Footer */
.fcn-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  padding: 8px 12px 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

:root[data-mode="light"] .fcn-modal-footer {
  border-top-color: #e2e8f0 !important;
}

.fcn-btn-secondary {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.35rem 0.75rem !important;
  min-height: 1.95rem !important;
  border-radius: 5px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #dce3f4 !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

:root[data-mode="light"] .fcn-btn-secondary {
  color: #64748b !important;
  border-color: #cbd5e1 !important;
}

.fcn-btn-primary {
  flex: 1 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3rem !important;
  padding: 0.35rem 0.85rem !important;
  min-height: 1.95rem !important;
  border-radius: 5px !important;
  background: #1e2330 !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

.fcn-btn-primary:hover:not(:disabled) {
  background: #2d3548 !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

:root[data-mode="light"] .fcn-btn-primary {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
}

/* =============================================================================
   MEMBERSHIP TABLES RESPONSIVE & MOBILE-SIMPLIFIED SYSTEM (v2.0.2)
   ============================================================================= */

.purchase-table-container,
.redemption-table-container,
.fictioneer-epub-admin__purchases-scroll {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 0.75rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--membership-border, rgba(255, 255, 255, 0.08)) !important;
  background: var(--membership-surface, #181c26) !important;
  box-sizing: border-box !important;
}

:root[data-mode="light"] .purchase-table-container,
:root[data-mode="light"] .redemption-table-container {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

.purchase-table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse !important;
  font-size: 0.76rem !important;
  box-sizing: border-box !important;
}

.purchase-table th,
.purchase-table td {
  padding: 0.5rem 0.65rem !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-sizing: border-box !important;
}

.purchase-table th {
  background: rgba(255, 255, 255, 0.035) !important;
  font-weight: 700 !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--membership-muted, #8b90a0) !important;
}

:root[data-mode="light"] .purchase-table th {
  background: #f8fafc !important;
  color: #64748b !important;
  border-bottom-color: #e2e8f0 !important;
}

:root[data-mode="light"] .purchase-table td {
  border-bottom-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Mobile Simplified / Card-Based Table Transformation (<= 640px) */
@media only screen and (max-width: 640px) {
  .purchase-table-container,
  .redemption-table-container {
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
  }

  .purchase-table,
  table.purchase-table {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border: none !important;
    background: transparent !important;
  }

  .purchase-table thead,
  table.purchase-table thead {
    display: none !important;
  }

  .purchase-table tbody,
  table.purchase-table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .purchase-table tr,
  table.purchase-table tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 10px !important;
    background: #1c202b !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22) !important;
    gap: 4px 8px !important;
    box-sizing: border-box !important;
  }

  :root[data-mode="light"] .purchase-table tr,
  :root[data-mode="light"] table.purchase-table tr {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  }

  .purchase-table td,
  table.purchase-table td {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    border: none !important;
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
    color: #dce3f4 !important;
  }

  :root[data-mode="light"] .purchase-table td,
  :root[data-mode="light"] table.purchase-table td {
    color: #475569 !important;
  }

  .purchase-table td:first-child,
  table.purchase-table td:first-child {
    flex: 1 0 100% !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    word-break: break-word !important;
  }

  :root[data-mode="light"] .purchase-table td:first-child,
  :root[data-mode="light"] table.purchase-table td:first-child {
    color: #0f172a !important;
    border-bottom-color: #e2e8f0 !important;
  }

  .purchase-table td:first-child a,
  table.purchase-table td:first-child a {
    color: inherit !important;
    text-decoration: none !important;
  }

  .table-controls {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 0.5rem !important;
    width: 100% !important;
  }

  .table-controls select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0.32rem 0.55rem !important;
    height: 30px !important;
    border-radius: 6px !important;
    background: #1c202b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 0.74rem !important;
  }

  :root[data-mode="light"] .table-controls select {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
  }

  .table-controls .sort-order-btn {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: #1c202b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
  }

  :root[data-mode="light"] .table-controls .sort-order-btn {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
  }

  .status-indicator {
    padding: 1.5px 6px !important;
    border-radius: 4px !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
  }

  .status-active {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(74, 222, 128, 0.3) !important;
  }

  .status-expired {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(248, 113, 113, 0.3) !important;
  }

  .pagination {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 0.5rem !important;
  }

  .pagination a {
    min-width: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    border-radius: 5px !important;
    font-size: 0.72rem !important;
  }
}