body { background-color: #09070A; color: #F4ECE6; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; position: relative; }
    h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', serif; }
    .glass-nav { background: rgba(9, 7, 10, 0.9); backdrop-filter: blur(14px); }
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    .animate-bounce-slow { animation: bounce-slow 2.6s infinite; }
    .nav-main-link { position: relative; display: inline-flex; align-items: center; }
    .nav-main-link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -10px;
      width: 100%;
      height: 2px;
      background: #D2132A;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s ease;
    }
    .nav-main-link.active::after { transform: scaleX(1); }
    .nav-main-link.is-clicked { animation: nav-tap 0.28s ease; }
    .nav-main-link:focus-visible,
    .nav-dropdown-trigger:focus-visible,
    .nav-dropdown-item:focus-visible,
    .mobile-nav-dropdown-trigger:focus-visible,
    .mobile-nav-dropdown-item:focus-visible,
    #mobile-menu-btn:focus-visible {
      outline: 2px solid #FF2C3F;
      outline-offset: 4px;
      border-radius: 8px;
    }
    .nav-dropdown {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .nav-dropdown-trigger {
      gap: 7px;
      background: transparent;
      border: 0;
      cursor: pointer;
      padding: 0;
      color: inherit;
      font: inherit;
    }
    .nav-dropdown-chevron {
      font-size: 10px;
      transition: transform 0.18s ease;
    }
    .nav-dropdown-panel {
      position: absolute;
      top: calc(100% + 18px);
      left: 50%;
      width: 330px;
      padding: 10px;
      border-radius: 14px;
      border: 1px solid rgba(244, 236, 230, 0.12);
      background: rgba(18, 13, 17, 0.96);
      box-shadow: 0 20px 52px rgba(0, 0, 0, 0.42);
      backdrop-filter: blur(16px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate(-50%, -8px);
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }
    .nav-dropdown-panel::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: -18px;
      height: 18px;
    }
    .nav-dropdown:hover .nav-dropdown-panel,
    .nav-dropdown:focus-within .nav-dropdown-panel,
    .nav-dropdown.is-open .nav-dropdown-panel {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }
    .nav-dropdown:hover .nav-dropdown-chevron,
    .nav-dropdown:focus-within .nav-dropdown-chevron,
    .nav-dropdown.is-open .nav-dropdown-chevron {
      transform: rotate(180deg);
    }
    .nav-dropdown-item {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 12px;
      align-items: start;
      padding: 12px;
      border-radius: 10px;
      color: #F4ECE6;
      text-decoration: none;
      transition: background-color 0.18s ease, transform 0.18s ease;
    }
    .nav-dropdown-item:hover {
      background: rgba(210, 19, 42, 0.14);
      transform: translateY(-1px);
    }
    .nav-dropdown-icon,
    .mobile-nav-dropdown-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: rgba(210, 19, 42, 0.14);
      color: #FF2C3F;
      border: 1px solid rgba(255, 44, 63, 0.2);
    }
    .nav-dropdown-title,
    .mobile-nav-dropdown-title {
      display: block;
      font-weight: 700;
      line-height: 1.25;
    }
    .nav-dropdown-desc,
    .mobile-nav-dropdown-desc {
      display: block;
      margin-top: 3px;
      color: #A79A99;
      font-size: 12px;
      line-height: 1.45;
    }
    .mobile-nav-dropdown {
      border-radius: 12px;
      background: #fbf7f4;
      border: 1px solid #f0e7e2;
      overflow: hidden;
    }
    .mobile-nav-dropdown-trigger {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 12px;
      color: #120D11;
      font-size: 16px;
      font-weight: 700;
      background: transparent;
      border: 0;
      cursor: pointer;
    }
    .mobile-nav-dropdown-trigger i {
      color: #D2132A;
      font-size: 12px;
      transition: transform 0.2s ease;
    }
    .mobile-nav-dropdown.is-open .mobile-nav-dropdown-trigger i {
      transform: rotate(180deg);
    }
    .mobile-nav-dropdown-panel {
      padding: 0 8px 10px;
      animation: mobile-dropdown-in 0.2s ease;
    }
    .mobile-nav-dropdown-panel[hidden] {
      display: none;
    }
    .mobile-nav-dropdown-item {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 11px;
      align-items: start;
      padding: 11px 8px;
      border-radius: 10px;
      color: #120D11;
      text-decoration: none;
    }
    .mobile-nav-dropdown-item:hover {
      background: #fff;
    }
    .mobile-nav-dropdown-title {
      color: #120D11;
      font-size: 14px;
    }
    @keyframes mobile-dropdown-in {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes nav-tap {
      0% { transform: scale(1); }
      45% { transform: scale(0.92); }
      100% { transform: scale(1); }
    }
    .featured-book-stage { background: linear-gradient(145deg, #1A1015 0%, #09070A 58%, #2A0710 100%); }
    .featured-book-image { width: min(72%, 320px); height: auto; max-height: 420px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,0.72)); }
    .landing-ambient {
      position: absolute;
      inset: 78px 0 auto;
      height: min(1100px, 122vw);
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .landing-ambient::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(900px 360px at 86% 15%, rgba(210,19,42,0.22) 0%, rgba(77,9,21,0.09) 55%, rgba(77,9,21,0) 100%),
        radial-gradient(560px 250px at 18% 24%, rgba(116,16,35,0.2) 0%, rgba(116,16,35,0.05) 62%, rgba(116,16,35,0) 100%),
        linear-gradient(rgba(255,236,220,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,236,220,0.045) 1px, transparent 1px),
        linear-gradient(rgba(210,19,42,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(210,19,42,0.026) 1px, transparent 1px),
        linear-gradient(180deg, #130D11 0%, #080609 50%, #17070D 100%);
      background-size: auto, auto, 44px 44px, 44px 44px, 11px 11px, 11px 11px, auto;
      background-position: center, center, center, center, center, center, center;
      clip-path: polygon(0 0, 100% 0, 100% 58%, 93% 69%, 87% 79%, 80% 87%, 68% 94%, 48% 98%, 26% 100%, 0 96%);
    }
    .landing-ambient::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom, rgba(9,7,10,0) 0%, rgba(9,7,10,0.22) 55%, rgba(9,7,10,0.86) 93%, #09070A 100%),
        radial-gradient(600px 190px at 84% 62%, rgba(210,19,42,0.14) 0%, rgba(210,19,42,0) 100%);
    }
    .ambient-curve,
    .ambient-orb {
      position: absolute;
      border-radius: 999px;
    }
    .ambient-curve {
      right: -170px;
      bottom: -200px;
      width: 760px;
      height: 430px;
      opacity: 0.42;
      background: radial-gradient(76% 74% at 42% 44%, rgba(52,18,25,0.72), rgba(17,9,13,0.54) 61%, rgba(17,9,13,0.08) 100%);
      transform: rotate(-13deg);
      border: 1px solid rgba(210, 19, 42, 0.28);
    }
    .ambient-orb-1 {
      left: -90px;
      top: 110px;
      width: 240px;
      height: 150px;
      opacity: 0.36;
      background: radial-gradient(circle at 40% 40%, rgba(210,19,42,0.2), rgba(210,19,42,0));
    }
    .ambient-orb-2 {
      right: 14%;
      top: 84px;
      width: 220px;
      height: 140px;
      opacity: 0.42;
      background: radial-gradient(circle at 50% 50%, rgba(255,44,63,0.18), rgba(255,44,63,0));
    }
    .ambient-layer {
      position: relative;
      z-index: 1;
      background: transparent !important;
      border-color: transparent !important;
    }
    #hero {
      background:
        radial-gradient(680px 420px at 78% 25%, rgba(116, 16, 35, 0.36), transparent 66%),
        radial-gradient(520px 360px at 20% 20%, rgba(210, 19, 42, 0.14), transparent 62%),
        linear-gradient(180deg, #0B070A 0%, #11090E 48%, #09070A 100%) !important;
    }
    #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(rgba(244, 236, 230, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244, 236, 230, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(210, 19, 42, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(210, 19, 42, 0.022) 1px, transparent 1px);
      background-size: 48px 48px, 48px 48px, 12px 12px, 12px 12px;
      opacity: 0.52;
    }
    #hero::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 18%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.34) 76%),
        linear-gradient(180deg, transparent 0%, rgba(9, 7, 10, 0.82) 100%);
    }
    .hero-copy-panel {
      position: relative;
      isolation: isolate;
      padding: 18px 0;
    }
    .hero-logo-watermark {
      position: absolute;
      left: -22px;
      top: 10px;
      width: min(520px, 96%);
      max-width: 520px;
      height: auto;
      object-fit: contain;
      object-position: left center;
      opacity: 0.18;
      pointer-events: none;
      z-index: 0;
      filter: saturate(0.9) contrast(1.02);
    }
    .hero-copy-panel > :not(.hero-logo-watermark) {
      position: relative;
      z-index: 1;
    }
    .hero-novel-panel,
    .featured-loading-zone .max-w-7xl {
      position: relative;
    }
    body.home-loading .hero-novel-panel > *,
    body.home-loading .featured-loading-zone .max-w-7xl > * {
      visibility: hidden;
    }
    body.home-loading .hero-novel-panel::after,
    body.home-loading .featured-loading-zone .max-w-7xl::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid rgba(244, 236, 230, 0.1);
      border-radius: 24px;
      background:
        linear-gradient(90deg, transparent, rgba(244, 236, 230, 0.11), transparent) -45% 0 / 42% 100% no-repeat,
        linear-gradient(135deg, rgba(32, 17, 24, 0.88), rgba(14, 8, 12, 0.96)),
        radial-gradient(circle at 28% 18%, rgba(210, 19, 42, 0.18), transparent 42%);
      box-shadow: 0 24px 62px rgba(0, 0, 0, 0.36);
      animation: home-loading-shimmer 1.2s ease-in-out infinite;
      pointer-events: none;
    }
    body.home-loading .hero-novel-panel {
      min-height: min(620px, 72vw);
    }
    body.home-loading .hero-novel-panel::after {
      inset: 36px 0 0;
    }
    body.home-loading .featured-loading-zone .max-w-7xl {
      min-height: 520px;
    }
    body.home-loading .featured-loading-zone .max-w-7xl::after {
      inset: 0 16px;
      background:
        linear-gradient(90deg, transparent, rgba(244, 236, 230, 0.1), transparent) -45% 0 / 42% 100% no-repeat,
        linear-gradient(90deg, rgba(244, 236, 230, 0.08) 0 34%, transparent 34% 41%, rgba(244, 236, 230, 0.08) 41% 100%),
        linear-gradient(135deg, rgba(32, 17, 24, 0.86), rgba(14, 8, 12, 0.96));
    }
    @keyframes home-loading-shimmer {
      to { background-position: 145% 0, 0 0, 0 0; }
    }
    #hero h1 {
      color: #FFF3EA !important;
      text-shadow: 0 4px 22px rgba(0, 0, 0, 0.88), 0 0 26px rgba(210, 19, 42, 0.2);
    }
    #hero p,
    #hero .text-secondary {
      color: #CBBDB8 !important;
    }
    .trending-rail { position: relative; }
    .trending-track {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding: 4px 44px 8px 2px;
    }
    .trending-card {
      position: relative;
      flex: 0 0 128px;
      width: 128px;
      height: 188px;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid #e5e7eb;
      background: #f4f4f5;
      box-shadow: 0 8px 16px rgba(17, 24, 39, 0.12);
      scroll-snap-align: start;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .trending-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 24px rgba(17, 24, 39, 0.18);
    }
    .trending-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .trending-rank-badge {
      position: absolute;
      left: 8px;
      top: 8px;
      min-width: 26px;
      height: 22px;
      border-radius: 999px;
      padding: 0 7px;
      background: rgba(17, 24, 39, 0.78);
      color: #f9fafb;
      font-size: 11px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(2px);
    }
    .trending-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid #e5e7eb;
      background: rgba(255, 255, 255, 0.95);
      color: #4b5563;
      box-shadow: 0 6px 14px rgba(17, 24, 39, 0.12);
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }
    .trending-nav-btn:hover {
      color: #18B8B3;
      border-color: #fed7aa;
    }
    .trending-nav-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .trending-nav-prev { left: -10px; }
    .trending-nav-next { right: -10px; }
    .preview-modal {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .preview-modal.hidden { display: none; }
    .preview-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(10, 18, 20, 0.62);
      backdrop-filter: blur(3px);
    }
    .preview-modal-card {
      position: relative;
      width: min(740px, 100%);
      max-height: min(84vh, 780px);
      overflow: hidden;
      border-radius: 20px;
      background: #ffffff;
      border: 1px solid rgba(24, 184, 179, 0.24);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
      animation: preview-modal-pop 0.22s ease;
    }
    .preview-scroll {
      max-height: min(54vh, 460px);
      overflow-y: auto;
    }
    .preview-scroll::-webkit-scrollbar { width: 8px; }
    .preview-scroll::-webkit-scrollbar-thumb {
      background: rgba(24, 184, 179, 0.34);
      border-radius: 999px;
    }
    @keyframes preview-modal-pop {
      from {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    @media (max-width: 768px) {
      .landing-ambient {
        inset: 70px 0 auto;
        height: 960px;
      }
      .landing-ambient::before {
        background-size: auto, auto, 38px 38px, 38px 38px, 9px 9px, 9px 9px, auto;
        clip-path: polygon(0 0, 100% 0, 100% 56%, 93% 68%, 85% 81%, 72% 90%, 54% 96%, 30% 100%, 0 96%);
      }
      .ambient-curve {
        right: -250px;
        width: 560px;
        height: 330px;
      }
      .hero-copy-panel {
        padding: 10px 0 0;
      }
      .hero-logo-watermark {
        left: 50%;
        transform: translateX(-50%);
        top: 24px;
        width: min(360px, 92%);
        opacity: 0.14;
        object-position: center;
      }
      .trending-track { padding-right: 8px; }
      .trending-nav-btn { display: none; }
      .trending-card {
        flex-basis: 114px;
        width: 114px;
        height: 170px;
      }
      .preview-modal-card {
        border-radius: 16px;
      }
    }
    @keyframes bounce-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

    /* Horror theme overrides for Tailwind utility-heavy markup and dynamic cards. */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 0%, rgba(210, 19, 42, 0.12), transparent 34%),
        radial-gradient(circle at 15% 28%, rgba(95, 8, 22, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(9, 7, 10, 0.12), #09070A 70%);
    }

    .bg-white,
    .bg-gray-50,
    .bg-teal-50,
    .preview-modal-card {
      background-color: rgba(18, 13, 17, 0.94) !important;
      color: #F4ECE6;
    }

    .bg-background {
      background-color: #09070A !important;
    }

    .bg-primary,
    .bg-accent {
      background: linear-gradient(135deg, #8F1021, #D2132A) !important;
    }

    .hover\:bg-accent:hover,
    .hover\:bg-accent-hover:hover {
      background: #FF2C3F !important;
    }

    .text-primary,
    .hover\:text-primary:hover {
      color: #F4ECE6 !important;
    }

    .text-secondary,
    .text-gray-300,
    .text-gray-400 {
      color: #A79A99 !important;
    }

    .text-accent,
    .hover\:text-accent:hover {
      color: #FF4050 !important;
    }

    .border-gray-100,
    .border-gray-200,
    .border-gray-300,
    .border-teal-100,
    .border-white\/50 {
      border-color: rgba(210, 19, 42, 0.24) !important;
    }

    .shadow-card,
    .shadow-lg,
    .shadow-xl,
    .shadow-2xl,
    .shadow-sm,
    .hover\:shadow-md:hover,
    .hover\:shadow-lg:hover {
      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.48), 0 0 24px rgba(210, 19, 42, 0.08) !important;
    }

    .shadow-teal-200,
    .hover\:shadow-teal-300:hover,
    .shadow-gray-200 {
      box-shadow: 0 16px 34px rgba(210, 19, 42, 0.28) !important;
    }

    .glass-nav {
      border-color: rgba(210, 19, 42, 0.22) !important;
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
    }

    #mobile-menu {
      background: rgba(9, 7, 10, 0.98) !important;
    }

    .hero-logo-watermark {
      opacity: 0.08;
      filter: grayscale(1) contrast(1.25) brightness(1.25) drop-shadow(0 0 30px rgba(210, 19, 42, 0.28));
    }

    .hero-copy-panel .inline-flex.rounded-full,
    #preview-status {
      background: rgba(143, 16, 33, 0.18) !important;
      border-color: rgba(255, 44, 63, 0.42) !important;
    }

    h1 svg {
      color: rgba(210, 19, 42, 0.52) !important;
      filter: blur(0.2px);
    }

    #hero .relative.rounded-2xl.overflow-hidden,
    .featured-book-stage,
    .trending-card,
    #event-banner-link,
    #chapter-preview article,
    #chapter-preview aside,
    #footer,
    #novelrush-seo-content,
    #reader-reviews {
      border-color: rgba(210, 19, 42, 0.22) !important;
    }

    #hero .absolute.bottom-6,
    .preview-modal-card,
    #event-banner-empty,
    #authors-grid > *,
    #reviews-grid > *,
    #event-list > * {
      background: linear-gradient(180deg, rgba(22, 15, 20, 0.96), rgba(10, 7, 10, 0.98)) !important;
      border-color: rgba(210, 19, 42, 0.24) !important;
    }

    .featured-book-stage {
      border-left-color: #4E0A16 !important;
      box-shadow: inset 18px 0 30px rgba(0, 0, 0, 0.35), 0 24px 54px rgba(0, 0, 0, 0.54) !important;
    }

    .trending-card {
      background: #120D11;
      border-color: rgba(210, 19, 42, 0.26);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.48);
    }

    .trending-card:hover {
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.56), 0 0 22px rgba(210, 19, 42, 0.2);
    }

    .trending-rank-badge,
    .bg-teal-100 {
      background: rgba(210, 19, 42, 0.86) !important;
      color: #FFF7F2 !important;
    }

    .trending-nav-btn {
      background: rgba(18, 13, 17, 0.94);
      color: #F4ECE6;
      border-color: rgba(210, 19, 42, 0.3);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    }

    .trending-nav-btn:hover {
      color: #FF4050;
      border-color: rgba(255, 44, 63, 0.58);
    }

    #about {
      background:
        radial-gradient(circle at 84% 20%, rgba(210, 19, 42, 0.2), transparent 30%),
        linear-gradient(135deg, #12070C 0%, #09070A 55%, #240811 100%) !important;
    }

    #footer {
      background: #080609 !important;
    }

    .preview-modal-backdrop {
      background: rgba(4, 3, 5, 0.82);
    }

    .preview-scroll::-webkit-scrollbar-thumb {
      background: rgba(210, 19, 42, 0.56);
    }