/* ==========================================================================
   Cloudberry Garden — Fictioneer child theme stylesheet (v0.1)
   Ported from the static site's pastel design system (cloudberry-garden-css).
   Strategy: override Fictioneer's CSS custom properties first (safe, mode-aware),
   then reshape the few components whose geometry differs (nav pill, cards, reader).
   ========================================================================== */

/* ---------- 1. Tokens: light mode (Fictioneer: :root[data-mode=light]) ---------- */
:root, :root[data-mode=light] {
  /* Cloudberry palette, kept as our own names for reuse below */
  --cb-bg: #F7F0F6; --cb-page: #FCF9FE; --cb-panel: #FFFFFF; --cb-soft: #FBF6FD;
  --cb-border: #F1E7F7; --cb-border-2: #ECDFF4; --cb-border-hover: #D9C4EE;
  --cb-ink: #84778F; --cb-muted: #8A7B9C; --cb-ink-strong: #6B5C7E; --cb-head: #5E4A86; --cb-head-2: #6E55A0;
  --cb-accent: #7E63B4; --cb-accent-2: #9B7FC9; --cb-accent-3: #C9A9E1; --cb-blush: #E07BA0; --cb-blush-soft: #FBE3EE;
  --cb-sage: #79A472; --cb-star: #E3A24B; --cb-pill: #EDE3F6;
  --cb-grad-title: linear-gradient(98deg, #7257AC 0%, #9468C4 44%, #CC8FCE 100%);
  --cb-grad-btn: linear-gradient(135deg, #AE8DDC, #8C6AC2);
  --cb-shadow-card: 0 12px 26px -12px rgba(150,118,185,.4);
  --cb-shadow-card-h: 0 22px 40px -14px rgba(150,118,185,.55);
  --cb-shadow-panel: 0 20px 48px -26px rgba(150,118,185,.5);
  --cb-shadow-sm: 0 3px 10px rgba(150,120,185,.12);
  --cb-glass: rgba(255,255,255,.72);
}

/* ---------- 2. Tokens: dark mode (Fictioneer's :root is the dark default) ---------- */
:root:not([data-mode=light]), :root[data-mode=dark] {
  --cb-bg: #15111F; --cb-page: #1E1A29; --cb-panel: #241E33; --cb-soft: #2A2338;
  --cb-border: #33293F; --cb-border-2: #3A3050; --cb-border-hover: #4A3D63;
  --cb-ink: #C3B6D2; --cb-muted: #A99CBE; --cb-ink-strong: #C4B6D2; --cb-head: #D9C7F0; --cb-head-2: #D2C2EA;
  --cb-accent: #C9A9E1; --cb-accent-2: #B294DC; --cb-accent-3: #C9A9E1; --cb-blush: #EC8FB2; --cb-blush-soft: #3A2A3A;
  --cb-pill: #322A47;
  --cb-grad-title: linear-gradient(98deg, #C9A9E1 0%, #B294DC 50%, #EC8FB2 100%);
  --cb-grad-btn: linear-gradient(135deg, #9B7FC9, #7E63B4);
  --cb-shadow-card: 0 12px 26px -14px rgba(0,0,0,.5);
  --cb-shadow-card-h: 0 22px 40px -14px rgba(0,0,0,.6);
  --cb-shadow-panel: 0 20px 48px -28px rgba(0,0,0,.55);
  --cb-shadow-sm: 0 3px 10px rgba(0,0,0,.3);
  --cb-glass: rgba(36,30,51,.78);
}

/* ---------- 3. Map onto Fictioneer's property system ---------- */
:root, :root[data-mode=light], :root[data-mode=dark] {
  /* Typography */
  --ff-base: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  --ff-heading: "Cormorant Garamond", Georgia, serif;
  --ff-note: "Marcellus", Georgia, serif;
  --ff-card-title: var(--ff-heading);
  --ff-site-title: "Marcellus", Georgia, serif;
  --ff-story-title: var(--ff-heading);
  --ff-chapter-title: var(--ff-heading);
  --font-weight-heading: 600;
  --font-weight-strong: 700;
  --font-weight-medium: 500;
  --font-weight-navigation: 600;
  --font-weight-card-label: 600;

  /* Layout */
  --site-width: 1180px;
  --layout-border-radius-large: 18px;
  --layout-border-radius-small: 12px;
  --layout-nested-border-radius-multiplier: 0.75;
  --header-height: 0px;              /* we replace the big banner header with the compact Cloudberry bar */
  --header-image-height: 0px;
  --navigation-height: 56px;
  --navigation-font-size: 14px;

  /* Surfaces */
  --body-bg-color: var(--cb-bg);
  --site-bg-color: var(--cb-page);
  --page-bg-color: var(--cb-panel);
  --card-bg-color: var(--cb-panel);
  --card-footer-bg-color: var(--cb-soft);
  --card-frame-border-color: var(--cb-border);
  --card-box-shadow: var(--cb-shadow-card);
  --card-drop-shadow: none;
  --card-overlay-bg-color: var(--cb-soft);
  --modal-bg-color: var(--cb-panel);
  --mobile-menu-background: var(--cb-page);
  --mobile-menu-advanced-background: var(--cb-soft);
  --layout-lineart-color: var(--cb-border-2);
  --layout-hr-border: 1px solid var(--cb-border-2);
  --hr-dots-color: var(--cb-accent-3);
  --infobox-background: var(--cb-soft);

  /* Text */
  --fg-100: var(--cb-head); --fg-200: var(--cb-head); --fg-300: var(--cb-head-2); --fg-400: var(--cb-ink-strong);
  --fg-500: var(--cb-ink-strong); --fg-600: var(--cb-ink); --fg-700: var(--cb-muted); --fg-800: var(--cb-muted);
  --fg-900: var(--cb-accent-3); --fg-950: var(--cb-accent-3);
  --fg-inverted: #FFFFFF; --fg-tinted: var(--cb-head-2);
  --layout-link-color: var(--cb-accent);
  --layout-link-color-hover: var(--cb-head-2);
  --primary-400: var(--cb-accent-2); --primary-500: var(--cb-accent); --primary-600: var(--cb-head-2);
  --card-footer-color: var(--cb-muted); --card-footer-icon-color: var(--cb-accent-2); --card-text-icon-color: var(--cb-accent-2);
  --card-label-background: var(--cb-pill); --card-label-color: var(--cb-accent);

  /* Navigation */
  --navigation-background: transparent;
  --navigation-color: var(--cb-ink-strong);
  --navigation-color-hover: var(--cb-head);
  --navigation-item-background-hover: var(--cb-soft);
  --navigation-submenu-background: var(--cb-panel);
  --navigation-subitem-background-hover: var(--cb-soft);
  --navigation-subitem-divider: 1px solid var(--cb-border);
  --navigation-drop-shadow: none;
  --navigation-submenu-box-shadow: var(--cb-shadow-panel);

  /* Buttons & inputs */
  --button-primary-background: var(--cb-grad-btn);
  --button-primary-background-hover: var(--cb-grad-btn);
  --button-primary-background-disabled: var(--cb-border-hover);
  --button-primary-color: #FFFFFF; --button-primary-color-hover: #FFFFFF; --button-primary-color-disabled: #FFFFFF;
  --button-secondary-background: var(--cb-panel);
  --button-secondary-background-hover: var(--cb-soft);
  --button-secondary-border: 1px solid var(--cb-border-2);
  --button-secondary-border-hover: 1px solid var(--cb-accent-2);
  --button-secondary-color: var(--cb-accent); --button-secondary-color-hover: var(--cb-head-2);
  --button-quick-background: var(--cb-pill); --button-quick-background-hover: var(--cb-border-hover);
  --button-quick-color: var(--cb-accent); --button-quick-color-hover: var(--cb-head);
  --button-box-shadow: var(--cb-shadow-sm);
  --button-font-weight: 600;
  --input-background: var(--cb-soft); --input-color: var(--cb-ink-strong); --input-fill: var(--cb-accent-2);
  --input-placeholder-color: var(--cb-muted);
  --pagination-background: var(--cb-panel); --pagination-background-current: var(--cb-accent);
  --pagination-color: var(--cb-accent); --pagination-color-hover: var(--cb-head);
}

/* ---------- 4. Base ---------- */
body { font-family: var(--ff-base); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .heading { font-family: var(--ff-heading); letter-spacing: -.01em; }
a { transition: color .2s ease; }

/* Fictioneer's "site" column → soft page surface with a generous radius */
.site { background: var(--cb-page); border-radius: 0; }
.main__wrapper, .main__background { border-radius: var(--layout-border-radius-large); }
.main__background { background: var(--cb-panel); box-shadow: var(--cb-shadow-panel); }

/* ---------- 5. Header → compact Cloudberry bar ---------- */
.header { min-height: 0; }
.header__logo, .header__title { display: none; }      /* the site name is rendered in the nav bar instead */
.top-header { padding: 14px 0 4px; }
.top-header__title, .top-header__heading { font-family: var(--ff-site-title); }
.top-header__link { color: var(--cb-head); text-decoration: none; }

.main-navigation { padding: 12px clamp(12px, 2vw, 26px) 6px; }
.main-navigation__background { background: transparent; box-shadow: none; }
.main-navigation__wrapper {
  background: var(--cb-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--cb-border); border-radius: 999px; box-shadow: var(--cb-shadow-sm);
  padding: 6px 10px; min-height: 56px; max-width: var(--site-width); margin: 0 auto;
}
.main-navigation__left .menu-item > a,
.main-navigation__left .menu-item > span {
  border-radius: 999px; padding: 9px 15px; font-weight: 600; color: var(--cb-ink-strong); font-size: 14px;
}
.main-navigation__left .menu-item > a:hover { background: var(--cb-soft); color: var(--cb-head); }
.main-navigation__left .menu-item.current-menu-item > a,
.main-navigation__left .menu-item.current_page_item > a { background: var(--cb-pill); color: var(--cb-accent); }
.main-navigation__right .icon-menu__item > a,
.main-navigation__right .icon-menu__item > button,
.main-navigation__right .icon-menu__item > label {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cb-border-2); background: var(--cb-panel);
  color: var(--cb-accent); display: inline-flex; align-items: center; justify-content: center; transition: .2s;
}
.main-navigation__right .icon-menu__item > a:hover,
.main-navigation__right .icon-menu__item > button:hover { border-color: var(--cb-accent-2); color: var(--cb-head-2); transform: translateY(-1px); }
.main-navigation__right .icon-menu { gap: 8px; }
.mobile-menu-button { border-radius: 50%; }

/* ---------- 6. Cards ---------- */
.card {
  background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: var(--layout-border-radius-large);
  box-shadow: var(--cb-shadow-card); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--cb-shadow-card-h); border-color: var(--cb-border-hover); }
.card__body { padding: 16px; }
.card__title { font-family: var(--ff-card-title); font-weight: 600; font-size: 1.15rem; line-height: 1.25; }
.card__title a { color: var(--cb-head); }
.card__title a:hover { color: var(--cb-accent); }
.card__image, .card__image img { border-radius: 12px; }
.card__label { border-radius: 999px; padding: 3px 10px; font-family: var(--ff-note); font-size: 11px; letter-spacing: .02em; }
.card__footer { border-top: 1px solid var(--cb-border); border-radius: 0 0 var(--layout-border-radius-large) var(--layout-border-radius-large); }
.card__footer-box, .card__footer > * { color: var(--cb-muted); font-family: var(--ff-note); font-size: 12px; }
.card__tag-list a, .tag-pill { border-radius: 999px; background: var(--cb-pill); color: var(--cb-accent); padding: 3px 10px; font-size: 12px; }
.card__tag-list a:hover { background: var(--cb-border-hover); color: var(--cb-head); }

/* ---------- 7. Buttons ---------- */
.button, button.button, .button._primary, .button._secondary {
  border-radius: 999px; font-family: var(--ff-base); font-weight: 600; letter-spacing: .01em;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.button._primary { background: var(--cb-grad-btn); color: #fff; border: 0; box-shadow: 0 10px 22px -8px rgba(140,106,194,.7); }
.button._primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -7px rgba(140,106,194,.7); }
.button._secondary:hover { transform: translateY(-2px); }

/* ---------- 8. Story & chapter pages ---------- */
.story__header, .chapter__headline { text-align: left; }
.story__title, .chapter__title, .post__title {
  font-family: var(--ff-heading); font-weight: 600;
  background: var(--cb-grad-title); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chapter__article { max-width: 760px; margin: 0 auto; }
.chapter-formatting, .chapter__content { font-size: 1.08rem; line-height: 1.85; color: var(--cb-ink-strong); }
.chapter__content p { margin: 0 0 1.1em; }
.infobox, .chapter__password-note { border-radius: var(--layout-border-radius-small); background: var(--cb-soft); border: 1px solid var(--cb-border); }
.progress__bar { background: var(--cb-grad-btn); }

/* ---------- 9. Pagination, footer, misc ---------- */
.pagination a, .pagination span { border-radius: 999px; }
.footer { color: var(--cb-muted); }
.footer__wrapper { border-top: 1px solid var(--cb-border-2); padding-top: 22px; font-family: var(--ff-note); font-size: 12.5px; }
.footer a { color: var(--cb-accent); }
.footer a:hover { color: var(--cb-head-2); }
input, textarea, select { border-radius: 12px !important; border: 1px solid var(--cb-border-2) !important; }
input:focus, textarea:focus, select:focus { border-color: var(--cb-accent-2) !important; box-shadow: 0 0 0 3px rgba(155,127,201,.18); outline: 0; }
::selection { background: var(--cb-pill); color: var(--cb-head); }

/* ---------- 10. v0.1 refinements ---------- */
/* Brand in the nav bar (the proper markup is added by the child theme's functions.php via a
   Fictioneer hook; this pseudo-element keeps the preview honest until the child theme is active). */
.main-navigation__wrapper:not(:has(.cb-brand)) .main-navigation__left::before {
  content: "Cloudberry Garden"; font-family: var(--ff-site-title); font-size: 19px; letter-spacing: .01em;
  background: var(--cb-grad-title); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 6px 12px 6px 8px; margin-right: 6px; white-space: nowrap;
}
.cb-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; padding: 4px 12px 4px 6px; margin-right: 6px; }
.cb-brand__mark { width: 34px; height: 34px; border-radius: 11px; }
.cb-brand__name { font-family: var(--ff-site-title); font-size: 19px; letter-spacing: .01em; background: var(--cb-grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.cb-brand__tag { display: none; }

/* Post / archive index: lighter meta, no towering empty panel */
.main { min-height: 0; }
.post__meta, .post__meta > * { font-family: var(--ff-note); font-size: 12.5px; color: var(--cb-muted); }
.post__meta i { color: var(--cb-accent-2); }
.post__title a { color: var(--cb-head); }
.more-link, .post__read-more { color: var(--cb-accent); font-weight: 600; }

/* Mobile: keep the pill but let the burger sit with the brand */
@media (max-width: 767px) {
  .main-navigation { padding: 10px 12px 4px; }
  .main-navigation__wrapper { padding: 6px 8px; min-height: 52px; }
  .main-navigation__wrapper:not(:has(.cb-brand)) .main-navigation__left::before { font-size: 17px; }
}

/* ---------- 11. v0.2: layout, mobile nav, story/stories pages, hero ---------- */
.site { min-height: 100vh; }
.main__wrapper { min-height: 0; }
.main { padding-bottom: 24px; }

/* Mobile: collapse the text menu into Fictioneer's burger menu */
@media (max-width: 767px) {
  .main-navigation__left { display: none !important; }
  .main-navigation__wrapper { gap: 8px; }
}

/* Hero (home page) */
.cb-hero { display: grid; grid-template-columns: 1.4fr .8fr; gap: 28px; align-items: center; padding: 26px 12px 34px; }
.cb-hero__eyebrow { font-family: var(--ff-note); color: var(--cb-blush); font-size: 13px; letter-spacing: .04em; margin: 0 0 10px; }
.cb-hero__title { font-family: var(--ff-heading); font-weight: 600; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08; margin: 0 0 14px;
  background: var(--cb-grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cb-hero__lead { color: var(--cb-ink); font-size: 1.05rem; line-height: 1.65; max-width: 560px; margin: 0 0 22px; }
.cb-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cb-hero__btn { padding: 12px 22px; font-size: 14.5px; }
.cb-hero__art { display: flex; justify-content: center; }
.cb-hero__art svg { width: min(260px, 60%); filter: drop-shadow(0 24px 40px rgba(150,118,185,.35)); animation: cb-float 6s ease-in-out infinite; }
@keyframes cb-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@media (max-width: 767px) { .cb-hero { grid-template-columns: 1fr; text-align: center; padding-top: 10px; } .cb-hero__lead { margin-inline: auto; } .cb-hero__actions { justify-content: center; } .cb-hero__art { order: -1; } .cb-hero__art svg { width: 120px; } }
.cb-section-title { font-family: var(--ff-heading); font-weight: 600; font-size: 1.55rem; color: var(--cb-head); margin: 26px 0 14px; display: flex; align-items: center; gap: 8px; }
.cb-section-title .cb-accent { font-size: 1rem; color: var(--cb-blush); }

/* Page & section headings */
.main__wrapper > h1, .stories__header, .chapters__header { font-family: var(--ff-heading); }
h1.top-level-title, .page-title, .main .heading { color: var(--cb-head); }

/* Stories page: stat boxes + list cards */
.statistics__inline-stat, .stats__box, .statistics__box { background: var(--cb-soft); border: 1px solid var(--cb-border); border-radius: 14px; }
.card__link-list-item { border-radius: 10px; background: var(--cb-soft); }
.card__link-list-item:hover { background: var(--cb-pill); }
.card__link-list-link { color: var(--cb-accent); }
.card__footer-box { background: var(--cb-soft); border-radius: 10px; }
.card__footer-box > * { color: var(--cb-muted); }
.card__by-author { color: var(--cb-muted); font-style: italic; }
.card__title { font-size: 1.25rem; }
.card__content { color: var(--cb-ink-strong); }
.sort-order-filter, .list-button { color: var(--cb-accent-2); }
.sort-order-filter ._on, .list-button._on { color: var(--cb-accent); }

/* Story page */
.story__identity-title { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.story__identity-meta, .story__meta, .story__meta-item, .story__date, .story__words, .story__rating, .story__status { color: var(--cb-muted); font-family: var(--ff-note); }
.story__summary { color: var(--cb-ink-strong); font-size: 1.05rem; line-height: 1.7; }
.story__actions .button, .button-follow-story, .button-read-later { border-radius: 999px; }
.story__chapters .chapter-group { border-radius: var(--layout-border-radius-small); }
.chapter-group__list-item { background: var(--cb-soft); border: 1px solid var(--cb-border); border-radius: 12px; margin-bottom: 8px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.chapter-group__list-item:hover { border-color: var(--cb-border-hover); transform: translateX(3px); box-shadow: var(--cb-shadow-sm); }
.chapter-group__list-item-link { color: var(--cb-head); font-weight: 600; }
.chapter-group__list-item-subrow, .chapter-group__list-item-date, .chapter-group__list-item-words { color: var(--cb-muted); font-family: var(--ff-note); }
.chapter-group__list-item-checkmark, .checkmark { color: var(--cb-sage); }
.chapter-group__list-item .icon { color: var(--cb-accent-2); }
.story__chapter-list-toggles .list-button, .story__toggle { color: var(--cb-accent); }
.story__chapters .button, .story__tab-target .button._secondary, .story__chapter-list-toggles > .button {
  background: var(--cb-pill); color: var(--cb-accent); border: 0; }

/* Chapter page */
.chapter__article { padding-top: 10px; }
.chapter__headline, .chapter__title { text-align: center; }
.chapter__story-link { font-family: var(--ff-note); color: var(--cb-accent); }
.chapter__content { max-width: 720px; margin: 0 auto; }
.chapter-formatting { font-family: var(--ff-heading); font-size: 1.22rem; line-height: 1.85; color: var(--cb-ink-strong); }
:root[data-mode=light] .chapter-formatting { color: #4E3F6B; }
.tools-wrapper, .chapter__actions { border-radius: var(--layout-border-radius-small); }
.progress { background: var(--cb-border); }

/* Breadcrumbs + footer */
.breadcrumbs, .breadcrumbs a, .breadcrumbs span { font-family: var(--ff-note); color: var(--cb-muted); }
.breadcrumbs a { color: var(--cb-accent); }
.statistics__inline-stat { color: var(--cb-muted); font-family: var(--ff-note); }
.statistics__inline-stat strong, .statistics__inline-stat b { color: var(--cb-head); }

/* Story cover: no banner-overlap offset (we have no header image), soft frame */
.story__header { margin-top: 0 !important; padding-top: 4px; }
.story__thumbnail { transform: none !important; margin-top: 0 !important; }
.story__thumbnail-image { border-radius: 14px; box-shadow: var(--cb-shadow-card); }
/* List/compact cards: crop covers from the top so titles stay visible */
.card__image img, .card__image { object-position: top center; }
.card__image { border-radius: 12px; overflow: hidden; }

/* ---------- 12. Auth pages + nav account buttons ---------- */
.cb-nav-auth { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; }
.cb-nav-btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 9px 16px; font-family: var(--ff-note); font-size: 14px; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; white-space: nowrap; }
.cb-nav-btn--soft { background: var(--cb-panel); border: 1px solid var(--cb-border-2); color: var(--cb-accent); }
.cb-nav-btn--soft:hover { border-color: var(--cb-accent-2); color: var(--cb-head-2); transform: translateY(-1px); }
.cb-nav-btn--primary { background: var(--cb-grad-btn); color: #fff; box-shadow: 0 10px 22px -8px rgba(140,106,194,.7); }
.cb-nav-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -7px rgba(140,106,194,.7); color: #fff; }
.cb-nav-btn--ghost { color: var(--cb-muted); padding-inline: 10px; }
.cb-nav-btn--ghost:hover { color: var(--cb-head); }
@media (max-width: 767px) { .cb-nav-auth .cb-nav-btn--soft, .cb-nav-auth .cb-nav-btn--ghost { display: none; } .cb-nav-btn { padding: 8px 13px; font-size: 13px; } }

.cb-auth-main .main__wrapper { display: grid; place-items: center; }
.cb-auth-wrap { width: 100%; display: grid; place-items: center; padding: 26px 0 34px; }
.cb-auth-card { width: min(460px, 100%); text-align: center; background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: 22px; box-shadow: var(--cb-shadow-panel); padding: 30px 28px 24px; }
.cb-auth-card__mark { width: 64px; height: 64px; margin: 0 auto 10px; display: block; }
.cb-auth-card__title { font-family: var(--ff-heading); font-weight: 600; font-size: 1.9rem; color: var(--cb-head); margin: 0; }
.cb-auth-card__sub { color: var(--cb-muted); margin: 8px 0 16px; }
.cb-auth-form { display: grid; gap: 14px; text-align: left; }
.cb-field { display: grid; gap: 6px; }
.cb-label { font-family: var(--ff-note); font-size: 12.5px; color: var(--cb-ink-strong); letter-spacing: .02em; }
.cb-input { width: 100%; padding: 12px 14px; border-radius: 12px !important; background: var(--cb-soft); color: var(--cb-ink-strong); font-family: var(--ff-base); font-size: 15px; }
.cb-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--cb-muted); }
.cb-check input { accent-color: var(--cb-accent); }
.cb-auth-submit { width: 100%; justify-content: center; padding: 13px 18px; font-size: 15px; margin-top: 4px; }
.cb-auth-error { background: var(--cb-blush-soft); color: #B84A78; border: 1px solid #F3C6D9; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; text-align: left; }
:root:not([data-mode=light]) .cb-auth-error { color: #F5A9C7; border-color: #5A3A4A; }
.cb-auth-notice { background: #EAF4E7; color: #4F7A47; border: 1px solid #CFE5CA; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-bottom: 12px; text-align: left; }
:root:not([data-mode=light]) .cb-auth-notice { background: #22301F; color: #B6D9AE; border-color: #3A5236; }
.cb-auth-note { margin: 16px 0 0; font-size: 13.5px; color: var(--cb-muted); }
.cb-auth-note a { color: var(--cb-accent); font-weight: 600; }
.cb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Auth submit buttons stretch; mobile nav pill fits brand + burger + Sign Up */
.cb-auth-form .cb-auth-submit, .cb-auth-form .button._primary { display: flex !important; width: 100% !important; max-width: none !important; justify-content: center; }
@media (max-width: 767px) {
  .cb-brand { padding: 4px 6px 4px 2px; margin-right: 0; gap: 6px; }
  .cb-brand__mark { width: 28px; height: 28px; }
  .cb-brand__name { font-size: 15px; }
  .cb-nav-auth { margin-left: 0; }
  .cb-nav-btn--primary { padding: 7px 11px; font-size: 12.5px; }
  .main-navigation__wrapper { padding: 6px 6px 6px 10px; }
  .main-navigation__right { flex-shrink: 0; }
}

/* ---------- 13. Cloudberry Extras: tickets / shared bits ---------- */
.cbx-muted { color: var(--cb-muted); }
.cbx-flash { background: #EAF4E7; color: #4F7A47; border: 1px solid #CFE5CA; border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; }
:root:not([data-mode=light]) .cbx-flash { background: #22301F; color: #B6D9AE; border-color: #3A5236; }
.cbx-gate-card { text-align: center; padding: 34px 20px; background: var(--cb-soft); border: 1px solid var(--cb-border); border-radius: 18px; }
.cbx-gate-card i { font-size: 2rem; color: var(--cb-accent-2); }
.cbx-gate-card h2 { font-family: var(--ff-heading); color: var(--cb-head); margin: 8px 0 4px; }
.cbx-gate-card p { color: var(--cb-muted); margin: 0 0 16px; }
.cbx-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; }
@media (max-width: 860px) { .cbx-grid { grid-template-columns: 1fr; } }
.cbx-panel { background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: 18px; padding: 22px; box-shadow: var(--cb-shadow-sm); }
.cbx-panel h2 { font-family: var(--ff-heading); font-size: 1.4rem; color: var(--cb-head); margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.cbx-form { display: grid; gap: 8px; margin-top: 12px; }
.cbx-form .cb-label { margin-top: 4px; }
.cbx-form select.cb-input { appearance: auto; }
.cbx-form .button { justify-self: start; margin-top: 6px; }
.cbx-form__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cbx-inline { display: inline; }
.cbx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cbx-list__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--cb-soft); border: 1px solid var(--cb-border); text-decoration: none; transition: .2s; }
.cbx-list__row:hover { border-color: var(--cb-border-hover); transform: translateX(3px); }
.cbx-list__title { color: var(--cb-head); font-weight: 600; }
.cbx-list__meta { color: var(--cb-muted); font-size: 12.5px; font-family: var(--ff-note); grid-column: 1; }
.cbx-status { grid-column: 2; grid-row: 1 / span 2; justify-self: end; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-family: var(--ff-note); background: var(--cb-pill); color: var(--cb-accent); }
.cbx-status--answered { background: #EAF4E7; color: #4F7A47; }
.cbx-status--closed { background: var(--cb-border); color: var(--cb-muted); }
.cbx-back { display: inline-block; margin-bottom: 12px; color: var(--cb-accent); font-family: var(--ff-note); }
.cbx-thread__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cbx-thread__head h2 { font-family: var(--ff-heading); color: var(--cb-head); margin: 0; font-size: 1.5rem; }
.cbx-msg { border-radius: 14px; padding: 12px 16px; margin-bottom: 10px; max-width: 85%; }
.cbx-msg--me { background: var(--cb-soft); border: 1px solid var(--cb-border); }
.cbx-msg--staff { background: var(--cb-pill); margin-left: auto; }
.cbx-msg__meta { font-family: var(--ff-note); font-size: 12px; color: var(--cb-muted); margin-bottom: 4px; }
.cbx-msg__body p { margin: 0 0 .5em; color: var(--cb-ink-strong); }

/* ---------- 14. Beries wallet + chapter lock ---------- */
.cbx-wallet__balance { display: grid; justify-items: center; gap: 4px; padding: 26px 20px; border-radius: 20px; background: linear-gradient(135deg, var(--cb-pill), var(--cb-soft)); border: 1px solid var(--cb-border); margin-bottom: 8px; }
.cbx-wallet__label { font-family: var(--ff-note); color: var(--cb-muted); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.cbx-wallet__num { font-family: var(--ff-heading); font-weight: 600; font-size: 3.2rem; line-height: 1; background: var(--cb-grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cbx-wallet__hint { color: var(--cb-muted); font-size: 13px; }
.cbx-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.cbx-pack { position: relative; text-align: center; padding: 22px 14px 16px; border-radius: 18px; background: var(--cb-panel); border: 1px solid var(--cb-border); box-shadow: var(--cb-shadow-card); transition: transform .2s, box-shadow .2s; display: grid; gap: 2px; justify-items: center; }
.cbx-pack:hover { transform: translateY(-4px); box-shadow: var(--cb-shadow-card-h); }
.cbx-pack.is-labeled { border-color: var(--cb-accent-3); }
.cbx-pack__label { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--cb-grad-btn); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-family: var(--ff-note); white-space: nowrap; }
.cbx-pack__n { font-family: var(--ff-heading); font-weight: 600; font-size: 2.2rem; color: var(--cb-head); line-height: 1.1; }
.cbx-pack__unit { font-family: var(--ff-note); color: var(--cb-muted); font-size: 12px; }
.cbx-pack__price { color: var(--cb-accent); font-weight: 700; margin: 6px 0 10px; }
.cbx-pack .button { width: 100%; justify-content: center; }
.cbx-ledger { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cbx-ledger li { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--cb-soft); border: 1px solid var(--cb-border); }
.cbx-ledger__delta { font-weight: 700; font-family: var(--ff-note); }
.cbx-ledger__delta.is-plus { color: var(--cb-sage); } .cbx-ledger__delta.is-minus { color: var(--cb-blush); }
.cbx-ledger__note { color: var(--cb-ink-strong); } .cbx-ledger__date { color: var(--cb-muted); font-size: 12.5px; font-family: var(--ff-note); }
/* Advance / locked chapter card */
.cbx-lock { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; margin: 46px 0 8px; padding: 50px 28px 30px; border-radius: 24px; background: radial-gradient(120% 90% at 50% 0%, var(--cb-pill) 0%, transparent 62%), var(--cb-soft); border: 1px solid var(--cb-border-2); box-shadow: var(--cb-shadow-panel); }
.cbx-lock__fade { position: absolute; left: 0; right: 0; top: -130px; height: 96px; z-index: 0; background: linear-gradient(to bottom, transparent, var(--cb-panel)); pointer-events: none; }
.cbx-lock__badge { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--cb-accent); background: var(--cb-panel); border: 1px solid var(--cb-border-2); box-shadow: 0 0 0 7px var(--cb-soft), var(--cb-shadow-card); }
.cbx-lock__svg { width: 28px; height: 28px; }
.cbx-lock__eyebrow { font: 700 11px/1 var(--ff-base); letter-spacing: .16em; text-transform: uppercase; color: var(--cb-accent); background: var(--cb-pill); padding: 7px 13px; border-radius: 999px; }
.cbx-lock h3 { font-family: var(--ff-heading); font-weight: 700; color: var(--cb-head); margin: 14px 0 12px; font-size: 2rem; line-height: 1.1; }
.cbx-lock__price { display: inline-flex; align-items: center; gap: 10px; padding: 10px 24px 10px 18px; border-radius: 999px; background: var(--cb-panel); border: 1px solid var(--cb-border-2); box-shadow: var(--cb-shadow-sm); }
.cbx-lock__price strong { font-family: var(--ff-note); font-weight: 400; font-size: 2.3rem; line-height: 1; color: var(--cb-head); }
.cbx-lock__unit { font-size: 14px; font-weight: 700; color: var(--cb-muted); align-self: flex-end; padding-bottom: 4px; }
.cbx-lock__berry .berry { width: 34px; height: 34px; display: block; }
.cbx-lock p { color: var(--cb-muted); margin: 0; }
.cbx-lock__sub { margin-top: 14px !important; font-size: 15px; }
.cbx-lock__free { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px !important; padding: 7px 14px; border-radius: 999px; border: 1px dashed var(--cb-border-hover); font-size: 13.5px; color: var(--cb-ink-strong) !important; }
.cbx-lock__free b { color: var(--cb-head); }
.cbx-lock__clock { width: 16px; height: 16px; flex: none; color: var(--cb-accent); }
.cbx-lock__bal { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px !important; font-size: 13.5px; }
.cbx-lock__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--cb-pill); color: var(--cb-head); }
.cbx-lock__chip .berry { width: 18px; height: 18px; }
.cbx-lock__chip strong { font-size: 14px; }
.cbx-lock__short { color: #B84A78; font-weight: 700; }
:root:not([data-mode=light]) .cbx-lock__short { color: #F5A9C7; }
.cbx-lock .cb-auth-error { margin: 14px 0 0; }
.cbx-lock form { display: inline-block; }
.cbx-lock .button { min-width: 220px; justify-content: center; margin-top: 22px !important; }

.cbx-pack .button, .cbx-lock .button { display: flex !important; width: 100% !important; max-width: none !important; justify-content: center; }
.cbx-lock .button { width: auto !important; min-width: 240px; margin: 0 auto; }

.cbx-lock .button, .cbx-lock form .button { display: inline-flex !important; width: auto !important; min-width: 240px; margin: 0 auto; }
@media (max-width: 520px) { .cbx-lock { padding: 48px 18px 26px; margin-left: 4px; margin-right: 4px; } .cbx-lock h3 { font-size: 1.7rem; } .cbx-lock .button { min-width: 0; width: 100% !important; } .cbx-lock form { width: 100%; } }

.cb-nav-beries { font-weight: 700; padding: 8px 14px; }
@media (max-width: 767px) { .cb-nav-auth .cb-nav-beries { display: inline-flex; } }

/* ---------- 15. Wallet page (ported from the static site's beris.html) ---------- */
.wallet { max-width: 1040px; margin: 0 auto; }
.berry { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex: none; }
.cbx-gate-card__berry .berry { width: 54px; height: 54px; }
.wallet-bal { background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: 20px; padding: 30px 34px; box-shadow: 0 18px 40px -28px rgba(126,99,180,.4); text-align: center; }
.wallet-bal__top { font-family: var(--ff-base); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-muted); }
.wallet-bal__row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 4px; }
.wallet-bal__row .berry { width: 44px; height: 44px; }
.wallet-bal__n { font-family: var(--ff-note); font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1; color: var(--cb-head); }
.wallet-bal__sub { font-family: var(--ff-base); font-size: 13.5px; color: var(--cb-muted); }
.wallet-pay { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 6px; }
.wallet-pay__l { font-family: var(--ff-base); font-size: 13.5px; color: var(--cb-muted); }
.wallet-pay__b { font-family: var(--ff-note); font-size: 14px; color: #fff; background: var(--cb-grad-btn); border: none; padding: 10px 20px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 10px 22px -12px rgba(126,99,180,.7); transition: transform .15s, box-shadow .15s; }
.wallet-pay__b:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(126,99,180,.8); }
.wallet-pay__cap { text-align: center; font-family: var(--ff-base); font-size: 13px; color: var(--cb-muted); margin-bottom: 6px; min-height: 18px; }
.wallet-pay__cap b { color: var(--cb-head); }
.wallet-note { text-align: center; font-family: var(--ff-base); font-size: 13px; color: var(--cb-muted); margin: 22px 0; }
.wallet-h { font-family: var(--ff-heading); font-weight: 600; font-size: 1.5rem; color: var(--cb-head); margin: 30px 0 16px; }
.wallet-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.wpack { position: relative; text-align: left; background: var(--cb-panel); border: 1.5px solid var(--cb-border); border-radius: 16px; padding: 18px 18px 16px; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; transition: border-color .15s, box-shadow .15s, transform .15s; min-height: 116px; margin: 0; }
.wpack input { position: absolute; opacity: 0; pointer-events: none; }
.wpack:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(126,99,180,.55); }
.wpack:has(input:checked) { border-color: var(--cb-accent); box-shadow: 0 0 0 3px rgba(126,99,180,.16); }
.wpack:has(input:disabled) { cursor: default; opacity: .75; }
.wpack__icon { grid-row: 1 / 3; }
.wpack__icon .berry { width: 34px; height: 34px; }
.wpack__amt { font-family: var(--ff-note); font-size: 1.6rem; color: var(--cb-head); line-height: 1.1; }
.wpack__sub { grid-column: 2; font-family: var(--ff-base); font-size: 12.5px; color: var(--cb-muted); }
.wpack__price { grid-column: 1 / 3; justify-self: end; align-self: end; margin-top: 8px; font-family: var(--ff-base); font-weight: 700; font-size: 13.5px; color: var(--cb-muted); }
.wpack__badge { position: absolute; top: -10px; left: 14px; background: #4F9E72; color: #fff; font-family: var(--ff-base); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 7px; box-shadow: 0 6px 14px -8px rgba(79,158,114,.9); }
.wallet-recent { background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: 18px; padding: 22px 24px; margin-top: 32px; }
.wallet-recent__h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wallet-recent__h h2 { font-family: var(--ff-heading); font-weight: 600; font-size: 1.3rem; color: var(--cb-head); margin: 0; }
.wallet-recent__h .cbx-muted { font-size: 13px; }
.wallet-recent__help { margin-left: auto; color: var(--cb-accent); font-family: var(--ff-base); font-weight: 700; font-size: 12.5px; }
.wallet-recent__empty { font-family: var(--ff-base); font-size: 13.5px; color: var(--cb-muted); margin: 6px 0; }
.wrec { width: 100%; border-collapse: collapse; font-family: var(--ff-base); }
.wrec th { text-align: left; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cb-muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--cb-border); }
.wrec td { padding: 12px 10px; border-bottom: 1px solid var(--cb-border); font-size: 14px; color: var(--cb-ink-strong); }
.wrec tr:last-child td { border-bottom: none; }
.wrec__t i { color: var(--cb-accent); margin-right: 6px; }
.wrec__t a { color: var(--cb-head); }
.wrec__d { color: var(--cb-muted); white-space: nowrap; }
.wrec__p { text-align: right; white-space: nowrap; }
.wrec__pill { display: inline-block; background: var(--cb-blush-soft); color: var(--cb-accent); font-weight: 700; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; }
.wallet-faq { margin-top: 34px; }
.wallet-faq__h { font-family: var(--ff-heading); font-weight: 600; font-size: 1.5rem; color: var(--cb-head); text-align: center; margin: 0 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.wallet-faq__h .berry { width: 26px; height: 26px; }
.wfaq { border-bottom: 1px solid var(--cb-border); }
.wfaq summary { list-style: none; cursor: pointer; padding: 16px 4px; font-family: var(--ff-note); font-size: 1.02rem; color: var(--cb-head); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wfaq summary::-webkit-details-marker { display: none; }
.wfaq summary i { color: var(--cb-accent); transition: transform .2s; font-size: 13px; }
.wfaq[open] summary i { transform: rotate(180deg); }
.wfaq__a { font-family: var(--ff-base); font-size: 14px; color: var(--cb-muted); line-height: 1.6; padding: 0 4px 18px; }
@media (max-width: 560px) { .wallet-packs { grid-template-columns: 1fr; } .wallet-bal { padding: 24px 18px; } .wallet-recent__help { margin-left: 0; } }

/* ---------- 16. Studio (translator analytics + earnings) ---------- */
.cbx-studio__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cbx-studio__title { font-family: var(--ff-heading); font-weight: 600; font-size: 1.9rem; color: var(--cb-head); margin: 0; }
.cbx-studio__controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cbx-seg { border-radius: 999px; padding: 7px 13px; border: 1px solid var(--cb-border-2); background: var(--cb-panel); color: var(--cb-accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.cbx-seg.is-active { background: var(--cb-pill); border-color: var(--cb-accent-3); color: var(--cb-head); }
.cbx-studio__pick { width: auto; padding: 7px 30px 7px 12px; margin-left: 8px; }
.cbx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cbx-tile { display: grid; gap: 2px; text-align: center; padding: 16px 12px; border-radius: 16px; background: var(--cb-soft); border: 1px solid var(--cb-border); }
.cbx-tile__n { font-family: var(--ff-note); font-size: 1.7rem; color: var(--cb-head); line-height: 1.1; }
.cbx-tile__l { font-size: 12px; color: var(--cb-muted); text-transform: uppercase; letter-spacing: .05em; }
.cbx-tile--money { background: linear-gradient(135deg, var(--cb-pill), var(--cb-soft)); } .cbx-tile--money .cbx-tile__n { color: var(--cb-accent); }
.cbx-tile--ga { border-color: #F3DDB5; background: #FFF8EC; } .cbx-tile--ga .cbx-tile__n { color: #B08A1F; }
.cbx-chart { background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: 18px; padding: 14px 16px 10px; margin-bottom: 24px; }
.cbx-chart__head { display: flex; justify-content: space-between; font-family: var(--ff-note); font-size: 13px; color: var(--cb-ink-strong); margin-bottom: 6px; }
.cbx-chart svg { width: 100%; height: 160px; display: block; }
.cbx-chart__bars rect { fill: var(--cb-accent-2); opacity: .85; } .cbx-chart__bars rect:hover { fill: var(--cb-blush); opacity: 1; }
.cbx-chart__axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--cb-muted); font-family: var(--ff-note); }
.cbx-tablewrap { overflow-x: auto; margin-bottom: 24px; }
.cbx-stable { width: 100%; border-collapse: collapse; font-size: 14px; }
.cbx-stable th { text-align: left; font-family: var(--ff-note); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--cb-muted); padding: 8px 10px; border-bottom: 1px solid var(--cb-border-2); }
.cbx-stable td { padding: 10px; border-bottom: 1px solid var(--cb-border); color: var(--cb-ink-strong); }
.cbx-stable__story { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.cbx-stable__story img, .cbx-stable__nocover { width: 34px; height: 46px; border-radius: 6px; object-fit: cover; background: var(--cb-pill); flex: none; }
.cbx-stable__story a { color: var(--cb-head); font-weight: 600; } .cbx-stable__story small { color: var(--cb-muted); margin-left: 4px; }
.cbx-money { color: var(--cb-accent); font-weight: 700; }
.cbx-studio__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .cbx-studio__grid { grid-template-columns: 1fr; } }
.cbx-kv { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.cbx-kv li { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--cb-soft); border: 1px solid var(--cb-border); font-size: 14px; color: var(--cb-muted); } .cbx-kv b { color: var(--cb-head); }
.cbx-list--front { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.cbx-list--front li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; background: var(--cb-soft); border: 1px solid var(--cb-border); border-radius: 10px; font-size: 13.5px; color: var(--cb-ink-strong); }
.cbx-list--front li .cbx-muted { margin-left: auto; font-size: 12.5px; }
.cbx-studio__adminnote { margin-top: 18px; font-size: 13px; }
.cb-nav-studio { font-weight: 600; }

/* ---------- 17. Ad slots + release countdown ---------- */
.cbx-ad { margin: 18px auto; text-align: center; max-width: 760px; }
.cbx-ad__label { display: block; font-family: var(--ff-note); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 6px; }
.cbx-ad--chapter_middle { margin: 26px auto; padding: 14px 0; border-top: 1px dashed var(--cb-border-2); border-bottom: 1px dashed var(--cb-border-2); }
.cbx-scene-break { border: 0; text-align: center; margin: 1.6em 0; } .cbx-scene-break::after { content: "✦ ✦ ✦"; color: var(--cb-accent-3); letter-spacing: .5em; font-size: 12px; }
.cbx-countdown { margin: 18px 0 8px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(135deg, var(--cb-pill), var(--cb-soft)); border: 1px solid var(--cb-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cbx-countdown__head { display: grid; gap: 2px; }
.cbx-countdown__eyebrow { font-family: var(--ff-note); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--cb-blush); }
.cbx-countdown__title { font-family: var(--ff-heading); font-weight: 600; font-size: 1.25rem; color: var(--cb-head); } .cbx-countdown__title small { font-size: .8rem; color: var(--cb-muted); font-family: var(--ff-base); }
.cbx-countdown__when { font-size: 12.5px; color: var(--cb-muted); font-family: var(--ff-note); }
.cbx-countdown__clock { display: flex; gap: 8px; }
.cbx-countdown__clock span { display: grid; place-items: center; min-width: 58px; padding: 8px 6px; border-radius: 12px; background: var(--cb-panel); border: 1px solid var(--cb-border); }
.cbx-countdown__clock b { font-family: var(--ff-note); font-size: 1.4rem; color: var(--cb-head); line-height: 1; } .cbx-countdown__clock i { font-style: normal; font-size: 10.5px; color: var(--cb-muted); text-transform: uppercase; letter-spacing: .06em; }
.cbx-countdown__clock em { color: var(--cb-sage); font-style: normal; font-weight: 600; }

/* Studio tabs + tiles extras */
.cbx-studio__tabs { display: flex; gap: 6px; }
.cbx-stab { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 9px 16px; border: 1px solid var(--cb-border-2); background: var(--cb-panel); color: var(--cb-accent); font-weight: 600; font-size: 14px; text-decoration: none; transition: .2s; }
.cbx-stab:hover { border-color: var(--cb-accent-2); color: var(--cb-head-2); transform: translateY(-1px); }
.cbx-stab.is-active { background: var(--cb-grad-btn); color: #fff; border-color: transparent; box-shadow: 0 10px 22px -8px rgba(140,106,194,.7); }
.cbx-studio__controls { margin: -4px 0 16px; }
.cbx-tile__t { font-size: 11.5px; font-family: var(--ff-note); } .cbx-tile__t.is-up { color: var(--cb-sage); } .cbx-tile__t.is-down { color: var(--cb-blush); }
.cbx-studio__note { margin: -12px 0 18px; font-size: 13.5px; color: var(--cb-muted); } .cbx-studio__note a { color: var(--cb-accent); font-weight: 600; }
.cbx-dates { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 4px 6px 4px 8px; border-radius: 999px; border: 1px solid var(--cb-border-2); background: var(--cb-panel); }
.cbx-dates.is-active { border-color: var(--cb-accent-3); background: var(--cb-pill); }
.cbx-dates .cbx-date { width: auto; padding: 5px 8px; font-size: 13px; border-radius: 999px !important; }
.cbx-dates__sep { color: var(--cb-muted); font-size: 12px; }
.cbx-seg--btn { border: 0; cursor: pointer; background: var(--cb-grad-btn); color: #fff; }
@media (max-width: 640px) { .cbx-dates { flex-wrap: wrap; border-radius: 14px; } }

/* ---------- 18. Community: Garden Talk chat + Forum (ported from the static site) ---------- */
.cbx-guidelines ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--cb-ink); }
.cbx-ctabs { display: flex; gap: 8px; margin: 22px 0 14px; }
.cbx-ctab { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 10px 18px; border: 1px solid var(--cb-border-2); background: var(--cb-panel); color: var(--cb-accent); font-family: var(--ff-base); font-weight: 600; font-size: 14px; cursor: pointer; transition: .2s; }
.cbx-ctab.is-active { background: var(--cb-grad-btn); color: #fff; border-color: transparent; box-shadow: 0 10px 22px -8px rgba(140,106,194,.7); }
.cbx-badge { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-family: var(--ff-note); letter-spacing: .04em; vertical-align: middle; margin-left: 4px; }
.cbx-badge--admin { background: var(--cb-blush-soft); color: var(--cb-blush); } .cbx-badge--translator { background: #E3F1E6; color: #3F8A5E; }
.cbx-av { width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-family: var(--ff-note); font-size: 13px; }
.chat { display: flex; flex-direction: column; height: 72vh; min-height: 540px; max-height: 760px; overflow: hidden; background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: 26px; box-shadow: var(--cb-shadow-panel); }
.chat__head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--cb-border); }
.chat__head-icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-size: 19px; background: var(--cb-grad-btn); }
.chat__head-title { margin: 0; font-family: var(--ff-heading); font-weight: 600; font-size: 1.3rem; color: var(--cb-head); }
.chat__head-sub { font-family: var(--ff-note); font-size: 12.5px; color: var(--cb-muted); display: flex; gap: 10px; align-items: center; }
.chat__online { display: inline-flex; align-items: center; gap: 6px; } .chat__online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cb-sage); box-shadow: 0 0 0 3px rgba(121,164,114,.18); }
.chat__body { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, var(--cb-soft), var(--cb-panel)); }
.chat__day { align-self: center; font-family: var(--ff-note); font-size: 11.5px; color: var(--cb-muted); background: var(--cb-pill); padding: 4px 14px; border-radius: 999px; }
.msg { display: flex; gap: 12px; max-width: 80%; } .msg .cbx-av { align-self: flex-end; }
.msg__col { display: flex; flex-direction: column; min-width: 0; align-items: flex-start; }
.msg__head { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 4px; }
.msg__name { font-family: var(--ff-note); font-size: 12.5px; font-weight: 600; color: var(--cb-head-2); } .msg__time { font-family: var(--ff-note); font-size: 11px; color: var(--cb-muted); }
.msg__bubble { font-size: 14px; line-height: 1.5; color: var(--cb-ink-strong); background: var(--cb-panel); border: 1px solid var(--cb-border-2); padding: 10px 14px; border-radius: 16px; border-top-left-radius: 6px; box-shadow: var(--cb-shadow-sm); width: fit-content; max-width: 100%; word-break: break-word; position: relative; }
.msg.is-me { align-self: flex-end; flex-direction: row-reverse; } .msg.is-me .msg__col { align-items: flex-end; } .msg.is-me .msg__head { flex-direction: row-reverse; }
.msg.is-me .msg__bubble { background: var(--cb-grad-btn); color: #fff; border-color: transparent; border-radius: 16px; border-top-right-radius: 6px; }
.msg__del { border: 0; background: transparent; color: inherit; opacity: .55; cursor: pointer; font-size: 15px; margin-left: 6px; line-height: 1; } .msg__del:hover { opacity: 1; }
.chat__composer { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--cb-border); }
.chat__composer-row { display: flex; align-items: center; gap: 10px; }
.chat__composer input { flex: 1; padding: 13px 18px; border-radius: 999px !important; font-family: var(--ff-base); font-size: 14px; background: var(--cb-soft); border: 1px solid var(--cb-border-2) !important; color: var(--cb-head-2); }
.chat__send { width: 46px; height: 46px; border-radius: 999px; flex-shrink: 0; border: 0; cursor: pointer; color: #fff; background: var(--cb-grad-btn); display: grid; place-items: center; font-size: 15px; box-shadow: 0 10px 22px -7px rgba(140,106,194,.55); }
.chat__err { color: var(--cb-blush); font-size: 12.5px; padding: 0 6px; } .chat__err[hidden] { display: none; }
.chat__signin { padding: 16px 22px; border-top: 1px solid var(--cb-border); color: var(--cb-muted); font-size: 14px; } .chat__signin a { color: var(--cb-accent); font-weight: 600; }
.cbx-forum-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .cbx-forum-bar p { margin: 0; font-size: 13px; }
.cbx-btn-sm { padding: 7px 14px; font-size: 13px; }
.cbx-composer { background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: 18px; padding: 16px 18px; margin-top: 14px; } .cbx-newtopic { margin: 0 0 16px; } .cbx-newtopic[hidden] { display: none; }
.thread-list { display: flex; flex-direction: column; gap: 12px; }
.thread { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: 18px; box-shadow: var(--cb-shadow-card); transition: .2s; text-decoration: none; }
.thread:hover { transform: translateY(-2px); border-color: var(--cb-border-hover); box-shadow: var(--cb-shadow-card-h); }
.thread .cbx-av { width: 46px; height: 46px; font-size: 16px; }
.thread__title { font-family: var(--ff-heading); font-weight: 600; font-size: 1.1rem; color: var(--cb-head); line-height: 1.25; }
.thread__meta { font-family: var(--ff-note); font-size: 12px; color: var(--cb-muted); margin-top: 4px; }
.thread__stats { margin-left: auto; text-align: center; flex-shrink: 0; } .thread__stats .num { font-family: var(--ff-heading); font-weight: 700; font-size: 1.3rem; color: var(--cb-accent); } .thread__stats .lbl { font-family: var(--ff-note); font-size: 11px; color: var(--cb-muted); }
.cbx-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .cbx-thread-head__actions { display: flex; gap: 6px; flex-wrap: wrap; }
h2.thread__title { font-size: 1.6rem; margin: 0 0 4px; }
.cbx-posts { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cbx-post { display: flex; gap: 12px; padding: 14px 16px; background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: 16px; }
.cbx-post__main { flex: 1; min-width: 0; } .cbx-post__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--cb-head); }
.cbx-post__op { background: var(--cb-pill); color: var(--cb-accent); border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-family: var(--ff-note); } .cbx-post__time { margin-left: auto; font-family: var(--ff-note); font-size: 11.5px; color: var(--cb-muted); }
.cbx-post__body { margin-top: 6px; color: var(--cb-ink-strong); font-size: 14.5px; line-height: 1.6; } .cbx-post__body p { margin: 0 0 .6em; }
.cbx-post__del { border: 0; background: transparent; color: var(--cb-muted); font-size: 12px; cursor: pointer; padding: 2px 0; } .cbx-post__del:hover { color: var(--cb-blush); }
@media (max-width: 640px) { .msg { max-width: 90%; } .chat { height: 78vh; } .thread__stats { display: none; } }

.cbx-post__del, .cbx-post__del:hover { background: transparent !important; color: var(--cb-muted) !important; box-shadow: none !important; padding: 2px 0 !important; border: 0 !important; font-size: 12px; }
.cbx-post__del:hover { color: var(--cb-blush) !important; }

/* ---------- 19. Site footer (ported from the static site) ---------- */
.footer.layout-links { padding: 0; margin-top: 36px; }
.footer__wrapper { border-top: 0; padding: 0; max-width: none; }
.cg-foot { position: relative; padding: 44px clamp(20px, 5vw, 64px) 24px; overflow: hidden; border-top: 1px solid #EADDF4; text-align: left;
  background: url('cloudberry-footer.webp') center bottom / cover, linear-gradient(180deg, #F2EAF8 0%, #EFE6F6 100%); }
.cg-foot::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(242,234,248,.86) 0%, rgba(240,231,246,.8) 45%, rgba(240,231,246,.85) 100%); }
:root:not([data-mode=light]) .cg-foot { background: url('cloudberry-footer.webp') center bottom / cover, #201A2C; border-color: #352B49; }
:root:not([data-mode=light]) .cg-foot::before { background: linear-gradient(180deg, rgba(30,24,42,.88) 0%, rgba(30,24,42,.82) 45%, rgba(30,24,42,.9) 100%); }
.cg-foot > * { position: relative; z-index: 1; }
.cg-foot__grid { display: grid; grid-template-columns: 2.4fr 1fr 1.2fr 1.2fr; gap: 32px; margin: 0 auto 32px; max-width: 1200px; }
@media (max-width: 760px) { .cg-foot__grid { grid-template-columns: 1fr 1fr; } .cg-foot__brand { grid-column: 1 / -1; } }
.cb-brand--foot { padding: 0; margin: 0; }
.cb-brand--foot .cb-brand__mark { width: 42px; height: 42px; border-radius: 13px; }
.cb-brand--foot .cb-brand__name { font-size: 22px; }
.cg-foot__brand p { font-family: var(--ff-note); font-size: 13px; color: var(--cb-muted); line-height: 1.6; max-width: 240px; margin: 14px 0 0; }
.cg-foot__col h4 { font-family: var(--ff-heading); font-weight: 600; font-size: 15px; color: var(--cb-head-2); margin: 0 0 14px; }
.cg-foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cg-foot__col a { font-family: var(--ff-note); font-size: 13.5px; color: var(--cb-muted); text-decoration: none; transition: .2s; }
.cg-foot__col a:hover { color: var(--cb-accent); }
.cg-foot__rule { height: 1px; background: linear-gradient(90deg, transparent, #E2D2F0, transparent); margin: 0 auto 18px; max-width: 1200px; }
:root:not([data-mode=light]) .cg-foot__rule { background: linear-gradient(90deg, transparent, #4A3D63, transparent); }
.cg-foot__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 auto; max-width: 1200px; font-family: var(--ff-note); font-size: 12px; color: #A695BE; }
.cg-foot__bottom i { color: var(--cb-blush); font-size: 11px; }

/* ---------- 20. Story hero banner (story Landscape Image → Fictioneer header image) ---------- */
body.cb-has-hero .header { position: relative; display: block; min-height: 0; height: clamp(190px, 28vw, 360px); width: min(1180px, calc(100% - 32px)); margin: 14px auto -64px; padding: 0; z-index: 0; }
body.cb-has-hero .header-background { position: absolute; inset: 0; height: 100%; width: 100%; border-radius: 26px; overflow: hidden; clip-path: none; -webkit-mask: none; mask: none; box-shadow: var(--cb-shadow-panel); }
body.cb-has-hero .header-background__wrapper { position: absolute; inset: 0; height: 100%; clip-path: none; -webkit-mask: none; mask: none; }
body.cb-has-hero .header-background__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; max-width: none; }
body.cb-has-hero .header__content { display: none; }
body.cb-has-hero main.main { position: relative; z-index: 1; }
@media (max-width: 640px) { body.cb-has-hero .header { height: 180px; margin-bottom: -40px; border-radius: 18px; } body.cb-has-hero .header-background { border-radius: 18px; } }
/* Hero ↔ card blend: the banner fades into the image's own tone (--cb-hero-tint), the card picks that tone up and eases into its panel colour. */
body.cb-has-hero .header-background { -webkit-mask-image: none; mask-image: none; box-shadow: none; border-radius: 26px 26px 0 0; }
body.cb-has-hero .header-background::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, var(--cb-hero-tint, var(--cb-panel)) 99%); }
body.cb-has-hero .main__background { background: linear-gradient(180deg, var(--cb-hero-tint, var(--cb-panel)) 0, var(--cb-hero-tint, var(--cb-panel)) 40px, color-mix(in oklab, var(--cb-hero-tint, var(--cb-panel)) 35%, var(--cb-panel)) 95px, var(--cb-panel) 170px); box-shadow: none; border-radius: 0 0 var(--layout-border-radius-large) var(--layout-border-radius-large); }
body.cb-has-hero .main__background::after { content: ""; position: absolute; inset: 64px 0 0 0; border-radius: inherit; box-shadow: var(--cb-shadow-panel); pointer-events: none; z-index: -1; }
/* Phones: the card is full-bleed, so the banner is too, and the card's tint starts under the banner's faded bottom edge (no pale seam behind the cover). */
@media (max-width: 640px) {
  body.cb-has-hero .header { width: 100%; margin-top: 8px; }
  body.cb-has-hero .header-background { border-radius: 0; }
  body.cb-has-hero .main__background { top: 28px !important; }
  body.cb-has-hero .header-background::after { background: linear-gradient(180deg, transparent 40%, var(--cb-hero-tint, var(--cb-panel)) 86%); }
}

/* ---------- 21. Home: story shelf (6 across) + latest chapters (3 across) ---------- */
.cb-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cb-see-all { font-family: var(--ff-note); font-weight: 700; font-size: 13.5px; color: var(--cb-accent); text-decoration: none; white-space: nowrap; }
.cb-see-all:hover { color: var(--cb-head-2); }
.cb-empty { color: var(--cb-muted); font-family: var(--ff-note); }
/* New stories: a scrolling shelf of full portrait cards (5 across on desktop), arrows when it overflows */
.cb-shelf-wrap { position: relative; margin: 6px 0 34px; }
.cb-shelf { --cb-shelf-n: 5; --cb-shelf-gap: 16px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cb-shelf-n) - 1) * var(--cb-shelf-gap)) / var(--cb-shelf-n)); gap: var(--cb-shelf-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 12px; margin: -4px -2px -12px; overscroll-behavior-x: contain; }
.cb-shelf::-webkit-scrollbar { display: none; }
.cb-shelf:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 4px; border-radius: 12px; }
@media (max-width: 1100px) { .cb-shelf { --cb-shelf-n: 4; } }
@media (max-width: 800px)  { .cb-shelf { --cb-shelf-n: 3; --cb-shelf-gap: 12px; } }
@media (max-width: 560px)  { .cb-shelf { --cb-shelf-n: 2.2; } }
.cb-shelf__nav { position: absolute; top: 38%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 1px solid var(--cb-border-2); background: var(--cb-panel); color: var(--cb-head); box-shadow: var(--cb-shadow-card); cursor: pointer; transition: transform .2s, color .2s; }
.cb-shelf__nav svg { width: 20px; height: 20px; }
.cb-shelf__nav:hover { color: var(--cb-accent); transform: scale(1.06); }
.cb-shelf__nav.is-prev { left: -16px; } .cb-shelf__nav.is-next { right: -16px; }
.cb-shelf__nav[hidden] { display: none; }
@media (max-width: 560px) { .cb-shelf__nav { display: none; } }

.cb-scard { scroll-snap-align: start; background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: 18px; overflow: hidden; box-shadow: var(--cb-shadow-sm); display: flex; flex-direction: column; min-width: 0; transition: transform .2s, box-shadow .2s, border-color .2s; }
.cb-scard:hover { transform: translateY(-3px); box-shadow: var(--cb-shadow-card-h); border-color: var(--cb-border-hover); }
.cb-scard__cover { position: relative; display: block; aspect-ratio: 2 / 3; background: var(--cb-soft); overflow: hidden; }
.cb-scard__cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .4s; }
.cb-scard:hover .cb-scard__cover img { transform: scale(1.03); }
.cb-scard__cover::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(to top, rgba(20,12,32,.45), transparent); pointer-events: none; }
.cb-scard__tags { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1; display: flex; align-items: center; gap: 6px; }
.cb-scard__badge { padding: 3px 11px; border-radius: 999px; background: rgba(40,28,60,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 600 11.5px/1.6 var(--ff-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-scard__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.cb-scard__title { margin: 0 !important; font: 700 15.5px/1.3 var(--ff-base); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb-scard__title a { color: var(--cb-head); text-decoration: none; }
.cb-scard__title a:hover { color: var(--cb-accent); }
.cb-scard__author { margin: 2px 0 0; font: 400 12.5px/1.4 var(--ff-base); color: var(--cb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-scard__chips { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: auto; padding-top: 10px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.cb-chip { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--cb-pill, var(--cb-soft)); color: var(--cb-head-2); font: 600 11px/1.5 var(--ff-base); text-decoration: none; white-space: nowrap; }
.cb-chip:hover { color: var(--cb-accent); }
.cb-shelf-wrap .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cb-cover__ph { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(160deg, #f7edfb, #efe4f7); }
.cb-cover__ph svg { width: 42%; height: auto; opacity: .85; }
.cb-updates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 6px 0 34px; }
@media (max-width: 1100px) { .cb-updates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .cb-updates { grid-template-columns: 1fr; gap: 12px; } }
/* Latest updates: one card per novel — cover + genre badge, title, newest released chapters with dates */
.cb-upd { display: grid; grid-template-columns: 104px minmax(0, 1fr); min-height: 160px; background: var(--cb-panel); border: 1px solid var(--cb-border); border-radius: 16px; overflow: hidden; box-shadow: var(--cb-shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.cb-upd:hover { transform: translateY(-2px); box-shadow: var(--cb-shadow-card-h); border-color: var(--cb-border-hover); }
.cb-upd__cover { position: relative; display: block; background: var(--cb-soft); }
.cb-upd__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cb-upd__badge { position: absolute; top: 8px; left: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(40, 28, 60, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 600 11px/1.5 var(--ff-base); letter-spacing: .02em; }
.cb-upd__body { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px 14px; min-width: 0; }
.cb-upd__title { margin: 0; font: 700 16px/1.3 var(--ff-base); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb-upd__title a { color: var(--cb-head); text-decoration: none; }
.cb-upd__title a:hover { color: var(--cb-accent); }
.cb-upd__list { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.cb-upd__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cb-upd__row a { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; padding: 2px 0; color: var(--cb-muted); font: 400 13.5px/1.5 var(--ff-base); text-decoration: none; }
.cb-upd__row a:hover { color: var(--cb-accent); }
.cb-upd__ico { width: 15px; height: 15px; flex: none; color: var(--cb-accent-2); }
.cb-upd__ch { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-upd__date { flex: none; color: var(--cb-muted); opacity: .8; font: 400 11px/1.5 var(--ff-base); font-variant-numeric: tabular-nums; }
.cb-upd__row.is-new { margin-bottom: 3px; padding-bottom: 6px; border-bottom: 1px dashed var(--cb-border-2); }
.cb-upd__row.is-new a { color: var(--cb-head); font-weight: 600; }
.cb-upd__row.is-new .cb-upd__ico { color: var(--cb-accent); }
.cb-upd__row.is-new .cb-upd__date { opacity: 1; color: var(--cb-ink-strong); }
@media (max-width: 680px) { .cb-upd { grid-template-columns: 96px minmax(0, 1fr); min-height: 150px; } }


/* ---------- 22. Design audit fixes (2026-09-26) ---------- */
/* Sign-in cards (Beries, Support, Studio): centre the button — .button is display:flex elsewhere, which ignored text-align */
.cbx-gate-card .button { display: inline-flex !important; width: auto !important; margin: 4px auto 0 !important; }
.cbx-gate-card__berry { display: inline-block; }

/* Unlock card: WordPress wraps the button in a <p>; let that <p> span the card so the button can size properly */
.cbx-lock > p:has(> .button) { display: flex; justify-content: center; width: 100%; margin: 0 !important; }
.cbx-lock .button { font-size: 14px !important; padding: 12px 26px !important; }
@media (max-width: 520px) { .cbx-lock > p:has(> .button) .button, .cbx-lock form, .cbx-lock form .button { width: 100% !important; min-width: 0 !important; } }

/* Chapter pages: the reading card is 960px max, so the hero banner matches it instead of overhanging */
body.cb-has-hero.single-fcn_chapter .header { width: min(960px, 100%); }
@media (max-width: 960px) { body.cb-has-hero.single-fcn_chapter .header-background { border-radius: 0; } body.cb-has-hero.single-fcn_chapter .header { margin-top: 8px; } }

/* Story page: Fictioneer's slate "24 Chapters" tab → theme pill */
.story__tabs .tabs__item { border-radius: 999px !important; font-family: var(--ff-base) !important; font-weight: 700 !important; }
.story__tabs .tabs__item._current { background: var(--cb-pill) !important; color: var(--cb-head) !important; }
.story__tabs .tabs__item:not(._current) { background: transparent !important; color: var(--cb-muted) !important; }
.story__tabs .tabs__item:not(._current):hover { color: var(--cb-accent) !important; }

/* Archive "related genres/tags" cloud: equal-size chips instead of random tag-cloud sizes */
.tag-cloud-link { display: inline-flex; align-items: center; margin: 0 6px 6px 0; padding: 3px 11px; border-radius: 999px; background: var(--cb-pill); color: var(--cb-head-2) !important; font: 600 12px/1.6 var(--ff-base) !important; text-decoration: none; }
.tag-cloud-link:hover { color: var(--cb-accent) !important; }

/* 404 */
.cb-404 { text-align: center; padding: 20px 12px 26px; }
.cb-404__art { width: 96px; height: 96px; margin: 0 auto 10px; }
.cb-404__code { margin: 0; font: 400 clamp(3.4rem, 9vw, 5rem)/1 var(--ff-site-title); color: var(--cb-head); letter-spacing: .04em; }
.cb-404__title { margin: 10px 0 6px; font: 700 1.6rem/1.2 var(--ff-heading); color: var(--cb-head); }
.cb-404__text { margin: 0 auto 22px; max-width: 440px; color: var(--cb-muted); line-height: 1.6; }
.cb-404__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cb-404__actions .button { display: inline-flex !important; width: auto !important; }