/* ==========================================================================
   NithanYai.com (นิทานยาย) - Main UI Components & Page Layouts
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header & Glassmorphism Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  background-color: var(--bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-color);
  transition: all var(--transition-normal);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Brand Logo */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}

.brand-logo-img {
  width: 264px;
  height: 80px;
  flex: 0 0 264px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.04));
}

.brand-logo:hover .brand-logo-img {
  transform: none;
}

.footer-brand-img {
  width: 330px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 1rem;
}

/* Primary Navigation Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-pill);
  position: relative;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-link:hover, .nav-link.active {
  color: var(--accent-orange);
  background: var(--accent-orange-light);
}

/* Mega Menu Dropdown */
.nav-item-dropdown {
  position: relative;
}

.mega-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: -120px;
  width: 820px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transition: all var(--transition-bounce);
  z-index: 1100;
}

.nav-item-dropdown:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.mega-col h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent-orange);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent-orange-light);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mega-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mega-col a {
  color: var(--text-secondary);
  font-size: 0.88rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all var(--transition-fast);
}

.mega-col a:hover {
  color: var(--accent-orange);
  background: var(--bg-secondary);
  transform: translateX(4px);
}

/* Header Actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 1.1rem;
}

.btn-icon:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-orange);
  color: var(--accent-orange);
  transform: translateY(-2px);
}

.btn-pill {
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-normal);
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-orange), #EF5350);
  color: white;
  box-shadow: 0 4px 14px rgba(232, 106, 51, 0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 106, 51, 0.5);
  color: white;
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-tertiary);
  color: var(--accent-orange);
}

/* Streak Badge */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  background: var(--accent-amber-light);
  border: 1px solid var(--accent-amber);
  color: #D97706;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

/* Mobile Hamburger Toggle */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-primary);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  padding: 4.5rem 0 3.5rem;
  background: radial-gradient(circle at 10% 20%, rgba(242, 153, 74, 0.08) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(107, 78, 113, 0.08) 0%, transparent 40%);
  overflow: hidden;
}

/* A quiet, storybook-like sense of depth behind the GSAP entrance sequence. */
.hero-section::before,
.hero-section::after {
  position: absolute;
  z-index: 0;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  content: '';
  filter: blur(2px);
  pointer-events: none;
}

.hero-section::before {
  top: -13rem;
  right: 8%;
  background: radial-gradient(circle, rgba(242, 153, 74, 0.16), transparent 68%);
}

.hero-section::after {
  bottom: -15rem;
  left: 3%;
  background: radial-gradient(circle, rgba(107, 78, 113, 0.13), transparent 68%);
}

.hero-grid { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 3rem;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  background: var(--accent-orange-light);
  color: var(--accent-orange);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.hero-title {
  font-size: 3.25rem;
  line-height: 1.18;
  margin-bottom: 1.25rem;
  letter-spacing: -0.5px;
}

.hero-title span {
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  max-width: 540px;
}

/* Hero Search Bar */
.hero-search-box {
  position: relative;
  max-width: 580px;
  margin-bottom: 1.75rem;
}

.hero-search-input {
  width: 100%;
  padding: 1.15rem 1.5rem 1.15rem 3.25rem;
  font-size: 1.05rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
}

.hero-search-input:focus {
  outline: none;
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 4px rgba(232, 106, 51, 0.18), var(--shadow-md);
}

.search-icon-left {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.2rem;
}

.hero-search-btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--accent-orange);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.hero-search-btn:hover {
  background: var(--accent-orange-hover);
}

/* Quick Filter Pills */
.hero-quick-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.tag-pill {
  padding: 0.35rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tag-pill:hover, .tag-pill.active {
  background: var(--accent-orange);
  color: white;
  border-color: var(--accent-orange);
}

/* Hero Illustration Container */
.hero-illustration {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.storybook-card-display {
  position: relative;
  width: min(100%, 330px);
  height: 530px;
  background: var(--bg-card);
  border-radius: 5px 14px 14px 5px;
  border: 1px solid var(--border-color);
  box-shadow: -8px 0 0 rgba(107, 78, 113, 0.55), -12px 4px 0 rgba(107, 78, 113, 0.16), var(--shadow-lg);
  padding: 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  animation: book-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1) both, book-breathe 5s ease-in-out 900ms infinite;
}

.hero-illustration:hover .storybook-card-display {
  animation-play-state: paused;
  transform: translateY(-8px) rotate(-0.6deg);
}

.storybook-card-display::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 0;
  width: 9px;
  background: linear-gradient(90deg, rgba(44, 34, 30, 0.32), transparent);
  pointer-events: none;
}

.storybook-card-display > img {
  width: 100% !important;
  height: 215px !important;
  border-radius: 0 !important;
  object-fit: cover;
  border-bottom: 4px solid var(--accent-orange);
  transition: transform 500ms ease;
}

.hero-illustration:hover .storybook-card-display > img { transform: scale(1.045); }

.storybook-card-display > div:not(.hero-floating-element) {
  padding: 0.9rem 1.15rem 0;
}

.storybook-card-display > div:not(.hero-floating-element) h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.storybook-card-display > div:not(.hero-floating-element) p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.storybook-card-display > .btn-pill {
  width: calc(100% - 2.3rem) !important;
  margin: 0.7rem 1.15rem 0;
  order: 4;
}

