.cosmetic-renderer-home {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--cosmetic-surface-border, var(--border, #d9ddd8));
  border-radius: 18px;
  background: var(--cosmetic-page-background, var(--bg, #f4f8f7));
  color: var(--cosmetic-page-text, var(--text, #182629));
  font-family: var(--font-body);
}

.cosmetic-renderer-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  overflow: hidden;
  border: 1px solid var(--cosmetic-surface-border, var(--border, #d9ddd8));
  border-radius: 13px;
  background: var(--cosmetic-surface-background, var(--bg-elev, #ffffff));
  color: var(--cosmetic-page-text, var(--text, #182629));
}

.cosmetic-renderer-brand {
  overflow: hidden;
  font-size: 0.77rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cosmetic-renderer-balance {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--cosmetic-surface-border, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--cosmetic-accent, var(--primary, #2f7f89)) 14%, var(--cosmetic-surface-background, var(--bg-elev, #ffffff)));
  color: var(--cosmetic-page-text, var(--text, #182629));
  font-size: 0.66rem;
  font-weight: 800;
  white-space: nowrap;
}

.cosmetic-renderer-home-cards {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.home-primary-grid .cosmetic-renderer-card {
  min-height: 82px;
  padding: 10px;
}

.cosmetic-renderer-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 82px;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  padding: 10px;
  overflow: hidden;
}

.cosmetic-renderer-icon {
  display: grid;
  width: 28px;
  height: 28px;
  grid-row: 1 / span 2;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cosmetic-icon-color, var(--primary, #2f7f89)) 38%, transparent);
  border-radius: 9px;
  background: var(--cosmetic-icon-background, color-mix(in srgb, var(--primary, #2f7f89) 12%, var(--bg-elev, #ffffff)));
  color: var(--cosmetic-icon-color, var(--primary, #2f7f89));
  font-size: 0.86rem;
  font-weight: 800;
}

.cosmetic-renderer-title {
  overflow: hidden;
  align-self: end;
  color: var(--cosmetic-card-text, var(--text, #182629));
  font-size: 0.92rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cosmetic-renderer-copy {
  display: -webkit-box;
  align-self: start;
  overflow: hidden;
  color: var(--cosmetic-card-text-soft, var(--text-soft, #496066));
  font-size: 0.72rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cosmetic-renderer-accent {
  position: absolute;
  right: 10px;
  bottom: 8px;
  left: 10px;
  height: 3px;
  border-radius: 999px;
  background: var(--cosmetic-accent, var(--primary, #2f7f89));
  opacity: 0.82;
}

.cosmetic-renderer-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: 7px 12px;
  border: 1px solid var(--cosmetic-accent, var(--primary, #2f7f89));
  border-radius: 10px;
  background: var(--cosmetic-button-background, var(--primary, #2f7f89));
  color: var(--cosmetic-button-text, #fff);
  font-size: 0.7rem;
  font-weight: 800;
}

@media (max-width: 360px) {
  .cosmetic-renderer-home {
    gap: 7px;
    padding: 8px;
  }

  .cosmetic-renderer-home-cards {
    gap: 6px;
  }

  .cosmetic-renderer-card {
    min-height: 76px;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 6px;
    row-gap: 3px;
    padding: 8px;
  }

  .cosmetic-renderer-icon {
    width: 24px;
    height: 24px;
  }
}

/* ============================================================
   COSMETIC HOST CONTRACT (AGENTS.md section 7)
   A card skin marks its host with [data-cosmetic-skin] and writes only
   --cosmetic-* tokens on it (cosmetics.js applyCardSkin). This layer paints the
   real Home cards and the Market preview cards from those tokens, and
   descendants inherit them, so re-rendering, theme switches, reload and unequip
   never replay per-element styles. The icon is skinned through the Home card
   icon component tokens. The ID scope outranks theme component rules without
   !important; the few theme !important surface/text rules yield to skinned
   hosts through :where(:not([data-cosmetic-skin]...)) exclusions instead.
   [data-cosmetic-backdrop] is present only when the skin defines a backdrop,
   so other skins keep the theme's own backdrop-filter.
   ============================================================ */
:is(#screen-home, #screen-market) .primary-action-card[data-cosmetic-skin] {
  --home-card-icon-surface: var(--cosmetic-icon-background);
  --home-card-icon-color: var(--cosmetic-icon-color, var(--cosmetic-card-text));
  background: var(--cosmetic-card-background);
  border: var(--cosmetic-card-border);
  border-radius: var(--cosmetic-card-radius);
  box-shadow: var(--cosmetic-card-shadow);
  color: var(--cosmetic-card-text);
}

:is(#screen-home, #screen-market) .primary-action-card[data-cosmetic-skin][data-cosmetic-backdrop] {
  backdrop-filter: var(--cosmetic-card-backdrop-filter);
}

:is(#screen-home, #screen-market) [data-cosmetic-skin] .btn-title {
  color: var(--cosmetic-card-text);
}

:is(#screen-home, #screen-market) [data-cosmetic-skin] .btn-sub {
  color: var(--cosmetic-card-text-soft);
}

#screen-market [data-cosmetic-skin] .cosmetic-renderer-icon {
  color: var(--cosmetic-icon-color, var(--cosmetic-card-text));
}
/* ============================================================
   TRACKER CARD SKINS
   tracker.* card slots use the same host contract as Home cards. The extra
   .tracker-shell/.tracker-options weight keeps the skin above the themes' ID-
   scoped Tracker icon rules without !important.
   ============================================================ */
#screen-tracker .tracker-shell .tracker-options .primary-action-card[data-cosmetic-skin] {
  background: var(--cosmetic-card-background);
  border: var(--cosmetic-card-border);
  border-radius: var(--cosmetic-card-radius);
  box-shadow: var(--cosmetic-card-shadow);
  color: var(--cosmetic-card-text);
}

#screen-tracker .tracker-shell .tracker-options .primary-action-card[data-cosmetic-skin][data-cosmetic-backdrop] {
  backdrop-filter: var(--cosmetic-card-backdrop-filter);
}

#screen-tracker .tracker-shell .tracker-options .primary-action-card[data-cosmetic-skin] > .cp-icon {
  background: var(--cosmetic-icon-background, transparent);
  color: var(--cosmetic-icon-color, var(--cosmetic-card-text));
}

#screen-tracker .tracker-shell .tracker-options [data-cosmetic-skin] .btn-title {
  color: var(--cosmetic-card-text);
}

#screen-tracker .tracker-shell .tracker-options [data-cosmetic-skin] .btn-sub {
  color: var(--cosmetic-card-text-soft);
}

/* ============================================================
   MODULE SKIN HOST CONTRACT (Market "Module Styles")
   cosmetics.js applyModuleSkin writes --cosmetic-module-* tokens and
   [data-module-skin] on a persistent container (MODULE_HOSTS). Module skins
   are an accent layer: border, radius, outer glow, an inset tint and an
   optional inset accent stripe. They never replace theme surfaces or text
   colors (so they stay readable in every theme) and use a different marker
   from card skins, so the themes' [data-cosmetic-skin] text exclusions do not
   strip theme text from large containers. Optional effects are gated by
   [data-module-stripe], [data-module-backdrop] and [data-module-layout], so a
   missing token never invalidates a declaration. Default removes every marker.
   ============================================================ */
:is(
  #screen-home .home-motivation-card,
  #screen-tracker .tracker-shell,
  #screen-chore .chore-shell,
  #screen-chore .chore-game-mode-card,
  #gameModeCompletionModal .game-mode-completion-summary,
  #cueFeedSavedPage,
  #screen-motivation .motivation-top,
  #screen-motivation .motivation-page,
  #screen-ledger .personal-ledger-section,
  #screen-ledger .ledger-shell,
  #screen-results #resultsTypeRow,
  #hamburgerMenu .hamburger-panel
)[data-module-skin],
#trackerStats[data-module-skin] > .stat-card,
#resultsSummary[data-module-skin] > .stat-card,
#chartsGrid[data-module-skin] .chart-card,
#screen-motivation :is(.motivation-quote-grid, .motivation-goal-grid)[data-module-skin] > .motivation-hero-card,
#ledgerAccountsList[data-module-skin] > .ledger-account-row,
#screen-ledger .coin-wallet-summary[data-module-skin] > .coin-wallet-stat,
#screen-market .cosmetic-module-preview:is(.cosmetic-module-preview--banner, .cosmetic-module-preview--panel)[data-module-skin],
#screen-market .cosmetic-module-preview--menu[data-module-skin]:not([data-preview-target="navigation.icons"]),
#screen-market .cosmetic-module-preview:is(.cosmetic-module-preview--tiles, .cosmetic-module-preview--rows, .cosmetic-module-preview--chart)[data-module-skin] .cosmetic-module-preview-row {
  border: var(--cosmetic-module-border);
  border-radius: var(--cosmetic-module-radius);
  box-shadow: var(--cosmetic-module-shadow), inset 0 0 0 9999px var(--cosmetic-module-tint);
}

:is(
  #screen-home .home-motivation-card,
  #screen-tracker .tracker-shell,
  #screen-chore .chore-shell,
  #screen-chore .chore-game-mode-card,
  #gameModeCompletionModal .game-mode-completion-summary,
  #cueFeedSavedPage,
  #screen-motivation .motivation-top,
  #screen-motivation .motivation-page,
  #screen-ledger .personal-ledger-section,
  #screen-ledger .ledger-shell,
  #hamburgerMenu .hamburger-panel
)[data-module-skin][data-module-stripe],
#trackerStats[data-module-skin][data-module-stripe] > .stat-card,
#resultsSummary[data-module-skin][data-module-stripe] > .stat-card,
#chartsGrid[data-module-skin][data-module-stripe] .chart-card,
#screen-motivation :is(.motivation-quote-grid, .motivation-goal-grid)[data-module-skin][data-module-stripe] > .motivation-hero-card,
#ledgerAccountsList[data-module-skin][data-module-stripe] > .ledger-account-row,
#screen-ledger .coin-wallet-summary[data-module-skin][data-module-stripe] > .coin-wallet-stat,
#screen-market .cosmetic-module-preview:is(.cosmetic-module-preview--banner, .cosmetic-module-preview--panel)[data-module-skin][data-module-stripe],
#screen-market .cosmetic-module-preview--menu[data-module-skin][data-module-stripe]:not([data-preview-target="navigation.icons"]),
#screen-market .cosmetic-module-preview:is(.cosmetic-module-preview--tiles, .cosmetic-module-preview--rows, .cosmetic-module-preview--chart)[data-module-skin][data-module-stripe] .cosmetic-module-preview-row {
  box-shadow:
    var(--cosmetic-module-shadow),
    inset var(--cosmetic-module-stripe) 0 0 0 var(--cosmetic-module-accent),
    inset 0 0 0 9999px var(--cosmetic-module-tint);
}

:is(
  #screen-tracker .tracker-shell,
  #hamburgerMenu .hamburger-panel,
  #screen-market .cosmetic-module-preview
)[data-module-skin][data-module-backdrop],
#screen-motivation :is(.motivation-quote-grid, .motivation-goal-grid)[data-module-skin][data-module-backdrop] > .motivation-hero-card,
#ledgerAccountsList[data-module-skin][data-module-backdrop] > .ledger-account-row {
  backdrop-filter: var(--cosmetic-module-backdrop);
  -webkit-backdrop-filter: var(--cosmetic-module-backdrop);
}

/* Home layout: spacing tokens on the real card grid, plus the accent edge as a
   left-border longhand so equipped card skins keep their own surface. */
#screen-home .home-primary-grid[data-module-skin][data-module-layout],
#screen-market .cosmetic-module-preview--cards[data-module-layout] .cosmetic-module-preview-body {
  gap: var(--cosmetic-module-gap, 12px);
}

#screen-home .home-primary-grid[data-module-skin][data-module-layout] > .primary-action-card,
#screen-market .cosmetic-module-preview--cards[data-module-layout] .cosmetic-module-preview-row {
  padding: var(--cosmetic-module-padding, 16px);
  border-radius: var(--cosmetic-module-radius);
}

#screen-home .home-primary-grid[data-module-skin][data-module-stripe] > .primary-action-card,
#screen-market .cosmetic-module-preview--cards[data-module-stripe] .cosmetic-module-preview-row {
  border-left-style: solid;
  border-left-width: var(--cosmetic-module-stripe);
  border-left-color: var(--cosmetic-module-accent);
}

/* Results progress visuals: a ring accent around the active Results type. */
#screen-results #resultsTypeRow[data-module-skin] .results-type-btn.active,
#screen-market .cosmetic-module-preview--controls[data-preview-target="results.progressVisual"][data-module-skin] .cosmetic-module-preview-row:first-child {
  box-shadow:
    0 0 0 2px var(--cosmetic-module-accent),
    0 0 14px color-mix(in srgb, var(--cosmetic-module-accent) 45%, transparent);
}

/* Navigation icons: accent-ringed icon tiles on the menu items. */
#hamburgerMenu .hamburger-item[data-module-skin] > .cp-icon,
#screen-market .cosmetic-module-preview[data-preview-target="navigation.icons"][data-module-skin] .cosmetic-module-preview-icon,
#screen-market .cosmetic-module-preview--menu[data-preview-target="navigation.menu"][data-module-skin] .cosmetic-module-preview-icon {
  border: var(--cosmetic-module-border);
  border-radius: var(--cosmetic-module-radius);
  box-shadow: inset 0 0 0 9999px var(--cosmetic-module-tint), 0 0 10px color-mix(in srgb, var(--cosmetic-module-accent) 30%, transparent);
  color: var(--cosmetic-module-accent);
}

#screen-market .cosmetic-module-preview--menu[data-preview-target="navigation.menu"][data-module-skin] .cosmetic-module-preview-icon {
  border: 0;
  box-shadow: none;
  color: inherit;
}

/* Cue Feed: only the in-app overlay chrome is skinned. The frame is an inset
   outline on the stage (painted above the player without touching the embed or
   its iframe), the overlay is a scrim behind the top controls, and the controls
   get an accent border/glow. */
#cueFeedStage[data-module-skin][data-module-stripe],
#screen-market .cosmetic-module-preview--frame[data-module-skin][data-module-stripe] {
  outline: var(--cosmetic-module-stripe) solid var(--cosmetic-module-accent);
  outline-offset: calc(var(--cosmetic-module-stripe) * -1);
}

#screen-cue-feed .cue-feed-topbar[data-module-skin],
#screen-market .cosmetic-module-preview--overlay[data-module-skin] .cosmetic-module-preview-title {
  background-image: linear-gradient(180deg, var(--cosmetic-module-tint), transparent);
}

#screen-cue-feed .cue-feed-playback-controls[data-module-skin] .cue-feed-playback-btn,
#screen-market .cosmetic-module-preview--controls[data-preview-target="cueFeed.controls"][data-module-skin] .cosmetic-module-preview-row {
  border: var(--cosmetic-module-border);
  box-shadow: 0 0 12px color-mix(in srgb, var(--cosmetic-module-accent) 35%, transparent);
}

/* ---- Market module previews (cosmetics.js renderModule) ---- */
.cosmetic-module-preview {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  margin: 0 auto;
  padding: 14px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 16px;
  overflow: hidden;
}

.cosmetic-module-preview-title {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cosmetic-module-preview-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.cosmetic-module-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 36px;
  padding: 8px 12px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 12px;
  overflow-wrap: anywhere;
}

.cosmetic-module-preview-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.cosmetic-module-preview--cards .cosmetic-module-preview-body,
.cosmetic-module-preview--tiles .cosmetic-module-preview-body {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.cosmetic-module-preview--cards .cosmetic-module-preview-row {
  min-height: 64px;
  align-items: flex-start;
}

.cosmetic-module-preview--controls .cosmetic-module-preview-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cosmetic-module-preview--controls .cosmetic-module-preview-row {
  border-radius: 999px;
  justify-content: center;
}

.cosmetic-module-preview--chart .cosmetic-module-preview-body {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  height: 120px;
}

.cosmetic-module-preview--chart .cosmetic-module-preview-row {
  height: var(--preview-bar, 50%);
  min-height: 0;
  padding: 0;
  background: color-mix(in srgb, var(--cosmetic-module-accent, currentColor) 35%, transparent);
}

.cosmetic-module-preview--frame .cosmetic-module-preview-body,
.cosmetic-module-preview--overlay .cosmetic-module-preview-body {
  min-height: 140px;
  place-items: center;
  border-radius: 12px;
  background: #06080a;
  color: #f5f7fa;
}

.cosmetic-module-preview--overlay {
  position: relative;
  padding: 0;
  background: #06080a;
  color: #f5f7fa;
}

.cosmetic-module-preview--overlay .cosmetic-module-preview-title {
  padding: 12px 14px 28px;
}

.cosmetic-module-preview--overlay .cosmetic-module-preview-row,
.cosmetic-module-preview--frame .cosmetic-module-preview-row {
  border: 0;
}

.cosmetic-module-preview--card {
  padding: 0;
  border: 0;
  overflow: visible;
}