:root[data-product="novelamia"] {
  /* Color tokens - Based on novelamia.less */
  --accent: #EC2E53;
  --active: #f9d320;
  --bg: #141414;
  --blocked-bg: color-mix(in srgb, #0e1925 50%, transparent);
  --blocked-color: #fff;
  --btn-primary-bg: #EC2E53;
  --btn-primary-border: none;
  --btn-primary-color: #fff;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: 2px solid;
  --btn-secondary-color: #EC2E53;
  --card-bg: #fff;
  --card-border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  --card-color: #222212;
  --cfg-bg: color-mix(in srgb, var(--bg) 80%, transparent);
  --cfg-color: var(--color);
  --color: #FFFFFF;
  --home-background-color: var(--bg);
  --home-color: var(--color);
  --content-bg: #F9EEC6;
  --content-color: #3E3E3E;
  --content-element-bg: var(--accent);
  --content-element-color: #fffdf0;
  --content-overlay-gradient: color-mix(in srgb, var(--content-bg) 100%, transparent) 0%, color-mix(in srgb, var(--content-bg) 5%, transparent) 2%, color-mix(in srgb, var(--content-bg) 0%, transparent) 5%, color-mix(in srgb, var(--content-bg) 0%, transparent) 95%, color-mix(in srgb, var(--content-bg) 5%, transparent) 98%, color-mix(in srgb, var(--content-bg) 100%, transparent) 100%;
  --content-overlay-light-gradient: color-mix(in srgb, var(--content-color) 10%, transparent) 0%, color-mix(in srgb, var(--content-color) 15%, transparent) 100%;
  --daily-bg-color: color-mix(in srgb, #45abb8 calc(100% - 15%), black 15%);
  --daily-btn-bg-color: #fff;
  --daily-btn-color: color-mix(in srgb, #45abb8 calc(100% - 15%), black 15%);
  --daily-color: #fff;
  --error: #bb2124;
  --highlight-bg: var(--accent);
  --highlight-color: #fff;
  --important-btn-bg: color-mix(in srgb, #222212 50%, transparent);
  --important-btn-border: 1px solid color-mix(in srgb, var(--important-btn-color) 50%, transparent);
  --important-btn-border-radius: 50px;
  --important-btn-color: #fff;
  --important-btn-highlight-bg: var(--accent);
  --important-btn-highlight-color: #fff;
  --important-btn-icon: none;
  --important-color: #fff;
  --info: #5bc0de;
  --input-color: #222212;
  --library-color: #45abb8;
  --modal-bg: #fffdf0;
  --modal-color: #222212;
  --nav-bg: color-mix(in srgb, var(--bg) 60%, transparent);
  --nav-color: var(--color);
  --nav-update-toast-bg: var(--bg);
  --nav-update-toast-border: 1px solid var(--accent);
  --nav-update-toast-color: var(--color);
  --nav-alt-color: var(--accent);
  --nav-bottom-icon-filter: brightness(1);
  --nav-bottom-text: var(--color);
  --overlay-gradient: color-mix(in srgb, var(--bg) 100%, transparent) 0, color-mix(in srgb, var(--bg) 30%, transparent) 50%, color-mix(in srgb, var(--bg) 15%, transparent) 65%, color-mix(in srgb, var(--bg) 7.5%, transparent) 75.5%, color-mix(in srgb, var(--bg) 3.7%, transparent) 82.85%, color-mix(in srgb, var(--bg) 1.9%, transparent) 88%, color-mix(in srgb, var(--bg) 0%, transparent) 100%;
  --player-bg: transparent;
  --player-color: #F9EEC6;
  --profile-panel-bg: white;
  --profile-panel-color: #000000;
  --progress-accent-color: #45abb8;
  --subscription-accent-color: #EC2E53;
  --subscription-badge-bg: #631a86;
  --success: #22bb33;
  --swiper-bg: #fbfbfb;
  --swiper-border: none;
  --toast-bg: #fffdf0;
  --toast-color: #222212;
  --warning: #dd2124;

  /* Font family tokens */
  --font-text: "Montserrat", sans-serif;
  --font-subtitle: "Montserrat", sans-serif;
  --font-title: "Lato", sans-serif;
  --font-special: "Montserrat", sans-serif;
  --font-title-special: "Montserrat", sans-serif;

  /* Card tokens */
  --card-wrapper-large-width: 180px;
  --card-wrapper-large-width-md: 290px;
  --card-wrapper-medium-width: 190px;
  --card-wrapper-medium-width-md: 290px;
  --cards-color: var(--color);
  --cards-background-color: var(--card-bg);

  /* Border radius tokens */
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 4px;

  /* Surface tokens */
  --card-border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  --surface: color-mix(in srgb, var(--bg, #111827) 18%, #ffffff);
  --column-card-image-radius: var(--radius-lg);
  --content-surface: color-mix(in srgb, var(--content-bg, #ffffff) 92%, #000 8%);

  /* Navigation bottom tokens - Custom for novelamia */
  --nav-bottom-align: flex-start;
  --nav-bottom-border: 1px solid color-mix(in srgb, white 60%, transparent);
  --nav-bottom-container-background: color-mix(in srgb, var(--bg) 60%, transparent);
  --nav-bottom-container-border: none;
  --nav-bottom-container-margin: 10px auto;
  --nav-bottom-container-padding-inline: 0;
  --nav-bottom-container-radius: 35px;
  --nav-bottom-gap: 0;
  --nav-bottom-height: 58px;
  --nav-bottom-justify: space-evenly;
  --nav-bottom-margin: 10px auto;
  --nav-bottom-padding-block: 0;
  --nav-bottom-padding-inline: 0;
  --nav-bottom-radius: 35px;
  --nav-bottom-shadow: none;
  --nav-bottom-surface: color-mix(in srgb, var(--bg) 60%, transparent);
  --nav-bottom-width: 640px;
  --nav-ui-color: var(--accent);

  /* Navigation top tokens */
  --nav-top-bg: color-mix(in srgb, var(--bg) 60%, transparent);
  --nav-top-color: var(--nav-color, var(--color));
}

/* Custom styles specific to NovelaMia */
:root[data-product="novelamia"] .nav-bottom-wrapper {
  align-items: flex-start;
  box-sizing: border-box;
  justify-content: space-evenly;
  gap: 0;
  margin: 10px auto;
  padding: 0;
  width: min(var(--nav-bottom-width, 620px), calc(100% - 20px));
  max-width: min(var(--nav-bottom-width, 620px), calc(100% - 20px));
  height: 58px;
  bottom: env(safe-area-inset-bottom);
  border-radius: 35px;
  border: 1px solid color-mix(in srgb, white 60%, transparent);
  overflow: visible;
}

:root[data-product="novelamia"] .nav-item-wrapper {
  margin: 0;
  height: 52px;
}

:root[data-product="novelamia"] .card-top-index {
  background-color: var(--content-bg);
  color: #3B3B3B;
}

:root[data-product="novelamia"] .card-top-wrapper {
  background-color: #2C2C2C;
}

:root[data-product="novelamia"] .card-top-wrapper .btn-primary {
  color: #3B3B3B;
}

:root[data-product="novelamia"] .category-pill {
  background-color: #EB3A4A;
  color: #fff;
  border-radius: var(--radius-lg);
}

:root[data-product="novelamia"] .icon-metadata {
  background-color: #EB3A4A;
}

:root[data-product="novelamia"] .no-content {
  min-height: 100vh;
}

:root[data-product="novelamia"] .no-content-copy {
  margin-bottom: 40vh;
}

:root[data-product="novelamia"] .card-top-counter {
  color: #EC2E53;
}

:root[data-product="novelamia"] .card-top-counter .icon-inner {
  background-color: #EC2E53;
}

:root[data-product="novelamia"] .post-nav-copy .metadata-wrapper {
  color: #EC2E53;
}

:root[data-product="novelamia"] .badge-item.badge-new {
  background-color: #EC2E53;
}

:root[data-product="novelamia"] .categories-pills-wrapper {
  padding-bottom: 20px;
}

:root[data-product="novelamia"] .nav-actions-wrapper {
  bottom: calc(max(env(safe-area-inset-bottom), 5px) + 65px);
}

:root[data-product="novelamia"] .cards-wrapper.swiper .swiper-slide {
  padding: 10px 4px 0 0;
}

:root[data-product="novelamia"] .post-intro-wrapper {
  background-color: transparent;
  background: transparent;
  color: var(--content-color);
}