.hero-floating-element {
  position: absolute;
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.75rem;
  background: var(--bg-glass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  z-index: 10;
}

.float-top-right {
  top: 12px;
  right: 12px;
  max-width: calc(100% - 24px);
  background: linear-gradient(110deg, rgba(44, 34, 30, 0.9), rgba(107, 78, 113, 0.88), rgba(44, 34, 30, 0.9));
  background-size: 200% 100%;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  animation: badge-shimmer 4s linear infinite;
}

.float-bottom-left {
  position: relative;
  inset: auto;
  align-self: flex-start;
  order: 3;
  margin: 0.65rem 1.15rem 0;
  background: var(--accent-amber-light);
  border-color: rgba(242, 153, 74, 0.35);
  color: var(--text-primary);
  animation: none;
}

/* Most-viewed stories in the home hero */
.hero-top-stories {
  width: min(100%, 400px);
  padding: 1.1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

[data-theme="dark"] .hero-top-stories { background: rgba(46, 38, 52, 0.76); }

.hero-top-stories-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  color: var(--accent-orange);
}

.hero-top-stories-heading h2 { margin: 0; color: var(--text-primary); font-size: 1.02rem; }

.hero-top-stories-list { display: grid; gap: 0.7rem; }

.hero-top-story {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 82px;
  padding: 0.55rem 0.6rem 0.55rem 0.75rem;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-top-story:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hero-top-story img { width: 58px; height: 70px; border-radius: 8px; object-fit: cover; }
.hero-story-rank {
  position: absolute;
  z-index: 1;
  top: 0.3rem;
  left: 0.35rem;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-orange);
  box-shadow: 0 2px 5px rgba(76, 42, 30, 0.24);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
.hero-top-story-rank-1 .hero-story-rank { background: #d69a1d; }
.hero-top-story-rank-2 .hero-story-rank { background: #86909b; }
.hero-top-story-rank-3 .hero-story-rank { background: #a86f42; }
.hero-top-story-copy { min-width: 0; }
.hero-top-story-copy .tag-pill { display: inline-block; padding: 0.14rem 0.48rem; font-size: 0.64rem; }
.hero-top-story-copy h3 { display: -webkit-box; margin: 0.2rem 0; overflow: hidden; font-size: 0.92rem; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.hero-top-story-copy p { margin: 0; color: var(--text-secondary); font-size: 0.72rem; }
.hero-top-story-link { padding: 0.38rem 0.62rem; border-radius: var(--radius-pill); background: var(--accent-orange); color: #fff; font-size: 0.72rem; font-weight: 700; }
.hero-top-story-link:hover { background: var(--accent-orange-hover); color: #fff; }

/* Three popular stories arranged like a naturally stacked set of notebooks. */
.hero-top-stories { padding: 1.15rem 1rem 1rem; }
.hero-top-stories-list { position: relative; height: 292px; padding: 0.15rem 0.45rem; }
.hero-top-story {
  --notebook-tilt: 0deg;
  position: absolute;
  left: 0.45rem;
  right: 0.45rem;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  min-height: 96px;
  padding: 0.55rem 0.65rem 0.55rem 0.85rem;
  transform: rotate(var(--notebook-tilt));
  transform-origin: center;
}
.hero-top-story:nth-child(1) { --notebook-tilt: -2.1deg; top: 0; z-index: 3; }
.hero-top-story:nth-child(2) { --notebook-tilt: 1.35deg; top: 89px; z-index: 2; }
.hero-top-story:nth-child(3) { --notebook-tilt: -0.9deg; top: 178px; z-index: 1; }
.hero-top-story::after { content: ''; position: absolute; inset: 4px auto 4px 4px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, rgba(107, 78, 113, 0.6), rgba(107, 78, 113, 0.1)); }
.hero-top-story:hover { transform: translateY(-5px) rotate(var(--notebook-tilt)); z-index: 4; }
.hero-top-story img { width: 68px; height: 82px; border-radius: 7px 10px 10px 7px; box-shadow: -3px 0 0 rgba(107, 78, 113, 0.22); }
.hero-top-story-copy h3 { font-size: 0.9rem; }
.hero-top-story-link { position: relative; z-index: 1; }

/* Book-cover composition: no surrounding panel or horizontal cards. */
.hero-top-stories { width: min(100%, 420px); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
[data-theme="dark"] .hero-top-stories { background: transparent; }
.hero-top-stories-heading { justify-content: center; margin: 0 0 0.7rem; }
.hero-top-stories-list { height: 350px; padding: 0; }
.hero-top-story {
  width: 190px;
  height: 265px;
  min-height: 265px;
  grid-template-columns: 1fr;
  grid-template-rows: 126px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0;
  padding: 0.5rem 0.55rem 0.65rem;
  overflow: hidden;
  border: 0;
  border-radius: 5px 12px 12px 5px;
  background: var(--bg-card);
  box-shadow: -7px 0 0 rgba(107, 78, 113, 0.45), -10px 4px 0 rgba(107, 78, 113, 0.14), 0 15px 24px rgba(53, 37, 50, 0.22);
}
.hero-top-story:nth-child(1) { top: 4px; left: calc(50% - 95px); right: auto; --notebook-tilt: -1.5deg; z-index: 3; }
.hero-top-story:nth-child(2) { top: 49px; left: calc(50% - 174px); right: auto; --notebook-tilt: -12deg; z-index: 2; }
.hero-top-story:nth-child(3) { top: 53px; left: calc(50% - 16px); right: auto; --notebook-tilt: 11deg; z-index: 1; }
.hero-top-story::after { inset: 0 auto 0 0; width: 8px; border-radius: 5px 0 0 5px; background: linear-gradient(90deg, rgba(44, 34, 30, 0.34), rgba(44, 34, 30, 0)); }
.hero-top-story img { width: 100%; height: 126px; border: 0; border-bottom: 3px solid var(--accent-orange); border-radius: 2px 8px 0 0; box-shadow: none; object-fit: cover; }
.hero-story-rank { top: 0.55rem; left: 0.6rem; }
.hero-top-story-copy { display: block; width: 100%; padding: 0.5rem 0.2rem 0; }
.hero-top-story-copy .tag-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-top-story-copy h3 { margin: 0.3rem 0 0.25rem; font-size: 0.86rem; -webkit-line-clamp: 2; }
.hero-top-story-copy p { font-size: 0.7rem; }
.hero-top-story-link { justify-self: stretch; margin: 0.4rem 0.2rem 0; padding: 0.4rem; text-align: center; }
.hero-top-story:hover { transform: translateY(-8px) rotate(var(--notebook-tilt)); }

.hero-top-story { will-change: transform, opacity; }

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

@media (max-width: 430px) {
  .hero-top-stories-list { height: 320px; transform: scale(0.9); transform-origin: top center; margin-bottom: -32px; }
}

/* Covers take the full book face; details stay as a small readable overlay. */
.hero-top-stories-list { height: 385px; }
.hero-top-story {
  width: 205px;
  height: 295px;
  min-height: 295px;
  display: block;
  padding: 0;
  isolation: isolate;
  background: #4d3c51;
}
.hero-top-story:nth-child(1) { top: 5px; left: calc(50% - 102px); --notebook-tilt: -1.3deg; }
.hero-top-story:nth-child(2) { top: 72px; left: calc(50% - 191px); --notebook-tilt: -14deg; }
.hero-top-story:nth-child(3) { top: 74px; left: calc(50% - 14px); --notebook-tilt: 13deg; }
.hero-top-story img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; object-fit: cover; }
.hero-top-story::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 30%, rgba(22, 14, 25, 0.15) 48%, rgba(22, 14, 25, 0.9) 100%); }
.hero-top-story::after { z-index: 3; }
.hero-story-rank { z-index: 4; }
.hero-top-story-copy { position: absolute; z-index: 2; right: 0.55rem; bottom: 2.35rem; left: 0.7rem; padding: 0; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
.hero-top-story-copy .tag-pill { display: none; }
.hero-top-story-copy h3 { margin: 0; color: #fff; font-size: 0.94rem; line-height: 1.25; }
.hero-top-story-copy p { margin-top: 0.3rem; color: rgba(255, 255, 255, 0.88); }
.hero-top-story-link { position: absolute; z-index: 2; right: 0.55rem; bottom: 0.55rem; left: 0.7rem; margin: 0; padding: 0.38rem; background: rgba(232, 106, 51, 0.95); box-shadow: 0 3px 8px rgba(20, 10, 20, 0.28); }

@media (max-width: 430px) {
  .hero-top-stories-list { height: 345px; transform: scale(0.88); transform-origin: top center; margin-bottom: -46px; }
}

/* Let each cover breathe: only a light edge overlap remains. */
.hero-top-stories-list { height: 335px; }
.hero-top-story { width: 155px; height: auto; min-height: 0; aspect-ratio: 4 / 6; }
.hero-top-story:nth-child(1) { top: 7px; left: calc(50% - 77px); --notebook-tilt: -1deg; }

/* Layered, warm ambient shadows for a more natural physical-book depth. */
.hero-top-story {
  box-shadow:
    -4px 0 0 rgba(80, 57, 43, 0.16),
    -7px 2px 2px rgba(80, 57, 43, 0.08),
    0 5px 8px rgba(48, 34, 25, 0.16),
    0 17px 25px rgba(48, 34, 25, 0.12);
}
.hero-top-story:nth-child(1) { box-shadow: -4px 0 0 rgba(80, 57, 43, 0.16), -7px 2px 2px rgba(80, 57, 43, 0.08), 0 8px 11px rgba(48, 34, 25, 0.18), 0 22px 28px rgba(48, 34, 25, 0.14); }
.hero-top-story:nth-child(2), .hero-top-story:nth-child(3) { box-shadow: -4px 0 0 rgba(80, 57, 43, 0.14), -6px 2px 2px rgba(80, 57, 43, 0.07), 0 5px 8px rgba(48, 34, 25, 0.13), 0 15px 22px rgba(48, 34, 25, 0.1); }
.hero-top-story:nth-child(2) { top: 55px; left: calc(50% - 214px); --notebook-tilt: -10deg; }
.hero-top-story:nth-child(3) { top: 57px; left: calc(50% + 69px); --notebook-tilt: 9deg; }
.hero-top-story-copy { right: 0.45rem; bottom: 2.15rem; left: 0.6rem; }
.hero-top-story-copy h3 { font-size: 0.78rem; }
.hero-top-story-copy p { font-size: 0.64rem; }
.hero-top-story-link { right: 0.45rem; bottom: 0.45rem; left: 0.6rem; font-size: 0.66rem; }

@media (max-width: 430px) {
  .hero-top-stories-list { height: 310px; transform: scale(0.96); margin-bottom: -12px; }
}

@keyframes book-reveal {
  from { opacity: 0; filter: blur(6px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes book-breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(0.45deg); }
}

@keyframes badge-shimmer {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

/* --------------------------------------------------------------------------
   Interactive Gamification Widgets Section
   -------------------------------------------------------------------------- */
.widgets-section {
  padding: 2.5rem 0;
}

.widgets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.widget-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.widget-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.widget-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.widget-grandma::before { background: linear-gradient(90deg, var(--accent-orange), var(--accent-amber)); }
.widget-wheel::before { background: linear-gradient(90deg, var(--accent-purple), #E056FD); }
.widget-mood::before { background: linear-gradient(90deg, var(--accent-green), #00B894); }

.widget-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.widget-title {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

.widget-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

/* --------------------------------------------------------------------------
   Story Card Grid & Curated Carousels
   -------------------------------------------------------------------------- */
.section-padding {
  padding: 3.5rem 0;
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.section-title {
  font-size: 2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.section-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.story-carousel-wrap { position: relative; }
.story-grid.story-carousel {
  display: flex;
  grid-template-columns: none;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.35rem 0.35rem 1rem;
  scrollbar-width: none;
}
.story-grid.story-carousel::-webkit-scrollbar { display: none; }
.story-grid.story-carousel .story-card {
  flex: 0 0 clamp(220px, 22vw, 280px);
  scroll-snap-align: start;
}
.story-carousel-control {
  position: absolute;
  top: 42%;
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}
.story-carousel-control:hover { background: var(--accent-orange); color: #fff; transform: translateY(-2px); }
.story-carousel-control.is-previous { left: -18px; }
.story-carousel-control.is-next { right: -18px; }

/* Story Card Architecture */
.story-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 6px 14px 14px 6px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  position: relative;
}

.story-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-orange);
  box-shadow: -5px 0 0 color-mix(in srgb, var(--accent-orange) 55%, transparent), var(--shadow-md);
}

.card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-tertiary);
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.story-card:hover .card-thumb img {
  transform: scale(1.06);
}

/* Card Badges */
.card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 2;
}

.badge-age { background: rgba(44, 34, 30, 0.75); backdrop-filter: blur(4px); }
.badge-kids { background: var(--accent-green); }
.badge-ya { background: var(--accent-purple); }
.badge-adult { background: #D9534F; }

.card-bookmark-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all var(--transition-fast);
}

.card-bookmark-btn:hover, .card-bookmark-btn.saved {
  background: var(--accent-orange);
  color: white;
}

/* Card Body */
.card-body {
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

.card-meta-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.card-title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-excerpt {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.read-time-pill {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.author-info-mini {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Story Detail Page Layout
   -------------------------------------------------------------------------- */
.detail-banner {
  padding: 3rem 0;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
  border-bottom: 1px solid var(--border-color);
}

.detail-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: flex-start;
}

.detail-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 2px solid var(--bg-card);
}

.detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-header-content h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.detail-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.detail-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.detail-actions-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}

/* SXO & GEO Knowledge Sections */
.sxo-section-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.sxo-box-title {
  font-size: 1.1rem;
  color: var(--accent-orange);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.character-avatars {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.character-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 500;
}

/* FAQ Accordion Component */
.faq-accordion {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-card);
}

.faq-question {
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-answer {
  padding: 0 1.25rem 1rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
  display: none;
}

.faq-item.active .faq-answer {
  display: block;
}

/* --------------------------------------------------------------------------
   Search Page & Filters
   -------------------------------------------------------------------------- */
.search-results-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  padding: 2.5rem 0;
}

.filter-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  height: fit-content;
}

.filter-group {
  margin-bottom: 1.5rem;
}

.filter-group h4 {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  cursor: pointer;
}

/* Mobile-first catalog search */
.catalog-page { padding: 1.25rem 0 4rem; }
.catalog-container { max-width: 1180px; }
.catalog-hero { padding: clamp(1.35rem, 3vw, 2.25rem); border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: radial-gradient(circle at 92% 0%, rgba(242,153,74,.18), transparent 28%), var(--bg-card); }
.catalog-eyebrow { display: none; }
.catalog-hero h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.4rem); letter-spacing: -.035em; }
.catalog-hero p { max-width: 610px; margin: .35rem 0 1rem; color: var(--text-secondary); font-size: .95rem; }
.catalog-search { display: flex; align-items: center; gap: .7rem; max-width: 720px; min-height: 58px; padding: .45rem .5rem .45rem 1rem; border: 2px solid transparent; border-radius: var(--radius-pill); background: var(--bg-card); box-shadow: var(--shadow-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.catalog-search:focus-within { border-color: var(--accent-orange); box-shadow: 0 0 0 4px rgba(232,106,51,.16), var(--shadow-md); }
.catalog-search > span { font-size: 1.15rem; }
.catalog-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 1rem; }
.catalog-search input::-webkit-search-cancel-button { display: none; }
.catalog-search button { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 0; border-radius: 50%; background: var(--bg-secondary); color: var(--text-secondary); font-size: 1.45rem; line-height: 1; cursor: pointer; }
.catalog-search button:hover { color: #fff; background: var(--accent-orange); }
.catalog-quick-search { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; color: var(--text-muted); font-size: .78rem; }
.catalog-quick-search button { min-height: 28px; padding: .2rem .6rem; border: 0; border-radius: var(--radius-pill); background: var(--bg-secondary); color: var(--text-secondary); font: inherit; cursor: pointer; }
.catalog-quick-search button:hover { background: var(--accent-orange-light); color: var(--accent-orange); }
.catalog-category-section { padding: 1.5rem 0 1.15rem; }
.catalog-section-heading, .catalog-results-heading, .catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.catalog-section-heading h2, .catalog-results-heading h2 { margin: 0; font-size: 1.3rem; }
.catalog-section-heading p, .catalog-results-heading p { margin: .15rem 0 0; color: var(--text-secondary); font-size: .9rem; }
.catalog-reset { border: 0; background: transparent; color: var(--accent-orange); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.catalog-category-chips { display: flex; gap: .65rem; overflow-x: auto; margin: 1rem -1.25rem 0; padding: .25rem 1.25rem .8rem; scrollbar-width: none; }
.catalog-category-chips::-webkit-scrollbar { display: none; }
.catalog-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; flex: 0 0 auto; padding: .55rem .85rem; border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: var(--bg-card); color: var(--text-secondary); font-size: .9rem; font-weight: 650; cursor: pointer; transition: all var(--transition-fast); }
.catalog-chip input { position: absolute; opacity: 0; pointer-events: none; }
.catalog-chip:hover { border-color: var(--accent-orange); color: var(--accent-orange); }
.catalog-chip.is-selected { border-color: var(--accent-orange); background: var(--accent-orange); color: #fff; box-shadow: 0 5px 12px rgba(232,106,51,.24); }
.catalog-toolbar { padding: .85rem 0 1.25rem; border-top: 1px solid var(--border-color); }
.catalog-more-filters { position: relative; }
.catalog-more-filters summary { display: flex; align-items: center; gap: .35rem; list-style: none; min-height: 40px; padding: .5rem .75rem; border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: var(--bg-card); font-size: .9rem; font-weight: 650; cursor: pointer; }
.catalog-more-filters summary::-webkit-details-marker { display: none; }
.catalog-more-filters summary span { margin-left: .2rem; transition: transform var(--transition-fast); }
.catalog-more-filters[open] summary span { transform: rotate(180deg); }
.catalog-age-options { position: absolute; z-index: 10; top: calc(100% + .5rem); left: 0; display: grid; min-width: 250px; gap: .15rem; padding: .65rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); box-shadow: var(--shadow-lg); }
.catalog-age-options strong { padding: .35rem .5rem .2rem; color: var(--text-primary); font-size: .82rem; }.catalog-age-options label { padding: .5rem; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); font-size: .9rem; }
.catalog-age-options label:hover { background: var(--bg-secondary); color: var(--accent-orange); }
.catalog-sort { display: flex; align-items: center; gap: .35rem; color: var(--text-secondary); font-size: .86rem; font-weight: 650; }
.catalog-sort select { min-height: 40px; padding: .45rem .65rem; border: 1px solid var(--border-color); border-radius: var(--radius-pill); background: var(--bg-card); color: var(--text-primary); font: inherit; cursor: pointer; }
.catalog-results { min-width: 0; }
.catalog-story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.catalog-empty { grid-column: 1 / -1; padding: 3.25rem 1.25rem; border: 1px dashed var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); text-align: center; }
.catalog-empty > span { display: block; font-size: 2rem; }.catalog-empty h3 { margin: .5rem 0 .2rem; }.catalog-empty p { margin: 0 0 1rem; color: var(--text-secondary); }

/* Database-backed catalog: compact book shelf */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.library-page { min-height:72vh; padding:2rem 0 4.5rem; }.library-container { max-width:1160px; }
.library-hero { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2rem 2.25rem; margin-bottom:2rem; overflow:hidden; border:1px solid var(--border-color); border-radius:var(--radius-lg); background:radial-gradient(circle at 90% 15%,rgba(242,167,74,.22),transparent 27%),linear-gradient(125deg,var(--bg-card),var(--bg-secondary)); position:relative; }.library-hero::after { content:'✦'; position:absolute; right:6%; bottom:-2.4rem; color:rgba(232,106,51,.11); font-size:9rem; line-height:1; transform:rotate(12deg); pointer-events:none; }.library-hero>div,.library-browse-button { position:relative; z-index:1; }.library-hero h1 { margin:.3rem 0 .45rem; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.04em; }.library-hero p:not(.eyebrow) { max-width:580px; margin:0; color:var(--text-secondary); font-size:1rem; }.library-browse-button { flex:0 0 auto; padding:.75rem 1.1rem; }.library-browse-button span { font-size:1.25rem; line-height:.7; }
.library-collection { padding:1.5rem; border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-card); box-shadow:var(--shadow-sm); }.library-section-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.35rem; }.library-section-header h2 { margin:0; font-size:1.35rem; }.library-section-header p { margin:.2rem 0 0; color:var(--text-secondary); font-size:.9rem; }.library-count { display:inline-flex; align-items:center; gap:.4rem; min-width:52px; justify-content:center; padding:.45rem .7rem; border-radius:var(--radius-pill); background:var(--accent-orange-light); color:var(--accent-orange); font-size:.9rem; font-weight:800; }.library-story-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1.25rem; }.library-story-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid var(--border-color); border-radius:8px 16px 16px 8px; background:var(--bg-card); color:var(--text-primary); box-shadow:var(--shadow-sm); transition:transform var(--transition-normal),box-shadow var(--transition-normal),border-color var(--transition-normal); }.library-story-card:hover { color:var(--text-primary); transform:translateY(-5px); border-color:var(--accent-orange); box-shadow:-5px 0 0 rgba(232,106,51,.45),var(--shadow-md); }.library-story-cover { position:relative; display:grid; place-items:center; aspect-ratio:4/5; overflow:hidden; background:linear-gradient(145deg,#513768,#e86a33 62%,#f1b65d); color:#fff; font-size:3rem; }.library-story-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(20,14,35,.38)); pointer-events:none; }.library-story-cover img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-normal); }.library-story-card:hover .library-story-cover img { transform:scale(1.05); }.library-read-badge { position:absolute; z-index:1; right:.7rem; bottom:.7rem; padding:.3rem .55rem; border:1px solid rgba(255,255,255,.3); border-radius:var(--radius-pill); background:rgba(34,24,42,.72); backdrop-filter:blur(6px); color:#fff; font-size:.72rem; font-weight:700; }.library-story-details { display:grid; gap:.45rem; padding:1rem 1rem 1.05rem; }.library-story-details h3 { display:-webkit-box; overflow:hidden; margin:0; font-size:1.08rem; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.library-story-details p { display:-webkit-box; overflow:hidden; min-height:2.7em; margin:0; color:var(--text-secondary); font-size:.84rem; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.library-continue { margin-top:.15rem; color:var(--accent-orange); font-size:.85rem; font-weight:800; }.library-continue b { display:inline-block; margin-left:.2rem; transition:transform var(--transition-fast); }.library-story-card:hover .library-continue b { transform:translateX(3px); }.library-empty-state { max-width:620px; margin:2rem auto; padding:3.5rem 1.5rem; border:1px dashed var(--border-color); border-radius:var(--radius-lg); background:var(--bg-card); text-align:center; }.library-empty-icon { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 1rem; border-radius:50%; background:var(--accent-orange-light); font-size:1.8rem; }.library-empty-state h2 { font-size:1.4rem; }.library-empty-state p { max-width:430px; margin:.45rem auto 1.25rem; color:var(--text-secondary); }
@media (max-width:640px) { .library-page { padding-top:1rem; }.library-hero { align-items:flex-start; flex-direction:column; gap:1.25rem; padding:1.5rem; margin-inline:-.15rem; }.library-browse-button { width:100%; justify-content:center; }.library-collection { padding:1rem; }.library-story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }.library-story-details { padding:.8rem; }.library-story-details h3 { font-size:.98rem; }.library-story-details p { min-height:0; font-size:.78rem; }.library-read-badge { right:.45rem; bottom:.45rem; font-size:.64rem; }.library-empty-state { margin:1rem 0; padding:2.75rem 1.25rem; } }
.library-intro { margin-bottom: .95rem; }.library-intro p { margin:0 0 .2rem; color:var(--accent-orange); font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.library-intro h1 { margin:0; font-size:clamp(1.75rem,4vw,2.45rem); letter-spacing:-.035em; }
.library-search { display:flex; align-items:center; gap:.65rem; max-width:760px; min-height:58px; padding:.42rem .45rem .42rem 1rem; border:1px solid var(--border-color); border-radius:var(--radius-pill); background:var(--bg-card); box-shadow:var(--shadow-sm); }.library-search:focus-within { border-color:var(--accent-orange); box-shadow:0 0 0 4px rgba(232,106,51,.13); }.library-search>span { color:var(--text-muted); font-size:1.55rem; line-height:1; }.library-search input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--text-primary); font:inherit; }.library-search button { min-height:42px; padding:.55rem 1rem; border:0; border-radius:var(--radius-pill); background:var(--accent-orange); color:#fff; font:inherit; font-size:.9rem; font-weight:700; cursor:pointer; }.library-search button:hover { background:var(--accent-orange-hover); }
.library-filter-row { display:flex; gap:.55rem; overflow-x:auto; margin:1rem -1.25rem 0; padding:.1rem 1.25rem .8rem; scrollbar-width:none; }.library-filter-row::-webkit-scrollbar { display:none; }.library-filter { flex:0 0 auto; min-height:38px; padding:.48rem .8rem; border:1px solid var(--border-color); border-radius:var(--radius-pill); background:var(--bg-card); color:var(--text-secondary); font-size:.88rem; font-weight:650; }.library-filter:hover { border-color:var(--accent-orange); color:var(--accent-orange); }.library-filter.is-active { border-color:var(--accent-orange); background:var(--accent-orange); color:#fff; }
.library-results-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0 1.1rem; border-top:1px solid var(--border-color); }.library-results-bar>p { margin:0; color:var(--text-secondary); font-size:.9rem; }.library-results-bar strong { color:var(--text-primary); }.library-options { position:relative; }.library-options summary { display:flex; align-items:center; gap:.35rem; padding:.45rem .65rem; border:1px solid var(--border-color); border-radius:var(--radius-pill); background:var(--bg-card); color:var(--text-secondary); font-size:.82rem; font-weight:700; cursor:pointer; list-style:none; }.library-options summary::-webkit-details-marker { display:none; }.library-options[open] summary span { transform:rotate(180deg); }.library-options>div { position:absolute; z-index:20; right:0; top:calc(100% + .45rem); display:grid; min-width:190px; padding:.55rem; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-card); box-shadow:var(--shadow-lg); }.library-options p { margin:.35rem .45rem .2rem; color:var(--text-muted); font-size:.72rem; font-weight:800; }.library-options a { padding:.45rem; border-radius:var(--radius-sm); color:var(--text-secondary); font-size:.86rem; }.library-options a:hover,.library-options a.is-active { background:var(--accent-orange-light); color:var(--accent-orange); }
.library-book-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem; }.library-book-card { display:block; min-width:0; color:var(--text-primary); }.library-book-cover-link { display:block; color:inherit; }.library-book-cover-link:hover { color:inherit; }.library-book-cover { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:276px; overflow:hidden; padding:1.2rem 1.05rem 1.1rem 1.35rem; border:1px solid rgba(47,28,26,.2); border-radius:5px 13px 13px 5px; box-shadow:-7px 0 0 rgba(52,40,91,.62), -10px 3px 0 rgba(52,40,91,.12), 0 11px 20px rgba(49,33,28,.14); color:#fff; isolation:isolate; transition:transform var(--transition-normal),box-shadow var(--transition-normal); }.library-book-card:hover .library-book-cover { transform:translateY(-5px) rotate(-.45deg); box-shadow:-7px 0 0 rgba(52,40,91,.7), -10px 3px 0 rgba(52,40,91,.15), 0 17px 28px rgba(49,33,28,.2); }.library-book-cover::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(145deg,rgba(255,255,255,.16),transparent 42%,rgba(0,0,0,.23)); }.library-book-cover::after { content:''; position:absolute; left:0; top:0; bottom:0; width:10px; background:linear-gradient(90deg,rgba(22,14,29,.4),transparent); }.library-book-cover img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; }.library-book-cover strong { display:-webkit-box; overflow:hidden; margin-top:.45rem; color:#fff; font-family:var(--font-heading); font-size:1.28rem; line-height:1.24; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-shadow:0 2px 5px rgba(0,0,0,.28); }.library-book-cover small { margin-top:.4rem; overflow:hidden; color:rgba(255,255,255,.82); font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }.library-book-type { align-self:flex-start; padding:.25rem .52rem; border:1px solid rgba(255,255,255,.28); border-radius:var(--radius-pill); background:rgba(20,14,35,.18); font-size:.7rem; font-weight:700; }.tone-kids-picture_story { background:linear-gradient(145deg,#e86a33,#f2a74a 54%,#714d75); }.tone-kids-manga { background:linear-gradient(145deg,#3a2f67,#77568b 58%,#f08a5d); }.tone-kids-doujin { background:linear-gradient(145deg,#b94c6a,#e87870 58%,#f2b65b); }.tone-kids-novel { background:linear-gradient(145deg,#295b70,#488c86 58%,#d6a75b); }.tone-pet-picture_story { background:linear-gradient(145deg,#ad663a,#d99b55 58%,#6a4d69); }.tone-pet-manga { background:linear-gradient(145deg,#3f526c,#66938c 58%,#edb35c); }.tone-pet-doujin { background:linear-gradient(145deg,#8d4c6c,#d46f7d 58%,#dca352); }.tone-pet-novel { background:linear-gradient(145deg,#4c5871,#66768d 58%,#c4775e); }
.library-book-info { padding:.85rem .15rem .2rem; }.library-book-info h2 { overflow:hidden; margin:0; font-size:1rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }.library-book-info p { display:-webkit-box; min-height:2.9em; overflow:hidden; margin:.3rem 0 .55rem; color:var(--text-secondary); font-size:.82rem; line-height:1.45; -webkit-line-clamp:2; -webkit-box-orient:vertical; }.library-book-info div { display:flex; flex-wrap:wrap; gap:.35rem; }.library-book-info span { padding:.19rem .46rem; border-radius:var(--radius-pill); background:var(--bg-secondary); color:var(--text-secondary); font-size:.7rem; font-weight:650; }.library-empty { padding:4rem 1.25rem; border:1px dashed var(--border-color); border-radius:var(--radius-md); background:var(--bg-card); text-align:center; }.library-empty>span { display:block; font-size:2.2rem; }.library-empty h2 { margin:.5rem 0 .2rem; }.library-empty p { margin:0 0 1rem; color:var(--text-secondary); }
.library-book-info .library-book-actions { display:grid; grid-template-columns:1fr; gap:.42rem; margin-top:.75rem; }.library-book-actions button { display:flex; width:100%; min-height:34px; align-items:center; justify-content:center; padding:.38rem .5rem; border-radius:var(--radius-pill); font:inherit; font-size:.72rem; font-weight:750; text-align:center; cursor:pointer; }.library-action-info { border:1px solid var(--border-color); color:var(--text-secondary); background:var(--bg-card); }.library-action-info:hover { border-color:var(--accent-orange); color:var(--accent-orange); }.library-action-read { color:#fff; background:var(--accent-orange); border:1px solid var(--accent-orange); }.library-action-read:hover { color:#fff; background:var(--accent-orange-hover); }
.library-book-cover,.library-book-cover.is-tall-cover { min-height:0; aspect-ratio:4/6; }.library-book-cover.is-tall-cover img { object-position:center top; }
.library-cover-rating,.library-cover-views { position:absolute; z-index:2; top:.85rem; display:inline-flex; align-items:center; min-height:29px; padding:.22rem .52rem; border:1px solid rgba(255,255,255,.28); border-radius:var(--radius-pill); background:rgba(30,21,38,.28); box-shadow:0 2px 7px rgba(0,0,0,.12); color:#fff; font-size:.72rem; font-weight:750; backdrop-filter:blur(5px); }.library-cover-rating { left:.85rem; color:#ffe099; }.library-cover-views { right:.85rem; color:#fff; }

/* --------------------------------------------------------------------------
   User Library & Admin Dashboard
   -------------------------------------------------------------------------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.stat-val {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-orange);
}

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

/* Data Table */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.admin-table th, .admin-table td {
  padding: 0.9rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.88rem;
}

.admin-table th {
  background: var(--bg-secondary);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Footer Section
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 4rem 0 2rem;
  margin-top: 4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr) 1.2fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.footer-col h4 {
  font-size: 1.05rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-col a {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.footer-col a:hover {
  color: var(--accent-orange);
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.card-meta-top .rating { color: #C98312; font-weight: 700; }
.book-pages { color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.social-links { display: flex; gap: 0.65rem; }
.social-link { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-tertiary); color: var(--text-primary); font-weight: 700; font-size: 1rem; }
.social-link:hover { background: var(--accent-orange); color: #fff; transform: translateY(-2px); }
.install-app-btn[hidden] { display: none; }
.mobile-menu-actions { display: none; }

body.user-login-open { overflow: hidden; }
.user-login-overlay { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 1.25rem; }
.user-login-overlay[hidden] { display: none; }
.user-login-backdrop { position: absolute; inset: 0; background: rgba(35, 27, 23, 0.52); backdrop-filter: blur(5px); }
.user-login-dialog { position: relative; z-index: 1; width: min(100%, 440px); max-height: calc(100vh - 2.5rem); overflow-y: auto; padding: 2rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: book-reveal 220ms ease-out; }
.user-login-close { position: absolute; top: 0.8rem; right: 0.9rem; width: 36px; height: 36px; border: 0; border-radius: 50%; color: var(--text-secondary); background: var(--bg-secondary); font-size: 1.4rem; cursor: pointer; }
.user-login-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.5rem; padding: 0.25rem; background: var(--bg-secondary); border-radius: var(--radius-pill); }
.user-login-tabs button { flex: 1; padding: 0.55rem; background: transparent; border: 0; border-radius: var(--radius-pill); color: var(--text-secondary); font: inherit; cursor: pointer; }
.user-login-tabs button.is-active { background: var(--bg-card); color: var(--accent-orange); box-shadow: var(--shadow-sm); font-weight: 700; }
.user-login-dialog h2 { font-size: 1.6rem; margin-bottom: 0.35rem; }
.user-login-dialog p { color: var(--text-secondary); margin-bottom: 1.25rem; }
.user-login-dialog form { display: grid; gap: 0.85rem; }
.user-login-dialog form[hidden] { display: none !important; }
.user-login-dialog label { display: grid; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); }
.user-login-dialog input { padding: 0.75rem 0.85rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-primary); color: var(--text-primary); }
.user-login-dialog .btn-pill { justify-content: center; margin-top: 0.35rem; padding: 0.75rem; }
.user-login-error { padding: 0.7rem 0.8rem; border-radius: var(--radius-sm); background: #fff0ee; color: #a12f25; font-size: 0.9rem; }
.user-auth-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--text-muted); font-size: 0.8rem; }
.user-auth-divider::before, .user-auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--border-color); }
.google-login-button { display: flex; justify-content: center; align-items: center; gap: 0.65rem; padding: 0.72rem; border: 1px solid var(--border-color); border-radius: var(--radius-pill); color: var(--text-primary); font-weight: 600; background: var(--bg-card); }
.google-login-button strong { display: grid; place-items: center; width: 21px; height: 21px; color: #4285F4; font-size: 1.05rem; }
.user-demo-account { margin: 0; text-align: center; font-size: 0.78rem; color: var(--text-muted) !important; }

/* User channel */
.profile-page { padding-bottom: 4rem; }.profile-cover { height: 260px; overflow: hidden; position: relative; background: linear-gradient(125deg,#34285b,#725071 52%,#e86a33 130%); }.profile-cover::after { content:''; position:absolute; inset:40% -5% -55%; border-radius:50%; background:rgba(255,255,255,.12); transform:rotate(-7deg); }.profile-cover-stars { position:absolute; z-index:1; right:12%; top:22%; font-size:2.2rem; letter-spacing:.5rem; color:#ffe7a3; }.profile-intro { display:flex; align-items:end; gap:1.35rem; position:relative; z-index:1; margin-top:-4rem; padding-bottom:2rem; }.profile-avatar { display:grid; place-items:center; width:130px; height:130px; flex:0 0 130px; border:5px solid var(--bg-primary); border-radius:50%; background:linear-gradient(145deg,var(--accent-orange),var(--accent-purple)); box-shadow:var(--shadow-lg); color:#fff; font-family:var(--font-heading); font-size:3.5rem; font-weight:700; }.profile-identity { padding-bottom:.35rem; }.profile-identity h1 { font-size:2rem; }.profile-identity p { max-width:650px; color:var(--text-secondary); }.profile-handle { color:var(--accent-orange)!important; font-weight:700; }.profile-layout { display:grid; grid-template-columns:220px 1fr; gap:3rem; align-items:start; }.profile-sidebar { display:grid; gap:.35rem; padding:1rem; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-card); }.profile-sidebar a { padding:.65rem .7rem; border-radius:var(--radius-sm); color:var(--text-secondary); font-weight:600; }.profile-sidebar a:hover { background:var(--accent-orange-light); color:var(--accent-orange); }.owner-label,.eyebrow { color:var(--accent-orange); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.profile-section-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; }.profile-section-heading h2 { font-size:1.55rem; }.profile-section-heading>span { padding:.3rem .65rem; border-radius:var(--radius-pill); color:var(--text-secondary); background:var(--bg-secondary); font-size:.88rem; }.profile-empty { padding:3.5rem 1.5rem; border:1px dashed var(--border-color); border-radius:var(--radius-lg); background:var(--bg-card); text-align:center; }.profile-empty>span { display:block; color:var(--accent-orange); font-size:2rem; }.profile-empty h3 { margin-top:.6rem; }.profile-empty p { max-width:420px; margin:.45rem auto 1.2rem; color:var(--text-secondary); }.profile-story-grid,.owner-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.profile-story-card,.owner-panels article { padding:1rem; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-card); }.profile-story-card { display:flex; gap:1rem; }.profile-book-cover { display:grid; place-items:center; width:75px; min-width:75px; height:100px; border-radius:5px 12px 12px 5px; background:linear-gradient(145deg,#513768,#e86a33); font-size:2rem; }.profile-story-card span,.profile-story-card p,.owner-panels p { color:var(--text-secondary); font-size:.85rem; }.owner-panels { grid-template-columns:repeat(3,1fr); margin-top:2.5rem; }.owner-panels h2 { font-size:1.05rem; }.owner-panels p { margin-top:.45rem; }
.profile-cover { background-size:cover; background-position:center; }.profile-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }.profile-edit { margin-left:auto; margin-bottom:.45rem; }.remember-login { display:flex!important; align-items:center; gap:.45rem; font-weight:400!important; }.settings-page { max-width:860px; padding-top:2.5rem; padding-bottom:4rem; }.back-link { display:inline-block; margin-bottom:1.5rem; font-weight:600; }.settings-heading { margin-bottom:1.5rem; }.settings-heading h1 { font-size:2.2rem; }.settings-heading p:not(.eyebrow),.form-help { color:var(--text-secondary); }.settings-notice { margin-bottom:1rem; padding:.8rem 1rem; border-radius:var(--radius-sm); color:#1c6530; background:var(--accent-green-light); }.settings-form { display:grid; gap:1.25rem; }.settings-form section { padding:1.4rem; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-card); }.settings-form h2 { font-size:1.25rem; margin-bottom:.35rem; }.settings-form label { display:grid; gap:.35rem; margin-top:1rem; font-weight:600; color:var(--text-secondary); }.settings-form input:not([type=radio]),.settings-form textarea { width:100%; padding:.72rem .85rem; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-primary); color:var(--text-primary); }.settings-form textarea { resize:vertical; }.image-setting-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.image-setting-grid span { font-weight:400; font-size:.85rem; color:var(--text-muted); }.theme-choices { display:flex; gap:1rem; border:0; }.theme-choices label { display:flex; align-items:center; gap:.4rem; margin:0; padding:.8rem 1rem; border:1px solid var(--border-color); border-radius:var(--radius-sm); cursor:pointer; }

.profile-layout.public-layout { grid-template-columns: minmax(0, 1fr); }
.post-type-actions { display:grid; grid-template-columns:repeat(auto-fit, minmax(145px, 1fr)); gap:.7rem; margin:0 0 1.25rem; }.post-type-actions a { padding:.75rem .6rem; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text-primary); text-align:center; font-weight:600; font-size:.9rem; }.post-type-actions a:hover { border-color:var(--accent-orange); color:var(--accent-orange); background:var(--accent-orange-light); }.create-post-page { max-width:860px; padding-top:2.5rem; padding-bottom:4rem; }
.picture-story-form { padding-bottom:2rem; }.image-upload-card { margin-top:1rem; padding:1rem; border:1px dashed var(--border-color); border-radius:var(--radius-sm); background:var(--bg-secondary); }.image-upload-card label { margin:0; color:var(--text-primary); }.image-upload-card p { margin-top:.5rem; color:var(--text-secondary); font-size:.85rem; }
.upload-summary { display:block; margin-top:.65rem; color:var(--accent-green); font-size:.85rem; font-weight:600; }
.age-range-options { display:grid; gap:.55rem; margin-top:1rem; padding:1rem; border:1px solid var(--border-color); border-radius:var(--radius-sm); }.age-range-options legend { padding:0 .35rem; color:var(--text-secondary); font-weight:600; }.age-range-options label { display:flex; align-items:center; gap:.5rem; margin:0; color:var(--text-primary); font-weight:400; cursor:pointer; }
.faq-editor { margin-top:1rem; padding:0; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-secondary); overflow:hidden; }.faq-editor summary { padding:.9rem 1rem; color:var(--text-primary); font-weight:700; cursor:pointer; }.faq-editor[open] summary { border-bottom:1px solid var(--border-color); }.faq-editor label { display:grid; gap:.35rem; margin:1rem; color:var(--text-secondary); font-weight:600; }.faq-editor input,.faq-editor textarea { width:100%; padding:.65rem .75rem; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-primary); color:var(--text-primary); }.image-drop-zone { display:grid; gap:.45rem; min-height:130px; margin-top:1rem; padding:1.25rem; border:2px dashed var(--border-color); border-radius:var(--radius-md); background:var(--bg-secondary); color:var(--text-secondary); cursor:pointer; place-content:center; text-align:center; transition:var(--transition-fast); }.image-drop-zone strong { color:var(--text-primary); }.image-drop-zone input { position:absolute; width:1px; height:1px; opacity:0; }.image-drop-zone output { color:var(--accent-green); font-size:.85rem; font-weight:600; }.image-drop-zone.is-dragging { border-color:var(--accent-orange); background:var(--accent-orange-light); transform:scale(1.01); }
.existing-story-image { display:block; width:min(100%,260px); height:auto; max-height:360px; margin:1rem auto 0; border:1px solid var(--border-color); border-radius:var(--radius-sm); object-fit:contain; background:var(--bg-secondary); }.existing-page-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.7rem; margin-top:1rem; }.existing-page-list img { display:block; width:100%; max-width:100%; aspect-ratio:4/5; border:1px solid var(--border-color); border-radius:var(--radius-sm); object-fit:cover; background:var(--bg-secondary); }.existing-page-item { position:relative; margin:0; }.existing-page-item img { height:100%; }.replace-existing-page-input { position:absolute; width:1px; height:1px; opacity:0; }.sort-existing-page,.edit-existing-page,.remove-existing-page { position:absolute; z-index:1; display:grid; width:28px; height:28px; place-items:center; border:0; border-radius:50%; background:rgba(40,30,30,.85); color:#fff; font:inherit; font-weight:700; cursor:pointer; touch-action:none; }.sort-existing-page { bottom:.35rem; left:.35rem; }.edit-existing-page { right:.35rem; bottom:.35rem; }.remove-existing-page { top:.35rem; right:.35rem; font-size:1.3rem; }.existing-page-item.is-sorting { opacity:.45; }.existing-page-item.is-drag-over { outline:2px solid var(--accent-orange); transform:scale(1.04); }.character-current-image { display:block; width:52px; height:52px; max-width:100%; border:1px solid var(--border-color); border-radius:50%; object-fit:cover; }
.character-editor { display:grid; grid-template-columns:1fr 1fr auto; gap:.75rem; align-items:start; margin-top:.75rem; padding:.9rem; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-secondary); }.character-editor label { display:grid!important; grid-template-rows:26px 52px auto; margin:0!important; align-self:start; }.character-editor input { height:52px; margin:0; }.character-editor input[type="file"] { display:block; padding:.65rem .75rem; }.remove-character,.add-character-button { border:1px solid var(--border-color); border-radius:var(--radius-pill); background:var(--bg-card); color:var(--text-primary); padding:.6rem .85rem; cursor:pointer; font:inherit; }.remove-character { align-self:end; color:#a23b32; }.add-character-button { margin-top:1rem; }
.image-previews { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:.5rem; }.image-preview-item { position:relative; width:84px; height:108px; margin:0; overflow:hidden; border-radius:var(--radius-sm); border:1px solid var(--border-color); background:var(--bg-card); }.image-preview-item img { width:100%; height:100%; object-fit:cover; }.remove-image { position:absolute; top:.25rem; right:.25rem; width:26px; height:26px; border:0; border-radius:50%; background:rgba(40,30,30,.82); color:#fff; font-size:1.2rem; line-height:1; cursor:pointer; }
.image-preview-item.is-sorting { opacity:.45; }.image-preview-item.is-drag-over { border:2px solid var(--accent-orange); transform:scale(1.05); }.sort-handle { position:absolute; left:.25rem; bottom:.25rem; width:26px; height:26px; border:0; border-radius:50%; background:rgba(40,30,30,.82); color:#fff; font-size:1.15rem; line-height:1; cursor:grab; touch-action:none; }
.character-image-preview { display:flex; align-items:center; gap:.5rem; margin-top:.45rem; }.character-image-preview img { width:46px; height:46px; border-radius:50%; object-fit:cover; }.character-image-preview button { border:0; background:transparent; color:#a23b32; cursor:pointer; font:inherit; font-size:.82rem; }
.publish-consent { background:var(--accent-amber-light); }.publish-consent label { display:flex!important; align-items:flex-start; gap:.65rem; margin:0!important; color:var(--text-primary)!important; font-weight:500!important; line-height:1.55; }.publish-consent input { width:auto!important; margin-top:.3rem; }
.public-preview-notice { position:relative; z-index:5; max-width:var(--container-max); margin:1rem auto -1rem; padding:.6rem 1.25rem; border-radius:var(--radius-sm); background:var(--accent-purple-light); color:var(--accent-purple); font-size:.9rem; font-weight:600; }
.account-settings-layout { padding-bottom:4rem; }.account-settings-layout .owner-settings { margin-top:0; }
.account-menu-card { align-self:start; padding:1.1rem; gap:1rem; }.account-menu-card nav { display:grid; gap:.35rem; }.account-menu-card nav a { display:flex; align-items:center; min-height:38px; padding:.58rem .7rem; }.account-menu-card nav a.is-active { background:var(--accent-orange-light); color:var(--accent-orange); font-weight:700; }.account-menu-card form { padding-top:.3rem; border-top:1px solid var(--border-color); }.account-menu-card .logout-button { padding:.58rem .7rem; }
.profile-intro { min-height:150px; }.profile-identity { min-height:86px; display:flex; flex-direction:column; justify-content:flex-end; }
.personal-details-grid,.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.settings-form select { width:100%; padding:.72rem .85rem; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-primary); color:var(--text-primary); }.private-label { padding:.18rem .5rem; border-radius:var(--radius-pill); background:var(--accent-purple-light); color:var(--accent-purple); font-size:.7rem; font-weight:600; }
.manga-category-section{background:linear-gradient(145deg,var(--bg-card),var(--bg-secondary))!important}.manga-category-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.manga-category-heading .eyebrow{margin:0;color:var(--accent-orange);font-size:.78rem;font-weight:700}.manga-category-heading h2{margin:.18rem 0 0}.manga-category-heading>span{padding:.4rem .7rem;border-radius:var(--radius-pill);background:var(--accent-purple-light);color:var(--accent-purple);font-size:.78rem;font-weight:700;white-space:nowrap}.manga-demographic-select{margin:0!important}.manga-demographic-select small,.manga-checkbox-group legend small{font-weight:400;color:var(--text-secondary)}.manga-checkbox-group{margin:1.25rem 0 0;padding:1rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background:rgba(255,255,255,.38)}.manga-checkbox-group legend{padding:0 .45rem;color:var(--text-primary);font-weight:800}.manga-checkbox-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.manga-checkbox-option{display:flex!important;align-items:center;gap:.65rem;margin:0!important;padding:.65rem .75rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-primary)!important;cursor:pointer;transition:border-color .18s ease,background .18s ease}.manga-checkbox-option:hover{border-color:var(--accent-orange)}.settings-form .manga-checkbox-option input[type=checkbox]{width:1.05rem!important;height:1.05rem!important;margin:0!important;padding:0!important;accent-color:var(--accent-orange);flex:0 0 auto}.manga-checkbox-icon{display:grid;place-items:center;width:2rem;height:2rem;flex:0 0 2rem;border-radius:9px;background:var(--accent-purple-light);font-size:1rem}.manga-checkbox-copy{display:grid;gap:.1rem;min-width:0}.manga-checkbox-copy strong{font-size:.88rem;line-height:1.25}.manga-checkbox-copy small{color:var(--text-secondary);font-size:.75rem;font-weight:400;line-height:1.3}.manga-mature-group{border-color:#e5bbbf}.manga-mature-group .manga-checkbox-icon{background:#fff0f1}.manga-checkbox-option:has(input:checked){border-color:var(--accent-orange);background:var(--accent-orange-light)}@media(max-width:640px){.form-grid,.manga-checkbox-list{grid-template-columns:1fr}.manga-category-heading{align-items:start;flex-direction:column}.manga-category-heading>span{white-space:normal}}
.profile-sidebar form { margin:0; }.logout-button { width:100%; padding:.65rem .7rem; border:0; border-radius:var(--radius-sm); color:#a23b32; background:transparent; font:inherit; font-weight:600; text-align:left; cursor:pointer; }.logout-button:hover { background:#fff0ee; }.owner-settings { margin-top:2.5rem; scroll-margin-top:1.5rem; }.owner-settings .settings-heading { margin-bottom:1.25rem; }.owner-settings .settings-heading h2 { font-size:1.55rem; }.header-logout { margin:0; }.header-logout .btn-pill { border:0; cursor:pointer; font:inherit; }
.payment-account-form input[type=file] { padding:.6rem; }.payment-account-form label span { font-weight:400; font-size:.85rem; color:var(--text-muted); }.payment-qr-preview { display:flex; align-items:center; gap:1rem; margin-top:1rem; padding:1rem; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-primary); }.payment-qr-preview img { width:120px; height:120px; object-fit:contain; border-radius:var(--radius-sm); background:#fff; }.payment-qr-preview p { color:var(--text-secondary); }
.support-card-preview { margin:0 0 1.5rem; padding:1.35rem; border:1px solid var(--border-color); border-radius:var(--radius-lg); background:var(--bg-card); box-shadow:var(--shadow-sm); }.support-card-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }.support-card-preview-heading h2 { font-size:1.25rem; }.support-card-preview-live { padding:.25rem .65rem; border-radius:var(--radius-pill); background:var(--accent-green-light); color:var(--accent-green); font-size:.78rem; font-weight:700; white-space:nowrap; }.support-payment-card { --payment-card-start:#34285b; --payment-card-mid:#6b4e71; --payment-card-end:#e86a33; position:relative; overflow:hidden; padding:1.35rem; border-radius:18px; background:linear-gradient(135deg,var(--payment-card-start) 0%,var(--payment-card-mid) 52%,var(--payment-card-end) 135%); box-shadow:0 14px 26px rgba(73,48,88,.24); color:#fff; transition:background var(--transition-normal); }.support-payment-card::before { content:''; position:absolute; width:260px; height:260px; top:-170px; right:-75px; border:1px solid rgba(255,255,255,.24); border-radius:50%; box-shadow:0 0 0 28px rgba(255,255,255,.06),0 0 0 56px rgba(255,255,255,.04); }.support-payment-card-glow { position:absolute; left:-6%; bottom:-85%; width:260px; height:210px; border-radius:50%; background:rgba(255,203,142,.25); filter:blur(16px); }.support-payment-card-top,.support-payment-card-content,.support-payment-card-note { position:relative; z-index:1; }.support-payment-card-top { display:flex; justify-content:space-between; gap:1rem; color:rgba(255,255,255,.83); font-size:.8rem; }.support-payment-card-brand { font-family:var(--font-heading); font-size:1rem; font-weight:700; letter-spacing:.03em; color:#fff; }.support-payment-card-content { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin:1.6rem 0 1.05rem; }.support-payment-card-copy { min-width:0; }.support-payment-card-kicker { color:rgba(255,255,255,.72); font-size:.88rem; }.support-payment-card-copy h3 { overflow:hidden; margin:.12rem 0 .9rem; color:#fff; font-size:1.6rem; text-overflow:ellipsis; white-space:nowrap; }.support-payment-card-detail { display:flex; align-items:center; gap:.6rem; }.support-payment-card-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.16); font-size:1.35rem; }.support-payment-card-detail small,.support-payment-card-detail strong { display:block; }.support-payment-card-detail small { color:rgba(255,255,255,.72); font-size:.72rem; }.support-payment-card-detail strong { max-width:265px; overflow:hidden; color:#fff; font-size:.92rem; text-overflow:ellipsis; white-space:nowrap; }.support-payment-bank-detail { display:grid; gap:.05rem; margin-top:.8rem; padding:.6rem .7rem; border-left:2px solid rgba(255,255,255,.46); background:rgba(255,255,255,.09); }.support-payment-bank-detail small { color:rgba(255,255,255,.7); font-size:.7rem; }.support-payment-bank-detail strong,.support-payment-bank-detail span { overflow:hidden; color:#fff; text-overflow:ellipsis; white-space:nowrap; }.support-payment-bank-detail strong { font-size:.82rem; }.support-payment-bank-detail span { font-size:.86rem; font-weight:700; }.support-promptpay-logo { display:block; width:94px; max-height:30px; margin:0 0 .32rem; padding:2px; border-radius:3px; background:#fff; object-fit:contain; }.support-payment-card-qr { display:grid; flex:0 0 150px; place-items:center; width:150px; height:150px; overflow:hidden; padding:7px; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(27,16,40,.25); color:#6b4e71; font-size:.9rem; font-weight:800; }.support-payment-card-qr img { width:100%; height:100%; object-fit:contain; }.support-payment-card-note { padding-top:.9rem; border-top:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.76); font-size:.78rem; }

/* Refined support payment card */
.support-payment-card { isolation:isolate; min-height:294px; padding:1.45rem 1.55rem 1.25rem; border:1px solid rgba(255,255,255,.28); border-radius:22px; box-shadow:0 18px 36px rgba(42,25,56,.25); }.support-payment-card::after { content:''; position:absolute; z-index:-1; right:-52px; bottom:-105px; width:290px; height:220px; border:1px solid rgba(255,255,255,.16); border-radius:50%; box-shadow:0 0 0 28px rgba(255,255,255,.05),0 0 0 56px rgba(255,255,255,.035); }.support-payment-card-top { align-items:center; padding-bottom:.8rem; border-bottom:1px solid rgba(255,255,255,.19); }.support-payment-card-brand { display:flex; align-items:center; gap:.45rem; letter-spacing:.02em; }.support-payment-card-brand::before { content:'✦'; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.17); font-size:.7rem; }.support-payment-card-top>span:last-child { padding:.28rem .62rem; border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-pill); background:rgba(255,255,255,.1); color:#fff; font-size:.71rem; font-weight:600; }.support-payment-card-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(132px,.52fr) 164px; align-items:center; gap:1.15rem; margin:1.15rem 0 1.45rem; }.support-payment-card-copy h3 { margin:.1rem 0 .72rem; font-size:clamp(1.45rem,3vw,1.9rem); letter-spacing:-.02em; }.support-payment-card-detail { align-self:center; justify-self:center; width:100%; max-width:175px; padding:.65rem .7rem; border:1px solid rgba(255,255,255,.17); border-radius:12px; background:rgba(24,16,37,.16); backdrop-filter:blur(6px); }.support-payment-card-icon { width:28px; height:28px; background:rgba(255,255,255,.2); font-size:1.05rem; }.support-payment-card-detail strong { max-width:290px; font-size:.96rem; }.support-payment-bank-detail { max-width:340px; margin-top:.62rem; padding:.58rem .72rem; border:1px solid rgba(255,255,255,.16); border-left:3px solid rgba(255,255,255,.65); border-radius:0 10px 10px 0; background:rgba(255,255,255,.1); }.support-payment-bank-detail strong { margin-top:.06rem; font-size:.84rem; }.support-payment-bank-detail span { margin-top:.04rem; font-size:.95rem; letter-spacing:.035em; }.support-payment-card-qr { position:relative; justify-self:end; flex-basis:auto; width:164px; height:164px; overflow:visible; padding:8px; border:4px solid rgba(255,255,255,.6); border-radius:18px; box-shadow:0 12px 22px rgba(24,12,37,.26); }.support-payment-card-qr::before { content:'SCAN TO SUPPORT'; position:absolute; left:50%; bottom:-20px; transform:translateX(-50%); color:rgba(255,255,255,.87); font-family:var(--font-heading); font-size:.6rem; font-weight:600; letter-spacing:.12em; white-space:nowrap; }.support-payment-card-note { display:flex; align-items:center; gap:.4rem; margin-top:.2rem; padding-top:.72rem; font-size:.76rem; }.support-payment-card-note::before { content:'♥'; color:#fff; font-size:.88rem; }
.support-payment-card-content { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 164px; }.support-payment-bank-detail,.support-payment-card-detail { width:100%; min-height:90px; box-sizing:border-box; }.support-payment-bank-detail { max-width:none; align-content:center; }.support-payment-card-detail { align-self:end; justify-self:stretch; max-width:none; }.support-payment-card-detail>div { width:100%; }.support-payment-card-detail strong { max-width:100%; }
@media (max-width:640px) { .support-payment-card { min-height:0; padding:1.1rem; }.support-payment-card-content { grid-template-columns:minmax(0,1fr) 126px; gap:.8rem; }.support-payment-card-copy { grid-column:1; grid-row:1 / span 2; }.support-payment-card-detail { grid-column:2; grid-row:2; max-width:126px; min-height:0; padding:.45rem .5rem; }.support-payment-card-qr { grid-column:2; grid-row:1; width:126px; height:126px; }.support-payment-card-qr::before { bottom:-19px; transform:translateX(-50%); font-size:.52rem; }.support-payment-card-copy h3 { font-size:1.42rem; }.support-payment-bank-detail { min-height:0; padding:.5rem .58rem; }.support-payment-card-detail strong { max-width:112px; } }

/* Linked account-content cards */
a.profile-story-card { color:var(--text-primary); transition:transform var(--transition-fast),box-shadow var(--transition-fast); }
a.profile-story-card:hover { color:var(--text-primary); transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* Content profile */
.content-profile-page{padding-bottom:4.5rem}.content-profile-hero{padding:3rem 0;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border-bottom:1px solid var(--border-color)}.content-hero-grid{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:center;gap:2.5rem}.content-cover{width:280px;aspect-ratio:4/6;display:grid;place-items:center;overflow:hidden;border:2px solid rgba(255,255,255,.9);border-radius:var(--radius-md);background:linear-gradient(145deg,var(--accent-purple),var(--accent-orange));box-shadow:var(--shadow-lg);color:#fff;font-size:4rem}.content-cover img{width:100%;height:100%;object-fit:cover}.content-badges,.content-tags,.content-actions,.content-characters{display:flex;flex-wrap:wrap;gap:.55rem}.content-badges span,.content-tags span{padding:.25rem .7rem;border:1px solid var(--border-color);border-radius:var(--radius-pill);background:var(--bg-card);color:var(--text-secondary);font-size:.82rem;font-weight:600}.content-badges .content-category{border-color:var(--accent-green);background:var(--accent-green);color:#fff}.content-badges .content-draft{border-color:var(--accent-orange);background:var(--accent-orange);color:#fff}.content-hero-copy h1{margin:.7rem 0 .45rem;font-size:clamp(2rem,4vw,3.3rem)}.content-description{max-width:850px;color:var(--text-secondary);font-size:1.08rem}.content-author{margin-top:.85rem;color:var(--text-secondary)}.content-author a{font-weight:700}.content-tags{margin-top:.8rem}.content-tags span{background:rgba(255,255,255,.5)}.content-actions{margin-top:1.35rem}.content-actions .btn-pill{padding:.72rem 1.15rem;border:1px solid var(--border-color);cursor:pointer}.content-profile-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:2.5rem;align-items:start;padding-top:3rem}.content-main{display:grid;gap:1.35rem}.content-info-card,.content-pages,.content-related{padding:1.5rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-card)}.content-info-card h2,.content-pages h2,.content-related h2{color:var(--accent-orange);font-size:1.2rem}.content-info-card p{margin-top:.5rem}.content-characters{margin-top:.85rem}.content-characters span{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .75rem;border-radius:var(--radius-pill);background:var(--bg-secondary);font-weight:600}.content-characters img{width:28px;height:28px;border-radius:50%;object-fit:cover}.content-faqs{display:grid;gap:.65rem;margin-top:.85rem}.content-faqs details{overflow:hidden;border:1px solid var(--border-color);border-radius:var(--radius-sm)}.content-faqs summary{padding:.75rem 1rem;font-weight:600;cursor:pointer}.content-faqs details p{padding:0 1rem 1rem;color:var(--text-secondary)}.content-section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.content-section-heading span{padding:.2rem .6rem;border-radius:var(--radius-pill);background:var(--bg-secondary);color:var(--text-secondary);font-size:.82rem}.content-page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.content-page-grid figure{overflow:hidden;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-secondary)}.content-page-grid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}.content-page-grid figcaption{padding:.45rem .7rem;color:var(--text-muted);font-size:.82rem}.content-empty-note,.related-empty{padding:1rem;border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-secondary)}.content-related{position:sticky;top:1.5rem}.content-related>p{margin:.15rem 0 1rem;color:var(--text-muted);font-size:.86rem}.related-list{display:grid;gap:.7rem}.related-list a{display:grid;grid-template-columns:62px minmax(0,1fr);gap:.7rem;align-items:center;padding:.55rem;border-radius:var(--radius-sm);color:var(--text-primary)}.related-cover{display:grid;place-items:center;width:62px;height:76px;overflow:hidden;border-radius:6px;background:var(--accent-purple-light);font-size:1.35rem}.related-cover img{width:100%;height:100%;object-fit:cover}.related-list strong,.related-list small,.related-list em{display:block}.related-list strong{line-height:1.35}.related-list small{margin-top:.18rem;color:var(--text-secondary);font-size:.77rem;line-height:1.35}.related-list em{margin-top:.25rem;color:var(--accent-orange);font-size:.74rem;font-style:normal}.content-not-found{min-height:60vh;display:grid;place-content:center;justify-items:center;gap:.7rem;text-align:center}.content-not-found>span{font-size:3rem}

/* Content profile refinements */
.content-cover { aspect-ratio:4/6; }
.library-story-cover,.library-book-cover { aspect-ratio:4/6; }
.content-profile-layout { grid-template-columns:minmax(0,1fr); }.content-related { position:static; }
.content-characters { gap:1.1rem; margin-top:1rem; }.content-character { display:grid; justify-items:center; gap:.55rem; min-width:132px; color:var(--text-primary); text-align:center; }.content-character img,.content-character-placeholder { width:112px; height:112px; border:3px solid var(--bg-primary); border-radius:50%; box-shadow:var(--shadow-md); object-fit:cover; }.content-character-placeholder { display:grid; place-items:center; background:var(--accent-purple-light); font-size:2.2rem; }.content-character strong { max-width:140px; overflow-wrap:anywhere; }.content-support-card { padding:1.35rem; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-card); }.content-support-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }.content-support-heading h2 { color:var(--accent-orange); font-size:1.2rem; }.content-support-heading>span { padding:.25rem .65rem; border-radius:var(--radius-pill); background:var(--accent-amber-light); color:var(--accent-orange); font-size:.78rem; font-weight:700; }.content-support-card .support-payment-card { margin:0; }.content-support-card .support-payment-card-qr span { text-align:center; line-height:1.15; }.content-support-card .support-payment-card-qr small { font-size:.65rem; font-weight:600; }

/* Public support card: compact layout used on content profiles */
.content-support-card { padding:0; border:0; background:transparent; }.content-support-heading { display:none; }.content-support-card .support-payment-card { min-height:330px; padding:1.35rem 1.55rem 1.2rem; border-radius:22px; box-shadow:0 12px 26px rgba(0,86,55,.22); }.content-support-card .support-payment-card-top { padding-bottom:1rem; }.content-support-card .support-payment-card-content { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 164px; gap:1rem; margin:1.1rem 0 1.35rem; }.content-support-card .support-payment-card-copy h3 { font-size:1.75rem; }.content-support-card .support-payment-bank-detail,.content-support-card .support-payment-card-detail { min-height:90px; margin-top:.6rem; padding:.65rem .75rem; border:1px solid rgba(255,255,255,.18); border-radius:11px; background:rgba(255,255,255,.10); }.content-support-card .support-payment-bank-detail { border-left:3px solid rgba(255,255,255,.7); }.content-support-card .support-payment-card-detail { display:grid; place-items:center start; align-self:end; max-width:none; }.content-support-card .support-payment-card-detail small { display:none; }.content-support-card .support-payment-card-detail>div::before { content:''; display:block; width:100px; height:30px; margin-bottom:.35rem; border-radius:4px; background:#fff url('../img/promptpay-logo.png') center/contain no-repeat; }.content-support-card .support-payment-card-detail strong { max-width:100%; font-size:1rem; }.content-support-card .support-payment-card-qr { width:164px; height:164px; border-radius:18px; }.content-support-card .support-payment-card-note { margin-top:.1rem; }.content-support-card .support-payment-card-glow { background:rgba(125,255,181,.18); }

.content-reader-overlay { position:fixed; z-index:4000; inset:0; overflow:auto; padding:2rem 1rem; background:rgba(27,20,31,.88); backdrop-filter:blur(7px); }.content-reader-close { position:fixed; z-index:1; top:1rem; right:1rem; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#fff; color:var(--text-primary); font-size:2rem; line-height:1; }.content-reader-pages { display:grid; gap:1.25rem; width:min(100%,700px); margin:0 auto; }.content-reader-pages figure { overflow:hidden; border-radius:var(--radius-md); background:#fff; box-shadow:var(--shadow-lg); }.content-reader-pages img { display:block; width:100%; height:auto; }.content-reader-pages figcaption { padding:.5rem .75rem; color:var(--text-secondary); font-size:.8rem; text-align:center; }.content-reader-empty { display:grid; min-height:70vh; place-content:center; justify-items:center; gap:.5rem; color:#fff; text-align:center; }.content-reader-empty span { font-size:3rem; }.content-reader-empty p { color:rgba(255,255,255,.72); }
.content-actions .btn-primary { min-height:52px; padding:.85rem 1.45rem; box-shadow:0 10px 22px rgba(232,106,51,.32); font-size:1.02rem; font-weight:700; transform:translateY(0); }.content-actions .btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 26px rgba(232,106,51,.4); }.content-main>.content-support-card { display:none; }.content-support-trigger { display:inline-flex; align-items:center; margin:0 0 0 .55rem; padding:.34rem .72rem; border:0; font-size:.8rem; line-height:1.2; vertical-align:middle; cursor:pointer; }.support-overlay { position:fixed; z-index:4100; inset:0; display:grid; place-items:center; overflow:auto; padding:1.25rem; background:rgba(27,20,31,.72); backdrop-filter:blur(7px); }.support-overlay-panel { position:relative; width:min(100%,820px); }.support-overlay-close { position:absolute; z-index:2; top:-.7rem; right:-.7rem; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:#fff; color:var(--text-primary); box-shadow:var(--shadow-md); font-size:1.8rem; line-height:1; cursor:pointer; }.support-overlay .content-support-card { display:block; }

/* Responsive Rules */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-illustration { display: flex; margin-top: 0.5rem; }
  .story-grid { grid-template-columns: repeat(2, 1fr); }
  .widgets-grid { grid-template-columns: 1fr; }
  .mega-menu { display: none; }
  .search-results-layout, .detail-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .library-cover-rating,.library-cover-views { top:.62rem; min-height:26px; padding:.18rem .4rem; font-size:.65rem; }.library-cover-rating { left:.62rem; }.library-cover-views { right:.62rem; }
  .library-book-cover,.library-book-cover.is-tall-cover { min-height:0; aspect-ratio:4/6; }
  .site-header { overflow: visible; }
  .site-header nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0.75rem;
    right: 0.75rem;
    padding: 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1200;
  }

  .site-header.mobile-menu-open nav { display: block; }
  .site-header.mobile-menu-open .nav-menu { display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem; }
  .site-header.mobile-menu-open .nav-menu > li { width: 100%; }
  .site-header.mobile-menu-open .nav-link { width: 100%; padding: 0.75rem 0.85rem; }
  .site-header .mega-menu { display: none !important; }
  .header-actions > :not(.mobile-nav-toggle) { display: none; }
  .mobile-nav-toggle { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
  .mobile-menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; padding: 0.75rem 0.25rem 0.15rem; border-top: 1px solid var(--border-color); margin-top: 0.35rem; }
  .mobile-menu-actions .btn-pill { justify-content: center; padding: 0.65rem 0.5rem; }
  .mobile-menu-tools { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
  .mobile-menu-tools button { border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); padding: 0.65rem; border-radius: var(--radius-pill); font: inherit; font-size: 0.85rem; }
  .story-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: 2.2rem; }
  .storybook-card-display { width: min(100%, 300px); height: 500px; }
  .storybook-card-display > img { height: 195px !important; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand-logo-img { width: 200px; height: 60px; flex-basis: 200px; }
  .header-inner { gap: 0.5rem; }
  .header-actions { gap: 0.3rem; }
  .profile-cover { height:190px; }.profile-cover-stars { font-size:1.4rem; }.profile-intro { flex-direction:column; align-items:flex-start; gap:.75rem; margin-top:-3.2rem; }.profile-avatar { width:104px; height:104px; flex-basis:104px; font-size:2.8rem; }.profile-identity h1 { font-size:1.65rem; }.profile-layout { grid-template-columns:1fr; gap:1.25rem; }.profile-sidebar { grid-template-columns:1fr 1fr; }.profile-sidebar .owner-label { grid-column:1 / -1; }.profile-story-grid,.owner-panels { grid-template-columns:1fr; }
  .personal-details-grid { grid-template-columns:1fr; }.payment-qr-preview { align-items:flex-start; flex-direction:column; }.support-card-preview { padding:1rem; }.support-card-preview-heading { align-items:flex-start; flex-direction:column; }.support-payment-card { padding:1.1rem; }.support-payment-card-content { grid-template-columns:minmax(0,1fr) 126px; align-items:center; gap:.8rem; margin:1.2rem 0 1.45rem; }.support-payment-card-copy h3 { font-size:1.35rem; }.support-payment-card-qr { flex-basis:126px; width:126px; height:126px; }.support-payment-card-top { font-size:.72rem; }
  .account-menu-card { display:block; }.account-menu-card nav { margin-top:.5rem; }.account-menu-card form { margin-top:.7rem; }
  .content-character { min-width:96px; }.content-character img,.content-character-placeholder { width:92px; height:92px; }.content-support-card { padding:1rem; }.content-support-heading { align-items:flex-start; flex-direction:column; gap:.35rem; }
  .content-support-card { padding:0; }.content-support-card .support-payment-card { min-height:0; padding:1.1rem; }.content-support-card .support-payment-card-content { grid-template-columns:minmax(0,1fr) 126px; gap:.8rem; }.content-support-card .support-payment-card-copy { grid-column:1; grid-row:1 / span 2; }.content-support-card .support-payment-card-detail { grid-column:2; grid-row:2; min-height:0; padding:.45rem .5rem; }.content-support-card .support-payment-card-detail>div::before { width:88px; height:26px; }.content-support-card .support-payment-card-qr { grid-column:2; grid-row:1; width:126px; height:126px; }
  .content-profile-hero { padding:2rem 0; }.content-hero-grid { grid-template-columns:1fr; gap:1.25rem; }.content-cover { width:min(230px,100%); }.content-profile-layout { grid-template-columns:1fr; gap:1.25rem; padding-top:1.5rem; }.content-related { position:static; order:-1; }.content-page-grid { grid-template-columns:1fr; }.content-hero-copy h1 { font-size:2rem; }
}

/* Tablet uses the same compact, touch-friendly navigation as mobile. */
@media (min-width: 641px) and (max-width: 1024px) {
  .site-header { overflow: visible; }
  .site-header nav { display:none; position:absolute; top:calc(100% + 8px); left:.75rem; right:.75rem; padding:.7rem; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); z-index:1200; }
  .site-header.mobile-menu-open nav { display:block; }
  .site-header.mobile-menu-open .nav-menu { display:flex; flex-direction:column; align-items:stretch; gap:.2rem; }
  .site-header.mobile-menu-open .nav-menu>li { width:100%; }
  .site-header.mobile-menu-open .nav-link { display:block; width:100%; padding:.75rem .85rem; }
  .site-header .mega-menu { display:none!important; }
  .header-actions>:not(.mobile-nav-toggle) { display:none; }
  .mobile-nav-toggle { display:flex; width:44px; height:44px; align-items:center; justify-content:center; }
  .mobile-menu-actions { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; padding:.75rem .25rem .15rem; border-top:1px solid var(--border-color); margin-top:.35rem; }
  .mobile-menu-actions .btn-pill { justify-content:center; padding:.65rem .5rem; }
  .mobile-menu-tools { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
  .mobile-menu-tools button { border:1px solid var(--border-color); background:var(--bg-secondary); color:var(--text-primary); padding:.65rem; border-radius:var(--radius-pill); font:inherit; font-size:.85rem; }
}

/* Keep related content after the support card on mobile too. */
@media (max-width: 640px) {
  .content-related { order:initial; }
}

@media (max-width: 640px) {
  .library-page { padding-top: .9rem; }.library-intro { margin-bottom: .75rem; }.library-intro h1 { font-size:1.7rem; }.library-search { min-height:52px; padding-left:.8rem; }.library-search input { font-size:.9rem; }.library-search button { min-height:38px; padding:.48rem .78rem; font-size:.82rem; }.library-filter-row { margin-top:.75rem; }.library-filter { min-height:36px; font-size:.82rem; }.library-results-bar { padding:.75rem 0 .9rem; }.library-options summary { font-size:.76rem; }.library-book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }.library-book-cover { min-height:224px; padding:.9rem .7rem .8rem .95rem; }.library-book-cover strong { font-size:1.05rem; }.library-book-mark { top:.7rem; right:.7rem; width:29px; height:29px; }.library-book-info h2 { font-size:.92rem; }.library-book-info p { min-height:0; font-size:.76rem; }.library-book-info span { font-size:.64rem; }
  .catalog-page { padding-top: .75rem; }
  .catalog-hero { margin: 0 -.15rem; padding: 1.35rem 1rem 1.15rem; border-radius: 18px; }
  .catalog-hero p { font-size: .94rem; }
  .catalog-search { min-height: 52px; padding-left: .8rem; }
  .catalog-search input { font-size: .9rem; }
  .catalog-quick-search { margin-top: .65rem; }
  .catalog-category-section { padding-top: 1.25rem; }
  .catalog-section-heading h2, .catalog-results-heading h2 { font-size: 1.15rem; }
  .catalog-category-chips { margin-left: -1.25rem; margin-right: -1.25rem; }
  .catalog-chip { min-height: 40px; padding: .48rem .75rem; font-size: .83rem; }
  .catalog-toolbar { align-items: flex-start; }
  .catalog-sort { flex-direction: column; align-items: flex-end; gap: .15rem; }
  .catalog-sort select { max-width: 136px; font-size: .82rem; }
  .catalog-age-options { min-width: min(270px, calc(100vw - 2.5rem)); }
  .catalog-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
}
.post-type-actions a { display:flex; align-items:center; justify-content:center; gap:.45rem; }
.post-type-actions .post-type-icon { width:3rem; height:3rem; flex:0 0 3rem; object-fit:contain; }