/*
 * FANIKA UI Foundation — 2026-09 renewal
 *
 * D0097 responsibility order:
 * HTML/intrinsic semantics -> Semantic/Role -> Site Manner -> physical CSS.
 *
 * This file owns reusable FANIKA presentation manners. Screen-local exceptions
 * belong in their feature stylesheet and must not be promoted here accidentally.
 */

:root {
  /* Project-profile resolution of semantic Field width roles.
   * Values are provisional: preserve current layout until visual QA accepts
   * their suitability; DAM Core does not prescribe CSS pixel values.
   */
  --fanika-width-standard: 1080px;
  --fanika-width-wide: 1080px;
  --fanika-width-profile: 1080px;
  --fanika-width-workspace: 1080px;
  /* Compatibility alias for existing screens and downstream overrides. */
  --fanika-ui-content-max: var(--fanika-width-standard);
  --fanika-ui-gutter-pc: 28px;
  --fanika-ui-gutter-mobile: 16px;
  /* Three-role management TOP and individually reviewed management child
   * opt-ins share the accepted compact 16px edges at PC/mobile sizes.
   * Only Foundation owns this geometry. Non-management screens do not opt in. */
  --fanika-ui-management-width: min(
    calc(100% - var(--fanika-ui-gutter-mobile) - var(--fanika-ui-gutter-mobile)),
    var(--fanika-width-standard)
  );
  --fanika-ui-section-gap: 24px;
  --fanika-ui-card-radius: 16px;
  --fanika-ui-card-border: var(--color-border-light, #e5e7eb);
  --fanika-ui-page-background: #edf7fe;
  --fanika-ui-surface: #ffffff;
  --fanika-ui-surface-soft: #f8fbff;
  --fanika-ui-text: var(--color-text-dark, #1f2937);
  --fanika-ui-text-muted: var(--color-text-gray, #667085);
  --fanika-ui-accent: var(--fanika-primary, #ec4899);
  --fanika-ui-button-color: #f4a6c8;
  --fanika-ui-button-text: #243549;
  --fanika-ui-button-border: #dbe4ed;
  --fanika-ui-danger: #dc3545;
  /* Management genre palette: the only physical values for the four Creator
   * management genres. Accent / Soft are the accepted Creator management TOP
   * category colors (icon / group summary). Tint (menu item) and Border
   * (active item fill / borders) follow the Owner four-row menu reference;
   * Text keeps >= 4.5:1 on white, Soft, Tint and Border. Consumed only through
   * .fanika-ui-genre--* roles below, never directly by feature CSS. */
  --fanika-ui-genre-community-accent: #ef5da2;
  --fanika-ui-genre-community-soft: #fff4f8;
  --fanika-ui-genre-community-tint: #ffe1ec;
  --fanika-ui-genre-community-border: #f9c6db;
  --fanika-ui-genre-community-text: #ad1457;
  --fanika-ui-genre-shop-accent: #52a8dd;
  --fanika-ui-genre-shop-soft: #eff8ff;
  --fanika-ui-genre-shop-tint: #dceafc;
  --fanika-ui-genre-shop-border: #c6dff5;
  --fanika-ui-genre-shop-text: #185a8d;
  --fanika-ui-genre-crowdfunding-accent: #8b5ce6;
  --fanika-ui-genre-crowdfunding-soft: #f5f0ff;
  --fanika-ui-genre-crowdfunding-tint: #e9def9;
  --fanika-ui-genre-crowdfunding-border: #dccff8;
  --fanika-ui-genre-crowdfunding-text: #6d3fc0;
  --fanika-ui-genre-common-accent: #50b78a;
  --fanika-ui-genre-common-soft: #f1fbf7;
  --fanika-ui-genre-common-tint: #dcf1e0;
  --fanika-ui-genre-common-border: #c6e7cc;
  --fanika-ui-genre-common-text: #1b6a4e;
}

/* Semantic role: which management genre (area) the UI operates on.
 * Sets the generic --fanika-ui-genre-* properties for its subtree. It never
 * expresses action meaning (save/publish/delete) or state (error/success). */
.fanika-ui-genre--community {
  --fanika-ui-genre-accent: var(--fanika-ui-genre-community-accent);
  --fanika-ui-genre-soft: var(--fanika-ui-genre-community-soft);
  --fanika-ui-genre-tint: var(--fanika-ui-genre-community-tint);
  --fanika-ui-genre-border: var(--fanika-ui-genre-community-border);
  --fanika-ui-genre-text: var(--fanika-ui-genre-community-text);
  --fanika-ui-genre-rule: 4px solid var(--fanika-ui-genre-community-accent);
}
.fanika-ui-genre--shop {
  --fanika-ui-genre-accent: var(--fanika-ui-genre-shop-accent);
  --fanika-ui-genre-soft: var(--fanika-ui-genre-shop-soft);
  --fanika-ui-genre-tint: var(--fanika-ui-genre-shop-tint);
  --fanika-ui-genre-border: var(--fanika-ui-genre-shop-border);
  --fanika-ui-genre-text: var(--fanika-ui-genre-shop-text);
  --fanika-ui-genre-rule: 4px solid var(--fanika-ui-genre-shop-accent);
}
.fanika-ui-genre--crowdfunding {
  --fanika-ui-genre-accent: var(--fanika-ui-genre-crowdfunding-accent);
  --fanika-ui-genre-soft: var(--fanika-ui-genre-crowdfunding-soft);
  --fanika-ui-genre-tint: var(--fanika-ui-genre-crowdfunding-tint);
  --fanika-ui-genre-border: var(--fanika-ui-genre-crowdfunding-border);
  --fanika-ui-genre-text: var(--fanika-ui-genre-crowdfunding-text);
  --fanika-ui-genre-rule: 4px solid var(--fanika-ui-genre-crowdfunding-accent);
}
.fanika-ui-genre--common {
  --fanika-ui-genre-accent: var(--fanika-ui-genre-common-accent);
  --fanika-ui-genre-soft: var(--fanika-ui-genre-common-soft);
  --fanika-ui-genre-tint: var(--fanika-ui-genre-common-tint);
  --fanika-ui-genre-border: var(--fanika-ui-genre-common-border);
  --fanika-ui-genre-text: var(--fanika-ui-genre-common-text);
  --fanika-ui-genre-rule: 4px solid var(--fanika-ui-genre-common-accent);
}

/* Unified default canvas: explicit page/feature colors remain authoritative. */
body:has(.fanika-ui-container) .site-content { background-color: var(--fanika-ui-page-background); }

/* Semantic role: primary logged-in content container. */
.fanika-ui-container {
  width: min(
    calc(100% - (var(--fanika-ui-gutter-pc) * 2)),
    var(--fanika-ui-content-max)
  );
  margin-inline: auto;
}

/* Site Manner: approved three-role management TOP frame, plus explicit
 * management child opt-ins. This is not a global child-page selector.
 * Feature CSS owns padding and approved role-specific appearance, not width. */
.fanika-ui-container.fanika-ui-management-container {
  box-sizing: border-box;
  width: var(--fanika-ui-management-width);
}

/* Site Manner: FANIKA card/surface. */
.fanika-ui-surface-card {
  background: var(--fanika-ui-surface);
  border: 1px solid var(--fanika-ui-card-border);
  border-radius: var(--fanika-ui-card-radius);
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}

/* Site Manner: compact operational summary. */
.fanika-ui-summary {
  display: grid;
  gap: 12px;
}

.fanika-ui-summary--compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.fanika-ui-summary__item {
  min-width: 0;
  padding: 14px 16px;
}

/* Site Manner: action hierarchy. */
.fanika-ui-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.fanika-ui-action--primary {
  border: 1px solid var(--fanika-ui-button-color, var(--fanika-ui-accent));
  background: var(--fanika-ui-button-color, var(--fanika-ui-accent));
  color: var(--fanika-ui-button-text, #fff);
}

.fanika-ui-action--secondary {
  border: 1px solid var(--fanika-ui-card-border);
  background: #fff;
  color: var(--fanika-ui-text);
}

/* Shared cancel/back button: same pill skeleton, white fill, theme-derived outline. */
.fanika-ui-action--secondary {
  border-color: var(--fanika-ui-button-border, #dbe4ed);
  box-shadow: 0 2px 5px rgba(25,48,73,.06);
}
.fanika-ui-action--primary:hover,.fanika-ui-action--primary:focus-visible{filter:brightness(.94)}
.fanika-ui-action--secondary:hover,.fanika-ui-action--secondary:focus-visible{border-color:var(--fanika-ui-button-color,var(--fanika-ui-accent))}


.fanika-ui-action--quiet {
  border: 0;
  background: transparent;
  color: var(--fanika-ui-text-muted);
}

/* Site Manner: state badges. State truth must be supplied by application/domain code. */
.fanika-ui-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.fanika-ui-status--pending {
  background: #fff7e6;
  color: #9a6700;
}

.fanika-ui-status--success {
  background: #ecfdf3;
  color: #087443;
}

.fanika-ui-status--muted {
  background: #f2f4f7;
  color: #475467;
}

.fanika-ui-status--danger {
  background: #fff1f2;
  color: #b42318;
}

/* =========================================================
   Global logged-in header
   Semantic role: .fanika-global-header / __action / __search
   ========================================================= */

.fanika-global-header {
  display: grid !important;
  grid-template-columns: auto minmax(180px, 280px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 8px max(16px, calc((100vw - var(--fanika-ui-content-max)) / 2)) !important;
  background: #fff;
}

.fanika-global-header__brand {
  min-width: 0;
}

/* Guest header has no search column. Keep the existing two-part layout explicit
   so the logged-in three-column grid never creates an empty middle column. */
.fanika-global-header.guest-header {
  grid-template-columns: auto minmax(0, 1fr);
}

.fanika-global-header.guest-header .fanika-global-header__actions {
  grid-column: 2;
  justify-self: end;
}

.fanika-global-header__brand .header-logo-img {
  display: block;
  width: auto;
  height: 32px;
}

.fanika-global-header__search {
  width: 100%;
  max-width: 280px;
  margin: 0 !important;
}

.fanika-global-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
}

.fanika-global-header__action {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 48px;
  padding: 3px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fanika-ui-text-muted);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.fanika-global-header__action:hover,
.fanika-global-header__action:focus-visible {
  background: var(--fanika-ui-surface-soft);
  color: var(--fanika-ui-accent);
  text-decoration: none;
}

.fanika-global-header__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.fanika-global-header__icon > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 22px;
}

.fanika-global-header__label {
  max-width: 74px;
  margin-top: 2px;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fanika-global-header__indicator {
  position: absolute;
  top: -1px;
  right: -3px;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--fanika-ui-danger);
}

.fanika-global-header__badge {
  position: absolute;
  top: -4px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--fanika-ui-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.fanika-global-header__profile-image {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  object-fit: cover;
}

.fanika-global-header__profile-name {
  max-width: 76px;
  margin-top: 2px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Existing header selectors remain as compatibility hooks while pages migrate. */
.fanika-global-header .header-nav-link,
.fanika-global-header .header-mypage-link,
.fanika-global-header .header-news-modal-icon {
  color: inherit;
}

/* Prevent the old header styles from giving capability image/avatar-specific geometry
   to the new unified icon treatment. */
.fanika-global-header .fanika-global-header__action .header-fc-icon {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
}

/* Mobile: keep header actions on one line. Horizontal movement is contained inside
   the header action rail so the page itself never gains horizontal overflow. */
@media (max-width: 900px) {
  .fanika-global-header {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 6px 10px !important;
  }

  .fanika-global-header__search {
    display: none;
  }

  .fanika-global-header__actions {
    width: 100%;
    max-width: 100%;
    gap: 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .fanika-global-header__actions::-webkit-scrollbar {
    display: none;
  }

  .fanika-global-header__action {
    min-width: 48px;
    min-height: 44px;
    flex: 0 0 auto;
    padding-inline: 2px;
  }

  .fanika-global-header__brand .header-logo-img {
    height: 22px !important;
    max-height: 22px !important;
  }

  .fanika-global-header__label,
  .fanika-global-header__profile-name {
    max-width: 58px;
    font-size: 9px;
  }

  .mobile-search-wrapper {
    padding: 6px var(--fanika-ui-gutter-mobile);
  }
}

@media (max-width: 767px) {
  .fanika-ui-container {
    width: calc(100% - (var(--fanika-ui-gutter-mobile) * 2));
  }
}

/* My Page root opts into the shared logged-in width without changing public
   creator-profile surfaces that still use the legacy container class. */
.creator-profile-container.fanika-mypage-root.fanika-ui-container {
  max-width: var(--fanika-ui-content-max) !important;
}

@media (max-width: 640px) {
  .creator-profile-container.fanika-mypage-root.fanika-ui-container {
    max-width: none !important;
    padding-inline: 0;
  }
}

/* =========================================================
   Creator child screen shell
   Semantic role: breadcrumb + child-screen heading.
   Feature forms keep their field/layout exceptions in their own stylesheet.
   ========================================================= */

.fanika-creator-child-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--fanika-ui-text-muted, #667085);
  font-size: 0.78rem;
  line-height: 1.5;
}

.fanika-creator-child-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.fanika-creator-child-breadcrumb a:hover,
.fanika-creator-child-breadcrumb a:focus-visible {
  color: var(--fanika-ui-accent, #ec4899);
  text-decoration: underline;
}

.fanika-creator-child-heading {
  margin-bottom: 12px;
  padding: 18px 20px;
  border: 1px solid #e5ebf2;
  border-left: var(--fanika-ui-genre-rule, 1px solid #e5ebf2);
  border-radius: var(--fanika-ui-card-radius, 16px);
  background: #fff;
  box-shadow: 0 7px 22px rgba(50, 78, 108, 0.05);
}

.fanika-creator-child-heading__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--fanika-ui-genre-text, var(--fanika-ui-accent, #ec4899));
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.fanika-creator-child-heading p {
  margin: 6px 0 0;
  color: var(--fanika-ui-text-muted, #667085);
  font-size: 0.88rem;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .fanika-creator-child-breadcrumb {
    margin-inline: 4px;
    font-size: 0.7rem;
  }

  .fanika-creator-child-heading {
    margin-bottom: 10px;
    padding: 14px;
    border-radius: 14px;
  }

  .fanika-creator-child-heading p {
    font-size: 0.8rem;
  }
}



/* Creator child shared management navigation */
.fanika-creator-child-tools{display:flex;justify-content:flex-end;width:100%;max-width:var(--fanika-ui-content-max,1080px);box-sizing:border-box;margin:-2px auto 10px}
.fanika-creator-child-back{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 16px;border:1px solid #f2b7d4;border-radius:10px;background:#fff;color:var(--fanika-ui-accent,#ec4899);font-size:.82rem;font-weight:800;text-decoration:none}
.fanika-creator-child-back:hover,.fanika-creator-child-back:focus-visible{border-color:var(--fanika-ui-accent,#ec4899);background:#fff7fb;color:#db2777}
/* The menu colours come only from each row's own genre role, never from the
 * page around it (a page may itself carry a genre role): cut the inheritance. */
.fanika-creator-child-subnav{--fanika-ui-genre-accent:initial;--fanika-ui-genre-soft:initial;--fanika-ui-genre-tint:initial;--fanika-ui-genre-border:initial;--fanika-ui-genre-text:initial;--fanika-ui-genre-rule:initial;width:100%;max-width:var(--fanika-ui-content-max,1080px);box-sizing:border-box;margin:0 auto 14px;padding:8px;overflow-x:visible;overflow-y:visible}
/* Each row is one genre: label on the left, its items share the rest equally,
 * so a row with fewer permitted items still fills the row evenly. */
.fanika-creator-child-subnav__row{display:flex;flex-wrap:wrap;width:100%;min-width:0;box-sizing:border-box;align-items:center;gap:6px;padding:4px;border-radius:8px;background:var(--fanika-ui-genre-soft,#f8fbff)}
/* Owner-approved pale yellow for the Shop band only; leave the menu button tokens intact. */
.fanika-creator-child-subnav__row--2.fanika-ui-genre--shop{background:#fff9e9}
.fanika-creator-child-subnav__row--2.fanika-ui-genre--shop .fanika-creator-child-subnav__item{background:#fff3d6;border-color:#f1e0b3;color:#614d24}
.fanika-creator-child-subnav__row--2.fanika-ui-genre--shop .fanika-creator-child-subnav__item:hover,
.fanika-creator-child-subnav__row--2.fanika-ui-genre--shop .fanika-creator-child-subnav__item:focus-visible{background:#fff3d6;border-color:#f1e0b3;color:#614d24}
.fanika-creator-child-subnav__row--2.fanika-ui-genre--shop .fanika-creator-child-subnav__item.is-active{background:#f1e0b3;border-color:#d6b66f;color:#614d24;box-shadow:inset 0 0 0 1px #d6b66f}
.fanika-creator-child-subnav__row+.fanika-creator-child-subnav__row{margin-top:6px}
.fanika-creator-child-subnav__row:last-child{box-shadow:inset 0 -4px 0 rgba(80,80,80,.12)}
.fanika-creator-child-subnav__group{flex:0 0 8.5rem;min-width:0;padding-left:4px;color:#475467;font-size:.76rem;font-weight:800;line-height:1.3;white-space:nowrap}
.fanika-creator-child-subnav__item{display:inline-flex;flex:1 1 0;min-width:0;box-sizing:border-box;align-items:center;justify-content:center;min-height:40px;padding:6px 8px;border:1px solid var(--fanika-ui-genre-border,#dbe4ed);border-radius:9px;background:var(--fanika-ui-genre-tint,#fff);color:#344054;font-size:.82rem;font-weight:800;line-height:1.2;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:anywhere}
.fanika-creator-child-subnav__item:hover,.fanika-creator-child-subnav__item:focus-visible{border-color:var(--fanika-ui-genre-accent,#efb8d3);color:var(--fanika-ui-genre-text,#ad1457)}
/* Keyboard focus is independent of the active state: a dark outline ring. */
.fanika-creator-child-subnav__item:focus-visible{outline:2px solid var(--fanika-ui-button-text,#243549);outline-offset:2px}
/* Active (reference: light genre fill, genre text). Besides hue it is marked
 * by a doubled accent border, and aria-current conveys it to assistive tech. */
.fanika-creator-child-subnav__item.is-active{border-color:var(--fanika-ui-genre-accent,#ef5da2);background:var(--fanika-ui-genre-border,#f9c6db);color:var(--fanika-ui-genre-text,#ad1457);box-shadow:inset 0 0 0 1px var(--fanika-ui-genre-accent,#ef5da2)}
@media(max-width:767px){.fanika-creator-child-tools{margin-bottom:8px}.fanika-creator-child-back{min-height:38px;padding:7px 13px;font-size:.78rem}.fanika-creator-child-subnav{margin-bottom:10px;padding:6px}.fanika-creator-child-subnav__row{gap:6px;padding:6px}.fanika-creator-child-subnav__group{flex:0 0 100%;margin-left:0;font-size:.74rem}.fanika-creator-child-subnav__item{flex-basis:calc(50% - 6px);min-height:40px;padding-inline:8px;font-size:.78rem}}


/* Shared back action replaces legacy paired TOP links, without modifying
   functional logout or page-specific primary actions. */
/* Owner's compact shared Back reference: 3c7fa74cfaad (presentation only).
   Override the legacy mobile .navigation-buttons column layout so the
   shared action never turns a flex basis into a 220px button height. */
.fanika-shared-back-navigation {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: min(calc(100% - 32px), var(--fanika-ui-content-max, 1080px));
  margin: 24px auto;
}
.fanika-shared-back-navigation .fanika-shared-back-button {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 144px;
  min-height: 40px;
  padding: 8px 22px;
  border: 1px solid var(--fanika-ui-button-border, #dbe4ed);
  border-radius: 10px;
  background: var(--fanika-ui-surface, #fff);
  color: var(--fanika-ui-text, #1f2937);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}
/* The legacy .navigation-button:hover uses important white text.
   Explicit text styling on the child keeps text readable on white. */
.fanika-shared-back-navigation .fanika-shared-back-button span {
  color: var(--fanika-ui-text, #1f2937);
}
.fanika-shared-back-navigation .fanika-shared-back-button:hover,
.fanika-shared-back-navigation .fanika-shared-back-button:focus-visible {
  border-color: var(--fanika-ui-button-color, #f4a6c8);
  background: #fff7fb;
}

/* Creator child shared canvas */
body:has(.fanika-creator-child-heading) .site-content,
body:has(.fanika-creator-child-heading) .site-main,
body:has(.fanika-creator-child-heading) .entry-content {
  background: #edf7fe;
}

body:has(.fanika-creator-child-heading) .fanika-ui-container {
  width: min(calc(100% - 32px), var(--fanika-width-wide));
  box-sizing: border-box;
}

@media (max-width: 767px) {
  body:has(.fanika-creator-child-heading) .fanika-ui-container {
    width: min(calc(100% - 32px), var(--fanika-width-standard));
  }

  body:has(.fanika-creator-child-heading) .site-main {
    padding-bottom: 84px;
  }
}


/* Creator management shared page header.
   Approved Community reference: management-TOP icon + pale-pink-to-white
   surface. Feature screens provide only icon/title/copy; Foundation owns the
   composition. */
.fanika-creator-page-header{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  align-items:center;
  gap:14px;
  width:100%;
  min-height:112px;
  margin:0 0 14px;
  padding:20px;
  border:1px solid #e7edf4;
  border-radius:18px;
  background:linear-gradient(90deg,#fff5f9 0%,#fff 100%);
}
.fanika-creator-page-header.fanika-ui-genre--shop{
  background:linear-gradient(90deg,#fff9e9 0%,#fff 100%);
}
/* Creator sales: shared management header, common genre's soft green -> white. */
.fanika-creator-page-header--sales.fanika-ui-genre--common{
  background:linear-gradient(90deg,#e8f8ef 0%,#fff 100%);
}
/* Creator analytics uses the same canonical common-genre header palette. */
.fanika-creator-page-header--analytics.fanika-ui-genre--common{
  background:linear-gradient(90deg,var(--fanika-ui-genre-common-soft) 0%,#fff 100%);
}
/* Scope the canonical canvas to Creator sales only (not Organizer or Agent). */
body:has(.fanika-creator-page-header--sales) .site-content,
body:has(.fanika-creator-page-header--sales) .site-main,
body:has(.fanika-creator-page-header--sales) .entry-content{
  background-color:var(--fanika-ui-page-background);
}
/* Creator sales: place shared Back directly after the last section.
   Leave bottom clearance for the fixed four-item bottom navigation. */
body:has(.fanika-creator-page-header--sales) .fanika-actor-sales-page{
  margin-bottom:0;
  padding-bottom:0;
}
body:has(.fanika-creator-page-header--sales) .fanika-actor-sales-page + .fanika-shared-back-navigation{
  margin:16px auto 96px;
}
.fanika-creator-page-header__icon{
  display:grid;
  width:56px;
  height:56px;
  place-items:center;
  border-radius:18px;
  background:#fff;
  color:var(--fanika-ui-genre-accent,var(--fanika-ui-accent,#ec4899));
  font-size:1.2rem;
  box-shadow:0 6px 18px rgba(71,89,113,.06);
}
.fanika-creator-page-header__copy{min-width:0}
.fanika-creator-page-header__eyebrow{
  display:block;
  margin:0 0 4px;
  color:var(--fanika-ui-genre-text,var(--fanika-ui-accent,#ec4899));
  font-size:.74rem;
  font-weight:800;
}
.fanika-creator-page-header__title{
  margin:0;
  color:#263449;
  font-size:1.35rem;
  font-weight:800;
  line-height:1.3;
}
.fanika-creator-page-header__description{
  margin:5px 0 0;
  color:#667085;
  font-size:.82rem;
  line-height:1.5;
}
@media(max-width:767px){
  .fanika-creator-page-header{
    grid-template-columns:44px minmax(0,1fr);
    gap:10px;
    min-height:92px;
    padding:14px;
    border-radius:14px;
  }
  .fanika-creator-page-header__icon{
    width:44px;
    height:44px;
    border-radius:14px;
    font-size:1rem;
  }
  .fanika-creator-page-header__title{font-size:1.16rem}
  .fanika-creator-page-header__description{font-size:.78rem}
}