/* v190: last-mile layout guard loaded after styles.css. */
:root {
  --app-rail-width: min(430px, calc(100vw - 14px)) !important;
  --app-rail-left: max(7px, calc((100vw - 430px) / 2)) !important;
  --app-stage-top: 12px !important;
  --app-stage-bottom: 12px !important;
  --topbar-height: 64px !important;
  --dock-height: 88px !important;
}

/* v738-fit-result-actions: saving or handing off only makes sense after a fit result exists. */
#fit .section-actions button:disabled,
body[data-theme] #fit .section-actions button:disabled,
html.native-layout-guard #fit .section-actions button:disabled,
html.native-layout-guard body[data-theme] #fit .section-actions button:disabled {
  cursor: not-allowed !important;
  border-color: rgba(244, 240, 232, 0.12) !important;
  background: rgba(244, 240, 232, 0.055) !important;
  color: rgba(244, 240, 232, 0.46) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* v735-history-empty-actions: empty memory must lead back into a real workflow. */
#history .empty-card.history-empty-card,
body[data-theme] #history .empty-card.history-empty-card,
html.native-layout-guard #history .empty-card.history-empty-card,
html.native-layout-guard body[data-theme] #history .empty-card.history-empty-card {
  display: grid !important;
  min-height: 144px !important;
  align-content: start !important;
  gap: 8px !important;
}

#history .history-empty-action,
body[data-theme] #history .history-empty-action,
html.native-layout-guard #history .history-empty-action,
html.native-layout-guard body[data-theme] #history .history-empty-action {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 2px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(185, 247, 228, 0.58) !important;
  border-radius: 12px !important;
  background: rgba(185, 247, 228, 0.14) !important;
  color: var(--sb-mint, #b9f7e4) !important;
  font: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 780 !important;
  line-height: 1.1 !important;
}

#history .history-empty-action:hover,
#history .history-empty-action:focus-visible,
body[data-theme] #history .history-empty-action:hover,
body[data-theme] #history .history-empty-action:focus-visible,
html.native-layout-guard #history .history-empty-action:hover,
html.native-layout-guard #history .history-empty-action:focus-visible,
html.native-layout-guard body[data-theme] #history .history-empty-action:hover,
html.native-layout-guard body[data-theme] #history .history-empty-action:focus-visible {
  border-color: var(--sb-mint, #b9f7e4) !important;
  background: rgba(185, 247, 228, 0.23) !important;
  color: var(--sb-ink, #f4f0e8) !important;
}

/* v734-coach-quick-briefs: make the Stylist's first action explicit and useful. */
#coach .coach-quick-briefs,
body[data-theme] #coach .coach-quick-briefs,
html.native-layout-guard #coach .coach-quick-briefs,
html.native-layout-guard body[data-theme] #coach .coach-quick-briefs {
  display: grid !important;
  gap: 8px !important;
  margin: 12px 0 2px !important;
  padding: 10px !important;
  border: 1px solid rgba(185, 247, 228, 0.22) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(185, 247, 228, 0.09), rgba(5, 6, 8, 0.48)) !important;
}

#coach .coach-quick-briefs > span,
body[data-theme] #coach .coach-quick-briefs > span,
html.native-layout-guard #coach .coach-quick-briefs > span,
html.native-layout-guard body[data-theme] #coach .coach-quick-briefs > span {
  color: var(--sb-mint, #b9f7e4) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#coach .coach-quick-briefs > div,
body[data-theme] #coach .coach-quick-briefs > div,
html.native-layout-guard #coach .coach-quick-briefs > div,
html.native-layout-guard body[data-theme] #coach .coach-quick-briefs > div {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#coach .coach-quick-briefs button,
body[data-theme] #coach .coach-quick-briefs button,
html.native-layout-guard #coach .coach-quick-briefs button,
html.native-layout-guard body[data-theme] #coach .coach-quick-briefs button {
  display: grid !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 8px 10px !important;
  place-items: center !important;
  border: 1px solid rgba(244, 240, 232, 0.16) !important;
  border-radius: 12px !important;
  background: rgba(8, 10, 12, 0.62) !important;
  color: var(--sb-ink, #f4f0e8) !important;
  font: inherit !important;
  font-size: 0.8rem !important;
  font-weight: 740 !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

#coach .coach-quick-briefs button:hover,
#coach .coach-quick-briefs button:focus-visible,
body[data-theme] #coach .coach-quick-briefs button:hover,
body[data-theme] #coach .coach-quick-briefs button:focus-visible,
html.native-layout-guard #coach .coach-quick-briefs button:hover,
html.native-layout-guard #coach .coach-quick-briefs button:focus-visible,
html.native-layout-guard body[data-theme] #coach .coach-quick-briefs button:hover,
html.native-layout-guard body[data-theme] #coach .coach-quick-briefs button:focus-visible {
  border-color: rgba(185, 247, 228, 0.68) !important;
  background: rgba(185, 247, 228, 0.14) !important;
  color: var(--sb-mint, #b9f7e4) !important;
}

/* v26-trends-mobile-readability: trend cards must scan cleanly on phones. */
@media (max-width: 900px) {
  #trends .trend-grid,
  body[data-theme] #trends .trend-grid,
  html.native-layout-guard #trends .trend-grid,
  html.native-layout-guard body[data-theme] #trends .trend-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: 1fr !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  #trends #trendGrid > .trend-card:nth-child(n + 3),
  body[data-theme] #trends #trendGrid > .trend-card:nth-child(n + 3),
  html.native-layout-guard #trends #trendGrid > .trend-card:nth-child(n + 3),
  html.native-layout-guard body[data-theme] #trends #trendGrid > .trend-card:nth-child(n + 3) {
    display: none !important;
  }

  #trends .trend-card,
  body[data-theme] #trends .trend-card,
  html.native-layout-guard #trends .trend-card,
  html.native-layout-guard body[data-theme] #trends .trend-card {
    display: grid !important;
    min-height: 0 !important;
    gap: 7px !important;
    overflow: hidden !important;
    padding: 10px 11px !important;
    border: 1px solid rgba(244, 240, 232, 0.1) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(180deg, rgba(244, 240, 232, 0.055), rgba(244, 240, 232, 0.018)),
      #111418 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    scroll-snap-align: none !important;
  }

  #trends .trend-card::before,
  body[data-theme] #trends .trend-card::before,
  html.native-layout-guard #trends .trend-card::before,
  html.native-layout-guard body[data-theme] #trends .trend-card::before {
    display: none !important;
  }

  #trends .trend-card > *,
  body[data-theme] #trends .trend-card > *,
  html.native-layout-guard #trends .trend-card > *,
  html.native-layout-guard body[data-theme] #trends .trend-card > * {
    position: static !important;
    z-index: auto !important;
  }

  #trends .trend-card-head,
  body[data-theme] #trends .trend-card-head,
  html.native-layout-guard #trends .trend-card-head,
  html.native-layout-guard body[data-theme] #trends .trend-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  #trends .trend-score,
  body[data-theme] #trends .trend-score,
  html.native-layout-guard #trends .trend-score,
  html.native-layout-guard body[data-theme] #trends .trend-score {
    max-width: calc(100% - 66px) !important;
    min-height: 24px !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 4px 8px !important;
    font-size: 0.56rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #trends .trend-card-head .ghost-button,
  body[data-theme] #trends .trend-card-head .ghost-button,
  html.native-layout-guard #trends .trend-card-head .ghost-button,
  html.native-layout-guard body[data-theme] #trends .trend-card-head .ghost-button {
    flex: 0 0 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 0.58rem !important;
  }

  #trends .trend-card h3,
  body[data-theme] #trends .trend-card h3,
  html.native-layout-guard #trends .trend-card h3,
  html.native-layout-guard body[data-theme] #trends .trend-card h3 {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #fbf6ea !important;
    font-size: 0.92rem !important;
    line-height: 1.08 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  #trends .trend-card p,
  body[data-theme] #trends .trend-card p,
  html.native-layout-guard #trends .trend-card p,
  html.native-layout-guard body[data-theme] #trends .trend-card p {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(251, 246, 234, 0.74) !important;
    font-size: 0.68rem !important;
    line-height: 1.28 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  #trends .trend-card-meta,
  #trends .trend-card .pill-row,
  body[data-theme] #trends .trend-card-meta,
  body[data-theme] #trends .trend-card .pill-row,
  html.native-layout-guard #trends .trend-card-meta,
  html.native-layout-guard #trends .trend-card .pill-row,
  html.native-layout-guard body[data-theme] #trends .trend-card-meta,
  html.native-layout-guard body[data-theme] #trends .trend-card .pill-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #trends .trend-card-meta span,
  #trends .trend-card .pill,
  body[data-theme] #trends .trend-card-meta span,
  body[data-theme] #trends .trend-card .pill,
  html.native-layout-guard #trends .trend-card-meta span,
  html.native-layout-guard #trends .trend-card .pill,
  html.native-layout-guard body[data-theme] #trends .trend-card-meta span,
  html.native-layout-guard body[data-theme] #trends .trend-card .pill {
    min-height: 22px !important;
    max-width: 100% !important;
    padding: 3px 7px !important;
    font-size: 0.52rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #trends .trend-card-meta span:nth-child(n + 3),
  #trends .trend-card .pill:nth-child(n + 4),
  body[data-theme] #trends .trend-card-meta span:nth-child(n + 3),
  body[data-theme] #trends .trend-card .pill:nth-child(n + 4),
  html.native-layout-guard #trends .trend-card-meta span:nth-child(n + 3),
  html.native-layout-guard #trends .trend-card .pill:nth-child(n + 4),
  html.native-layout-guard body[data-theme] #trends .trend-card-meta span:nth-child(n + 3),
  html.native-layout-guard body[data-theme] #trends .trend-card .pill:nth-child(n + 4) {
    display: none !important;
  }
}

/* v804-native-pending-cascade: match the native layout guard specificity. */
html.native-layout-guard body[data-theme] #planner[data-generation-state="pending"] .planner-panel,
html.native-layout-guard body[data-theme] #coach[data-generation-state="pending"] .coach-panel,
html.native-layout-guard body[data-theme] #capsule[data-generation-state="pending"] .capsule-panel {
  order: 1 !important;
  grid-column: 1 / -1 !important;
}

html.native-layout-guard body[data-theme] #planner[data-generation-state="pending"] .planner-result-panel,
html.native-layout-guard body[data-theme] #coach[data-generation-state="pending"] .coach-answer-panel,
html.native-layout-guard body[data-theme] #capsule[data-generation-state="pending"] .capsule-board-panel {
  order: 2 !important;
  grid-column: 1 / -1 !important;
}

html.native-layout-guard body[data-theme] #planner[data-generation-state="pending"] .planner-ticket {
  grid-template-columns: minmax(0, 1fr) !important;
}

html.native-layout-guard body[data-theme] #planner[data-generation-state="pending"] .planner-ticket-head {
  grid-column: 1 / -1 !important;
  padding: clamp(18px, 3vw, 28px) !important;
  border-right: 0 !important;
}

html.native-layout-guard body[data-theme] :is(
  #planner[data-generation-state="pending"] .planner-ticket-head h3,
  #coach[data-generation-state="pending"] .coach-answer-head h3,
  #capsule[data-generation-state="pending"] .capsule-board-head h3
) {
  max-width: none !important;
  font-family: inherit !important;
  font-size: clamp(1.22rem, 2.6vw, 1.7rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
}

html.native-layout-guard body[data-theme] :is(
  #planner[data-generation-state="pending"] .planner-brief-narrative,
  #planner[data-generation-state="pending"] #plannerScore,
  #planner[data-generation-state="pending"] .planner-metrics,
  #planner[data-generation-state="pending"] .planner-reasons,
  #planner[data-generation-state="pending"] .planner-brief-actions,
  #planner[data-generation-state="pending"] #plannerStatus:empty,
  #coach[data-generation-state="pending"] .coach-session-narrative,
  #coach[data-generation-state="pending"] #coachScore,
  #coach[data-generation-state="pending"] .coach-metrics,
  #coach[data-generation-state="pending"] .coach-session-actions,
  #capsule[data-generation-state="pending"] .capsule-edit-narrative,
  #capsule[data-generation-state="pending"] #capsuleScore,
  #capsule[data-generation-state="pending"] .capsule-metrics,
  #capsule[data-generation-state="pending"] .capsule-edit-actions,
  #capsule[data-generation-state="pending"] #capsuleStatus:empty
) {
  display: none !important;
}

html.native-layout-guard body[data-theme] #planner[data-generation-state="pending"] .planner-outfit {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  display: block !important;
  min-height: 0 !important;
  padding: 0 clamp(18px, 3vw, 28px) clamp(18px, 3vw, 28px) !important;
  overflow: visible !important;
  background: transparent !important;
}

html.native-layout-guard body[data-theme] :is(
  #planner[data-generation-state="pending"] .planner-empty,
  #coach[data-generation-state="pending"] .coach-empty,
  #capsule[data-generation-state="pending"] .capsule-empty
) {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 16px !important;
}

html.native-layout-guard body[data-theme] :is(
  #planner[data-generation-state="pending"] .planner-empty h4,
  #coach[data-generation-state="pending"] .coach-empty h4,
  #capsule[data-generation-state="pending"] .capsule-empty h4
) {
  margin: 0 0 4px !important;
  font-size: 0.88rem !important;
  line-height: 1.18 !important;
}

html.native-layout-guard body[data-theme] :is(
  #planner[data-generation-state="pending"] .planner-empty p,
  #coach[data-generation-state="pending"] .coach-empty p,
  #capsule[data-generation-state="pending"] .capsule-empty p
) {
  margin: 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.38 !important;
}

html.native-layout-guard body[data-theme] :is(
  #coach[data-generation-state="pending"] .coach-answer,
  #capsule[data-generation-state="pending"] .capsule-board
) {
  gap: 14px !important;
}

html.native-layout-guard body[data-theme] :is(
  #coach[data-generation-state="pending"] .coach-answer-head,
  #capsule[data-generation-state="pending"] .capsule-board-head
) {
  grid-template-columns: minmax(0, 1fr) !important;
}

html.native-layout-guard body[data-theme] #coach[data-generation-state="pending"] .coach-session-quote {
  margin: 0 !important;
  padding: 12px 14px !important;
}

@media (max-width: 900px) {
  html.native-layout-guard body[data-theme] :is(
    #planner[data-generation-state="pending"] > .planner-brief-head,
    #coach[data-generation-state="pending"] > .section-head,
    #capsule[data-generation-state="pending"] > .section-head
  ) {
    gap: 10px !important;
    padding: 14px !important;
  }

  html.native-layout-guard body[data-theme] :is(
    #planner[data-generation-state="pending"] #plannerBriefHeadline,
    #coach[data-generation-state="pending"] #coachHeadline,
    #capsule[data-generation-state="pending"] #capsuleHeadline
  ) {
    max-width: none !important;
    font-size: clamp(1.62rem, 7.6vw, 2.15rem) !important;
    line-height: 1.01 !important;
  }

  html.native-layout-guard body[data-theme] #planner[data-generation-state="pending"] .planner-ticket-head {
    padding: 16px !important;
  }

  html.native-layout-guard body[data-theme] #planner[data-generation-state="pending"] .planner-outfit {
    padding: 0 16px 16px !important;
  }
}

/* v810-contextual-photo-entry: keep long no-photo guidance in the Studio flow. */
#studio .studio-photo-entry-status,
body[data-theme] #studio .studio-photo-entry-status {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(217, 230, 107, 0.28);
  border-radius: 14px;
  background: rgba(217, 230, 107, 0.1);
  color: var(--ink, #151515) !important;
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.38;
  text-align: left;
}

#studio .studio-photo-entry-status::before,
body[data-theme] #studio .studio-photo-entry-status::before {
  content: "→";
  flex: 0 0 auto;
  color: var(--accent-strong, #6a7417);
  font-weight: 950;
}

#studio .studio-photo-entry-status[hidden],
body[data-theme] #studio .studio-photo-entry-status[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  #studio .studio-photo-entry-status,
  body[data-theme] #studio .studio-photo-entry-status {
    margin-top: 8px;
    padding: 10px 11px;
    border-radius: 12px;
    font-size: 0.8rem;
  }
}


/* v775: one relationship and one next move lead the CRM before the pipeline. */
#clients .client-desk,
body[data-theme] #clients .client-desk,
html.native-layout-guard body[data-theme] #clients .client-desk {
  position: relative !important;
  display: grid !important;
  gap: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(18, 17, 15, 0.16) !important;
  border-radius: 3px !important;
  background: #f1eee6 !important;
  color: #12110f !important;
  box-shadow: 0 22px 54px rgba(25, 21, 18, 0.2) !important;
}

#clients .client-desk-edition,
body[data-theme] #clients .client-desk-edition,
html.native-layout-guard body[data-theme] #clients .client-desk-edition {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 42px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: #12110f !important;
  color: #fffdf7 !important;
  padding: 10px 15px !important;
  font-size: 0.58rem !important;
  font-weight: 920 !important;
  letter-spacing: 0.15em !important;
  line-height: 1.15 !important;
}

#clients .client-desk-edition strong,
body[data-theme] #clients .client-desk-edition strong {
  color: #f0d0d0 !important;
  font: inherit !important;
  text-align: right !important;
}

#clients .client-desk-layout,
body[data-theme] #clients .client-desk-layout,
html.native-layout-guard body[data-theme] #clients .client-desk-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr) !important;
  min-width: 0 !important;
}

#clients .client-desk-copy,
body[data-theme] #clients .client-desk-copy,
html.native-layout-guard body[data-theme] #clients .client-desk-copy {
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  min-width: 0 !important;
  padding: 24px !important;
}

#clients .client-desk-eyebrow,
body[data-theme] #clients .client-desk-eyebrow {
  color: rgba(18, 17, 15, 0.58) !important;
  font-size: 0.58rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.16em !important;
  line-height: 1 !important;
}

#clients .client-desk h3,
body[data-theme] #clients .client-desk h3,
html.native-layout-guard body[data-theme] #clients .client-desk h3 {
  max-width: 8em !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #12110f !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(3rem, 7vw, 5.4rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.06em !important;
  line-height: 0.84 !important;
  text-wrap: balance !important;
}

#clients .client-desk-narrative,
body[data-theme] #clients .client-desk-narrative,
html.native-layout-guard body[data-theme] #clients .client-desk-narrative {
  margin: 0 !important;
  border-left: 4px solid #12110f !important;
  background: #ebcdcd !important;
  color: #12110f !important;
  padding: 13px 14px !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(0.94rem, 2.4vw, 1.18rem) !important;
  font-weight: 500 !important;
  line-height: 1.24 !important;
}

#clients .client-desk-facts,
body[data-theme] #clients .client-desk-facts,
html.native-layout-guard body[data-theme] #clients .client-desk-facts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  border: 1px solid rgba(18, 17, 15, 0.15) !important;
  background: rgba(18, 17, 15, 0.15) !important;
}

#clients .client-desk-facts > div,
body[data-theme] #clients .client-desk-facts > div {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  background: #f1eee6 !important;
  padding: 10px !important;
}

#clients .client-desk-facts strong,
#clients .client-desk-facts span,
body[data-theme] #clients .client-desk-facts strong,
body[data-theme] #clients .client-desk-facts span {
  display: block !important;
  min-width: 0 !important;
  overflow: visible !important;
  color: #12110f !important;
  line-height: 1.05 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

#clients .client-desk-facts strong,
body[data-theme] #clients .client-desk-facts strong {
  font-size: 0.86rem !important;
  font-weight: 900 !important;
}

#clients .client-desk-facts span,
body[data-theme] #clients .client-desk-facts span {
  color: rgba(18, 17, 15, 0.55) !important;
  font-size: 0.48rem !important;
  font-weight: 920 !important;
  letter-spacing: 0.09em !important;
}

#clients .client-desk-actions,
body[data-theme] #clients .client-desk-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#clients .client-desk-actions > :only-child,
body[data-theme] #clients .client-desk-actions > :only-child {
  grid-column: 1 / -1 !important;
}

#clients .client-desk-actions :is(.primary-button, .ghost-button),
body[data-theme] #clients .client-desk-actions :is(.primary-button, .ghost-button),
html.native-layout-guard body[data-theme] #clients .client-desk-actions :is(.primary-button, .ghost-button) {
  min-height: 48px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0.7rem !important;
  font-weight: 920 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

#clients .client-desk-actions .primary-button,
body[data-theme] #clients .client-desk-actions .primary-button {
  border-color: #12110f !important;
  background: #12110f !important;
  color: #fffdf7 !important;
}

#clients .client-desk-actions .ghost-button,
body[data-theme] #clients .client-desk-actions .ghost-button {
  border-color: rgba(18, 17, 15, 0.35) !important;
  background: transparent !important;
  color: #12110f !important;
}

#clients .client-desk-product,
body[data-theme] #clients .client-desk-product,
html.native-layout-guard body[data-theme] #clients .client-desk-product {
  position: relative !important;
  min-width: 0 !important;
  min-height: 410px !important;
  overflow: hidden !important;
  margin: 0 !important;
  border-left: 4px solid #12110f !important;
  background: #12110f !important;
}

#clients .client-desk-product img,
body[data-theme] #clients .client-desk-product img,
html.native-layout-guard body[data-theme] #clients .client-desk-product img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 410px !important;
  object-fit: cover !important;
  filter: saturate(0.86) contrast(1.04) !important;
}

#clients .client-desk-product figcaption,
body[data-theme] #clients .client-desk-product figcaption,
html.native-layout-guard body[data-theme] #clients .client-desk-product figcaption {
  position: absolute !important;
  inset: auto 12px 12px 12px !important;
  display: grid !important;
  gap: 5px !important;
  background: rgba(18, 17, 15, 0.9) !important;
  color: #fffdf7 !important;
  padding: 12px !important;
  backdrop-filter: blur(12px) !important;
}

#clients .client-desk-product figcaption small,
body[data-theme] #clients .client-desk-product figcaption small {
  color: #efcdcd !important;
  font-size: 0.5rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.13em !important;
  line-height: 1 !important;
}

#clients .client-desk-product figcaption strong,
body[data-theme] #clients .client-desk-product figcaption strong {
  color: #fffdf7 !important;
  font-size: 0.9rem !important;
  line-height: 1.08 !important;
}

#clients .client-desk-product figcaption span,
body[data-theme] #clients .client-desk-product figcaption span {
  color: rgba(255, 253, 247, 0.7) !important;
  font-size: 0.6rem !important;
  font-weight: 720 !important;
  line-height: 1.24 !important;
}

#clients .client-desk-empty,
body[data-theme] #clients .client-desk-empty {
  display: grid !important;
  gap: 14px !important;
  padding: 24px !important;
}

#clients .client-desk-empty > span,
body[data-theme] #clients .client-desk-empty > span {
  color: rgba(255, 253, 247, 0.78) !important;
  font-size: 0.58rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.16em !important;
}

#clients .client-desk-empty p,
body[data-theme] #clients .client-desk-empty p {
  max-width: 42rem !important;
  margin: 0 !important;
  color: rgba(255, 253, 247, 0.82) !important;
  font-size: 0.86rem !important;
  line-height: 1.45 !important;
}

#clients .client-desk-empty .primary-button,
body[data-theme] #clients .client-desk-empty .primary-button {
  justify-self: start !important;
  min-height: 48px !important;
  border-radius: 0 !important;
  background: #12110f !important;
  color: #fffdf7 !important;
}

@media (max-width: 900px) {
  #clients .client-desk-layout,
  body[data-theme] #clients .client-desk-layout,
  html.native-layout-guard body[data-theme] #clients .client-desk-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(116px, 0.65fr) !important;
  }

  #clients .client-desk-copy,
  body[data-theme] #clients .client-desk-copy,
  html.native-layout-guard body[data-theme] #clients .client-desk-copy {
    gap: 12px !important;
    padding: 16px 14px !important;
  }

  #clients .client-desk h3,
  body[data-theme] #clients .client-desk h3,
  html.native-layout-guard body[data-theme] #clients .client-desk h3 {
    font-size: clamp(2.7rem, 14vw, 4.1rem) !important;
  }

  #clients .client-desk-narrative,
  body[data-theme] #clients .client-desk-narrative {
    padding: 11px 10px !important;
    font-size: 0.9rem !important;
  }

  #clients .client-desk-facts,
  body[data-theme] #clients .client-desk-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #clients .client-desk-facts > div:last-child,
  body[data-theme] #clients .client-desk-facts > div:last-child {
    grid-column: 1 / -1 !important;
  }

  #clients .client-desk-actions,
  body[data-theme] #clients .client-desk-actions {
    grid-template-columns: 1fr !important;
  }

  #clients .client-desk-actions > *,
  body[data-theme] #clients .client-desk-actions > * {
    grid-column: 1 !important;
  }

  #clients .client-desk-product,
  body[data-theme] #clients .client-desk-product,
  #clients .client-desk-product img,
  body[data-theme] #clients .client-desk-product img {
    min-height: 100% !important;
  }

  #clients .client-desk-product figcaption,
  body[data-theme] #clients .client-desk-product figcaption {
    inset: auto 6px 6px 6px !important;
    padding: 8px !important;
  }

  #clients .client-desk-product figcaption strong,
  body[data-theme] #clients .client-desk-product figcaption strong {
    font-size: 0.72rem !important;
  }

  #clients .client-desk-product figcaption span,
  body[data-theme] #clients .client-desk-product figcaption span {
    font-size: 0.53rem !important;
  }
}

/* v709-score-retake-action: keep the recovery action beside the unscored result on every screen size. */
.score-retake-action[hidden] {
  display: none !important;
}

.score-retake-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  margin-top: 10px !important;
  padding-inline: 16px !important;
}

@media (max-width: 900px) {
  #studio .score-retake-action,
  body[data-theme] #studio .score-retake-action,
  html.native-layout-guard #studio .score-retake-action,
  html.native-layout-guard body[data-theme] #studio .score-retake-action {
    width: 100% !important;
  }
}

/* v526-studio-empty-score-state: initial Studio score must not look like a real calculated score. */
#studio .score-ring[data-empty="true"],
body[data-theme] #studio .score-ring[data-empty="true"],
html.native-layout-guard #studio .score-ring[data-empty="true"],
html.native-layout-guard body[data-theme] #studio .score-ring[data-empty="true"] {
  background:
    radial-gradient(circle at center, rgba(12, 13, 16, 0.94) 56%, transparent 57%),
    linear-gradient(145deg, rgba(87, 96, 110, 0.5), rgba(31, 34, 42, 0.78)) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#studio .score-ring[data-empty="true"] strong,
body[data-theme] #studio .score-ring[data-empty="true"] strong,
html.native-layout-guard #studio .score-ring[data-empty="true"] strong,
html.native-layout-guard body[data-theme] #studio .score-ring[data-empty="true"] strong {
  color: rgba(255, 250, 242, 0.8) !important;
}

#studio .score-ring[data-empty="true"] span,
body[data-theme] #studio .score-ring[data-empty="true"] span,
html.native-layout-guard #studio .score-ring[data-empty="true"] span,
html.native-layout-guard body[data-theme] #studio .score-ring[data-empty="true"] span {
  display: none !important;
  color: rgba(255, 250, 242, 0.46) !important;
}

/* v527-fit-pending-score-state: Fit must not show a hard recommendation before the user calculates it. */
#fit #fitScore[data-empty="true"],
body[data-theme] #fit #fitScore[data-empty="true"],
html.native-layout-guard #fit #fitScore[data-empty="true"],
html.native-layout-guard body[data-theme] #fit #fitScore[data-empty="true"] {
  background:
    radial-gradient(circle at center, rgba(9, 10, 12, 0.94) 58%, transparent 59%),
    linear-gradient(145deg, rgba(87, 96, 110, 0.45), rgba(31, 34, 42, 0.78)) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 250, 242, 0.8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* v27-mobile-scan-depth: keep dense advisory modules short on first view. */
@media (max-width: 900px) {
  #coach .coach-message p:nth-of-type(n + 4),
  #coach .coach-items > *:nth-child(n + 2),
  #fit .fit-readout p:nth-of-type(n + 3),
  #fit .fit-alternatives,
  #planner .planner-outfit > *:nth-child(n + 4),
  #planner .planner-reasons p:nth-of-type(n + 2),
  #capsule .capsule-items > *:nth-child(n + 3),
  #passport .passport-dna > *:nth-child(n + 4),
  #passport .passport-reasons > *:nth-child(n + 2),
  #passport .passport-products > *:nth-child(n + 3),
  body[data-theme] #coach .coach-message p:nth-of-type(n + 4),
  body[data-theme] #coach .coach-items > *:nth-child(n + 2),
  body[data-theme] #fit .fit-readout p:nth-of-type(n + 3),
  body[data-theme] #fit .fit-alternatives,
  body[data-theme] #planner .planner-outfit > *:nth-child(n + 4),
  body[data-theme] #planner .planner-reasons p:nth-of-type(n + 2),
  body[data-theme] #capsule .capsule-items > *:nth-child(n + 3),
  body[data-theme] #passport .passport-dna > *:nth-child(n + 4),
  body[data-theme] #passport .passport-reasons > *:nth-child(n + 2),
  body[data-theme] #passport .passport-products > *:nth-child(n + 3),
  html.native-layout-guard #coach .coach-message p:nth-of-type(n + 4),
  html.native-layout-guard #coach .coach-items > *:nth-child(n + 2),
  html.native-layout-guard #fit .fit-readout p:nth-of-type(n + 3),
  html.native-layout-guard #fit .fit-alternatives,
  html.native-layout-guard #planner .planner-outfit > *:nth-child(n + 4),
  html.native-layout-guard #planner .planner-reasons p:nth-of-type(n + 2),
  html.native-layout-guard #capsule .capsule-items > *:nth-child(n + 3),
  html.native-layout-guard #passport .passport-dna > *:nth-child(n + 4),
  html.native-layout-guard #passport .passport-reasons > *:nth-child(n + 2),
  html.native-layout-guard #passport .passport-products > *:nth-child(n + 3),
  html.native-layout-guard body[data-theme] #coach .coach-message p:nth-of-type(n + 4),
  html.native-layout-guard body[data-theme] #coach .coach-items > *:nth-child(n + 2),
  html.native-layout-guard body[data-theme] #fit .fit-readout p:nth-of-type(n + 3),
  html.native-layout-guard body[data-theme] #fit .fit-alternatives,
  html.native-layout-guard body[data-theme] #planner .planner-outfit > *:nth-child(n + 4),
  html.native-layout-guard body[data-theme] #planner .planner-reasons p:nth-of-type(n + 2),
  html.native-layout-guard body[data-theme] #capsule .capsule-items > *:nth-child(n + 3),
  html.native-layout-guard body[data-theme] #passport .passport-dna > *:nth-child(n + 4),
  html.native-layout-guard body[data-theme] #passport .passport-reasons > *:nth-child(n + 2),
  html.native-layout-guard body[data-theme] #passport .passport-products > *:nth-child(n + 3) {
    display: none !important;
  }

  #coach .coach-items,
  #planner .planner-outfit,
  #capsule .capsule-items,
  body[data-theme] #coach .coach-items,
  body[data-theme] #planner .planner-outfit,
  body[data-theme] #capsule .capsule-items,
  html.native-layout-guard #coach .coach-items,
  html.native-layout-guard #planner .planner-outfit,
  html.native-layout-guard #capsule .capsule-items,
  html.native-layout-guard body[data-theme] #coach .coach-items,
  html.native-layout-guard body[data-theme] #planner .planner-outfit,
  html.native-layout-guard body[data-theme] #capsule .capsule-items {
    gap: 7px !important;
  }

  #lookbook .lookbook-grid,
  body[data-theme] #lookbook .lookbook-grid,
  html.native-layout-guard #lookbook .lookbook-grid,
  html.native-layout-guard body[data-theme] #lookbook .lookbook-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: 1fr !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  #lookbook .look-card,
  body[data-theme] #lookbook .look-card,
  html.native-layout-guard #lookbook .look-card,
  html.native-layout-guard body[data-theme] #lookbook .look-card {
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 11px !important;
    border-radius: 14px !important;
    scroll-snap-align: none !important;
  }

  #lookbook .look-card::before,
  body[data-theme] #lookbook .look-card::before,
  html.native-layout-guard #lookbook .look-card::before,
  html.native-layout-guard body[data-theme] #lookbook .look-card::before {
    display: none !important;
  }

  #lookbook .look-card > *,
  body[data-theme] #lookbook .look-card > *,
  html.native-layout-guard #lookbook .look-card > *,
  html.native-layout-guard body[data-theme] #lookbook .look-card > * {
    position: static !important;
    z-index: auto !important;
  }

  #lookbook .look-card-head,
  body[data-theme] #lookbook .look-card-head,
  html.native-layout-guard #lookbook .look-card-head,
  html.native-layout-guard body[data-theme] #lookbook .look-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  #lookbook .look-card-head h3,
  body[data-theme] #lookbook .look-card-head h3,
  html.native-layout-guard #lookbook .look-card-head h3,
  html.native-layout-guard body[data-theme] #lookbook .look-card-head h3 {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 0.9rem !important;
    line-height: 1.08 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  #lookbook .look-card-head > strong,
  body[data-theme] #lookbook .look-card-head > strong,
  html.native-layout-guard #lookbook .look-card-head > strong,
  html.native-layout-guard body[data-theme] #lookbook .look-card-head > strong {
    flex: 0 0 auto !important;
    max-width: 92px !important;
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
  }

  #lookbook .look-card :is(.look-card-items, .look-card-products, .look-items),
  body[data-theme] #lookbook .look-card :is(.look-card-items, .look-card-products, .look-items),
  html.native-layout-guard #lookbook .look-card :is(.look-card-items, .look-card-products, .look-items),
  html.native-layout-guard body[data-theme] #lookbook .look-card :is(.look-card-items, .look-card-products, .look-items) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: hidden !important;
  }
}



/* v203-final: one native app viewport. Header, screen, action and dock share the same rail. */
:root {
  --app-rail-max: 500px !important;
  --app-rail-width: min(var(--app-rail-max), calc(100vw - 24px)) !important;
  --app-rail-left: max(12px, calc((100vw - var(--app-rail-width)) / 2)) !important;
  --topbar-height: 72px !important;
  --dock-height: 94px !important;
  --safe-top: env(safe-area-inset-top, 0px) !important;
  --safe-bottom: env(safe-area-inset-bottom, 0px) !important;
}

html,
body {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body {
  background:
    linear-gradient(90deg, rgba(8, 26, 23, 0.42), transparent 28%, rgba(72, 12, 30, 0.38)),
    radial-gradient(circle at 50% 18%, rgba(219, 184, 91, 0.14), transparent 28%),
    var(--sb-bg, #050608) !important;
}

body::before {
  position: fixed !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--app-rail-left) !important;
  display: block !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

.app-shell,
body[data-theme] .app-shell {
  position: fixed !important;
  z-index: 90 !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: calc(var(--topbar-height) + var(--safe-top)) !important;
  padding: var(--safe-top) 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.topbar,
body[data-theme] .topbar {
  position: relative !important;
  display: grid !important;
  width: var(--app-rail-width) !important;
  min-width: 0 !important;
  max-width: var(--app-rail-width) !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  grid-template-columns: 104px minmax(0, 1fr) 46px 132px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 8px 10px !important;
  border-radius: 0 0 20px 20px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.brand,
body[data-theme] .brand {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 52px !important;
  overflow: visible !important;
}

.brand-logo,
.brand-logo-lock,
body[data-theme] .brand-logo,
body[data-theme] .brand-logo-lock {
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;
  height: 50px !important;
  max-height: 50px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

main,
body[data-theme] main {
  position: fixed !important;
  z-index: 2 !important;
  top: calc(var(--topbar-height) + var(--safe-top)) !important;
  right: 0 !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom)) !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: none !important;
}

main > .studio-band,
main > .content-band,
main > .business-band,
body[data-theme] main > .studio-band,
body[data-theme] main > .content-band,
body[data-theme] main > .business-band {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: var(--app-rail-left) !important;
  display: none !important;
  width: var(--app-rail-width) !important;
  min-width: 0 !important;
  max-width: var(--app-rail-width) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 14px 12px 26px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  transform: none !important;
  pointer-events: auto !important;
  scroll-padding-top: 14px !important;
  scroll-padding-bottom: 28px !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
}

main > .studio-band::-webkit-scrollbar,
main > .content-band::-webkit-scrollbar,
main > .business-band::-webkit-scrollbar {
  display: none !important;
}

main > .studio-band.active-view,
main > .content-band.active-view,
main > .business-band.active-view,
body[data-theme] main > .studio-band.active-view,
body[data-theme] main > .content-band.active-view,
body[data-theme] main > .business-band.active-view {
  display: block !important;
}

main > .active-view > :first-child,
body[data-theme] main > .active-view > :first-child {
  margin-top: 0 !important;
}

.mobile-dock,
body[data-theme] .mobile-dock {
  position: fixed !important;
  z-index: 92 !important;
  right: auto !important;
  bottom: var(--safe-bottom) !important;
  left: var(--app-rail-left) !important;
  display: grid !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom) + 14px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 60px) !important;
  display: grid !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 15px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after {
  content: none !important;
  display: none !important;
}

#studio .upload-zone,
.upload-zone,
body[data-theme] #studio .upload-zone,
body[data-theme] .upload-zone {
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

#inventory .inventory-layout,
#inventory .inventory-grid,
#inventory .wardrobe-map,
#inventory .wardrobe-gaps,
#inventory .catalog-audit-list,
#inventory .watchlist-list,
body[data-theme] #inventory .inventory-layout,
body[data-theme] #inventory .inventory-grid,
body[data-theme] #inventory .wardrobe-map,
body[data-theme] #inventory .wardrobe-gaps,
body[data-theme] #inventory .catalog-audit-list,
body[data-theme] #inventory .watchlist-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#inventory :is(.item-meta, .stock-line, .pill-row, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal),
body[data-theme] #inventory :is(.item-meta, .stock-line, .pill-row, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal) {
  display: flex !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  overflow: visible !important;
}

#inventory :is(.pill, .source-badge, .stock-badge, .tag, .badge, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span),
body[data-theme] #inventory :is(.pill, .source-badge, .stock-badge, .tag, .badge, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span) {
  display: inline-flex !important;
  width: auto !important;
  max-width: 18ch !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not([data-theme="editorial"]) main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article) {
  background: rgba(18, 20, 24, 0.92) !important;
  color: #f8f4ea !important;
  border-color: rgba(248, 244, 234, 0.16) !important;
}

body[data-theme="editorial"] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article) {
  background: #fffaf1 !important;
  color: #151515 !important;
  border-color: rgba(21, 21, 21, 0.14) !important;
}

@media (max-width: 540px) {
  :root {
    --app-rail-max: 430px !important;
    --app-rail-width: min(430px, calc(100vw - 12px)) !important;
    --app-rail-left: max(6px, calc((100vw - var(--app-rail-width)) / 2)) !important;
    --topbar-height: 66px !important;
    --dock-height: 88px !important;
  }

  .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 86px minmax(0, 1fr) 42px 112px !important;
    gap: 6px !important;
    padding: 7px 8px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    height: 48px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  main > .studio-band,
  main > .content-band,
  main > .business-band,
  body[data-theme] main > .studio-band,
  body[data-theme] main > .content-band,
  body[data-theme] main > .business-band {
    padding: 11px 9px 22px !important;
  }

  #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
  body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }
}

/* v227-readable-chips: chips stay readable and horizontal in every theme. */
body[data-theme] {
  --sb-readable-chip-bg: color-mix(in srgb, var(--sb-accent-2, #68cfc3) 18%, transparent) !important;
  --sb-readable-chip-ink: var(--sb-text, #f8f2e8) !important;
  --sb-readable-chip-line: color-mix(in srgb, var(--sb-accent-2, #68cfc3) 32%, transparent) !important;
}

body[data-theme="chrome"],
body[data-theme="editorial"] {
  --sb-readable-chip-bg: rgba(17, 20, 22, 0.09) !important;
  --sb-readable-chip-ink: #111416 !important;
  --sb-readable-chip-line: rgba(17, 20, 22, 0.14) !important;
}

html.native-layout-guard main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills, .score-meta),
html.native-layout-guard body[data-theme] main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills, .score-meta),
main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills, .score-meta),
body[data-theme] main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills, .score-meta) {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
}

html.native-layout-guard main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills, .score-meta)::-webkit-scrollbar,
main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills, .score-meta)::-webkit-scrollbar {
  display: none !important;
}

html.native-layout-guard body[data-theme] main :is(.pill, .tag, .badge, .source-badge, .stock-badge, .trend-chip, .signal-chip, .product-chip, .mood-chip, .brand-pill, .intent-pill, .subtype-pill, .passport-product-tags span, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span, .community-item-pills span, .score-meta span),
body[data-theme] main :is(.pill, .tag, .badge, .source-badge, .stock-badge, .trend-chip, .signal-chip, .product-chip, .mood-chip, .brand-pill, .intent-pill, .subtype-pill, .passport-product-tags span, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span, .community-item-pills span, .score-meta span) {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--sb-readable-chip-line) !important;
  border-radius: 999px !important;
  background: var(--sb-readable-chip-bg) !important;
  color: var(--sb-readable-chip-ink) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  box-sizing: border-box !important;
}

#inventory .item-card .pill-row,
body[data-theme] #inventory .item-card .pill-row {
  margin-top: 8px !important;
  padding-bottom: 2px !important;
}

#inventory .item-card .pill,
body[data-theme] #inventory .item-card .pill {
  max-width: 138px !important;
}

/* v230-final-rail-lock: must stay after every legacy fix layer. */
html,
body,
html.native-layout-guard,
html.native-layout-guard body {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

body,
html.native-layout-guard body {
  --app-rail-width: min(470px, calc(100vw - 20px)) !important;
  --app-rail-left: max(10px, calc((100vw - var(--app-rail-width)) / 2)) !important;
  --topbar-height: 70px !important;
  --dock-height: 88px !important;
  --safe-top: env(safe-area-inset-top, 0px) !important;
  --safe-bottom: env(safe-area-inset-bottom, 0px) !important;
}

body::before,
html.native-layout-guard body::before,
body[data-theme]::before {
  content: "" !important;
  position: fixed !important;
  z-index: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

.app-shell,
body[data-theme] .app-shell,
html.native-layout-guard .app-shell,
html.native-layout-guard body[data-theme] .app-shell {
  position: fixed !important;
  z-index: 90 !important;
  top: var(--safe-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.app-shell .topbar,
body[data-theme] .app-shell .topbar,
html.native-layout-guard .app-shell .topbar,
html.native-layout-guard body[data-theme] .app-shell .topbar {
  position: relative !important;
  inset: auto !important;
  left: 0 !important;
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  grid-template-columns: 96px minmax(0, 1fr) 44px 56px 62px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.brand,
body[data-theme] .brand,
html.native-layout-guard .brand {
  grid-column: 1 !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 56px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.brand-logo,
.brand-logo-lock,
body[data-theme] .brand-logo,
body[data-theme] .brand-logo-lock,
html.native-layout-guard .brand-logo {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 50px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.brand :is(span, small),
.topbar-actions,
.app-status,
.theme-switch,
.command-button-label,
:is(.locale-switch, .market-switch) > span {
  display: none !important;
}

.active-view-chip,
body[data-theme] .active-view-chip {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: 0.92rem !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.topbar-switches,
body[data-theme] .topbar-switches {
  display: contents !important;
}

.command-button,
body[data-theme] .command-button {
  grid-column: 3 !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  border-radius: 15px !important;
}

.locale-switch,
body[data-theme] .locale-switch {
  grid-column: 4 !important;
}

.market-switch,
body[data-theme] .market-switch {
  grid-column: 5 !important;
}

:is(.locale-switch, .market-switch),
body[data-theme] :is(.locale-switch, .market-switch) {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  overflow: hidden !important;
}

:is(.locale-switch, .market-switch) select,
body[data-theme] :is(.locale-switch, .market-switch) select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 15px 0 6px !important;
  text-align: center !important;
  text-align-last: center !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

main,
body[data-theme] main,
html.native-layout-guard main {
  position: fixed !important;
  z-index: 2 !important;
  top: calc(var(--topbar-height) + var(--safe-top, 0px) + 8px) !important;
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px) + 8px) !important;
  left: var(--app-rail-left) !important;
  display: block !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
}

main > :is(.studio-band, .content-band, .business-band),
body[data-theme] main > :is(.studio-band, .content-band, .business-band),
html.native-layout-guard main > :is(.studio-band, .content-band, .business-band) {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 12px 22px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

main > :is(.studio-band, .content-band, .business-band):not(.active-view),
body[data-theme] main > :is(.studio-band, .content-band, .business-band):not(.active-view) {
  display: none !important;
}

main > .active-view,
main > .active-view > *,
body[data-theme] main > .active-view,
body[data-theme] main > .active-view > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

main > .active-view > :first-child,
body[data-theme] main > .active-view > :first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  margin: 0 !important;
}

main *,
body[data-theme] main * {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#studio .upload-zone,
.upload-zone,
body[data-theme] #studio .upload-zone,
body[data-theme] .upload-zone {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(320px, calc(100dvh - var(--topbar-height) - var(--dock-height) - 220px), 560px) !important;
  min-height: 320px !important;
  max-height: 560px !important;
  aspect-ratio: auto !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

#studio .upload-zone::before,
#studio .upload-zone::after,
.upload-zone::before,
.upload-zone::after,
#studio .photo-panel::before,
#studio .photo-panel::after {
  content: none !important;
  display: none !important;
}

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto,
body[data-theme] #studio .upload-zone img,
body[data-theme] .upload-zone img,
body[data-theme] #photoPreview {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  image-rendering: auto !important;
  transform: none !important;
}

.mobile-dock,
body[data-theme] .mobile-dock,
html.native-layout-guard .mobile-dock {
  position: fixed !important;
  z-index: 92 !important;
  right: auto !important;
  bottom: var(--safe-bottom, 0px) !important;
  left: var(--app-rail-left) !important;
  display: grid !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 8px 8px calc(8px + var(--safe-bottom, 0px)) !important;
  border-radius: 22px 22px 0 0 !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.mobile-dock a::before,
body[data-theme] .mobile-dock a::before {
  content: none !important;
  display: none !important;
}

.mobile-dock a,
body[data-theme] .mobile-dock a {
  display: grid !important;
  grid-template-rows: 30px auto !important;
  gap: 5px !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 7px 4px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  font-size: 0.74rem !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.dock-icon,
body[data-theme] .dock-icon {
  display: grid !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  place-items: center !important;
  border-radius: 13px !important;
}

.dock-icon svg,
body[data-theme] .dock-icon svg {
  width: 18px !important;
  height: 18px !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button,
.quick-action-button,
body[data-theme] .quick-action-button {
  position: fixed !important;
  z-index: 94 !important;
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px) + 14px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 66px) !important;
  display: grid !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 18px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after,
.quick-action-button::before,
.quick-action-button::after {
  content: none !important;
  display: none !important;
}

#quickActionButton.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg,
.quick-action-button svg,
body[data-theme] .quick-action-button svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#quickActionButton.quick-action-button svg path,
body[data-theme] #quickActionButton.quick-action-button svg path {
  fill: none !important;
  stroke: currentColor !important;
}

.quick-theme-options,
body[data-theme] .quick-theme-options {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

.quick-theme-options button,
body[data-theme] .quick-theme-options button {
  flex: 0 0 106px !important;
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
}

body[data-theme] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article, .repair-list > *, .vision-fixes > *, .vision-signals > *) {
  color: var(--sb-text, #f8f2e8) !important;
}

body[data-theme="chrome"] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article, .repair-list > *, .vision-fixes > *, .vision-signals > *),
body[data-theme="editorial"] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article, .repair-list > *, .vision-fixes > *, .vision-signals > *) {
  color: #111416 !important;
}

@media (max-width: 390px) {
  body,
  html.native-layout-guard body {
    --app-rail-width: min(430px, calc(100vw - 12px)) !important;
    --app-rail-left: max(6px, calc((100vw - var(--app-rail-width)) / 2)) !important;
    --topbar-height: 66px !important;
    --dock-height: 84px !important;
  }

  .app-shell .topbar,
  body[data-theme] .app-shell .topbar {
    grid-template-columns: 86px minmax(0, 1fr) 40px 52px 58px !important;
    gap: 5px !important;
    padding: 7px 8px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }

  #studio .upload-zone,
  .upload-zone,
  body[data-theme] #studio .upload-zone,
  body[data-theme] .upload-zone {
    height: clamp(300px, calc(100dvh - var(--topbar-height) - var(--dock-height) - 210px), 520px) !important;
    min-height: 300px !important;
  }

  #quickActionButton.quick-action-button,
  body[data-theme] #quickActionButton.quick-action-button,
  .quick-action-button,
  body[data-theme] .quick-action-button {
    left: calc(var(--app-rail-left) + var(--app-rail-width) - 60px) !important;
  }
}

/* v233-real-eof-polish: keep theme names, inventory chips and action sheet readable. */
.quick-action-sheet:not([hidden]),
body[data-theme] .quick-action-sheet:not([hidden]) {
  display: grid !important;
  align-items: end !important;
  justify-items: center !important;
  padding: 0 10px calc(var(--dock-height) + var(--safe-bottom, 0px) + 10px) !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.46) !important;
}

.quick-action-panel,
body[data-theme] .quick-action-panel {
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  max-height: min(72dvh, 620px) !important;
  padding: 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-radius: 24px !important;
  scrollbar-width: none !important;
}

.quick-action-panel::-webkit-scrollbar {
  display: none !important;
}

.quick-theme-picker,
body[data-theme] .quick-theme-picker {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 12px !important;
  border: 1px solid var(--sb-line, rgba(255, 255, 255, 0.14)) !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, var(--sb-panel, #111418) 88%, transparent) !important;
}

.quick-theme-options,
body[data-theme] .quick-theme-options {
  display: grid !important;
  grid-auto-columns: initial !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

.quick-theme-options button,
body[data-theme] .quick-theme-options button {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 10px !important;
  flex: none !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  text-align: left !important;
}

.quick-theme-options i,
body[data-theme] .quick-theme-options i {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 9px !important;
}

.quick-theme-options span,
body[data-theme] .quick-theme-options span {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.quick-action-grid,
body[data-theme] .quick-action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.quick-action-grid button,
body[data-theme] .quick-action-grid button {
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 10px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.quick-action-grid strong,
.quick-action-grid span,
body[data-theme] .quick-action-grid strong,
body[data-theme] .quick-action-grid span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#inventory .inventory-grid,
body[data-theme] #inventory .inventory-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

#inventory .item-card,
body[data-theme] #inventory .item-card {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 144px !important;
  padding: 10px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

#inventory .item-card > img,
body[data-theme] #inventory .item-card > img {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 124px !important;
  min-height: 124px !important;
  max-height: 124px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
}

#inventory .item-body,
body[data-theme] #inventory .item-body {
  display: grid !important;
  gap: 7px !important;
  align-content: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#inventory .item-card h3,
body[data-theme] #inventory .item-card h3 {
  display: -webkit-box !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--sb-text, #f8f2e8) !important;
  font-size: 1rem !important;
  font-weight: 820 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#inventory .item-meta,
#inventory .stock-line,
#inventory .pill-row,
body[data-theme] #inventory .item-meta,
body[data-theme] #inventory .stock-line,
body[data-theme] #inventory .pill-row {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
}

#inventory .item-meta::-webkit-scrollbar,
#inventory .stock-line::-webkit-scrollbar,
#inventory .pill-row::-webkit-scrollbar {
  display: none !important;
}

#inventory :is(.pill, .brand-pill, .source-badge, .stock-badge),
body[data-theme] #inventory :is(.pill, .brand-pill, .source-badge, .stock-badge) {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 146px !important;
  min-height: 27px !important;
  padding: 5px 9px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  text-transform: none !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

#inventory .price,
body[data-theme] #inventory .price {
  flex: 0 0 auto !important;
  color: var(--sb-text, #f8f2e8) !important;
  font-size: 0.84rem !important;
  white-space: nowrap !important;
}

#inventory :is(.product-link, .watch-button),
body[data-theme] #inventory :is(.product-link, .watch-button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 390px) {
  .quick-theme-options button,
  body[data-theme] .quick-theme-options button {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 7px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
  }

  .quick-theme-options span,
  body[data-theme] .quick-theme-options span {
    font-size: 0.72rem !important;
  }

  #inventory .item-card,
  body[data-theme] #inventory .item-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
  }

  #inventory .item-card > img,
  body[data-theme] #inventory .item-card > img {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
  }
}

/* v232-control-polish-eof: theme sheet and inventory chips must read like a finished app. */
.quick-action-sheet:not([hidden]),
body[data-theme] .quick-action-sheet:not([hidden]) {
  display: grid !important;
  align-items: end !important;
  justify-items: center !important;
  padding: 0 10px calc(var(--dock-height) + var(--safe-bottom, 0px) + 10px) !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.46) !important;
}

.quick-action-panel,
body[data-theme] .quick-action-panel {
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  max-height: min(72dvh, 620px) !important;
  padding: 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-radius: 24px !important;
  scrollbar-width: none !important;
}

.quick-action-panel::-webkit-scrollbar {
  display: none !important;
}

.quick-action-head,
body[data-theme] .quick-action-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.quick-action-head h2,
body[data-theme] .quick-action-head h2 {
  margin: 0 !important;
  font-size: 1.28rem !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

.quick-action-head .ghost-button,
body[data-theme] .quick-action-head .ghost-button {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
}

.quick-theme-picker,
body[data-theme] .quick-theme-picker {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 12px !important;
  border: 1px solid var(--sb-line, rgba(255, 255, 255, 0.14)) !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, var(--sb-panel, #111418) 88%, transparent) !important;
}

.quick-theme-picker > span,
body[data-theme] .quick-theme-picker > span {
  color: var(--sb-text, #f8f2e8) !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.quick-theme-options,
body[data-theme] .quick-theme-options {
  display: grid !important;
  grid-auto-columns: initial !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

.quick-theme-options button,
body[data-theme] .quick-theme-options button {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 10px !important;
  border-radius: 16px !important;
  flex: none !important;
  overflow: hidden !important;
  text-align: left !important;
}

.quick-theme-options i,
body[data-theme] .quick-theme-options i {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 9px !important;
}

.quick-theme-options span,
body[data-theme] .quick-theme-options span {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.quick-action-grid,
body[data-theme] .quick-action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.quick-action-grid button,
body[data-theme] .quick-action-grid button {
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 10px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.quick-action-grid strong,
.quick-action-grid span,
body[data-theme] .quick-action-grid strong,
body[data-theme] .quick-action-grid span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#inventory .inventory-grid,
body[data-theme] #inventory .inventory-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

#inventory .item-card,
body[data-theme] #inventory .item-card {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 144px !important;
  padding: 10px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

#inventory .item-card > img,
body[data-theme] #inventory .item-card > img {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 124px !important;
  min-height: 124px !important;
  max-height: 124px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
}

#inventory .item-body,
body[data-theme] #inventory .item-body {
  display: grid !important;
  gap: 7px !important;
  align-content: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#inventory .item-card h3,
body[data-theme] #inventory .item-card h3 {
  display: -webkit-box !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--sb-text, #f8f2e8) !important;
  font-size: 1rem !important;
  font-weight: 820 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#inventory .item-meta,
#inventory .stock-line,
#inventory .pill-row,
body[data-theme] #inventory .item-meta,
body[data-theme] #inventory .stock-line,
body[data-theme] #inventory .pill-row {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
}

#inventory .item-meta::-webkit-scrollbar,
#inventory .stock-line::-webkit-scrollbar,
#inventory .pill-row::-webkit-scrollbar {
  display: none !important;
}

#inventory :is(.pill, .brand-pill, .source-badge, .stock-badge),
body[data-theme] #inventory :is(.pill, .brand-pill, .source-badge, .stock-badge) {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 146px !important;
  min-height: 27px !important;
  padding: 5px 9px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  text-transform: none !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

#inventory .price,
body[data-theme] #inventory .price {
  flex: 0 0 auto !important;
  color: var(--sb-text, #f8f2e8) !important;
  font-size: 0.84rem !important;
  white-space: nowrap !important;
}

#inventory :is(.product-link, .watch-button),
body[data-theme] #inventory :is(.product-link, .watch-button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 390px) {
  .quick-action-panel,
  body[data-theme] .quick-action-panel {
    padding: 12px !important;
  }

  .quick-theme-options button,
  body[data-theme] .quick-theme-options button {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 7px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
  }

  .quick-theme-options span,
  body[data-theme] .quick-theme-options span {
    font-size: 0.72rem !important;
  }

  #inventory .item-card,
  body[data-theme] #inventory .item-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
  }

  #inventory .item-card > img,
  body[data-theme] #inventory .item-card > img {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
  }
}

/* v229-mobile-atelier-lock: final native app geometry and readable fashion UI. */
html.native-layout-guard,
html.native-layout-guard body,
html,
body {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

html.native-layout-guard body,
body {
  --app-rail-width: min(470px, calc(100vw - 20px)) !important;
  --app-rail-left: max(10px, calc((100vw - var(--app-rail-width)) / 2)) !important;
  --topbar-height: 70px !important;
  --dock-height: 88px !important;
  --safe-top: env(safe-area-inset-top, 0px) !important;
  --safe-bottom: env(safe-area-inset-bottom, 0px) !important;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(92, 226, 213, 0.16), transparent 36%),
    radial-gradient(ellipse at 88% 0%, rgba(255, 62, 111, 0.16), transparent 34%),
    linear-gradient(180deg, #071010 0%, #020303 100%) !important;
}

html.native-layout-guard body::before,
body::before {
  content: "" !important;
  position: fixed !important;
  z-index: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 36%),
    color-mix(in srgb, var(--sb-rail, #071010) 92%, #000 8%) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48) !important;
  pointer-events: none !important;
  transform: none !important;
}

html.native-layout-guard .app-shell,
html.native-layout-guard body[data-theme] .app-shell,
.app-shell,
body[data-theme] .app-shell {
  position: fixed !important;
  z-index: 90 !important;
  top: var(--safe-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard .app-shell .topbar,
html.native-layout-guard body[data-theme] .app-shell .topbar,
.app-shell .topbar,
body[data-theme] .app-shell .topbar {
  position: relative !important;
  inset: auto !important;
  left: 0 !important;
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  grid-template-columns: 96px minmax(0, 1fr) 44px 56px 62px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top: 0 !important;
  border-radius: 0 0 20px 20px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(7, 9, 10, 0.94) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26) !important;
  overflow: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard .brand,
html.native-layout-guard body[data-theme] .brand,
.brand,
body[data-theme] .brand {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 56px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html.native-layout-guard .brand-logo,
html.native-layout-guard .brand-logo-lock,
html.native-layout-guard body[data-theme] .brand-logo,
html.native-layout-guard body[data-theme] .brand-logo-lock,
.brand-logo,
.brand-logo-lock,
body[data-theme] .brand-logo,
body[data-theme] .brand-logo-lock {
  display: block !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 50px !important;
  max-height: 50px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

html.native-layout-guard .brand :is(span, small),
html.native-layout-guard body[data-theme] .brand :is(span, small),
.brand :is(span, small),
body[data-theme] .brand :is(span, small),
html.native-layout-guard :is(.topbar-actions, .app-status, .theme-switch),
html.native-layout-guard body[data-theme] :is(.topbar-actions, .app-status, .theme-switch),
:is(.topbar-actions, .app-status, .theme-switch),
body[data-theme] :is(.topbar-actions, .app-status, .theme-switch) {
  display: none !important;
}

html.native-layout-guard .active-view-chip,
html.native-layout-guard body[data-theme] .active-view-chip,
.active-view-chip,
body[data-theme] .active-view-chip {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.92rem !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.native-layout-guard .topbar-switches,
html.native-layout-guard body[data-theme] .topbar-switches,
.topbar-switches,
body[data-theme] .topbar-switches {
  display: contents !important;
}

html.native-layout-guard .command-button,
html.native-layout-guard body[data-theme] .command-button,
.command-button,
body[data-theme] .command-button {
  grid-column: 3 !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  border-radius: 15px !important;
}

html.native-layout-guard .locale-switch,
html.native-layout-guard body[data-theme] .locale-switch,
.locale-switch,
body[data-theme] .locale-switch {
  grid-column: 4 !important;
}

html.native-layout-guard .market-switch,
html.native-layout-guard body[data-theme] .market-switch,
.market-switch,
body[data-theme] .market-switch {
  grid-column: 5 !important;
}

html.native-layout-guard :is(.locale-switch, .market-switch),
html.native-layout-guard body[data-theme] :is(.locale-switch, .market-switch),
:is(.locale-switch, .market-switch),
body[data-theme] :is(.locale-switch, .market-switch) {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  place-items: center !important;
  overflow: hidden !important;
}

html.native-layout-guard :is(.locale-switch, .market-switch) > span,
html.native-layout-guard body[data-theme] :is(.locale-switch, .market-switch) > span,
:is(.locale-switch, .market-switch) > span,
body[data-theme] :is(.locale-switch, .market-switch) > span,
html.native-layout-guard .command-button-label,
html.native-layout-guard body[data-theme] .command-button-label,
.command-button-label,
body[data-theme] .command-button-label {
  display: none !important;
}

html.native-layout-guard :is(.locale-switch, .market-switch) select,
html.native-layout-guard body[data-theme] :is(.locale-switch, .market-switch) select,
:is(.locale-switch, .market-switch) select,
body[data-theme] :is(.locale-switch, .market-switch) select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 15px 0 6px !important;
  border-radius: 15px !important;
  text-align: center !important;
  text-align-last: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

html.native-layout-guard main,
html.native-layout-guard body[data-theme] main,
main,
body[data-theme] main {
  position: fixed !important;
  z-index: 2 !important;
  top: calc(var(--topbar-height) + var(--safe-top, 0px) + 8px) !important;
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px) + 8px) !important;
  left: var(--app-rail-left) !important;
  display: block !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard main > :is(.studio-band, .content-band, .business-band),
html.native-layout-guard body[data-theme] main > :is(.studio-band, .content-band, .business-band),
main > :is(.studio-band, .content-band, .business-band),
body[data-theme] main > :is(.studio-band, .content-band, .business-band) {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 12px 22px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard main > :is(.studio-band, .content-band, .business-band)::-webkit-scrollbar,
main > :is(.studio-band, .content-band, .business-band)::-webkit-scrollbar {
  display: none !important;
}

html.native-layout-guard main > :is(.studio-band, .content-band, .business-band):not(.active-view),
html.native-layout-guard body[data-theme] main > :is(.studio-band, .content-band, .business-band):not(.active-view),
main > :is(.studio-band, .content-band, .business-band):not(.active-view),
body[data-theme] main > :is(.studio-band, .content-band, .business-band):not(.active-view) {
  display: none !important;
}

html.native-layout-guard main > .active-view,
html.native-layout-guard main > .active-view > *,
html.native-layout-guard body[data-theme] main > .active-view,
html.native-layout-guard body[data-theme] main > .active-view > *,
main > .active-view,
main > .active-view > *,
body[data-theme] main > .active-view,
body[data-theme] main > .active-view > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard main > .active-view > :first-child,
html.native-layout-guard body[data-theme] main > .active-view > :first-child,
main > .active-view > :first-child,
body[data-theme] main > .active-view > :first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  margin: 0 !important;
}

html.native-layout-guard main *,
html.native-layout-guard body[data-theme] main *,
main *,
body[data-theme] main * {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#studio .studio-grid,
#passport .passport-layout,
#inventory .inventory-layout,
#fit .fit-layout,
#coach .coach-layout,
#planner .planner-layout,
#capsule .capsule-layout,
#discover .discover-layout,
#community .community-layout,
#lookbook .lookbook-layout,
#clients .client-layout,
#report .report-layout,
#history .history-layout,
#trends .trends-layout,
#business .business-layout,
body[data-theme] #studio .studio-grid,
body[data-theme] #passport .passport-layout,
body[data-theme] #inventory .inventory-layout,
body[data-theme] #fit .fit-layout,
body[data-theme] #coach .coach-layout,
body[data-theme] #planner .planner-layout,
body[data-theme] #capsule .capsule-layout,
body[data-theme] #discover .discover-layout,
body[data-theme] #community .community-layout,
body[data-theme] #lookbook .lookbook-layout,
body[data-theme] #clients .client-layout,
body[data-theme] #report .report-layout,
body[data-theme] #history .history-layout,
body[data-theme] #trends .trends-layout,
body[data-theme] #business .business-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#studio .upload-zone,
.upload-zone,
body[data-theme] #studio .upload-zone,
body[data-theme] .upload-zone {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: clamp(320px, calc(100dvh - var(--topbar-height) - var(--dock-height) - 220px), 560px) !important;
  min-height: 320px !important;
  max-height: 560px !important;
  aspect-ratio: auto !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(92, 226, 213, 0.08), rgba(255, 62, 111, 0.08)),
    #050607 !important;
}

#studio .upload-zone::before,
#studio .upload-zone::after,
.upload-zone::before,
.upload-zone::after,
#studio .photo-panel::before,
#studio .photo-panel::after {
  content: none !important;
  display: none !important;
}

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto,
body[data-theme] #studio .upload-zone img,
body[data-theme] .upload-zone img,
body[data-theme] #photoPreview,
body[data-theme] #uploadedPhoto {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  image-rendering: auto !important;
  border-radius: 20px !important;
  background: #050607 !important;
  transform: none !important;
}

#studio .upload-zone span,
.upload-zone span,
body[data-theme] #studio .upload-zone span,
body[data-theme] .upload-zone span {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  max-width: calc(100% - 28px) !important;
  min-height: 38px !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(7, 9, 10, 0.76) !important;
  color: #fffaf6 !important;
  font-size: 0.85rem !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  backdrop-filter: blur(14px) !important;
}

html.native-layout-guard .mobile-dock,
html.native-layout-guard body[data-theme] .mobile-dock,
.mobile-dock,
body[data-theme] .mobile-dock {
  position: fixed !important;
  z-index: 92 !important;
  right: auto !important;
  bottom: var(--safe-bottom, 0px) !important;
  left: var(--app-rail-left) !important;
  display: grid !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 8px 8px calc(8px + var(--safe-bottom, 0px)) !important;
  border-radius: 22px 22px 0 0 !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.mobile-dock a::before,
body[data-theme] .mobile-dock a::before {
  content: none !important;
  display: none !important;
}

.mobile-dock a,
body[data-theme] .mobile-dock a {
  display: grid !important;
  grid-template-rows: 30px auto !important;
  gap: 5px !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 7px 4px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  font-size: 0.74rem !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.dock-icon,
body[data-theme] .dock-icon {
  display: grid !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  place-items: center !important;
  border-radius: 13px !important;
}

.dock-icon svg,
body[data-theme] .dock-icon svg {
  width: 18px !important;
  height: 18px !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button,
.quick-action-button,
body[data-theme] .quick-action-button {
  position: fixed !important;
  z-index: 94 !important;
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px) + 14px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 66px) !important;
  display: grid !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 18px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after,
.quick-action-button::before,
.quick-action-button::after {
  content: none !important;
  display: none !important;
}

#quickActionButton.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg,
.quick-action-button svg,
body[data-theme] .quick-action-button svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#quickActionButton.quick-action-button svg path,
body[data-theme] #quickActionButton.quick-action-button svg path,
.quick-action-button svg path,
body[data-theme] .quick-action-button svg path {
  fill: none !important;
  stroke: currentColor !important;
}

.quick-theme-options,
body[data-theme] .quick-theme-options {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 2px !important;
  scrollbar-width: none !important;
}

.quick-theme-options::-webkit-scrollbar {
  display: none !important;
}

.quick-theme-options button,
body[data-theme] .quick-theme-options button {
  flex: 0 0 106px !important;
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 11px !important;
}

.quick-theme-options button span,
body[data-theme] .quick-theme-options button span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 780 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-theme] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article, .repair-list > *, .vision-fixes > *, .vision-signals > *, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-card-bg, #111b1d) 92%, white 5%), var(--sb-card-bg, #111b1d)) !important;
  border-color: var(--sb-line, rgba(255, 255, 255, 0.14)) !important;
  color: var(--sb-text, #f8f2e8) !important;
}

body[data-theme] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article p, .expert-verdict-metrics article p, .repair-list > *, .vision-fixes > *, .vision-signals > *) {
  color: var(--sb-text, #f8f2e8) !important;
}

body[data-theme="chrome"] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article, .repair-list > *, .vision-fixes > *, .vision-signals > *),
body[data-theme="editorial"] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article, .repair-list > *, .vision-fixes > *, .vision-signals > *) {
  color: #111416 !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
  display: grid !important;
  grid-template-columns: 94px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#inventory :is(.item-card img, .wardrobe-gap-card img, .catalog-audit-row img, .watchlist-row img),
body[data-theme] #inventory :is(.item-card img, .wardrobe-gap-card img, .catalog-audit-row img, .watchlist-row img) {
  width: 94px !important;
  min-width: 94px !important;
  max-width: 94px !important;
  height: 126px !important;
  min-height: 126px !important;
  max-height: 126px !important;
  object-fit: cover !important;
  border-radius: 18px !important;
}

@media (max-width: 390px) {
  html.native-layout-guard body,
  body {
    --app-rail-width: min(430px, calc(100vw - 12px)) !important;
    --app-rail-left: max(6px, calc((100vw - var(--app-rail-width)) / 2)) !important;
    --topbar-height: 66px !important;
    --dock-height: 84px !important;
  }

  html.native-layout-guard .app-shell .topbar,
  html.native-layout-guard body[data-theme] .app-shell .topbar,
  .app-shell .topbar,
  body[data-theme] .app-shell .topbar {
    grid-template-columns: 86px minmax(0, 1fr) 40px 52px 58px !important;
    gap: 5px !important;
    padding: 7px 8px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }

  #studio .upload-zone,
  .upload-zone,
  body[data-theme] #studio .upload-zone,
  body[data-theme] .upload-zone {
    height: clamp(300px, calc(100dvh - var(--topbar-height) - var(--dock-height) - 210px), 520px) !important;
    min-height: 300px !important;
  }

  #quickActionButton.quick-action-button,
  body[data-theme] #quickActionButton.quick-action-button,
  .quick-action-button,
  body[data-theme] .quick-action-button {
    left: calc(var(--app-rail-left) + var(--app-rail-width) - 60px) !important;
  }
}

/* v202: native fashion-app viewport polish. Wider desktop preview, same real mobile rail. */
:root {
  --app-rail-max: 500px !important;
  --app-rail-width: min(var(--app-rail-max), calc(100vw - 24px)) !important;
  --app-rail-left: max(12px, calc((100vw - var(--app-rail-width)) / 2)) !important;
  --topbar-height: 72px !important;
  --dock-height: 96px !important;
}

@media (max-width: 540px) {
  :root {
    --app-rail-max: 430px !important;
    --app-rail-width: min(430px, calc(100vw - 12px)) !important;
    --app-rail-left: max(6px, calc((100vw - var(--app-rail-width)) / 2)) !important;
    --topbar-height: 66px !important;
    --dock-height: 88px !important;
  }
}

body::before {
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
}

.topbar,
body[data-theme] .topbar {
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  grid-template-columns: 112px minmax(0, 1fr) 46px 136px !important;
  gap: 9px !important;
  padding: 9px 12px !important;
  overflow: visible !important;
}

.brand,
body[data-theme] .brand {
  width: 112px !important;
  max-width: 112px !important;
  height: 50px !important;
}

.brand-logo,
.brand-logo-lock,
body[data-theme] .brand-logo,
body[data-theme] .brand-logo-lock {
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
  height: 48px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.active-view-chip,
body[data-theme] .active-view-chip {
  min-width: 0 !important;
  padding-left: 12px !important;
  font-size: 0.94rem !important;
}

.command-button,
body[data-theme] .command-button {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
}

.topbar-switches,
body[data-theme] .topbar-switches {
  width: 136px !important;
  min-width: 136px !important;
  max-width: 136px !important;
  grid-template-columns: 62px 66px !important;
  gap: 8px !important;
}

.locale-switch select,
.market-switch select,
body[data-theme] .locale-switch select,
body[data-theme] .market-switch select {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 !important;
  line-height: 46px !important;
  text-align: center !important;
  text-align-last: center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

main,
body[data-theme] main {
  top: var(--topbar-height) !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px)) !important;
  height: auto !important;
}

main > .studio-band,
main > .content-band,
main > .business-band,
body[data-theme] main > .studio-band,
body[data-theme] main > .content-band,
body[data-theme] main > .business-band {
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  padding: 14px 12px 22px !important;
  scroll-padding-top: 14px !important;
  scroll-padding-bottom: 22px !important;
}

.mobile-dock,
body[data-theme] .mobile-dock {
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  bottom: calc(var(--safe-bottom, 0px) + 29px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 59px) !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
}

#studio .photo-panel,
body[data-theme] #studio .photo-panel {
  min-height: 0 !important;
}

#studio .upload-zone,
.upload-zone,
body[data-theme] #studio .upload-zone,
body[data-theme] .upload-zone {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
}

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

body[data-theme="prism"] main > .active-view {
  background:
    linear-gradient(90deg, rgba(84, 234, 220, 0.055) 0 1px, transparent 1px 100%) 0 0 / 28px 28px,
    linear-gradient(180deg, rgba(255, 77, 134, 0.09), transparent 34%),
    var(--sb-view-bg) !important;
}

body[data-theme] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p) {
  background: color-mix(in srgb, var(--sb-card, #161d2d) 92%, black) !important;
  color: var(--sb-ink, #fff8f2) !important;
  border: 1px solid var(--sb-line, rgba(255, 255, 255, 0.12)) !important;
}

@media (max-width: 540px) {
  .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 86px minmax(0, 1fr) 42px 112px !important;
    gap: 6px !important;
    padding: 8px 9px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 86px !important;
    max-width: 86px !important;
    height: 48px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  .topbar-switches,
  body[data-theme] .topbar-switches {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    grid-template-columns: 52px 54px !important;
    gap: 6px !important;
  }

  .locale-switch select,
  .market-switch select,
  body[data-theme] .locale-switch select,
  body[data-theme] .market-switch select,
  .command-button,
  body[data-theme] .command-button {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  main > .studio-band,
  main > .content-band,
  main > .business-band,
  body[data-theme] main > .studio-band,
  body[data-theme] main > .content-band,
  body[data-theme] main > .business-band {
    padding: 11px 9px 18px !important;
  }

  #quickActionButton.quick-action-button,
  body[data-theme] #quickActionButton.quick-action-button {
    bottom: calc(var(--safe-bottom, 0px) + 25px) !important;
    left: calc(var(--app-rail-left) + var(--app-rail-width) - 53px) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
}

/* v203-final-last: one native app viewport. Must stay last. */
:root {
  --app-rail-max: 500px !important;
  --app-rail-width: min(var(--app-rail-max), calc(100vw - 24px)) !important;
  --app-rail-left: max(12px, calc((100vw - var(--app-rail-width)) / 2)) !important;
  --topbar-height: 72px !important;
  --dock-height: 94px !important;
  --safe-top: env(safe-area-inset-top, 0px) !important;
  --safe-bottom: env(safe-area-inset-bottom, 0px) !important;
}

html,
body {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body::before {
  position: fixed !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  transform: none !important;
}

.app-shell,
body[data-theme] .app-shell {
  position: fixed !important;
  z-index: 90 !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: calc(var(--topbar-height) + var(--safe-top)) !important;
  padding: var(--safe-top) 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.topbar,
body[data-theme] .topbar {
  position: relative !important;
  display: grid !important;
  width: var(--app-rail-width) !important;
  min-width: 0 !important;
  max-width: var(--app-rail-width) !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  grid-template-columns: 104px minmax(0, 1fr) 46px 132px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 8px 10px !important;
  border-radius: 0 0 20px 20px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.brand,
body[data-theme] .brand {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 52px !important;
  overflow: visible !important;
}

.brand-logo,
.brand-logo-lock,
body[data-theme] .brand-logo,
body[data-theme] .brand-logo-lock {
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;
  height: 50px !important;
  max-height: 50px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

main,
body[data-theme] main {
  position: fixed !important;
  z-index: 2 !important;
  top: calc(var(--topbar-height) + var(--safe-top)) !important;
  right: 0 !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom)) !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: none !important;
}

main > .studio-band,
main > .content-band,
main > .business-band,
body[data-theme] main > .studio-band,
body[data-theme] main > .content-band,
body[data-theme] main > .business-band {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: var(--app-rail-left) !important;
  display: none !important;
  width: var(--app-rail-width) !important;
  min-width: 0 !important;
  max-width: var(--app-rail-width) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 14px 12px 26px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  transform: none !important;
  pointer-events: auto !important;
  scroll-padding-top: 14px !important;
  scroll-padding-bottom: 28px !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
}

main > .studio-band::-webkit-scrollbar,
main > .content-band::-webkit-scrollbar,
main > .business-band::-webkit-scrollbar {
  display: none !important;
}

main > .studio-band.active-view,
main > .content-band.active-view,
main > .business-band.active-view,
body[data-theme] main > .studio-band.active-view,
body[data-theme] main > .content-band.active-view,
body[data-theme] main > .business-band.active-view {
  display: block !important;
}

.mobile-dock,
body[data-theme] .mobile-dock {
  position: fixed !important;
  z-index: 92 !important;
  right: auto !important;
  bottom: var(--safe-bottom) !important;
  left: var(--app-rail-left) !important;
  display: grid !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom) + 14px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 60px) !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 15px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after {
  content: none !important;
  display: none !important;
}

#studio .upload-zone,
.upload-zone,
body[data-theme] #studio .upload-zone,
body[data-theme] .upload-zone {
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

#inventory .inventory-layout,
#inventory .inventory-grid,
#inventory .wardrobe-map,
#inventory .wardrobe-gaps,
#inventory .catalog-audit-list,
#inventory .watchlist-list,
body[data-theme] #inventory .inventory-layout,
body[data-theme] #inventory .inventory-grid,
body[data-theme] #inventory .wardrobe-map,
body[data-theme] #inventory .wardrobe-gaps,
body[data-theme] #inventory .catalog-audit-list,
body[data-theme] #inventory .watchlist-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#inventory :is(.item-meta, .stock-line, .pill-row, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal),
body[data-theme] #inventory :is(.item-meta, .stock-line, .pill-row, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal) {
  display: flex !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  overflow: visible !important;
}

#inventory :is(.pill, .source-badge, .stock-badge, .tag, .badge, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span),
body[data-theme] #inventory :is(.pill, .source-badge, .stock-badge, .tag, .badge, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span) {
  display: inline-flex !important;
  width: auto !important;
  max-width: 18ch !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not([data-theme="editorial"]) main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article) {
  background: rgba(18, 20, 24, 0.92) !important;
  color: #f8f4ea !important;
  border-color: rgba(248, 244, 234, 0.16) !important;
}

body[data-theme="editorial"] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article) {
  background: #fffaf1 !important;
  color: #151515 !important;
  border-color: rgba(21, 21, 21, 0.14) !important;
}

@media (max-width: 540px) {
  :root {
    --app-rail-max: 430px !important;
    --app-rail-width: min(430px, calc(100vw - 12px)) !important;
    --app-rail-left: max(6px, calc((100vw - var(--app-rail-width)) / 2)) !important;
    --topbar-height: 66px !important;
    --dock-height: 88px !important;
  }

  .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 86px minmax(0, 1fr) 42px 112px !important;
    gap: 6px !important;
    padding: 7px 8px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    height: 48px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  main > .studio-band,
  main > .content-band,
  main > .business-band,
  body[data-theme] main > .studio-band,
  body[data-theme] main > .content-band,
  body[data-theme] main > .business-band {
    padding: 11px 9px 22px !important;
  }

  #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
  body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }
}

@media (max-width: 719px) {
  :root {
    --app-stage-top: 0px !important;
    --app-stage-bottom: 0px !important;
  }
}

html,
body {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100% !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

body::before {
  top: var(--app-stage-top) !important;
  right: auto !important;
  bottom: var(--app-stage-bottom) !important;
  left: 50% !important;
  width: var(--app-rail-width) !important;
  height: auto !important;
  max-width: var(--app-rail-width) !important;
  transform: translateX(-50%) !important;
}

.app-shell {
  top: var(--app-stage-top) !important;
  right: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  pointer-events: none !important;
}

.topbar,
.mobile-dock {
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  pointer-events: auto !important;
}

main {
  position: fixed !important;
  top: calc(var(--app-stage-top) + var(--topbar-height) + var(--safe-top)) !important;
  right: 0 !important;
  bottom: calc(var(--app-stage-bottom) + var(--dock-height) + var(--safe-bottom)) !important;
  left: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  align-content: start !important;
  justify-content: start !important;
  place-content: start !important;
}

main > .studio-band,
main > .content-band,
main > .business-band {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  display: block !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 10px 108px !important;
  transform: translateX(-50%) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-padding-top: 10px !important;
  scroll-padding-bottom: 116px !important;
  align-content: start !important;
  justify-content: start !important;
  place-content: start !important;
  box-sizing: border-box !important;
}

main > .studio-band[hidden],
main > .content-band[hidden],
main > .business-band[hidden],
main > :not(.active-view) {
  display: none !important;
}

main > .active-view {
  display: block !important;
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0 !important;
  transform: translateX(-50%) !important;
}

main > .active-view > :first-child {
  margin-top: 0 !important;
}

#studio.studio-band.active-view,
#passport.content-band.active-view,
#coach.content-band.active-view,
#fit.content-band.active-view,
#inventory.content-band.active-view {
  padding-top: 10px !important;
}

#studio .studio-grid,
#passport .passport-layout,
#coach .coach-layout,
#fit .fit-layout,
#inventory .inventory-layout,
#planner .planner-layout,
#capsule .capsule-layout,
#discover .discover-layout,
#brain .brain-layout,
#lookbook .lookbook-layout,
#clients .clients-layout,
#report .report-layout,
#history .history-layout,
#community .community-grid,
#trends .trend-lab {
  align-content: start !important;
  justify-content: start !important;
  place-content: start !important;
  min-height: 0 !important;
  margin-top: 10px !important;
}

#inventory > .section-head,
#inventory .inventory-layout {
  margin-top: 0 !important;
}

.mobile-dock {
  right: 0 !important;
  bottom: calc(var(--app-stage-bottom) + var(--safe-bottom)) !important;
  left: 0 !important;
}

.quick-action-button {
  right: auto !important;
  bottom: calc(var(--app-stage-bottom) + var(--dock-height) + var(--safe-bottom) + 12px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 68px) !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}

.quick-action-button::before,
.quick-action-button::after {
  content: none !important;
  display: none !important;
}

.quick-action-button svg {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  stroke: currentColor !important;
}

@media (max-width: 370px) {
  .quick-action-button {
    left: calc(var(--app-rail-left) + var(--app-rail-width) - 62px) !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
  }
}

/* Inventory Finder: fast scan by product details and stock state. */
#inventory .inventory-finder,
body[data-theme] #inventory .inventory-finder,
html.native-layout-guard #inventory .inventory-finder,
html.native-layout-guard body[data-theme] #inventory .inventory-finder {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-areas:
    "search search"
    "stock sort"
    "size clear"
    "count count" !important;
  align-items: end !important;
  gap: 8px !important;
  margin: 10px 0 8px !important;
  padding: 9px !important;
  border: 1px solid rgba(251, 246, 234, 0.12) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.052), rgba(251, 246, 234, 0.018)),
    rgba(12, 14, 18, 0.9) !important;
}

#inventory .inventory-search-field,
#inventory .inventory-stock-field,
#inventory .inventory-sort-field,
body[data-theme] #inventory .inventory-search-field,
body[data-theme] #inventory .inventory-stock-field,
body[data-theme] #inventory .inventory-sort-field {
  display: grid !important;
  min-width: 0 !important;
  gap: 5px !important;
  color: rgba(251, 246, 234, 0.78) !important;
  font-size: 0.68rem !important;
  font-weight: 820 !important;
  letter-spacing: 0.01em !important;
}

#inventory .inventory-search-field {
  grid-area: search !important;
}

#inventory .inventory-stock-field {
  grid-area: stock !important;
}

#inventory .inventory-sort-field {
  grid-area: sort !important;
}

#inventory .inventory-search-field input,
#inventory .inventory-stock-field select,
#inventory .inventory-sort-field select,
body[data-theme] #inventory .inventory-search-field input,
body[data-theme] #inventory .inventory-stock-field select,
body[data-theme] #inventory .inventory-sort-field select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 0 !important;
  border: 1px solid rgba(251, 246, 234, 0.16) !important;
  border-radius: 11px !important;
  background: rgba(251, 246, 234, 0.07) !important;
  color: #fffaf0 !important;
  box-shadow: none !important;
}

#inventory .inventory-search-field input {
  padding: 0 12px !important;
}

#inventory .inventory-search-field input::placeholder {
  color: rgba(251, 246, 234, 0.5) !important;
}

#inventory .inventory-search-field input:focus-visible,
#inventory .inventory-stock-field select:focus-visible,
#inventory .inventory-sort-field select:focus-visible,
#inventory .inventory-search-clear:focus-visible,
#inventory .inventory-finder-clear:focus-visible,
#inventory .inventory-finder-empty button:focus-visible {
  outline: 3px solid #dce86f !important;
  outline-offset: 2px !important;
}

#inventory .inventory-size-match,
body[data-theme] #inventory .inventory-size-match {
  position: relative !important;
  grid-area: size !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

#inventory .inventory-size-match > input,
body[data-theme] #inventory .inventory-size-match > input {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  border: 0 !important;
}

#inventory .inventory-size-match-copy,
body[data-theme] #inventory .inventory-size-match-copy {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  column-gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 5px 10px 5px 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(221, 188, 101, 0.34) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(135deg, rgba(221, 188, 101, 0.095), transparent 54%),
    rgba(251, 246, 234, 0.055) !important;
  color: #fffaf0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

#inventory .inventory-size-match-copy::before,
body[data-theme] #inventory .inventory-size-match-copy::before {
  content: "" !important;
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid rgba(220, 232, 111, 0.52) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(90deg, transparent 45%, rgba(220, 232, 111, 0.4) 46% 54%, transparent 55%),
    rgba(220, 232, 111, 0.055) !important;
  color: #11150d !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: inset 0 0 0 3px rgba(10, 13, 11, 0.44) !important;
}

#inventory .inventory-size-match-copy strong,
#inventory .inventory-size-match-copy small,
body[data-theme] #inventory .inventory-size-match-copy strong,
body[data-theme] #inventory .inventory-size-match-copy small {
  grid-column: 2 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#inventory .inventory-size-match-copy strong,
body[data-theme] #inventory .inventory-size-match-copy strong {
  align-self: end !important;
  color: #fffaf0 !important;
  font-size: 0.68rem !important;
  font-weight: 860 !important;
  line-height: 1.05 !important;
}

#inventory .inventory-size-match-copy small,
body[data-theme] #inventory .inventory-size-match-copy small {
  align-self: start !important;
  color: rgba(251, 246, 234, 0.58) !important;
  font-size: 0.57rem !important;
  font-weight: 720 !important;
  line-height: 1.18 !important;
}

#inventory .inventory-size-match:hover .inventory-size-match-copy,
body[data-theme] #inventory .inventory-size-match:hover .inventory-size-match-copy {
  border-color: rgba(220, 232, 111, 0.58) !important;
}

#inventory .inventory-size-match > input:focus-visible + .inventory-size-match-copy,
body[data-theme] #inventory .inventory-size-match > input:focus-visible + .inventory-size-match-copy {
  outline: 3px solid #dce86f !important;
  outline-offset: 2px !important;
}

#inventory .inventory-size-match > input:checked + .inventory-size-match-copy,
body[data-theme] #inventory .inventory-size-match > input:checked + .inventory-size-match-copy {
  border-color: rgba(220, 232, 111, 0.82) !important;
  background:
    linear-gradient(135deg, rgba(220, 232, 111, 0.19), rgba(221, 188, 101, 0.09) 58%, rgba(12, 14, 18, 0.72)),
    rgba(251, 246, 234, 0.06) !important;
  box-shadow:
    inset 0 0 0 1px rgba(220, 232, 111, 0.12),
    0 8px 24px rgba(8, 11, 7, 0.26) !important;
  transform: translateY(-1px) !important;
}

#inventory .inventory-size-match > input:checked + .inventory-size-match-copy::before,
body[data-theme] #inventory .inventory-size-match > input:checked + .inventory-size-match-copy::before {
  content: "✓" !important;
  border-color: #dce86f !important;
  background: #dce86f !important;
  box-shadow: 0 0 16px rgba(220, 232, 111, 0.24) !important;
}

#inventory .inventory-search-clear,
#inventory .inventory-finder-clear,
body[data-theme] #inventory .inventory-search-clear,
body[data-theme] #inventory .inventory-finder-clear {
  grid-area: clear !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-color: rgba(251, 246, 234, 0.16) !important;
  color: rgba(251, 246, 234, 0.88) !important;
}

#inventory .inventory-finder-count,
body[data-theme] #inventory .inventory-finder-count {
  grid-area: count !important;
  align-self: center !important;
  min-width: 0 !important;
  margin: 0 !important;
  color: rgba(251, 246, 234, 0.64) !important;
  font-size: 0.7rem !important;
  font-weight: 760 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#inventory .inventory-finder-empty,
body[data-theme] #inventory .inventory-finder-empty {
  display: grid !important;
  grid-column: 1 / -1 !important;
  justify-items: start !important;
  gap: 6px !important;
  min-height: 150px !important;
  padding: 20px !important;
  border: 1px dashed rgba(251, 246, 234, 0.2) !important;
  border-radius: 16px !important;
  background: rgba(251, 246, 234, 0.035) !important;
  color: rgba(251, 246, 234, 0.72) !important;
}

#inventory .inventory-finder-empty strong,
body[data-theme] #inventory .inventory-finder-empty strong {
  color: #fffaf0 !important;
}

#inventory .inventory-finder-empty button,
body[data-theme] #inventory .inventory-finder-empty button {
  min-height: 40px !important;
  margin-top: 4px !important;
}

@media (min-width: 721px) and (max-width: 1100px) {
  #inventory .inventory-finder,
  body[data-theme] #inventory .inventory-finder,
  html.native-layout-guard #inventory .inventory-finder,
  html.native-layout-guard body[data-theme] #inventory .inventory-finder {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "search search"
      "stock sort"
      "size clear"
      "count count" !important;
    align-items: end !important;
  }

  #inventory .inventory-finder-count,
  body[data-theme] #inventory .inventory-finder-count {
    text-align: right !important;
  }
}

@media (max-width: 720px) {
  #inventory .inventory-finder,
  body[data-theme] #inventory .inventory-finder,
  html.native-layout-guard #inventory .inventory-finder,
  html.native-layout-guard body[data-theme] #inventory .inventory-finder {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "search search"
      "stock sort"
      "size clear"
      "count count" !important;
    align-items: end !important;
  }

  #inventory .inventory-search-field,
  body[data-theme] #inventory .inventory-search-field {
    grid-area: search !important;
  }

  #inventory .inventory-search-clear,
  #inventory .inventory-finder-clear,
  body[data-theme] #inventory .inventory-search-clear,
  body[data-theme] #inventory .inventory-finder-clear {
    justify-self: stretch !important;
    width: 100% !important;
  }

  #inventory .inventory-finder-count,
  body[data-theme] #inventory .inventory-finder-count {
    grid-area: count !important;
    text-align: left !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #inventory .inventory-size-match-copy,
  body[data-theme] #inventory .inventory-size-match-copy {
    transition: none !important;
  }

  #inventory .inventory-size-match > input:checked + .inventory-size-match-copy,
  body[data-theme] #inventory .inventory-size-match > input:checked + .inventory-size-match-copy {
    transform: none !important;
  }
}

/* v570: each Radar row owns a compact, editable price threshold. */
#inventory .watchlist-target-form,
body[data-theme] #inventory .watchlist-target-form,
html.native-layout-guard #inventory .watchlist-target-form,
html.native-layout-guard body[data-theme] #inventory .watchlist-target-form {
  display: grid !important;
  grid-template-columns: minmax(76px, 1fr) auto !important;
  gap: 7px !important;
  align-items: end !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 9px 0 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
  border: 1px dashed rgba(239, 204, 113, 0.34) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(112deg, rgba(239, 204, 113, 0.08), transparent 62%),
    rgba(4, 7, 8, 0.58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

#inventory .watchlist-price-ready .watchlist-target-form,
body[data-theme] #inventory .watchlist-price-ready .watchlist-target-form {
  border-color: rgba(97, 215, 207, 0.42) !important;
  background:
    linear-gradient(112deg, rgba(97, 215, 207, 0.1), transparent 62%),
    rgba(4, 7, 8, 0.58) !important;
}

#inventory .watchlist-target-field,
body[data-theme] #inventory .watchlist-target-field {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#inventory .watchlist-target-field > span,
body[data-theme] #inventory .watchlist-target-field > span {
  color: rgba(248, 244, 234, 0.68) !important;
  font-size: 0.56rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

#inventory .watchlist-target-field input,
body[data-theme] #inventory .watchlist-target-field input,
html.native-layout-guard #inventory .watchlist-target-field input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(248, 244, 234, 0.2) !important;
  border-radius: 8px !important;
  background: #080b0c !important;
  color: #fffefa !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: max(1rem, 16px) !important;
  font-weight: 860 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}

#inventory .watchlist-target-field input[aria-invalid="true"],
body[data-theme] #inventory .watchlist-target-field input[aria-invalid="true"] {
  border-color: rgba(255, 112, 124, 0.82) !important;
}

#inventory .watchlist-target-field input:focus-visible,
#inventory .watchlist-target-submit:focus-visible,
body[data-theme] #inventory .watchlist-target-field input:focus-visible,
body[data-theme] #inventory .watchlist-target-submit:focus-visible {
  outline: 2px solid #b9fff8 !important;
  outline-offset: 2px !important;
}

#inventory .watchlist-target-submit,
body[data-theme] #inventory .watchlist-target-submit,
html.native-layout-guard #inventory .watchlist-target-submit {
  align-self: end !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(239, 204, 113, 0.54) !important;
  border-radius: 8px !important;
  background: rgba(239, 204, 113, 0.12) !important;
  color: #f8dc91 !important;
  box-shadow: none !important;
  font-size: 0.62rem !important;
  font-weight: 930 !important;
  letter-spacing: 0.035em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

#inventory .watchlist-target-submit:hover,
body[data-theme] #inventory .watchlist-target-submit:hover {
  border-color: rgba(97, 215, 207, 0.72) !important;
  background: rgba(97, 215, 207, 0.14) !important;
  color: #b9fff8 !important;
}

#inventory .watchlist-body > .watchlist-row-actions,
body[data-theme] #inventory .watchlist-body > .watchlist-row-actions {
  display: flex !important;
  grid-column: 1 / -1 !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  width: 100% !important;
  margin-top: 8px !important;
}

@media (max-width: 370px) {
  #inventory .watchlist-target-form,
  body[data-theme] #inventory .watchlist-target-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #inventory .watchlist-target-field,
  body[data-theme] #inventory .watchlist-target-field {
    grid-template-columns: minmax(0, 1fr) 76px !important;
    align-items: center !important;
  }

  #inventory .watchlist-target-submit,
  body[data-theme] #inventory .watchlist-target-submit {
    width: 100% !important;
  }
}

/* v568: the comparison winner reads like a pinned tailor's swatch inside the finished look. */
@keyframes outfit-anchor-settle {
  from {
    opacity: 0.72;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#studio .outfit-row.is-compare-anchor,
body[data-theme] #studio .outfit-row.is-compare-anchor,
html.native-layout-guard #studio .outfit-row.is-compare-anchor,
html.native-layout-guard body[data-theme] #studio .outfit-row.is-compare-anchor {
  position: relative !important;
  border-color: rgba(239, 204, 113, 0.62) !important;
  background:
    linear-gradient(102deg, rgba(239, 204, 113, 0.14), transparent 46%),
    var(--read-card, #151515) !important;
  box-shadow:
    inset 3px 0 0 rgba(239, 204, 113, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 14px 30px rgba(0, 0, 0, 0.26) !important;
  animation: outfit-anchor-settle 320ms ease-out both !important;
}

#studio .outfit-row.is-compare-anchor::before,
body[data-theme] #studio .outfit-row.is-compare-anchor::before {
  content: "" !important;
  position: absolute !important;
  top: 12px !important;
  bottom: 12px !important;
  left: 7px !important;
  border-left: 1px dashed rgba(255, 247, 217, 0.46) !important;
  pointer-events: none !important;
}

#studio .outfit-row.is-compare-anchor > img,
body[data-theme] #studio .outfit-row.is-compare-anchor > img {
  border: 1px solid rgba(239, 204, 113, 0.46) !important;
  box-shadow: 0 0 0 3px rgba(239, 204, 113, 0.07) !important;
}

#studio .outfit-anchor-badge,
body[data-theme] #studio .outfit-anchor-badge,
html.native-layout-guard #studio .outfit-anchor-badge,
html.native-layout-guard body[data-theme] #studio .outfit-anchor-badge {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 5px !important;
  padding: 4px 8px 3px !important;
  overflow-wrap: anywhere !important;
  border: 1px dashed rgba(239, 204, 113, 0.62) !important;
  border-radius: 3px !important;
  background: rgba(239, 204, 113, 0.09) !important;
  color: #efcc71 !important;
  font-size: 0.54rem !important;
  font-weight: 940 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  transform: rotate(-1deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  #studio .outfit-row.is-compare-anchor,
  body[data-theme] #studio .outfit-row.is-compare-anchor {
    animation: none !important;
  }
}

/* v569: a cyan radar tag connects the comparison action with its saved watchlist row. */
@keyframes watchlist-radar-reveal {
  from {
    box-shadow: inset 3px 0 0 rgba(97, 215, 207, 0.18), 0 0 0 rgba(97, 215, 207, 0);
  }
  to {
    box-shadow: inset 3px 0 0 rgba(97, 215, 207, 0.58), 0 14px 30px rgba(0, 0, 0, 0.26);
  }
}

#inventory .watchlist-row.is-compare-revealed,
body[data-theme] #inventory .watchlist-row.is-compare-revealed,
html.native-layout-guard #inventory .watchlist-row.is-compare-revealed,
html.native-layout-guard body[data-theme] #inventory .watchlist-row.is-compare-revealed {
  position: relative !important;
  scroll-margin-block: 84px !important;
  border-color: rgba(97, 215, 207, 0.58) !important;
  background:
    linear-gradient(102deg, rgba(97, 215, 207, 0.13), transparent 48%),
    #101515 !important;
  box-shadow: inset 3px 0 0 rgba(97, 215, 207, 0.58), 0 14px 30px rgba(0, 0, 0, 0.26) !important;
  animation: watchlist-radar-reveal 360ms ease-out both !important;
}

#inventory .watchlist-row.is-compare-revealed:focus-visible,
body[data-theme] #inventory .watchlist-row.is-compare-revealed:focus-visible {
  outline: 2px solid #b9fff8 !important;
  outline-offset: 3px !important;
}

#inventory .watchlist-reveal-tag,
body[data-theme] #inventory .watchlist-reveal-tag,
html.native-layout-guard #inventory .watchlist-reveal-tag,
html.native-layout-guard body[data-theme] #inventory .watchlist-reveal-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 6px !important;
  padding: 4px 8px 3px !important;
  overflow-wrap: anywhere !important;
  border: 1px dashed rgba(97, 215, 207, 0.62) !important;
  border-radius: 3px !important;
  background: rgba(97, 215, 207, 0.08) !important;
  color: #82e8e0 !important;
  font-size: 0.54rem !important;
  font-weight: 930 !important;
  letter-spacing: 0.09em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  transform: rotate(-0.7deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  #inventory .watchlist-row.is-compare-revealed,
  body[data-theme] #inventory .watchlist-row.is-compare-revealed {
    animation: none !important;
  }
}

/* v170: tone down the verdict module; make it read like a premium style scan, not a novelty badge. */
#studio .score-wrap {
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  border: 1px solid rgba(244, 240, 232, 0.12) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.055), rgba(244, 240, 232, 0.012)),
    #0b0e11 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 16px 34px rgba(0, 0, 0, 0.24) !important;
  padding: 12px !important;
}

#studio .score-ring,
.expert-verdict-score {
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border: 1px solid rgba(185, 247, 228, 0.22) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(244, 240, 232, 0.13), transparent 56%),
    linear-gradient(145deg, rgba(185, 247, 228, 0.18), rgba(255, 54, 95, 0.1) 56%, rgba(5, 6, 8, 0.98)) !important;
  color: var(--sb-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.22) !important;
}

#studio .score-ring strong,
.expert-verdict-score strong {
  font-size: 1.08rem !important;
  font-weight: 840 !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

#studio .score-ring span,
.expert-verdict-score span {
  margin-top: -8px !important;
  color: rgba(244, 240, 232, 0.58) !important;
  font-size: 0.58rem !important;
  font-weight: 720 !important;
}

#studio .score-wrap h3 {
  margin: 0 0 4px !important;
  color: var(--sb-ink) !important;
  font-size: clamp(1rem, 0.92rem + 0.5vw, 1.18rem) !important;
  font-weight: 780 !important;
  line-height: 1.12 !important;
}

#studio .score-wrap p {
  margin: 0 !important;
  color: rgba(244, 240, 232, 0.74) !important;
  font-size: 0.88rem !important;
  font-weight: 540 !important;
  line-height: 1.45 !important;
}

.expert-verdict-card {
  gap: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(185, 247, 228, 0.15) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(155deg, rgba(185, 247, 228, 0.075), rgba(255, 54, 95, 0.04) 42%, rgba(244, 240, 232, 0.02)),
    #0b0e11 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 38px rgba(0, 0, 0, 0.28) !important;
  padding: 12px !important;
}

.expert-verdict-card::before {
  content: none !important;
  display: none !important;
}

.expert-verdict-top {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

.expert-verdict-body {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.expert-verdict-body > span,
.expert-next-move span {
  color: var(--sb-mint) !important;
  font-size: 0.64rem !important;
  font-weight: 780 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

.expert-verdict-body h3 {
  margin: 0 !important;
  color: var(--sb-ink) !important;
  font-size: clamp(1.12rem, 1rem + 0.72vw, 1.45rem) !important;
  font-weight: 820 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.expert-verdict-body p,
.expert-next-move {
  margin: 0 !important;
  color: rgba(244, 240, 232, 0.78) !important;
  font-size: 0.9rem !important;
  font-weight: 560 !important;
  line-height: 1.46 !important;
}

.expert-verdict-metrics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.expert-verdict-metrics article {
  min-width: 0 !important;
  border: 1px solid rgba(244, 240, 232, 0.095) !important;
  border-radius: 12px !important;
  background: rgba(5, 6, 8, 0.42) !important;
  padding: 8px !important;
}

.expert-verdict-metrics span {
  color: rgba(185, 247, 228, 0.72) !important;
  font-size: 0.58rem !important;
  font-weight: 720 !important;
  letter-spacing: 0.02em !important;
}

.expert-verdict-metrics strong {
  color: var(--sb-ink) !important;
  font-size: 0.88rem !important;
  font-weight: 740 !important;
  line-height: 1.16 !important;
}

.expert-verdict-metrics small {
  color: rgba(244, 240, 232, 0.56) !important;
  font-size: 0.66rem !important;
  line-height: 1.25 !important;
}

/* v707-model-quota: keep the server-authoritative monthly analysis balance visible with the result. */
.expert-model-quota {
  margin: 0 !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(185, 247, 228, 0.18) !important;
  border-radius: 10px !important;
  background: rgba(185, 247, 228, 0.06) !important;
  color: var(--sb-soft, rgba(244, 240, 232, 0.76)) !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  line-height: 1.28 !important;
}

/* v703-style-dimensions: explain the model score using visible-outfit dimensions only. */
.expert-verdict-dimensions {
  display: grid !important;
  gap: 7px !important;
}

.expert-verdict-dimensions-title {
  color: rgba(185, 247, 228, 0.82) !important;
  font-size: 0.62rem !important;
  font-weight: 780 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.expert-verdict-dimensions-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.expert-verdict-dimensions article {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding: 8px !important;
  border: 1px solid rgba(244, 240, 232, 0.095) !important;
  border-radius: 12px !important;
  background: rgba(5, 6, 8, 0.42) !important;
}

.expert-verdict-dimensions article span {
  color: rgba(185, 247, 228, 0.72) !important;
  font-size: 0.58rem !important;
  font-weight: 720 !important;
  letter-spacing: 0.02em !important;
}

.expert-verdict-dimensions article strong {
  color: var(--sb-ink, #f8f4ea) !important;
  font-size: 0.82rem !important;
  font-weight: 740 !important;
  line-height: 1.16 !important;
}

/* v702-model-findings: surface one clear strength and next improvement beside the real model score. */
.expert-verdict-findings {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.expert-verdict-findings li {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 8px !important;
  border: 1px solid rgba(244, 240, 232, 0.095) !important;
  border-radius: 12px !important;
  background: rgba(5, 6, 8, 0.42) !important;
}

.expert-verdict-findings span {
  font-size: 0.58rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.02em !important;
}

.expert-verdict-finding-strength span {
  color: rgba(185, 247, 228, 0.82) !important;
}

.expert-verdict-finding-improvement span {
  color: rgba(239, 204, 113, 0.9) !important;
}

.expert-verdict-findings strong {
  min-width: 0 !important;
  color: var(--sb-ink, #f8f4ea) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 340px) {
  .expert-verdict-findings {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.expert-next-move {
  border-top: 1px solid rgba(244, 240, 232, 0.08) !important;
  padding-top: 10px !important;
}

/* v174: theme system - core fashion app skins. */
body[data-theme="noir"] {
  --sb-bg: #050608;
  --sb-rail: #090b0e;
  --sb-panel: #111418;
  --sb-ink: #f4f0e8;
  --sb-soft: #d9d4cb;
  --sb-muted: #9f9a94;
  --sb-line: rgba(244, 240, 232, 0.14);
  --sb-line-strong: rgba(244, 240, 232, 0.24);
  --sb-mint: #b9f7e4;
  --sb-signal: #ff365f;
  --sb-signal-dark: #8a1430;
  --sb-page-bg: radial-gradient(ellipse at 18% -12%, rgba(185, 247, 228, 0.12), transparent 34%),
    radial-gradient(ellipse at 86% 2%, rgba(255, 54, 95, 0.11), transparent 32%),
    linear-gradient(180deg, #050608 0%, #020304 100%);
}

body[data-theme="editorial"] {
  --sb-bg: #f4efe6;
  --sb-rail: #eee6da;
  --sb-panel: #fffaf2;
  --sb-ink: #171411;
  --sb-soft: #52483d;
  --sb-muted: #7b6d60;
  --sb-line: rgba(23, 20, 17, 0.14);
  --sb-line-strong: rgba(23, 20, 17, 0.24);
  --sb-mint: #0e766e;
  --sb-signal: #c7495c;
  --sb-signal-dark: #7f2430;
  --sb-page-bg: radial-gradient(ellipse at 20% -14%, rgba(14, 118, 110, 0.16), transparent 36%),
    radial-gradient(ellipse at 94% 0%, rgba(199, 73, 92, 0.15), transparent 34%),
    linear-gradient(180deg, #f4efe6 0%, #e9dfcf 100%);
  color-scheme: light;
}

body[data-theme="runway"] {
  --sb-bg: #0b0710;
  --sb-rail: #120d18;
  --sb-panel: #18111f;
  --sb-ink: #fff3f9;
  --sb-soft: #dfc7d6;
  --sb-muted: #aa91a1;
  --sb-line: rgba(255, 243, 249, 0.15);
  --sb-line-strong: rgba(255, 243, 249, 0.26);
  --sb-mint: #67f2ff;
  --sb-signal: #ff2f86;
  --sb-signal-dark: #7d174f;
  --sb-page-bg: radial-gradient(ellipse at 28% -14%, rgba(103, 242, 255, 0.14), transparent 34%),
    radial-gradient(ellipse at 92% -2%, rgba(255, 47, 134, 0.22), transparent 35%),
    linear-gradient(180deg, #0b0710 0%, #050207 100%);
}

body[data-theme] {
  background: var(--sb-page-bg) !important;
  color: var(--sb-ink) !important;
}

body[data-theme]::before {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-ink) 4%, transparent), transparent 42%),
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--sb-mint) 10%, transparent), transparent 42%),
    var(--sb-bg) !important;
  border-color: var(--sb-line) !important;
}

body[data-theme] main > .studio-band.active-view,
body[data-theme] main > .content-band.active-view,
body[data-theme] main > .business-band.active-view {
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--sb-mint) 6%, transparent), transparent 38%),
    var(--sb-bg) !important;
}

body[data-theme] .topbar,
body[data-theme] .mobile-dock,
body[data-theme] .quick-action-panel,
body[data-theme] .command-panel,
body[data-theme] .panel,
body[data-theme] [class$="-panel"],
body[data-theme] main article,
body[data-theme] .item-card,
body[data-theme] .history-card,
body[data-theme] .saved-look-card,
body[data-theme] .trend-card,
body[data-theme] .look-card,
body[data-theme] .repair-card,
body[data-theme] .watchlist-row,
body[data-theme] .catalog-audit-row,
body[data-theme] .wardrobe-gap-card,
body[data-theme] .community-post-card,
body[data-theme] .social-card-preview,
body[data-theme] #studio .score-wrap,
body[data-theme] .expert-verdict-card {
  border-color: var(--sb-line) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-ink) 6%, transparent), color-mix(in srgb, var(--sb-bg) 94%, transparent)),
    var(--sb-panel) !important;
  color: var(--sb-ink) !important;
}

body[data-theme="editorial"] .topbar,
body[data-theme="editorial"] .mobile-dock,
body[data-theme="editorial"] .quick-action-panel,
body[data-theme="editorial"] .command-panel,
body[data-theme="editorial"] .panel,
body[data-theme="editorial"] [class$="-panel"],
body[data-theme="editorial"] main article,
body[data-theme="editorial"] #studio .score-wrap,
body[data-theme="editorial"] .expert-verdict-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 18px 42px rgba(78, 63, 46, 0.14) !important;
}

body[data-theme] h1,
body[data-theme] h2,
body[data-theme] h3,
body[data-theme] h4,
body[data-theme] strong,
body[data-theme] .panel-head h2,
body[data-theme] .panel-head h3,
body[data-theme] .section-head h2,
body[data-theme] .score-wrap h3,
body[data-theme] .expert-verdict-body h3 {
  color: var(--sb-ink) !important;
}

body[data-theme] p,
body[data-theme] label,
body[data-theme] small,
body[data-theme] span,
body[data-theme] .panel p,
body[data-theme] .section-head p,
body[data-theme] .score-wrap p,
body[data-theme] .expert-verdict-body p,
body[data-theme] .expert-next-move {
  color: var(--sb-soft) !important;
}

body[data-theme] .eyebrow,
body[data-theme] .panel-head .eyebrow,
body[data-theme] .section-head .eyebrow,
body[data-theme] .expert-verdict-body > span,
body[data-theme] .expert-next-move span,
body[data-theme] .expert-critique-head span,
body[data-theme] .expert-critique-grid article > span {
  color: var(--sb-mint) !important;
}

body[data-theme] .command-button,
body[data-theme] .locale-switch select,
body[data-theme] .market-switch select,
body[data-theme] .theme-switch select,
body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea {
  border-color: var(--sb-line) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-ink) 7%, transparent), color-mix(in srgb, var(--sb-bg) 92%, transparent)),
    var(--sb-rail) !important;
  color: var(--sb-ink) !important;
}

body[data-theme] .locale-switch::after,
body[data-theme] .market-switch::after,
body[data-theme] .theme-switch::after {
  border-color: var(--sb-mint) !important;
}

body[data-theme] .primary-button,
body[data-theme] .content-band .primary-button,
body[data-theme] .content-band :is(.primary-button, button[type="submit"]),
body[data-theme] .quick-action-button,
body[data-theme] .mobile-dock a.active .dock-icon,
body[data-theme] .mobile-dock a:focus-visible .dock-icon {
  border-color: color-mix(in srgb, var(--sb-signal) 64%, var(--sb-ink) 12%) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-signal) 72%, #fff 22%) 0%, var(--sb-signal) 52%, var(--sb-signal-dark) 100%) !important;
  color: #fff8fb !important;
}

body[data-theme] .score-ring,
body[data-theme] #studio .score-ring,
body[data-theme] .expert-verdict-score {
  border-color: color-mix(in srgb, var(--sb-mint) 34%, transparent) !important;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--sb-ink) 14%, transparent), transparent 56%),
    linear-gradient(145deg, color-mix(in srgb, var(--sb-mint) 22%, transparent), color-mix(in srgb, var(--sb-signal) 12%, transparent) 56%, var(--sb-bg)) !important;
  color: var(--sb-ink) !important;
}

body[data-theme] .palette-swatch small,
body[data-theme] .brand-pill,
body[data-theme] main :is(.pill, .source-badge, .stock-badge, .tag, .badge, .product-chip, .signal-chip, .trend-chip, .mood-chip) {
  border-color: color-mix(in srgb, var(--sb-mint) 22%, transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-mint) 12%, transparent), color-mix(in srgb, var(--sb-panel) 94%, transparent)),
    var(--sb-rail) !important;
  color: var(--sb-soft) !important;
}

.theme-switch {
  position: relative !important;
}

/* v173: language, currency and theme share the topbar without clipping. */
.topbar {
  grid-template-columns: minmax(92px, 108px) minmax(0, 1fr) 42px 164px !important;
}

.topbar-switches {
  display: grid !important;
  width: 164px !important;
  min-width: 164px !important;
  max-width: 164px !important;
  grid-template-columns: 46px 50px 58px !important;
  gap: 5px !important;
}

.locale-switch,
.market-switch,
.theme-switch {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.locale-switch span,
.market-switch span,
.theme-switch span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.locale-switch::after,
.market-switch::after,
.theme-switch::after {
  content: "" !important;
  position: absolute !important;
  top: calc(50% - 4px) !important;
  right: 7px !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 1.5px solid var(--sb-mint) !important;
  border-bottom: 1.5px solid var(--sb-mint) !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
}

.locale-switch select,
.market-switch select,
.theme-switch select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border-radius: 14px !important;
  padding: 0 16px 0 6px !important;
  overflow: hidden !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-align-last: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

@media (max-width: 410px) {
  .topbar {
    grid-template-columns: 82px minmax(0, 1fr) 38px 150px !important;
    gap: 4px !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  .brand {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }

  .brand-logo {
    width: 80px !important;
    max-width: 80px !important;
  }

  .command-button {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  .topbar-switches {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    grid-template-columns: 42px 48px 52px !important;
    gap: 4px !important;
  }

  .locale-switch select,
  .market-switch select,
  .theme-switch select {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    border-radius: 13px !important;
    padding-right: 14px !important;
    padding-left: 5px !important;
    font-size: 0.62rem !important;
  }
}

/* v176: real skins - each mode gets a different material system. */
body[data-theme="noir"] {
  --sb-bg: #050608;
  --sb-rail: #0a0c10;
  --sb-panel: #111419;
  --sb-ink: #f5f2ec;
  --sb-soft: #d8d3ca;
  --sb-muted: #9d978e;
  --sb-line: rgba(245, 242, 236, 0.15);
  --sb-line-strong: rgba(245, 242, 236, 0.28);
  --sb-mint: #d6b861;
  --sb-signal: #fb3b72;
  --sb-signal-dark: #74162f;
  --sb-page-bg:
    radial-gradient(ellipse at 16% -12%, rgba(211, 216, 224, 0.18), transparent 34%),
    radial-gradient(ellipse at 92% 0%, rgba(251, 59, 114, 0.14), transparent 34%),
    linear-gradient(180deg, #050608 0%, #020304 100%);
  --sb-frame-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 42%),
    radial-gradient(ellipse at 50% 0%, rgba(214, 184, 97, 0.12), transparent 44%),
    #050608;
  --sb-view-bg:
    radial-gradient(ellipse at 50% -4%, rgba(214, 184, 97, 0.08), transparent 38%),
    linear-gradient(180deg, #07080b 0%, #030405 100%);
  --sb-chrome-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    #0b0d10;
  --sb-card-bg:
    linear-gradient(180deg, rgba(245, 242, 236, 0.06), rgba(245, 242, 236, 0.014)),
    #111419;
  --sb-theme-swatch: linear-gradient(90deg, #f5f2ec, #d6b861 52%, #fb3b72);
  --sb-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 34px 110px rgba(0, 0, 0, 0.72);
  --sb-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 18px 40px rgba(0, 0, 0, 0.28);
}

body[data-theme="editorial"] {
  --sb-bg: #f6f7f3;
  --sb-rail: #eef1ed;
  --sb-panel: #ffffff;
  --sb-ink: #101418;
  --sb-soft: #384047;
  --sb-muted: #687078;
  --sb-line: rgba(16, 20, 24, 0.14);
  --sb-line-strong: rgba(16, 20, 24, 0.24);
  --sb-mint: #205f72;
  --sb-signal: #c52d58;
  --sb-signal-dark: #7a1533;
  --sb-page-bg:
    radial-gradient(ellipse at 10% -14%, rgba(32, 95, 114, 0.18), transparent 38%),
    radial-gradient(ellipse at 96% 0%, rgba(197, 45, 88, 0.14), transparent 34%),
    linear-gradient(180deg, #f6f7f3 0%, #e5ece7 100%);
  --sb-frame-bg:
    linear-gradient(180deg, rgba(16, 20, 24, 0.035), transparent 44%),
    linear-gradient(135deg, rgba(32, 95, 114, 0.09), transparent 46%),
    #f8faf7;
  --sb-view-bg:
    linear-gradient(180deg, rgba(32, 95, 114, 0.055), transparent 34%),
    #f6f7f3;
  --sb-chrome-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 241, 237, 0.88)),
    #ffffff;
  --sb-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 244, 241, 0.86)),
    #ffffff;
  --sb-theme-swatch: linear-gradient(90deg, #101418, #205f72 50%, #c52d58);
  --sb-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 32px 90px rgba(32, 45, 52, 0.2);
  --sb-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 34px rgba(28, 43, 48, 0.12);
  color-scheme: light;
}

body[data-theme="runway"] {
  --sb-bg: #090510;
  --sb-rail: #120a1a;
  --sb-panel: #181020;
  --sb-ink: #fff3f9;
  --sb-soft: #e8ccdd;
  --sb-muted: #b793a9;
  --sb-line: rgba(255, 243, 249, 0.16);
  --sb-line-strong: rgba(255, 243, 249, 0.3);
  --sb-mint: #5beaff;
  --sb-signal: #ff2f86;
  --sb-signal-dark: #8b174d;
  --sb-page-bg:
    radial-gradient(ellipse at 18% -12%, rgba(91, 234, 255, 0.16), transparent 35%),
    radial-gradient(ellipse at 92% -2%, rgba(255, 47, 134, 0.24), transparent 35%),
    linear-gradient(180deg, #090510 0%, #030107 100%);
  --sb-frame-bg:
    linear-gradient(115deg, rgba(91, 234, 255, 0.11), transparent 34%),
    linear-gradient(245deg, rgba(255, 47, 134, 0.14), transparent 38%),
    #090510;
  --sb-view-bg:
    radial-gradient(ellipse at 50% -2%, rgba(255, 47, 134, 0.12), transparent 38%),
    linear-gradient(180deg, #0c0713 0%, #050208 100%);
  --sb-chrome-bg:
    linear-gradient(180deg, rgba(255, 47, 134, 0.12), rgba(91, 234, 255, 0.035)),
    #120a1a;
  --sb-card-bg:
    linear-gradient(180deg, rgba(255, 243, 249, 0.07), rgba(91, 234, 255, 0.018)),
    #181020;
  --sb-theme-swatch: linear-gradient(90deg, #5beaff, #7d5cff 46%, #ff2f86);
  --sb-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 34px 120px rgba(255, 47, 134, 0.2);
  --sb-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 42px rgba(7, 2, 12, 0.56);
}

body[data-theme]::before {
  background: var(--sb-frame-bg) !important;
  box-shadow: var(--sb-frame-shadow) !important;
}

body[data-theme] main > .studio-band.active-view,
body[data-theme] main > .content-band.active-view,
body[data-theme] main > .business-band.active-view {
  background: var(--sb-view-bg) !important;
}

body[data-theme] .topbar,
body[data-theme] .mobile-dock,
body[data-theme] .quick-action-panel,
body[data-theme] .command-panel {
  border-color: var(--sb-line-strong) !important;
  background: var(--sb-chrome-bg) !important;
  box-shadow: var(--sb-card-shadow) !important;
  backdrop-filter: blur(20px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
}

body[data-theme] .panel,
body[data-theme] [class$="-panel"],
body[data-theme] main article,
body[data-theme] .item-card,
body[data-theme] .history-card,
body[data-theme] .saved-look-card,
body[data-theme] .trend-card,
body[data-theme] .look-card,
body[data-theme] .repair-card,
body[data-theme] .watchlist-row,
body[data-theme] .catalog-audit-row,
body[data-theme] .wardrobe-gap-card,
body[data-theme] .community-post-card,
body[data-theme] .social-card-preview,
body[data-theme] #studio .score-wrap,
body[data-theme] .expert-verdict-card {
  background: var(--sb-card-bg) !important;
  box-shadow: var(--sb-card-shadow) !important;
}

body[data-theme="editorial"] .topbar,
body[data-theme="editorial"] .mobile-dock,
body[data-theme="editorial"] .panel,
body[data-theme="editorial"] [class$="-panel"],
body[data-theme="editorial"] main article,
body[data-theme="editorial"] #studio .score-wrap,
body[data-theme="editorial"] .expert-verdict-card {
  color: #101418 !important;
}

body[data-theme] .theme-switch::before {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  bottom: 8px !important;
  left: 10px !important;
  z-index: 1 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--sb-theme-swatch) !important;
  pointer-events: none !important;
}

body[data-theme] .theme-switch select {
  padding-bottom: 8px !important;
  text-transform: uppercase !important;
}

body[data-theme] .mobile-dock a.active {
  border-color: color-mix(in srgb, var(--sb-signal) 52%, transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-signal) 20%, transparent), color-mix(in srgb, var(--sb-bg) 72%, transparent)),
    var(--sb-rail) !important;
  color: var(--sb-ink) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--sb-ink) 14%, transparent),
    0 14px 30px color-mix(in srgb, var(--sb-signal) 16%, transparent) !important;
}

body[data-theme] .mobile-dock a.active .dock-icon,
body[data-theme] .quick-action-button,
body[data-theme] .primary-button,
body[data-theme] .content-band .primary-button,
body[data-theme] .content-band :is(.primary-button, button[type="submit"]) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-signal) 64%, #fff 18%), var(--sb-signal-dark)) !important;
  color: #fffaf7 !important;
}

@media (max-width: 410px) {
  body[data-theme] .theme-switch::before {
    right: 16px !important;
    bottom: 7px !important;
    left: 8px !important;
  }

  body[data-theme] .theme-switch select {
    padding-bottom: 7px !important;
  }
}

/* v177: contrast guard. No light cards with pale text. */
body[data-theme] .reasons-list h3,
body[data-theme] .expert-critique-head strong,
body[data-theme] .expert-verdict-body h3 {
  color: var(--sb-ink) !important;
}

body[data-theme] .reasons-list p,
body[data-theme] .passport-reasons p,
body[data-theme] .planner-reasons p,
body[data-theme] .discover-reasons p,
body[data-theme] .expert-critique-grid article,
body[data-theme] .expert-verdict-metrics article {
  border-color: var(--sb-line) !important;
  border-left-color: color-mix(in srgb, var(--sb-mint) 58%, var(--sb-ink) 8%) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-ink) 5%, transparent), color-mix(in srgb, var(--sb-bg) 7%, transparent)),
    var(--sb-card-bg) !important;
  color: var(--sb-soft) !important;
  opacity: 1 !important;
}

body[data-theme] .reasons-list p,
body[data-theme] .passport-reasons p,
body[data-theme] .planner-reasons p,
body[data-theme] .discover-reasons p,
body[data-theme] .expert-critique-grid article p,
body[data-theme] .expert-verdict-body p,
body[data-theme] .expert-next-move,
body[data-theme] .expert-verdict-metrics small {
  color: var(--sb-soft) !important;
  opacity: 1 !important;
}

body[data-theme] .expert-critique-grid article > span,
body[data-theme] .expert-verdict-body > span,
body[data-theme] .expert-next-move span,
body[data-theme] .expert-verdict-metrics span {
  color: var(--sb-mint) !important;
  opacity: 1 !important;
}

body[data-theme] .expert-verdict-metrics strong,
body[data-theme] .expert-verdict-score strong,
body[data-theme] .expert-verdict-score span {
  color: var(--sb-ink) !important;
  opacity: 1 !important;
}

body[data-theme="editorial"] .reasons-list p,
body[data-theme="editorial"] .passport-reasons p,
body[data-theme="editorial"] .planner-reasons p,
body[data-theme="editorial"] .discover-reasons p,
body[data-theme="editorial"] .expert-critique-grid article,
body[data-theme="editorial"] .expert-verdict-metrics article {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.52)),
    var(--sb-card-bg) !important;
}

/* v178: global small-surface contrast for chips, product cards and metrics. */
body[data-theme] :is(
  .quick-stats div,
  .outfit-summary div,
  .wardrobe-metrics div,
  .catalog-audit-metrics div,
  .watchlist-metrics div,
  .passport-metrics div,
  .coach-metrics div,
  .fit-metrics div,
  .capsule-metrics div,
  .report-metric,
  .trend-metric,
  .community-metric,
  .client-metric,
  .palette-swatch,
  .status-line,
  .upload-zone
) {
  border-color: var(--sb-line) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-ink) 5%, transparent), color-mix(in srgb, var(--sb-bg) 8%, transparent)),
    var(--sb-card-bg) !important;
  color: var(--sb-ink) !important;
}

body[data-theme] main :is(
  .pill,
  .tag,
  .badge,
  .source-badge,
  .stock-badge,
  .trend-chip,
  .signal-chip,
  .product-chip,
  .mood-chip,
  .passport-product-tags span,
  .catalog-audit-tags span,
  .wardrobe-gap-tags span,
  .watchlist-signal span,
  .community-item-pills span,
  .palette-swatch small,
  .brand-pill
) {
  border-color: color-mix(in srgb, var(--sb-mint) 34%, transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-mint) 14%, transparent), color-mix(in srgb, var(--sb-bg) 10%, transparent)),
    var(--sb-rail) !important;
  color: var(--sb-ink) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body[data-theme] :is(
  .quick-stats strong,
  .outfit-summary strong,
  .metric-value,
  .item-card h3,
  .item-card strong,
  .wardrobe-gap-card strong,
  .watchlist-row h3,
  .watchlist-row strong,
  .catalog-audit-row h3,
  .catalog-audit-row strong,
  .history-card h3,
  .saved-look-card h3,
  .trend-card h3,
  .look-card h3,
  .community-post-card h3,
  .social-card-preview h3
) {
  color: var(--sb-ink) !important;
  opacity: 1 !important;
}

body[data-theme] :is(
  .quick-stats span,
  .outfit-summary span,
  .status-line,
  .meta-line,
  .hint-line,
  .product-signal,
  .campaign-note,
  .item-card p,
  .item-card span,
  .wardrobe-gap-card p,
  .wardrobe-gap-card span,
  .watchlist-row p,
  .watchlist-row span,
  .catalog-audit-row p,
  .catalog-audit-row span,
  .history-card p,
  .saved-look-card p,
  .trend-card p,
  .look-card p,
  .community-post-card p,
  .social-card-preview p
) {
  color: var(--sb-soft) !important;
  opacity: 1 !important;
}

body[data-theme] :is(input, select, textarea) {
  border-color: var(--sb-line) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-ink) 4%, transparent), color-mix(in srgb, var(--sb-bg) 12%, transparent)),
    var(--sb-rail) !important;
  color: var(--sb-ink) !important;
  caret-color: var(--sb-signal) !important;
}

body[data-theme] :is(input, textarea)::placeholder {
  color: var(--sb-muted) !important;
  opacity: 1 !important;
}

/* v181: native-app guard. One phone column, full image evidence, one action glyph. */
html,
body {
  overscroll-behavior: none !important;
}

.app-shell {
  position: fixed !important;
  z-index: 60 !important;
}

.topbar {
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
}

main {
  z-index: 2 !important;
}

main > .studio-band.active-view,
main > .content-band.active-view,
main > .business-band.active-view {
  height: 100% !important;
  padding: 10px 10px calc(var(--dock-height) + 26px) !important;
  scroll-padding-top: 10px !important;
  scroll-padding-bottom: calc(var(--dock-height) + 34px) !important;
}

main :is(
  .studio-grid,
  .passport-layout,
  .coach-layout,
  .fit-layout,
  .planner-layout,
  .capsule-layout,
  .discover-layout,
  .brain-layout,
  .inventory-layout,
  .lookbook-layout,
  .clients-layout,
  .report-layout,
  .history-layout,
  .trend-lab,
  .community-grid,
  .wardrobe-map,
  .watchlist-list,
  .catalog-audit-list
) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 12px !important;
  overflow-x: hidden !important;
}

main :is(
  .studio-grid,
  .passport-layout,
  .coach-layout,
  .fit-layout,
  .planner-layout,
  .capsule-layout,
  .discover-layout,
  .brain-layout,
  .inventory-layout,
  .lookbook-layout,
  .clients-layout,
  .report-layout,
  .history-layout,
  .trend-lab,
  .community-grid,
  .wardrobe-map,
  .watchlist-list,
  .catalog-audit-list
) > * {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

main :is(
  .quick-stats,
  .outfit-summary,
  .passport-metrics,
  .coach-metrics,
  .fit-metrics,
  .wardrobe-metrics,
  .catalog-audit-metrics,
  .watchlist-metrics,
  .expert-verdict-metrics,
  .inventory-grid,
  .passport-products,
  .recommendation-list,
  .saved-look-grid,
  .lookbook-output,
  .history-grid,
  .trend-grid,
  .client-grid,
  .report-grid
) {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (min-width: 390px) {
  main :is(
    .quick-stats,
    .outfit-summary,
    .passport-metrics,
    .coach-metrics,
    .fit-metrics,
    .wardrobe-metrics,
    .catalog-audit-metrics,
    .watchlist-metrics,
    .expert-verdict-metrics
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

main :is(.panel, [class$="-panel"], article, form, .section-head, .segmented, .csv-actions) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.upload-zone {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
}

.upload-zone img,
.upload-zone[data-full-image="true"] img,
#photoPreview {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #050608 !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card) {
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) img,
main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card) img {
  width: 84px !important;
  height: 104px !important;
  min-width: 84px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}

main :is(
  .pill-row,
  .item-meta,
  .stock-line,
  .passport-product-tags,
  .catalog-audit-tags,
  .wardrobe-gap-tags,
  .watchlist-signal,
  .community-item-pills
) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

main :is(
  .pill,
  .tag,
  .badge,
  .source-badge,
  .stock-badge,
  .trend-chip,
  .signal-chip,
  .product-chip,
  .mood-chip,
  .passport-product-tags span,
  .catalog-audit-tags span,
  .wardrobe-gap-tags span,
  .watchlist-signal span,
  .community-item-pills span
) {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 28px !important;
  padding: 6px 9px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-overflow: ellipsis !important;
  line-height: 1 !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  right: auto !important;
  bottom: calc(var(--app-stage-bottom) + var(--dock-height) + var(--safe-bottom) + 14px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 62px) !important;
  display: grid !important;
  place-items: center !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  border-radius: 18px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after {
  content: none !important;
  display: none !important;
}

#quickActionButton.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.45 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: none !important;
}

@media (max-width: 370px) {
  #quickActionButton.quick-action-button,
  body[data-theme] #quickActionButton.quick-action-button {
    left: calc(var(--app-rail-left) + var(--app-rail-width) - 58px) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
  main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card) {
    grid-template-columns: 74px minmax(0, 1fr) !important;
  }

  #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) img,
  main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card) img {
    width: 74px !important;
    height: 96px !important;
    min-width: 74px !important;
  }
}

/* v182: calmer fashion themes, closer to the SB metal logo. */
body[data-theme="noir"] {
  --sb-bg: #050505;
  --sb-rail: #0c0c0b;
  --sb-panel: #151514;
  --sb-ink: #f6f0e6;
  --sb-soft: #d8d0c4;
  --sb-muted: #9f978c;
  --sb-line: rgba(246, 240, 230, 0.15);
  --sb-line-strong: rgba(246, 240, 230, 0.28);
  --sb-mint: #d2b565;
  --sb-signal: #e33d68;
  --sb-signal-dark: #6d172c;
  --sb-page-bg:
    linear-gradient(110deg, rgba(210, 181, 101, 0.08), transparent 34%),
    linear-gradient(250deg, rgba(120, 124, 130, 0.12), transparent 42%),
    linear-gradient(180deg, #060606 0%, #020202 100%);
  --sb-frame-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    linear-gradient(135deg, rgba(210, 181, 101, 0.09), transparent 42%),
    #050505;
  --sb-view-bg:
    linear-gradient(180deg, rgba(210, 181, 101, 0.045), transparent 34%),
    #070707;
  --sb-chrome-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    #0d0d0c;
  --sb-card-bg:
    linear-gradient(180deg, rgba(246, 240, 230, 0.058), rgba(246, 240, 230, 0.014)),
    #151514;
  --sb-theme-swatch: linear-gradient(90deg, #f6f0e6, #d2b565 54%, #e33d68);
  --sb-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 34px 110px rgba(0, 0, 0, 0.72);
  --sb-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 42px rgba(0, 0, 0, 0.32);
}

body[data-theme="editorial"] {
  --sb-bg: #f7f3eb;
  --sb-rail: #ebe4d8;
  --sb-panel: #fffaf1;
  --sb-ink: #121211;
  --sb-soft: #403a33;
  --sb-muted: #756b60;
  --sb-line: rgba(18, 18, 17, 0.14);
  --sb-line-strong: rgba(18, 18, 17, 0.24);
  --sb-mint: #9f7a2d;
  --sb-signal: #8f2438;
  --sb-signal-dark: #541522;
  --sb-page-bg:
    linear-gradient(115deg, rgba(159, 122, 45, 0.13), transparent 42%),
    linear-gradient(245deg, rgba(143, 36, 56, 0.09), transparent 42%),
    linear-gradient(180deg, #f7f3eb 0%, #e8dfd0 100%);
  --sb-frame-bg:
    linear-gradient(180deg, rgba(18, 18, 17, 0.035), transparent 44%),
    #faf6ed;
  --sb-view-bg:
    linear-gradient(180deg, rgba(159, 122, 45, 0.055), transparent 34%),
    #f7f3eb;
  --sb-chrome-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(235, 228, 216, 0.9)),
    #fffaf1;
  --sb-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(242, 236, 226, 0.88)),
    #fffaf1;
  --sb-theme-swatch: linear-gradient(90deg, #121211, #9f7a2d 52%, #8f2438);
  --sb-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 32px 90px rgba(54, 42, 30, 0.18);
  --sb-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 34px rgba(54, 42, 30, 0.1);
  color-scheme: light;
}

body[data-theme="runway"] {
  --sb-bg: #080608;
  --sb-rail: #121012;
  --sb-panel: #1b171a;
  --sb-ink: #f7eee9;
  --sb-soft: #d7c6bd;
  --sb-muted: #9c8980;
  --sb-line: rgba(247, 238, 233, 0.15);
  --sb-line-strong: rgba(247, 238, 233, 0.28);
  --sb-mint: #c9cdd1;
  --sb-signal: #bd2b55;
  --sb-signal-dark: #5a1028;
  --sb-page-bg:
    linear-gradient(112deg, rgba(201, 205, 209, 0.1), transparent 36%),
    linear-gradient(250deg, rgba(189, 43, 85, 0.16), transparent 42%),
    linear-gradient(180deg, #090709 0%, #020202 100%);
  --sb-frame-bg:
    linear-gradient(180deg, rgba(247, 238, 233, 0.06), rgba(247, 238, 233, 0.018)),
    linear-gradient(135deg, rgba(189, 43, 85, 0.08), transparent 44%),
    #080608;
  --sb-view-bg:
    linear-gradient(180deg, rgba(189, 43, 85, 0.08), transparent 34%),
    #0b090b;
  --sb-chrome-bg:
    linear-gradient(180deg, rgba(247, 238, 233, 0.07), rgba(189, 43, 85, 0.025)),
    #121012;
  --sb-card-bg:
    linear-gradient(180deg, rgba(247, 238, 233, 0.062), rgba(189, 43, 85, 0.016)),
    #1b171a;
  --sb-theme-swatch: linear-gradient(90deg, #c9cdd1, #f7eee9 45%, #bd2b55);
  --sb-frame-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 34px 110px rgba(0, 0, 0, 0.66);
  --sb-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 18px 42px rgba(0, 0, 0, 0.42);
}

/* v186: topbar alignment. Fixed native toolbar: locked logo, view title, search, language, currency. */
.topbar,
body[data-theme] .topbar {
  display: grid !important;
  grid-template-columns: 60px minmax(0, 1fr) 40px 116px !important;
  align-items: center !important;
  column-gap: 6px !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  margin: 0 auto !important;
  padding: 8px 8px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.topbar-actions,
.app-status,
.theme-switch {
  display: none !important;
}

.brand,
body[data-theme] .brand {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 44px !important;
  margin: 0 !important;
  overflow: visible !important;
}

.brand-logo,
.brand-logo-lock,
body[data-theme] .brand-logo,
body[data-theme] .brand-logo-lock {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 42px !important;
  max-height: 42px !important;
  aspect-ratio: 692 / 544 !important;
  object-fit: contain !important;
  object-position: left center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  outline: 0 !important;
  clip-path: none !important;
  transform: none !important;
}

.brand > span,
.brand small,
.brand-mark {
  display: none !important;
}

.active-view-chip,
body[data-theme] .active-view-chip {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 40px !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 1px solid color-mix(in srgb, var(--sb-mint) 34%, transparent) !important;
  padding: 0 0 0 8px !important;
  overflow: hidden !important;
  color: var(--sb-ink) !important;
  font-size: 0.86rem !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.command-button,
body[data-theme] .command-button {
  grid-column: 3 !important;
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  padding: 0 !important;
}

.command-button-icon,
.command-button svg,
body[data-theme] .command-button-icon,
body[data-theme] .command-button svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
}

.command-button-label {
  display: none !important;
}

.topbar-switches,
body[data-theme] .topbar-switches {
  grid-column: 4 !important;
  display: grid !important;
  grid-template-columns: 52px 58px !important;
  align-items: center !important;
  width: 116px !important;
  min-width: 116px !important;
  max-width: 116px !important;
  gap: 6px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.locale-switch,
.market-switch,
body[data-theme] .locale-switch,
body[data-theme] .market-switch {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.locale-switch span,
.market-switch span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.locale-switch select,
.market-switch select,
body[data-theme] .locale-switch select,
body[data-theme] .market-switch select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  padding: 0 16px 0 6px !important;
  overflow: hidden !important;
  color: var(--sb-ink) !important;
  font-size: 0.68rem !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-align-last: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
}

.locale-switch::after,
.market-switch::after,
body[data-theme] .locale-switch::after,
body[data-theme] .market-switch::after {
  content: "" !important;
  position: absolute !important;
  top: calc(50% - 4px) !important;
  right: 7px !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 1.5px solid color-mix(in srgb, var(--sb-mint) 72%, var(--sb-ink) 12%) !important;
  border-bottom: 1.5px solid color-mix(in srgb, var(--sb-mint) 72%, var(--sb-ink) 12%) !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
}

@media (max-width: 370px) {
  .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 50px minmax(0, 1fr) 36px 104px !important;
    column-gap: 4px !important;
    padding-right: 7px !important;
    padding-left: 7px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 38px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: auto !important;
    height: 36px !important;
    max-height: 36px !important;
  }

  .command-button,
  body[data-theme] .command-button {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 13px !important;
  }

  .topbar-switches,
  body[data-theme] .topbar-switches {
    grid-template-columns: 48px 52px !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    gap: 4px !important;
  }

  .locale-switch,
  .market-switch,
  .locale-switch select,
  .market-switch select,
  body[data-theme] .locale-switch,
  body[data-theme] .market-switch,
  body[data-theme] .locale-switch select,
  body[data-theme] .market-switch select {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 13px !important;
  }
}

.brand-logo-lock,
body[data-theme] .brand-logo-lock {
  flex: 0 0 auto !important;
  object-fit: contain !important;
  object-position: left center !important;
  -webkit-user-drag: none !important;
}

/* v187: header spacing guard. The SB mark keeps its own lane; text and controls cannot collide with it. */
.topbar,
body[data-theme] .topbar {
  grid-template-columns: 64px minmax(0, 1fr) 40px 116px !important;
  column-gap: 6px !important;
  overflow: hidden !important;
}

.brand,
body[data-theme] .brand {
  position: relative !important;
  z-index: 2 !important;
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

.brand-logo-lock,
body[data-theme] .brand-logo-lock {
  height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
}

.active-view-chip,
body[data-theme] .active-view-chip {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  padding-left: 10px !important;
}

.command-button,
body[data-theme] .command-button,
.topbar-switches,
body[data-theme] .topbar-switches {
  justify-self: stretch !important;
}

@media (max-width: 370px) {
  .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 54px minmax(0, 1fr) 36px 104px !important;
    column-gap: 4px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }

  .brand-logo-lock,
  body[data-theme] .brand-logo-lock {
    height: 36px !important;
    max-height: 36px !important;
  }
}

/* v188: viewport anchor. Active screens start directly under the toolbar and never float mid-page. */
:root {
  --app-stage-height: calc(100dvh - var(--app-stage-top) - var(--app-stage-bottom)) !important;
}

@media (max-width: 719px) {
  :root {
    --app-stage-height: 100dvh !important;
  }
}

main {
  position: fixed !important;
  top: calc(var(--app-stage-top) + var(--topbar-height) + var(--safe-top)) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: calc(var(--app-stage-height) - var(--topbar-height) - var(--dock-height) - var(--safe-top) - var(--safe-bottom)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

main > .studio-band,
main > .content-band,
main > .business-band {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  display: block !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 10px calc(var(--dock-height) + 24px) !important;
  transform: translateX(-50%) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-padding-top: 10px !important;
  scroll-padding-bottom: calc(var(--dock-height) + 28px) !important;
  box-sizing: border-box !important;
}

main > .studio-band[hidden],
main > .content-band[hidden],
main > .business-band[hidden],
main > :not(.active-view) {
  display: none !important;
}

main > .active-view {
  top: 0 !important;
  bottom: 0 !important;
  display: block !important;
  min-height: 0 !important;
  transform: translateX(-50%) !important;
}

main > .active-view > :first-child {
  margin-top: 0 !important;
}

main :is(
  .studio-grid,
  .passport-layout,
  .coach-layout,
  .fit-layout,
  .planner-layout,
  .capsule-layout,
  .discover-layout,
  .brain-layout,
  .inventory-layout,
  .lookbook-layout,
  .clients-layout,
  .report-layout,
  .history-layout,
  .trend-lab,
  .community-grid,
  .wardrobe-map,
  .watchlist-list,
  .catalog-audit-list
) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  justify-content: start !important;
  place-content: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  gap: 12px !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

#studio.studio-band.active-view,
body[data-theme] #studio.studio-band.active-view {
  display: block !important;
  min-height: 0 !important;
}

#studio .studio-grid {
  min-height: 0 !important;
}

#studio .photo-panel {
  display: grid !important;
  grid-template-rows: auto auto auto auto auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#studio .upload-zone,
.upload-zone {
  height: clamp(300px, 46dvh, 430px) !important;
  min-height: 300px !important;
  max-height: 430px !important;
}

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  font-size: 0 !important;
  line-height: 0 !important;
}

#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after {
  content: none !important;
  display: none !important;
}

#quickActionButton.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
}

/* v189: readability guard. No pale text, no vertical chips, no fuzzy type. */
html,
body,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

main :is(h1, h2, h3, h4, p, span, strong, small, label, button, a, input, select, textarea) {
  letter-spacing: 0 !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased !important;
}

body[data-theme] main :is(.panel, [class$="-panel"], article, form, .section-head, .item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
  color: var(--sb-ink) !important;
}

body[data-theme="editorial"] main :is(.panel, [class$="-panel"], article, form, .section-head, .item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 244, 241, 0.9)),
    #ffffff !important;
  color: #101418 !important;
}

body[data-theme="editorial"] main :is(h1, h2, h3, h4, strong, .price, .item-card h3, .wardrobe-gap-card strong, .catalog-audit-row strong, .watchlist-row strong) {
  color: #101418 !important;
}

body[data-theme="editorial"] main :is(p, span, small, label, .status-line, .meta-line, .hint-line, .item-card p, .item-card span, .wardrobe-gap-card span, .catalog-audit-row span, .watchlist-row span) {
  color: #384047 !important;
}

body[data-theme="editorial"] main :is(.eyebrow, .panel-head .eyebrow, .section-head .eyebrow) {
  color: #205f72 !important;
}

#inventory .inventory-grid,
#inventory .wardrobe-gaps,
#inventory .catalog-audit-list,
#inventory .watchlist-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card) {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: start !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) img,
main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card) img {
  width: 92px !important;
  min-width: 92px !important;
  height: 118px !important;
  min-height: 118px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}

#inventory :is(.item-body, .watchlist-body),
#inventory .wardrobe-gap-card > div,
#inventory .catalog-audit-row > div,
main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card) > div {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#inventory .item-card h3,
#inventory .wardrobe-gap-card strong,
#inventory .catalog-audit-row-head strong,
#inventory .watchlist-row-head strong {
  display: -webkit-box !important;
  max-width: 100% !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1.12 !important;
}

main :is(
  .pill-row,
  .item-meta,
  .stock-line,
  .passport-product-tags,
  .catalog-audit-tags,
  .wardrobe-gap-tags,
  .watchlist-signal,
  .community-item-pills
) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

main :is(
  .pill,
  .tag,
  .badge,
  .source-badge,
  .stock-badge,
  .trend-chip,
  .signal-chip,
  .product-chip,
  .mood-chip,
  .brand-pill,
  .passport-product-tags span,
  .catalog-audit-tags span,
  .wardrobe-gap-tags span,
  .watchlist-signal span,
  .community-item-pills span
) {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(100%, 16ch) !important;
  min-height: 28px !important;
  padding: 6px 9px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  line-height: 1 !important;
}

#inventory .brand-pill {
  justify-self: start !important;
  max-width: 100% !important;
}

#inventory .price {
  flex: 0 0 auto !important;
  color: var(--sb-ink) !important;
  white-space: nowrap !important;
}

body[data-theme] main :is(button, .primary-button, .ghost-button, .product-link, .mini-product-link, .watch-button, .segmented button) {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 370px) {
  #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
  main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card) {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 9px !important;
  }

  #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) img,
  main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card) img {
    width: 78px !important;
    min-width: 78px !important;
    height: 104px !important;
    min-height: 104px !important;
  }

  main :is(
    .pill,
    .tag,
    .badge,
    .source-badge,
    .stock-badge,
    .trend-chip,
    .signal-chip,
    .product-chip,
    .mood-chip,
    .brand-pill,
    .passport-product-tags span,
    .catalog-audit-tags span,
    .wardrobe-gap-tags span,
    .watchlist-signal span,
    .community-item-pills span
  ) {
    max-width: min(100%, 13ch) !important;
    min-height: 26px !important;
    padding: 5px 8px !important;
  }
}

/* v190: in-app theme switcher, kept out of the crowded top bar. */
.quick-theme-picker,
body[data-theme] .quick-theme-picker {
  display: grid !important;
  gap: 8px !important;
  margin: 12px 0 14px !important;
  padding: 12px !important;
  border: 1px solid color-mix(in srgb, var(--sb-line-strong, rgba(255,255,255,0.22)) 72%, transparent) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-ink, #fff) 6%, transparent), transparent),
    color-mix(in srgb, var(--sb-rail, #101010) 92%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sb-ink, #fff) 7%, transparent) !important;
}

.quick-theme-picker > span,
body[data-theme] .quick-theme-picker > span {
  color: var(--sb-muted, rgba(255,255,255,0.58)) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.quick-theme-options,
body[data-theme] .quick-theme-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.quick-theme-options button,
body[data-theme] .quick-theme-options button {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 9px 10px !important;
  border: 1px solid color-mix(in srgb, var(--sb-line, rgba(255,255,255,0.16)) 82%, transparent) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-ink, #fff) 5%, transparent), transparent),
    color-mix(in srgb, var(--sb-bg, #050505) 78%, var(--sb-panel, #171717) 22%) !important;
  color: var(--sb-soft, rgba(255,255,255,0.78)) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.quick-theme-options button.active,
body[data-theme] .quick-theme-options button.active {
  border-color: color-mix(in srgb, var(--sb-signal, #ff3b72) 72%, var(--sb-ink, #fff) 14%) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-signal, #ff3b72) 18%, transparent), transparent 58%),
    color-mix(in srgb, var(--sb-panel, #171717) 86%, var(--sb-signal, #ff3b72) 14%) !important;
  color: var(--sb-ink, #fff) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--sb-ink, #fff) 7%, transparent),
    0 10px 24px color-mix(in srgb, var(--sb-signal, #ff3b72) 18%, transparent) !important;
}

.quick-theme-options i,
body[data-theme] .quick-theme-options i {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 1px solid color-mix(in srgb, var(--sb-ink, #fff) 18%, transparent) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

.quick-theme-options span,
body[data-theme] .quick-theme-options span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

[data-theme-choice="noir"] i {
  background: linear-gradient(135deg, #f5f2ec 0 34%, #d6b861 35% 66%, #fb3b72 67% 100%) !important;
}

[data-theme-choice="editorial"] i {
  background: linear-gradient(135deg, #101418 0 34%, #f6f7f3 35% 66%, #205f72 67% 100%) !important;
}

[data-theme-choice="runway"] i {
  background: linear-gradient(135deg, #5beaff 0 32%, #7d5cff 33% 64%, #ff2f86 65% 100%) !important;
}

body[data-theme="editorial"] .quick-theme-picker {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(231,239,235,0.82)),
    #ffffff !important;
}

body[data-theme="editorial"] .quick-theme-options button {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(236,243,239,0.84)),
    #ffffff !important;
  color: #20262c !important;
}

body[data-theme="editorial"] .quick-theme-options button.active {
  background:
    linear-gradient(180deg, rgba(32,95,114,0.16), rgba(197,45,88,0.08)),
    #ffffff !important;
  color: #101418 !important;
}

@media (max-width: 370px) {
  .quick-theme-picker,
  body[data-theme] .quick-theme-picker {
    padding: 10px !important;
  }

  .quick-theme-options {
    gap: 5px !important;
  }

  .quick-theme-options button,
  body[data-theme] .quick-theme-options button {
    grid-template-columns: 16px minmax(0, 1fr) !important;
    gap: 5px !important;
    min-height: 38px !important;
    padding: 8px 7px !important;
  }

  .quick-theme-options i,
  body[data-theme] .quick-theme-options i {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
  }

  .quick-theme-options span,
  body[data-theme] .quick-theme-options span {
    font-size: 0.7rem !important;
  }
}

/* v192: expert knowledge pack + hard app-rail readability guard. */
:root {
  --dock-height: 92px !important;
}

main {
  top: calc(var(--app-stage-top) + var(--topbar-height) + var(--safe-top)) !important;
  bottom: auto !important;
  height: calc(var(--app-stage-height) - var(--topbar-height) - var(--dock-height) - var(--safe-top) - var(--safe-bottom)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

main > .studio-band,
main > .content-band,
main > .business-band {
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 12px 10px calc(var(--dock-height) + 42px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-padding-top: 12px !important;
  scroll-padding-bottom: calc(var(--dock-height) + 52px) !important;
}

main > .active-view,
main > .active-view > :first-child {
  margin-top: 0 !important;
  transform: translateX(-50%) !important;
}

.topbar,
body[data-theme] .topbar {
  grid-template-columns: 70px minmax(0, 1fr) 42px 112px !important;
  align-items: center !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
}

.brand,
body[data-theme] .brand {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  overflow: hidden !important;
}

.brand-logo-lock,
body[data-theme] .brand-logo-lock {
  width: 58px !important;
  height: 40px !important;
  max-width: 58px !important;
  max-height: 40px !important;
  object-fit: contain !important;
}

.topbar-switches,
body[data-theme] .topbar-switches {
  grid-template-columns: 52px 56px !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  gap: 4px !important;
}

.command-button,
.locale-switch select,
.market-switch select,
body[data-theme] .command-button,
body[data-theme] .locale-switch select,
body[data-theme] .market-switch select {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 16px !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  bottom: calc(var(--app-stage-bottom) + var(--dock-height) + var(--safe-bottom) + 14px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 62px) !important;
  display: grid !important;
  place-items: center !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after {
  content: none !important;
  display: none !important;
}

#quickActionButton.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: none !important;
  transform: none !important;
}

#quickActionButton.quick-action-button svg path,
body[data-theme] #quickActionButton.quick-action-button svg path {
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
}

#studio .upload-zone,
.upload-zone {
  height: clamp(300px, 44dvh, 460px) !important;
  min-height: 300px !important;
  max-height: 460px !important;
  overflow: hidden !important;
}

.expert-pack-panel,
body[data-theme] .expert-pack-panel {
  border-color: rgba(255, 54, 95, 0.22) !important;
  background:
    linear-gradient(135deg, rgba(255, 54, 95, 0.12), rgba(185, 247, 228, 0.055) 48%, rgba(244, 240, 232, 0.025)),
    #0b0e12 !important;
}

.expert-pack-metrics,
body[data-theme] .expert-pack-metrics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.expert-pack-metrics div,
body[data-theme] .expert-pack-metrics div {
  min-width: 0 !important;
  border: 1px solid rgba(244, 240, 232, 0.12) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.065), rgba(244, 240, 232, 0.018)),
    #080a0d !important;
  padding: 10px !important;
}

.expert-pack-metrics div:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
}

.expert-pack-metrics strong,
.expert-pack-metrics span,
body[data-theme] .expert-pack-metrics strong,
body[data-theme] .expert-pack-metrics span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.expert-pack-metrics strong,
body[data-theme] .expert-pack-metrics strong {
  color: var(--sb-ink, #f4f0e8) !important;
  font-size: 1rem !important;
  line-height: 1.05 !important;
}

.expert-pack-metrics span,
body[data-theme] .expert-pack-metrics span {
  margin-top: 4px !important;
  color: var(--sb-muted, #9f9a94) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
}

.expert-pack-coverage,
body[data-theme] .expert-pack-coverage {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.expert-pack-coverage > span,
body[data-theme] .expert-pack-coverage > span {
  color: var(--sb-mint, #b9f7e4) !important;
  font-size: 0.66rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.expert-pack-coverage > div,
body[data-theme] .expert-pack-coverage > div {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.expert-pack-coverage em,
body[data-theme] .expert-pack-coverage em {
  display: inline-flex !important;
  max-width: min(100%, 18ch) !important;
  min-width: 0 !important;
  min-height: 28px !important;
  align-items: center !important;
  border: 1px solid rgba(185, 247, 228, 0.2) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(185, 247, 228, 0.12), rgba(244, 240, 232, 0.02)),
    #0d1115 !important;
  color: var(--sb-soft, #d9d4cb) !important;
  padding: 6px 9px !important;
  font-size: 0.68rem !important;
  font-style: normal !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#expertPackPolicy,
body[data-theme] #expertPackPolicy {
  border-left: 2px solid rgba(255, 54, 95, 0.62) !important;
  background: rgba(5, 6, 8, 0.42) !important;
  color: rgba(244, 240, 232, 0.78) !important;
  padding: 9px 10px !important;
  font-size: 0.74rem !important;
  line-height: 1.36 !important;
}

main :is(
  .reasons-list p,
  .passport-reasons p,
  .planner-reasons p,
  .discover-reasons p,
  .expert-critique-grid article,
  .expert-verdict-metrics article,
  .expert-next-move,
  .repair-metrics div,
  .repair-card
),
body[data-theme] main :is(
  .reasons-list p,
  .passport-reasons p,
  .planner-reasons p,
  .discover-reasons p,
  .expert-critique-grid article,
  .expert-verdict-metrics article,
  .expert-next-move,
  .repair-metrics div,
  .repair-card
) {
  border-color: rgba(244, 240, 232, 0.13) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.06), rgba(244, 240, 232, 0.015)),
    #0c1014 !important;
  color: rgba(244, 240, 232, 0.82) !important;
  text-shadow: none !important;
}

main :is(
  .reasons-list p,
  .passport-reasons p,
  .planner-reasons p,
  .discover-reasons p,
  .expert-critique-grid article p,
  .expert-verdict-body p,
  .expert-next-move,
  .repair-card p
),
body[data-theme] main :is(
  .reasons-list p,
  .passport-reasons p,
  .planner-reasons p,
  .discover-reasons p,
  .expert-critique-grid article p,
  .expert-verdict-body p,
  .expert-next-move,
  .repair-card p
) {
  color: rgba(244, 240, 232, 0.78) !important;
  font-weight: 520 !important;
  line-height: 1.38 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 370px) {
  .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 58px minmax(0, 1fr) 38px 104px !important;
    column-gap: 4px !important;
    padding-inline: 8px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }

  .brand-logo-lock,
  body[data-theme] .brand-logo-lock {
    width: 50px !important;
    height: 34px !important;
    max-width: 50px !important;
    max-height: 34px !important;
  }

  .topbar-switches,
  body[data-theme] .topbar-switches {
    grid-template-columns: 48px 52px !important;
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
  }

  .expert-pack-metrics {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .expert-pack-metrics div:last-child:nth-child(odd) {
    grid-column: auto !important;
  }
}

/* v193: Chrome fashion skin and full-height Studio screen. */
body[data-theme="chrome"] {
  --sb-bg: #061012;
  --sb-rail: #0a1114;
  --sb-panel: #10181c;
  --sb-ink: #f3f7f6;
  --sb-soft: #c9d3d0;
  --sb-muted: #81908d;
  --sb-line: rgba(229, 238, 235, 0.15);
  --sb-line-strong: rgba(229, 238, 235, 0.28);
  --sb-mint: #78f0dd;
  --sb-signal: #ff3f72;
  --sb-signal-dark: #7b1935;
  --sb-page-bg:
    linear-gradient(118deg, rgba(120, 240, 221, 0.13), transparent 34%),
    linear-gradient(250deg, rgba(255, 63, 114, 0.16), transparent 42%),
    linear-gradient(180deg, #061012 0%, #010304 100%);
  --sb-frame-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    radial-gradient(ellipse at 50% 0%, rgba(120, 240, 221, 0.11), transparent 42%),
    #061012;
  --sb-view-bg:
    linear-gradient(180deg, rgba(120, 240, 221, 0.055), transparent 36%),
    #061012;
  --sb-chrome-bg:
    linear-gradient(180deg, rgba(243, 247, 246, 0.09), rgba(243, 247, 246, 0.024)),
    #0a1114;
  --sb-card-bg:
    linear-gradient(180deg, rgba(243, 247, 246, 0.07), rgba(243, 247, 246, 0.018)),
    #10181c;
  --sb-theme-swatch: linear-gradient(90deg, #f3f7f6, #78f0dd 45%, #ff3f72);
  --sb-frame-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 34px 110px rgba(0, 0, 0, 0.72);
  --sb-card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 42px rgba(0, 0, 0, 0.32);
}

body[data-theme="chrome"]::before {
  background: var(--sb-frame-bg) !important;
  box-shadow: var(--sb-frame-shadow) !important;
}

body[data-theme="chrome"] main > .studio-band.active-view,
body[data-theme="chrome"] main > .content-band.active-view,
body[data-theme="chrome"] main > .business-band.active-view {
  background: var(--sb-view-bg) !important;
}

body[data-theme="chrome"] :is(.topbar, .mobile-dock, .quick-action-panel, .command-panel),
body[data-theme="chrome"] main :is(.panel, [class$="-panel"], article, form, .section-head, .item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
  border-color: var(--sb-line) !important;
  background: var(--sb-card-bg) !important;
  color: var(--sb-ink) !important;
  box-shadow: var(--sb-card-shadow) !important;
}

body[data-theme="chrome"] :is(.primary-button, .quick-action-button, .mobile-dock a.active .dock-icon) {
  border-color: rgba(255, 63, 114, 0.46) !important;
  background:
    linear-gradient(180deg, #ff7d9a 0%, #ff3f72 55%, #8d1738 100%) !important;
  color: #fff7fa !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 18px 42px rgba(255, 63, 114, 0.25) !important;
}

.quick-theme-options,
body[data-theme] .quick-theme-options {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

[data-theme-choice="chrome"] i {
  background: linear-gradient(135deg, #f3f7f6 0 32%, #78f0dd 33% 64%, #ff3f72 65% 100%) !important;
}

#studio.studio-band.active-view {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

#studio .studio-grid {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 100% !important;
  gap: 12px !important;
}

#studio .photo-panel {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: calc(100% - 2px) !important;
  flex-direction: column !important;
  gap: 12px !important;
  overflow: visible !important;
}

#studio .photo-panel .panel-head {
  flex: 0 0 auto !important;
}

#studio .upload-zone,
.upload-zone {
  flex: 0 0 auto !important;
  height: clamp(280px, 38dvh, 430px) !important;
  min-height: 280px !important;
  max-height: 430px !important;
}

#studio .score-wrap,
#studio #expertCritique,
#studio .vision-panel,
#studio .repair-panel,
#studio .social-share-panel {
  flex: 0 0 auto !important;
}

main > .studio-band,
main > .content-band,
main > .business-band {
  padding-bottom: calc(var(--dock-height) + 58px) !important;
  scroll-padding-bottom: calc(var(--dock-height) + 68px) !important;
}

.mobile-dock,
body[data-theme] .mobile-dock {
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
}

.active-view-chip,
body[data-theme] .active-view-chip {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 380px) {
  .quick-theme-options,
  body[data-theme] .quick-theme-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #studio .upload-zone,
  .upload-zone {
    height: clamp(250px, 36dvh, 380px) !important;
    min-height: 250px !important;
  }
}

/* v194: final app-shell reset. Keep the product on one native rail, never clipped or centered into dead space. */
:root {
  --app-rail-width: min(430px, calc(100vw - 14px)) !important;
  --app-rail-left: max(7px, calc((100vw - min(430px, calc(100vw - 14px))) / 2)) !important;
  --app-stage-top: 0px !important;
  --app-stage-bottom: 0px !important;
  --app-stage-height: 100dvh !important;
  --topbar-height: 64px !important;
  --dock-height: 92px !important;
}

html,
body {
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  background: #020303 !important;
}

body::before {
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: var(--app-rail-width) !important;
  height: 100dvh !important;
  max-width: var(--app-rail-width) !important;
  transform: translateX(-50%) !important;
}

.app-shell {
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  pointer-events: none !important;
}

.topbar,
body[data-theme] .topbar {
  display: grid !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-height: var(--topbar-height) !important;
  height: var(--topbar-height) !important;
  grid-template-columns: 96px minmax(0, 1fr) 42px 114px !important;
  gap: 7px !important;
  align-items: center !important;
  margin: 0 auto !important;
  padding: 8px 10px !important;
  border-radius: 0 0 18px 18px !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

.brand,
body[data-theme] .brand {
  display: flex !important;
  width: 96px !important;
  min-width: 0 !important;
  max-width: 96px !important;
  height: 44px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.brand span,
.brand small,
body[data-theme] .brand span,
body[data-theme] .brand small {
  display: none !important;
}

.brand-logo-lock,
body[data-theme] .brand-logo-lock {
  display: block !important;
  width: 88px !important;
  height: 42px !important;
  max-width: 88px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.active-view-chip,
body[data-theme] .active-view-chip {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(239, 204, 113, 0.32) !important;
  color: var(--sb-ink, #f7f4ed) !important;
  font-size: 0.88rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.topbar-actions,
.app-status,
.theme-switch,
.command-button-label,
body[data-theme] .topbar-actions,
body[data-theme] .app-status,
body[data-theme] .theme-switch,
body[data-theme] .command-button-label {
  display: none !important;
}

.command-button,
body[data-theme] .command-button {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 15px !important;
}

.topbar-switches,
body[data-theme] .topbar-switches {
  display: grid !important;
  width: 114px !important;
  min-width: 114px !important;
  max-width: 114px !important;
  grid-template-columns: 52px 56px !important;
  gap: 6px !important;
  align-items: center !important;
}

.locale-switch,
.market-switch,
body[data-theme] .locale-switch,
body[data-theme] .market-switch {
  display: block !important;
  min-width: 0 !important;
}

.locale-switch span,
.market-switch span,
body[data-theme] .locale-switch span,
body[data-theme] .market-switch span {
  display: none !important;
}

.locale-switch select,
.market-switch select,
body[data-theme] .locale-switch select,
body[data-theme] .market-switch select {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 10px !important;
  border-radius: 15px !important;
  text-align: center !important;
  font-size: 0.78rem !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
  line-height: 42px !important;
}

main {
  position: fixed !important;
  top: calc(var(--topbar-height) + var(--safe-top, 0px)) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: calc(100dvh - var(--topbar-height) - var(--dock-height) - var(--safe-top, 0px) - var(--safe-bottom, 0px)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

main > .studio-band,
main > .content-band,
main > .business-band {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 10px calc(var(--dock-height) + 52px) !important;
  transform: translateX(-50%) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-padding-top: 12px !important;
  scroll-padding-bottom: calc(var(--dock-height) + 58px) !important;
  box-sizing: border-box !important;
}

main > :not(.active-view),
main > .studio-band[hidden],
main > .content-band[hidden],
main > .business-band[hidden] {
  display: none !important;
}

main > .active-view {
  display: block !important;
}

main :is(
  .studio-grid,
  .passport-layout,
  .coach-layout,
  .fit-layout,
  .planner-layout,
  .capsule-layout,
  .discover-layout,
  .brain-layout,
  .inventory-layout,
  .lookbook-layout,
  .clients-layout,
  .report-layout,
  .history-layout,
  .trend-lab,
  .community-grid
),
body[data-theme] main :is(
  .studio-grid,
  .passport-layout,
  .coach-layout,
  .fit-layout,
  .planner-layout,
  .capsule-layout,
  .discover-layout,
  .brain-layout,
  .inventory-layout,
  .lookbook-layout,
  .clients-layout,
  .report-layout,
  .history-layout,
  .trend-lab,
  .community-grid
) {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  overflow: visible !important;
}

main :is(.panel, [class$="-panel"], .section-head, article, form, .segmented, .csv-actions),
body[data-theme] main :is(.panel, [class$="-panel"], .section-head, article, form, .segmented, .csv-actions) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#studio .photo-panel,
body[data-theme] #studio .photo-panel {
  min-height: 0 !important;
  overflow: visible !important;
}

#studio .upload-zone,
.upload-zone,
body[data-theme] #studio .upload-zone,
body[data-theme] .upload-zone {
  width: 100% !important;
  height: clamp(300px, 46dvh, 460px) !important;
  min-height: 300px !important;
  max-height: 460px !important;
  overflow: hidden !important;
}

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.mobile-dock,
body[data-theme] .mobile-dock {
  right: 0 !important;
  bottom: var(--safe-bottom, 0px) !important;
  left: 0 !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
  margin: 0 auto !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px) + 12px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 62px) !important;
  display: grid !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 18px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after {
  content: none !important;
  display: none !important;
}

#quickActionButton.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.65 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: none !important;
}

#quickActionButton.quick-action-button svg path,
body[data-theme] #quickActionButton.quick-action-button svg path {
  fill: none !important;
  stroke: currentColor !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card),
body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
body[data-theme] main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card) {
  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  overflow: hidden !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) img,
main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card) img {
  width: 86px !important;
  height: 108px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  object-fit: cover !important;
}

main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills),
body[data-theme] main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills) {
  display: flex !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 6px !important;
  overflow: visible !important;
}

main :is(.pill, .tag, .badge, .source-badge, .stock-badge, .trend-chip, .signal-chip, .product-chip, .mood-chip, .passport-product-tags span, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span, .community-item-pills span),
body[data-theme] main :is(.pill, .tag, .badge, .source-badge, .stock-badge, .trend-chip, .signal-chip, .product-chip, .mood-chip, .passport-product-tags span, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span, .community-item-pills span) {
  display: inline-flex !important;
  width: auto !important;
  max-width: min(100%, 18ch) !important;
  min-width: 0 !important;
  min-height: 28px !important;
  align-items: center !important;
  padding: 6px 9px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-overflow: ellipsis !important;
  line-height: 1 !important;
}

@media (max-width: 380px) {
  .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 82px minmax(0, 1fr) 40px 106px !important;
    gap: 5px !important;
    padding-inline: 8px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 82px !important;
    max-width: 82px !important;
  }

  .brand-logo-lock,
  body[data-theme] .brand-logo-lock {
    width: 76px !important;
    max-width: 76px !important;
  }

  .topbar-switches,
  body[data-theme] .topbar-switches {
    width: 106px !important;
    min-width: 106px !important;
    max-width: 106px !important;
    grid-template-columns: 48px 52px !important;
  }

  .locale-switch select,
  .market-switch select,
  body[data-theme] .locale-switch select,
  body[data-theme] .market-switch select {
    padding-inline: 7px !important;
    font-size: 0.72rem !important;
  }

  #quickActionButton.quick-action-button,
  body[data-theme] #quickActionButton.quick-action-button {
    left: calc(var(--app-rail-left) + var(--app-rail-width) - 58px) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
  main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card),
  body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
  body[data-theme] main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card) {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) img,
  main :is(.passport-product-card, .coach-item-card, .fit-recommendation-card) img {
    width: 74px !important;
    height: 96px !important;
    min-width: 74px !important;
    max-width: 74px !important;
  }
}

/* v195: theme studio. Four distinct fashion materials, one readable mobile app system. */
body[data-theme="chrome"] {
  --sb-bg: #eef2ef;
  --sb-rail: #0d1012;
  --sb-rail-ink: #f7f5ef;
  --sb-panel: #f7f9f6;
  --sb-card: #ffffff;
  --sb-card-2: #e7ece8;
  --sb-ink: #111416;
  --sb-soft: #4e5855;
  --sb-muted: #6f7874;
  --sb-line: rgba(17, 20, 22, 0.16);
  --sb-line-strong: rgba(17, 20, 22, 0.28);
  --sb-accent: #c49a35;
  --sb-accent-2: #ef3f76;
  --sb-accent-ink: #fff8f2;
  --sb-chip-bg: rgba(17, 20, 22, 0.075);
  --sb-chip-ink: #20272a;
  --sb-page-bg:
    linear-gradient(120deg, rgba(38, 202, 188, 0.18), transparent 32%),
    linear-gradient(250deg, rgba(239, 63, 118, 0.16), transparent 38%),
    #eef2ef;
  --sb-app-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(232, 238, 234, 0.94)),
    #eef2ef;
  --sb-view-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(232, 238, 234, 0.98)),
    #eef2ef;
  --sb-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 244, 241, 0.96)),
    #f7f9f6;
  --sb-rail-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015)),
    #0d1012;
  --sb-button-bg: linear-gradient(180deg, #ff7a9d 0%, #ef3f76 56%, #9e1d46 100%);
  --sb-theme-swatch: linear-gradient(135deg, #f8faf7 0 32%, #aeb7b2 33% 58%, #ef3f76 59% 100%);
}

body[data-theme="noir"] {
  --sb-bg: #050505;
  --sb-rail: #0a0a0a;
  --sb-rail-ink: #f5f1e7;
  --sb-panel: #111111;
  --sb-card: #171717;
  --sb-card-2: #23201a;
  --sb-ink: #f5f1e7;
  --sb-soft: #d0c8b6;
  --sb-muted: #918a7d;
  --sb-line: rgba(230, 202, 122, 0.18);
  --sb-line-strong: rgba(230, 202, 122, 0.36);
  --sb-accent: #d1a43e;
  --sb-accent-2: #f2d68b;
  --sb-accent-ink: #0b0905;
  --sb-chip-bg: rgba(242, 214, 139, 0.12);
  --sb-chip-ink: #f5f1e7;
  --sb-page-bg:
    radial-gradient(circle at 50% 0%, rgba(209, 164, 62, 0.17), transparent 33%),
    #030303;
  --sb-app-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    #050505;
  --sb-view-bg:
    linear-gradient(180deg, rgba(209, 164, 62, 0.06), transparent 36%),
    #050505;
  --sb-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
    #111111;
  --sb-rail-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.015)),
    #080808;
  --sb-button-bg: linear-gradient(180deg, #f4d982 0%, #c7972b 56%, #6f4a0d 100%);
  --sb-theme-swatch: linear-gradient(135deg, #050505 0 44%, #f5f1e7 45% 62%, #d1a43e 63% 100%);
}

body[data-theme="editorial"] {
  --sb-bg: #f4f0ea;
  --sb-rail: #1c1a18;
  --sb-rail-ink: #fbf7ef;
  --sb-panel: #fbf7ef;
  --sb-card: #ffffff;
  --sb-card-2: #e9e2d8;
  --sb-ink: #1d1b18;
  --sb-soft: #5f5850;
  --sb-muted: #82796d;
  --sb-line: rgba(29, 27, 24, 0.16);
  --sb-line-strong: rgba(29, 27, 24, 0.3);
  --sb-accent: #9a1f3f;
  --sb-accent-2: #146c65;
  --sb-accent-ink: #fff8ef;
  --sb-chip-bg: rgba(154, 31, 63, 0.09);
  --sb-chip-ink: #332722;
  --sb-page-bg:
    linear-gradient(90deg, rgba(20, 108, 101, 0.16), transparent 34%),
    linear-gradient(250deg, rgba(154, 31, 63, 0.14), transparent 39%),
    #f4f0ea;
  --sb-app-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 240, 234, 0.96)),
    #f4f0ea;
  --sb-view-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(244, 240, 234, 0.98)),
    #f4f0ea;
  --sb-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 244, 237, 0.98)),
    #fbf7ef;
  --sb-rail-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)),
    #1c1a18;
  --sb-button-bg: linear-gradient(180deg, #d93e65 0%, #9a1f3f 58%, #521020 100%);
  --sb-theme-swatch: linear-gradient(135deg, #fbf7ef 0 44%, #9a1f3f 45% 68%, #146c65 69% 100%);
}

body[data-theme="runway"] {
  --sb-bg: #190611;
  --sb-rail: #12040c;
  --sb-rail-ink: #fff1f5;
  --sb-panel: #24101a;
  --sb-card: #2b131f;
  --sb-card-2: #3a1528;
  --sb-ink: #fff1f5;
  --sb-soft: #e0bdc8;
  --sb-muted: #b28393;
  --sb-line: rgba(255, 144, 177, 0.2);
  --sb-line-strong: rgba(255, 144, 177, 0.42);
  --sb-accent: #ff4f85;
  --sb-accent-2: #6ff1dc;
  --sb-accent-ink: #fff8fb;
  --sb-chip-bg: rgba(255, 79, 133, 0.13);
  --sb-chip-ink: #fff1f5;
  --sb-page-bg:
    radial-gradient(circle at 62% 4%, rgba(255, 79, 133, 0.24), transparent 31%),
    linear-gradient(180deg, #2b0718 0%, #070206 100%);
  --sb-app-bg:
    linear-gradient(180deg, rgba(255, 79, 133, 0.11), rgba(255, 255, 255, 0.018)),
    #190611;
  --sb-view-bg:
    linear-gradient(180deg, rgba(255, 79, 133, 0.08), transparent 40%),
    #190611;
  --sb-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.016)),
    #24101a;
  --sb-rail-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.014)),
    #12040c;
  --sb-button-bg: linear-gradient(180deg, #ff89aa 0%, #ff4f85 55%, #9d1c4a 100%);
  --sb-theme-swatch: linear-gradient(135deg, #190611 0 42%, #ff4f85 43% 68%, #6ff1dc 69% 100%);
}

body[data-theme] {
  background: var(--sb-page-bg) !important;
  color: var(--sb-ink) !important;
}

body[data-theme]::before {
  background: var(--sb-app-bg) !important;
  box-shadow:
    inset 0 0 0 1px var(--sb-line),
    0 34px 110px rgba(0, 0, 0, 0.38) !important;
}

body[data-theme] main > .studio-band.active-view,
body[data-theme] main > .content-band.active-view,
body[data-theme] main > .business-band.active-view {
  background: var(--sb-view-bg) !important;
  color: var(--sb-ink) !important;
}

body[data-theme] :is(.topbar, .mobile-dock, .quick-action-panel, .command-panel) {
  border-color: var(--sb-line-strong) !important;
  background: var(--sb-rail-bg) !important;
  color: var(--sb-rail-ink) !important;
}

body[data-theme] .topbar :is(.active-view-chip, button, select, span),
body[data-theme] .mobile-dock :is(a, span, .dock-label, .dock-icon),
body[data-theme] .quick-action-panel :is(h2, strong, span, button),
body[data-theme] .command-panel :is(h2, strong, span, button, input) {
  color: var(--sb-rail-ink) !important;
}

body[data-theme] .topbar :is(.command-button, select),
body[data-theme] .mobile-dock a,
body[data-theme] .quick-theme-options button {
  border-color: var(--sb-line-strong) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

body[data-theme] main :is(
  .panel,
  [class$="-panel"],
  .section-head,
  article,
  form,
  .segmented,
  .csv-actions,
  .score-wrap,
  .expert-verdict-card,
  .item-card,
  .wardrobe-gap-card,
  .catalog-audit-row,
  .watchlist-row,
  .reasons-list p,
  .passport-reasons p,
  .planner-reasons p,
  .discover-reasons p,
  .expert-critique-grid article,
  .expert-verdict-metrics article,
  .expert-next-move,
  .repair-card,
  .repair-metrics div
) {
  border-color: var(--sb-line) !important;
  background: var(--sb-card-bg) !important;
  color: var(--sb-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 36px rgba(0, 0, 0, 0.13) !important;
  text-shadow: none !important;
}

body[data-theme] main :is(h1, h2, h3, h4, strong, .price, .score-ring strong, .expert-verdict-score strong) {
  color: var(--sb-ink) !important;
  text-shadow: none !important;
}

body[data-theme] main :is(p, span, small, label, li, em, .status-line, .hint-line, .meta-line, .expert-next-move) {
  color: var(--sb-soft) !important;
  text-shadow: none !important;
}

body[data-theme] main :is(.eyebrow, .panel-head .eyebrow, .section-head .eyebrow, #expertPackVersion) {
  color: var(--sb-accent) !important;
}

body[data-theme] main :is(input, select, textarea) {
  border-color: var(--sb-line) !important;
  background: color-mix(in srgb, var(--sb-card) 86%, var(--sb-bg)) !important;
  color: var(--sb-ink) !important;
}

body[data-theme] main :is(.pill, .tag, .badge, .source-badge, .stock-badge, .trend-chip, .signal-chip, .product-chip, .mood-chip, .passport-product-tags span, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span, .community-item-pills span) {
  border-color: var(--sb-line) !important;
  background: var(--sb-chip-bg) !important;
  color: var(--sb-chip-ink) !important;
}

body[data-theme] :is(.primary-button, .quick-action-button, .mobile-dock a.active .dock-icon, .segmented button.active, .quick-theme-options button.active) {
  border-color: color-mix(in srgb, var(--sb-accent) 70%, white) !important;
  background: var(--sb-button-bg) !important;
  color: var(--sb-accent-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 18px 40px color-mix(in srgb, var(--sb-accent) 28%, transparent) !important;
}

body[data-theme] .mobile-dock a.active .dock-label,
body[data-theme] .mobile-dock a:focus-visible .dock-label {
  color: var(--sb-rail-ink) !important;
}

body[data-theme] .mobile-dock a.active::after,
body[data-theme] .mobile-dock a:focus-visible::after {
  background: linear-gradient(90deg, transparent, var(--sb-accent-2), var(--sb-accent), transparent) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--sb-accent) 42%, transparent) !important;
}

body[data-theme] .quick-action-button svg,
body[data-theme] .quick-action-button svg path {
  stroke: currentColor !important;
}

body[data-theme] .quick-theme-options i {
  background: var(--sb-theme-swatch) !important;
}

[data-theme-choice="noir"] i {
  background: linear-gradient(135deg, #050505 0 44%, #f5f1e7 45% 62%, #d1a43e 63% 100%) !important;
}

[data-theme-choice="chrome"] i {
  background: linear-gradient(135deg, #f8faf7 0 32%, #aeb7b2 33% 58%, #ef3f76 59% 100%) !important;
}

[data-theme-choice="editorial"] i {
  background: linear-gradient(135deg, #fbf7ef 0 44%, #9a1f3f 45% 68%, #146c65 69% 100%) !important;
}

[data-theme-choice="runway"] i {
  background: linear-gradient(135deg, #190611 0 42%, #ff4f85 43% 68%, #6ff1dc 69% 100%) !important;
}

body[data-theme="chrome"] .upload-zone,
body[data-theme="editorial"] .upload-zone {
  background:
    linear-gradient(180deg, rgba(17, 20, 22, 0.06), rgba(17, 20, 22, 0.025)),
    var(--sb-card-2) !important;
}

body[data-theme="chrome"] .score-ring,
body[data-theme="editorial"] .score-ring,
body[data-theme="chrome"] .expert-verdict-score,
body[data-theme="editorial"] .expert-verdict-score {
  background:
    radial-gradient(circle at center, var(--sb-card) 0 56%, transparent 57%),
    conic-gradient(var(--sb-accent) calc(var(--score, 80) * 3.6deg), rgba(17, 20, 22, 0.12) 0) !important;
}

body[data-theme="runway"] .score-ring,
body[data-theme="runway"] .expert-verdict-score,
body[data-theme="noir"] .score-ring,
body[data-theme="noir"] .expert-verdict-score {
  background:
    radial-gradient(circle at center, #090608 0 56%, transparent 57%),
    conic-gradient(var(--sb-accent) calc(var(--score, 80) * 3.6deg), rgba(255, 255, 255, 0.14) 0) !important;
}

/* v196: turn quick actions into an integrated atelier tool, not a floating plus. */
#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  bottom: calc(var(--safe-bottom, 0px) + 23px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 55px) !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 14px !important;
  border-color: var(--sb-line-strong) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
    var(--sb-rail, #0d1012) !important;
  color: var(--sb-rail-ink, #f7f5ef) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.22) !important;
  opacity: 0.96 !important;
}

#quickActionButton.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg {
  width: 19px !important;
  height: 19px !important;
  stroke-width: 2.15 !important;
}

#quickActionButton.quick-action-button svg circle,
body[data-theme] #quickActionButton.quick-action-button svg circle {
  fill: none !important;
  stroke: currentColor !important;
}

.quick-action-sheet:not([hidden]),
body[data-theme] .quick-action-sheet:not([hidden]) {
  align-items: flex-end !important;
  padding: 12px max(10px, calc((100vw - var(--app-rail-width)) / 2 + 10px)) calc(var(--dock-height) + 10px) !important;
  background: rgba(0, 0, 0, 0.48) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
}

.quick-action-panel,
body[data-theme] .quick-action-panel {
  width: 100% !important;
  max-width: var(--app-rail-width) !important;
  max-height: min(72dvh, 640px) !important;
  border-radius: 24px 24px 18px 18px !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
}

.quick-action-head,
body[data-theme] .quick-action-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  margin: -14px -14px 12px !important;
  padding: 14px !important;
  border-bottom: 1px solid var(--sb-line) !important;
  background: var(--sb-rail-bg) !important;
}

.quick-action-head h2,
body[data-theme] .quick-action-head h2 {
  font-size: 1.04rem !important;
  line-height: 1.05 !important;
}

.quick-action-grid,
body[data-theme] .quick-action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.quick-action-grid button,
body[data-theme] .quick-action-grid button {
  min-height: 74px !important;
  align-content: start !important;
  justify-items: start !important;
  border-radius: 16px !important;
  padding: 12px !important;
  text-align: left !important;
  overflow: hidden !important;
}

.quick-action-grid button::before,
body[data-theme] .quick-action-grid button::before {
  width: 22px !important;
  height: 22px !important;
  margin-bottom: 8px !important;
  border-radius: 9px !important;
  background: var(--sb-button-bg) !important;
  box-shadow: none !important;
}

.quick-action-grid strong,
body[data-theme] .quick-action-grid strong {
  max-width: 100% !important;
  font-size: 0.82rem !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}

.quick-action-grid span,
body[data-theme] .quick-action-grid span {
  display: -webkit-box !important;
  max-width: 100% !important;
  margin-top: 4px !important;
  color: var(--sb-soft, rgba(255, 255, 255, 0.72)) !important;
  font-size: 0.68rem !important;
  line-height: 1.18 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

@media (max-width: 380px) {
  #quickActionButton.quick-action-button,
  body[data-theme] #quickActionButton.quick-action-button {
    left: calc(var(--app-rail-left) + var(--app-rail-width) - 51px) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .quick-action-grid,
  body[data-theme] .quick-action-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v197: final native viewport lock. One rail, no vertical centering, no clipped top chrome. */
:root {
  --app-rail-width: min(430px, calc(100vw - 14px)) !important;
  --app-rail-left: max(7px, calc((100vw - min(430px, calc(100vw - 14px))) / 2)) !important;
  --app-stage-top: 0px !important;
  --app-stage-bottom: 0px !important;
  --app-stage-height: 100dvh !important;
  --topbar-height: 64px !important;
  --dock-height: 84px !important;
  --sb-bg: #050608;
  --sb-accent: #c49a35;
  --sb-rail-ink: #f8f4ea;
  --sb-ink: #f8f4ea;
}

html,
body {
  width: 100vw !important;
  height: 100% !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

body {
  margin: 0 !important;
  background:
    radial-gradient(circle at 68% 0%, color-mix(in srgb, var(--sb-accent, #c49a35) 16%, transparent), transparent 30%),
    radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.035), transparent 34%),
    var(--sb-bg, #050608) !important;
}

body::before {
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  display: block !important;
  width: var(--app-rail-width) !important;
  height: 100dvh !important;
  max-width: var(--app-rail-width) !important;
  border-radius: 0 !important;
  transform: translateX(-50%) !important;
}

.app-shell,
body[data-theme] .app-shell {
  position: fixed !important;
  z-index: 90 !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.topbar,
body[data-theme] .topbar {
  position: relative !important;
  display: grid !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  grid-template-columns: 96px minmax(0, 1fr) 42px 114px !important;
  gap: 7px !important;
  align-items: center !important;
  margin: 0 auto !important;
  padding: 8px 10px !important;
  border-radius: 0 0 20px 20px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

.brand,
body[data-theme] .brand {
  display: flex !important;
  width: 96px !important;
  min-width: 0 !important;
  max-width: 96px !important;
  height: 46px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.brand-logo,
.brand-logo-lock,
body[data-theme] .brand-logo,
body[data-theme] .brand-logo-lock {
  display: block !important;
  width: 90px !important;
  height: 44px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.brand span,
.brand small,
body[data-theme] .brand span,
body[data-theme] .brand small {
  display: none !important;
}

.active-view-chip,
body[data-theme] .active-view-chip {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-left: 10px !important;
  border-left: 1px solid color-mix(in srgb, var(--sb-accent, #c49a35) 36%, transparent) !important;
  color: var(--sb-rail-ink, var(--sb-ink)) !important;
  font-size: 0.88rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.command-button,
body[data-theme] .command-button {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 15px !important;
  overflow: hidden !important;
}

.topbar-switches,
body[data-theme] .topbar-switches {
  display: grid !important;
  width: 114px !important;
  min-width: 114px !important;
  max-width: 114px !important;
  grid-template-columns: 52px 56px !important;
  gap: 6px !important;
  align-items: center !important;
  overflow: visible !important;
}

.locale-switch select,
.market-switch select,
body[data-theme] .locale-switch select,
body[data-theme] .market-switch select {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 8px !important;
  border-radius: 15px !important;
  font-size: 0.76rem !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 42px !important;
  text-align: center !important;
}

main,
body[data-theme] main {
  position: fixed !important;
  z-index: 2 !important;
  top: var(--topbar-height) !important;
  right: 0 !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px)) !important;
  left: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  align-content: start !important;
  justify-content: start !important;
  place-content: start !important;
  background: transparent !important;
}

main > .studio-band,
main > .content-band,
main > .business-band,
body[data-theme] main > .studio-band,
body[data-theme] main > .content-band,
body[data-theme] main > .business-band {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px 10px 18px !important;
  transform: translateX(-50%) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-padding-top: 10px !important;
  scroll-padding-bottom: 18px !important;
  box-sizing: border-box !important;
  align-content: start !important;
  justify-content: start !important;
  place-content: start !important;
}

main > .studio-band[hidden],
main > .content-band[hidden],
main > .business-band[hidden],
main > :not(.active-view) {
  display: none !important;
}

main > .active-view,
body[data-theme] main > .active-view {
  display: block !important;
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

main > .active-view > :first-child,
body[data-theme] main > .active-view > :first-child {
  margin-top: 0 !important;
}

main :is(
  .studio-grid,
  .passport-layout,
  .coach-layout,
  .fit-layout,
  .planner-layout,
  .capsule-layout,
  .discover-layout,
  .brain-layout,
  .inventory-layout,
  .lookbook-layout,
  .clients-layout,
  .report-layout,
  .history-layout,
  .trend-lab,
  .community-grid
),
body[data-theme] main :is(
  .studio-grid,
  .passport-layout,
  .coach-layout,
  .fit-layout,
  .planner-layout,
  .capsule-layout,
  .discover-layout,
  .brain-layout,
  .inventory-layout,
  .lookbook-layout,
  .clients-layout,
  .report-layout,
  .history-layout,
  .trend-lab,
  .community-grid
) {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
  align-content: start !important;
  justify-content: flex-start !important;
  place-content: start !important;
  margin: 0 !important;
  overflow: visible !important;
}

.mobile-dock,
body[data-theme] .mobile-dock {
  position: fixed !important;
  z-index: 92 !important;
  right: 0 !important;
  bottom: var(--safe-bottom, 0px) !important;
  left: 0 !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
  margin: 0 auto !important;
  border-radius: 22px 22px 0 0 !important;
  box-sizing: border-box !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  z-index: 94 !important;
  bottom: calc(var(--safe-bottom, 0px) + 23px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 55px) !important;
}

@media (max-width: 380px) {
  .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 80px minmax(0, 1fr) 40px 104px !important;
    gap: 5px !important;
    padding-inline: 8px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 80px !important;
    max-width: 80px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }

  .topbar-switches,
  body[data-theme] .topbar-switches {
    width: 104px !important;
    min-width: 104px !important;
    max-width: 104px !important;
    grid-template-columns: 48px 50px !important;
  }
}

/* v199: StyleBrain Prism identity and readable fashion inventory cards. */
body[data-theme="prism"] {
  --sb-bg: #0a0d16;
  --sb-rail: #10131d;
  --sb-rail-ink: #f9f5ef;
  --sb-panel: #121724;
  --sb-card: #161d2d;
  --sb-card-2: #1e2638;
  --sb-ink: #fff8f2;
  --sb-soft: #d8d2d0;
  --sb-muted: #9fa8b8;
  --sb-line: rgba(255, 255, 255, 0.12);
  --sb-line-strong: rgba(255, 255, 255, 0.24);
  --sb-accent: #ff4d86;
  --sb-accent-2: #54eadc;
  --sb-accent-ink: #fff9fc;
  --sb-chip-bg: rgba(84, 234, 220, 0.13);
  --sb-chip-ink: #eefdfa;
  --sb-page-bg:
    radial-gradient(circle at 32% -8%, rgba(84, 234, 220, 0.2), transparent 28%),
    radial-gradient(circle at 78% 8%, rgba(255, 77, 134, 0.24), transparent 30%),
    linear-gradient(180deg, #101522 0%, #05070c 100%);
  --sb-app-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.015)),
    #0a0d16;
  --sb-view-bg:
    linear-gradient(180deg, rgba(84, 234, 220, 0.075), rgba(255, 77, 134, 0.04) 42%, transparent),
    #0a0d16;
  --sb-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.018)),
    #121724;
  --sb-rail-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)),
    #10131d;
  --sb-button-bg: linear-gradient(135deg, #ff7aa4 0%, #ff4d86 52%, #7c4dff 100%);
  --sb-theme-swatch: linear-gradient(135deg, #101522 0 34%, #54eadc 35% 58%, #ff4d86 59% 100%);
}

body[data-theme="prism"]::before {
  background:
    linear-gradient(90deg, rgba(84, 234, 220, 0.11) 0 1px, transparent 1px 100%) 0 0 / 34px 34px,
    var(--sb-app-bg) !important;
  box-shadow:
    inset 1px 0 0 rgba(84, 234, 220, 0.2),
    inset -1px 0 0 rgba(255, 77, 134, 0.16),
    0 0 70px rgba(255, 77, 134, 0.14) !important;
}

body[data-theme="prism"] :is(.topbar, .mobile-dock, .quick-action-panel, .command-panel) {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.02)),
    rgba(14, 17, 27, 0.96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 48px rgba(0, 0, 0, 0.36) !important;
}

body[data-theme="prism"] main > .active-view {
  background: var(--sb-view-bg) !important;
}

body[data-theme="prism"] main :is(.panel, [class$="-panel"], article, form, .section-head, .item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: var(--sb-card-bg) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 38px rgba(0, 0, 0, 0.24) !important;
}

[data-theme-choice="prism"] i {
  background: linear-gradient(135deg, #101522 0 34%, #54eadc 35% 58%, #ff4d86 59% 100%) !important;
}

.quick-theme-options,
body[data-theme] .quick-theme-options {
  display: grid !important;
  grid-auto-columns: minmax(70px, 1fr) !important;
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  gap: 7px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
  scrollbar-width: none !important;
}

.quick-theme-options::-webkit-scrollbar {
  display: none !important;
}

#inventory .inventory-grid,
#inventory .wardrobe-gaps,
#inventory .catalog-audit-list,
#inventory .watchlist-list,
body[data-theme] #inventory .inventory-grid,
body[data-theme] #inventory .wardrobe-gaps,
body[data-theme] #inventory .catalog-audit-list,
body[data-theme] #inventory .watchlist-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border-radius: 18px !important;
  padding: 10px !important;
  overflow: hidden !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) img,
body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) img {
  width: 92px !important;
  height: 112px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}

#inventory .item-body,
#inventory .watchlist-body,
#inventory .catalog-audit-row > div,
#inventory .wardrobe-gap-card > div,
body[data-theme] #inventory .item-body,
body[data-theme] #inventory .watchlist-body,
body[data-theme] #inventory .catalog-audit-row > div,
body[data-theme] #inventory .wardrobe-gap-card > div {
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#inventory :is(.item-card h3, .wardrobe-gap-card strong, .catalog-audit-row-head strong, .watchlist-row-head strong),
body[data-theme] #inventory :is(.item-card h3, .wardrobe-gap-card strong, .catalog-audit-row-head strong, .watchlist-row-head strong) {
  display: -webkit-box !important;
  max-width: 100% !important;
  color: var(--sb-ink) !important;
  font-size: clamp(0.98rem, 3.6vw, 1.18rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

#inventory :is(.item-meta, .stock-line, .pill-row, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal),
body[data-theme] #inventory :is(.item-meta, .stock-line, .pill-row, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal) {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  overflow: visible !important;
}

#inventory :is(.pill, .source-badge, .stock-badge, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span),
body[data-theme] #inventory :is(.pill, .source-badge, .stock-badge, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span) {
  display: inline-flex !important;
  width: auto !important;
  max-width: min(100%, 20ch) !important;
  min-width: 0 !important;
  min-height: 24px !important;
  align-items: center !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  font-size: 0.66rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#inventory .price,
body[data-theme] #inventory .price {
  color: var(--sb-accent-2) !important;
}

#inventory :is(.product-link, .watch-button),
body[data-theme] #inventory :is(.product-link, .watch-button) {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 30px !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 8px !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 380px) {
  #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
  body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 9px !important;
  }

  #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) img,
  body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) img {
    width: 78px !important;
    height: 100px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }
}

/* v202-final: this must stay last. It wins over the historical overrides above. */
:root {
  --app-rail-max: 500px !important;
  --app-rail-width: min(var(--app-rail-max), calc(100vw - 24px)) !important;
  --app-rail-left: max(12px, calc((100vw - var(--app-rail-width)) / 2)) !important;
  --topbar-height: 72px !important;
  --dock-height: 96px !important;
}

body::before {
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
}

.topbar,
body[data-theme] .topbar {
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  grid-template-columns: 112px minmax(0, 1fr) 46px 136px !important;
  gap: 9px !important;
  padding: 9px 12px !important;
  overflow: visible !important;
}

.brand,
body[data-theme] .brand {
  width: 112px !important;
  max-width: 112px !important;
  height: 50px !important;
}

.brand-logo,
.brand-logo-lock,
body[data-theme] .brand-logo,
body[data-theme] .brand-logo-lock {
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
  height: 48px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.active-view-chip,
body[data-theme] .active-view-chip {
  min-width: 0 !important;
  padding-left: 12px !important;
  font-size: 0.94rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.command-button,
body[data-theme] .command-button {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
}

.topbar-switches,
body[data-theme] .topbar-switches {
  width: 136px !important;
  min-width: 136px !important;
  max-width: 136px !important;
  grid-template-columns: 62px 66px !important;
  gap: 8px !important;
}

.locale-switch select,
.market-switch select,
body[data-theme] .locale-switch select,
body[data-theme] .market-switch select {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 !important;
  line-height: 46px !important;
  text-align: center !important;
  text-align-last: center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

main,
body[data-theme] main {
  top: var(--topbar-height) !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px)) !important;
  height: auto !important;
}

main > .studio-band,
main > .content-band,
main > .business-band,
body[data-theme] main > .studio-band,
body[data-theme] main > .content-band,
body[data-theme] main > .business-band {
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  padding: 14px 12px 22px !important;
  scroll-padding-top: 14px !important;
  scroll-padding-bottom: 22px !important;
}

.mobile-dock,
body[data-theme] .mobile-dock {
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  bottom: calc(var(--safe-bottom, 0px) + 29px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 59px) !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
}

#studio .upload-zone,
.upload-zone,
body[data-theme] #studio .upload-zone,
body[data-theme] .upload-zone {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
}

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

body[data-theme] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p) {
  background: color-mix(in srgb, var(--sb-card, #161d2d) 92%, black) !important;
  color: var(--sb-ink, #fff8f2) !important;
  border: 1px solid var(--sb-line, rgba(255, 255, 255, 0.12)) !important;
}

@media (max-width: 540px) {
  :root {
    --app-rail-max: 430px !important;
    --app-rail-width: min(430px, calc(100vw - 12px)) !important;
    --app-rail-left: max(6px, calc((100vw - var(--app-rail-width)) / 2)) !important;
    --topbar-height: 66px !important;
    --dock-height: 88px !important;
  }

  .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 86px minmax(0, 1fr) 42px 112px !important;
    gap: 6px !important;
    padding: 8px 9px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 86px !important;
    max-width: 86px !important;
    height: 48px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  .topbar-switches,
  body[data-theme] .topbar-switches {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    grid-template-columns: 52px 54px !important;
    gap: 6px !important;
  }

  .locale-switch select,
  .market-switch select,
  body[data-theme] .locale-switch select,
  body[data-theme] .market-switch select,
  .command-button,
  body[data-theme] .command-button {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  main > .studio-band,
  main > .content-band,
  main > .business-band,
  body[data-theme] main > .studio-band,
  body[data-theme] main > .content-band,
  body[data-theme] main > .business-band {
    padding: 11px 9px 18px !important;
  }

  #quickActionButton.quick-action-button,
  body[data-theme] #quickActionButton.quick-action-button {
    bottom: calc(var(--safe-bottom, 0px) + 25px) !important;
    left: calc(var(--app-rail-left) + var(--app-rail-width) - 53px) !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
}
/* v204-final-last: native app viewport, readable cards, no clipped rail. */
:root {
  --app-rail-max: 500px !important;
  --app-rail-width: min(var(--app-rail-max), calc(100vw - 24px)) !important;
  --app-rail-left: max(12px, calc((100vw - var(--app-rail-width)) / 2)) !important;
  --topbar-height: 72px !important;
  --dock-height: 94px !important;
  --safe-top: env(safe-area-inset-top, 0px) !important;
  --safe-bottom: env(safe-area-inset-bottom, 0px) !important;
}

html,
body {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body::before {
  position: fixed !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  transform: none !important;
}

.app-shell,
body[data-theme] .app-shell {
  position: fixed !important;
  z-index: 90 !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(var(--topbar-height) + var(--safe-top)) !important;
  padding: var(--safe-top) 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.topbar,
body[data-theme] .topbar {
  position: relative !important;
  display: grid !important;
  width: var(--app-rail-width) !important;
  min-width: 0 !important;
  max-width: var(--app-rail-width) !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  grid-template-columns: 104px minmax(0, 1fr) 46px 132px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 8px 10px !important;
  border-radius: 0 0 20px 20px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.brand,
body[data-theme] .brand {
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 52px !important;
  overflow: visible !important;
}

.brand-logo,
.brand-logo-lock,
body[data-theme] .brand-logo,
body[data-theme] .brand-logo-lock {
  width: 98px !important;
  min-width: 98px !important;
  max-width: 98px !important;
  height: 50px !important;
  max-height: 50px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

main,
body[data-theme] main {
  position: fixed !important;
  z-index: 2 !important;
  top: calc(var(--topbar-height) + var(--safe-top)) !important;
  right: 0 !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom)) !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: none !important;
}

main > .studio-band,
main > .content-band,
main > .business-band,
body[data-theme] main > .studio-band,
body[data-theme] main > .content-band,
body[data-theme] main > .business-band {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: var(--app-rail-left) !important;
  display: none !important;
  width: var(--app-rail-width) !important;
  min-width: 0 !important;
  max-width: var(--app-rail-width) !important;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 12px 26px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  transform: none !important;
  pointer-events: auto !important;
  scroll-padding-top: 14px !important;
  scroll-padding-bottom: 28px !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
}

main > .studio-band::-webkit-scrollbar,
main > .content-band::-webkit-scrollbar,
main > .business-band::-webkit-scrollbar {
  display: none !important;
}

main > .studio-band.active-view,
main > .content-band.active-view,
main > .business-band.active-view,
body[data-theme] main > .studio-band.active-view,
body[data-theme] main > .content-band.active-view,
body[data-theme] main > .business-band.active-view {
  display: block !important;
}

.mobile-dock,
body[data-theme] .mobile-dock {
  position: fixed !important;
  z-index: 92 !important;
  right: auto !important;
  bottom: var(--safe-bottom) !important;
  left: var(--app-rail-left) !important;
  display: grid !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom) + 14px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 60px) !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 15px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after {
  content: none !important;
  display: none !important;
}

#studio .upload-zone,
.upload-zone,
body[data-theme] #studio .upload-zone,
body[data-theme] .upload-zone {
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

#inventory .inventory-layout,
#inventory .inventory-grid,
#inventory .wardrobe-map,
#inventory .wardrobe-gaps,
#inventory .catalog-audit-list,
#inventory .watchlist-list,
body[data-theme] #inventory .inventory-layout,
body[data-theme] #inventory .inventory-grid,
body[data-theme] #inventory .wardrobe-map,
body[data-theme] #inventory .wardrobe-gaps,
body[data-theme] #inventory .catalog-audit-list,
body[data-theme] #inventory .watchlist-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
  grid-template-columns: 92px minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#inventory :is(.item-meta, .stock-line, .pill-row, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal),
body[data-theme] #inventory :is(.item-meta, .stock-line, .pill-row, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal) {
  display: flex !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  overflow: visible !important;
}

#inventory :is(.pill, .source-badge, .stock-badge, .tag, .badge, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span),
body[data-theme] #inventory :is(.pill, .source-badge, .stock-badge, .tag, .badge, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span) {
  display: inline-flex !important;
  width: auto !important;
  max-width: 18ch !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body:not([data-theme="editorial"]) main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article) {
  background: rgba(18, 20, 24, 0.92) !important;
  color: #f8f4ea !important;
  border-color: rgba(248, 244, 234, 0.16) !important;
}

body[data-theme="editorial"] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article) {
  background: #fffaf1 !important;
  color: #151515 !important;
  border-color: rgba(21, 21, 21, 0.14) !important;
}

@media (max-width: 540px) {
  :root {
    --app-rail-max: 430px !important;
    --app-rail-width: min(430px, calc(100vw - 12px)) !important;
    --app-rail-left: max(6px, calc((100vw - var(--app-rail-width)) / 2)) !important;
    --topbar-height: 66px !important;
    --dock-height: 88px !important;
  }

  .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 86px minmax(0, 1fr) 42px 112px !important;
    gap: 6px !important;
    padding: 7px 8px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
    height: 48px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 44px !important;
    max-height: 44px !important;
  }

  main > .studio-band,
  main > .content-band,
  main > .business-band,
  body[data-theme] main > .studio-band,
  body[data-theme] main > .content-band,
  body[data-theme] main > .business-band {
    padding: 11px 9px 22px !important;
  }

  #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
  body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }
}
/* v205-topbar-lock: controls fit inside their grid column. */
.topbar-switches,
body[data-theme] .topbar-switches {
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  grid-template-columns: 60px 64px !important;
  gap: 8px !important;
  overflow: visible !important;
}

.locale-switch,
.market-switch,
body[data-theme] .locale-switch,
body[data-theme] .market-switch {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
}

.locale-switch select,
.market-switch select,
body[data-theme] .locale-switch select,
body[data-theme] .market-switch select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 16px 0 6px !important;
  text-align: center !important;
  text-align-last: center !important;
  box-sizing: border-box !important;
}

@media (max-width: 540px) {
  .topbar-switches,
  body[data-theme] .topbar-switches {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    grid-template-columns: 52px 54px !important;
    gap: 6px !important;
  }

  .locale-switch,
  .market-switch,
  body[data-theme] .locale-switch,
  body[data-theme] .market-switch,
  .locale-switch select,
  .market-switch select,
  body[data-theme] .locale-switch select,
  body[data-theme] .market-switch select {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }
}

/* v208-native-polish: final rail lock, readable expert cards, no fake plus icon. */
:root {
  --app-rail-max: 500px !important;
  --app-rail-width: min(var(--app-rail-max), calc(100vw - 20px)) !important;
  --app-rail-left: max(10px, calc((100vw - var(--app-rail-width)) / 2)) !important;
  --topbar-height: 72px !important;
  --dock-height: 84px !important;
}

@media (max-width: 540px) {
  :root {
    --app-rail-max: 430px !important;
    --app-rail-width: min(430px, calc(100vw - 10px)) !important;
    --app-rail-left: max(5px, calc((100vw - var(--app-rail-width)) / 2)) !important;
    --topbar-height: 66px !important;
    --dock-height: 82px !important;
  }
}

.topbar,
body[data-theme] .topbar {
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  grid-template-columns: 112px minmax(58px, 1fr) 46px 132px !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.topbar-actions,
.app-status,
.theme-switch,
body[data-theme] .topbar-actions,
body[data-theme] .app-status,
body[data-theme] .theme-switch {
  display: none !important;
}

.brand,
body[data-theme] .brand {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  overflow: visible !important;
}

.brand span,
.brand small,
body[data-theme] .brand span,
body[data-theme] .brand small {
  display: none !important;
}

.active-view-chip,
body[data-theme] .active-view-chip {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: rgba(250, 247, 239, 0.96) !important;
}

.command-button,
body[data-theme] .command-button {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.command-button-label,
body[data-theme] .command-button-label {
  display: none !important;
}

.topbar-switches,
body[data-theme] .topbar-switches {
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  grid-template-columns: 60px 64px !important;
  gap: 8px !important;
  overflow: visible !important;
}

@media (max-width: 540px) {
  .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 88px minmax(42px, 1fr) 42px 112px !important;
    gap: 6px !important;
    padding: 7px 8px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
  }

  .command-button,
  body[data-theme] .command-button {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }
}

main,
body[data-theme] main {
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  overflow: visible !important;
}

main > .studio-band,
main > .content-band,
main > .business-band,
body[data-theme] main > .studio-band,
body[data-theme] main > .content-band,
body[data-theme] main > .business-band {
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 10px !important;
  padding-left: 10px !important;
  color: rgba(250, 247, 239, 0.96) !important;
}

body:not([data-theme="editorial"]) main :is(.panel, .expert-verdict-card, .expert-critique-grid article, .expert-verdict-metrics article, .item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row, .passport-card, .fit-card, .coach-card, .reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p) {
  background:
    linear-gradient(180deg, rgba(42, 43, 42, 0.96), rgba(15, 16, 17, 0.98)) !important;
  color: rgba(250, 247, 239, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

body:not([data-theme="editorial"]) main :is(.expert-critique-grid article p, .expert-verdict-body p, .expert-next-move, .item-card p, .item-card span, .wardrobe-gap-card p, .wardrobe-gap-card span, .catalog-audit-row p, .watchlist-row p, .reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p) {
  color: rgba(235, 231, 220, 0.86) !important;
}

body:not([data-theme="editorial"]) main :is(.expert-critique-grid article > span, .expert-verdict-body > span, .expert-verdict-metrics span, .eyebrow) {
  color: rgba(230, 192, 92, 0.96) !important;
}

body[data-theme="editorial"] main :is(.panel, .expert-verdict-card, .expert-critique-grid article, .expert-verdict-metrics article, .item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row, .passport-card, .fit-card, .coach-card, .reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p) {
  background: #fffaf1 !important;
  color: #161616 !important;
  border-color: rgba(22, 22, 22, 0.14) !important;
}

body[data-theme="editorial"] main :is(.expert-critique-grid article p, .expert-verdict-body p, .expert-next-move, .item-card p, .item-card span, .wardrobe-gap-card p, .wardrobe-gap-card span, .catalog-audit-row p, .watchlist-row p, .reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p) {
  color: rgba(22, 22, 22, 0.76) !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 58px) !important;
  right: auto !important;
  bottom: calc(var(--safe-bottom) + var(--dock-height) + 12px) !important;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  border-radius: 15px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
}

#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after {
  content: none !important;
  display: none !important;
}

#quickActionButton.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  margin: auto !important;
  color: rgba(255, 255, 255, 0.96) !important;
  fill: none !important;
}

#quickActionButton.quick-action-button svg circle,
body[data-theme] #quickActionButton.quick-action-button svg circle {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
}

.mobile-dock,
body[data-theme] .mobile-dock {
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 10px !important;
}

#inventory :is(.pill, .source-badge, .stock-badge, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span),
body[data-theme] #inventory :is(.pill, .source-badge, .stock-badge, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span) {
  max-width: 100% !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

/* v209-shell-reset: native app frame, no vertical floating, no internal crop. */
:root {
  --app-stage-top: 0px !important;
  --app-stage-bottom: 0px !important;
  --app-stage-height: 100dvh !important;
  --app-rail-max: 520px !important;
  --app-rail-width: min(var(--app-rail-max), 100vw) !important;
  --app-rail-left: max(0px, calc((100vw - var(--app-rail-width)) / 2)) !important;
  --topbar-height: 70px !important;
  --dock-height: 86px !important;
}

@media (max-width: 540px) {
  :root {
    --app-rail-max: 100vw !important;
    --app-rail-width: 100vw !important;
    --app-rail-left: 0px !important;
    --topbar-height: 66px !important;
    --dock-height: 82px !important;
  }
}

html,
body,
body[data-theme] {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg, rgba(12, 17, 17, 0.96), rgba(6, 6, 7, 1) 35%, rgba(22, 8, 17, 0.95)) !important;
}

body::before,
body[data-theme]::before {
  position: fixed !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: 100dvh !important;
  transform: none !important;
  opacity: 1 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 26%),
    linear-gradient(90deg, rgba(125, 222, 212, 0.08), rgba(244, 46, 101, 0.08)),
    #050606 !important;
}

.app-shell,
body[data-theme] .app-shell {
  position: fixed !important;
  z-index: 80 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: calc(var(--topbar-height) + var(--safe-top)) !important;
  min-height: calc(var(--topbar-height) + var(--safe-top)) !important;
  max-height: calc(var(--topbar-height) + var(--safe-top)) !important;
  margin: 0 !important;
  padding: var(--safe-top) 0 0 !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform: none !important;
}

.topbar,
body[data-theme] .topbar {
  position: relative !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  display: grid !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  margin: 0 !important;
  border-radius: 0 0 22px 22px !important;
  grid-template-columns: 118px minmax(0, 1fr) 44px 130px !important;
  gap: 8px !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  transform: none !important;
}

.brand,
body[data-theme] .brand {
  width: 118px !important;
  min-width: 118px !important;
  max-width: 118px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.brand-logo,
.brand-logo-lock,
body[data-theme] .brand-logo,
body[data-theme] .brand-logo-lock {
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

main,
body[data-theme] main {
  position: fixed !important;
  z-index: 20 !important;
  top: calc(var(--topbar-height) + var(--safe-top)) !important;
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom)) !important;
  left: var(--app-rail-left) !important;
  display: block !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

main > .studio-band,
main > .content-band,
main > .business-band,
body[data-theme] main > .studio-band,
body[data-theme] main > .content-band,
body[data-theme] main > .business-band {
  position: absolute !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  display: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 12px 12px 28px !important;
  transform: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-padding-top: 12px !important;
  scroll-padding-bottom: 28px !important;
  box-sizing: border-box !important;
}

main > .studio-band.active-view,
main > .content-band.active-view,
main > .business-band.active-view,
body[data-theme] main > .studio-band.active-view,
body[data-theme] main > .content-band.active-view,
body[data-theme] main > .business-band.active-view {
  display: block !important;
}

main > .studio-band[hidden],
main > .content-band[hidden],
main > .business-band[hidden] {
  display: none !important;
}

.mobile-dock,
body[data-theme] .mobile-dock {
  position: fixed !important;
  z-index: 90 !important;
  top: auto !important;
  right: auto !important;
  bottom: var(--safe-bottom) !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: var(--dock-height) !important;
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
  margin: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  position: fixed !important;
  z-index: 94 !important;
  top: auto !important;
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom) + 10px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 58px) !important;
  transform: none !important;
}

@media (max-width: 540px) {
  .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 92px minmax(0, 1fr) 42px 112px !important;
    gap: 6px !important;
    padding: 7px 8px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
  }

  main > .studio-band,
  main > .content-band,
  main > .business-band,
  body[data-theme] main > .studio-band,
  body[data-theme] main > .content-band,
  body[data-theme] main > .business-band {
    padding: 10px 10px 24px !important;
  }
}

/* v210-theme-system: distinct app skins with readable surfaces. */
body[data-theme="prism"] {
  --sb-bg-a: #071112;
  --sb-bg-b: #130a10;
  --sb-surface: rgba(20, 25, 26, 0.96);
  --sb-surface-2: rgba(31, 34, 37, 0.94);
  --sb-text: #fbf6ee;
  --sb-muted: rgba(232, 225, 214, 0.76);
  --sb-line: rgba(255, 255, 255, 0.13);
  --sb-accent: #ff3f74;
  --sb-accent-2: #78e6d6;
}

body[data-theme="noir"] {
  --sb-bg-a: #050505;
  --sb-bg-b: #15120c;
  --sb-surface: rgba(18, 18, 18, 0.97);
  --sb-surface-2: rgba(34, 32, 28, 0.95);
  --sb-text: #f7f2e8;
  --sb-muted: rgba(232, 224, 209, 0.72);
  --sb-line: rgba(214, 183, 94, 0.18);
  --sb-accent: #d2a43d;
  --sb-accent-2: #f5efe3;
}

body[data-theme="chrome"] {
  --sb-bg-a: #d5d8da;
  --sb-bg-b: #111315;
  --sb-surface: rgba(238, 239, 237, 0.96);
  --sb-surface-2: rgba(221, 224, 222, 0.96);
  --sb-text: #101112;
  --sb-muted: rgba(25, 27, 29, 0.68);
  --sb-line: rgba(16, 17, 18, 0.14);
  --sb-accent: #b98923;
  --sb-accent-2: #1a8079;
}

body[data-theme="editorial"] {
  --sb-bg-a: #f3efe4;
  --sb-bg-b: #d9d0bf;
  --sb-surface: rgba(255, 250, 241, 0.98);
  --sb-surface-2: rgba(241, 235, 223, 0.96);
  --sb-text: #161412;
  --sb-muted: rgba(22, 20, 18, 0.68);
  --sb-line: rgba(22, 20, 18, 0.14);
  --sb-accent: #9e273e;
  --sb-accent-2: #8b6a28;
}

body[data-theme="runway"] {
  --sb-bg-a: #09060a;
  --sb-bg-b: #240612;
  --sb-surface: rgba(24, 17, 22, 0.97);
  --sb-surface-2: rgba(39, 24, 32, 0.95);
  --sb-text: #fff2f5;
  --sb-muted: rgba(242, 220, 226, 0.74);
  --sb-line: rgba(255, 94, 132, 0.18);
  --sb-accent: #ff4f82;
  --sb-accent-2: #f7d57d;
}

body[data-theme] {
  background:
    linear-gradient(90deg, var(--sb-bg-a), #050506 42%, var(--sb-bg-b)) !important;
  color: var(--sb-text) !important;
}

body[data-theme]::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 24%),
    linear-gradient(90deg, color-mix(in srgb, var(--sb-accent-2) 12%, transparent), color-mix(in srgb, var(--sb-accent) 10%, transparent)),
    var(--sb-bg-a) !important;
}

body[data-theme] :is(.topbar, .mobile-dock, .quick-action-panel, .command-panel) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-surface) 96%, white 4%), var(--sb-surface)) !important;
  border-color: var(--sb-line) !important;
  color: var(--sb-text) !important;
}

body[data-theme] main :is(.panel, [class$="-panel"], .expert-verdict-card, .expert-critique-grid article, .expert-verdict-metrics article, .item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row, .passport-card, .fit-card, .coach-card, .reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-surface) 94%, white 6%), var(--sb-surface-2)) !important;
  border-color: var(--sb-line) !important;
  color: var(--sb-text) !important;
}

body[data-theme] main :is(h1, h2, h3, h4, strong, .expert-verdict-body h3, .expert-critique-head strong, .item-card h3) {
  color: var(--sb-text) !important;
}

body[data-theme] main :is(p, span, small, label, .expert-critique-grid article p, .expert-verdict-body p, .expert-next-move, .item-card p, .item-card span, .wardrobe-gap-card p, .wardrobe-gap-card span, .catalog-audit-row p, .watchlist-row p) {
  color: var(--sb-muted) !important;
}

body[data-theme] main :is(.eyebrow, .expert-critique-grid article > span, .expert-verdict-body > span, .expert-verdict-metrics span),
body[data-theme] .active-view-chip {
  color: var(--sb-accent-2) !important;
}

body[data-theme] :is(.primary-button, button[type="submit"], .mobile-dock a.active .dock-icon, .quick-action-button),
body[data-theme] main :is(.segmented button.active, .mode-switch button.active) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-accent) 78%, white 22%), var(--sb-accent)) !important;
  border-color: color-mix(in srgb, var(--sb-accent) 70%, white 30%) !important;
  color: #fffaf4 !important;
}

body[data-theme="chrome"] :is(.primary-button, button[type="submit"], .mobile-dock a.active .dock-icon, .quick-action-button),
body[data-theme="chrome"] main :is(.segmented button.active, .mode-switch button.active) {
  color: #111315 !important;
}

body[data-theme] :is(input, select, textarea, .locale-switch select, .market-switch select, .command-button) {
  background: color-mix(in srgb, var(--sb-surface-2) 82%, black 18%) !important;
  border-color: var(--sb-line) !important;
  color: var(--sb-text) !important;
}

body[data-theme="chrome"] :is(input, select, textarea, .locale-switch select, .market-switch select, .command-button) {
  background: #f5f6f4 !important;
  color: #111315 !important;
}

body[data-theme] .quick-theme-options button[aria-pressed="true"] {
  border-color: var(--sb-accent) !important;
  color: var(--sb-text) !important;
  background: color-mix(in srgb, var(--sb-accent) 18%, var(--sb-surface) 82%) !important;
}

/* v212-studio-fill: Studio is a one-column native screen, never a clipped desktop grid. */
#studio.studio-band.active-view,
body[data-theme] #studio.studio-band.active-view {
  padding: 10px 10px 24px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#studio .studio-grid,
body[data-theme] #studio .studio-grid {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

#studio .intro-panel,
body[data-theme] #studio .intro-panel {
  display: none !important;
}

#studio .photo-panel,
body[data-theme] #studio .photo-panel,
#studio .score-wrap,
body[data-theme] #studio .score-wrap,
#studio .vision-panel,
body[data-theme] #studio .vision-panel,
#studio .repair-panel,
body[data-theme] #studio .repair-panel,
#studio .capture-panel,
body[data-theme] #studio .capture-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#studio .photo-panel .panel-head,
body[data-theme] #studio .photo-panel .panel-head,
#studio .panel-head,
body[data-theme] #studio .panel-head {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 10px !important;
  overflow: visible !important;
}

#studio .panel-head > div,
body[data-theme] #studio .panel-head > div {
  min-width: 0 !important;
  overflow: visible !important;
}

#studio .panel-head h2,
#studio .panel-head h3,
body[data-theme] #studio .panel-head h2,
body[data-theme] #studio .panel-head h3 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.02 !important;
}

#studio #analyzeButton,
body[data-theme] #studio #analyzeButton {
  width: auto !important;
  min-width: 108px !important;
  max-width: 132px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#studio .upload-zone,
body[data-theme] #studio .upload-zone {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: min(58dvh, 540px) !important;
  min-height: 360px !important;
  max-height: 540px !important;
  aspect-ratio: auto !important;
  margin: 12px 0 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#studio .upload-zone img,
body[data-theme] #studio .upload-zone img,
#photoPreview,
#uploadedPhoto {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

#studio .upload-zone span,
body[data-theme] #studio .upload-zone span {
  right: 12px !important;
  bottom: 12px !important;
  left: auto !important;
  max-width: calc(100% - 24px) !important;
  transform: none !important;
}

#studio .score-wrap,
body[data-theme] #studio .score-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

#studio .score-wrap *,
body[data-theme] #studio .score-wrap * {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 540px) {
  #studio .upload-zone,
  body[data-theme] #studio .upload-zone {
    height: min(56dvh, 500px) !important;
    min-height: 330px !important;
  }

  #studio #analyzeButton,
  body[data-theme] #studio #analyzeButton {
    min-width: 98px !important;
    max-width: 118px !important;
    padding: 0 10px !important;
  }
}

/* v213-studio-lock: one native rail, one Studio column, no half-screen crop. */
main > #studio.studio-band.active-view,
body[data-theme] main > #studio.studio-band.active-view {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 10px 10px 22px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

main > #studio .studio-grid,
body[data-theme] main > #studio .studio-grid {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  justify-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  box-sizing: border-box !important;
}

main > #studio .studio-grid > *,
body[data-theme] main > #studio .studio-grid > * {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  justify-self: stretch !important;
  align-self: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

main > #studio .photo-panel,
body[data-theme] main > #studio .photo-panel {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 14px !important;
  overflow: visible !important;
  border-radius: 24px !important;
  box-sizing: border-box !important;
}

main > #studio .photo-panel::before,
main > #studio .photo-panel::after,
main > #studio .upload-zone::before,
main > #studio .upload-zone::after,
body[data-theme] main > #studio .photo-panel::before,
body[data-theme] main > #studio .photo-panel::after,
body[data-theme] main > #studio .upload-zone::before,
body[data-theme] main > #studio .upload-zone::after {
  content: none !important;
  display: none !important;
}

main > #studio .upload-zone,
body[data-theme] main > #studio .upload-zone {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: min(58dvh, 560px) !important;
  min-height: 360px !important;
  max-height: 560px !important;
  margin: 14px 0 0 !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
}

main > #studio .upload-zone img,
body[data-theme] main > #studio .upload-zone img,
main > #studio #photoPreview,
main > #studio #uploadedPhoto {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

main > #studio .score-wrap,
body[data-theme] main > #studio .score-wrap {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 12px 0 0 !important;
  padding: 12px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

main > #studio .score-wrap > *,
main > #studio .score-wrap h3,
main > #studio .score-wrap p,
main > #studio .score-meta,
body[data-theme] main > #studio .score-wrap > *,
body[data-theme] main > #studio .score-wrap h3,
body[data-theme] main > #studio .score-wrap p,
body[data-theme] main > #studio .score-meta {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

main > #studio .score-ring,
body[data-theme] main > #studio .score-ring {
  width: 74px !important;
  min-width: 74px !important;
  height: 74px !important;
  min-height: 74px !important;
}

@media (max-width: 430px) {
  main > #studio .upload-zone,
  body[data-theme] main > #studio .upload-zone {
    height: min(55dvh, 500px) !important;
    min-height: 330px !important;
  }

  main > #studio .score-wrap,
  body[data-theme] main > #studio .score-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  main > #studio .score-ring,
  body[data-theme] main > #studio .score-ring {
    width: 72px !important;
    height: 72px !important;
  }
}

/* v215-theme-swatches: theme picker is a swatch control, not truncated text pills. */
.quick-theme-picker,
body[data-theme] .quick-theme-picker {
  gap: 10px !important;
  margin: 12px 0 14px !important;
  padding: 14px !important;
  border-radius: 22px !important;
}

.quick-theme-picker > span,
body[data-theme] .quick-theme-picker > span {
  color: var(--sb-ink, #f6f2eb) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.quick-theme-options,
body[data-theme] .quick-theme-options {
  display: grid !important;
  width: 100% !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.quick-theme-options button,
body[data-theme] .quick-theme-options button {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--sb-line, rgba(255,255,255,0.16)) 86%, transparent) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012)),
    rgba(18, 20, 25, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  overflow: visible !important;
  color: transparent !important;
}

.quick-theme-options button.active,
.quick-theme-options button[aria-pressed="true"],
body[data-theme] .quick-theme-options button.active,
body[data-theme] .quick-theme-options button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--sb-signal, #ff4778) 80%, white 12%) !important;
  background:
    linear-gradient(180deg, rgba(255, 71, 120, 0.2), rgba(255, 71, 120, 0.055)),
    rgba(24, 26, 33, 0.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 12px 28px rgba(255, 71, 120, 0.18) !important;
}

.quick-theme-options button.active::after,
.quick-theme-options button[aria-pressed="true"]::after,
body[data-theme] .quick-theme-options button.active::after,
body[data-theme] .quick-theme-options button[aria-pressed="true"]::after {
  content: "" !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: var(--sb-signal, #ff4778) !important;
  box-shadow: 0 0 12px rgba(255, 71, 120, 0.62) !important;
}

.quick-theme-options i,
body[data-theme] .quick-theme-options i {
  display: block !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 10px 18px rgba(0, 0, 0, 0.22) !important;
}

.quick-theme-options span,
body[data-theme] .quick-theme-options span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

[data-theme-choice="prism"] i {
  background: linear-gradient(135deg, #101522 0 30%, #54eadc 31% 60%, #ff4d86 61% 100%) !important;
}

[data-theme-choice="noir"] i {
  background: linear-gradient(135deg, #050505 0 34%, #f0eee8 35% 68%, #c7a03d 69% 100%) !important;
}

[data-theme-choice="chrome"] i {
  background: linear-gradient(135deg, #f7f8f6 0 32%, #aeb4b6 33% 64%, #151719 65% 100%) !important;
}

[data-theme-choice="editorial"] i {
  background: linear-gradient(135deg, #f4efe4 0 32%, #205f72 33% 64%, #c52d58 65% 100%) !important;
}

[data-theme-choice="runway"] i {
  background: linear-gradient(135deg, #14050d 0 30%, #ff4f82 31% 62%, #f7d57d 63% 100%) !important;
}

@media (max-width: 370px) {
  .quick-theme-options,
  body[data-theme] .quick-theme-options {
    gap: 7px !important;
  }

  .quick-theme-options button,
  body[data-theme] .quick-theme-options button {
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 16px !important;
  }

  .quick-theme-options i,
  body[data-theme] .quick-theme-options i {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
  }
}

/* v216-studio-photo-fit: Studio demo image is a clean mobile photo card, not a cropped scanner frame. */
html.native-layout-guard #studio .photo-panel::before,
html.native-layout-guard #studio .photo-panel::after,
html.native-layout-guard #studio .upload-zone::before,
html.native-layout-guard #studio .upload-zone::after,
main > #studio .photo-panel::before,
main > #studio .photo-panel::after,
main > #studio .upload-zone::before,
main > #studio .upload-zone::after,
body[data-theme] main > #studio .photo-panel::before,
body[data-theme] main > #studio .photo-panel::after,
body[data-theme] main > #studio .upload-zone::before,
body[data-theme] main > #studio .upload-zone::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html.native-layout-guard #studio .upload-zone,
html.native-layout-guard body[data-theme] #studio .upload-zone,
main > #studio .upload-zone,
body[data-theme] main > #studio .upload-zone,
#studio .upload-zone,
body[data-theme] #studio .upload-zone {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
  place-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 14px 0 0 !important;
  padding: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 22% 12%, color-mix(in srgb, var(--sb-signal, #ff4778) 28%, transparent), transparent 30%),
    #050607 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
  box-sizing: border-box !important;
}

html.native-layout-guard #studio .upload-zone img,
html.native-layout-guard #studio #photoPreview,
html.native-layout-guard #studio #uploadedPhoto,
main > #studio .upload-zone img,
main > #studio #photoPreview,
main > #studio #uploadedPhoto,
body[data-theme] main > #studio .upload-zone img,
#studio .upload-zone img,
#photoPreview,
#uploadedPhoto {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
  background: #050607 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard #studio .upload-zone span,
main > #studio .upload-zone span,
body[data-theme] main > #studio .upload-zone span,
#studio .upload-zone span {
  right: 14px !important;
  bottom: 14px !important;
  left: auto !important;
  max-width: calc(100% - 28px) !important;
  transform: none !important;
  z-index: 4 !important;
}

/* v217-quick-action-single-icon: one floating action glyph, never stacked plus/text leftovers. */
html.native-layout-guard #quickActionButton.quick-action-button,
html.native-layout-guard body[data-theme] #quickActionButton.quick-action-button,
#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button,
.quick-action-button {
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px) + 14px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 66px) !important;
  display: grid !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 18px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard #quickActionButton.quick-action-button::before,
html.native-layout-guard #quickActionButton.quick-action-button::after,
#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after,
.quick-action-button::before,
.quick-action-button::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

html.native-layout-guard #quickActionButton.quick-action-button svg,
#quickActionButton.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg,
.quick-action-button svg {
  display: block !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: none !important;
}

@media (max-width: 370px) {
  html.native-layout-guard #quickActionButton.quick-action-button,
  html.native-layout-guard body[data-theme] #quickActionButton.quick-action-button,
  #quickActionButton.quick-action-button,
  body[data-theme] #quickActionButton.quick-action-button,
  .quick-action-button {
    left: calc(var(--app-rail-left) + var(--app-rail-width) - 62px) !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
  }
}

/* v218-inventory-list-cards: product cards read like a mobile fashion rack, never crushed grid chips. */
html.native-layout-guard #inventory .inventory-layout,
html.native-layout-guard body[data-theme] #inventory .inventory-layout,
#inventory .inventory-layout,
body[data-theme] #inventory .inventory-layout {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html.native-layout-guard #inventory .inventory-grid,
html.native-layout-guard body[data-theme] #inventory .inventory-grid,
#inventory .inventory-grid,
body[data-theme] #inventory .inventory-grid {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html.native-layout-guard #inventory .item-card,
html.native-layout-guard body[data-theme] #inventory .item-card,
#inventory .item-card,
body[data-theme] #inventory .item-card {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  padding: 10px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.native-layout-guard #inventory .item-card > img,
html.native-layout-guard body[data-theme] #inventory .item-card > img,
#inventory .item-card > img,
body[data-theme] #inventory .item-card > img {
  display: block !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 122px !important;
  min-height: 122px !important;
  max-height: 122px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #050607 !important;
}

html.native-layout-guard #inventory .item-body,
html.native-layout-guard body[data-theme] #inventory .item-body,
#inventory .item-body,
body[data-theme] #inventory .item-body {
  display: grid !important;
  min-width: 0 !important;
  max-width: 100% !important;
  grid-auto-rows: min-content !important;
  gap: 6px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.native-layout-guard #inventory .item-card h3,
html.native-layout-guard body[data-theme] #inventory .item-card h3,
#inventory .item-card h3,
body[data-theme] #inventory .item-card h3 {
  display: -webkit-box !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--sb-ink, #f4f0e8) !important;
  font-size: clamp(1rem, 3.6vw, 1.16rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

html.native-layout-guard #inventory .item-meta,
html.native-layout-guard body[data-theme] #inventory .item-meta,
html.native-layout-guard #inventory .stock-line,
html.native-layout-guard body[data-theme] #inventory .stock-line,
#inventory .item-meta,
body[data-theme] #inventory .item-meta,
#inventory .stock-line,
body[data-theme] #inventory .stock-line {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: hidden !important;
}

html.native-layout-guard #inventory .price,
html.native-layout-guard body[data-theme] #inventory .price,
#inventory .price,
body[data-theme] #inventory .price {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  white-space: nowrap !important;
}

html.native-layout-guard #inventory .stock-line span:not(.stock-badge),
html.native-layout-guard body[data-theme] #inventory .stock-line span:not(.stock-badge),
#inventory .stock-line span:not(.stock-badge),
body[data-theme] #inventory .stock-line span:not(.stock-badge) {
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html.native-layout-guard #inventory .pill-row,
html.native-layout-guard body[data-theme] #inventory .pill-row,
#inventory .pill-row,
body[data-theme] #inventory .pill-row {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

html.native-layout-guard #inventory .pill-row::-webkit-scrollbar,
html.native-layout-guard body[data-theme] #inventory .pill-row::-webkit-scrollbar,
#inventory .pill-row::-webkit-scrollbar,
body[data-theme] #inventory .pill-row::-webkit-scrollbar {
  display: none !important;
}

html.native-layout-guard #inventory :is(.pill, .source-badge, .stock-badge, .brand-pill),
html.native-layout-guard body[data-theme] #inventory :is(.pill, .source-badge, .stock-badge, .brand-pill),
#inventory :is(.pill, .source-badge, .stock-badge, .brand-pill),
body[data-theme] #inventory :is(.pill, .source-badge, .stock-badge, .brand-pill) {
  display: inline-flex !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: 18ch !important;
  min-height: 24px !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html.native-layout-guard #inventory .brand-pill,
html.native-layout-guard body[data-theme] #inventory .brand-pill,
#inventory .brand-pill,
body[data-theme] #inventory .brand-pill {
  justify-self: start !important;
  max-width: min(100%, 24ch) !important;
}

html.native-layout-guard #inventory :is(.product-link, .watch-button),
html.native-layout-guard body[data-theme] #inventory :is(.product-link, .watch-button),
#inventory :is(.product-link, .watch-button),
body[data-theme] #inventory :is(.product-link, .watch-button) {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 370px) {
  html.native-layout-guard #inventory .item-card,
  html.native-layout-guard body[data-theme] #inventory .item-card,
  #inventory .item-card,
  body[data-theme] #inventory .item-card {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html.native-layout-guard #inventory .item-card > img,
  html.native-layout-guard body[data-theme] #inventory .item-card > img,
  #inventory .item-card > img,
  body[data-theme] #inventory .item-card > img {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
  }
}

/* v219-topbar-native-chrome: five hard slots, no clipped logo or web-style control pack. */
:root {
  --topbar-height: 72px !important;
}

@media (max-width: 540px) {
  :root {
    --topbar-height: 66px !important;
  }
}

html.native-layout-guard .topbar,
html.native-layout-guard body[data-theme] .topbar,
.topbar,
body[data-theme] .topbar {
  display: grid !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  grid-template-columns: 88px minmax(0, 1fr) 42px 50px 58px !important;
  align-items: center !important;
  gap: 6px !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.native-layout-guard .brand,
html.native-layout-guard body[data-theme] .brand,
.brand,
body[data-theme] .brand {
  grid-column: 1 !important;
  display: flex !important;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.native-layout-guard .brand-logo,
html.native-layout-guard .brand-logo-lock,
html.native-layout-guard body[data-theme] .brand-logo,
html.native-layout-guard body[data-theme] .brand-logo-lock,
.brand-logo,
.brand-logo-lock,
body[data-theme] .brand-logo,
body[data-theme] .brand-logo-lock {
  display: block !important;
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.native-layout-guard .brand span,
html.native-layout-guard .brand small,
html.native-layout-guard .topbar-actions,
html.native-layout-guard .app-status,
html.native-layout-guard .theme-switch,
html.native-layout-guard body[data-theme] .brand span,
html.native-layout-guard body[data-theme] .brand small,
html.native-layout-guard body[data-theme] .topbar-actions,
html.native-layout-guard body[data-theme] .app-status,
html.native-layout-guard body[data-theme] .theme-switch,
.brand span,
.brand small,
.topbar-actions,
.app-status,
.theme-switch,
body[data-theme] .brand span,
body[data-theme] .brand small,
body[data-theme] .topbar-actions,
body[data-theme] .app-status,
body[data-theme] .theme-switch {
  display: none !important;
}

html.native-layout-guard .active-view-chip,
html.native-layout-guard body[data-theme] .active-view-chip,
.active-view-chip,
body[data-theme] .active-view-chip {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

html.native-layout-guard .command-button,
html.native-layout-guard body[data-theme] .command-button,
.command-button,
body[data-theme] .command-button {
  grid-column: 3 !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  overflow: hidden !important;
  place-self: center !important;
}

html.native-layout-guard .command-button-label,
html.native-layout-guard body[data-theme] .command-button-label,
.command-button-label,
body[data-theme] .command-button-label {
  display: none !important;
}

html.native-layout-guard .topbar-switches,
html.native-layout-guard body[data-theme] .topbar-switches,
.topbar-switches,
body[data-theme] .topbar-switches {
  display: contents !important;
}

html.native-layout-guard .topbar-switches span,
html.native-layout-guard body[data-theme] .topbar-switches span,
.topbar-switches span,
body[data-theme] .topbar-switches span {
  display: none !important;
}

html.native-layout-guard .locale-switch,
html.native-layout-guard body[data-theme] .locale-switch,
.locale-switch,
body[data-theme] .locale-switch {
  grid-column: 4 !important;
}

html.native-layout-guard .market-switch,
html.native-layout-guard body[data-theme] .market-switch,
.market-switch,
body[data-theme] .market-switch {
  grid-column: 5 !important;
}

html.native-layout-guard :is(.locale-switch, .market-switch),
html.native-layout-guard body[data-theme] :is(.locale-switch, .market-switch),
:is(.locale-switch, .market-switch),
body[data-theme] :is(.locale-switch, .market-switch) {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  place-items: center !important;
  overflow: hidden !important;
}

html.native-layout-guard :is(.locale-switch, .market-switch) select,
html.native-layout-guard body[data-theme] :is(.locale-switch, .market-switch) select,
:is(.locale-switch, .market-switch) select,
body[data-theme] :is(.locale-switch, .market-switch) select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 14px 0 6px !important;
  text-align: center !important;
  text-align-last: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  box-sizing: border-box !important;
}

@media (max-width: 370px) {
  html.native-layout-guard .topbar,
  html.native-layout-guard body[data-theme] .topbar,
  .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 74px minmax(0, 1fr) 40px 46px 54px !important;
    gap: 5px !important;
    padding: 7px 8px !important;
  }

  html.native-layout-guard .brand,
  html.native-layout-guard body[data-theme] .brand,
  .brand,
  body[data-theme] .brand {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
  }

  html.native-layout-guard .brand-logo,
  html.native-layout-guard .brand-logo-lock,
  html.native-layout-guard body[data-theme] .brand-logo,
  html.native-layout-guard body[data-theme] .brand-logo-lock,
  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
  }

  html.native-layout-guard .command-button,
  html.native-layout-guard body[data-theme] .command-button,
  .command-button,
  body[data-theme] .command-button,
  html.native-layout-guard :is(.locale-switch, .market-switch),
  html.native-layout-guard body[data-theme] :is(.locale-switch, .market-switch),
  :is(.locale-switch, .market-switch),
  body[data-theme] :is(.locale-switch, .market-switch),
  html.native-layout-guard :is(.locale-switch, .market-switch) select,
  html.native-layout-guard body[data-theme] :is(.locale-switch, .market-switch) select,
  :is(.locale-switch, .market-switch) select,
  body[data-theme] :is(.locale-switch, .market-switch) select {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }
}

/* v220-theme-picker-studio-swatches: no truncated theme pills, only equal fashion-grade swatches. */
html.native-layout-guard .quick-theme-picker,
html.native-layout-guard body[data-theme] .quick-theme-picker,
.quick-theme-picker,
body[data-theme] .quick-theme-picker {
  display: grid !important;
  gap: 10px !important;
  margin: 12px 0 14px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

html.native-layout-guard .quick-theme-picker > span,
html.native-layout-guard body[data-theme] .quick-theme-picker > span,
.quick-theme-picker > span,
body[data-theme] .quick-theme-picker > span {
  display: block !important;
  color: var(--sb-ink, #f6f2eb) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

html.native-layout-guard .quick-theme-options,
html.native-layout-guard body[data-theme] .quick-theme-options,
.quick-theme-options,
body[data-theme] .quick-theme-options {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html.native-layout-guard .quick-theme-options button,
html.native-layout-guard body[data-theme] .quick-theme-options button,
.quick-theme-options button,
body[data-theme] .quick-theme-options button {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 62px !important;
  grid-template-rows: 32px 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 5px !important;
  padding: 7px 4px 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)),
    rgba(12, 14, 18, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: var(--sb-ink, #f6f2eb) !important;
  overflow: hidden !important;
}

html.native-layout-guard .quick-theme-options button.active,
html.native-layout-guard .quick-theme-options button[aria-pressed="true"],
html.native-layout-guard body[data-theme] .quick-theme-options button.active,
html.native-layout-guard body[data-theme] .quick-theme-options button[aria-pressed="true"],
.quick-theme-options button.active,
.quick-theme-options button[aria-pressed="true"],
body[data-theme] .quick-theme-options button.active,
body[data-theme] .quick-theme-options button[aria-pressed="true"] {
  border-color: var(--sb-signal, #ff4778) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--sb-signal, #ff4778) 55%, white 18%),
    0 10px 24px color-mix(in srgb, var(--sb-signal, #ff4778) 22%, transparent) !important;
}

html.native-layout-guard .quick-theme-options button::after,
html.native-layout-guard body[data-theme] .quick-theme-options button::after,
.quick-theme-options button::after,
body[data-theme] .quick-theme-options button::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 8px 5px 8px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.native-layout-guard .quick-theme-options button.active::after,
html.native-layout-guard .quick-theme-options button[aria-pressed="true"]::after,
html.native-layout-guard body[data-theme] .quick-theme-options button.active::after,
html.native-layout-guard body[data-theme] .quick-theme-options button[aria-pressed="true"]::after,
.quick-theme-options button.active::after,
.quick-theme-options button[aria-pressed="true"]::after,
body[data-theme] .quick-theme-options button.active::after,
body[data-theme] .quick-theme-options button[aria-pressed="true"]::after {
  background: var(--sb-signal, #ff4778) !important;
}

html.native-layout-guard .quick-theme-options i,
html.native-layout-guard body[data-theme] .quick-theme-options i,
.quick-theme-options i,
body[data-theme] .quick-theme-options i {
  display: block !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

html.native-layout-guard .quick-theme-options span,
html.native-layout-guard body[data-theme] .quick-theme-options span,
.quick-theme-options span,
body[data-theme] .quick-theme-options span {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  color: var(--sb-ink, #f6f2eb) !important;
  font-size: 0.58rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html.native-layout-guard [data-theme-choice="prism"] i,
[data-theme-choice="prism"] i {
  background: linear-gradient(135deg, #101522 0 30%, #54eadc 31% 58%, #ff4d86 59% 100%) !important;
}

html.native-layout-guard [data-theme-choice="noir"] i,
[data-theme-choice="noir"] i {
  background: linear-gradient(135deg, #020202 0 35%, #d9d5ca 36% 68%, #c7a03d 69% 100%) !important;
}

html.native-layout-guard [data-theme-choice="chrome"] i,
[data-theme-choice="chrome"] i {
  background: linear-gradient(135deg, #f7f8f6 0 32%, #aeb4b6 33% 64%, #151719 65% 100%) !important;
}

html.native-layout-guard [data-theme-choice="editorial"] i,
[data-theme-choice="editorial"] i {
  background: linear-gradient(135deg, #f4efe4 0 32%, #205f72 33% 64%, #c52d58 65% 100%) !important;
}

html.native-layout-guard [data-theme-choice="runway"] i,
[data-theme-choice="runway"] i {
  background: linear-gradient(135deg, #14050d 0 30%, #ff4f82 31% 62%, #f7d57d 63% 100%) !important;
}

@media (max-width: 370px) {
  html.native-layout-guard .quick-theme-options,
  html.native-layout-guard body[data-theme] .quick-theme-options,
  .quick-theme-options,
  body[data-theme] .quick-theme-options {
    gap: 5px !important;
  }

  html.native-layout-guard .quick-theme-options button,
  html.native-layout-guard body[data-theme] .quick-theme-options button,
  .quick-theme-options button,
  body[data-theme] .quick-theme-options button {
    min-height: 58px !important;
    padding-inline: 3px !important;
  }

  html.native-layout-guard .quick-theme-options span,
  html.native-layout-guard body[data-theme] .quick-theme-options span,
  .quick-theme-options span,
  body[data-theme] .quick-theme-options span {
    font-size: 0.52rem !important;
  }
}

/* v221-passport-single-rail: profile screen is one mobile column, never a clipped dashboard. */
html.native-layout-guard #passport.passport-band,
html.native-layout-guard body[data-theme] #passport.passport-band,
#passport.passport-band,
body[data-theme] #passport.passport-band {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

html.native-layout-guard #passport .passport-layout,
html.native-layout-guard body[data-theme] #passport .passport-layout,
#passport .passport-layout,
body[data-theme] #passport .passport-layout {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html.native-layout-guard #passport .passport-layout > *,
html.native-layout-guard body[data-theme] #passport .passport-layout > *,
#passport .passport-layout > *,
body[data-theme] #passport .passport-layout > * {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

html.native-layout-guard #passport :is(.passport-panel, .passport-card-panel, .passport-products-panel, .size-passport-panel, .passport-history-panel),
html.native-layout-guard body[data-theme] #passport :is(.passport-panel, .passport-card-panel, .passport-products-panel, .size-passport-panel, .passport-history-panel),
#passport :is(.passport-panel, .passport-card-panel, .passport-products-panel, .size-passport-panel, .passport-history-panel),
body[data-theme] #passport :is(.passport-panel, .passport-card-panel, .passport-products-panel, .size-passport-panel, .passport-history-panel) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.native-layout-guard #passport .field-grid,
html.native-layout-guard body[data-theme] #passport .field-grid,
#passport .field-grid,
body[data-theme] #passport .field-grid {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

html.native-layout-guard #passport :is(label, input, select, textarea, button),
html.native-layout-guard body[data-theme] #passport :is(label, input, select, textarea, button),
#passport :is(label, input, select, textarea, button),
body[data-theme] #passport :is(label, input, select, textarea, button) {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html.native-layout-guard #passport .passport-card,
html.native-layout-guard body[data-theme] #passport .passport-card,
#passport .passport-card,
body[data-theme] #passport .passport-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html.native-layout-guard #passport .passport-card-head,
html.native-layout-guard body[data-theme] #passport .passport-card-head,
#passport .passport-card-head,
body[data-theme] #passport .passport-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 54px !important;
  gap: 10px !important;
  align-items: start !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html.native-layout-guard #passport .passport-card-head h3,
html.native-layout-guard body[data-theme] #passport .passport-card-head h3,
#passport .passport-card-head h3,
body[data-theme] #passport .passport-card-head h3 {
  max-width: 100% !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
}

html.native-layout-guard #passport #passportScore,
html.native-layout-guard body[data-theme] #passport #passportScore,
#passport #passportScore,
body[data-theme] #passport #passportScore {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
}

html.native-layout-guard #passport :is(.passport-metrics, .size-passport-metrics),
html.native-layout-guard body[data-theme] #passport :is(.passport-metrics, .size-passport-metrics),
#passport :is(.passport-metrics, .size-passport-metrics),
body[data-theme] #passport :is(.passport-metrics, .size-passport-metrics) {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

html.native-layout-guard #passport :is(.passport-dna, .passport-reasons, .passport-products, .passport-history, .size-passport-map),
html.native-layout-guard body[data-theme] #passport :is(.passport-dna, .passport-reasons, .passport-products, .passport-history, .size-passport-map),
#passport :is(.passport-dna, .passport-reasons, .passport-products, .passport-history, .size-passport-map),
body[data-theme] #passport :is(.passport-dna, .passport-reasons, .passport-products, .passport-history, .size-passport-map) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html.native-layout-guard #passport :is(.passport-dna-row, .size-passport-row),
html.native-layout-guard body[data-theme] #passport :is(.passport-dna-row, .size-passport-row),
#passport :is(.passport-dna-row, .size-passport-row),
body[data-theme] #passport :is(.passport-dna-row, .size-passport-row) {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  overflow: hidden !important;
}

html.native-layout-guard #passport :is(.passport-dna-row *, .size-passport-row *, .passport-reasons p, .passport-history-card, .passport-product-card),
html.native-layout-guard body[data-theme] #passport :is(.passport-dna-row *, .size-passport-row *, .passport-reasons p, .passport-history-card, .passport-product-card),
#passport :is(.passport-dna-row *, .size-passport-row *, .passport-reasons p, .passport-history-card, .passport-product-card),
body[data-theme] #passport :is(.passport-dna-row *, .size-passport-row *, .passport-reasons p, .passport-history-card, .passport-product-card) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
}

html.native-layout-guard #passport .passport-product-card,
html.native-layout-guard body[data-theme] #passport .passport-product-card,
#passport .passport-product-card,
body[data-theme] #passport .passport-product-card {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  overflow: hidden !important;
}

html.native-layout-guard #passport .passport-product-card img,
html.native-layout-guard body[data-theme] #passport .passport-product-card img,
#passport .passport-product-card img,
body[data-theme] #passport .passport-product-card img {
  width: 74px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
}

/* v222-rail-transform-reset: no screen can be horizontally cropped by legacy centering transforms. */
html.native-layout-guard main,
html.native-layout-guard body[data-theme] main,
main,
body[data-theme] main {
  position: fixed !important;
  top: calc(var(--topbar-height) + var(--safe-top, 0px)) !important;
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px)) !important;
  left: var(--app-rail-left) !important;
  display: block !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard main > :is(.studio-band, .content-band, .business-band),
html.native-layout-guard body[data-theme] main > :is(.studio-band, .content-band, .business-band),
main > :is(.studio-band, .content-band, .business-band),
body[data-theme] main > :is(.studio-band, .content-band, .business-band) {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 12px 10px calc(var(--dock-height) + 22px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  overscroll-behavior: contain !important;
  scroll-padding-bottom: calc(var(--dock-height) + 34px) !important;
}

html.native-layout-guard main > :is(.studio-band, .content-band, .business-band):not(.active-view),
html.native-layout-guard body[data-theme] main > :is(.studio-band, .content-band, .business-band):not(.active-view),
main > :is(.studio-band, .content-band, .business-band):not(.active-view),
body[data-theme] main > :is(.studio-band, .content-band, .business-band):not(.active-view) {
  display: none !important;
}

html.native-layout-guard main > .active-view,
html.native-layout-guard body[data-theme] main > .active-view,
main > .active-view,
body[data-theme] main > .active-view {
  display: block !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
}

html.native-layout-guard main > .active-view > :first-child,
html.native-layout-guard body[data-theme] main > .active-view > :first-child,
main > .active-view > :first-child,
body[data-theme] main > .active-view > :first-child {
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard :is(.topbar, .mobile-dock),
html.native-layout-guard body[data-theme] :is(.topbar, .mobile-dock),
:is(.topbar, .mobile-dock),
body[data-theme] :is(.topbar, .mobile-dock) {
  right: auto !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  transform: none !important;
}

html.native-layout-guard .topbar,
html.native-layout-guard body[data-theme] .topbar,
.topbar,
body[data-theme] .topbar {
  left: var(--app-rail-left) !important;
}

html.native-layout-guard .app-shell .topbar,
html.native-layout-guard body[data-theme] .app-shell .topbar,
.app-shell .topbar,
body[data-theme] .app-shell .topbar {
  left: 0 !important;
}

/* v223-material-themes: distinct fashion materials, not five versions of the same black UI. */
body[data-theme="prism"] {
  --sb-bg-a: #071214;
  --sb-bg-b: #170914;
  --sb-surface: rgba(13, 20, 21, 0.97);
  --sb-surface-2: rgba(22, 30, 31, 0.95);
  --sb-text: #f8f2e8;
  --sb-muted: rgba(231, 222, 210, 0.72);
  --sb-line: rgba(142, 220, 211, 0.16);
  --sb-accent: #d84a6c;
  --sb-accent-2: #68cfc3;
  --sb-bg: #071214;
  --sb-rail: #0b1416;
  --sb-panel: #111b1d;
  --sb-ink: #f8f2e8;
  --sb-soft: rgba(231, 222, 210, 0.76);
  --sb-mint: #68cfc3;
  --sb-signal: #d84a6c;
  --sb-signal-dark: #7b2034;
  --sb-page-bg:
    radial-gradient(ellipse at 12% -8%, rgba(104, 207, 195, 0.14), transparent 38%),
    radial-gradient(ellipse at 92% -4%, rgba(216, 74, 108, 0.14), transparent 36%),
    linear-gradient(180deg, #071214 0%, #030506 100%);
  --sb-frame-bg:
    linear-gradient(180deg, rgba(248, 242, 232, 0.045), transparent 36%),
    linear-gradient(135deg, rgba(104, 207, 195, 0.08), rgba(216, 74, 108, 0.07)),
    #071214;
  --sb-card-bg:
    linear-gradient(180deg, rgba(248, 242, 232, 0.06), rgba(248, 242, 232, 0.014)),
    #111b1d;
}

body[data-theme="noir"] {
  --sb-bg-a: #050505;
  --sb-bg-b: #13100a;
  --sb-surface: rgba(15, 15, 14, 0.98);
  --sb-surface-2: rgba(28, 26, 22, 0.96);
  --sb-text: #f6f1e8;
  --sb-muted: rgba(226, 216, 199, 0.72);
  --sb-line: rgba(202, 169, 87, 0.2);
  --sb-accent: #caa957;
  --sb-accent-2: #d7d3c9;
  --sb-bg: #050505;
  --sb-rail: #090909;
  --sb-panel: #11100e;
  --sb-ink: #f6f1e8;
  --sb-soft: rgba(226, 216, 199, 0.76);
  --sb-mint: #caa957;
  --sb-signal: #caa957;
  --sb-signal-dark: #684d18;
  --sb-page-bg:
    radial-gradient(ellipse at 50% -10%, rgba(215, 211, 201, 0.12), transparent 40%),
    radial-gradient(ellipse at 96% 0%, rgba(202, 169, 87, 0.12), transparent 34%),
    linear-gradient(180deg, #050505 0%, #010101 100%);
  --sb-frame-bg:
    linear-gradient(180deg, rgba(246, 241, 232, 0.04), transparent 40%),
    radial-gradient(ellipse at 48% 0%, rgba(202, 169, 87, 0.08), transparent 44%),
    #050505;
  --sb-card-bg:
    linear-gradient(180deg, rgba(246, 241, 232, 0.055), rgba(246, 241, 232, 0.012)),
    #11100e;
}

body[data-theme="chrome"] {
  --sb-bg-a: #dfe3e3;
  --sb-bg-b: #262a2c;
  --sb-surface: rgba(235, 237, 236, 0.98);
  --sb-surface-2: rgba(214, 219, 218, 0.97);
  --sb-text: #111416;
  --sb-muted: rgba(17, 20, 22, 0.66);
  --sb-line: rgba(17, 20, 22, 0.16);
  --sb-accent: #a47a2b;
  --sb-accent-2: #2c7370;
  --sb-bg: #dfe3e3;
  --sb-rail: #eef0ef;
  --sb-panel: #f7f8f6;
  --sb-ink: #111416;
  --sb-soft: rgba(17, 20, 22, 0.7);
  --sb-mint: #2c7370;
  --sb-signal: #a47a2b;
  --sb-signal-dark: #5d4212;
  --sb-page-bg:
    linear-gradient(90deg, #dfe3e3, #f8f8f5 45%, #ccd2d2 100%);
  --sb-frame-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(17, 20, 22, 0.03)),
    linear-gradient(135deg, rgba(44, 115, 112, 0.1), transparent 48%),
    #eef0ef;
  --sb-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(214, 219, 218, 0.76)),
    #f7f8f6;
  color-scheme: light;
}

body[data-theme="editorial"] {
  --sb-bg-a: #f7f7f2;
  --sb-bg-b: #dfe7e4;
  --sb-surface: rgba(255, 255, 251, 0.98);
  --sb-surface-2: rgba(235, 241, 238, 0.97);
  --sb-text: #121518;
  --sb-muted: rgba(18, 21, 24, 0.66);
  --sb-line: rgba(18, 21, 24, 0.14);
  --sb-accent: #9c2842;
  --sb-accent-2: #225b65;
  --sb-bg: #f7f7f2;
  --sb-rail: #edf2ef;
  --sb-panel: #fffffb;
  --sb-ink: #121518;
  --sb-soft: rgba(18, 21, 24, 0.7);
  --sb-mint: #225b65;
  --sb-signal: #9c2842;
  --sb-signal-dark: #5d1625;
  --sb-page-bg:
    linear-gradient(120deg, #f7f7f2 0%, #e6efec 50%, #f4e6ea 100%);
  --sb-frame-bg:
    linear-gradient(180deg, rgba(34, 91, 101, 0.07), transparent 38%),
    #f7f7f2;
  --sb-card-bg:
    linear-gradient(180deg, rgba(255, 255, 251, 0.96), rgba(235, 241, 238, 0.86)),
    #fffffb;
  color-scheme: light;
}

body[data-theme="runway"] {
  --sb-bg-a: #18070d;
  --sb-bg-b: #050305;
  --sb-surface: rgba(28, 13, 18, 0.98);
  --sb-surface-2: rgba(42, 20, 28, 0.96);
  --sb-text: #fff3f4;
  --sb-muted: rgba(241, 219, 223, 0.72);
  --sb-line: rgba(239, 86, 118, 0.2);
  --sb-accent: #ef5676;
  --sb-accent-2: #ddb765;
  --sb-bg: #18070d;
  --sb-rail: #14070c;
  --sb-panel: #1f0e14;
  --sb-ink: #fff3f4;
  --sb-soft: rgba(241, 219, 223, 0.76);
  --sb-mint: #ddb765;
  --sb-signal: #ef5676;
  --sb-signal-dark: #7c1b32;
  --sb-page-bg:
    radial-gradient(ellipse at 50% -10%, rgba(239, 86, 118, 0.18), transparent 40%),
    radial-gradient(ellipse at 96% 0%, rgba(221, 183, 101, 0.12), transparent 34%),
    linear-gradient(180deg, #18070d 0%, #020102 100%);
  --sb-frame-bg:
    linear-gradient(180deg, rgba(255, 243, 244, 0.055), transparent 40%),
    radial-gradient(ellipse at 50% 0%, rgba(239, 86, 118, 0.12), transparent 44%),
    #18070d;
  --sb-card-bg:
    linear-gradient(180deg, rgba(255, 243, 244, 0.07), rgba(221, 183, 101, 0.018)),
    #1f0e14;
}

body[data-theme] {
  background: var(--sb-page-bg) !important;
  color: var(--sb-text) !important;
}

body[data-theme]::before {
  background: var(--sb-frame-bg) !important;
}

body[data-theme] :is(.topbar, .mobile-dock, .quick-action-panel, .command-panel) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-surface) 96%, white 4%), var(--sb-surface)) !important;
  border-color: var(--sb-line) !important;
  color: var(--sb-text) !important;
}

body[data-theme] main :is(.panel, [class$="-panel"], .expert-verdict-card, .expert-critique-grid article, .expert-verdict-metrics article, .item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row, .passport-card, .fit-card, .coach-card, .reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p) {
  background: var(--sb-card-bg) !important;
  border-color: var(--sb-line) !important;
  color: var(--sb-text) !important;
}

body[data-theme] main :is(h1, h2, h3, h4, strong, .expert-verdict-body h3, .expert-critique-head strong, .item-card h3) {
  color: var(--sb-text) !important;
}

body[data-theme] main :is(p, span, small, label, .expert-critique-grid article p, .expert-verdict-body p, .expert-next-move, .item-card p, .item-card span, .wardrobe-gap-card p, .wardrobe-gap-card span, .catalog-audit-row p, .watchlist-row p) {
  color: var(--sb-muted) !important;
}

body[data-theme] main :is(.eyebrow, .expert-critique-grid article > span, .expert-verdict-body > span, .expert-verdict-metrics span),
body[data-theme] .active-view-chip {
  color: var(--sb-accent-2) !important;
}

body[data-theme] :is(.primary-button, button[type="submit"], .mobile-dock a.active .dock-icon, .quick-action-button),
body[data-theme] main :is(.segmented button.active, .mode-switch button.active) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb-accent) 74%, white 18%), var(--sb-accent)) !important;
  border-color: color-mix(in srgb, var(--sb-accent) 72%, white 24%) !important;
  color: #fffaf4 !important;
}

body[data-theme="chrome"] :is(.primary-button, button[type="submit"], .mobile-dock a.active .dock-icon, .quick-action-button),
body[data-theme="chrome"] main :is(.segmented button.active, .mode-switch button.active),
body[data-theme="editorial"] :is(.primary-button, button[type="submit"], .mobile-dock a.active .dock-icon, .quick-action-button),
body[data-theme="editorial"] main :is(.segmented button.active, .mode-switch button.active) {
  color: #111416 !important;
}

/* v226-rail-geometry-lock: one phone rail, one header, one content plane. */
html.native-layout-guard,
html.native-layout-guard body,
html,
body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

html.native-layout-guard body,
body {
  --app-rail-width: min(430px, 100vw) !important;
  --app-rail-left: max(0px, calc((100vw - var(--app-rail-width)) / 2)) !important;
  --topbar-height: 72px !important;
  --dock-height: 88px !important;
}

html.native-layout-guard body::before,
body::before {
  left: var(--app-rail-left) !important;
  right: auto !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  transform: none !important;
}

html.native-layout-guard .app-shell,
html.native-layout-guard body[data-theme] .app-shell,
.app-shell,
body[data-theme] .app-shell {
  position: fixed !important;
  inset: auto auto auto var(--app-rail-left) !important;
  top: var(--safe-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  box-sizing: border-box !important;
  z-index: 80 !important;
}

html.native-layout-guard .app-shell .topbar,
html.native-layout-guard body[data-theme] .app-shell .topbar,
.app-shell .topbar,
body[data-theme] .app-shell .topbar {
  position: relative !important;
  inset: auto !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard main,
html.native-layout-guard body[data-theme] main,
main,
body[data-theme] main {
  position: fixed !important;
  inset: calc(var(--topbar-height) + var(--safe-top, 0px)) auto calc(var(--dock-height) + var(--safe-bottom, 0px)) var(--app-rail-left) !important;
  right: auto !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard main > :is(.studio-band, .content-band, .business-band),
html.native-layout-guard body[data-theme] main > :is(.studio-band, .content-band, .business-band),
main > :is(.studio-band, .content-band, .business-band),
body[data-theme] main > :is(.studio-band, .content-band, .business-band) {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  right: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 12px 10px calc(var(--dock-height) + 22px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  scroll-padding-bottom: calc(var(--dock-height) + 34px) !important;
}

html.native-layout-guard main > :is(.studio-band, .content-band, .business-band):not(.active-view),
html.native-layout-guard body[data-theme] main > :is(.studio-band, .content-band, .business-band):not(.active-view),
main > :is(.studio-band, .content-band, .business-band):not(.active-view),
body[data-theme] main > :is(.studio-band, .content-band, .business-band):not(.active-view) {
  display: none !important;
}

html.native-layout-guard main > .active-view,
html.native-layout-guard main > .active-view > *,
html.native-layout-guard body[data-theme] main > .active-view,
html.native-layout-guard body[data-theme] main > .active-view > *,
main > .active-view,
main > .active-view > *,
body[data-theme] main > .active-view,
body[data-theme] main > .active-view > * {
  max-width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard .mobile-dock,
html.native-layout-guard body[data-theme] .mobile-dock,
.mobile-dock,
body[data-theme] .mobile-dock {
  position: fixed !important;
  right: auto !important;
  bottom: var(--safe-bottom, 0px) !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  z-index: 90 !important;
}

html.native-layout-guard #quickActionButton.quick-action-button,
html.native-layout-guard body[data-theme] #quickActionButton.quick-action-button,
#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  position: fixed !important;
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px) + 14px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 66px) !important;
  width: 52px !important;
  max-width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  max-height: 52px !important;
  min-height: 52px !important;
  transform: none !important;
  box-sizing: border-box !important;
}

@media (max-width: 390px) {
  html.native-layout-guard body,
  body {
    --topbar-height: 66px !important;
    --dock-height: 82px !important;
  }

  html.native-layout-guard .app-shell .topbar,
  html.native-layout-guard body[data-theme] .app-shell .topbar,
  .app-shell .topbar,
  body[data-theme] .app-shell .topbar {
    grid-template-columns: 78px minmax(0, 1fr) 40px 46px 52px !important;
    gap: 4px !important;
    padding: 7px 8px !important;
  }

  html.native-layout-guard #quickActionButton.quick-action-button,
  html.native-layout-guard body[data-theme] #quickActionButton.quick-action-button,
  #quickActionButton.quick-action-button,
  body[data-theme] #quickActionButton.quick-action-button {
    left: calc(var(--app-rail-left) + var(--app-rail-width) - 60px) !important;
  }
}

/* v227-readable-chips-final: final override after all legacy theme layers. */
body[data-theme] {
  --sb-readable-chip-bg: color-mix(in srgb, var(--sb-accent-2, #68cfc3) 18%, transparent) !important;
  --sb-readable-chip-ink: var(--sb-text, #f8f2e8) !important;
  --sb-readable-chip-line: color-mix(in srgb, var(--sb-accent-2, #68cfc3) 32%, transparent) !important;
}

body[data-theme="chrome"],
body[data-theme="editorial"] {
  --sb-readable-chip-bg: rgba(17, 20, 22, 0.09) !important;
  --sb-readable-chip-ink: #111416 !important;
  --sb-readable-chip-line: rgba(17, 20, 22, 0.14) !important;
}

html.native-layout-guard main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills, .score-meta),
html.native-layout-guard body[data-theme] main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills, .score-meta),
main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills, .score-meta),
body[data-theme] main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills, .score-meta) {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
}

html.native-layout-guard main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills, .score-meta)::-webkit-scrollbar,
main :is(.pill-row, .item-meta, .stock-line, .passport-product-tags, .catalog-audit-tags, .wardrobe-gap-tags, .watchlist-signal, .community-item-pills, .score-meta)::-webkit-scrollbar {
  display: none !important;
}

html.native-layout-guard body[data-theme] main :is(.pill, .tag, .badge, .source-badge, .stock-badge, .trend-chip, .signal-chip, .product-chip, .mood-chip, .brand-pill, .intent-pill, .subtype-pill, .passport-product-tags span, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span, .community-item-pills span, .score-meta span),
body[data-theme] main :is(.pill, .tag, .badge, .source-badge, .stock-badge, .trend-chip, .signal-chip, .product-chip, .mood-chip, .brand-pill, .intent-pill, .subtype-pill, .passport-product-tags span, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span, .community-item-pills span, .score-meta span) {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--sb-readable-chip-line) !important;
  border-radius: 999px !important;
  background: var(--sb-readable-chip-bg) !important;
  color: var(--sb-readable-chip-ink) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  box-sizing: border-box !important;
}

#inventory .item-card .pill-row,
body[data-theme] #inventory .item-card .pill-row {
  margin-top: 8px !important;
  padding-bottom: 2px !important;
}

#inventory .item-card .pill,
body[data-theme] #inventory .item-card .pill {
  max-width: 138px !important;
}

/* v231-final-rail-lock-eof: last word on rail, crop, dock and plus icon. */
#studio .studio-grid,
#passport .passport-layout,
#inventory .inventory-layout,
#fit .fit-layout,
#coach .coach-layout,
#planner .planner-layout,
#capsule .capsule-layout,
#discover .discover-layout,
#community .community-layout,
#lookbook .lookbook-layout,
#clients .client-layout,
#report .report-layout,
#history .history-layout,
#trends .trends-layout,
#business .business-layout,
body[data-theme] #studio .studio-grid,
body[data-theme] #passport .passport-layout,
body[data-theme] #inventory .inventory-layout,
body[data-theme] #fit .fit-layout,
body[data-theme] #coach .coach-layout,
body[data-theme] #planner .planner-layout,
body[data-theme] #capsule .capsule-layout,
body[data-theme] #discover .discover-layout,
body[data-theme] #community .community-layout,
body[data-theme] #lookbook .lookbook-layout,
body[data-theme] #clients .client-layout,
body[data-theme] #report .report-layout,
body[data-theme] #history .history-layout,
body[data-theme] #trends .trends-layout,
body[data-theme] #business .business-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  transform: none !important;
}

#inventory .inventory-grid,
#inventory .wardrobe-map,
#inventory .wardrobe-gaps,
#inventory .catalog-audit-list,
#inventory .watchlist-list,
body[data-theme] #inventory .inventory-grid,
body[data-theme] #inventory .wardrobe-map,
body[data-theme] #inventory .wardrobe-gaps,
body[data-theme] #inventory .catalog-audit-list,
body[data-theme] #inventory .watchlist-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row),
body[data-theme] #inventory :is(.item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row) {
  display: grid !important;
  grid-template-columns: 94px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#inventory :is(.item-card img, .wardrobe-gap-card img, .catalog-audit-row img, .watchlist-row img),
body[data-theme] #inventory :is(.item-card img, .wardrobe-gap-card img, .catalog-audit-row img, .watchlist-row img) {
  width: 94px !important;
  min-width: 94px !important;
  max-width: 94px !important;
  height: 126px !important;
  min-height: 126px !important;
  max-height: 126px !important;
  object-fit: cover !important;
  border-radius: 18px !important;
}
html,
body,
html.native-layout-guard,
html.native-layout-guard body {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

body,
html.native-layout-guard body {
  --app-rail-width: min(470px, calc(100vw - 20px)) !important;
  --app-rail-left: max(10px, calc((100vw - var(--app-rail-width)) / 2)) !important;
  --topbar-height: 70px !important;
  --dock-height: 88px !important;
  --safe-top: env(safe-area-inset-top, 0px) !important;
  --safe-bottom: env(safe-area-inset-bottom, 0px) !important;
}

body::before,
body[data-theme]::before,
html.native-layout-guard body::before {
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

.app-shell,
body[data-theme] .app-shell,
html.native-layout-guard .app-shell {
  position: fixed !important;
  z-index: 90 !important;
  top: var(--safe-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.app-shell .topbar,
body[data-theme] .app-shell .topbar,
html.native-layout-guard .app-shell .topbar {
  position: relative !important;
  inset: auto !important;
  left: 0 !important;
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  grid-template-columns: 96px minmax(0, 1fr) 44px 56px 62px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.brand,
body[data-theme] .brand,
html.native-layout-guard .brand {
  grid-column: 1 !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 56px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.brand-logo,
.brand-logo-lock,
body[data-theme] .brand-logo,
body[data-theme] .brand-logo-lock,
html.native-layout-guard .brand-logo {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 50px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.brand :is(span, small),
.topbar-actions,
.app-status,
.theme-switch,
.command-button-label,
:is(.locale-switch, .market-switch) > span {
  display: none !important;
}

.active-view-chip,
body[data-theme] .active-view-chip {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: 0.92rem !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.topbar-switches,
body[data-theme] .topbar-switches {
  display: contents !important;
}

.command-button,
body[data-theme] .command-button {
  grid-column: 3 !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  border-radius: 15px !important;
}

.locale-switch,
body[data-theme] .locale-switch {
  grid-column: 4 !important;
}

.market-switch,
body[data-theme] .market-switch {
  grid-column: 5 !important;
}

:is(.locale-switch, .market-switch),
body[data-theme] :is(.locale-switch, .market-switch) {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  overflow: hidden !important;
}

:is(.locale-switch, .market-switch) select,
body[data-theme] :is(.locale-switch, .market-switch) select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 15px 0 6px !important;
  text-align: center !important;
  text-align-last: center !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

main,
body[data-theme] main,
html.native-layout-guard main {
  position: fixed !important;
  z-index: 2 !important;
  top: calc(var(--topbar-height) + var(--safe-top, 0px) + 8px) !important;
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px) + 8px) !important;
  left: var(--app-rail-left) !important;
  display: block !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: calc(100dvh - var(--topbar-height) - var(--dock-height) - var(--safe-top, 0px) - var(--safe-bottom, 0px) - 16px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
}

main > :is(.studio-band, .content-band, .business-band),
body[data-theme] main > :is(.studio-band, .content-band, .business-band),
html.native-layout-guard main > :is(.studio-band, .content-band, .business-band) {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 12px 22px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

main > :is(.studio-band, .content-band, .business-band):not(.active-view),
body[data-theme] main > :is(.studio-band, .content-band, .business-band):not(.active-view) {
  display: none !important;
}

main > .active-view,
main > .active-view > *,
body[data-theme] main > .active-view,
body[data-theme] main > .active-view > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

main > .active-view > :first-child,
body[data-theme] main > .active-view > :first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  margin: 0 !important;
}

main *,
body[data-theme] main * {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#studio .upload-zone,
.upload-zone,
body[data-theme] #studio .upload-zone,
body[data-theme] .upload-zone {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(320px, calc(100dvh - var(--topbar-height) - var(--dock-height) - 230px), 540px) !important;
  min-height: 320px !important;
  max-height: 540px !important;
  aspect-ratio: auto !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

#studio .upload-zone::before,
#studio .upload-zone::after,
.upload-zone::before,
.upload-zone::after,
#studio .photo-panel::before,
#studio .photo-panel::after {
  content: none !important;
  display: none !important;
}

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto,
body[data-theme] #studio .upload-zone img,
body[data-theme] .upload-zone img,
body[data-theme] #photoPreview {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  image-rendering: auto !important;
  transform: none !important;
}

.mobile-dock,
body[data-theme] .mobile-dock,
html.native-layout-guard .mobile-dock {
  position: fixed !important;
  z-index: 92 !important;
  right: auto !important;
  bottom: var(--safe-bottom, 0px) !important;
  left: var(--app-rail-left) !important;
  display: grid !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 8px 8px calc(8px + var(--safe-bottom, 0px)) !important;
  border-radius: 22px 22px 0 0 !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.mobile-dock a::before,
body[data-theme] .mobile-dock a::before {
  content: none !important;
  display: none !important;
}

.mobile-dock a,
body[data-theme] .mobile-dock a {
  display: grid !important;
  grid-template-rows: 30px auto !important;
  gap: 5px !important;
  place-items: center !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 7px 4px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  font-size: 0.74rem !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.dock-icon,
body[data-theme] .dock-icon {
  display: grid !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  place-items: center !important;
  border-radius: 13px !important;
}

.dock-icon svg,
body[data-theme] .dock-icon svg {
  width: 18px !important;
  height: 18px !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button,
.quick-action-button,
body[data-theme] .quick-action-button {
  position: fixed !important;
  z-index: 94 !important;
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px) + 14px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 66px) !important;
  display: grid !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 18px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after,
.quick-action-button::before,
.quick-action-button::after {
  content: none !important;
  display: none !important;
}

#quickActionButton.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg,
.quick-action-button svg,
body[data-theme] .quick-action-button svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#quickActionButton.quick-action-button svg path,
body[data-theme] #quickActionButton.quick-action-button svg path {
  fill: none !important;
  stroke: currentColor !important;
}

.quick-theme-options,
body[data-theme] .quick-theme-options {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

.quick-theme-options button,
body[data-theme] .quick-theme-options button {
  flex: 0 0 106px !important;
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
}

body[data-theme] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article, .repair-list > *, .vision-fixes > *, .vision-signals > *) {
  color: var(--sb-text, #f8f2e8) !important;
}

body[data-theme="chrome"] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article, .repair-list > *, .vision-fixes > *, .vision-signals > *),
body[data-theme="editorial"] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .expert-critique-grid article, .expert-verdict-metrics article, .repair-list > *, .vision-fixes > *, .vision-signals > *) {
  color: #111416 !important;
}

@media (max-width: 390px) {
  body,
  html.native-layout-guard body {
    --app-rail-width: min(430px, calc(100vw - 12px)) !important;
    --app-rail-left: max(6px, calc((100vw - var(--app-rail-width)) / 2)) !important;
    --topbar-height: 66px !important;
    --dock-height: 84px !important;
  }

  .app-shell .topbar,
  body[data-theme] .app-shell .topbar {
    grid-template-columns: 86px minmax(0, 1fr) 40px 52px 58px !important;
    gap: 5px !important;
    padding: 7px 8px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }

  #studio .upload-zone,
  .upload-zone,
  body[data-theme] #studio .upload-zone,
  body[data-theme] .upload-zone {
    height: clamp(300px, calc(100dvh - var(--topbar-height) - var(--dock-height) - 210px), 520px) !important;
    min-height: 300px !important;
  }

  #quickActionButton.quick-action-button,
  body[data-theme] #quickActionButton.quick-action-button,
  .quick-action-button,
  body[data-theme] .quick-action-button {
    left: calc(var(--app-rail-left) + var(--app-rail-width) - 60px) !important;
  }
}
/* v234-actual-eof-polish: final readable controls and inventory cards. */
.quick-action-sheet:not([hidden]),
body[data-theme] .quick-action-sheet:not([hidden]) {
  display: grid !important;
  align-items: end !important;
  justify-items: center !important;
  padding: 0 10px calc(var(--dock-height) + var(--safe-bottom, 0px) + 10px) !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.46) !important;
}

.quick-action-panel,
body[data-theme] .quick-action-panel {
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  max-height: min(72dvh, 620px) !important;
  padding: 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-radius: 24px !important;
  scrollbar-width: none !important;
}

.quick-action-panel::-webkit-scrollbar {
  display: none !important;
}

.quick-theme-picker,
body[data-theme] .quick-theme-picker {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 12px !important;
  border: 1px solid var(--sb-line, rgba(255, 255, 255, 0.14)) !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, var(--sb-panel, #111418) 88%, transparent) !important;
}

.quick-theme-options,
body[data-theme] .quick-theme-options {
  display: grid !important;
  grid-auto-columns: initial !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

.quick-theme-options button,
body[data-theme] .quick-theme-options button {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 10px !important;
  flex: none !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  text-align: left !important;
}

.quick-theme-options i,
body[data-theme] .quick-theme-options i {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 9px !important;
}

.quick-theme-options span,
body[data-theme] .quick-theme-options span {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.quick-action-grid,
body[data-theme] .quick-action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.quick-action-grid button,
body[data-theme] .quick-action-grid button {
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 10px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.quick-action-grid strong,
.quick-action-grid span,
body[data-theme] .quick-action-grid strong,
body[data-theme] .quick-action-grid span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#inventory .inventory-grid,
body[data-theme] #inventory .inventory-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

#inventory .item-card,
body[data-theme] #inventory .item-card {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 144px !important;
  padding: 10px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

#inventory .item-card > img,
body[data-theme] #inventory .item-card > img {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 124px !important;
  min-height: 124px !important;
  max-height: 124px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
}

#inventory .item-body,
body[data-theme] #inventory .item-body {
  display: grid !important;
  gap: 7px !important;
  align-content: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#inventory .item-card h3,
body[data-theme] #inventory .item-card h3 {
  display: -webkit-box !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--sb-text, #f8f2e8) !important;
  font-size: 1rem !important;
  font-weight: 820 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#inventory .item-meta,
#inventory .stock-line,
#inventory .pill-row,
body[data-theme] #inventory .item-meta,
body[data-theme] #inventory .stock-line,
body[data-theme] #inventory .pill-row {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
}

#inventory .item-meta::-webkit-scrollbar,
#inventory .stock-line::-webkit-scrollbar,
#inventory .pill-row::-webkit-scrollbar {
  display: none !important;
}

#inventory :is(.pill, .brand-pill, .source-badge, .stock-badge),
body[data-theme] #inventory :is(.pill, .brand-pill, .source-badge, .stock-badge) {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 146px !important;
  min-height: 27px !important;
  padding: 5px 9px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  text-transform: none !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

#inventory .price,
body[data-theme] #inventory .price {
  flex: 0 0 auto !important;
  color: var(--sb-text, #f8f2e8) !important;
  font-size: 0.84rem !important;
  white-space: nowrap !important;
}

#inventory :is(.product-link, .watch-button),
body[data-theme] #inventory :is(.product-link, .watch-button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 390px) {
  .quick-theme-options button,
  body[data-theme] .quick-theme-options button {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 7px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
  }

  .quick-theme-options span,
  body[data-theme] .quick-theme-options span {
    font-size: 0.72rem !important;
  }

  #inventory .item-card,
  body[data-theme] #inventory .item-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
  }

  #inventory .item-card > img,
  body[data-theme] #inventory .item-card > img {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 116px !important;
    min-height: 116px !important;
      max-height: 116px !important;
    }
  }

/* v236-photo-frame-polish: Studio image stays inside the tile and demo rotates cleanly. */
html.native-layout-guard #studio .photo-panel,
main > #studio .photo-panel,
body[data-theme] #studio .photo-panel {
  overflow: visible !important;
}

html.native-layout-guard #studio .upload-zone,
main > #studio .upload-zone,
#studio .upload-zone,
body[data-theme] #studio .upload-zone {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(330px, calc(100dvh - var(--topbar-height) - var(--dock-height) - 210px), 620px) !important;
  min-height: 330px !important;
  max-height: 620px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  contain: paint !important;
  isolation: isolate !important;
  border-radius: 28px !important;
  background: #050607 !important;
}

html.native-layout-guard #studio .upload-zone::before,
html.native-layout-guard #studio .upload-zone::after,
main > #studio .upload-zone::before,
main > #studio .upload-zone::after,
#studio .upload-zone::before,
#studio .upload-zone::after {
  content: none !important;
  display: none !important;
}

html.native-layout-guard #studio #photoPreview,
main > #studio #photoPreview,
#studio #photoPreview,
body[data-theme] #studio #photoPreview {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 22px !important;
  background: #050607 !important;
  image-rendering: auto !important;
  transform: none !important;
}

html.native-layout-guard #studio .upload-zone span,
main > #studio .upload-zone span,
#studio .upload-zone span,
body[data-theme] #studio .upload-zone span {
  right: 14px !important;
  bottom: 14px !important;
  max-width: calc(100% - 28px) !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  background: rgba(8, 8, 9, 0.84) !important;
  color: #fffaf3 !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  backdrop-filter: blur(14px) !important;
}

/* v237-fashion-theme-polish: stronger StyleBrain identity, readable themes, no clipped labels. */
body[data-theme="prism"] {
  --sb-bg-a: #07080d;
  --sb-bg-b: #1b0711;
  --sb-bg: #07080d;
  --sb-rail: #0b0d12;
  --sb-panel: #151720;
  --sb-surface: rgba(17, 18, 25, 0.96);
  --sb-surface-2: rgba(27, 22, 34, 0.94);
  --sb-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.024)), #151720;
  --sb-frame-bg: radial-gradient(circle at 8% 0%, rgba(66, 229, 212, 0.16), transparent 32%), radial-gradient(circle at 100% 4%, rgba(255, 70, 136, 0.22), transparent 34%), #07080d;
  --sb-page-bg: linear-gradient(100deg, rgba(16, 42, 38, 0.9), #050506 44%, rgba(48, 7, 24, 0.92));
  --sb-text: #fff8f4;
  --sb-ink: #fff8f4;
  --sb-muted: rgba(255, 248, 244, 0.68);
  --sb-soft: rgba(255, 248, 244, 0.72);
  --sb-line: rgba(255, 255, 255, 0.13);
  --sb-accent: #ff4b87;
  --sb-accent-2: #42e5d4;
  --sb-mint: #42e5d4;
  --sb-signal: #ff4b87;
  --sb-signal-dark: #8f173e;
  --sb-cta-bg: linear-gradient(135deg, #ff4b87, #8b5cff 52%, #42e5d4);
  --sb-active-text: #ffffff;
  --sb-sheet-bg: linear-gradient(180deg, rgba(25, 24, 34, 0.98), rgba(9, 9, 13, 0.98));
}

body[data-theme="noir"] {
  --sb-bg-a: #050505;
  --sb-bg-b: #101010;
  --sb-bg: #050505;
  --sb-rail: #080808;
  --sb-panel: #131313;
  --sb-surface: rgba(17, 17, 17, 0.97);
  --sb-surface-2: rgba(31, 31, 31, 0.95);
  --sb-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)), #131313;
  --sb-frame-bg: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12), transparent 36%), #050505;
  --sb-page-bg: linear-gradient(90deg, #050505, #101010 48%, #050505);
  --sb-text: #f7f3ee;
  --sb-ink: #f7f3ee;
  --sb-muted: rgba(247, 243, 238, 0.66);
  --sb-soft: rgba(247, 243, 238, 0.72);
  --sb-line: rgba(255, 255, 255, 0.16);
  --sb-accent: #e7e2d9;
  --sb-accent-2: #a8a8a8;
  --sb-mint: #a8a8a8;
  --sb-signal: #e7e2d9;
  --sb-signal-dark: #777068;
  --sb-cta-bg: linear-gradient(135deg, #f4f1ea, #a8a8a8);
  --sb-active-text: #080808;
  --sb-sheet-bg: linear-gradient(180deg, rgba(23, 23, 23, 0.98), rgba(5, 5, 5, 0.98));
}

body[data-theme="chrome"] {
  --sb-bg-a: #d9dddd;
  --sb-bg-b: #f6f7f5;
  --sb-bg: #d9dddd;
  --sb-rail: #eff1ef;
  --sb-panel: #fbfbf8;
  --sb-surface: rgba(246, 247, 245, 0.98);
  --sb-surface-2: rgba(222, 226, 225, 0.96);
  --sb-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(222, 226, 225, 0.8)), #fbfbf8;
  --sb-frame-bg: linear-gradient(110deg, #d7dcdb, #fbfbf8 46%, #bfc7c6);
  --sb-page-bg: linear-gradient(100deg, #d7dcdb, #fbfbf8 52%, #c4cbca);
  --sb-text: #101316;
  --sb-ink: #101316;
  --sb-muted: rgba(16, 19, 22, 0.68);
  --sb-soft: rgba(16, 19, 22, 0.72);
  --sb-line: rgba(16, 19, 22, 0.16);
  --sb-accent: #2f6d73;
  --sb-accent-2: #b25778;
  --sb-mint: #2f6d73;
  --sb-signal: #b25778;
  --sb-signal-dark: #68263f;
  --sb-cta-bg: linear-gradient(135deg, #2f6d73, #d7dcdb 56%, #b25778);
  --sb-active-text: #081012;
  --sb-sheet-bg: linear-gradient(180deg, rgba(250, 250, 247, 0.98), rgba(224, 229, 228, 0.98));
  color-scheme: light;
}

body[data-theme="editorial"] {
  --sb-bg-a: #f8f3eb;
  --sb-bg-b: #eaf0ed;
  --sb-bg: #f8f3eb;
  --sb-rail: #fffaf3;
  --sb-panel: #fffdf7;
  --sb-surface: rgba(255, 253, 247, 0.98);
  --sb-surface-2: rgba(236, 240, 236, 0.96);
  --sb-card-bg: linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(238, 242, 238, 0.88)), #fffdf7;
  --sb-frame-bg: linear-gradient(120deg, #f8f3eb 0%, #e6efec 52%, #f5dde6 100%);
  --sb-page-bg: linear-gradient(120deg, #f8f3eb 0%, #e6efec 52%, #f5dde6 100%);
  --sb-text: #131415;
  --sb-ink: #131415;
  --sb-muted: rgba(19, 20, 21, 0.68);
  --sb-soft: rgba(19, 20, 21, 0.72);
  --sb-line: rgba(19, 20, 21, 0.14);
  --sb-accent: #9d2848;
  --sb-accent-2: #1c6d68;
  --sb-mint: #1c6d68;
  --sb-signal: #9d2848;
  --sb-signal-dark: #5c1028;
  --sb-cta-bg: linear-gradient(135deg, #9d2848, #f5dde6 52%, #1c6d68);
  --sb-active-text: #ffffff;
  --sb-sheet-bg: linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(236, 240, 236, 0.98));
  color-scheme: light;
}

body[data-theme="runway"] {
  --sb-bg-a: #14030b;
  --sb-bg-b: #040204;
  --sb-bg: #14030b;
  --sb-rail: #0c0508;
  --sb-panel: #1e0b13;
  --sb-surface: rgba(29, 11, 18, 0.97);
  --sb-surface-2: rgba(45, 15, 25, 0.95);
  --sb-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 73, 128, 0.02)), #1e0b13;
  --sb-frame-bg: radial-gradient(circle at 55% 0%, rgba(255, 73, 128, 0.22), transparent 34%), radial-gradient(circle at 8% 8%, rgba(230, 217, 204, 0.08), transparent 30%), #060204;
  --sb-page-bg: linear-gradient(100deg, #050204, #14030b 48%, #2c0615);
  --sb-text: #fff5f7;
  --sb-ink: #fff5f7;
  --sb-muted: rgba(255, 245, 247, 0.68);
  --sb-soft: rgba(255, 245, 247, 0.74);
  --sb-line: rgba(255, 106, 147, 0.2);
  --sb-accent: #ff497f;
  --sb-accent-2: #e6d9cc;
  --sb-mint: #e6d9cc;
  --sb-signal: #ff497f;
  --sb-signal-dark: #8c143a;
  --sb-cta-bg: linear-gradient(135deg, #ff497f, #d11b59);
  --sb-active-text: #ffffff;
  --sb-sheet-bg: linear-gradient(180deg, rgba(37, 12, 21, 0.98), rgba(7, 3, 5, 0.98));
}

body[data-theme] {
  background: var(--sb-page-bg) !important;
  color: var(--sb-text) !important;
}

body[data-theme]::before {
  background: var(--sb-frame-bg) !important;
}

body[data-theme] :is(.topbar, .mobile-dock, .quick-action-panel, .command-panel) {
  background: var(--sb-sheet-bg, var(--sb-surface)) !important;
  border-color: var(--sb-line) !important;
  color: var(--sb-text) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

body[data-theme] main :is(.panel, [class$="-panel"], .expert-verdict-card, .expert-critique-grid article, .expert-verdict-metrics article, .item-card, .wardrobe-gap-card, .catalog-audit-row, .watchlist-row, .passport-card, .fit-card, .coach-card, .reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p) {
  background: var(--sb-card-bg) !important;
  border-color: var(--sb-line) !important;
  color: var(--sb-text) !important;
}

body[data-theme] main :is(.reasons-list p, .passport-reasons p, .planner-reasons p, .discover-reasons p, .repair-list > *, .vision-fixes > *, .vision-signals > *) {
  color: var(--sb-text) !important;
  background: color-mix(in srgb, var(--sb-panel) 86%, var(--sb-text) 8%) !important;
  border-color: var(--sb-line) !important;
}

body[data-theme] main :is(h1, h2, h3, h4, strong, .expert-verdict-body h3, .expert-critique-head strong, .item-card h3) {
  color: var(--sb-text) !important;
}

body[data-theme] main :is(p, small, label, .expert-critique-grid article p, .expert-verdict-body p, .expert-next-move, .item-card p, .item-card span, .wardrobe-gap-card p, .wardrobe-gap-card span, .catalog-audit-row p, .watchlist-row p) {
  color: var(--sb-muted) !important;
}

body[data-theme] main :is(.eyebrow, .active-view-chip, .expert-critique-grid article > span, .expert-verdict-body > span, .expert-verdict-metrics span) {
  color: var(--sb-accent-2) !important;
}

body[data-theme] :is(.primary-button, button[type="submit"], .quick-action-button),
body[data-theme] main :is(.segmented button.active, .mode-switch button.active),
body[data-theme] .mobile-dock a.active .dock-icon {
  background: var(--sb-cta-bg) !important;
  border-color: color-mix(in srgb, var(--sb-accent) 70%, white 24%) !important;
  color: var(--sb-active-text, #ffffff) !important;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--sb-accent) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after,
.quick-action-button::before,
.quick-action-button::after {
  content: none !important;
  display: none !important;
}

.quick-action-sheet:not([hidden]),
body[data-theme] .quick-action-sheet:not([hidden]) {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.58)),
    color-mix(in srgb, var(--sb-bg) 36%, transparent) !important;
}

.quick-action-panel,
body[data-theme] .quick-action-panel {
  padding: 16px !important;
  border-radius: 26px !important;
}

.quick-theme-picker,
body[data-theme] .quick-theme-picker {
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background: color-mix(in srgb, var(--sb-surface-2) 82%, transparent) !important;
  border-color: var(--sb-line) !important;
}

.quick-theme-picker > span,
body[data-theme] .quick-theme-picker > span {
  color: var(--sb-accent-2) !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.quick-theme-options,
body[data-theme] .quick-theme-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

.quick-theme-options button,
body[data-theme] .quick-theme-options button {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 54px !important;
  height: auto !important;
  padding: 10px 12px !important;
  overflow: visible !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--sb-surface) 84%, transparent) !important;
  border: 1px solid var(--sb-line) !important;
  color: var(--sb-text) !important;
  text-align: left !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

.quick-theme-options button.active,
.quick-theme-options button[aria-pressed="true"],
body[data-theme] .quick-theme-options button.active,
body[data-theme] .quick-theme-options button[aria-pressed="true"] {
  background: var(--sb-cta-bg) !important;
  border-color: color-mix(in srgb, var(--sb-accent) 70%, white 28%) !important;
  color: var(--sb-active-text, #ffffff) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--sb-accent) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.36) !important;
}

.quick-theme-options i,
body[data-theme] .quick-theme-options i {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
}

[data-theme-choice="prism"] i {
  background: conic-gradient(from 210deg, #42e5d4, #ff4b87, #8b5cff, #42e5d4) !important;
}

[data-theme-choice="noir"] i {
  background: linear-gradient(135deg, #f4f1ea, #0a0a0a 58%, #a8a8a8) !important;
}

[data-theme-choice="chrome"] i {
  background: linear-gradient(135deg, #d7dcdb, #2f6d73 54%, #b25778) !important;
}

[data-theme-choice="editorial"] i {
  background: linear-gradient(135deg, #fffaf3, #9d2848 52%, #1c6d68) !important;
}

[data-theme-choice="runway"] i {
  background: linear-gradient(135deg, #ff497f, #14030b 58%, #e6d9cc) !important;
}

.quick-theme-options span,
body[data-theme] .quick-theme-options span {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  color: inherit !important;
  font-size: 0.84rem !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

#inventory :is(.pill, .source-badge, .stock-badge, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span),
body[data-theme] #inventory :is(.pill, .source-badge, .stock-badge, .catalog-audit-tags span, .wardrobe-gap-tags span, .watchlist-signal span) {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  overflow: visible !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--sb-surface-2) 78%, var(--sb-text) 8%) !important;
  color: var(--sb-text) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

@media (max-width: 430px) {
  .quick-theme-options,
  body[data-theme] .quick-theme-options {
    grid-template-columns: 1fr !important;
  }

  .quick-theme-options button,
  body[data-theme] .quick-theme-options button {
    min-height: 50px !important;
  }
}

/* v238-native-rail-lock: full mobile width, aligned toolbar, no horizontal clipping. */
html,
html.native-layout-guard,
body,
html.native-layout-guard body {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
}

body,
html.native-layout-guard body {
  --app-rail-width: min(430px, 100vw) !important;
  --app-rail-left: max(0px, calc((100vw - var(--app-rail-width)) / 2)) !important;
  --topbar-height: 68px !important;
  --dock-height: 86px !important;
  --safe-top: env(safe-area-inset-top, 0px) !important;
  --safe-bottom: env(safe-area-inset-bottom, 0px) !important;
}

body::before,
body[data-theme]::before,
html.native-layout-guard body::before {
  position: fixed !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

.app-shell,
body[data-theme] .app-shell,
html.native-layout-guard .app-shell {
  position: fixed !important;
  z-index: 90 !important;
  top: var(--safe-top, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  left: var(--app-rail-left) !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.app-shell .topbar,
body[data-theme] .app-shell .topbar,
html.native-layout-guard .app-shell .topbar {
  position: relative !important;
  inset: auto !important;
  left: 0 !important;
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) 42px 52px 58px !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.brand,
.brand.active,
body[data-theme] .brand,
body[data-theme] .brand.active,
html.native-layout-guard .brand {
  grid-column: 1 !important;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.brand::before,
.brand::after,
body[data-theme] .brand::before,
body[data-theme] .brand::after {
  content: none !important;
  display: none !important;
}

.brand-logo,
.brand-logo-lock,
body[data-theme] .brand-logo,
body[data-theme] .brand-logo-lock,
html.native-layout-guard .brand-logo {
  display: block !important;
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.brand :is(span, small),
.topbar-actions,
.app-status,
.theme-switch,
.command-button-label,
:is(.locale-switch, .market-switch) > span {
  display: none !important;
}

.active-view-chip,
body[data-theme] .active-view-chip {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: var(--sb-text, #fff8f4) !important;
  font-size: 0.93rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.topbar-switches,
body[data-theme] .topbar-switches {
  display: contents !important;
}

.command-button,
body[data-theme] .command-button {
  grid-column: 3 !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  border-radius: 15px !important;
}

.locale-switch,
body[data-theme] .locale-switch {
  grid-column: 4 !important;
}

.market-switch,
body[data-theme] .market-switch {
  grid-column: 5 !important;
}

:is(.locale-switch, .market-switch),
body[data-theme] :is(.locale-switch, .market-switch) {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  overflow: hidden !important;
}

:is(.locale-switch, .market-switch) select,
body[data-theme] :is(.locale-switch, .market-switch) select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 13px 0 5px !important;
  overflow: hidden !important;
  text-align: center !important;
  text-align-last: center !important;
  text-overflow: clip !important;
}

main,
body[data-theme] main,
html.native-layout-guard main {
  position: fixed !important;
  z-index: 2 !important;
  top: calc(var(--topbar-height) + var(--safe-top, 0px)) !important;
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px)) !important;
  left: var(--app-rail-left) !important;
  display: block !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  height: calc(100dvh - var(--topbar-height) - var(--dock-height) - var(--safe-top, 0px) - var(--safe-bottom, 0px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
}

main > :is(.studio-band, .content-band, .business-band),
body[data-theme] main > :is(.studio-band, .content-band, .business-band),
html.native-layout-guard main > :is(.studio-band, .content-band, .business-band) {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 12px 12px 26px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  transform: none !important;
  box-sizing: border-box !important;
  scroll-padding-top: 12px !important;
  scroll-padding-bottom: 30px !important;
}

main > :is(.studio-band, .content-band, .business-band)::-webkit-scrollbar {
  display: none !important;
}

main > :is(.studio-band, .content-band, .business-band):not(.active-view),
body[data-theme] main > :is(.studio-band, .content-band, .business-band):not(.active-view) {
  display: none !important;
}

main > .active-view,
main > .active-view > *,
body[data-theme] main > .active-view,
body[data-theme] main > .active-view > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

main > .active-view > :first-child,
body[data-theme] main > .active-view > :first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  margin: 0 !important;
}

main *,
body[data-theme] main * {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#studio .photo-panel,
body[data-theme] #studio .photo-panel {
  overflow: hidden !important;
}

#studio .upload-zone,
.upload-zone,
body[data-theme] #studio .upload-zone,
body[data-theme] .upload-zone {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  height: clamp(360px, calc(100dvh - var(--topbar-height) - var(--dock-height) - 190px), 650px) !important;
  min-height: 360px !important;
  max-height: 650px !important;
  aspect-ratio: auto !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
}

#studio .upload-zone::before,
#studio .upload-zone::after,
.upload-zone::before,
.upload-zone::after,
#studio .photo-panel::before,
#studio .photo-panel::after {
  content: none !important;
  display: none !important;
}

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto,
body[data-theme] #studio .upload-zone img,
body[data-theme] .upload-zone img,
body[data-theme] #photoPreview {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  image-rendering: auto !important;
  transform: none !important;
}

.mobile-dock,
body[data-theme] .mobile-dock,
html.native-layout-guard .mobile-dock {
  position: fixed !important;
  z-index: 92 !important;
  right: auto !important;
  bottom: var(--safe-bottom, 0px) !important;
  left: var(--app-rail-left) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
  margin: 0 !important;
  padding: 8px 8px calc(8px + var(--safe-bottom, 0px)) !important;
  overflow: hidden !important;
  border-radius: 22px 22px 0 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.mobile-dock a,
body[data-theme] .mobile-dock a {
  display: grid !important;
  grid-template-rows: 30px auto !important;
  place-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 64px !important;
  padding: 7px 4px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  font-size: 0.74rem !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.mobile-dock a::before,
body[data-theme] .mobile-dock a::before {
  content: none !important;
  display: none !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button,
.quick-action-button,
body[data-theme] .quick-action-button {
  position: fixed !important;
  z-index: 94 !important;
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px) + 12px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 64px) !important;
  display: grid !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after,
.quick-action-button::before,
.quick-action-button::after {
  content: none !important;
  display: none !important;
}

#quickActionButton.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg,
.quick-action-button svg,
body[data-theme] .quick-action-button svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

@media (max-width: 370px) {
  .app-shell .topbar,
  body[data-theme] .app-shell .topbar {
    grid-template-columns: 78px minmax(0, 1fr) 40px 48px 54px !important;
    gap: 5px !important;
    padding: 8px 8px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }

  .brand-logo,
  body[data-theme] .brand-logo {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }
}

/* v241-photo-tile-aspect: the Studio photo tile follows the real image ratio without cropping the outfit. */
html.native-layout-guard #studio .upload-zone,
main > #studio .upload-zone,
#studio .upload-zone,
.upload-zone,
body[data-theme] #studio .upload-zone,
body[data-theme] .upload-zone {
  --photo-frame-aspect: 0.72 !important;
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--photo-frame-aspect) / 1 !important;
  place-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  contain: paint !important;
  isolation: isolate !important;
  line-height: 0 !important;
  border-radius: 24px !important;
  background: #050607 !important;
}

html.native-layout-guard #studio #photoPreview,
main > #studio #photoPreview,
#studio #photoPreview,
#studio .upload-zone img,
.upload-zone img,
body[data-theme] #studio #photoPreview,
body[data-theme] #studio .upload-zone img,
body[data-theme] .upload-zone img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  image-rendering: auto !important;
  transform: none !important;
  border-radius: 22px !important;
  background: transparent !important;
}

html.native-layout-guard #studio .upload-zone span,
main > #studio .upload-zone span,
#studio .upload-zone span,
body[data-theme] #studio .upload-zone span {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 2 !important;
  line-height: 1 !important;
}

/* v242-native-controls-cleanup: one FAB icon, stable dock cells, readable theme choices. */
html.native-layout-guard .mobile-dock,
.mobile-dock,
body[data-theme] .mobile-dock {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  min-height: var(--dock-height) !important;
  max-height: calc(var(--dock-height) + var(--safe-bottom, 0px)) !important;
  padding: 8px 8px calc(8px + var(--safe-bottom, 0px)) !important;
  overflow: hidden !important;
  border-radius: 22px 22px 0 0 !important;
  background: linear-gradient(180deg, rgba(26, 27, 32, 0.96), rgba(12, 13, 16, 0.98)) !important;
  box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html.native-layout-guard .mobile-dock a,
.mobile-dock a,
body[data-theme] .mobile-dock a {
  display: grid !important;
  grid-template-rows: 30px 18px !important;
  place-items: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 7px 3px !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--sb-text) 68%, transparent) !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

html.native-layout-guard .mobile-dock a::before,
html.native-layout-guard .mobile-dock a::after,
.mobile-dock a::before,
.mobile-dock a::after,
body[data-theme] .mobile-dock a::before,
body[data-theme] .mobile-dock a::after {
  content: none !important;
  display: none !important;
}

html.native-layout-guard .mobile-dock a.active,
.mobile-dock a.active,
body[data-theme] .mobile-dock a.active {
  background: color-mix(in srgb, var(--sb-accent) 22%, rgba(255, 255, 255, 0.055)) !important;
  color: var(--sb-text) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sb-accent) 58%, transparent) !important;
}

html.native-layout-guard .mobile-dock .dock-icon,
.mobile-dock .dock-icon,
body[data-theme] .mobile-dock .dock-icon {
  display: grid !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: currentColor !important;
}

html.native-layout-guard .mobile-dock .dock-icon svg,
.mobile-dock .dock-icon svg,
body[data-theme] .mobile-dock .dock-icon svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html.native-layout-guard .mobile-dock .dock-label,
.mobile-dock .dock-label,
body[data-theme] .mobile-dock .dock-label {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: currentColor !important;
  font-size: 0.72rem !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.native-layout-guard #quickActionButton.quick-action-button,
#quickActionButton.quick-action-button,
.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button,
body[data-theme] .quick-action-button {
  position: fixed !important;
  z-index: 94 !important;
  right: auto !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom, 0px) + 12px) !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 62px) !important;
  display: grid !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 17px !important;
  color: var(--sb-active-text, #ffffff) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html.native-layout-guard #quickActionButton.quick-action-button::before,
html.native-layout-guard #quickActionButton.quick-action-button::after,
#quickActionButton.quick-action-button::before,
#quickActionButton.quick-action-button::after,
.quick-action-button::before,
.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after,
body[data-theme] .quick-action-button::before,
body[data-theme] .quick-action-button::after {
  content: "" !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html.native-layout-guard #quickActionButton.quick-action-button > :not(svg),
#quickActionButton.quick-action-button > :not(svg),
.quick-action-button > :not(svg) {
  display: none !important;
}

html.native-layout-guard #quickActionButton.quick-action-button svg,
#quickActionButton.quick-action-button svg,
.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg,
body[data-theme] .quick-action-button svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html.native-layout-guard .quick-theme-picker,
.quick-theme-picker,
body[data-theme] .quick-theme-picker {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html.native-layout-guard .quick-theme-options,
.quick-theme-options,
body[data-theme] .quick-theme-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html.native-layout-guard .quick-theme-options button,
.quick-theme-options button,
body[data-theme] .quick-theme-options button {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 9px 10px !important;
  overflow: hidden !important;
  border-radius: 15px !important;
  text-align: left !important;
}

html.native-layout-guard .quick-theme-options i,
.quick-theme-options i,
body[data-theme] .quick-theme-options i {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
}

html.native-layout-guard .quick-theme-options span,
.quick-theme-options span,
body[data-theme] .quick-theme-options span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 0.76rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 360px) {
  html.native-layout-guard .quick-theme-options,
  .quick-theme-options,
  body[data-theme] .quick-theme-options {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v771-style-verdict: turn the model result into an editorial decision, with evidence below it. */
#studio .expert-style-verdict,
body[data-theme] #studio .expert-style-verdict,
html.native-layout-guard #studio .expert-style-verdict,
html.native-layout-guard body[data-theme] #studio .expert-style-verdict {
  display: grid !important;
  gap: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 73, 127, 0.68) !important;
  border-radius: 4px !important;
  background: #fffaf3 !important;
  color: #160d11 !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.36) !important;
}

#studio .expert-style-verdict-hero,
body[data-theme] #studio .expert-style-verdict-hero,
html.native-layout-guard #studio .expert-style-verdict-hero,
html.native-layout-guard body[data-theme] #studio .expert-style-verdict-hero {
  display: grid !important;
  gap: 18px !important;
  padding: 18px !important;
  background:
    linear-gradient(112deg, rgba(255, 73, 127, 0.1), transparent 42%),
    #f3e8dc !important;
  color: #160d11 !important;
}

#studio .expert-style-verdict-kicker,
body[data-theme] #studio .expert-style-verdict-kicker {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #160d11 !important;
}

#studio .expert-style-verdict-kicker span,
body[data-theme] #studio .expert-style-verdict-kicker span {
  color: #160d11 !important;
  font-size: 0.78rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.12em !important;
  line-height: 1 !important;
}

#studio .expert-style-verdict-kicker small,
body[data-theme] #studio .expert-style-verdict-kicker small {
  color: #6f5d64 !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.15 !important;
  text-align: right !important;
}

#studio .expert-style-verdict-result,
body[data-theme] #studio .expert-style-verdict-result {
  display: grid !important;
  grid-template-columns: minmax(92px, 0.78fr) minmax(0, 1.72fr) !important;
  gap: 16px !important;
  align-items: end !important;
}

#studio .expert-style-verdict-score,
body[data-theme] #studio .expert-style-verdict-score {
  display: flex !important;
  align-items: flex-end !important;
  gap: 3px !important;
  min-width: 0 !important;
  color: #160d11 !important;
}

#studio .expert-style-verdict-score strong,
body[data-theme] #studio .expert-style-verdict-score strong {
  color: #160d11 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(4.1rem, 17vw, 6.35rem) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  letter-spacing: -0.085em !important;
  line-height: 0.72 !important;
}

#studio .expert-style-verdict-score span,
body[data-theme] #studio .expert-style-verdict-score span {
  margin-bottom: -2px !important;
  color: #ed2f6c !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#studio .expert-style-verdict-copy,
body[data-theme] #studio .expert-style-verdict-copy {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

#studio .expert-style-verdict-copy > span,
body[data-theme] #studio .expert-style-verdict-copy > span {
  color: #ed2f6c !important;
  font-size: 0.64rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#studio .expert-style-verdict-copy h3,
body[data-theme] #studio .expert-style-verdict-copy h3 {
  margin: 0 !important;
  color: #160d11 !important;
  font-size: clamp(1.4rem, 5.5vw, 2.05rem) !important;
  font-weight: 920 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.96 !important;
}

#studio .expert-style-verdict-copy p,
body[data-theme] #studio .expert-style-verdict-copy p {
  margin: 2px 0 0 !important;
  color: #5f5056 !important;
  font-size: 0.78rem !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
}

#studio .expert-style-verdict-move,
body[data-theme] #studio .expert-style-verdict-move,
html.native-layout-guard #studio .expert-style-verdict-move,
html.native-layout-guard body[data-theme] #studio .expert-style-verdict-move {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 4px 12px !important;
  align-items: center !important;
  padding: 13px 14px !important;
  border: 0 !important;
  border-left: 6px solid #ed2f6c !important;
  background: #160d11 !important;
  color: #fff8ef !important;
}

#studio .expert-style-verdict-move > span,
body[data-theme] #studio .expert-style-verdict-move > span {
  grid-column: 1 !important;
  color: #ff6d9c !important;
  font-size: 0.6rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

#studio .expert-style-verdict-move > strong,
body[data-theme] #studio .expert-style-verdict-move > strong {
  grid-column: 1 !important;
  color: #fff8ef !important;
  font-size: 0.94rem !important;
  font-weight: 780 !important;
  line-height: 1.26 !important;
}

/* Kontrast CTA werdyktu: biel na #ed2f6c dawała 4,02:1 przy 12 px, czyli poniżej
   progu 4,5:1 z WCAG AA. Ta reguła wygrywa kaskadę dla wariantu `ghost-button`
   (design-v794.css:7921 podmienia kolory tylko przyciskom `.primary-button`),
   więc defekt był widoczny na żywo. Zamiast rozjaśniać tekst bierzemy akcent,
   który system designu już przypisał jasnym powierzchniom Studia
   (design-v794.css:2718 `--ui-accent: #a81243` z białym `--ui-on-accent`):
   7,41:1 i zgodność z pozostałymi wypełnionymi przyciskami tego widoku. */
#studio .expert-style-verdict-move .expert-next-move-action,
body[data-theme] #studio .expert-style-verdict-move .expert-next-move-action {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  justify-self: end !important;
  min-width: 112px !important;
  min-height: 46px !important;
  padding: 9px 12px !important;
  border: 1px solid #a81243 !important;
  border-radius: 2px !important;
  background: #a81243 !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
}

#studio .expert-style-verdict-proof,
body[data-theme] #studio .expert-style-verdict-proof {
  display: grid !important;
  gap: 16px !important;
  padding: 18px !important;
  background: #fffaf3 !important;
  color: #160d11 !important;
}

#studio .expert-style-verdict-proof .expert-verdict-body,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-body {
  gap: 2px !important;
}

#studio .expert-style-verdict-proof .expert-verdict-body > span,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-body > span,
#studio .expert-style-verdict-proof .expert-verdict-dimensions-title,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-dimensions-title {
  color: #ed2f6c !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

#studio .expert-style-verdict-proof .expert-verdict-body h3,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-body h3 {
  color: #160d11 !important;
  font-size: 1.28rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}

#studio .expert-style-verdict-proof .expert-verdict-metrics,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid #cdbdc2 !important;
  border-bottom: 1px solid #cdbdc2 !important;
}

#studio .expert-style-verdict-proof .expert-verdict-metrics article,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-metrics article {
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 11px 9px !important;
  border: 0 !important;
  border-right: 1px solid #cdbdc2 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #160d11 !important;
  box-shadow: none !important;
}

#studio .expert-style-verdict-proof .expert-verdict-metrics article:last-child,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-metrics article:last-child {
  border-right: 0 !important;
}

#studio .expert-style-verdict-proof .expert-verdict-metrics span,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-metrics span {
  color: #79666d !important;
  font-size: 0.55rem !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  text-transform: uppercase !important;
}

#studio .expert-style-verdict-proof .expert-verdict-metrics strong,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-metrics strong {
  color: #160d11 !important;
  font-size: 0.83rem !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere !important;
}

#studio .expert-style-verdict-proof .expert-verdict-metrics small,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-metrics small {
  color: #79666d !important;
  font-size: 0.58rem !important;
  line-height: 1.28 !important;
}

#studio .expert-style-verdict-proof .expert-model-quota,
body[data-theme] #studio .expert-style-verdict-proof .expert-model-quota {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #79666d !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-align: right !important;
}

#studio .expert-style-verdict-proof .expert-verdict-dimensions,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-dimensions {
  gap: 10px !important;
}

#studio .expert-style-verdict-proof .expert-verdict-dimensions-grid,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-dimensions-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

#studio .expert-style-verdict-proof .expert-verdict-dimensions article,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-dimensions article {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 5px 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #160d11 !important;
}

#studio .expert-style-verdict-proof .expert-verdict-dimensions article span,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-dimensions article span,
#studio .expert-style-verdict-proof .expert-verdict-dimensions article strong,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-dimensions article strong {
  color: #160d11 !important;
  font-size: 0.74rem !important;
  font-weight: 820 !important;
}

#studio .expert-style-verdict-proof .expert-verdict-dimensions article i,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-dimensions article i {
  grid-column: 1 / -1 !important;
  display: block !important;
  height: 4px !important;
  overflow: hidden !important;
  background: #dfd1d4 !important;
}

#studio .expert-style-verdict-proof .expert-verdict-dimensions article i b,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-dimensions article i b {
  display: block !important;
  width: var(--expert-dimension-score, 0%) !important;
  height: 100% !important;
  background: #ed2f6c !important;
}

#studio .expert-style-verdict-proof .expert-verdict-findings,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-findings {
  gap: 0 !important;
  border: 1px solid #160d11 !important;
}

#studio .expert-style-verdict-proof .expert-verdict-findings li,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-findings li {
  gap: 6px !important;
  padding: 12px !important;
  border: 0 !important;
  border-right: 1px solid #160d11 !important;
  border-radius: 0 !important;
  background: #fffaf3 !important;
}

#studio .expert-style-verdict-proof .expert-verdict-findings li:last-child,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-findings li:last-child {
  border-right: 0 !important;
  background: #160d11 !important;
}

#studio .expert-style-verdict-proof .expert-verdict-findings li span,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-findings li span {
  color: #ed2f6c !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
}

#studio .expert-style-verdict-proof .expert-verdict-findings li strong,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-findings li strong {
  color: #160d11 !important;
  font-size: 0.8rem !important;
  font-weight: 780 !important;
  line-height: 1.28 !important;
}

#studio .expert-style-verdict-proof .expert-verdict-findings li:last-child strong,
body[data-theme] #studio .expert-style-verdict-proof .expert-verdict-findings li:last-child strong {
  color: #fff8ef !important;
}

#studio .expert-style-verdict > .photo-journey,
body[data-theme] #studio .expert-style-verdict > .photo-journey {
  margin: 0 !important;
  padding: 16px 18px 18px !important;
  border: 0 !important;
  border-top: 1px solid #dfd1d4 !important;
  border-radius: 0 !important;
  background: #fffaf3 !important;
}

#studio .expert-style-verdict > .photo-journey .photo-journey-head span,
body[data-theme] #studio .expert-style-verdict > .photo-journey .photo-journey-head span {
  color: #ed2f6c !important;
}

#studio .expert-style-verdict > .photo-journey .photo-journey-head strong,
body[data-theme] #studio .expert-style-verdict > .photo-journey .photo-journey-head strong {
  color: #160d11 !important;
}

#studio .expert-style-verdict > .photo-journey .ghost-button,
body[data-theme] #studio .expert-style-verdict > .photo-journey .ghost-button {
  border-color: #160d11 !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: #160d11 !important;
}

@media (max-width: 380px) {
  #studio .expert-style-verdict-result,
  body[data-theme] #studio .expert-style-verdict-result {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #studio .expert-style-verdict-move,
  body[data-theme] #studio .expert-style-verdict-move {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #studio .expert-style-verdict-move .expert-next-move-action,
  body[data-theme] #studio .expert-style-verdict-move .expert-next-move-action {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
  }
}

/* v770b-style-pulse-contrast: isolate the light editorial surface from legacy dark-shell text colors. */
#studio .style-pulse-masthead > span,
body[data-theme] #studio .style-pulse-masthead > span,
html.native-layout-guard #studio .style-pulse-masthead > span,
html.native-layout-guard body[data-theme] #studio .style-pulse-masthead > span {
  color: #0a0a0a !important;
}

#studio .style-pulse-primary > span,
body[data-theme] #studio .style-pulse-primary > span,
html.native-layout-guard #studio .style-pulse-primary > span,
html.native-layout-guard body[data-theme] #studio .style-pulse-primary > span {
  color: #f4f0e8 !important;
}

#studio .style-pulse-primary > span:last-child,
body[data-theme] #studio .style-pulse-primary > span:last-child,
html.native-layout-guard #studio .style-pulse-primary > span:last-child,
html.native-layout-guard body[data-theme] #studio .style-pulse-primary > span:last-child {
  color: #ff477a !important;
}

#studio .style-pulse-secondary > span,
body[data-theme] #studio .style-pulse-secondary > span,
html.native-layout-guard #studio .style-pulse-secondary > span,
html.native-layout-guard body[data-theme] #studio .style-pulse-secondary > span {
  color: #0a0a0a !important;
}

/* v770-style-pulse: turn Studio from a tool index into a daily editorial decision. */
#studio .style-pulse,
body[data-theme] #studio .style-pulse,
html.native-layout-guard #studio .style-pulse,
html.native-layout-guard body[data-theme] #studio .style-pulse {
  position: relative !important;
  display: grid !important;
  grid-column: 1 / -1 !important;
  gap: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: clamp(28px, 4vw, 58px) !important;
  border: 1px solid rgba(244, 240, 232, 0.18) !important;
  border-radius: 4px !important;
  color: #0a0a0a !important;
  background:
    linear-gradient(105deg, transparent 0 62%, rgba(255, 56, 112, 0.08) 62% 100%),
    #f2eee5 !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28) !important;
  isolation: isolate !important;
}

#studio .style-pulse::after,
body[data-theme] #studio .style-pulse::after {
  content: "SB / 01";
  position: absolute;
  z-index: -1;
  right: 0;
  top: 0.5em;
  color: rgba(10, 10, 10, 0.035);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(7rem, 18vw, 17rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.1em;
  line-height: 0.8;
  pointer-events: none;
  white-space: nowrap;
}

#studio .style-pulse-masthead,
body[data-theme] #studio .style-pulse-masthead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 0 0 18px !important;
  border-bottom: 1px solid rgba(10, 10, 10, 0.72) !important;
  color: #0a0a0a !important;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
}

#studio .style-pulse-live,
body[data-theme] #studio .style-pulse-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  /* Plakietka ma `white-space: nowrap`, więc skurczona poniżej swojej treści
     nie zawinie tekstu, tylko go utnie. Na 320 px polskie „PODGLĄD” gubiło
     12 px. Sąsiedni nagłówek zawija się normalnie i absorbuje różnicę. */
  flex-shrink: 0 !important;
}

#studio .style-pulse-live i,
body[data-theme] #studio .style-pulse-live i {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #ff386f !important;
  box-shadow: 0 0 0 5px rgba(255, 56, 111, 0.12) !important;
}

#studio .style-pulse-lead,
body[data-theme] #studio .style-pulse-lead {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(230px, 0.6fr) !important;
  column-gap: clamp(28px, 6vw, 86px) !important;
  align-items: end !important;
  padding: clamp(32px, 6vw, 78px) 0 clamp(28px, 4vw, 48px) !important;
}

#studio .style-pulse-lead > span,
body[data-theme] #studio .style-pulse-lead > span {
  grid-column: 1 / -1 !important;
  margin: 0 0 12px !important;
  color: #e3235d !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.2em !important;
}

#studio .style-pulse-lead h1,
body[data-theme] #studio .style-pulse-lead h1,
html.native-layout-guard #studio .style-pulse-lead h1 {
  max-width: 920px !important;
  margin: 0 !important;
  color: #090909 !important;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(3.2rem, 7vw, 7.6rem) !important;
  font-weight: 950 !important;
  letter-spacing: -0.075em !important;
  line-height: 0.82 !important;
  text-wrap: balance !important;
}

#studio .style-pulse-lead h1 em,
body[data-theme] #studio .style-pulse-lead h1 em {
  color: #e3235d !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important;
}

#studio .style-pulse-lead p,
body[data-theme] #studio .style-pulse-lead p {
  max-width: 32ch !important;
  margin: 0 0 0 auto !important;
  padding: 0 0 8px !important;
  color: rgba(10, 10, 10, 0.72) !important;
  font-size: clamp(0.96rem, 1.4vw, 1.22rem) !important;
  font-weight: 620 !important;
  line-height: 1.45 !important;
}

#studio .style-pulse-verdict,
body[data-theme] #studio .style-pulse-verdict {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) minmax(100px, auto) !important;
  gap: clamp(16px, 3vw, 34px) !important;
  align-items: center !important;
  padding: clamp(18px, 2.6vw, 30px) 0 !important;
  border-top: 3px solid #0a0a0a !important;
  border-bottom: 1px solid rgba(10, 10, 10, 0.3) !important;
}

#studio .style-pulse-index,
body[data-theme] #studio .style-pulse-index {
  align-self: stretch !important;
  display: grid !important;
  min-width: 52px !important;
  place-items: start center !important;
  padding: 5px 16px 0 0 !important;
  border-right: 1px solid rgba(10, 10, 10, 0.28) !important;
  color: #e3235d !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.8rem !important;
  font-style: italic !important;
  line-height: 1 !important;
}

#studio .style-pulse-verdict > div:not(.style-pulse-score),
body[data-theme] #studio .style-pulse-verdict > div:not(.style-pulse-score) {
  display: grid !important;
  gap: 7px !important;
}

#studio .style-pulse-verdict > div > span,
body[data-theme] #studio .style-pulse-verdict > div > span {
  color: rgba(10, 10, 10, 0.56) !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
}

#studio .style-pulse-verdict > div > strong,
body[data-theme] #studio .style-pulse-verdict > div > strong {
  max-width: 34ch !important;
  color: #0a0a0a !important;
  font-size: clamp(1.12rem, 2.2vw, 1.72rem) !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
}

#studio .style-pulse-verdict > div > p,
body[data-theme] #studio .style-pulse-verdict > div > p {
  max-width: 62ch !important;
  margin: 0 !important;
  color: rgba(10, 10, 10, 0.62) !important;
  font-size: 0.86rem !important;
  line-height: 1.4 !important;
}

#studio .style-pulse-score,
body[data-theme] #studio .style-pulse-score {
  display: grid !important;
  align-content: center !important;
  justify-items: end !important;
  min-height: 70px !important;
  padding-left: 18px !important;
  border-left: 1px solid rgba(10, 10, 10, 0.28) !important;
}

#studio .style-pulse-score strong,
body[data-theme] #studio .style-pulse-score strong {
  color: #0a0a0a !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2rem, 4vw, 3.6rem) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.06em !important;
  line-height: 0.9 !important;
}

#studio .style-pulse-score span,
body[data-theme] #studio .style-pulse-score span {
  margin-top: 8px !important;
  color: rgba(10, 10, 10, 0.52) !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-align: right !important;
}

#studio .style-pulse-look,
body[data-theme] #studio .style-pulse-look {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 2vw, 20px) !important;
  padding: clamp(22px, 3vw, 34px) 0 !important;
}

#studio .style-pulse-piece,
body[data-theme] #studio .style-pulse-piece {
  position: relative !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: end !important;
  min-width: 0 !important;
  min-height: 190px !important;
  overflow: hidden !important;
  padding: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #141414 !important;
}

#studio .style-pulse-piece img,
body[data-theme] #studio .style-pulse-piece img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.74 !important;
  filter: saturate(0.7) contrast(1.12) !important;
}

#studio .style-pulse-piece::after,
body[data-theme] #studio .style-pulse-piece::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.88) 100%);
}

#studio .style-pulse-piece span,
#studio .style-pulse-piece strong,
body[data-theme] #studio .style-pulse-piece span,
body[data-theme] #studio .style-pulse-piece strong {
  position: relative !important;
  z-index: 1 !important;
  color: #f4f0e8 !important;
}

#studio .style-pulse-piece span,
body[data-theme] #studio .style-pulse-piece span {
  align-self: start !important;
  padding-right: 10px !important;
  color: #ff5b88 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
}

#studio .style-pulse-piece strong,
body[data-theme] #studio .style-pulse-piece strong {
  overflow: hidden !important;
  font-size: clamp(0.8rem, 1.2vw, 0.98rem) !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
}

#studio .style-pulse-actions,
body[data-theme] #studio .style-pulse-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

#studio .style-pulse-actions button,
body[data-theme] #studio .style-pulse-actions button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 14px 18px !important;
  border: 1px solid #0a0a0a !important;
  border-radius: 0 !important;
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

#studio .style-pulse-primary,
body[data-theme] #studio .style-pulse-primary {
  color: #f4f0e8 !important;
  background: #0a0a0a !important;
}

#studio .style-pulse-primary span:last-child,
body[data-theme] #studio .style-pulse-primary span:last-child {
  color: #ff477a !important;
  font-size: 1.2rem !important;
}

#studio .style-pulse-secondary,
body[data-theme] #studio .style-pulse-secondary {
  color: #0a0a0a !important;
  background: transparent !important;
}

#studio .style-pulse-ticker,
body[data-theme] #studio .style-pulse-ticker {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 28px calc(clamp(28px, 4vw, 58px) * -1) calc(clamp(28px, 4vw, 58px) * -1) !important;
  padding: 10px clamp(28px, 4vw, 58px) !important;
  overflow: hidden !important;
  color: #f4f0e8 !important;
  background: #e3235d !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  white-space: nowrap !important;
}

#studio .style-pulse-ticker i,
body[data-theme] #studio .style-pulse-ticker i {
  flex: 0 0 4px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #f4f0e8 !important;
}

@media (max-width: 680px) {
  #studio .intro-panel,
  body[data-theme] #studio .intro-panel,
  html.native-layout-guard #studio .intro-panel,
  html.native-layout-guard body[data-theme] #studio .intro-panel {
    display: none !important;
  }

  #studio .style-pulse,
  body[data-theme] #studio .style-pulse,
  html.native-layout-guard #studio .style-pulse,
  html.native-layout-guard body[data-theme] #studio .style-pulse {
    min-height: min(720px, calc(100svh - 116px)) !important;
    padding: 22px 18px !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #studio .style-pulse::after,
  body[data-theme] #studio .style-pulse::after {
    right: 0 !important;
    top: 1.35em !important;
    font-size: 8.5rem !important;
  }

  #studio .style-pulse-masthead,
  body[data-theme] #studio .style-pulse-masthead {
    padding-bottom: 14px !important;
    font-size: 0.58rem !important;
  }

  #studio .style-pulse-lead,
  body[data-theme] #studio .style-pulse-lead {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    padding: 26px 0 24px !important;
  }

  #studio .style-pulse-lead > span,
  body[data-theme] #studio .style-pulse-lead > span {
    margin-bottom: 10px !important;
    font-size: 0.61rem !important;
  }

  #studio .style-pulse-lead h1,
  body[data-theme] #studio .style-pulse-lead h1,
  html.native-layout-guard #studio .style-pulse-lead h1 {
    font-size: clamp(2.75rem, 13.4vw, 4.1rem) !important;
    line-height: 0.84 !important;
  }

  #studio .style-pulse-lead p,
  body[data-theme] #studio .style-pulse-lead p {
    margin: 18px 0 0 !important;
    padding: 0 !important;
    font-size: 0.86rem !important;
  }

  #studio .style-pulse-verdict,
  body[data-theme] #studio .style-pulse-verdict {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 14px 0 !important;
  }

  #studio .style-pulse-index,
  body[data-theme] #studio .style-pulse-index {
    min-width: 0 !important;
    padding: 3px 8px 0 0 !important;
    font-size: 1.3rem !important;
  }

  #studio .style-pulse-verdict > div > strong,
  body[data-theme] #studio .style-pulse-verdict > div > strong {
    font-size: 0.98rem !important;
  }

  #studio .style-pulse-verdict > div > p,
  body[data-theme] #studio .style-pulse-verdict > div > p {
    display: none !important;
  }

  #studio .style-pulse-score,
  body[data-theme] #studio .style-pulse-score {
    min-height: 58px !important;
    padding-left: 10px !important;
  }

  #studio .style-pulse-score strong,
  body[data-theme] #studio .style-pulse-score strong {
    font-size: 1.56rem !important;
  }

  #studio .style-pulse-score span,
  body[data-theme] #studio .style-pulse-score span {
    max-width: 9ch !important;
    font-size: 0.5rem !important;
    line-height: 1.2 !important;
  }

  #studio .style-pulse-look,
  body[data-theme] #studio .style-pulse-look {
    gap: 7px !important;
    padding: 16px 0 !important;
  }

  #studio .style-pulse-piece,
  body[data-theme] #studio .style-pulse-piece {
    min-height: 108px !important;
    padding: 8px !important;
  }

  #studio .style-pulse-piece span,
  body[data-theme] #studio .style-pulse-piece span {
    display: none !important;
  }

  #studio .style-pulse-piece strong,
  body[data-theme] #studio .style-pulse-piece strong {
    grid-column: 1 / -1 !important;
    font-size: 0.64rem !important;
  }

  #studio .style-pulse-actions,
  body[data-theme] #studio .style-pulse-actions {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) !important;
  }

  #studio .style-pulse-actions button,
  body[data-theme] #studio .style-pulse-actions button {
    min-height: 52px !important;
    padding: 10px 12px !important;
    font-size: 0.74rem !important;
  }

  #studio .style-pulse-ticker,
  body[data-theme] #studio .style-pulse-ticker {
    margin: 20px -18px -22px !important;
    padding: 9px 18px !important;
    font-size: 0.48rem !important;
  }

  #studio .style-pulse-ticker span:last-child,
  body[data-theme] #studio .style-pulse-ticker span:last-child {
    display: none !important;
  }
}

/* v885: expose only the honest local-draft Community surface and give web users
   a direct route to the two store builds from the subscription dialog. */
#community[data-state="local-only"] :is(
  .circle-identity-panel,
  .circle-room-panel,
  .community-challenge-panel,
  .community-battle-panel,
  .community-moodboard-panel,
  .community-shop-panel,
  .community-pulse-panel,
  .community-drop-panel
)[hidden] {
  display: none !important;
}

.paywall-web-options,
body[data-theme] .paywall-web-options {
  display: grid !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid rgba(215, 255, 102, 0.24) !important;
  border-radius: 10px !important;
  background: rgba(215, 255, 102, 0.07) !important;
}

.paywall-web-options[hidden],
body[data-theme] .paywall-web-options[hidden] {
  display: none !important;
}

.paywall-web-options .paywall-actions a,
body[data-theme] .paywall-web-options .paywall-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 9px 12px !important;
  text-align: center !important;
  text-decoration: none !important;
}

@media (max-width: 370px) {
  #studio .style-pulse-verdict,
  body[data-theme] #studio .style-pulse-verdict {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }

  #studio .style-pulse-score,
  body[data-theme] #studio .style-pulse-score {
    grid-column: 2 !important;
    justify-items: start !important;
    min-height: 0 !important;
    padding: 2px 0 0 !important;
    border-left: 0 !important;
  }

  #studio .style-pulse-score span,
  body[data-theme] #studio .style-pulse-score span {
    max-width: none !important;
    text-align: left !important;
  }
}

/* v766-photo-upload-progress: keep photo-read feedback inside the selected image. */
#studio .upload-zone .photo-upload-progress,
body[data-theme] #studio .upload-zone .photo-upload-progress,
html.native-layout-guard #studio .upload-zone .photo-upload-progress,
html.native-layout-guard body[data-theme] #studio .upload-zone .photo-upload-progress {
  position: absolute !important;
  z-index: 4 !important;
  top: 14px !important;
  left: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: calc(100% - 28px) !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(185, 247, 228, 0.42) !important;
  border-radius: 999px !important;
  color: var(--sb-ink, #f4f0e8) !important;
  background: rgba(5, 6, 8, 0.88) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  pointer-events: none !important;
}

#studio .upload-zone .photo-upload-progress[hidden],
body[data-theme] #studio .upload-zone .photo-upload-progress[hidden],
html.native-layout-guard #studio .upload-zone .photo-upload-progress[hidden],
html.native-layout-guard body[data-theme] #studio .upload-zone .photo-upload-progress[hidden] {
  display: none !important;
}

#studio .upload-zone .photo-upload-progress::before,
body[data-theme] #studio .upload-zone .photo-upload-progress::before,
html.native-layout-guard #studio .upload-zone .photo-upload-progress::before,
html.native-layout-guard body[data-theme] #studio .upload-zone .photo-upload-progress::before {
  width: 13px !important;
  height: 13px !important;
  flex: 0 0 13px !important;
  border: 2px solid rgba(185, 247, 228, 0.32) !important;
  border-top-color: var(--sb-mint, #b9f7e4) !important;
  border-radius: 50% !important;
  content: "" !important;
  animation: stylebrain-photo-upload-progress-spin 0.8s linear infinite !important;
}

@keyframes stylebrain-photo-upload-progress-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #studio .upload-zone .photo-upload-progress::before,
  body[data-theme] #studio .upload-zone .photo-upload-progress::before,
  html.native-layout-guard #studio .upload-zone .photo-upload-progress::before,
  html.native-layout-guard body[data-theme] #studio .upload-zone .photo-upload-progress::before {
    animation: none !important;
  }
}

/* v733-mobile-collapsed-hint: a plus alone does not explain a collapsed product panel. */
.mobile-collapse-hint,
body[data-theme] .mobile-collapse-hint,
html.native-layout-guard .mobile-collapse-hint,
html.native-layout-guard body[data-theme] .mobile-collapse-hint {
  display: none !important;
}

@media (max-width: 680px) {
  main .mobile-collapsible.is-collapsed .mobile-collapse-hint,
  body[data-theme] main .mobile-collapsible.is-collapsed .mobile-collapse-hint,
  html.native-layout-guard main .mobile-collapsible.is-collapsed .mobile-collapse-hint,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed .mobile-collapse-hint {
    display: block !important;
    margin-top: 3px !important;
    color: var(--sb-mint, #b9f7e4) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }

  main .mobile-collapse-toggle,
  body[data-theme] main .mobile-collapse-toggle,
  html.native-layout-guard main .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] main .mobile-collapse-toggle {
    font-size: 1.24rem !important;
    font-weight: 700 !important;
  }
}

/* v707-retake-action: make an honest retake request a clear, thumb-friendly next step. */
.expert-retake-photo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  margin-top: 10px !important;
  padding-inline: 16px !important;
}

/* v760-retake-guidance: expose the model's framing advice before the retry action. */
.expert-retake-guidance {
  display: grid !important;
  gap: 4px !important;
  margin: 12px 0 2px !important;
  padding: 12px !important;
  border: 1px solid color-mix(in srgb, var(--sb-mint, #b9f7e4) 46%, transparent) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--sb-mint, #b9f7e4) 10%, transparent) !important;
}

.expert-retake-guidance span {
  color: var(--muted, #b7c0cf) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
}

.expert-retake-guidance strong {
  color: var(--text, #f8fbff) !important;
  font-size: 0.94rem !important;
  line-height: 1.42 !important;
}

/* v761-retake-checklist: pair model-specific retake feedback with a compact, repeatable framing recipe. */
.expert-retake-checklist {
  display: grid !important;
  gap: 5px !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.expert-retake-checklist li {
  position: relative !important;
  padding-left: 17px !important;
  color: var(--text, #f8fbff) !important;
  font-size: 0.82rem !important;
  line-height: 1.36 !important;
}

.expert-retake-checklist li::before {
  position: absolute !important;
  left: 0 !important;
  content: "✓" !important;
  color: var(--sb-mint, #b9f7e4) !important;
  font-weight: 800 !important;
}

/* v762-retake-frame-guide: make the full-length, straight-on photo requirement scannable at a glance. */
.expert-retake-frame-guide {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 8px 0 0 !important;
  padding: 8px 10px !important;
  border: 1px dashed color-mix(in srgb, var(--sb-mint, #b9f7e4) 54%, transparent) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--sb-mint, #b9f7e4) 7%, transparent) !important;
}

.expert-retake-frame-guide-visual {
  position: relative !important;
  display: grid !important;
  justify-items: center !important;
  width: 44px !important;
  height: 68px !important;
  padding: 5px 4px !important;
  border: 1px solid color-mix(in srgb, var(--sb-mint, #b9f7e4) 68%, transparent) !important;
  border-radius: 8px !important;
}

.expert-retake-frame-guide-visual span {
  display: block !important;
  background: var(--sb-mint, #b9f7e4) !important;
}

.expert-retake-frame-guide-head {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
}

.expert-retake-frame-guide-body {
  width: 16px !important;
  height: 20px !important;
  margin-top: 2px !important;
  border-radius: 6px 6px 4px 4px !important;
}

.expert-retake-frame-guide-legs {
  width: 12px !important;
  height: 16px !important;
  margin-top: 2px !important;
  border-radius: 1px !important;
}

.expert-retake-frame-guide-shoes {
  width: 20px !important;
  height: 4px !important;
  margin-top: 2px !important;
  border-radius: 4px 4px 2px 2px !important;
}

.expert-retake-frame-guide figcaption {
  color: var(--text, #f8fbff) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

@media (max-width: 640px) {
  .expert-retake-photo {
    width: 100% !important;
  }
}

/* v708-empty-score-copy: an unscored photo needs its full explanation, not a clipped instruction. */
@media (max-width: 900px) {
  #studio .score-wrap:has(.score-ring[data-empty="true"]),
  body[data-theme] #studio .score-wrap:has(.score-ring[data-empty="true"]),
  html.native-layout-guard #studio .score-wrap:has(.score-ring[data-empty="true"]),
  html.native-layout-guard body[data-theme] #studio .score-wrap:has(.score-ring[data-empty="true"]) {
    align-items: start !important;
    min-height: 104px !important;
  }

  #studio .score-wrap:has(.score-ring[data-empty="true"]) > div:last-child,
  body[data-theme] #studio .score-wrap:has(.score-ring[data-empty="true"]) > div:last-child,
  html.native-layout-guard #studio .score-wrap:has(.score-ring[data-empty="true"]) > div:last-child,
  html.native-layout-guard body[data-theme] #studio .score-wrap:has(.score-ring[data-empty="true"]) > div:last-child {
    overflow: visible !important;
  }

  #studio .score-wrap:has(.score-ring[data-empty="true"]) #scoreText,
  body[data-theme] #studio .score-wrap:has(.score-ring[data-empty="true"]) #scoreText,
  html.native-layout-guard #studio .score-wrap:has(.score-ring[data-empty="true"]) #scoreText,
  html.native-layout-guard body[data-theme] #studio .score-wrap:has(.score-ring[data-empty="true"]) #scoreText {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }
}

/* v704-photo-ai-disclosure: explain the one-time AI photo transfer at the upload decision. */
#studio .photo-ai-notice,
body[data-theme] #studio .photo-ai-notice,
html.native-layout-guard #studio .photo-ai-notice,
html.native-layout-guard body[data-theme] #studio .photo-ai-notice {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
  margin: 8px 2px 10px !important;
  color: var(--sb-soft, rgba(244, 240, 232, 0.68)) !important;
  font-size: 0.72rem !important;
  font-weight: 540 !important;
  line-height: 1.35 !important;
}

#studio .photo-ai-notice a,
body[data-theme] #studio .photo-ai-notice a,
html.native-layout-guard #studio .photo-ai-notice a,
html.native-layout-guard body[data-theme] #studio .photo-ai-notice a {
  color: var(--sb-mint, #b9fff8) !important;
  font-weight: 760 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

#studio .photo-ai-notice a:focus-visible,
body[data-theme] #studio .photo-ai-notice a:focus-visible {
  outline: 2px solid var(--sb-mint, #b9fff8) !important;
  outline-offset: 2px !important;
}

/* v720-free-read-hierarchy: the local technical read is useful, but it must not repeat the no-score state. */
#studio .score-wrap[data-local-read],
body[data-theme] #studio .score-wrap[data-local-read],
html.native-layout-guard #studio .score-wrap[data-local-read],
html.native-layout-guard body[data-theme] #studio .score-wrap[data-local-read] {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
}

#studio .score-wrap[data-local-read] .score-ring,
body[data-theme] #studio .score-wrap[data-local-read] .score-ring,
html.native-layout-guard #studio .score-wrap[data-local-read] .score-ring,
html.native-layout-guard body[data-theme] #studio .score-wrap[data-local-read] .score-ring {
  display: none !important;
}

#studio .expert-verdict-local .expert-verdict-local-top,
body[data-theme] #studio .expert-verdict-local .expert-verdict-local-top,
html.native-layout-guard #studio .expert-verdict-local .expert-verdict-local-top,
html.native-layout-guard body[data-theme] #studio .expert-verdict-local .expert-verdict-local-top {
  grid-template-columns: minmax(0, 1fr) !important;
}


/* v248-photo-media-rail: photo tile follows the loaded image ratio, without scanner crop or letterbox chrome. */
html.native-layout-guard #studio .upload-zone,
main > #studio .upload-zone,
#studio .upload-zone,
.upload-zone,
body[data-theme] #studio .upload-zone,
body[data-theme] .upload-zone {
  --photo-frame-aspect: 0.72;
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--photo-frame-aspect) / 1 !important;
  place-items: stretch !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  contain: paint !important;
  isolation: isolate !important;
  line-height: 0 !important;
  border-radius: 24px !important;
  background: color-mix(in srgb, var(--sb-panel, #101318) 88%, #000 12%) !important;
}

html.native-layout-guard #studio .upload-zone::before,
html.native-layout-guard #studio .upload-zone::after,
main > #studio .upload-zone::before,
main > #studio .upload-zone::after,
#studio .upload-zone::before,
#studio .upload-zone::after,
.upload-zone::before,
.upload-zone::after,
body[data-theme] #studio .upload-zone::before,
body[data-theme] #studio .upload-zone::after,
body[data-theme] .upload-zone::before,
body[data-theme] .upload-zone::after {
  content: none !important;
  display: none !important;
}

html.native-layout-guard #studio #photoPreview,
html.native-layout-guard #studio .upload-zone img,
main > #studio #photoPreview,
main > #studio .upload-zone img,
#studio #photoPreview,
#studio .upload-zone img,
.upload-zone img,
body[data-theme] #studio #photoPreview,
body[data-theme] #studio .upload-zone img,
body[data-theme] .upload-zone img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  image-rendering: auto !important;
  transform: none !important;
  border-radius: 22px !important;
  background: transparent !important;
}

html.native-layout-guard #studio .upload-zone span,
main > #studio .upload-zone span,
#studio .upload-zone span,
.upload-zone span,
body[data-theme] #studio .upload-zone span,
body[data-theme] .upload-zone span {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 3 !important;
  max-width: calc(100% - 28px) !important;
  line-height: 1 !important;
}

/* v248-final-photo-fit: last override for demo and uploaded photos. */
html.native-layout-guard main > #studio .upload-zone,
html.native-layout-guard #studio .upload-zone,
main > #studio .upload-zone,
#studio .upload-zone,
body[data-theme] main > #studio .upload-zone,
body[data-theme] #studio .upload-zone {
  display: grid !important;
  grid-template: "photo" 1fr / 1fr !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--photo-frame-aspect, 0.72) / 1 !important;
  overflow: hidden !important;
  padding: 0 !important;
  place-items: stretch !important;
  box-sizing: border-box !important;
  line-height: 0 !important;
  background: #050607 !important;
}

html.native-layout-guard main > #studio #photoPreview,
html.native-layout-guard #studio #photoPreview,
main > #studio #photoPreview,
#studio #photoPreview,
body[data-theme] main > #studio #photoPreview,
body[data-theme] #studio #photoPreview {
  grid-area: photo !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  transform: none !important;
}

html.native-layout-guard main > #studio .upload-zone span,
html.native-layout-guard #studio .upload-zone span,
main > #studio .upload-zone span,
#studio .upload-zone span,
body[data-theme] main > #studio .upload-zone span,
body[data-theme] #studio .upload-zone span {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 5 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* v249-native-app-frame: final mobile-app guard, no centered voids and no duplicated FAB mark. */
html.native-layout-guard,
html.native-layout-guard body {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

html.native-layout-guard body {
  --app-rail-width: min(430px, 100vw) !important;
  --app-rail-left: max(0px, calc((100vw - var(--app-rail-width)) / 2)) !important;
  --topbar-height: 64px !important;
  --dock-height: 78px !important;
  margin: 0 !important;
  background: #050607 !important;
}

html.native-layout-guard .app-shell,
html.native-layout-guard main,
html.native-layout-guard .mobile-dock,
body[data-theme] .app-shell,
body[data-theme] main,
body[data-theme] .mobile-dock {
  left: var(--app-rail-left) !important;
  right: auto !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  min-width: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard .app-shell,
body[data-theme] .app-shell {
  position: fixed !important;
  top: env(safe-area-inset-top, 0px) !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  z-index: 90 !important;
  overflow: visible !important;
}

html.native-layout-guard .topbar,
body[data-theme] .topbar {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) 42px 52px 58px !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  max-height: var(--topbar-height) !important;
  padding: 8px 10px !important;
  overflow: visible !important;
  border-radius: 0 0 18px 18px !important;
  box-sizing: border-box !important;
}

html.native-layout-guard .brand,
body[data-theme] .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  height: 48px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.native-layout-guard .brand-logo,
body[data-theme] .brand-logo {
  display: block !important;
  width: 86px !important;
  max-width: 86px !important;
  height: 46px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.native-layout-guard main,
body[data-theme] main {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + var(--topbar-height)) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--dock-height)) !important;
  height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--topbar-height) - var(--dock-height)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.native-layout-guard main > :is(.studio-band, .content-band, .business-band),
body[data-theme] main > :is(.studio-band, .content-band, .business-band) {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 12px 12px 18px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  scroll-padding-top: 12px !important;
  scroll-padding-bottom: 22px !important;
}

html.native-layout-guard main > :is(.studio-band, .content-band, .business-band):not(.active-view),
body[data-theme] main > :is(.studio-band, .content-band, .business-band):not(.active-view) {
  display: none !important;
}

html.native-layout-guard main > .active-view > :first-child,
body[data-theme] main > .active-view > :first-child {
  display: grid !important;
  align-content: start !important;
  justify-content: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

html.native-layout-guard .mobile-dock,
body[data-theme] .mobile-dock {
  position: fixed !important;
  bottom: env(safe-area-inset-bottom, 0px) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  height: var(--dock-height) !important;
  min-height: var(--dock-height) !important;
  max-height: var(--dock-height) !important;
  padding: 7px 8px !important;
  overflow: hidden !important;
  border-radius: 18px 18px 0 0 !important;
  box-sizing: border-box !important;
  z-index: 91 !important;
}

html.native-layout-guard .mobile-dock a,
body[data-theme] .mobile-dock a {
  display: grid !important;
  grid-template-rows: 28px 16px !important;
  place-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px 3px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
}

html.native-layout-guard .mobile-dock .dock-label,
body[data-theme] .mobile-dock .dock-label {
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: 0.7rem !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.native-layout-guard #quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button {
  position: fixed !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 62px) !important;
  right: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--dock-height) + 12px) !important;
  display: grid !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  z-index: 92 !important;
}

html.native-layout-guard #quickActionButton.quick-action-button::before,
html.native-layout-guard #quickActionButton.quick-action-button::after,
body[data-theme] #quickActionButton.quick-action-button::before,
body[data-theme] #quickActionButton.quick-action-button::after {
  content: none !important;
  display: none !important;
}

html.native-layout-guard #quickActionButton.quick-action-button > :not(svg),
body[data-theme] #quickActionButton.quick-action-button > :not(svg) {
  display: none !important;
}

html.native-layout-guard #quickActionButton.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
  fill: none !important;
}

html.native-layout-guard .quick-theme-options,
body[data-theme] .quick-theme-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html.native-layout-guard .quick-theme-options button,
body[data-theme] .quick-theme-options button {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
}

html.native-layout-guard .quick-theme-options span,
body[data-theme] .quick-theme-options span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

@media (max-width: 374px) {
  html.native-layout-guard .topbar,
  body[data-theme] .topbar {
    grid-template-columns: 82px minmax(0, 1fr) 40px 48px 54px !important;
    padding-inline: 8px !important;
  }

  html.native-layout-guard .brand,
  body[data-theme] .brand {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
  }

  html.native-layout-guard .brand-logo,
  body[data-theme] .brand-logo {
    width: 78px !important;
    max-width: 78px !important;
  }
}

/* v250-readable-product-cards: final guard for marketplace cards, chips and dense product rows. */
html.native-layout-guard main,
body[data-theme] main {
  container-type: inline-size;
}

html.native-layout-guard main *,
body[data-theme] main * {
  min-width: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html.native-layout-guard main :is(.pill, .brand-pill, .source-badge, .stock-badge, .subtype-pill, .intent-pill, .tag, .badge, .signal-chip, .trend-chip, .mood-chip, .product-chip),
body[data-theme] main :is(.pill, .brand-pill, .source-badge, .stock-badge, .subtype-pill, .intent-pill, .tag, .badge, .signal-chip, .trend-chip, .mood-chip, .product-chip) {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: 156px !important;
  min-height: 28px !important;
  padding: 7px 10px !important;
  overflow: hidden !important;
  color: var(--text, #f8f5ef) !important;
  font-size: 0.76rem !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  text-orientation: mixed !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  writing-mode: horizontal-tb !important;
}

html.native-layout-guard main :is(.pill-row, .item-meta, .stock-line, .chip-row, .tag-row, .signal-row, .product-tags),
body[data-theme] main :is(.pill-row, .item-meta, .stock-line, .chip-row, .tag-row, .signal-row, .product-tags) {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding-bottom: 1px !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
}

html.native-layout-guard main :is(.pill-row, .item-meta, .stock-line, .chip-row, .tag-row, .signal-row, .product-tags)::-webkit-scrollbar,
body[data-theme] main :is(.pill-row, .item-meta, .stock-line, .chip-row, .tag-row, .signal-row, .product-tags)::-webkit-scrollbar {
  display: none !important;
}

html.native-layout-guard #inventory .inventory-layout,
body[data-theme] #inventory .inventory-layout,
html.native-layout-guard #inventory .inventory-grid,
body[data-theme] #inventory .inventory-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

html.native-layout-guard #inventory .item-card,
body[data-theme] #inventory .item-card {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 138px !important;
  margin: 0 !important;
  padding: 10px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
}

html.native-layout-guard #inventory .item-card > img,
body[data-theme] #inventory .item-card > img {
  display: block !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 118px !important;
  min-height: 118px !important;
  max-height: 118px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

html.native-layout-guard #inventory .item-body,
body[data-theme] #inventory .item-body {
  display: grid !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html.native-layout-guard #inventory .item-card h3,
body[data-theme] #inventory .item-card h3 {
  display: -webkit-box !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--text, #f8f5ef) !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html.native-layout-guard #inventory .item-meta,
body[data-theme] #inventory .item-meta,
html.native-layout-guard #inventory .stock-line,
body[data-theme] #inventory .stock-line {
  color: var(--muted, rgba(248, 245, 239, 0.68)) !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
}

html.native-layout-guard #inventory .price,
body[data-theme] #inventory .price {
  flex: 0 0 auto !important;
  color: var(--text, #f8f5ef) !important;
  font-size: 0.86rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html.native-layout-guard #inventory :is(.product-link, .watch-button),
body[data-theme] #inventory :is(.product-link, .watch-button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: start !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 32px !important;
  padding: 8px 12px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html.native-layout-guard :is(.outfit-row, .capsule-item, .watchlist-row, .community-shop-product, .product-report-row, .catalog-audit-row, .wardrobe-gap-card),
body[data-theme] :is(.outfit-row, .capsule-item, .watchlist-row, .community-shop-product, .product-report-row, .catalog-audit-row, .wardrobe-gap-card) {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

html.native-layout-guard :is(.outfit-row, .capsule-item, .watchlist-row, .community-shop-product, .product-report-row) img,
body[data-theme] :is(.outfit-row, .capsule-item, .watchlist-row, .community-shop-product, .product-report-row) img {
  flex: 0 0 auto !important;
  object-fit: cover !important;
  object-position: center !important;
}

html.native-layout-guard :is(.outfit-row, .capsule-item, .watchlist-row, .community-shop-product, .product-report-row, .catalog-audit-row, .wardrobe-gap-card) :is(h3, strong, p, span),
body[data-theme] :is(.outfit-row, .capsule-item, .watchlist-row, .community-shop-product, .product-report-row, .catalog-audit-row, .wardrobe-gap-card) :is(h3, strong, p, span) {
  max-width: 100%;
  letter-spacing: 0 !important;
  word-break: normal !important;
}

@media (max-width: 374px) {
  html.native-layout-guard #inventory .item-card,
  body[data-theme] #inventory .item-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html.native-layout-guard #inventory .item-card > img,
  body[data-theme] #inventory .item-card > img {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
  }

  html.native-layout-guard main :is(.pill, .brand-pill, .source-badge, .stock-badge, .subtype-pill, .intent-pill, .tag, .badge, .signal-chip, .trend-chip, .mood-chip, .product-chip),
  body[data-theme] main :is(.pill, .brand-pill, .source-badge, .stock-badge, .subtype-pill, .intent-pill, .tag, .badge, .signal-chip, .trend-chip, .mood-chip, .product-chip) {
    max-width: 132px !important;
    min-height: 26px !important;
    padding: 6px 8px !important;
    font-size: 0.7rem !important;
  }
}

/* v252-photo-mat-fit: full image stays uncropped while the tile is visually filled by the same photo. */
html.native-layout-guard main > #studio .upload-zone,
html.native-layout-guard #studio .upload-zone,
main > #studio .upload-zone,
#studio .upload-zone,
body[data-theme] main > #studio .upload-zone,
body[data-theme] #studio .upload-zone {
  display: grid !important;
  grid-template: "photo" 1fr / 1fr !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--photo-frame-aspect, 0.72) / 1 !important;
  overflow: hidden !important;
  contain: paint !important;
  isolation: isolate !important;
  padding: 0 !important;
  place-items: stretch !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 24% 12%, color-mix(in srgb, var(--sb-accent, #ff4778) 24%, transparent), transparent 28%),
    #07080a !important;
  line-height: 0 !important;
  box-sizing: border-box !important;
}

html.native-layout-guard main > #studio .upload-zone::before,
html.native-layout-guard #studio .upload-zone::before,
main > #studio .upload-zone::before,
#studio .upload-zone::before,
body[data-theme] main > #studio .upload-zone::before,
body[data-theme] #studio .upload-zone::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-image: var(--studio-photo-backdrop, none) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  opacity: 0.74 !important;
  pointer-events: none !important;
  filter: blur(18px) saturate(1.12) brightness(0.7) !important;
  transform: scale(1.08) !important;
}

html.native-layout-guard main > #studio .upload-zone::after,
html.native-layout-guard #studio .upload-zone::after,
main > #studio .upload-zone::after,
#studio .upload-zone::after,
body[data-theme] main > #studio .upload-zone::after,
body[data-theme] #studio .upload-zone::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: inherit !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.28),
    inset 0 -42px 76px rgba(0, 0, 0, 0.3) !important;
  pointer-events: none !important;
}

html.native-layout-guard main > #studio #photoPreview,
html.native-layout-guard #studio #photoPreview,
main > #studio #photoPreview,
#studio #photoPreview,
body[data-theme] main > #studio #photoPreview,
body[data-theme] #studio #photoPreview {
  grid-area: photo !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: inherit !important;
  background: transparent !important;
  image-rendering: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

html.native-layout-guard main > #studio .upload-zone span,
html.native-layout-guard #studio .upload-zone span,
main > #studio .upload-zone span,
#studio .upload-zone span,
body[data-theme] main > #studio .upload-zone span,
body[data-theme] #studio .upload-zone span {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 3 !important;
  max-width: calc(100% - 24px) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* v253-theme-sheet-polish: readable fashion themes, no clipped P... labels, no debug-looking chips. */
html.native-layout-guard .quick-theme-picker,
.quick-theme-picker,
body[data-theme] .quick-theme-picker {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px !important;
  overflow: visible !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
    color-mix(in srgb, var(--sb-panel, #151720) 94%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--sb-line, rgba(255, 255, 255, 0.14)) 84%, var(--sb-accent, #ff4b87) 16%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html.native-layout-guard .quick-theme-picker > span,
.quick-theme-picker > span,
body[data-theme] .quick-theme-picker > span {
  display: block !important;
  color: var(--sb-accent-2, #42e5d4) !important;
  font-size: 0.76rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

html.native-layout-guard .quick-theme-options,
.quick-theme-options,
body[data-theme] .quick-theme-options {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}

html.native-layout-guard .quick-theme-options button,
.quick-theme-options button,
body[data-theme] .quick-theme-options button {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 54px !important;
  height: auto !important;
  padding: 9px 12px !important;
  overflow: visible !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    color-mix(in srgb, var(--sb-surface, #151720) 92%, black 8%) !important;
  border: 1px solid color-mix(in srgb, var(--sb-line, rgba(255, 255, 255, 0.14)) 86%, white 14%) !important;
  color: var(--sb-text, #fff8f4) !important;
  text-align: left !important;
  box-shadow: none !important;
}

html.native-layout-guard .quick-theme-options button::before,
html.native-layout-guard .quick-theme-options button::after,
.quick-theme-options button::before,
.quick-theme-options button::after,
body[data-theme] .quick-theme-options button::before,
body[data-theme] .quick-theme-options button::after {
  content: none !important;
  display: none !important;
}

html.native-layout-guard .quick-theme-options button.active,
html.native-layout-guard .quick-theme-options button[aria-pressed="true"],
.quick-theme-options button.active,
.quick-theme-options button[aria-pressed="true"],
body[data-theme] .quick-theme-options button.active,
body[data-theme] .quick-theme-options button[aria-pressed="true"] {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sb-accent, #ff4b87) 88%, white 12%), color-mix(in srgb, var(--sb-accent-2, #42e5d4) 70%, var(--sb-accent, #ff4b87) 30%)) !important;
  border-color: color-mix(in srgb, var(--sb-accent, #ff4b87) 64%, white 36%) !important;
  color: var(--sb-active-text, #ffffff) !important;
  box-shadow:
    0 14px 34px color-mix(in srgb, var(--sb-accent, #ff4b87) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

html.native-layout-guard .quick-theme-options i,
.quick-theme-options i,
body[data-theme] .quick-theme-options i {
  display: block !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 34px !important;
  min-height: 34px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -10px 20px rgba(0, 0, 0, 0.18) !important;
}

html.native-layout-guard [data-theme-choice="prism"] i,
[data-theme-choice="prism"] i {
  background: linear-gradient(135deg, #42e5d4 0 31%, #071214 31% 40%, #ff4b87 40% 70%, #8b5cff 70% 100%) !important;
}

html.native-layout-guard [data-theme-choice="noir"] i,
[data-theme-choice="noir"] i {
  background: linear-gradient(135deg, #f4f1ea 0 34%, #0a0a0a 34% 68%, #b8b8b8 68% 100%) !important;
}

html.native-layout-guard [data-theme-choice="chrome"] i,
[data-theme-choice="chrome"] i {
  background: linear-gradient(135deg, #eef2f1 0 32%, #2f6d73 32% 66%, #b25778 66% 100%) !important;
}

html.native-layout-guard [data-theme-choice="editorial"] i,
[data-theme-choice="editorial"] i {
  background: linear-gradient(135deg, #fffaf3 0 34%, #1c6d68 34% 66%, #9d2848 66% 100%) !important;
}

html.native-layout-guard [data-theme-choice="runway"] i,
[data-theme-choice="runway"] i {
  background: linear-gradient(135deg, #ff497f 0 36%, #14030b 36% 70%, #e6d9cc 70% 100%) !important;
}

html.native-layout-guard .quick-theme-options span,
.quick-theme-options span,
body[data-theme] .quick-theme-options span {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  color: inherit !important;
  font-size: 0.9rem !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

html.native-layout-guard .quick-theme-options button[title],
.quick-theme-options button[title],
body[data-theme] .quick-theme-options button[title] {
  text-indent: 0 !important;
}

@media (max-width: 360px) {
  html.native-layout-guard .quick-theme-options button,
  .quick-theme-options button,
  body[data-theme] .quick-theme-options button {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 9px 10px !important;
  }

  html.native-layout-guard .quick-theme-options i,
  .quick-theme-options i,
  body[data-theme] .quick-theme-options i {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
  }

  html.native-layout-guard .quick-theme-options span,
  .quick-theme-options span,
  body[data-theme] .quick-theme-options span {
    font-size: 0.84rem !important;
  }
}

/* v171: final visual QA guard. Loaded after styles.css, so it owns overflow fixes. */
#photoInput,
#workspaceInput,
#csvInput {
  display: none !important;
}

.mobile-dock {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  overflow: hidden !important;
  padding: 8px 8px calc(8px + var(--safe-bottom)) !important;
}

.mobile-dock a {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 8px 3px !important;
}

.dock-label,
.mobile-dock .dock-label {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: clamp(0.62rem, 2.45vw, 0.74rem) !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#studio .upload-zone,
.upload-zone {
  min-width: 0 !important;
  max-width: 100% !important;
}

#studio .upload-zone span,
.upload-zone span {
  right: 12px !important;
  bottom: 12px !important;
  left: auto !important;
  display: block !important;
  max-width: calc(100% - 24px) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 9px 12px !important;
  font-size: clamp(0.76rem, 3.1vw, 0.9rem) !important;
  line-height: 1.08 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

main .section-head {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  overflow: hidden !important;
}

main .section-actions {
  display: flex !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  overflow: hidden !important;
}

main .section-actions > * {
  min-width: 0 !important;
}

#passport .passport-product-card,
#coach .coach-item-card,
.passport-product-card,
.coach-item-card {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#passport .passport-product-card img,
#coach .coach-item-card img,
.passport-product-card img,
.coach-item-card img {
  width: 72px !important;
  min-width: 72px !important;
  height: 86px !important;
  min-height: 86px !important;
  object-fit: cover !important;
}

#passport .passport-product-card > div,
#coach .coach-item-card > div,
.passport-product-card > div,
.coach-item-card > div {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#passport .passport-product-tags,
#coach .coach-item-tags,
.passport-product-tags,
.coach-item-tags,
html.native-layout-guard #inventory :is(.pill-row, .item-meta, .stock-line, .wardrobe-gap-tags, .watchlist-signal, .catalog-audit-tags),
body[data-theme] #inventory :is(.pill-row, .item-meta, .stock-line, .wardrobe-gap-tags, .watchlist-signal, .catalog-audit-tags),
#inventory :is(.pill-row, .item-meta, .stock-line, .wardrobe-gap-tags, .watchlist-signal, .catalog-audit-tags) {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

#passport .passport-product-tags span,
#coach .coach-item-tags span,
.passport-product-tags span,
.coach-item-tags span,
html.native-layout-guard #inventory :is(.pill, .source-badge, .stock-badge, .wardrobe-gap-tags span, .watchlist-signal span, .catalog-audit-tags span),
body[data-theme] #inventory :is(.pill, .source-badge, .stock-badge, .wardrobe-gap-tags span, .watchlist-signal span, .catalog-audit-tags span),
#inventory :is(.pill, .source-badge, .stock-badge, .wardrobe-gap-tags span, .watchlist-signal span, .catalog-audit-tags span) {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: clamp(0.62rem, 2.55vw, 0.72rem) !important;
  line-height: 1.12 !important;
  overflow-wrap: anywhere !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

#passport .passport-product-card .product-link,
#coach .coach-item-card .product-link,
.passport-product-card .product-link,
.coach-item-card .product-link {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 2px !important;
  text-align: center !important;
}

#coachItems,
#coach .coach-items,
.coach-items {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 10px !important;
  overflow-x: hidden !important;
}

#coachItems > .coach-item-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#business .business-steps,
.business-steps {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 10px !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  scroll-snap-type: none !important;
}

#business .business-step,
.business-step {
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  scroll-snap-align: none !important;
}

@media (max-width: 380px) {
  #passport .passport-product-card,
  #coach .coach-item-card,
  .passport-product-card,
  .coach-item-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
  }

  #passport .passport-product-card img,
  #coach .coach-item-card img,
  .passport-product-card img,
  .coach-item-card img {
    width: 64px !important;
    min-width: 64px !important;
    height: 78px !important;
    min-height: 78px !important;
  }
}

html.native-layout-guard body[data-theme] #inventory .item-card .pill-row,
html.native-layout-guard body[data-theme] #inventory .item-meta,
html.native-layout-guard body[data-theme] #inventory .stock-line,
html.native-layout-guard body[data-theme] #inventory .wardrobe-gap-tags,
html.native-layout-guard body[data-theme] #inventory .watchlist-signal,
html.native-layout-guard body[data-theme] #inventory .catalog-audit-tags,
body[data-theme] #inventory .item-card .pill-row,
body[data-theme] #inventory .item-meta,
body[data-theme] #inventory .stock-line,
body[data-theme] #inventory .wardrobe-gap-tags,
body[data-theme] #inventory .watchlist-signal,
body[data-theme] #inventory .catalog-audit-tags,
#inventory .item-card .pill-row,
#inventory .item-meta,
#inventory .stock-line,
#inventory .wardrobe-gap-tags,
#inventory .watchlist-signal,
#inventory .catalog-audit-tags {
  flex-flow: row wrap !important;
  flex-wrap: wrap !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

html.native-layout-guard body[data-theme] #inventory .item-card .pill-row > *,
html.native-layout-guard body[data-theme] #inventory .item-meta > *,
html.native-layout-guard body[data-theme] #inventory .stock-line > *,
html.native-layout-guard body[data-theme] #inventory .wardrobe-gap-tags > *,
html.native-layout-guard body[data-theme] #inventory .watchlist-signal > *,
html.native-layout-guard body[data-theme] #inventory .catalog-audit-tags > *,
body[data-theme] #inventory .item-card .pill-row > *,
body[data-theme] #inventory .item-meta > *,
body[data-theme] #inventory .stock-line > *,
body[data-theme] #inventory .wardrobe-gap-tags > *,
body[data-theme] #inventory .watchlist-signal > *,
body[data-theme] #inventory .catalog-audit-tags > *,
#inventory .item-card .pill-row > *,
#inventory .item-meta > *,
#inventory .stock-line > *,
#inventory .wardrobe-gap-tags > *,
#inventory .watchlist-signal > *,
#inventory .catalog-audit-tags > * {
  flex: 0 1 auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
}

/* v390-full-audit-a11y: keep dense mobile UI tappable and readable. */
main :is(
  button,
  button[type="submit"],
  .primary-button,
  .ghost-button,
  .product-link,
  .mini-product-link,
  .watch-button,
  .segmented button,
  input,
  select
) {
  min-height: 44px !important;
}

main textarea {
  min-height: 104px !important;
}

main :is(.product-link, .mini-product-link, .watch-button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 72px !important;
  padding-inline: 12px !important;
  white-space: nowrap !important;
}

main :is(.look-stats, .restock-tags, .discover-tags, .pill-row) {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

main :is(.look-stats, .restock-tags, .discover-tags, .pill-row) > * {
  min-height: 26px !important;
}

main :is(#leadForm, #trendForm, .client-form, .trend-form, .item-form) label,
main :is(.capture-field-grid, .photo-capture-editor) label {
  background: rgba(16, 18, 26, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.94) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

main :is(#leadForm, #trendForm, .client-form, .trend-form, .item-form) label > :is(input, select, textarea),
main :is(.capture-field-grid, .photo-capture-editor) label > :is(input, select, textarea) {
  background: rgba(18, 15, 25, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}

main :is(#leadForm, #trendForm, .client-form, .trend-form, .item-form) label > :is(input, textarea)::placeholder,
main :is(.capture-field-grid, .photo-capture-editor) label > :is(input, textarea)::placeholder {
  color: rgba(255, 255, 255, 0.68) !important;
}

main :is(
  #studio,
  #passport,
  #coach,
  #fit,
  #planner,
  #capsule,
  #discover,
  #brain,
  #inventory,
  #lookbook,
  #clients,
  #report,
  #history,
  #community,
  #trends,
  #business
) :is(
  button,
  button[type="submit"],
  .primary-button,
  .ghost-button,
  .product-link,
  .mini-product-link,
  .watch-button,
  .segmented button,
  input,
  select
) {
  height: auto !important;
  min-height: 44px !important;
  min-block-size: 44px !important;
}

main :is(#capsule, #studio, #passport, #coach, #fit, #inventory) :is(.product-link, .mini-product-link) {
  width: auto !important;
  min-width: 72px !important;
  flex-basis: auto !important;
}

main :is(#trends, #clients) .ghost-button {
  min-width: 52px !important;
}

#studio #analyzeButton,
body[data-theme] #studio #analyzeButton,
#studio #photoDescriptorInput,
body[data-theme] #studio #photoDescriptorInput,
#inventory .segmented button,
body[data-theme] #inventory .segmented button,
#community .social-platform-link,
body[data-theme] #community .social-platform-link {
  height: auto !important;
  min-height: 44px !important;
  min-block-size: 44px !important;
}

#trends .trend-card .ghost-button,
body[data-theme] #trends .trend-card .ghost-button {
  width: auto !important;
  min-width: 52px !important;
  max-width: 100% !important;
}

html.native-layout-guard #inventory :is(.product-link, .mini-product-link, .watch-button),
html.native-layout-guard body[data-theme] #inventory :is(.product-link, .mini-product-link, .watch-button),
#inventory :is(.product-link, .mini-product-link, .watch-button),
body[data-theme] #inventory :is(.product-link, .mini-product-link, .watch-button) {
  height: auto !important;
  min-height: 44px !important;
  min-block-size: 44px !important;
  min-width: 72px !important;
  padding: 0 12px !important;
}

/* v404-payments: native IAP paywall and visible Pro entitlement state. */
.subscription-pill,
body[data-theme] .subscription-pill {
  position: fixed !important;
  z-index: 1900 !important;
  top: calc(var(--app-stage-top, 0px) + var(--safe-top, 0px) + var(--topbar-height, 64px) + 8px) !important;
  right: max(12px, calc((100vw - min(100vw, 430px)) / 2 + 12px)) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 104px !important;
  min-height: 38px !important;
  max-width: min(160px, calc(100vw - 24px)) !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  background: rgba(8, 10, 14, 0.86) !important;
  color: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(14px) !important;
}

.subscription-pill span {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 32px !important;
  min-height: 24px !important;
  border-radius: 6px !important;
  background: #d7ff66 !important;
  color: #111 !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.subscription-pill strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 0.76rem !important;
  letter-spacing: 0 !important;
}

.subscription-pill.is-active span {
  background: #58e6b6 !important;
}

.subscription-pill.is-active,
body[data-theme] .subscription-pill.is-active {
  display: none !important;
}

.topbar-actions a[data-locked],
.mobile-dock a[data-locked],
.quick-action-grid button[data-locked] {
  opacity: 0.58 !important;
}

.quick-action-grid button[data-locked] {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

body.paywall-open {
  overflow: hidden !important;
}

.paywall-dialog[hidden] {
  display: none !important;
}

.paywall-dialog,
body[data-theme] .paywall-dialog {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2400 !important;
  display: grid !important;
  place-items: center !important;
  padding: calc(var(--safe-top, 0px) + 14px) 14px calc(var(--safe-bottom, 0px) + 14px) !important;
}

.paywall-scrim {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(3, 5, 8, 0.68) !important;
  backdrop-filter: blur(16px) !important;
}

.paywall-panel,
body[data-theme] .paywall-panel {
  position: relative !important;
  width: min(430px, 100%) !important;
  max-height: calc(100dvh - var(--safe-top, 0px) - var(--safe-bottom, 0px) - 28px) !important;
  overflow: auto !important;
  display: grid !important;
  gap: 14px !important;
  padding: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  background: rgba(13, 15, 21, 0.96) !important;
  color: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42) !important;
}

.paywall-close {
  justify-self: end !important;
  min-width: 78px !important;
}

.paywall-panel h2 {
  margin: 0 !important;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

.paywall-panel p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.74) !important;
  font-size: 0.94rem !important;
  line-height: 1.46 !important;
}

.paywall-store-status,
body[data-theme] .paywall-store-status {
  /* Element jest elementem grida w `.paywall-scroll-body`. Jawny `min-height`
     zastępuje automatyczny rozmiar minimalny i zamraża ścieżkę wiersza na tej
     wartości, przez co dłuższy komunikat wychodził poza ramkę (do 22 px, we
     wszystkich czterech językach). Wysokość jednoliniowego statusu daje tu
     padding, więc pudełko wygląda tak samo, a rośnie razem z treścią. */
  min-height: auto !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
}

.paywall-store-status[data-tone="success"] {
  border-color: rgba(88, 230, 182, 0.34) !important;
  color: #aaf2dc !important;
}

.paywall-store-status[data-tone="warning"] {
  border-color: rgba(255, 199, 95, 0.36) !important;
  color: #ffd997 !important;
}

.paywall-products {
  display: grid !important;
  gap: 10px !important;
}

.paywall-product,
body[data-theme] .paywall-product {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 72px !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-align: left !important;
}

.paywall-product:hover,
.paywall-product:focus-visible {
  border-color: rgba(215, 255, 102, 0.5) !important;
  background: rgba(215, 255, 102, 0.11) !important;
}

.paywall-product span {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.paywall-product b,
body[data-theme] .paywall-product b {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 3px 7px !important;
  border: 1px solid rgba(88, 230, 182, 0.32) !important;
  border-radius: 999px !important;
  background: rgba(88, 230, 182, 0.11) !important;
  color: #aaf2dc !important;
  font-size: 0.68rem !important;
  font-weight: 780 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

.paywall-product strong,
.paywall-product small {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

.paywall-product strong {
  font-size: 0.98rem !important;
  letter-spacing: 0 !important;
}

.paywall-product small {
  color: rgba(255, 255, 255, 0.66) !important;
  font-size: 0.8rem !important;
  line-height: 1.35 !important;
}

.paywall-product em {
  justify-self: end !important;
  max-width: 116px !important;
  color: #d7ff66 !important;
  font-style: normal !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  text-align: right !important;
  overflow-wrap: anywhere !important;
}

.paywall-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.paywall-actions .ghost-button {
  min-width: 0 !important;
  width: 100% !important;
  white-space: normal !important;
}

@media (max-width: 420px) {
  .subscription-pill,
  body[data-theme] .subscription-pill {
    top: auto !important;
    right: auto !important;
    min-width: 92px !important;
    max-width: 132px !important;
  }

  .subscription-pill strong {
    font-size: 0.7rem !important;
  }

  .paywall-panel,
  body[data-theme] .paywall-panel {
    padding: 14px !important;
  }

  .paywall-product {
    grid-template-columns: 1fr !important;
  }

  .paywall-product em {
    justify-self: start !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .paywall-actions {
    grid-template-columns: 1fr !important;
  }
}

/* v574: the Radar scope switch reads like a perforated price-alert receipt. */
#inventory .watchlist-scope-filter,
body[data-theme] #inventory .watchlist-scope-filter,
html.native-layout-guard #inventory .watchlist-scope-filter,
html.native-layout-guard body[data-theme] #inventory .watchlist-scope-filter {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 10px !important;
  padding: 4px !important;
  border: 1px dashed rgba(97, 215, 207, 0.34) !important;
  border-radius: 10px !important;
  background: rgba(4, 7, 8, 0.62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

#inventory .watchlist-scope-filter[hidden],
body[data-theme] #inventory .watchlist-scope-filter[hidden],
html.native-layout-guard #inventory .watchlist-scope-filter[hidden] {
  display: none !important;
}

#inventory .watchlist-scope-button,
body[data-theme] #inventory .watchlist-scope-button,
html.native-layout-guard #inventory .watchlist-scope-button,
html.native-layout-guard body[data-theme] #inventory .watchlist-scope-button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 7px 8px 7px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: rgba(248, 244, 234, 0.72) !important;
  box-shadow: none !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.035em !important;
  line-height: 1 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

#inventory .watchlist-scope-button[aria-pressed="true"],
body[data-theme] #inventory .watchlist-scope-button[aria-pressed="true"],
html.native-layout-guard #inventory .watchlist-scope-button[aria-pressed="true"] {
  border-color: rgba(97, 215, 207, 0.58) !important;
  background:
    linear-gradient(105deg, rgba(97, 215, 207, 0.28), rgba(97, 215, 207, 0.07)),
    #0b1112 !important;
  color: #b9fff8 !important;
  box-shadow: inset 4px 0 0 rgba(97, 215, 207, 0.78) !important;
}

#inventory .watchlist-scope-label,
body[data-theme] #inventory .watchlist-scope-label {
  min-width: 0 !important;
  color: inherit !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

#inventory .watchlist-scope-count,
body[data-theme] #inventory .watchlist-scope-count,
html.native-layout-guard #inventory .watchlist-scope-count {
  display: grid !important;
  place-items: center !important;
  min-width: 26px !important;
  height: 26px !important;
  padding: 0 5px !important;
  border: 1px dashed rgba(239, 204, 113, 0.48) !important;
  border-radius: 4px !important;
  color: #f3d98e !important;
  font-size: 0.64rem !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}

#inventory .watchlist-scope-button[aria-pressed="true"] .watchlist-scope-count,
body[data-theme] #inventory .watchlist-scope-button[aria-pressed="true"] .watchlist-scope-count {
  border-color: rgba(97, 215, 207, 0.72) !important;
  background: rgba(97, 215, 207, 0.14) !important;
  color: #b9fff8 !important;
}

#inventory .watchlist-scope-button:focus-visible,
body[data-theme] #inventory .watchlist-scope-button:focus-visible {
  outline: 2px solid #b9fff8 !important;
  outline-offset: 2px !important;
}

#inventory .watchlist-filter-empty,
body[data-theme] #inventory .watchlist-filter-empty {
  display: grid !important;
  gap: 8px !important;
}

#inventory .watchlist-filter-reset,
body[data-theme] #inventory .watchlist-filter-reset,
html.native-layout-guard #inventory .watchlist-filter-reset {
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 4px 0 0 !important;
}

@media (max-width: 350px) {
  #inventory .watchlist-scope-filter,
  body[data-theme] #inventory .watchlist-scope-filter {
    gap: 4px !important;
    padding: 3px !important;
  }

  #inventory .watchlist-scope-button,
  body[data-theme] #inventory .watchlist-scope-button {
    min-height: 44px !important;
    padding-inline: 7px !important;
    font-size: 0.62rem !important;
  }
}

/* v434-studio-upload-stability: compact first-screen upload and keep feedback from hiding controls. */
#studio .photo-panel,
body[data-theme] #studio .photo-panel {
  gap: 12px !important;
  padding: 16px !important;
}

#studio .photo-panel .panel-head,
body[data-theme] #studio .photo-panel .panel-head {
  gap: 10px !important;
  align-items: start !important;
}

#studio .photo-panel .panel-head h2,
body[data-theme] #studio .photo-panel .panel-head h2 {
  font-size: 2.08rem !important;
  line-height: 1.04 !important;
}

#studio #analyzeButton.primary-button,
body[data-theme] #studio #analyzeButton.primary-button {
  min-height: 52px !important;
  padding: 0 16px !important;
  font-size: 1rem !important;
  white-space: nowrap !important;
}

#studio .upload-zone,
body[data-theme] #studio .upload-zone {
  aspect-ratio: 1.1 / 1 !important;
  min-height: 260px !important;
  max-height: 390px !important;
  border-radius: 22px !important;
}

#studio .upload-zone span,
body[data-theme] #studio .upload-zone span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  right: 16px !important;
  bottom: 16px !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  font-size: 1rem !important;
}

#studio .score-wrap,
body[data-theme] #studio .score-wrap {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
}

#studio .score-ring,
body[data-theme] #studio .score-ring {
  width: 70px !important;
  min-width: 70px !important;
  height: 70px !important;
}

#studio #scoreTitle,
body[data-theme] #studio #scoreTitle {
  font-size: 1.26rem !important;
  line-height: 1.12 !important;
}

#studio #scoreText,
body[data-theme] #studio #scoreText {
  font-size: 0.98rem !important;
  line-height: 1.32 !important;
}

.app-toast,
body[data-theme] .app-toast {
  top: auto !important;
  right: max(14px, calc((100vw - var(--app-width, min(430px, 100vw))) / 2 + 14px)) !important;
  bottom: calc(var(--dock-height, 78px) + var(--safe-bottom, 0px) + 14px) !important;
  left: max(14px, calc((100vw - var(--app-width, min(430px, 100vw))) / 2 + 14px)) !important;
  max-width: min(360px, calc(100vw - 28px)) !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  font-size: 0.98rem !important;
  line-height: 1.25 !important;
}

@media (max-width: 430px) {
  #studio .photo-panel,
  body[data-theme] #studio .photo-panel {
    padding: 14px !important;
  }

  #studio .photo-panel .panel-head h2,
  body[data-theme] #studio .photo-panel .panel-head h2 {
    font-size: 1.86rem !important;
  }

  #studio .upload-zone,
  body[data-theme] #studio .upload-zone {
    min-height: 245px !important;
  }
}

/* v437-final-operational-density: final mobile override after every older shell/card rule. */
@media (max-width: 900px) {
  main > #business.business-band.active-view,
  body[data-theme] main > #business.business-band.active-view {
    gap: 10px !important;
    padding: 8px 12px calc(var(--dock-height, 92px) + var(--safe-bottom, 0px) + 12px) !important;
  }

  #business .business-copy,
  body[data-theme] #business .business-copy {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  #business .business-copy .eyebrow,
  body[data-theme] #business .business-copy .eyebrow {
    margin-bottom: 6px !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
  }

  #business .business-copy h2,
  body[data-theme] #business .business-copy h2 {
    margin: 0 0 8px !important;
    font-size: 1.42rem !important;
    line-height: 1.08 !important;
  }

  #business .business-copy p,
  body[data-theme] #business .business-copy p {
    max-width: none !important;
    margin: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.32 !important;
  }

  #business .business-steps,
  body[data-theme] #business .business-steps {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  #business .business-step,
  body[data-theme] #business .business-step {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    min-height: 90px !important;
    height: auto !important;
    padding: 12px !important;
    border-radius: 15px !important;
    scroll-snap-align: none !important;
  }

  #business .business-step span,
  body[data-theme] #business .business-step span {
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    font-size: 0.86rem !important;
    line-height: 1 !important;
  }

  #business .business-step h3,
  body[data-theme] #business .business-step h3 {
    align-self: end !important;
    margin: 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.12 !important;
  }

  #business .business-step p,
  body[data-theme] #business .business-step p {
    margin: 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.26 !important;
  }

  #inventory .wardrobe-metrics,
  body[data-theme] #inventory .wardrobe-metrics {
    gap: 7px !important;
    padding: 7px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.045) !important;
  }

  #inventory .wardrobe-metrics div,
  body[data-theme] #inventory .wardrobe-metrics div {
    min-height: 52px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    background: rgba(8, 9, 11, 0.88) !important;
    box-shadow: none !important;
  }

  #inventory .wardrobe-metrics strong,
  body[data-theme] #inventory .wardrobe-metrics strong {
    font-size: 1rem !important;
    line-height: 1.05 !important;
  }

  #inventory .wardrobe-metrics span,
  body[data-theme] #inventory .wardrobe-metrics span {
    font-size: 0.78rem !important;
    line-height: 1.12 !important;
  }
}

/* v436-operational-mobile-density: make store setup and wardrobe metrics read as compact app tools. */
@media (max-width: 900px) {
  main > #business.business-band.active-view,
  body[data-theme] main > #business.business-band.active-view {
    gap: 10px !important;
    padding: 8px 12px calc(var(--dock-height, 92px) + var(--safe-bottom, 0px) + 12px) !important;
  }

  #business .business-copy,
  body[data-theme] #business .business-copy {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  #business .business-copy h2,
  body[data-theme] #business .business-copy h2 {
    font-size: 1.48rem !important;
    line-height: 1.08 !important;
  }

  #business .business-copy p,
  body[data-theme] #business .business-copy p {
    max-width: none !important;
    font-size: 0.96rem !important;
    line-height: 1.34 !important;
  }

  #business .business-steps,
  body[data-theme] #business .business-steps {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow-x: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  #business .business-step,
  body[data-theme] #business .business-step {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 3px !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 16px !important;
    scroll-snap-align: none !important;
  }

  #business .business-step span,
  body[data-theme] #business .business-step span {
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }

  #business .business-step h3,
  body[data-theme] #business .business-step h3 {
    align-self: start !important;
    margin: 0 !important;
    font-size: 1.08rem !important;
    line-height: 1.15 !important;
  }

  #business .business-step p,
  body[data-theme] #business .business-step p {
    margin: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.32 !important;
  }

  #inventory .wardrobe-metrics,
  body[data-theme] #inventory .wardrobe-metrics {
    gap: 7px !important;
    padding: 7px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.045) !important;
  }

  #inventory .wardrobe-metrics div,
  body[data-theme] #inventory .wardrobe-metrics div {
    min-height: 52px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    background: rgba(8, 9, 11, 0.88) !important;
    box-shadow: none !important;
  }

  #inventory .wardrobe-metrics strong,
  body[data-theme] #inventory .wardrobe-metrics strong {
    font-size: 1rem !important;
    line-height: 1.05 !important;
  }

  #inventory .wardrobe-metrics span,
  body[data-theme] #inventory .wardrobe-metrics span {
    font-size: 0.78rem !important;
    line-height: 1.12 !important;
  }
}

/* v433-mobile-card-density: make store onboarding and wardrobe metrics read like compact app UI. */
#inventory .wardrobe-panel,
body[data-theme] #inventory .wardrobe-panel {
  padding: 16px !important;
  gap: 12px !important;
}

#inventory .wardrobe-metrics,
body[data-theme] #inventory .wardrobe-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#inventory .wardrobe-metrics div,
body[data-theme] #inventory .wardrobe-metrics div {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 58px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

#inventory .wardrobe-metrics strong,
body[data-theme] #inventory .wardrobe-metrics strong {
  min-width: 2.2ch !important;
  overflow: hidden !important;
  color: var(--sb-text, #fffaf2) !important;
  font-size: 1.12rem !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#inventory .wardrobe-metrics span,
body[data-theme] #inventory .wardrobe-metrics span {
  max-width: 100% !important;
  color: var(--sb-muted, rgba(255, 250, 242, 0.68)) !important;
  font-size: 0.82rem !important;
  line-height: 1.15 !important;
  font-weight: 760 !important;
  text-align: left !important;
  white-space: normal !important;
}

main > #business.business-band.active-view,
body[data-theme] main > #business.business-band.active-view {
  gap: 10px !important;
}

#business .business-copy,
body[data-theme] #business .business-copy {
  padding: 18px !important;
  border-radius: 18px !important;
}

#business .business-copy h2,
body[data-theme] #business .business-copy h2 {
  font-size: 1.6rem !important;
  line-height: 1.12 !important;
}

#business .business-copy p,
body[data-theme] #business .business-copy p {
  font-size: 1rem !important;
  line-height: 1.36 !important;
}

#business .business-steps,
body[data-theme] #business .business-steps {
  grid-auto-columns: minmax(220px, 78%) !important;
  gap: 10px !important;
  padding: 8px 0 calc(var(--dock-height, 78px) + 18px) !important;
}

#business .business-step,
body[data-theme] #business .business-step {
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  min-height: 168px !important;
  padding: 16px !important;
  border-radius: 16px !important;
}

#business .business-step span,
body[data-theme] #business .business-step span {
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#business .business-step h3,
body[data-theme] #business .business-step h3 {
  align-self: end !important;
  font-size: 1.22rem !important;
  line-height: 1.12 !important;
}

#business .business-step p,
body[data-theme] #business .business-step p {
  font-size: 1rem !important;
  line-height: 1.3 !important;
}

@media (max-width: 430px) {
  #inventory .wardrobe-panel,
  body[data-theme] #inventory .wardrobe-panel {
    padding: 14px !important;
  }

  #inventory .wardrobe-metrics div,
  body[data-theme] #inventory .wardrobe-metrics div {
    min-height: 54px !important;
    gap: 8px !important;
    padding: 9px 10px !important;
  }

  #inventory .wardrobe-metrics strong,
  body[data-theme] #inventory .wardrobe-metrics strong {
    font-size: 1.02rem !important;
  }

  #inventory .wardrobe-metrics span,
  body[data-theme] #inventory .wardrobe-metrics span {
    font-size: 0.78rem !important;
  }

  #business .business-steps,
  body[data-theme] #business .business-steps {
    grid-auto-columns: minmax(210px, 82%) !important;
  }
}

/* v406: keep payment state visible without covering primary content. */
.subscription-pill,
body[data-theme] .subscription-pill {
  top: auto !important;
  right: auto !important;
  bottom: calc(var(--app-stage-bottom, 0px) + var(--dock-height, 78px) + var(--safe-bottom, 0px) + 14px) !important;
  left: calc(var(--app-rail-left, max(0px, (100vw - min(430px, 100vw)) / 2)) + 12px) !important;
  min-height: 44px !important;
  max-width: min(168px, calc(var(--app-rail-width, min(430px, 100vw)) - 92px)) !important;
  padding: 8px 10px !important;
}

.subscription-pill span,
body[data-theme] .subscription-pill span {
  min-height: 28px !important;
}

@media (max-width: 430px) {
  .subscription-pill,
  body[data-theme] .subscription-pill {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    justify-content: center !important;
    padding: 8px !important;
  }

  .subscription-pill strong,
  body[data-theme] .subscription-pill strong {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
}

.command-button,
body[data-theme] .command-button,
:is(.locale-switch, .market-switch) select,
body[data-theme] :is(.locale-switch, .market-switch) select {
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
}

.command-button,
body[data-theme] .command-button {
  width: 44px !important;
  max-width: 44px !important;
}

.active-view-chip,
body[data-theme] .active-view-chip {
  min-width: 98px !important;
  max-width: 128px !important;
  padding-right: 4px !important;
}

@media (max-width: 370px) {
  .subscription-pill,
  body[data-theme] .subscription-pill {
    left: calc(var(--app-rail-left, 0px) + 10px) !important;
    max-width: 132px !important;
  }

  .active-view-chip,
  body[data-theme] .active-view-chip {
    min-width: 82px !important;
    max-width: 104px !important;
  }
}

/* v409-premium-flow-polish: remove audit-detected clipping in compact commerce cards. */
.brand > span,
.brand > small,
body[data-theme] .brand > span,
body[data-theme] .brand > small {
  display: none !important;
}

.brand,
body[data-theme] .brand,
html.native-layout-guard .brand,
html.native-layout-guard body[data-theme] .brand {
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
}

#discover .discover-queue-card,
body[data-theme] #discover .discover-queue-card {
  grid-template-columns: minmax(0, 1fr) !important;
}

#discover .discover-queue-card div,
body[data-theme] #discover .discover-queue-card div {
  min-width: 0 !important;
  width: 100% !important;
}

#discover .discover-queue-card strong,
body[data-theme] #discover .discover-queue-card strong {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  line-height: 1.16 !important;
  overflow-wrap: anywhere !important;
}

#lookbook .look-card-head,
body[data-theme] #lookbook .look-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  gap: 10px !important;
}

#lookbook .look-card-head > strong,
body[data-theme] #lookbook .look-card-head > strong {
  min-width: max-content !important;
  white-space: nowrap !important;
}

#clients .client-dossier-metrics,
body[data-theme] #clients .client-dossier-metrics,
#trends .trend-metrics,
body[data-theme] #trends .trend-metrics {
  grid-auto-columns: minmax(156px, 44%) !important;
}

#clients .client-dossier-metrics strong,
body[data-theme] #clients .client-dossier-metrics strong,
#trends .trend-metrics strong,
body[data-theme] #trends .trend-metrics strong {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.1 !important;
}

/* v414-content-readability: do not clamp operational copy in Brain and Community cards. */
#brain .rule-card,
body[data-theme] #brain .rule-card {
  height: auto !important;
  max-height: none !important;
}

#brain .rule-card p,
body[data-theme] #brain .rule-card p,
#community .community-post-card p,
body[data-theme] #community .community-post-card p,
#community .community-post-body > p,
body[data-theme] #community .community-post-body > p,
#community .social-card-preview p,
body[data-theme] #community .social-card-preview p {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

/* v415-runtime-polish: keep the store-facing app audit clean on mobile and desktop. */
#studio .upload-zone,
body[data-theme] #studio .upload-zone {
  box-sizing: border-box !important;
  contain: paint !important;
  overflow: hidden !important;
}

#studio .upload-zone::before,
#studio .upload-zone::after,
body[data-theme] #studio .upload-zone::before,
body[data-theme] #studio .upload-zone::after {
  transform: none !important;
}

html.native-layout-guard #studio .upload-zone::before,
html.native-layout-guard #studio .upload-zone::after,
html.native-layout-guard body[data-theme] #studio .upload-zone::before,
html.native-layout-guard body[data-theme] #studio .upload-zone::after,
main > #studio .upload-zone::before,
main > #studio .upload-zone::after,
body[data-theme] main > #studio .upload-zone::before,
body[data-theme] main > #studio .upload-zone::after {
  transform: none !important;
}

#studio .upload-zone img,
body[data-theme] #studio .upload-zone img {
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

#studio .upload-zone span,
body[data-theme] #studio .upload-zone span {
  right: 14px !important;
  bottom: 14px !important;
  box-sizing: border-box !important;
  max-width: calc(100% - 28px) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#studio .photo-capture-editor,
body[data-theme] #studio .photo-capture-editor {
  gap: 12px !important;
  padding: 12px !important;
  overflow: visible !important;
}

#studio .capture-field-grid,
body[data-theme] #studio .capture-field-grid {
  gap: 10px !important;
}

#studio .photo-capture-editor label,
body[data-theme] #studio .photo-capture-editor label {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 10px !important;
  line-height: 1.22 !important;
  overflow: visible !important;
}

#studio .photo-capture-editor label > :is(input, select, textarea),
body[data-theme] #studio .photo-capture-editor label > :is(input, select, textarea) {
  width: 100% !important;
}

#studio .photo-descriptor-field > small,
body[data-theme] #studio .photo-descriptor-field > small {
  color: var(--ui-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
}

#studio .photo-capture-guidance,
body[data-theme] #studio .photo-capture-guidance,
html.native-layout-guard #studio .photo-capture-guidance,
html.native-layout-guard body[data-theme] #studio .photo-capture-guidance {
  display: grid !important;
  gap: 5px !important;
  padding: 12px !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 14px !important;
  background: var(--ui-surface-2) !important;
}

#studio .photo-capture-guidance span,
body[data-theme] #studio .photo-capture-guidance span,
html.native-layout-guard #studio .photo-capture-guidance span,
html.native-layout-guard body[data-theme] #studio .photo-capture-guidance span {
  color: var(--ui-accent-2) !important;
  font-size: 0.7rem !important;
  font-weight: 760 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

#studio .photo-capture-guidance strong,
body[data-theme] #studio .photo-capture-guidance strong,
html.native-layout-guard #studio .photo-capture-guidance strong,
html.native-layout-guard body[data-theme] #studio .photo-capture-guidance strong {
  color: var(--ui-text) !important;
  font-size: 0.82rem !important;
  line-height: 1.42 !important;
}

#planner .planner-slot strong,
body[data-theme] #planner .planner-slot strong,
#capsule .capsule-item strong,
body[data-theme] #capsule .capsule-item strong,
#discover .discover-body h3,
body[data-theme] #discover .discover-body h3,
#discover .discover-reasons p,
body[data-theme] #discover .discover-reasons p,
#discover .discover-queue-card strong,
body[data-theme] #discover .discover-queue-card strong {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

#planner .planner-slot span,
body[data-theme] #planner .planner-slot span,
#capsule .capsule-item > div > span,
body[data-theme] #capsule .capsule-item > div > span,
#discover .discover-queue-card span,
body[data-theme] #discover .discover-queue-card span {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 430px) {
  #studio .photo-capture-editor .capture-field-grid,
  body[data-theme] #studio .photo-capture-editor .capture-field-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

main > section:focus,
main > section:focus-visible,
body[data-theme] main > section:focus,
body[data-theme] main > section:focus-visible {
  outline: none !important;
}

/* v420-capture-actions-fit: keep Studio capture action labels readable on desktop and native webviews. */
#studio .photo-capture-actions,
body[data-theme] #studio .photo-capture-actions {
  align-items: stretch !important;
}

#studio .photo-capture-actions .ghost-button,
body[data-theme] #studio .photo-capture-actions .ghost-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 9px 10px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
}

@media (min-width: 700px) {
  #studio .photo-capture-actions,
  body[data-theme] #studio .photo-capture-actions {
    grid-template-columns: repeat(3, minmax(118px, 1fr)) !important;
  }
}

/* v423-bottom-dock-readability: final mobile chrome polish after all theme fixes. */
:root {
  --dock-height: 92px !important;
}

main,
body[data-theme] main,
html.native-layout-guard main {
  bottom: calc(var(--app-stage-bottom, 0px) + var(--dock-height, 92px) + var(--safe-bottom, 0px) + 8px) !important;
}

main > .studio-band.active-view,
main > .content-band.active-view,
main > .business-band.active-view,
body[data-theme] main > .studio-band.active-view,
body[data-theme] main > .content-band.active-view,
body[data-theme] main > .business-band.active-view {
  padding-bottom: 28px !important;
  scroll-padding-bottom: 36px !important;
}

.mobile-dock,
body[data-theme] .mobile-dock,
html.native-layout-guard .mobile-dock {
  right: max(8px, calc((100vw - var(--app-width, min(100vw, 430px))) / 2 + 8px)) !important;
  bottom: calc(var(--app-stage-bottom, 0px) + var(--safe-bottom, 0px) + 8px) !important;
  left: max(8px, calc((100vw - var(--app-width, min(100vw, 430px))) / 2 + 8px)) !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: auto !important;
  min-height: 78px !important;
  overflow: visible !important;
  border: 1px solid rgba(244, 240, 232, 0.22) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #15181e 0%, #080a0d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 -18px 44px rgba(0, 0, 0, 0.58) !important;
  padding: 8px 8px calc(8px + var(--safe-bottom, 0px)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mobile-dock a,
body[data-theme] .mobile-dock a,
html.native-layout-guard .mobile-dock a {
  display: grid !important;
  grid-template-rows: 34px 18px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 62px !important;
  border: 1px solid rgba(244, 240, 232, 0.08) !important;
  border-radius: 16px !important;
  background: rgba(244, 240, 232, 0.035) !important;
  color: #f4f0e8 !important;
  opacity: 1 !important;
  padding: 4px 2px !important;
  text-decoration: none !important;
}

.mobile-dock a::before,
.mobile-dock a::after,
body[data-theme] .mobile-dock a::before,
body[data-theme] .mobile-dock a::after,
html.native-layout-guard .mobile-dock a::before,
html.native-layout-guard .mobile-dock a::after {
  content: none !important;
  display: none !important;
}

.mobile-dock .dock-icon,
body[data-theme] .mobile-dock .dock-icon,
html.native-layout-guard .mobile-dock .dock-icon {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(244, 240, 232, 0.18) !important;
  border-radius: 13px !important;
  background: #1d2229 !important;
  color: #f4f0e8 !important;
  box-shadow: none !important;
}

.mobile-dock .dock-icon svg,
body[data-theme] .mobile-dock .dock-icon svg,
html.native-layout-guard .mobile-dock .dock-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  stroke-width: 2.35 !important;
}

.mobile-dock .dock-label,
.mobile-dock a:not(.active) .dock-label,
.mobile-dock a:not(.active) span,
body[data-theme] .mobile-dock .dock-label,
body[data-theme] .mobile-dock a:not(.active) .dock-label,
body[data-theme] .mobile-dock a:not(.active) span,
html.native-layout-guard .mobile-dock .dock-label {
  display: block !important;
  max-width: 100% !important;
  overflow: visible !important;
  color: #f4f0e8 !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-overflow: clip !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

.mobile-dock a.active,
.mobile-dock a:focus-visible,
body[data-theme] .mobile-dock a.active,
body[data-theme] .mobile-dock a:focus-visible,
html.native-layout-guard .mobile-dock a.active,
html.native-layout-guard .mobile-dock a:focus-visible {
  border-color: rgba(255, 79, 121, 0.66) !important;
  background: linear-gradient(180deg, rgba(255, 79, 121, 0.48), rgba(136, 18, 52, 0.54)) !important;
  color: #fffaf2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 26px rgba(255, 54, 95, 0.22) !important;
}

.mobile-dock a.active .dock-label,
.mobile-dock a:focus-visible .dock-label,
.mobile-dock a.active span,
.mobile-dock a:focus-visible span,
body[data-theme] .mobile-dock a.active .dock-label,
body[data-theme] .mobile-dock a:focus-visible .dock-label,
body[data-theme] .mobile-dock a.active span,
body[data-theme] .mobile-dock a:focus-visible span {
  color: #fffaf2 !important;
}

.mobile-dock a.active .dock-icon,
.mobile-dock a:focus-visible .dock-icon,
body[data-theme] .mobile-dock a.active .dock-icon,
body[data-theme] .mobile-dock a:focus-visible .dock-icon,
html.native-layout-guard .mobile-dock a.active .dock-icon,
html.native-layout-guard .mobile-dock a:focus-visible .dock-icon {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(180deg, #ff7b99 0%, #ff365f 100%) !important;
  color: #fffaf2 !important;
  box-shadow: none !important;
  transform: none !important;
}

.app-toast,
body[data-theme] .app-toast {
  top: calc(var(--app-stage-top, 0px) + var(--topbar-height, 64px) + var(--safe-top, 0px) + 10px) !important;
  right: max(14px, calc((100vw - var(--app-width, min(100vw, 430px))) / 2 + 14px)) !important;
  bottom: auto !important;
  left: max(14px, calc((100vw - var(--app-width, min(100vw, 430px))) / 2 + 14px)) !important;
  z-index: 86 !important;
  border-color: rgba(244, 240, 232, 0.18) !important;
  background: linear-gradient(180deg, #fffaf2 0%, #eee7da 100%) !important;
  background-color: #fffaf2 !important;
  color: #15171b !important;
}

.app-toast *,
body[data-theme] .app-toast * {
  color: #15171b !important;
}

@media (max-width: 699px) {
  #quickActionButton.quick-action-button,
  body[data-theme] #quickActionButton.quick-action-button,
  .quick-action-button,
  body[data-theme] .quick-action-button,
  #subscriptionButton.subscription-pill,
  body[data-theme] #subscriptionButton.subscription-pill {
    display: none !important;
  }
}

/* v720-free-read-layout-final: do not reserve a hidden score column for the local summary. */
#studio .score-wrap[data-local-read],
body[data-theme] #studio .score-wrap[data-local-read],
html.native-layout-guard #studio .score-wrap[data-local-read],
html.native-layout-guard body[data-theme] #studio .score-wrap[data-local-read] {
  display: block !important;
  min-height: 0 !important;
}

#studio .score-wrap[data-local-read] > div:last-child,
body[data-theme] #studio .score-wrap[data-local-read] > div:last-child,
html.native-layout-guard #studio .score-wrap[data-local-read] > div:last-child,
html.native-layout-guard body[data-theme] #studio .score-wrap[data-local-read] > div:last-child {
  width: 100% !important;
  min-width: 0 !important;
}

/* v710-ipad-rail-override: body defined a legacy 430px rail after :root, so override it at the owning level. */
@media (min-width: 700px) {
  :root,
  body,
  body[data-theme],
  html.native-layout-guard body,
  html.native-layout-guard body[data-theme] {
    --app-rail-width: min(1180px, calc(100vw - 32px)) !important;
    --app-rail-left: max(16px, calc((100vw - var(--app-rail-width)) / 2)) !important;
    --app-width: var(--app-rail-width) !important;
  }

  .topbar,
  .mobile-dock,
  body[data-theme] .topbar,
  body[data-theme] .mobile-dock,
  html.native-layout-guard .topbar,
  html.native-layout-guard .mobile-dock,
  html.native-layout-guard body[data-theme] .topbar,
  html.native-layout-guard body[data-theme] .mobile-dock {
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: min(1180px, calc(100vw - 32px)) !important;
  }

  main > .studio-band,
  main > .content-band,
  main > .business-band,
  body[data-theme] main > .studio-band,
  body[data-theme] main > .content-band,
  body[data-theme] main > .business-band,
  html.native-layout-guard main > .studio-band,
  html.native-layout-guard main > .content-band,
  html.native-layout-guard main > .business-band,
  html.native-layout-guard body[data-theme] main > .studio-band,
  html.native-layout-guard body[data-theme] main > .content-band,
  html.native-layout-guard body[data-theme] main > .business-band {
    width: min(1180px, calc(100vw - 32px)) !important;
    max-width: min(1180px, calc(100vw - 32px)) !important;
  }
}

@media (max-width: 380px) {
  .mobile-dock,
  body[data-theme] .mobile-dock {
    gap: 5px !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  .mobile-dock .dock-label,
  .mobile-dock a:not(.active) .dock-label,
  body[data-theme] .mobile-dock .dock-label,
  body[data-theme] .mobile-dock a:not(.active) .dock-label {
    font-size: 0.68rem !important;
  }
}

/* v424-store-polish-pass: final readable grids/cards after the real premium audit pass. */
main :is(
  .quick-stats,
  .repair-metrics,
  .taste-metrics,
  .passport-metrics,
  .size-passport-metrics,
  .coach-metrics,
  .fit-metrics,
  .planner-metrics,
  .capsule-metrics,
  .discover-metrics,
  .expert-pack-metrics,
  .brand-brain-metrics,
  .wardrobe-metrics,
  .catalog-audit-metrics,
  .watchlist-metrics,
  .lookbook-metrics,
  .reservation-metrics,
  .followup-metrics,
  .client-metrics,
  .client-dossier-metrics,
  .action-queue-metrics,
  .report-metrics,
  .product-signal-metrics,
  .restock-metrics,
  .campaign-metrics,
  .campaign-history-metrics,
  .trend-metrics,
  .style-memory-metrics,
  .community-moodboard-metrics,
  .community-shop-metrics,
  .community-pulse-metrics,
  .community-drop-metrics,
  .community-metrics
),
body[data-theme] main :is(
  .quick-stats,
  .repair-metrics,
  .taste-metrics,
  .passport-metrics,
  .size-passport-metrics,
  .coach-metrics,
  .fit-metrics,
  .planner-metrics,
  .capsule-metrics,
  .discover-metrics,
  .expert-pack-metrics,
  .brand-brain-metrics,
  .wardrobe-metrics,
  .catalog-audit-metrics,
  .watchlist-metrics,
  .lookbook-metrics,
  .reservation-metrics,
  .followup-metrics,
  .client-metrics,
  .client-dossier-metrics,
  .action-queue-metrics,
  .report-metrics,
  .product-signal-metrics,
  .restock-metrics,
  .campaign-metrics,
  .campaign-history-metrics,
  .trend-metrics,
  .style-memory-metrics,
  .community-moodboard-metrics,
  .community-shop-metrics,
  .community-pulse-metrics,
  .community-drop-metrics,
  .community-metrics
) {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

main :is(
  .quick-stats,
  .repair-metrics,
  .taste-metrics,
  .passport-metrics,
  .size-passport-metrics,
  .coach-metrics,
  .fit-metrics,
  .planner-metrics,
  .capsule-metrics,
  .discover-metrics,
  .expert-pack-metrics,
  .brand-brain-metrics,
  .wardrobe-metrics,
  .catalog-audit-metrics,
  .watchlist-metrics,
  .lookbook-metrics,
  .reservation-metrics,
  .followup-metrics,
  .client-metrics,
  .client-dossier-metrics,
  .action-queue-metrics,
  .report-metrics,
  .product-signal-metrics,
  .restock-metrics,
  .campaign-metrics,
  .campaign-history-metrics,
  .trend-metrics,
  .style-memory-metrics,
  .community-moodboard-metrics,
  .community-shop-metrics,
  .community-pulse-metrics,
  .community-drop-metrics,
  .community-metrics
) > *,
body[data-theme] main :is(
  .quick-stats,
  .repair-metrics,
  .taste-metrics,
  .passport-metrics,
  .size-passport-metrics,
  .coach-metrics,
  .fit-metrics,
  .planner-metrics,
  .capsule-metrics,
  .discover-metrics,
  .expert-pack-metrics,
  .brand-brain-metrics,
  .wardrobe-metrics,
  .catalog-audit-metrics,
  .watchlist-metrics,
  .lookbook-metrics,
  .reservation-metrics,
  .followup-metrics,
  .client-metrics,
  .client-dossier-metrics,
  .action-queue-metrics,
  .report-metrics,
  .product-signal-metrics,
  .restock-metrics,
  .campaign-metrics,
  .campaign-history-metrics,
  .trend-metrics,
  .style-memory-metrics,
  .community-moodboard-metrics,
  .community-shop-metrics,
  .community-pulse-metrics,
  .community-drop-metrics,
  .community-metrics
) > * {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 68px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

main :is(
  .quick-stats,
  .repair-metrics,
  .taste-metrics,
  .passport-metrics,
  .size-passport-metrics,
  .coach-metrics,
  .fit-metrics,
  .planner-metrics,
  .capsule-metrics,
  .discover-metrics,
  .expert-pack-metrics,
  .brand-brain-metrics,
  .wardrobe-metrics,
  .catalog-audit-metrics,
  .watchlist-metrics,
  .lookbook-metrics,
  .reservation-metrics,
  .followup-metrics,
  .client-metrics,
  .client-dossier-metrics,
  .action-queue-metrics,
  .report-metrics,
  .product-signal-metrics,
  .restock-metrics,
  .campaign-metrics,
  .campaign-history-metrics,
  .trend-metrics,
  .style-memory-metrics,
  .community-moodboard-metrics,
  .community-shop-metrics,
  .community-pulse-metrics,
  .community-drop-metrics,
  .community-metrics
) :is(strong, span, small),
body[data-theme] main :is(
  .quick-stats,
  .repair-metrics,
  .taste-metrics,
  .passport-metrics,
  .size-passport-metrics,
  .coach-metrics,
  .fit-metrics,
  .planner-metrics,
  .capsule-metrics,
  .discover-metrics,
  .expert-pack-metrics,
  .brand-brain-metrics,
  .wardrobe-metrics,
  .catalog-audit-metrics,
  .watchlist-metrics,
  .lookbook-metrics,
  .reservation-metrics,
  .followup-metrics,
  .client-metrics,
  .client-dossier-metrics,
  .action-queue-metrics,
  .report-metrics,
  .product-signal-metrics,
  .restock-metrics,
  .campaign-metrics,
  .campaign-history-metrics,
  .trend-metrics,
  .style-memory-metrics,
  .community-moodboard-metrics,
  .community-shop-metrics,
  .community-pulse-metrics,
  .community-drop-metrics,
  .community-metrics
) :is(strong, span, small) {
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

html.native-layout-guard #inventory .item-card,
html.native-layout-guard body[data-theme] #inventory .item-card,
#inventory .item-card,
body[data-theme] #inventory .item-card,
main :is(
  .passport-product-card,
  .coach-item-card,
  .fit-recommendation-card,
  .watchlist-row,
  .catalog-audit-row,
  .wardrobe-gap-card,
  .product-report-row,
  .action-card,
  .look-card,
  .client-product-card,
  .rule-card,
  .trend-card,
  .history-card,
  .saved-look-card,
  .restock-row,
  .planner-history-card,
  .capsule-history-card,
  .coach-history-card,
  .fit-history-card,
  .campaign-history-card
) {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

html.native-layout-guard #inventory .item-card,
html.native-layout-guard body[data-theme] #inventory .item-card,
#inventory .item-card,
body[data-theme] #inventory .item-card {
  align-items: start !important;
  min-height: 0 !important;
}

html.native-layout-guard #inventory .item-body,
html.native-layout-guard body[data-theme] #inventory .item-body,
#inventory .item-body,
body[data-theme] #inventory .item-body {
  align-content: start !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html.native-layout-guard #inventory .item-card h3,
html.native-layout-guard body[data-theme] #inventory .item-card h3,
#inventory .item-card h3,
body[data-theme] #inventory .item-card h3 {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

main :is(.pill-row, .passport-product-tags, .coach-item-tags, .capsule-tags, .discover-tags, .look-stats, .trend-card-meta, .restock-tags, .report-row-stats),
body[data-theme] main :is(.pill-row, .passport-product-tags, .coach-item-tags, .capsule-tags, .discover-tags, .look-stats, .trend-card-meta, .restock-tags, .report-row-stats) {
  flex-wrap: wrap !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
}

main :is(.pill-row, .passport-product-tags, .coach-item-tags, .capsule-tags, .discover-tags, .look-stats, .trend-card-meta, .restock-tags, .report-row-stats) > *,
body[data-theme] main :is(.pill-row, .passport-product-tags, .coach-item-tags, .capsule-tags, .discover-tags, .look-stats, .trend-card-meta, .restock-tags, .report-row-stats) > * {
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 699px) {
  main :is(
    .quick-stats,
    .repair-metrics,
    .taste-metrics,
    .passport-metrics,
    .size-passport-metrics,
    .coach-metrics,
    .fit-metrics,
    .planner-metrics,
    .capsule-metrics,
    .discover-metrics,
    .expert-pack-metrics,
    .brand-brain-metrics,
    .wardrobe-metrics,
    .catalog-audit-metrics,
    .watchlist-metrics,
    .lookbook-metrics,
    .reservation-metrics,
    .followup-metrics,
    .client-metrics,
    .client-dossier-metrics,
    .action-queue-metrics,
    .report-metrics,
    .product-signal-metrics,
    .restock-metrics,
    .campaign-metrics,
    .campaign-history-metrics,
    .trend-metrics,
    .style-memory-metrics,
    .community-moodboard-metrics,
    .community-shop-metrics,
    .community-pulse-metrics,
    .community-drop-metrics,
    .community-metrics
  ),
  body[data-theme] main :is(
    .quick-stats,
    .repair-metrics,
    .taste-metrics,
    .passport-metrics,
    .size-passport-metrics,
    .coach-metrics,
    .fit-metrics,
    .planner-metrics,
    .capsule-metrics,
    .discover-metrics,
    .expert-pack-metrics,
    .brand-brain-metrics,
    .wardrobe-metrics,
    .catalog-audit-metrics,
    .watchlist-metrics,
    .lookbook-metrics,
    .reservation-metrics,
    .followup-metrics,
    .client-metrics,
    .client-dossier-metrics,
    .action-queue-metrics,
    .report-metrics,
    .product-signal-metrics,
    .restock-metrics,
    .campaign-metrics,
    .campaign-history-metrics,
    .trend-metrics,
    .style-memory-metrics,
    .community-moodboard-metrics,
    .community-shop-metrics,
    .community-pulse-metrics,
    .community-drop-metrics,
    .community-metrics
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  main :is(.product-link, .mini-product-link, .watch-button),
  body[data-theme] main :is(.product-link, .mini-product-link, .watch-button) {
    min-height: 38px !important;
    height: auto !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* v425-final-audit-residue: remove the last real clipped/offscreen controls from premium screens. */
#brain .rule-card strong,
body[data-theme] #brain .rule-card strong {
  display: block !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

#brain .expert-pack-coverage em,
body[data-theme] #brain .expert-pack-coverage em {
  max-width: 100% !important;
  min-height: 30px !important;
  height: auto !important;
  border-radius: 14px !important;
  line-height: 1.15 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#lookbook .look-product span,
body[data-theme] #lookbook .look-product span {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

#clients .client-dossier-actions,
body[data-theme] #clients .client-dossier-actions {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  overflow: visible !important;
}

#clients .client-dossier-actions select,
body[data-theme] #clients .client-dossier-actions select,
#clients .client-dossier-actions .ghost-button,
body[data-theme] #clients .client-dossier-actions .ghost-button {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  transform: none !important;
}

@media (min-width: 700px) {
  #clients .client-dossier-actions select,
  body[data-theme] #clients .client-dossier-actions select {
    flex-basis: min(230px, 58%) !important;
  }

#clients .client-dossier-actions .ghost-button,
body[data-theme] #clients .client-dossier-actions .ghost-button {
  flex: 0 1 auto !important;
  }
}

/* v426-native-footer-readability: force high-contrast native dock and action sheet on mobile. */
.mobile-dock,
body[data-theme] .mobile-dock,
html.native-layout-guard .mobile-dock {
  padding: 10px 8px calc(10px + var(--safe-bottom, 0px)) !important;
  border-radius: 24px 24px 0 0 !important;
  background: color-mix(in srgb, var(--sb-panel, #0f1113) 86%, rgba(15, 17, 19, 0.96) 14%) !important;
  border: 1px solid color-mix(in srgb, var(--sb-line, rgba(255, 255, 255, 0.22)) 70%, rgba(255, 255, 255, 0.02)) !important;
  box-shadow: 0 -16px 28px rgba(0, 0, 0, 0.42) !important;
}

html.native-layout-guard body[data-theme="chrome"] .mobile-dock,
html.native-layout-guard body[data-theme="editorial"] .mobile-dock,
body[data-theme="chrome"] .mobile-dock,
body[data-theme="editorial"] .mobile-dock {
  background: color-mix(in srgb, var(--sb-panel, #f7f7f2) 90%, #ffffff 10%) !important;
  border-color: rgba(24, 24, 24, 0.16) !important;
}

.mobile-dock a,
body[data-theme] .mobile-dock a {
  color: #f6f3ee !important;
  background: color-mix(in srgb, var(--sb-panel, #111418) 82%, rgba(255, 255, 255, 0.08)) !important;
  border: 1px solid color-mix(in srgb, var(--sb-line, rgba(255, 255, 255, 0.18)) 72%, rgba(0, 0, 0, 0.2)) !important;
}

html.native-layout-guard body[data-theme="chrome"] .mobile-dock a,
html.native-layout-guard body[data-theme="editorial"] .mobile-dock a,
body[data-theme="chrome"] .mobile-dock a,
body[data-theme="editorial"] .mobile-dock a {
  color: #111416 !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.mobile-dock .dock-label,
body[data-theme] .mobile-dock .dock-label {
  color: inherit !important;
  font-weight: 780 !important;
  font-size: 0.66rem !important;
  line-height: 1.05 !important;
}

.mobile-dock .dock-icon,
body[data-theme] .mobile-dock .dock-icon {
  background: color-mix(in srgb, var(--sb-line, rgba(255, 255, 255, 0.28)) 26%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--sb-line, rgba(255, 255, 255, 0.35)) 42%, transparent) !important;
}

.mobile-dock a:focus-visible,
body[data-theme] .mobile-dock a:focus-visible,
.mobile-dock a:hover,
body[data-theme] .mobile-dock a:hover {
  background: color-mix(in srgb, #ffffff 18%, rgba(255, 255, 255, 0.04)) !important;
  border-color: color-mix(in srgb, var(--sb-line, #ffffff) 60%, rgba(255, 255, 255, 0.55)) !important;
}

.quick-action-panel,
body[data-theme] .quick-action-panel {
  background: color-mix(in srgb, var(--sb-panel, #111418) 92%, #07090b 8%) !important;
  border: 1px solid color-mix(in srgb, var(--sb-line, rgba(255, 255, 255, 0.2)) 70%, rgba(255, 255, 255, 0.05)) !important;
  color: var(--sb-text, #f5f2ec) !important;
  box-shadow: 0 -16px 30px rgba(0, 0, 0, 0.45) !important;
}

html.native-layout-guard body[data-theme="chrome"] .quick-action-panel,
html.native-layout-guard body[data-theme="editorial"] .quick-action-panel,
body[data-theme="chrome"] .quick-action-panel,
body[data-theme="editorial"] .quick-action-panel {
  background: #f7f7f4 !important;
  color: #111416 !important;
}

.quick-action-grid button,
body[data-theme] .quick-action-grid button {
  color: inherit !important;
  background: color-mix(in srgb, var(--sb-panel, #111418) 82%, rgba(255, 255, 255, 0.05)) !important;
  border: 1px solid color-mix(in srgb, var(--sb-line, rgba(255, 255, 255, 0.2)) 58%, rgba(255, 255, 255, 0.06)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 12px 20px rgba(0, 0, 0, 0.25) !important;
}

html.native-layout-guard body[data-theme="chrome"] .quick-action-grid button,
html.native-layout-guard body[data-theme="editorial"] .quick-action-grid button,
body[data-theme="chrome"] .quick-action-grid button,
body[data-theme="editorial"] .quick-action-grid button {
  background: #ffffff !important;
  color: #111416 !important;
}

.quick-action-grid button:focus-visible,
body[data-theme] .quick-action-grid button:focus-visible,
.quick-action-grid button:hover,
body[data-theme] .quick-action-grid button:hover {
  background: color-mix(in srgb, #ffffff 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--sb-line, #ffffff) 76%, rgba(255, 255, 255, 0.55)) !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button,
.quick-action-button,
body[data-theme] .quick-action-button {
  color: #ffffff !important;
  background: linear-gradient(140deg, #161a24, #1f161f) !important;
  border: 1px solid color-mix(in srgb, var(--sb-line, rgba(255, 255, 255, 0.45)) 50%, rgba(255, 255, 255, 0.06)) !important;
  box-shadow: 0 14px 20px rgba(0, 0, 0, 0.45) !important;
}

html.native-layout-guard body[data-theme="chrome"] #quickActionButton.quick-action-button,
html.native-layout-guard body[data-theme="editorial"] #quickActionButton.quick-action-button,
body[data-theme="chrome"] #quickActionButton.quick-action-button,
body[data-theme="editorial"] #quickActionButton.quick-action-button,
html.native-layout-guard .quick-action-button,
html.native-layout-guard body[data-theme="chrome"] .quick-action-button,
html.native-layout-guard body[data-theme="editorial"] .quick-action-button {
  color: #111416 !important;
  background: linear-gradient(140deg, #ffffff, #edf0f3) !important;
}

/* v427-footer-contrast-guard: harden mobile dock and quick action readability on native shell. */
.mobile-dock,
body[data-theme] .mobile-dock,
html.native-layout-guard .mobile-dock {
  background: #0f1114 !important;
  color: #f5f2ec !important;
  border-top: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 22px 22px 0 0 !important;
  padding: 10px 10px calc(10px + var(--safe-bottom, 0px)) !important;
  box-shadow: 0 -16px 30px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(10px) !important;
}

body[data-theme="chrome"] .mobile-dock,
body[data-theme="editorial"] .mobile-dock,
html.native-layout-guard body[data-theme="chrome"] .mobile-dock,
html.native-layout-guard body[data-theme="editorial"] .mobile-dock {
  background: #f6f5f0 !important;
  color: #0f1012 !important;
  border-top-color: rgba(11, 11, 11, 0.15) !important;
}

.mobile-dock a,
body[data-theme] .mobile-dock a {
  min-height: 54px !important;
  min-width: 60px !important;
  border-radius: 16px !important;
  padding: 7px 8px !important;
  margin: 0 3px !important;
  gap: 4px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
}

body[data-theme="chrome"] .mobile-dock a,
body[data-theme="editorial"] .mobile-dock a,
html.native-layout-guard body[data-theme="chrome"] .mobile-dock a,
html.native-layout-guard body[data-theme="editorial"] .mobile-dock a {
  background: rgba(255, 255, 255, 0.84) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.mobile-dock .dock-label,
body[data-theme] .mobile-dock .dock-label {
  font-size: 0.67rem !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  font-weight: 680 !important;
}

.mobile-dock .dock-icon,
body[data-theme] .mobile-dock .dock-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

body[data-theme="chrome"] .mobile-dock .dock-icon,
body[data-theme="editorial"] .mobile-dock .dock-icon,
html.native-layout-guard body[data-theme="chrome"] .mobile-dock .dock-icon,
html.native-layout-guard body[data-theme="editorial"] .mobile-dock .dock-icon {
  border-color: rgba(0, 0, 0, 0.12) !important;
  background: rgba(255, 255, 255, 0.68) !important;
}

.mobile-dock a.active,
.mobile-dock a:focus-visible,
body[data-theme] .mobile-dock a.active,
body[data-theme] .mobile-dock a:focus-visible {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

body[data-theme="chrome"] .mobile-dock a.active,
body[data-theme="editorial"] .mobile-dock a.active,
html.native-layout-guard body[data-theme="chrome"] .mobile-dock a.active,
html.native-layout-guard body[data-theme="editorial"] .mobile-dock a.active,
body[data-theme="chrome"] .mobile-dock a:focus-visible,
body[data-theme="editorial"] .mobile-dock a:focus-visible {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.22) !important;
}

.quick-action-button,
body[data-theme] .quick-action-button,
#quickActionButton.quick-action-button {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  background: linear-gradient(145deg, #161a24, #1e1c2e) !important;
  color: #ffffff !important;
}

body[data-theme="chrome"] .quick-action-button,
body[data-theme="editorial"] .quick-action-button,
html.native-layout-guard body[data-theme="chrome"] .quick-action-button,
html.native-layout-guard body[data-theme="editorial"] .quick-action-button {
  background: linear-gradient(145deg, #ffffff, #ebf0f7) !important;
  color: #141414 !important;
  border-color: rgba(0, 0, 0, 0.16) !important;
}

html.native-layout-guard .quick-action-panel,
html.native-layout-guard body[data-theme] .quick-action-panel,
.quick-action-panel,
body[data-theme] .quick-action-panel {
  color: #f7f2ea !important;
  background: #0f1114 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body[data-theme="chrome"] .quick-action-panel,
body[data-theme="editorial"] .quick-action-panel,
html.native-layout-guard body[data-theme="chrome"] .quick-action-panel,
html.native-layout-guard body[data-theme="editorial"] .quick-action-panel {
  background: #ffffff !important;
  color: #111416 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

.quick-action-grid button,
body[data-theme] .quick-action-grid button {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #f8f3ec !important;
}

body[data-theme="chrome"] .quick-action-grid button,
body[data-theme="editorial"] .quick-action-grid button,
html.native-layout-guard body[data-theme="chrome"] .quick-action-grid button,
html.native-layout-guard body[data-theme="editorial"] .quick-action-grid button {
  background: #f7f7f8 !important;
  color: #101216 !important;
  border-color: rgba(16, 18, 22, 0.15) !important;
}

.market-switch select.market-locked,
body[data-theme] .market-switch select.market-locked {
  opacity: 1 !important;
  filter: none !important;
  cursor: not-allowed !important;
}

/* v428-mobile-ui-polish: stable, readable native shell for topbar + dock + quick action. */
:root {
  --dock-rail-bg: #0f1114 !important;
  --dock-rail-text: #f5f2ec !important;
  --dock-item-bg: rgba(255, 255, 255, 0.1) !important;
  --dock-item-text: #f6f3ed !important;
  --dock-item-border: rgba(255, 255, 255, 0.24) !important;
  --dock-active-bg: rgba(255, 255, 255, 0.22) !important;
  --dock-active-border: rgba(255, 255, 255, 0.5) !important;
  --dock-ring: rgba(255, 255, 255, 0.32) !important;
  --dock-shadow: 0 -16px 26px rgba(0, 0, 0, 0.34) !important;
}

body[data-theme="chrome"],
body[data-theme="editorial"] {
  --dock-rail-bg: #f6f5f0 !important;
  --dock-rail-text: #121316 !important;
  --dock-item-bg: rgba(255, 255, 255, 0.9) !important;
  --dock-item-text: #101216 !important;
  --dock-item-border: rgba(13, 14, 16, 0.18) !important;
  --dock-active-bg: #ffffff !important;
  --dock-active-border: rgba(0, 0, 0, 0.3) !important;
  --dock-ring: rgba(13, 14, 16, 0.24) !important;
  --dock-shadow: 0 -14px 26px rgba(13, 14, 16, 0.16) !important;
}

@media (max-width: 900px) {
  :root {
    --dock-height: 102px !important;
  }

  .app-shell .topbar,
  body[data-theme] .app-shell .topbar,
  html.native-layout-guard .app-shell .topbar,
  html.native-layout-guard body[data-theme] .app-shell .topbar {
    width: var(--app-rail-width) !important;
    min-height: 62px !important;
    height: 62px !important;
    max-height: 62px !important;
    padding: 8px 8px !important;
    gap: 6px !important;
    grid-template-columns: 86px minmax(0, 1fr) 40px 52px 58px !important;
    border-radius: 0 0 18px 18px !important;
  }

  .active-view-chip,
  body[data-theme] .active-view-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 32px !important;
    margin-left: 2px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, transparent 88%, var(--sb-text, #ffffff) 12%) !important;
    border: 1px solid color-mix(in srgb, transparent 82%, var(--sb-line, rgba(255, 255, 255, 0.28)) 18%) !important;
    font-size: 0.86rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-theme="chrome"] .active-view-chip,
  body[data-theme="editorial"] .active-view-chip,
  html.native-layout-guard body[data-theme="chrome"] .active-view-chip,
  html.native-layout-guard body[data-theme="editorial"] .active-view-chip {
    background: rgba(16, 17, 19, 0.06) !important;
    border-color: rgba(13, 14, 16, 0.15) !important;
  }

  .command-button,
  body[data-theme] .command-button,
  body[data-theme="chrome"] .command-button,
  body[data-theme="editorial"] .command-button {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .command-button-label,
  body[data-theme] .command-button-label {
    display: none !important;
  }

  .mobile-dock,
  body[data-theme] .mobile-dock,
  html.native-layout-guard .mobile-dock,
  html.native-layout-guard body[data-theme] .mobile-dock {
    background: var(--dock-rail-bg) !important;
    color: var(--dock-rail-text) !important;
    border-top: 1px solid var(--dock-ring) !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: var(--dock-shadow) !important;
    padding: 9px 9px calc(9px + var(--safe-bottom, 0px)) !important;
    min-height: var(--dock-height) !important;
    max-height: var(--dock-height) !important;
    height: var(--dock-height) !important;
    gap: 5px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    box-sizing: border-box !important;
  }

  .mobile-dock a,
  body[data-theme] .mobile-dock a {
    min-height: 72px !important;
    max-height: 72px !important;
    width: auto !important;
    padding: 6px 4px 4px !important;
    border-radius: 14px !important;
    gap: 6px !important;
    background: var(--dock-item-bg) !important;
    border: 1px solid var(--dock-item-border) !important;
    color: var(--dock-item-text) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dock-ring) 30%, transparent) !important;
  }

  .mobile-dock a:focus-visible,
  .mobile-dock a:hover,
  .mobile-dock a.active,
  body[data-theme] .mobile-dock a:focus-visible,
  body[data-theme] .mobile-dock a:hover,
  body[data-theme] .mobile-dock a.active {
    background: var(--dock-active-bg) !important;
    border-color: var(--dock-active-border) !important;
  }

  .mobile-dock .dock-icon,
  body[data-theme] .mobile-dock .dock-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    margin-top: 1px !important;
    border: 1px solid color-mix(in srgb, var(--dock-ring) 55%, transparent) !important;
    background: transparent !important;
  }

  .mobile-dock .dock-icon svg,
  body[data-theme] .mobile-dock .dock-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2px !important;
  }

  .mobile-dock .dock-label,
  body[data-theme] .mobile-dock .dock-label {
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #quickActionButton.quick-action-button,
  body[data-theme] #quickActionButton.quick-action-button,
  .quick-action-button,
  body[data-theme] .quick-action-button {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    border-radius: 19px !important;
    left: calc(var(--app-rail-left) + var(--app-rail-width) - 66px) !important;
    bottom: calc(var(--dock-height) + var(--safe-bottom, 0px) + 16px) !important;
    border: 1px solid color-mix(in srgb, var(--dock-ring) 60%, transparent) !important;
    background: linear-gradient(140deg, #141a24, #201e31) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45) !important;
  }

  body[data-theme="chrome"] #quickActionButton.quick-action-button,
  body[data-theme="chrome"] .quick-action-button,
  body[data-theme="editorial"] #quickActionButton.quick-action-button,
  body[data-theme="editorial"] .quick-action-button,
  html.native-layout-guard body[data-theme="chrome"] .quick-action-button,
  html.native-layout-guard body[data-theme="editorial"] .quick-action-button {
    background: linear-gradient(140deg, #ffffff, #edf0f6) !important;
    border-color: rgba(13, 14, 16, 0.2) !important;
    color: #121416 !important;
  }

  #quickActionButton.quick-action-button svg,
  body[data-theme] #quickActionButton.quick-action-button svg,
  .quick-action-button svg,
  body[data-theme] .quick-action-button svg {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2.6 !important;
  }

  .quick-action-grid button,
  body[data-theme] .quick-action-grid button {
    min-height: 64px !important;
    padding: 10px !important;
    gap: 7px !important;
    border-radius: 14px !important;
  }

  .quick-action-grid button strong,
  body[data-theme] .quick-action-grid button strong {
    font-size: 0.88rem !important;
    line-height: 1.15 !important;
  }

  .quick-action-grid button span,
  body[data-theme] .quick-action-grid button span {
    font-size: 0.79rem !important;
    line-height: 1.2 !important;
    opacity: 0.96 !important;
  }

  .quick-action-head h2 {
    font-size: 1.18rem !important;
    letter-spacing: 0 !important;
  }

  .quick-action-grid button:hover,
  .quick-action-grid button:focus-visible,
  body[data-theme] .quick-action-grid button:hover,
  body[data-theme] .quick-action-grid button:focus-visible {
    transform: translateY(-1px) !important;
  }
}

/* v429-mobile-readability: clearer typography and safer touch targets on small screens. */
@media (max-width: 900px) {
  main,
  body[data-theme] main,
  html.native-layout-guard main,
  main :is(.studio-band, .content-band, .business-band) {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  main :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
  }

  main :is(h1, .studio-grid h1, .panel-head h2, .panel-head h3),
  body[data-theme] main :is(h1, .studio-grid h1, .panel-head h2, .panel-head h3),
  html.native-layout-guard main :is(h1, .studio-grid h1, .panel-head h2, .panel-head h3) {
    font-size: clamp(1.13rem, 4.8vw, 1.4rem) !important;
  }

  main :is(p, li, span, label, small, a, strong, em, b, .eyebrow, .help-text, .quiet-text, .item-meta span, .stock-line span) {
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  main :is(button, input, select, textarea) {
    min-height: 44px !important;
    font-size: 1rem !important;
  }

  .mode-switch button,
  body[data-theme] .mode-switch button,
  .segmented button,
  body[data-theme] .segmented button {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    padding: 8px 6px !important;
    letter-spacing: 0 !important;
  }

  .mode-switch button.active,
  body[data-theme] .mode-switch button.active,
  .segmented button.active,
  body[data-theme] .segmented button.active {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
  }

  main :is(button, .primary-button, .secondary-button, .segmented button, .quick-theme-options button) {
    min-height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 13px !important;
    line-height: 1.2 !important;
  }

  main .mode-switch button,
  body[data-theme] main .mode-switch button,
  .mode-switch button,
  body[data-theme] .mode-switch button {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    padding: 0 7px !important;
  }

  .pill-row,
  body[data-theme] .pill-row,
  .item-meta,
  body[data-theme] .item-meta,
  .stock-line,
  body[data-theme] .stock-line,
  .passport-product-tags,
  body[data-theme] .passport-product-tags,
  .catalog-audit-tags,
  body[data-theme] .catalog-audit-tags,
  .wardrobe-gap-tags,
  body[data-theme] .wardrobe-gap-tags,
  .watchlist-signal,
  body[data-theme] .watchlist-signal,
  .community-item-pills,
  body[data-theme] .community-item-pills,
  .score-meta,
  body[data-theme] .score-meta,
  .item-card .pill-row,
  body[data-theme] .item-card .pill-row {
    display: flex !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 6px !important;
    max-width: 100% !important;
    overflow-x: visible !important;
  }

  .pill,
  .tag,
  .badge,
  .source-badge,
  .stock-badge,
  .trend-chip,
  .signal-chip,
  .product-chip,
  .mood-chip,
  .brand-pill,
  .intent-pill,
  .subtype-pill,
  .passport-product-tags span,
  .catalog-audit-tags span,
  .wardrobe-gap-tags span,
  .watchlist-signal span,
  .community-item-pills span,
  .score-meta span,
  .item-meta span,
  .stock-line span {
    min-height: 29px !important;
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: hidden !important;
  }

  .mobile-dock {
    gap: 6px !important;
    padding: 10px 10px calc(10px + var(--safe-bottom, 0px)) !important;
  }

  .mobile-dock a,
  body[data-theme] .mobile-dock a,
  html.native-layout-guard .mobile-dock a {
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 7px 4px 5px !important;
    gap: 5px !important;
    grid-template-rows: 30px minmax(18px, auto) !important;
    align-items: stretch !important;
    align-content: start !important;
  }

  .mobile-dock .dock-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
  }

  .mobile-dock .dock-icon svg,
  body[data-theme] .mobile-dock .dock-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .mobile-dock .dock-label,
  body[data-theme] .mobile-dock .dock-label {
    max-width: 100% !important;
    font-size: 0.75rem !important;
    line-height: 1.12 !important;
    font-weight: 700 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    max-height: 2.24em !important;
  }

  html.native-layout-guard .mobile-dock .dock-label {
    -webkit-line-clamp: 2 !important;
    max-height: 2.24em !important;
  }

  #studio .upload-zone span,
  .upload-zone span,
  body[data-theme] #studio .upload-zone span,
  body[data-theme] .upload-zone span {
    max-width: calc(100% - 20px) !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .quick-action-grid button strong,
  body[data-theme] .quick-action-grid button strong {
    font-size: 0.98rem !important;
    line-height: 1.18 !important;
  }

  .quick-action-grid button span,
  body[data-theme] .quick-action-grid button span {
    font-size: 0.9rem !important;
    line-height: 1.24 !important;
    opacity: 1 !important;
  }
}

/* v430-mobile-shell-readability: final polish for native dock, quick action sheet and paywall readability. */
.mobile-dock,
body[data-theme] .mobile-dock,
html.native-layout-guard .mobile-dock,
html.native-layout-guard body[data-theme] .mobile-dock {
  gap: 6px !important;
  padding: 11px 10px calc(11px + var(--safe-bottom, 0px)) !important;
  border-top: 1px solid color-mix(in srgb, var(--sb-line, #1b1d20) 72%, transparent) !important;
}

.mobile-dock a,
body[data-theme] .mobile-dock a,
html.native-layout-guard .mobile-dock a {
  min-height: 78px !important;
  max-height: 78px !important;
  padding: 7px 4px 6px !important;
  gap: 6px !important;
  grid-template-rows: 32px minmax(18px, auto) !important;
  align-content: start !important;
}

.mobile-dock .dock-icon,
body[data-theme] .mobile-dock .dock-icon,
html.native-layout-guard .mobile-dock .dock-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 12px !important;
}

.mobile-dock .dock-icon svg,
body[data-theme] .mobile-dock .dock-icon svg,
html.native-layout-guard .mobile-dock .dock-icon svg {
  width: 18px !important;
  height: 18px !important;
}

.mobile-dock .dock-label,
body[data-theme] .mobile-dock .dock-label {
  font-size: 0.86rem !important;
  line-height: 1.14 !important;
  font-weight: 760 !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) !important;
  color: inherit !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  max-height: 2.4em !important;
}

.mobile-dock a.active .dock-label,
body[data-theme] .mobile-dock a.active .dock-label,
.mobile-dock a:focus-visible .dock-label,
body[data-theme] .mobile-dock a:focus-visible .dock-label {
  color: inherit !important;
}

html.native-layout-guard .mobile-dock a.active,
html.native-layout-guard .mobile-dock a:focus-visible,
.mobile-dock a.active,
body[data-theme] .mobile-dock a.active,
html.native-layout-guard .mobile-dock a:focus-visible,
body[data-theme] .mobile-dock a:focus-visible {
  background-color: color-mix(in srgb, var(--sb-line, #1b1d20) 20%, transparent) !important;
  border-color: color-mix(in srgb, var(--sb-line, #f8f6ef) 44%, transparent) !important;
  border-radius: 12px !important;
}

#quickActionButton.quick-action-button,
body[data-theme] #quickActionButton.quick-action-button,
.quick-action-button,
body[data-theme] .quick-action-button {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  left: calc(var(--app-rail-left, 0px) + var(--app-rail-width, min(430px, 100vw)) - 66px) !important;
  border-radius: 18px !important;
}

#quickActionButton.quick-action-button svg,
body[data-theme] #quickActionButton.quick-action-button svg,
.quick-action-button svg,
body[data-theme] .quick-action-button svg {
  width: 24px !important;
  height: 24px !important;
}

.quick-action-sheet:not([hidden]),
body[data-theme] .quick-action-sheet:not([hidden]) {
  padding: 0 10px calc(var(--dock-height, 78px) + var(--safe-bottom, 0px) + 12px) !important;
}

.quick-action-panel,
body[data-theme] .quick-action-panel {
  padding: 16px 14px 14px !important;
  border: 1px solid var(--sb-line, rgba(255, 255, 255, 0.16)) !important;
  border-radius: 16px !important;
}

.quick-action-head h2,
body[data-theme] .quick-action-head h2 {
  font-size: 1.2rem !important;
  line-height: 1.2 !important;
}

.quick-action-grid,
body[data-theme] .quick-action-grid {
  gap: 8px !important;
}

.quick-action-grid button,
body[data-theme] .quick-action-grid button {
  min-height: 72px !important;
  padding: 12px !important;
  gap: 6px !important;
  text-align: left !important;
}

.quick-action-grid button strong,
body[data-theme] .quick-action-grid button strong {
  font-size: 1rem !important;
  line-height: 1.15 !important;
  font-weight: 780 !important;
}

.quick-action-grid button span,
body[data-theme] .quick-action-grid button span {
  font-size: 0.9rem !important;
  line-height: 1.22 !important;
}

.paywall-dialog,
body[data-theme] .paywall-dialog {
  padding: calc(var(--safe-top, 0px) + 12px) 10px calc(var(--safe-bottom, 0px) + 12px) !important;
}

.paywall-panel,
body[data-theme] .paywall-panel {
  width: min(460px, 100%) !important;
  max-width: 100% !important;
  gap: 12px !important;
  padding: 16px !important;
  border-radius: 12px !important;
}

.paywall-panel h2,
body[data-theme] .paywall-panel h2 {
  font-size: 1.32rem !important;
}

.paywall-product,
body[data-theme] .paywall-product {
  min-height: 78px !important;
  padding: 12px 12px !important;
  gap: 10px !important;
}

.paywall-product strong,
body[data-theme] .paywall-product strong {
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

.paywall-product small,
body[data-theme] .paywall-product small {
  font-size: 0.86rem !important;
  line-height: 1.3 !important;
}

.paywall-product em,
body[data-theme] .paywall-product em {
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

@media (max-width: 430px) {
  .mobile-dock {
    padding: 10px 9px calc(10px + var(--safe-bottom, 0px)) !important;
    gap: 8px !important;
  }

  .mobile-dock a,
  body[data-theme] .mobile-dock a,
  html.native-layout-guard .mobile-dock a {
    min-height: 74px !important;
    max-height: 74px !important;
    grid-template-rows: 32px minmax(18px, auto) !important;
    padding: 7px 3px 5px !important;
  }

  .mobile-dock .dock-label,
  body[data-theme] .mobile-dock .dock-label {
    font-size: 0.88rem !important;
    line-height: 1.12 !important;
    font-weight: 760 !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    -webkit-box-orient: vertical !important;
    max-height: 2.24em !important;
    letter-spacing: 0 !important;
  }

  .mobile-dock .dock-icon,
  body[data-theme] .mobile-dock .dock-icon {
    width: 31px !important;
    height: 31px !important;
  }

  .mobile-dock .dock-icon svg,
  body[data-theme] .mobile-dock .dock-icon svg {
    width: 19px !important;
    height: 19px !important;
  }

  .paywall-panel,
  body[data-theme] .paywall-panel {
    padding: 14px 11px !important;
    border-radius: 10px !important;
  }

  .paywall-products {
    gap: 8px !important;
  }

  .paywall-product,
  body[data-theme] .paywall-product {
    grid-template-columns: 1fr !important;
    min-height: 84px !important;
  }

  .paywall-product em,
  body[data-theme] .paywall-product em {
    justify-self: start !important;
    max-width: 100% !important;
    text-align: left !important;
    margin-top: 2px !important;
  }

  .paywall-actions {
    grid-template-columns: 1fr !important;
  }
}

/* v435-studio-upload-final: final Studio mobile density after all shell overrides. */
#studio .photo-panel,
body[data-theme] #studio .photo-panel {
  gap: 12px !important;
  padding: 16px !important;
}

#studio .photo-panel .panel-head,
body[data-theme] #studio .photo-panel .panel-head {
  gap: 10px !important;
  align-items: start !important;
}

#studio .photo-panel .panel-head h2,
body[data-theme] #studio .photo-panel .panel-head h2 {
  font-size: 2.08rem !important;
  line-height: 1.04 !important;
}

#studio #analyzeButton.primary-button,
body[data-theme] #studio #analyzeButton.primary-button {
  min-height: 52px !important;
  padding: 0 16px !important;
  font-size: 1rem !important;
  white-space: nowrap !important;
}

#studio .upload-zone,
body[data-theme] #studio .upload-zone {
  aspect-ratio: 1.1 / 1 !important;
  min-height: 260px !important;
  max-height: 390px !important;
  border-radius: 22px !important;
}

#studio .upload-zone span,
body[data-theme] #studio .upload-zone span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  right: 16px !important;
  bottom: 16px !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  font-size: 1rem !important;
}

#studio .score-wrap,
body[data-theme] #studio .score-wrap {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 16px !important;
}

#studio .score-ring,
body[data-theme] #studio .score-ring {
  width: 70px !important;
  min-width: 70px !important;
  height: 70px !important;
}

#studio #scoreTitle,
body[data-theme] #studio #scoreTitle {
  font-size: 1.26rem !important;
  line-height: 1.12 !important;
}

#studio #scoreText,
body[data-theme] #studio #scoreText {
  font-size: 0.98rem !important;
  line-height: 1.32 !important;
}

.app-toast,
body[data-theme] .app-toast {
  top: auto !important;
  right: max(14px, calc((100vw - var(--app-width, min(430px, 100vw))) / 2 + 14px)) !important;
  bottom: calc(var(--dock-height, 78px) + var(--safe-bottom, 0px) + 14px) !important;
  left: max(14px, calc((100vw - var(--app-width, min(430px, 100vw))) / 2 + 14px)) !important;
  max-width: min(360px, calc(100vw - 28px)) !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  font-size: 0.98rem !important;
  line-height: 1.25 !important;
}

@media (max-width: 430px) {
  #studio .photo-panel,
  body[data-theme] #studio .photo-panel {
    padding: 14px !important;
  }

  #studio .photo-panel .panel-head h2,
  body[data-theme] #studio .photo-panel .panel-head h2 {
    font-size: 1.86rem !important;
  }

  #studio .upload-zone,
  body[data-theme] #studio .upload-zone {
    min-height: 245px !important;
  }
}

/* v438-final-operational-density: EOF override for store setup and wardrobe metrics. */
@media (max-width: 900px) {
  main > #business.business-band.active-view,
  body[data-theme] main > #business.business-band.active-view {
    gap: 10px !important;
    padding: 8px 12px calc(var(--dock-height, 92px) + var(--safe-bottom, 0px) + 12px) !important;
  }

  #business .business-copy,
  body[data-theme] #business .business-copy {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  #business .business-copy .eyebrow,
  body[data-theme] #business .business-copy .eyebrow {
    margin-bottom: 6px !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
  }

  #business .business-copy h2,
  body[data-theme] #business .business-copy h2 {
    margin: 0 0 8px !important;
    font-size: 1.42rem !important;
    line-height: 1.08 !important;
  }

  #business .business-copy p,
  body[data-theme] #business .business-copy p {
    max-width: none !important;
    margin: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.32 !important;
  }

  #business .business-steps,
  body[data-theme] #business .business-steps {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  #business .business-step,
  body[data-theme] #business .business-step {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    min-height: 90px !important;
    height: auto !important;
    padding: 12px !important;
    border-radius: 15px !important;
    scroll-snap-align: none !important;
  }

  #business .business-step span,
  body[data-theme] #business .business-step span {
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    font-size: 0.86rem !important;
    line-height: 1 !important;
  }

  #business .business-step h3,
  body[data-theme] #business .business-step h3 {
    align-self: end !important;
    margin: 0 !important;
    font-size: 1.02rem !important;
    line-height: 1.12 !important;
  }

  #business .business-step p,
  body[data-theme] #business .business-step p {
    margin: 0 !important;
    font-size: 0.86rem !important;
    line-height: 1.26 !important;
  }

  #inventory .wardrobe-metrics,
  body[data-theme] #inventory .wardrobe-metrics {
    gap: 7px !important;
    padding: 7px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.045) !important;
  }

  #inventory .wardrobe-metrics div,
  body[data-theme] #inventory .wardrobe-metrics div {
    min-height: 52px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    background: rgba(8, 9, 11, 0.88) !important;
    box-shadow: none !important;
  }

  #inventory .wardrobe-metrics strong,
  body[data-theme] #inventory .wardrobe-metrics strong {
    font-size: 1rem !important;
    line-height: 1.05 !important;
  }

  #inventory .wardrobe-metrics span,
  body[data-theme] #inventory .wardrobe-metrics span {
    font-size: 0.78rem !important;
    line-height: 1.12 !important;
  }
}

/* v439-final-inventory-actions: keep CSV controls compact on native mobile. */
@media (max-width: 900px) {
  #inventory .section-head,
  body[data-theme] #inventory .section-head {
    gap: 12px !important;
    padding: 14px !important;
  }

  #inventory .section-actions,
  body[data-theme] #inventory .section-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #inventory .csv-actions,
  body[data-theme] #inventory .csv-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  #inventory .csv-actions > *,
  body[data-theme] #inventory .csv-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #inventory .csv-actions .ghost-button,
  #inventory .csv-actions .import-button,
  body[data-theme] #inventory .csv-actions .ghost-button,
  body[data-theme] #inventory .csv-actions .import-button {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }
}

/* v440-mobile-workflow-density: compact repeated action bars and make planner/lookbook readable. */
@media (max-width: 900px) {
  :is(#coach, #fit, #planner, #capsule, #lookbook) > .section-head,
  body[data-theme] :is(#coach, #fit, #planner, #capsule, #lookbook) > .section-head {
    gap: 12px !important;
    padding: 14px !important;
  }

  :is(#coach, #fit, #planner, #capsule, #lookbook) > .section-head .section-actions,
  body[data-theme] :is(#coach, #fit, #planner, #capsule, #lookbook) > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  :is(#coach, #fit, #planner, #capsule, #lookbook) > .section-head .section-actions > *,
  body[data-theme] :is(#coach, #fit, #planner, #capsule, #lookbook) > .section-head .section-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  :is(#coach, #fit, #planner, #capsule, #lookbook) > .section-head .section-actions .primary-button,
  body[data-theme] :is(#coach, #fit, #planner, #capsule, #lookbook) > .section-head .section-actions .primary-button {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    height: 48px !important;
  }

  :is(#coach, #fit, #planner, #capsule, #lookbook) > .section-head .section-actions .ghost-button,
  body[data-theme] :is(#coach, #fit, #planner, #capsule, #lookbook) > .section-head .section-actions .ghost-button {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    border-radius: 13px !important;
    font-size: 0.9rem !important;
    line-height: 1.12 !important;
  }

  #planner #copyPlanButton,
  #lookbook #exportLookbookButton,
  body[data-theme] #planner #copyPlanButton,
  body[data-theme] #lookbook #exportLookbookButton {
    grid-column: 1 / -1 !important;
  }

  #lookbook .lookbook-panel,
  body[data-theme] #lookbook .lookbook-panel {
    gap: 12px !important;
    padding: 14px !important;
  }

  #lookbook .lookbook-panel label,
  body[data-theme] #lookbook .lookbook-panel label {
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(245, 241, 232, 0.72) !important;
    font-size: 0.84rem !important;
  }

  #lookbook .lookbook-panel :is(input, select),
  body[data-theme] #lookbook .lookbook-panel :is(input, select) {
    min-height: 48px !important;
    border: 1px solid rgba(245, 241, 232, 0.16) !important;
    border-radius: 14px !important;
    background: rgba(10, 11, 14, 0.92) !important;
    color: #fffaf2 !important;
    padding: 0 14px !important;
    font-size: 1rem !important;
  }

  #lookbook .lookbook-panel .field-grid,
  #lookbook .lookbook-panel .field-grid.two,
  body[data-theme] #lookbook .lookbook-panel .field-grid,
  body[data-theme] #lookbook .lookbook-panel .field-grid.two {
    gap: 10px !important;
  }

  #planner .planner-outfit,
  body[data-theme] #planner .planner-outfit {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  #planner .planner-slot,
  body[data-theme] #planner .planner-slot {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 88px !important;
    height: auto !important;
    gap: 10px !important;
    overflow: hidden !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: rgba(22, 24, 29, 0.94) !important;
    scroll-snap-align: none !important;
  }

  #planner .planner-slot::after,
  body[data-theme] #planner .planner-slot::after {
    content: none !important;
  }

  #planner .planner-slot img,
  body[data-theme] #planner .planner-slot img {
    position: static !important;
    width: 70px !important;
    height: 70px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  #planner .planner-slot > div,
  body[data-theme] #planner .planner-slot > div {
    position: static !important;
    z-index: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    gap: 4px !important;
  }

  #planner .planner-slot strong,
  body[data-theme] #planner .planner-slot strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    color: #fffaf2 !important;
    font-size: 0.98rem !important;
    line-height: 1.14 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  #planner .planner-slot > div > span,
  body[data-theme] #planner .planner-slot > div > span {
    overflow: visible !important;
    color: rgba(245, 241, 232, 0.66) !important;
    font-size: 0.76rem !important;
    line-height: 1.18 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #planner .planner-slot-price,
  body[data-theme] #planner .planner-slot-price {
    position: static !important;
    justify-self: end !important;
    border-radius: 999px !important;
    background: #f4efe6 !important;
    color: #111316 !important;
    padding: 7px 9px !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* v441-capsule-report-mobile-polish: stop capsule card overlap and make report actions scannable. */
@media (max-width: 900px) {
  #report > .section-head,
  body[data-theme] #report > .section-head {
    gap: 12px !important;
    padding: 14px !important;
  }

  #report > .section-head .section-actions,
  body[data-theme] #report > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  #report > .section-head .section-actions > *,
  body[data-theme] #report > .section-head .section-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #report > .section-head .section-actions .primary-button,
  body[data-theme] #report > .section-head .section-actions .primary-button {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    height: 48px !important;
  }

  #report > .section-head .section-actions .ghost-button,
  body[data-theme] #report > .section-head .section-actions .ghost-button {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 8px !important;
    border-radius: 13px !important;
    font-size: 0.86rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  #capsule .capsule-items,
  body[data-theme] #capsule .capsule-items {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  #capsule .capsule-item,
  body[data-theme] #capsule .capsule-item {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    align-items: center !important;
    align-content: center !important;
    min-height: 88px !important;
    height: auto !important;
    gap: 10px !important;
    overflow: hidden !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: rgba(22, 24, 29, 0.94) !important;
    color: #fffaf2 !important;
    scroll-snap-align: none !important;
  }

  #capsule .capsule-item::after,
  body[data-theme] #capsule .capsule-item::after {
    content: none !important;
  }

  #capsule .capsule-item img,
  body[data-theme] #capsule .capsule-item img {
    position: static !important;
    inset: auto !important;
    width: 70px !important;
    height: 70px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  #capsule .capsule-item > div,
  body[data-theme] #capsule .capsule-item > div {
    position: static !important;
    z-index: auto !important;
    display: grid !important;
    min-width: 0 !important;
    gap: 4px !important;
    padding: 0 !important;
  }

  #capsule .capsule-item strong,
  body[data-theme] #capsule .capsule-item strong {
    display: -webkit-box !important;
    max-height: none !important;
    overflow: hidden !important;
    color: #fffaf2 !important;
    font-size: 0.96rem !important;
    line-height: 1.14 !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  #capsule .capsule-item > div > span,
  body[data-theme] #capsule .capsule-item > div > span {
    overflow: visible !important;
    color: rgba(245, 241, 232, 0.66) !important;
    font-size: 0.76rem !important;
    line-height: 1.18 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #capsule .capsule-tags,
  body[data-theme] #capsule .capsule-tags {
    position: static !important;
    z-index: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #capsule .capsule-tags span,
  body[data-theme] #capsule .capsule-tags span {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 5px 7px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #capsule .capsule-item .product-link,
  body[data-theme] #capsule .capsule-item .product-link {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    display: inline-flex !important;
    min-height: 44px !important;
    width: 100% !important;
    margin-top: 0 !important;
    border-radius: 12px !important;
    padding: 0 10px !important;
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
  }
}

/* v442-report-ranking-list: make store ranking readable as mobile decision rows. */
@media (max-width: 900px) {
  #report .report-products .panel-head h3,
  body[data-theme] #report .report-products .panel-head h3 {
    font-size: clamp(1.18rem, 6vw, 1.62rem) !important;
    line-height: 1.08 !important;
  }

  #report .product-report-list,
  body[data-theme] #report .product-report-list {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  #report .product-report-row,
  body[data-theme] #report .product-report-row {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 42px 72px minmax(0, 1fr) !important;
    grid-template-areas:
      "rank image body"
      "stats stats stats" !important;
    align-items: center !important;
    min-height: 0 !important;
    gap: 10px !important;
    overflow: hidden !important;
    padding: 10px !important;
    border: 1px solid rgba(245, 241, 232, 0.1) !important;
    border-radius: 16px !important;
    background: rgba(22, 24, 29, 0.94) !important;
    box-shadow: none !important;
    color: #fffaf2 !important;
    scroll-snap-align: none !important;
  }

  #report .product-report-row::before,
  body[data-theme] #report .product-report-row::before {
    content: none !important;
  }

  #report .product-report-row > *,
  body[data-theme] #report .product-report-row > * {
    position: static !important;
    z-index: auto !important;
    min-width: 0 !important;
  }

  #report .report-rank,
  body[data-theme] #report .report-rank {
    grid-area: rank !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    background: #f4efe6 !important;
    color: #111316 !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
  }

  #report .product-report-row img,
  body[data-theme] #report .product-report-row img {
    grid-area: image !important;
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    filter: none !important;
  }

  #report .product-report-row > div:not(.report-row-stats),
  body[data-theme] #report .product-report-row > div:not(.report-row-stats) {
    grid-area: body !important;
    display: grid !important;
    align-self: center !important;
    gap: 4px !important;
    margin-top: 0 !important;
  }

  #report .product-report-row strong,
  body[data-theme] #report .product-report-row strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    color: #fffaf2 !important;
    font-size: 0.98rem !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  #report .product-report-row > div:not(.report-row-stats) > span,
  body[data-theme] #report .product-report-row > div:not(.report-row-stats) > span {
    overflow: visible !important;
    color: rgba(245, 241, 232, 0.66) !important;
    font-size: 0.74rem !important;
    line-height: 1.16 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #report .report-bar,
  body[data-theme] #report .report-bar {
    height: 5px !important;
    margin-top: 4px !important;
    border-radius: 999px !important;
    background: rgba(245, 241, 232, 0.14) !important;
  }

  #report .report-row-stats,
  body[data-theme] #report .report-row-stats {
    grid-area: stats !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 0 !important;
    border-top: 1px solid rgba(245, 241, 232, 0.1) !important;
    padding-top: 8px !important;
    text-align: left !important;
  }

  #report .report-row-stats strong,
  body[data-theme] #report .report-row-stats strong {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    border-radius: 999px !important;
    background: #f4efe6 !important;
    color: #111316 !important;
    padding: 7px 9px !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #report .report-row-stats span,
  body[data-theme] #report .report-row-stats span {
    overflow: visible !important;
    color: rgba(245, 241, 232, 0.66) !important;
    font-size: 0.72rem !important;
    line-height: 1.16 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* v443-history-mobile-contrast: remove white-on-white history shelves in native dark layout. */
@media (max-width: 900px) {
  #history > .section-head,
  body[data-theme] #history > .section-head {
    gap: 12px !important;
    padding: 14px !important;
  }

  #history > .section-head .section-actions,
  body[data-theme] #history > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  #history > .section-head .section-actions > *,
  body[data-theme] #history > .section-head .section-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    padding: 0 8px !important;
    font-size: 0.86rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  #history .history-block,
  body[data-theme] #history .history-block,
  #history .history-block:first-child,
  body[data-theme] #history .history-block:first-child,
  #history .history-block:nth-child(2),
  body[data-theme] #history .history-block:nth-child(2) {
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
      rgba(22, 24, 29, 0.94) !important;
    color: #fffaf2 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 12px 28px rgba(0, 0, 0, 0.2) !important;
  }

  #history .history-block-head .eyebrow,
  body[data-theme] #history .history-block-head .eyebrow {
    color: #ff4f91 !important;
  }

  #history .history-block-head h3,
  body[data-theme] #history .history-block-head h3 {
    color: #fffaf2 !important;
    font-size: clamp(1.18rem, 6vw, 1.52rem) !important;
    line-height: 1.1 !important;
  }

  #history .history-grid,
  #history .saved-look-grid,
  body[data-theme] #history .history-grid,
  body[data-theme] #history .saved-look-grid {
    gap: 8px !important;
  }

  #history .empty-card,
  body[data-theme] #history .empty-card {
    border: 1px solid rgba(245, 241, 232, 0.1) !important;
    background: rgba(8, 9, 11, 0.72) !important;
    color: #fffaf2 !important;
  }

  #history .empty-card h4,
  body[data-theme] #history .empty-card h4 {
    color: #fffaf2 !important;
  }

  #history .empty-card p,
  body[data-theme] #history .empty-card p {
    color: rgba(245, 241, 232, 0.68) !important;
  }
}

/* v444-discover-mobile-card: make product discovery lighter and keep primary actions reachable. */
@media (max-width: 900px) {
  #discover > .section-head,
  body[data-theme] #discover > .section-head {
    gap: 12px !important;
    padding: 14px !important;
  }

  #discover > .section-head .section-actions,
  body[data-theme] #discover > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  #discover > .section-head .section-actions > *,
  body[data-theme] #discover > .section-head .section-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #discover > .section-head .section-actions .primary-button,
  body[data-theme] #discover > .section-head .section-actions .primary-button {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    height: 48px !important;
  }

  #discover > .section-head .section-actions .ghost-button,
  body[data-theme] #discover > .section-head .section-actions .ghost-button {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 8px !important;
    border-radius: 13px !important;
    font-size: 0.9rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  #discover .discover-card,
  body[data-theme] #discover .discover-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: rgba(8, 9, 11, 0.94) !important;
  }

  #discover .discover-media,
  body[data-theme] #discover .discover-media {
    position: relative !important;
    inset: auto !important;
    min-height: 0 !important;
    height: clamp(174px, 48vw, 220px) !important;
    overflow: hidden !important;
  }

  #discover .discover-media img,
  body[data-theme] #discover .discover-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #discover .discover-media::after,
  body[data-theme] #discover .discover-media::after {
    background:
      linear-gradient(180deg, rgba(8, 9, 11, 0.08), transparent 50%, rgba(8, 9, 11, 0.54)),
      linear-gradient(90deg, rgba(8, 9, 11, 0.24), transparent 58%) !important;
  }

  #discover #discoverScore,
  body[data-theme] #discover #discoverScore {
    top: 10px !important;
    right: 10px !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 1rem !important;
  }

  #discover .discover-body,
  body[data-theme] #discover .discover-body {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: auto !important;
    display: grid !important;
    gap: 8px !important;
    border: 0 !important;
    border-top: 1px solid rgba(245, 241, 232, 0.12) !important;
    border-radius: 0 !important;
    background: rgba(14, 15, 18, 0.96) !important;
    color: #fffaf2 !important;
    padding: 12px !important;
    backdrop-filter: none !important;
  }

  #discover .discover-body > div:first-child,
  body[data-theme] #discover .discover-body > div:first-child {
    order: 1 !important;
  }

  #discover .discover-body h3,
  body[data-theme] #discover .discover-body h3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    color: #fffaf2 !important;
    font-size: 1.08rem !important;
    line-height: 1.12 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  #discover .discover-meta,
  body[data-theme] #discover .discover-meta {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(245, 241, 232, 0.1) !important;
    border-radius: 14px !important;
    background: rgba(245, 241, 232, 0.06) !important;
  }

  #discover .discover-meta div,
  body[data-theme] #discover .discover-meta div {
    padding: 8px !important;
  }

  #discover .discover-meta strong,
  body[data-theme] #discover .discover-meta strong {
    color: #fffaf2 !important;
    font-size: 0.9rem !important;
  }

  #discover .discover-meta span,
  body[data-theme] #discover .discover-meta span {
    color: rgba(245, 241, 232, 0.58) !important;
    font-size: 0.66rem !important;
  }

  #discover .discover-product-link,
  body[data-theme] #discover .discover-product-link {
    order: 3 !important;
    display: inline-flex !important;
    min-height: 46px !important;
    width: 100% !important;
    border-radius: 13px !important;
  }

  #discover .discover-tags,
  body[data-theme] #discover .discover-tags {
    order: 4 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  #discover .discover-tags span,
  body[data-theme] #discover .discover-tags span {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    padding: 5px 7px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
  }

  #discover .discover-reasons,
  body[data-theme] #discover .discover-reasons {
    order: 5 !important;
    gap: 5px !important;
  }

  #discover .discover-reasons p,
  body[data-theme] #discover .discover-reasons p {
    padding: 7px 9px !important;
    font-size: 0.7rem !important;
    line-height: 1.18 !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }

  #discover .discover-side-panel,
  body[data-theme] #discover .discover-side-panel {
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
      rgba(22, 24, 29, 0.94) !important;
    color: #fffaf2 !important;
  }
}

/* v445-trends-mobile-density: make trend input faster to scan and keep Polish UI polished. */
@media (max-width: 900px) {
  #trends > .section-head,
  body[data-theme] #trends > .section-head {
    gap: 12px !important;
    padding: 14px !important;
  }

  #trends > .section-head .section-actions,
  body[data-theme] #trends > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  #trends > .section-head .section-actions > *,
  body[data-theme] #trends > .section-head .section-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 13px !important;
    padding: 0 8px !important;
    font-size: 0.82rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }

  #trends .trend-form,
  body[data-theme] #trends .trend-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  #trends .trend-form .panel-head,
  #trends .trend-form > label:nth-of-type(n + 3),
  #trends .trend-form .field-grid,
  #trends .trend-form .status-line,
  #trends .trend-form .primary-button,
  body[data-theme] #trends .trend-form .panel-head,
  body[data-theme] #trends .trend-form > label:nth-of-type(n + 3),
  body[data-theme] #trends .trend-form .field-grid,
  body[data-theme] #trends .trend-form .status-line,
  body[data-theme] #trends .trend-form .primary-button {
    grid-column: 1 / -1 !important;
  }

  #trends .trend-form .panel-head,
  body[data-theme] #trends .trend-form .panel-head {
    margin-bottom: 0 !important;
  }

  #trends .trend-form label,
  #trends .trend-brief-field,
  body[data-theme] #trends .trend-form label,
  body[data-theme] #trends .trend-brief-field {
    gap: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(245, 241, 232, 0.7) !important;
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
  }

  #trends .trend-form input,
  #trends .trend-form select,
  #trends .trend-brief-field textarea,
  body[data-theme] #trends .trend-form input,
  body[data-theme] #trends .trend-form select,
  body[data-theme] #trends .trend-brief-field textarea {
    min-height: 44px !important;
    border: 1px solid rgba(245, 241, 232, 0.16) !important;
    border-radius: 13px !important;
    background: rgba(8, 9, 11, 0.92) !important;
    color: #fffaf2 !important;
    padding: 0 12px !important;
    font-size: max(1rem, 16px) !important;
  }

  #trends .trend-form input[type="range"],
  body[data-theme] #trends .trend-form input[type="range"] {
    padding: 0 !important;
    background: transparent !important;
  }

  #trends .trend-form .field-grid,
  #trends .trend-form .field-grid.two,
  body[data-theme] #trends .trend-form .field-grid,
  body[data-theme] #trends .trend-form .field-grid.two {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #trends .trend-form .range-value,
  body[data-theme] #trends .trend-form .range-value {
    color: rgba(245, 241, 232, 0.78) !important;
    font-size: 0.8rem !important;
  }

  #trends .trend-form .primary-button,
  body[data-theme] #trends .trend-form .primary-button {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 13px !important;
  }

  #trends .trend-intel-panel,
  body[data-theme] #trends .trend-intel-panel {
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
      rgba(22, 24, 29, 0.94) !important;
    color: #fffaf2 !important;
  }

  #trends .trend-intel-head,
  body[data-theme] #trends .trend-intel-head {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  #trends .trend-intel-actions,
  body[data-theme] #trends .trend-intel-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #trends .trend-intel-actions > *,
  body[data-theme] #trends .trend-intel-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    padding: 0 8px !important;
    font-size: 0.82rem !important;
    line-height: 1.12 !important;
    white-space: normal !important;
  }
}

/* v446-business-mobile-actions: make store onboarding actionable instead of a static checklist. */
@media (max-width: 900px) {
  #business .business-copy,
  body[data-theme] #business .business-copy {
    display: grid !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  #business .business-copy h2,
  body[data-theme] #business .business-copy h2 {
    font-size: clamp(1.45rem, 8vw, 2rem) !important;
    line-height: 1.06 !important;
  }

  #business .business-copy p,
  body[data-theme] #business .business-copy p {
    max-width: none !important;
    font-size: 0.96rem !important;
    line-height: 1.34 !important;
  }

  #business .business-actions,
  body[data-theme] #business .business-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #business .business-actions > *,
  body[data-theme] #business .business-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    padding: 0 8px !important;
    font-size: 0.84rem !important;
    line-height: 1.12 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  #business .business-actions .primary-button,
  body[data-theme] #business .business-actions .primary-button {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    height: 48px !important;
  }

  #business .business-steps,
  body[data-theme] #business .business-steps {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 8px 0 0 !important;
    scroll-snap-type: none !important;
  }

  #business .business-step,
  body[data-theme] #business .business-step {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-areas:
      "num title"
      "num text" !important;
    align-items: center !important;
    min-height: 0 !important;
    gap: 4px 12px !important;
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
      rgba(22, 24, 29, 0.94) !important;
    color: #fffaf2 !important;
    padding: 12px !important;
    scroll-snap-align: none !important;
  }

  #business .business-step span,
  body[data-theme] #business .business-step span {
    grid-area: num !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    background: rgba(8, 9, 11, 0.86) !important;
    color: rgba(245, 241, 232, 0.72) !important;
  }

  #business .business-step h3,
  body[data-theme] #business .business-step h3 {
    grid-area: title !important;
    color: #fffaf2 !important;
    font-size: 1.02rem !important;
    line-height: 1.1 !important;
  }

  #business .business-step p,
  body[data-theme] #business .business-step p {
    grid-area: text !important;
    color: rgba(245, 241, 232, 0.68) !important;
    font-size: 0.84rem !important;
    line-height: 1.24 !important;
  }
}

/* v447-clients-mobile-density: make the client pipeline usable before the first scroll. */
@media (max-width: 900px) {
  #clients,
  body[data-theme] #clients {
    background:
      radial-gradient(circle at 16% 0%, rgba(66, 210, 186, 0.12), transparent 34%),
      linear-gradient(180deg, #111318 0%, #0a0b0f 44%, #111318 100%) !important;
    color: #fffaf2 !important;
  }

  #clients > .section-head,
  body[data-theme] #clients > .section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    border-radius: 17px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
      rgba(19, 21, 27, 0.96) !important;
    padding: 13px !important;
    box-shadow: none !important;
  }

  #clients > .section-head > div,
  body[data-theme] #clients > .section-head > div {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  #clients > .section-head .eyebrow,
  body[data-theme] #clients > .section-head .eyebrow {
    color: #42d2ba !important;
    font-size: 0.73rem !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
  }

  #clients > .section-head h2,
  body[data-theme] #clients > .section-head h2 {
    color: #fffaf2 !important;
    font-size: clamp(1.38rem, 7vw, 1.9rem) !important;
    line-height: 1.04 !important;
    max-width: 10ch !important;
  }

  #clients > .section-head .ghost-button,
  body[data-theme] #clients > .section-head .ghost-button {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: 112px !important;
    max-width: 34vw !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    border-color: rgba(255, 136, 130, 0.34) !important;
    background: rgba(255, 89, 92, 0.09) !important;
    color: #ffb1ad !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  #clients .clients-layout,
  body[data-theme] #clients .clients-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #clients #leadForm.client-form,
  body[data-theme] #clients #leadForm.client-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    border-radius: 17px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.017)),
      rgba(20, 22, 28, 0.96) !important;
    box-shadow: none !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  #clients #leadForm .panel-head,
  #clients #leadForm .field-grid,
  #clients #leadForm > label:nth-of-type(1),
  #clients #leadForm > label:nth-of-type(2),
  #clients #leadForm > label:nth-of-type(3),
  #clients #leadForm .status-line,
  #clients #leadForm .primary-button,
  body[data-theme] #clients #leadForm .panel-head,
  body[data-theme] #clients #leadForm .field-grid,
  body[data-theme] #clients #leadForm > label:nth-of-type(1),
  body[data-theme] #clients #leadForm > label:nth-of-type(2),
  body[data-theme] #clients #leadForm > label:nth-of-type(3),
  body[data-theme] #clients #leadForm .status-line,
  body[data-theme] #clients #leadForm .primary-button {
    grid-column: 1 / -1 !important;
  }

  #clients #leadForm .panel-head,
  body[data-theme] #clients #leadForm .panel-head {
    min-height: 0 !important;
    margin: 0 !important;
  }

  #clients #leadForm .panel-head .eyebrow,
  body[data-theme] #clients #leadForm .panel-head .eyebrow {
    color: #42d2ba !important;
    font-size: 0.72rem !important;
  }

  #clients #leadForm .panel-head h3,
  body[data-theme] #clients #leadForm .panel-head h3 {
    color: #fffaf2 !important;
    font-size: 1.12rem !important;
    line-height: 1.08 !important;
  }

  #clients #leadForm label,
  body[data-theme] #clients #leadForm label {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(245, 241, 232, 0.7) !important;
    font-size: 0.82rem !important;
    line-height: 1.12 !important;
  }

  #clients #leadForm :is(input, select),
  body[data-theme] #clients #leadForm :is(input, select) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    border: 1px solid rgba(245, 241, 232, 0.16) !important;
    border-radius: 13px !important;
    background: rgba(7, 8, 12, 0.92) !important;
    color: #fffaf2 !important;
    padding: 0 12px !important;
    font-size: max(1rem, 16px) !important;
  }

  #clients #leadForm input[type="range"],
  body[data-theme] #clients #leadForm input[type="range"] {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #clients #leadForm .field-grid,
  #clients #leadForm .field-grid.two,
  body[data-theme] #clients #leadForm .field-grid,
  body[data-theme] #clients #leadForm .field-grid.two {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #clients #leadForm .range-value,
  body[data-theme] #clients #leadForm .range-value {
    color: rgba(245, 241, 232, 0.78) !important;
    font-size: 0.86rem !important;
    line-height: 1.1 !important;
  }

  #clients #leadForm #leadStatus,
  body[data-theme] #clients #leadForm #leadStatus {
    min-height: 0 !important;
    margin: 0 !important;
    font-size: 0.78rem !important;
  }

  #clients #leadForm .primary-button,
  body[data-theme] #clients #leadForm .primary-button {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 13px !important;
    background: #f3c95f !important;
    color: #111318 !important;
    font-size: 0.92rem !important;
  }

  #clients .client-workbench,
  body[data-theme] #clients .client-workbench {
    display: grid !important;
    gap: 10px !important;
  }

  #clients :is(.client-metrics, .client-dossier-metrics, .action-queue-metrics),
  body[data-theme] #clients :is(.client-metrics, .client-dossier-metrics, .action-queue-metrics) {
    gap: 8px !important;
    padding-bottom: 2px !important;
  }
}

/* v448-community-mobile-density: bring Circle actions and feed closer to the first viewport. */
@media (max-width: 900px) {
  #community,
  body[data-theme] #community {
    display: grid !important;
    gap: 10px !important;
    background:
      linear-gradient(180deg, #111318 0%, #0a0b0f 44%, #111318 100%) !important;
    color: #fffaf2 !important;
  }

  #community > .section-head,
  body[data-theme] #community > .section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    border-radius: 17px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
      rgba(19, 21, 27, 0.96) !important;
    padding: 13px !important;
    box-shadow: none !important;
  }

  #community > .section-head > div:first-child,
  body[data-theme] #community > .section-head > div:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  #community > .section-head .section-actions,
  body[data-theme] #community > .section-head .section-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  #community > .section-head .eyebrow,
  body[data-theme] #community > .section-head .eyebrow {
    color: #42d2ba !important;
    font-size: 0.73rem !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
  }

  #community > .section-head h2,
  body[data-theme] #community > .section-head h2 {
    max-width: 10ch !important;
    color: #fffaf2 !important;
    font-size: clamp(1.34rem, 6.9vw, 1.85rem) !important;
    line-height: 1.04 !important;
  }

  #community > .section-head .ghost-button,
  body[data-theme] #community > .section-head .ghost-button {
    width: auto !important;
    min-width: 108px !important;
    max-width: 34vw !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    border-color: rgba(255, 136, 130, 0.34) !important;
    background: rgba(255, 89, 92, 0.09) !important;
    color: #ffb1ad !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  #community :is(
    .circle-identity-panel,
    .circle-room-panel,
    .social-share-panel,
    .community-challenge-panel,
    .community-battle-panel,
    .community-moodboard-panel,
    .community-shop-panel,
    .community-pulse-panel,
    .community-drop-panel,
    .community-feed-panel
  ),
  body[data-theme] #community :is(
    .circle-identity-panel,
    .circle-room-panel,
    .social-share-panel,
    .community-challenge-panel,
    .community-battle-panel,
    .community-moodboard-panel,
    .community-shop-panel,
    .community-pulse-panel,
    .community-drop-panel,
    .community-feed-panel
  ) {
    display: grid !important;
    gap: 10px !important;
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    border-radius: 17px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.017)),
      rgba(20, 22, 28, 0.96) !important;
    box-shadow: none !important;
    color: #fffaf2 !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  #community .panel-head,
  body[data-theme] #community .panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #community .panel-head .eyebrow,
  body[data-theme] #community .panel-head .eyebrow {
    color: #42d2ba !important;
    font-size: 0.72rem !important;
  }

  #community .panel-head h3,
  body[data-theme] #community .panel-head h3 {
    color: #fffaf2 !important;
    font-size: 1.08rem !important;
    line-height: 1.08 !important;
  }

  #community .panel-head :is(.primary-button, .ghost-button),
  body[data-theme] #community .panel-head :is(.primary-button, .ghost-button) {
    min-width: 108px !important;
    max-width: 34vw !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  #community .circle-identity-form,
  body[data-theme] #community .circle-identity-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #community .circle-identity-form .field-grid,
  #community .circle-identity-form .field-grid.two,
  body[data-theme] #community .circle-identity-form .field-grid,
  body[data-theme] #community .circle-identity-form .field-grid.two {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #community .circle-identity-form > label:nth-of-type(1),
  body[data-theme] #community .circle-identity-form > label:nth-of-type(1) {
    grid-column: 1 !important;
  }

  #community .circle-identity-form > label:nth-of-type(2),
  body[data-theme] #community .circle-identity-form > label:nth-of-type(2) {
    grid-column: 2 !important;
  }

  #community :is(.circle-identity-form, .social-share-panel) label,
  body[data-theme] #community :is(.circle-identity-form, .social-share-panel) label {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(245, 241, 232, 0.7) !important;
    font-size: 0.82rem !important;
    line-height: 1.12 !important;
  }

  #community :is(.circle-identity-form, .social-share-panel) :is(input, select, textarea),
  body[data-theme] #community :is(.circle-identity-form, .social-share-panel) :is(input, select, textarea) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    border: 1px solid rgba(245, 241, 232, 0.16) !important;
    border-radius: 13px !important;
    background: rgba(7, 8, 12, 0.92) !important;
    color: #fffaf2 !important;
    padding: 0 12px !important;
    font-size: max(1rem, 16px) !important;
  }

  #community .circle-identity-form textarea,
  body[data-theme] #community .circle-identity-form textarea {
    min-height: 70px !important;
    padding-top: 11px !important;
    line-height: 1.28 !important;
    resize: none !important;
  }

  #community .circle-identity-card,
  body[data-theme] #community .circle-identity-card {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 9px !important;
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    border-radius: 16px !important;
    background: rgba(7, 8, 12, 0.72) !important;
    color: #fffaf2 !important;
    padding: 9px !important;
  }

  #community .circle-avatar,
  body[data-theme] #community .circle-avatar {
    min-height: 58px !important;
    border-radius: 13px !important;
    background: #f3c95f !important;
    color: #111318 !important;
  }

  #community .circle-identity-main strong,
  body[data-theme] #community .circle-identity-main strong {
    color: #fffaf2 !important;
  }

  #community .circle-identity-main :is(span, p),
  body[data-theme] #community .circle-identity-main :is(span, p) {
    color: rgba(245, 241, 232, 0.68) !important;
  }

  #community .circle-identity-stats,
  body[data-theme] #community .circle-identity-stats {
    gap: 5px !important;
  }

  #community .circle-identity-stats span,
  body[data-theme] #community .circle-identity-stats span {
    background: rgba(245, 241, 232, 0.08) !important;
    color: rgba(245, 241, 232, 0.72) !important;
    padding: 6px !important;
  }

  #community .circle-identity-stats strong,
  body[data-theme] #community .circle-identity-stats strong {
    color: #fffaf2 !important;
  }

  #community .circle-rooms,
  body[data-theme] #community .circle-rooms {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #community .circle-rooms button,
  body[data-theme] #community .circle-rooms button {
    min-height: 54px !important;
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    border-radius: 14px !important;
    background: rgba(7, 8, 12, 0.72) !important;
    color: #fffaf2 !important;
    padding: 9px !important;
  }

  #community .circle-rooms button.active,
  body[data-theme] #community .circle-rooms button.active {
    border-color: rgba(243, 201, 95, 0.5) !important;
    background: rgba(243, 201, 95, 0.14) !important;
  }

  #community .circle-rooms span,
  body[data-theme] #community .circle-rooms span {
    color: rgba(245, 241, 232, 0.62) !important;
  }

  #community .circle-rooms strong,
  body[data-theme] #community .circle-rooms strong {
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #community .status-line:empty,
  body[data-theme] #community .status-line:empty {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* v449-brain-mobile-density: make profile training editable without a long first scroll. */
@media (max-width: 900px) {
  #brain,
  body[data-theme] #brain {
    background:
      linear-gradient(180deg, #111318 0%, #0a0b0f 44%, #111318 100%) !important;
    color: #fffaf2 !important;
  }

  #brain > .section-head,
  body[data-theme] #brain > .section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    border-radius: 17px !important;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
      rgba(19, 21, 27, 0.96) !important;
    padding: 13px !important;
    box-shadow: none !important;
  }

  #brain > .section-head > div,
  body[data-theme] #brain > .section-head > div {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  #brain > .section-head .eyebrow,
  body[data-theme] #brain > .section-head .eyebrow {
    color: #42d2ba !important;
    font-size: 0.73rem !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
  }

  #brain > .section-head h2,
  body[data-theme] #brain > .section-head h2 {
    max-width: 11ch !important;
    color: #fffaf2 !important;
    font-size: clamp(1.24rem, 6.2vw, 1.72rem) !important;
    line-height: 1.05 !important;
  }

  #brain > .section-head .ghost-button,
  body[data-theme] #brain > .section-head .ghost-button {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: 108px !important;
    max-width: 34vw !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    border-color: rgba(245, 241, 232, 0.16) !important;
    background: rgba(245, 241, 232, 0.08) !important;
    color: #fffaf2 !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
  }

  #brain .brain-layout,
  body[data-theme] #brain .brain-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  #brain .brain-panel,
  body[data-theme] #brain .brain-panel {
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    border-radius: 17px !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.017)),
      rgba(20, 22, 28, 0.96) !important;
    box-shadow: none !important;
    color: #fffaf2 !important;
    padding: 12px !important;
  }

  #brain #profileForm,
  body[data-theme] #brain #profileForm {
    display: grid !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  #brain #profileForm .panel-head,
  body[data-theme] #brain #profileForm .panel-head {
    min-height: 0 !important;
    margin: 0 !important;
  }

  #brain #profileForm .panel-head .eyebrow,
  body[data-theme] #brain #profileForm .panel-head .eyebrow {
    color: #42d2ba !important;
    font-size: 0.72rem !important;
  }

  #brain #profileForm .panel-head h3,
  body[data-theme] #brain #profileForm .panel-head h3 {
    color: #fffaf2 !important;
    font-size: 1.1rem !important;
    line-height: 1.08 !important;
  }

  #brain #profileForm .field-grid,
  body[data-theme] #brain #profileForm .field-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #brain #profileForm .field-grid > label:nth-child(4),
  body[data-theme] #brain #profileForm .field-grid > label:nth-child(4) {
    grid-column: 1 / -1 !important;
  }

  #brain #profileForm label,
  body[data-theme] #brain #profileForm label {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(245, 241, 232, 0.7) !important;
    font-size: 0.82rem !important;
    line-height: 1.12 !important;
  }

  #brain #profileForm :is(input, select),
  body[data-theme] #brain #profileForm :is(input, select) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    border: 1px solid rgba(245, 241, 232, 0.16) !important;
    border-radius: 13px !important;
    background: rgba(7, 8, 12, 0.92) !important;
    color: #fffaf2 !important;
    padding: 0 12px !important;
    font-size: max(1rem, 16px) !important;
  }

  #brain #profileForm .primary-button,
  body[data-theme] #brain #profileForm .primary-button {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 13px !important;
    background: #f3c95f !important;
    color: #111318 !important;
  }

  #brain #profileForm .status-line:empty,
  body[data-theme] #brain #profileForm .status-line:empty {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* v450-coach-fit-plan-mobile-density: compact the three primary decision workflows. */
@media (max-width: 900px) {
  :is(#coach, #fit, #planner) > .section-head,
  body[data-theme] :is(#coach, #fit, #planner) > .section-head {
    gap: 10px !important;
    padding: 13px !important;
  }

  :is(#coach, #fit, #planner) > .section-head h2,
  body[data-theme] :is(#coach, #fit, #planner) > .section-head h2 {
    font-size: clamp(1.32rem, 6.8vw, 1.88rem) !important;
    line-height: 1.05 !important;
  }

  :is(#coach, #fit, #planner) > .section-head .section-actions,
  body[data-theme] :is(#coach, #fit, #planner) > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  #planner > .section-head .section-actions,
  body[data-theme] #planner > .section-head .section-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :is(#coach, #fit, #planner) > .section-head .section-actions > *,
  :is(#coach, #fit, #planner) > .section-head .section-actions .primary-button,
  :is(#coach, #fit, #planner) > .section-head .section-actions .ghost-button,
  body[data-theme] :is(#coach, #fit, #planner) > .section-head .section-actions > *,
  body[data-theme] :is(#coach, #fit, #planner) > .section-head .section-actions .primary-button,
  body[data-theme] :is(#coach, #fit, #planner) > .section-head .section-actions .ghost-button {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    padding: 0 8px !important;
    font-size: 0.78rem !important;
    line-height: 1.08 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  :is(#coach, #fit) .coach-answer,
  #fit .fit-ticket,
  #planner .planner-ticket,
  body[data-theme] :is(#coach, #fit) .coach-answer,
  body[data-theme] #fit .fit-ticket,
  body[data-theme] #planner .planner-ticket {
    border-radius: 18px !important;
    padding: 12px !important;
  }

  #coach .coach-answer-head,
  #fit .fit-ticket-head,
  #planner .planner-ticket-head,
  body[data-theme] #coach .coach-answer-head,
  body[data-theme] #fit .fit-ticket-head,
  body[data-theme] #planner .planner-ticket-head {
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
  }

  #coach .coach-answer-head h3,
  #fit .fit-ticket-head h3,
  #planner .planner-ticket-head h3,
  body[data-theme] #coach .coach-answer-head h3,
  body[data-theme] #fit .fit-ticket-head h3,
  body[data-theme] #planner .planner-ticket-head h3 {
    font-size: 1.08rem !important;
    line-height: 1.08 !important;
  }

  #coach #coachScore,
  #fit #fitScore,
  #planner #plannerScore,
  body[data-theme] #coach #coachScore,
  body[data-theme] #fit #fitScore,
  body[data-theme] #planner #plannerScore {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    font-size: 1rem !important;
  }

  #coach .coach-metrics,
  #fit .fit-metrics,
  #planner .planner-metrics,
  body[data-theme] #coach .coach-metrics,
  body[data-theme] #fit .fit-metrics,
  body[data-theme] #planner .planner-metrics {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  #coach .coach-metrics div,
  #fit .fit-metrics div,
  #planner .planner-metrics div,
  body[data-theme] #coach .coach-metrics div,
  body[data-theme] #fit .fit-metrics div,
  body[data-theme] #planner .planner-metrics div {
    min-height: 58px !important;
    border: 1px solid rgba(245, 241, 232, 0.1) !important;
    border-radius: 13px !important;
    background: rgba(245, 241, 232, 0.075) !important;
    padding: 8px !important;
  }

  #coach .coach-metrics strong,
  #fit .fit-metrics strong,
  #planner .planner-metrics strong,
  body[data-theme] #coach .coach-metrics strong,
  body[data-theme] #fit .fit-metrics strong,
  body[data-theme] #planner .planner-metrics strong {
    font-size: 0.94rem !important;
    line-height: 1.08 !important;
  }

  #coach .coach-metrics span,
  #fit .fit-metrics span,
  #planner .planner-metrics span,
  body[data-theme] #coach .coach-metrics span,
  body[data-theme] #fit .fit-metrics span,
  body[data-theme] #planner .planner-metrics span {
    font-size: 0.66rem !important;
    line-height: 1.08 !important;
  }

  #coach .coach-message,
  body[data-theme] #coach .coach-message {
    gap: 8px !important;
  }

  #coach .coach-message p,
  body[data-theme] #coach .coach-message p,
  #fit .fit-readout p,
  body[data-theme] #fit .fit-readout p,
  #planner .planner-reasons p,
  body[data-theme] #planner .planner-reasons p {
    max-width: 100% !important;
    border-radius: 13px !important;
    padding: 9px 10px !important;
    color: rgba(245, 241, 232, 0.86) !important;
    font-size: 0.9rem !important;
    line-height: 1.28 !important;
  }

  #fit .fit-hero-card,
  body[data-theme] #fit .fit-hero-card {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 10px !important;
    border-radius: 16px !important;
    padding: 8px !important;
  }

  #fit .fit-hero-card img,
  body[data-theme] #fit .fit-hero-card img {
    width: 86px !important;
    height: 108px !important;
    border-radius: 13px !important;
  }

  #fit .fit-hero-card strong,
  body[data-theme] #fit .fit-hero-card strong {
    font-size: 0.98rem !important;
    line-height: 1.08 !important;
  }

  #fit .fit-metrics,
  #planner .planner-metrics,
  body[data-theme] #fit .fit-metrics,
  body[data-theme] #planner .planner-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #fit .fit-metrics div,
  #planner .planner-metrics div,
  body[data-theme] #fit .fit-metrics div,
  body[data-theme] #planner .planner-metrics div {
    min-height: 54px !important;
  }

  #fit .fit-metrics strong,
  #planner .planner-metrics strong,
  body[data-theme] #fit .fit-metrics strong,
  body[data-theme] #planner .planner-metrics strong {
    font-size: 1rem !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  #planner #copyPlanButton,
  body[data-theme] #planner #copyPlanButton {
    grid-column: auto !important;
  }
}

/* v723-upload-toast-safe-area: keep upload feedback away from the Studio title and CTA. */
@media (max-width: 900px) {
  .app-toast,
  body[data-theme] .app-toast {
    top: auto !important;
    right: auto !important;
    bottom: calc(var(--dock-height, 78px) + var(--safe-bottom, 0px) + 14px) !important;
    left: 50% !important;
    width: max-content !important;
    max-width: min(300px, calc(100vw - 44px)) !important;
    min-height: 42px !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    font-size: 0.84rem !important;
    line-height: 1.14 !important;
    transform: translate(-50%, 10px) scale(0.98) !important;
  }

  .app-toast.is-visible,
  body[data-theme] .app-toast.is-visible {
    transform: translate(-50%, 0) scale(1) !important;
  }
}

/* v452-mobile-density-pass: reduce chrome weight and make commerce/profile tools quicker to scan. */
@media (max-width: 900px) {
  :root {
    --topbar-height: 58px !important;
    --dock-height: 92px !important;
  }

  .app-shell .topbar,
  body[data-theme] .app-shell .topbar,
  html.native-layout-guard .app-shell .topbar,
  html.native-layout-guard body[data-theme] .app-shell .topbar {
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    grid-template-columns: 76px minmax(0, 1fr) 42px 50px 58px !important;
    gap: 5px !important;
    padding: 7px 8px !important;
    border-radius: 0 0 16px 16px !important;
  }

  .brand,
  body[data-theme] .brand,
  html.native-layout-guard .brand,
  html.native-layout-guard body[data-theme] .brand {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 44px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock,
  html.native-layout-guard .brand-logo {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    height: 42px !important;
  }

  .active-view-chip,
  body[data-theme] .active-view-chip {
    min-height: 44px !important;
    padding: 4px 9px !important;
    border-radius: 15px !important;
    font-size: 0.82rem !important;
    font-weight: 780 !important;
  }

  .command-button,
  body[data-theme] .command-button,
  :is(.locale-switch, .market-switch),
  body[data-theme] :is(.locale-switch, .market-switch),
  :is(.locale-switch, .market-switch) select,
  body[data-theme] :is(.locale-switch, .market-switch) select {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  .command-button,
  body[data-theme] .command-button {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    border-radius: 13px !important;
  }

  .mobile-dock,
  body[data-theme] .mobile-dock,
  html.native-layout-guard .mobile-dock,
  html.native-layout-guard body[data-theme] .mobile-dock {
    min-height: 92px !important;
    height: 92px !important;
    max-height: 92px !important;
    gap: 5px !important;
    padding: 8px 9px calc(8px + var(--safe-bottom, 0px)) !important;
    border-radius: 17px 17px 0 0 !important;
  }

  .mobile-dock a,
  body[data-theme] .mobile-dock a,
  html.native-layout-guard .mobile-dock a {
    min-height: 66px !important;
    max-height: 66px !important;
    grid-template-rows: 28px minmax(17px, auto) !important;
    gap: 5px !important;
    padding: 5px 3px 4px !important;
    border-radius: 13px !important;
  }

  .mobile-dock .dock-icon,
  body[data-theme] .mobile-dock .dock-icon,
  html.native-layout-guard .mobile-dock .dock-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
  }

  .mobile-dock .dock-icon svg,
  body[data-theme] .mobile-dock .dock-icon svg,
  html.native-layout-guard .mobile-dock .dock-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .mobile-dock .dock-label,
  body[data-theme] .mobile-dock .dock-label {
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
    font-weight: 750 !important;
    max-height: 2.2em !important;
  }

  :is(#passport, #discover, #inventory, #lookbook) > .section-head,
  body[data-theme] :is(#passport, #discover, #inventory, #lookbook) > .section-head {
    gap: 9px !important;
    margin-bottom: 8px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  :is(#passport, #discover, #inventory, #lookbook) > .section-head h2,
  body[data-theme] :is(#passport, #discover, #inventory, #lookbook) > .section-head h2 {
    font-size: 1.42rem !important;
    line-height: 1.08 !important;
  }

  :is(#passport, #discover, #inventory, #lookbook) > .section-head .eyebrow,
  body[data-theme] :is(#passport, #discover, #inventory, #lookbook) > .section-head .eyebrow {
    font-size: 0.78rem !important;
    line-height: 1.12 !important;
  }

  :is(#passport, #discover, #lookbook) > .section-head .section-actions,
  body[data-theme] :is(#passport, #discover, #lookbook) > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  #lookbook > .section-head .section-actions .primary-button,
  #lookbook > .section-head .section-actions #exportLookbookButton,
  body[data-theme] #lookbook > .section-head .section-actions .primary-button,
  body[data-theme] #lookbook > .section-head .section-actions #exportLookbookButton {
    grid-column: auto !important;
  }

  :is(#passport, #discover, #lookbook) > .section-head .section-actions > *,
  body[data-theme] :is(#passport, #discover, #lookbook) > .section-head .section-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    padding: 0 8px !important;
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  #discover > .section-head .section-actions .primary-button,
  body[data-theme] #discover > .section-head .section-actions .primary-button {
    grid-column: 1 / -1 !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  #inventory .section-actions,
  body[data-theme] #inventory .section-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
  }

  #inventory .segmented,
  body[data-theme] #inventory .segmented,
  #inventory .csv-actions,
  body[data-theme] #inventory .csv-actions {
    gap: 6px !important;
  }

  #inventory .segmented button,
  #inventory .csv-actions :is(.ghost-button, .import-button),
  body[data-theme] #inventory .segmented button,
  body[data-theme] #inventory .csv-actions :is(.ghost-button, .import-button) {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    padding: 0 7px !important;
    font-size: 0.78rem !important;
    line-height: 1.08 !important;
  }

  main .status-line:empty,
  body[data-theme] main .status-line:empty {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #passport .passport-panel,
  #lookbook .lookbook-panel,
  #inventory .wardrobe-panel,
  body[data-theme] #passport .passport-panel,
  body[data-theme] #lookbook .lookbook-panel,
  body[data-theme] #inventory .wardrobe-panel {
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  #passport .passport-panel .panel-head,
  #lookbook .lookbook-panel .panel-head,
  #inventory .wardrobe-panel .panel-head,
  body[data-theme] #passport .passport-panel .panel-head,
  body[data-theme] #lookbook .lookbook-panel .panel-head,
  body[data-theme] #inventory .wardrobe-panel .panel-head {
    gap: 5px !important;
    margin-bottom: 2px !important;
  }

  #passport .passport-panel h3,
  #lookbook .lookbook-panel h3,
  #inventory .wardrobe-panel h3,
  body[data-theme] #passport .passport-panel h3,
  body[data-theme] #lookbook .lookbook-panel h3,
  body[data-theme] #inventory .wardrobe-panel h3 {
    font-size: 1.18rem !important;
    line-height: 1.08 !important;
  }

  #passport .passport-panel .field-grid,
  #passport .passport-panel .field-grid.two,
  #lookbook .lookbook-panel .field-grid,
  #lookbook .lookbook-panel .field-grid.two,
  body[data-theme] #passport .passport-panel .field-grid,
  body[data-theme] #passport .passport-panel .field-grid.two,
  body[data-theme] #lookbook .lookbook-panel .field-grid,
  body[data-theme] #lookbook .lookbook-panel .field-grid.two {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #passport .passport-panel label,
  #lookbook .lookbook-panel label,
  body[data-theme] #passport .passport-panel label,
  body[data-theme] #lookbook .lookbook-panel label {
    gap: 5px !important;
    color: rgba(245, 241, 232, 0.72) !important;
    font-size: 0.78rem !important;
    line-height: 1.14 !important;
  }

  #passport .passport-panel :is(input, select),
  #lookbook .lookbook-panel :is(input, select),
  body[data-theme] #passport .passport-panel :is(input, select),
  body[data-theme] #lookbook .lookbook-panel :is(input, select) {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    padding: 0 10px !important;
    font-size: max(1rem, 16px) !important;
    line-height: 1.08 !important;
  }

  #passport .passport-panel input[type="range"],
  #lookbook .lookbook-panel input[type="range"],
  body[data-theme] #passport .passport-panel input[type="range"],
  body[data-theme] #lookbook .lookbook-panel input[type="range"] {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 !important;
  }

  #passport .passport-panel .range-value,
  #lookbook .lookbook-panel .range-value,
  body[data-theme] #passport .passport-panel .range-value,
  body[data-theme] #lookbook .lookbook-panel .range-value {
    min-height: 0 !important;
    margin-top: -2px !important;
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
  }

  #inventory .wardrobe-metrics,
  body[data-theme] #inventory .wardrobe-metrics {
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 14px !important;
  }

  #inventory .wardrobe-metrics div,
  body[data-theme] #inventory .wardrobe-metrics div {
    min-height: 50px !important;
    gap: 7px !important;
    padding: 8px 9px !important;
    border-radius: 11px !important;
  }

  #inventory .wardrobe-metrics strong,
  body[data-theme] #inventory .wardrobe-metrics strong {
    font-size: 1rem !important;
    line-height: 1.04 !important;
  }

  #inventory .wardrobe-metrics span,
  body[data-theme] #inventory .wardrobe-metrics span {
    font-size: 0.72rem !important;
    line-height: 1.08 !important;
  }

  #inventory .wardrobe-map,
  body[data-theme] #inventory .wardrobe-map {
    gap: 8px !important;
  }
}

@media (max-width: 370px) {
  #passport .passport-panel .field-grid,
  #passport .passport-panel .field-grid.two,
  #lookbook .lookbook-panel .field-grid,
  #lookbook .lookbook-panel .field-grid.two,
  body[data-theme] #passport .passport-panel .field-grid,
  body[data-theme] #passport .passport-panel .field-grid.two,
  body[data-theme] #lookbook .lookbook-panel .field-grid,
  body[data-theme] #lookbook .lookbook-panel .field-grid.two {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v453-workspace-rhythm: give the remaining tools the same compact, scannable mobile rhythm. */
@media (max-width: 900px) {
  :is(#brain, #clients, #coach, #fit, #planner, #capsule, #report, #trends) > .section-head,
  body[data-theme] :is(#brain, #clients, #coach, #fit, #planner, #capsule, #report, #trends) > .section-head {
    gap: 9px !important;
    margin-bottom: 8px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  :is(#brain, #clients, #coach, #fit, #planner, #capsule, #report, #trends) > .section-head h2,
  body[data-theme] :is(#brain, #clients, #coach, #fit, #planner, #capsule, #report, #trends) > .section-head h2 {
    font-size: 1.42rem !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
  }

  :is(#brain, #clients, #coach, #fit, #planner, #capsule, #report, #trends) > .section-head .eyebrow,
  body[data-theme] :is(#brain, #clients, #coach, #fit, #planner, #capsule, #report, #trends) > .section-head .eyebrow {
    font-size: 0.78rem !important;
    line-height: 1.12 !important;
  }

  :is(#brain, #clients) > .section-head > button,
  :is(#coach, #fit, #planner, #capsule, #report, #trends) > .section-head .section-actions > *,
  body[data-theme] :is(#brain, #clients) > .section-head > button,
  body[data-theme] :is(#coach, #fit, #planner, #capsule, #report, #trends) > .section-head .section-actions > * {
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    padding: 0 8px !important;
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  :is(#brain, #clients) > .section-head,
  body[data-theme] :is(#brain, #clients) > .section-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  :is(#brain, #clients) > .section-head > button,
  body[data-theme] :is(#brain, #clients) > .section-head > button {
    justify-self: end !important;
    width: min(148px, 38vw) !important;
  }

  :is(#coach, #fit, #planner, #capsule, #report, #trends) > .section-head .section-actions,
  body[data-theme] :is(#coach, #fit, #planner, #capsule, #report, #trends) > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  #coach > .section-head .section-actions,
  #fit > .section-head .section-actions,
  body[data-theme] #coach > .section-head .section-actions,
  body[data-theme] #fit > .section-head .section-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #report > .section-head .section-actions .primary-button,
  #trends > .section-head .section-actions .primary-button,
  body[data-theme] #report > .section-head .section-actions .primary-button,
  body[data-theme] #trends > .section-head .section-actions .primary-button {
    grid-column: auto !important;
  }

  #brain :is(#profileForm, #ruleForm),
  #clients #leadForm,
  #trends .trend-form,
  body[data-theme] #brain :is(#profileForm, #ruleForm),
  body[data-theme] #clients #leadForm,
  body[data-theme] #trends .trend-form {
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  #brain :is(#profileForm, #ruleForm) .panel-head,
  #clients #leadForm .panel-head,
  #trends .trend-form .panel-head,
  body[data-theme] #brain :is(#profileForm, #ruleForm) .panel-head,
  body[data-theme] #clients #leadForm .panel-head,
  body[data-theme] #trends .trend-form .panel-head {
    gap: 5px !important;
    margin-bottom: 2px !important;
  }

  #brain :is(#profileForm, #ruleForm) h3,
  #clients #leadForm h3,
  #trends .trend-form h3,
  body[data-theme] #brain :is(#profileForm, #ruleForm) h3,
  body[data-theme] #clients #leadForm h3,
  body[data-theme] #trends .trend-form h3 {
    font-size: 1.18rem !important;
    line-height: 1.08 !important;
  }

  #brain :is(#profileForm, #ruleForm) .field-grid,
  #brain :is(#profileForm, #ruleForm) .field-grid.two,
  #clients #leadForm .field-grid,
  #clients #leadForm .field-grid.two,
  #trends .trend-form .field-grid,
  #trends .trend-form .field-grid.two,
  body[data-theme] #brain :is(#profileForm, #ruleForm) .field-grid,
  body[data-theme] #brain :is(#profileForm, #ruleForm) .field-grid.two,
  body[data-theme] #clients #leadForm .field-grid,
  body[data-theme] #clients #leadForm .field-grid.two,
  body[data-theme] #trends .trend-form .field-grid,
  body[data-theme] #trends .trend-form .field-grid.two {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #trends .trend-form > label:nth-of-type(1),
  #trends .trend-form > label:nth-of-type(2),
  body[data-theme] #trends .trend-form > label:nth-of-type(1),
  body[data-theme] #trends .trend-form > label:nth-of-type(2) {
    width: 100% !important;
  }

  #brain :is(#profileForm, #ruleForm) label,
  #clients #leadForm label,
  #trends .trend-form label,
  body[data-theme] #brain :is(#profileForm, #ruleForm) label,
  body[data-theme] #clients #leadForm label,
  body[data-theme] #trends .trend-form label {
    gap: 5px !important;
    color: rgba(245, 241, 232, 0.72) !important;
    font-size: 0.78rem !important;
    line-height: 1.14 !important;
  }

  #brain :is(#profileForm, #ruleForm) :is(input, select),
  #clients #leadForm :is(input, select),
  #trends .trend-form :is(input, select),
  body[data-theme] #brain :is(#profileForm, #ruleForm) :is(input, select),
  body[data-theme] #clients #leadForm :is(input, select),
  body[data-theme] #trends .trend-form :is(input, select) {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    padding: 0 10px !important;
    font-size: max(1rem, 16px) !important;
    line-height: 1.08 !important;
  }

  #brain :is(#profileForm, #ruleForm) input[type="range"],
  #clients #leadForm input[type="range"],
  #trends .trend-form input[type="range"],
  body[data-theme] #brain :is(#profileForm, #ruleForm) input[type="range"],
  body[data-theme] #clients #leadForm input[type="range"],
  body[data-theme] #trends .trend-form input[type="range"] {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 !important;
  }

  #brain :is(#profileForm, #ruleForm) .range-value,
  #clients #leadForm .range-value,
  #trends .trend-form .range-value,
  body[data-theme] #brain :is(#profileForm, #ruleForm) .range-value,
  body[data-theme] #clients #leadForm .range-value,
  body[data-theme] #trends .trend-form .range-value {
    min-height: 0 !important;
    margin-top: -2px !important;
    font-size: 0.82rem !important;
    line-height: 1.1 !important;
  }

  #brain :is(#profileForm, #ruleForm) .primary-button,
  #clients #leadForm .primary-button,
  #trends .trend-form .primary-button,
  body[data-theme] #brain :is(#profileForm, #ruleForm) .primary-button,
  body[data-theme] #clients #leadForm .primary-button,
  body[data-theme] #trends .trend-form .primary-button {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  :is(#coach, #fit, #planner, #capsule) :is(.coach-answer, .fit-ticket, .planner-ticket, .capsule-card),
  body[data-theme] :is(#coach, #fit, #planner, #capsule) :is(.coach-answer, .fit-ticket, .planner-ticket, .capsule-card) {
    padding: 11px !important;
    border-radius: 16px !important;
  }

  :is(#coach, #fit, #planner, #capsule) :is(.coach-metrics, .fit-metrics, .planner-metrics, .capsule-metrics),
  #clients :is(.client-metrics, .client-dossier-metrics, .action-queue-metrics),
  #report :is(.report-metrics, .product-signal-metrics, .restock-metrics, .campaign-metrics, .campaign-history-metrics),
  #trends .trend-metrics,
  body[data-theme] :is(#coach, #fit, #planner, #capsule) :is(.coach-metrics, .fit-metrics, .planner-metrics, .capsule-metrics),
  body[data-theme] #clients :is(.client-metrics, .client-dossier-metrics, .action-queue-metrics),
  body[data-theme] #report :is(.report-metrics, .product-signal-metrics, .restock-metrics, .campaign-metrics, .campaign-history-metrics),
  body[data-theme] #trends .trend-metrics {
    gap: 6px !important;
  }

  :is(#coach, #fit, #planner, #capsule) :is(.coach-metrics, .fit-metrics, .planner-metrics, .capsule-metrics) div,
  #clients :is(.client-metrics, .client-dossier-metrics, .action-queue-metrics) div,
  #report :is(.report-metrics, .product-signal-metrics, .restock-metrics, .campaign-metrics, .campaign-history-metrics) div,
  #trends .trend-metrics div,
  body[data-theme] :is(#coach, #fit, #planner, #capsule) :is(.coach-metrics, .fit-metrics, .planner-metrics, .capsule-metrics) div,
  body[data-theme] #clients :is(.client-metrics, .client-dossier-metrics, .action-queue-metrics) div,
  body[data-theme] #report :is(.report-metrics, .product-signal-metrics, .restock-metrics, .campaign-metrics, .campaign-history-metrics) div,
  body[data-theme] #trends .trend-metrics div {
    min-height: 52px !important;
    padding: 8px 9px !important;
    border-radius: 12px !important;
  }

  :is(#coach, #fit, #planner, #capsule) :is(.coach-metrics, .fit-metrics, .planner-metrics, .capsule-metrics) strong,
  #clients :is(.client-metrics, .client-dossier-metrics, .action-queue-metrics) strong,
  #report :is(.report-metrics, .product-signal-metrics, .restock-metrics, .campaign-metrics, .campaign-history-metrics) strong,
  #trends .trend-metrics strong,
  body[data-theme] :is(#coach, #fit, #planner, #capsule) :is(.coach-metrics, .fit-metrics, .planner-metrics, .capsule-metrics) strong,
  body[data-theme] #clients :is(.client-metrics, .client-dossier-metrics, .action-queue-metrics) strong,
  body[data-theme] #report :is(.report-metrics, .product-signal-metrics, .restock-metrics, .campaign-metrics, .campaign-history-metrics) strong,
  body[data-theme] #trends .trend-metrics strong {
    font-size: 1rem !important;
    line-height: 1.05 !important;
  }

  :is(#coach, #fit, #planner, #capsule) :is(.coach-metrics, .fit-metrics, .planner-metrics, .capsule-metrics) span,
  #clients :is(.client-metrics, .client-dossier-metrics, .action-queue-metrics) span,
  #report :is(.report-metrics, .product-signal-metrics, .restock-metrics, .campaign-metrics, .campaign-history-metrics) span,
  #trends .trend-metrics span,
  body[data-theme] :is(#coach, #fit, #planner, #capsule) :is(.coach-metrics, .fit-metrics, .planner-metrics, .capsule-metrics) span,
  body[data-theme] #clients :is(.client-metrics, .client-dossier-metrics, .action-queue-metrics) span,
  body[data-theme] #report :is(.report-metrics, .product-signal-metrics, .restock-metrics, .campaign-metrics, .campaign-history-metrics) span,
  body[data-theme] #trends .trend-metrics span {
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
  }

  #coach .coach-message p,
  #fit .fit-readout p,
  #planner .planner-reasons p,
  #capsule .capsule-reasons p,
  body[data-theme] #coach .coach-message p,
  body[data-theme] #fit .fit-readout p,
  body[data-theme] #planner .planner-reasons p,
  body[data-theme] #capsule .capsule-reasons p {
    padding: 8px 9px !important;
    border-radius: 12px !important;
    font-size: 0.86rem !important;
    line-height: 1.24 !important;
  }

  #report .report-panel,
  #trends .trend-intel-panel,
  body[data-theme] #report .report-panel,
  body[data-theme] #trends .trend-intel-panel {
    gap: 9px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 370px) {
  #brain :is(#profileForm, #ruleForm) .field-grid,
  #brain :is(#profileForm, #ruleForm) .field-grid.two,
  #clients #leadForm .field-grid,
  #clients #leadForm .field-grid.two,
  #trends .trend-form .field-grid,
  #trends .trend-form .field-grid.two,
  body[data-theme] #brain :is(#profileForm, #ruleForm) .field-grid,
  body[data-theme] #brain :is(#profileForm, #ruleForm) .field-grid.two,
  body[data-theme] #clients #leadForm .field-grid,
  body[data-theme] #clients #leadForm .field-grid.two,
  body[data-theme] #trends .trend-form .field-grid,
  body[data-theme] #trends .trend-form .field-grid.two {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(#brain, #clients) > .section-head,
  body[data-theme] :is(#brain, #clients) > .section-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :is(#brain, #clients) > .section-head > button,
  body[data-theme] :is(#brain, #clients) > .section-head > button {
    justify-self: stretch !important;
    width: 100% !important;
  }
}

/* v454-report-action-row: keep the store report controls balanced on the first mobile screen. */
@media (max-width: 900px) {
  #report > .section-head .section-actions,
  body[data-theme] #report > .section-head .section-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #report > .section-head .section-actions > *,
  body[data-theme] #report > .section-head .section-actions > * {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 6px !important;
    font-size: 0.76rem !important;
    line-height: 1.08 !important;
  }
}

/* v455-readable-mobile-dock: make the bottom navigation compact without losing touch targets. */
@media (max-width: 900px) {
  :root {
    --dock-height: 80px !important;
  }

  .mobile-dock,
  body[data-theme] .mobile-dock,
  html.native-layout-guard .mobile-dock,
  html.native-layout-guard body[data-theme] .mobile-dock {
    min-height: 80px !important;
    height: 80px !important;
    max-height: 80px !important;
    gap: 5px !important;
    padding: 6px 8px calc(6px + var(--safe-bottom, 0px)) !important;
    border-radius: 15px 15px 0 0 !important;
    background: rgba(8, 10, 13, 0.96) !important;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  }

  .mobile-dock a,
  body[data-theme] .mobile-dock a,
  html.native-layout-guard .mobile-dock a {
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    grid-template-rows: 24px 16px !important;
    align-content: center !important;
    gap: 4px !important;
    padding: 5px 3px 4px !important;
    border-radius: 12px !important;
    border-color: rgba(245, 241, 232, 0.16) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    overflow: hidden !important;
  }

  .mobile-dock a.active,
  body[data-theme] .mobile-dock a.active,
  html.native-layout-guard .mobile-dock a.active {
    border-color: rgba(249, 80, 142, 0.58) !important;
    background: linear-gradient(180deg, rgba(249, 80, 142, 0.2), rgba(255, 255, 255, 0.08)) !important;
  }

  .mobile-dock .dock-icon,
  body[data-theme] .mobile-dock .dock-icon,
  html.native-layout-guard .mobile-dock .dock-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 9px !important;
  }

  .mobile-dock .dock-icon svg,
  body[data-theme] .mobile-dock .dock-icon svg,
  html.native-layout-guard .mobile-dock .dock-icon svg {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 2.1px !important;
  }

  .mobile-dock .dock-label,
  body[data-theme] .mobile-dock .dock-label,
  html.native-layout-guard .mobile-dock .dock-label {
    max-width: 100% !important;
    max-height: 16px !important;
    color: rgba(245, 241, 232, 0.84) !important;
    font-size: 0.74rem !important;
    font-weight: 780 !important;
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-dock a.active .dock-label,
  body[data-theme] .mobile-dock a.active .dock-label,
  html.native-layout-guard .mobile-dock a.active .dock-label {
    color: #fffaf2 !important;
  }
}

/* v456-native-tabbar-dock: replace chunky bottom cards with a lighter app tab bar. */
@media (max-width: 900px) {
  :root {
    --dock-height: 66px !important;
  }

  .mobile-dock,
  body[data-theme] .mobile-dock,
  html.native-layout-guard .mobile-dock,
  html.native-layout-guard body[data-theme] .mobile-dock {
    min-height: 66px !important;
    height: 66px !important;
    max-height: 66px !important;
    gap: 0 !important;
    padding: 6px 12px calc(6px + var(--safe-bottom, 0px)) !important;
    border: 1px solid rgba(245, 241, 232, 0.1) !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background: linear-gradient(180deg, rgba(15, 17, 21, 0.96), rgba(7, 8, 10, 0.98)) !important;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }

  .mobile-dock a,
  body[data-theme] .mobile-dock a,
  html.native-layout-guard .mobile-dock a {
    position: relative !important;
    min-height: 52px !important;
    height: 52px !important;
    max-height: 52px !important;
    grid-template-rows: 24px 14px !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 3px !important;
    padding: 4px 0 3px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .mobile-dock a::before,
  body[data-theme] .mobile-dock a::before,
  html.native-layout-guard .mobile-dock a::before {
    display: none !important;
    content: none !important;
  }

  .mobile-dock a::after,
  body[data-theme] .mobile-dock a::after,
  html.native-layout-guard .mobile-dock a::after {
    position: absolute !important;
    top: 2px !important;
    left: 50% !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: transparent !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
    content: "" !important;
  }

  .mobile-dock a.active,
  body[data-theme] .mobile-dock a.active,
  html.native-layout-guard .mobile-dock a.active {
    background: rgba(249, 80, 142, 0.08) !important;
  }

  .mobile-dock a.active::after,
  body[data-theme] .mobile-dock a.active::after,
  html.native-layout-guard .mobile-dock a.active::after {
    background: #f9508e !important;
    opacity: 1 !important;
  }

  .mobile-dock .dock-icon,
  body[data-theme] .mobile-dock .dock-icon,
  html.native-layout-guard .mobile-dock .dock-icon {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    min-height: 23px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(245, 241, 232, 0.78) !important;
  }

  .mobile-dock a.active .dock-icon,
  body[data-theme] .mobile-dock a.active .dock-icon,
  html.native-layout-guard .mobile-dock a.active .dock-icon {
    background: rgba(249, 80, 142, 0.96) !important;
    color: #fffaf2 !important;
    box-shadow: 0 6px 16px rgba(249, 80, 142, 0.24) !important;
    transform: translateY(-1px) !important;
  }

  .mobile-dock .dock-icon svg,
  body[data-theme] .mobile-dock .dock-icon svg,
  html.native-layout-guard .mobile-dock .dock-icon svg {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 2.1px !important;
  }

  .mobile-dock .dock-label,
  body[data-theme] .mobile-dock .dock-label,
  html.native-layout-guard .mobile-dock .dock-label {
    max-width: 100% !important;
    max-height: 14px !important;
    color: rgba(245, 241, 232, 0.72) !important;
    font-size: 0.66rem !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-dock a.active .dock-label,
  body[data-theme] .mobile-dock a.active .dock-label,
  html.native-layout-guard .mobile-dock a.active .dock-label {
    color: #fffaf2 !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 370px) {
  :root {
    --dock-height: 64px !important;
  }

  .mobile-dock,
  body[data-theme] .mobile-dock,
  html.native-layout-guard .mobile-dock {
    min-height: 64px !important;
    height: 64px !important;
    max-height: 64px !important;
    padding-inline: 9px !important;
  }

  .mobile-dock .dock-label,
  body[data-theme] .mobile-dock .dock-label {
    font-size: 0.62rem !important;
  }
}

/* v457-flat-tabbar-active-state: remove the last heavy active tile from the dock. */
@media (max-width: 900px) {
  :root {
    --dock-height: 60px !important;
  }

  .mobile-dock,
  body[data-theme] .mobile-dock,
  html.native-layout-guard .mobile-dock,
  html.native-layout-guard body[data-theme] .mobile-dock {
    min-height: 60px !important;
    height: 60px !important;
    max-height: 60px !important;
    padding: 5px 12px calc(5px + var(--safe-bottom, 0px)) !important;
    border-radius: 17px 17px 0 0 !important;
  }

  .mobile-dock a,
  body[data-theme] .mobile-dock a,
  html.native-layout-guard .mobile-dock a,
  .mobile-dock a.active,
  body[data-theme] .mobile-dock a.active,
  html.native-layout-guard .mobile-dock a.active {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    grid-template-rows: 22px 13px !important;
    gap: 3px !important;
    padding: 4px 0 2px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mobile-dock a.active::after,
  body[data-theme] .mobile-dock a.active::after,
  html.native-layout-guard .mobile-dock a.active::after {
    top: 1px !important;
    width: 18px !important;
    height: 2px !important;
    opacity: 0.9 !important;
  }

  .mobile-dock .dock-icon,
  body[data-theme] .mobile-dock .dock-icon,
  html.native-layout-guard .mobile-dock .dock-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    border-radius: 8px !important;
  }

  .mobile-dock a.active .dock-icon,
  body[data-theme] .mobile-dock a.active .dock-icon,
  html.native-layout-guard .mobile-dock a.active .dock-icon {
    box-shadow: 0 5px 13px rgba(249, 80, 142, 0.22) !important;
  }

  .mobile-dock .dock-icon svg,
  body[data-theme] .mobile-dock .dock-icon svg,
  html.native-layout-guard .mobile-dock .dock-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .mobile-dock .dock-label,
  body[data-theme] .mobile-dock .dock-label,
  html.native-layout-guard .mobile-dock .dock-label,
  .mobile-dock a.active .dock-label,
  body[data-theme] .mobile-dock a.active .dock-label,
  html.native-layout-guard .mobile-dock a.active .dock-label {
    max-height: 13px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
  }
}

/* v458-lightweight-topbar-controls: make search, locale and currency read as utility controls, not chunky buttons. */
@media (max-width: 900px) {
  :root {
    --topbar-height: 54px !important;
  }

  .app-shell .topbar,
  body[data-theme] .app-shell .topbar,
  html.native-layout-guard .app-shell .topbar,
  html.native-layout-guard body[data-theme] .app-shell .topbar {
    min-height: 54px !important;
    height: 54px !important;
    max-height: 54px !important;
    grid-template-columns: 74px minmax(0, 1fr) 40px 42px 50px !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    border-radius: 0 0 14px 14px !important;
    background: rgba(7, 8, 10, 0.94) !important;
  }

  .brand,
  body[data-theme] .brand,
  html.native-layout-guard .brand,
  html.native-layout-guard body[data-theme] .brand {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
    height: 42px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock,
  html.native-layout-guard .brand-logo {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 40px !important;
  }

  .active-view-chip,
  body[data-theme] .active-view-chip,
  html.native-layout-guard .active-view-chip {
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
  }

  .command-button,
  body[data-theme] .command-button,
  html.native-layout-guard .command-button {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(245, 241, 232, 0.9) !important;
  }

  .command-button:active,
  body[data-theme] .command-button:active,
  .command-button:focus-visible,
  body[data-theme] .command-button:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .command-button-icon,
  body[data-theme] .command-button-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .command-button-icon svg,
  body[data-theme] .command-button-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2.1px !important;
  }

  .locale-switch,
  .market-switch,
  body[data-theme] .locale-switch,
  body[data-theme] .market-switch,
  html.native-layout-guard .locale-switch,
  html.native-layout-guard .market-switch {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .locale-switch::before,
  .market-switch::before,
  body[data-theme] .locale-switch::before,
  body[data-theme] .market-switch::before {
    position: absolute !important;
    inset: 7px 3px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.045) !important;
    content: "" !important;
    pointer-events: none !important;
  }

  .locale-switch::after,
  .market-switch::after,
  body[data-theme] .locale-switch::after,
  body[data-theme] .market-switch::after,
  html.native-layout-guard .locale-switch::after,
  html.native-layout-guard .market-switch::after {
    right: 5px !important;
    width: 7px !important;
    height: 7px !important;
    border-right-width: 1.5px !important;
    border-bottom-width: 1.5px !important;
    opacity: 0.88 !important;
  }

  .locale-switch select,
  .market-switch select,
  body[data-theme] .locale-switch select,
  body[data-theme] .market-switch select,
  html.native-layout-guard .locale-switch select,
  html.native-layout-guard .market-switch select {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    min-width: 40px !important;
    width: 100% !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(245, 241, 232, 0.94) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 0 11px 0 3px !important;
    text-align: center !important;
    text-align-last: center !important;
  }
}

@media (max-width: 370px) {
  .app-shell .topbar,
  body[data-theme] .app-shell .topbar {
    grid-template-columns: 66px minmax(0, 1fr) 40px 40px 48px !important;
    padding-inline: 6px !important;
  }

  .brand,
  body[data-theme] .brand {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }
}

/* v459-bare-topbar-utilities: remove the remaining dark capsules from utility controls. */
@media (max-width: 900px) {
  .command-button,
  body[data-theme] .command-button,
  html.native-layout-guard .command-button,
  .locale-switch,
  .market-switch,
  body[data-theme] .locale-switch,
  body[data-theme] .market-switch,
  html.native-layout-guard .locale-switch,
  html.native-layout-guard .market-switch {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .command-button::before,
  .command-button::after,
  body[data-theme] .command-button::before,
  body[data-theme] .command-button::after,
  html.native-layout-guard .command-button::before,
  html.native-layout-guard .command-button::after,
  .locale-switch::before,
  .market-switch::before,
  body[data-theme] .locale-switch::before,
  body[data-theme] .market-switch::before,
  html.native-layout-guard .locale-switch::before,
  html.native-layout-guard .market-switch::before {
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
    content: none !important;
  }

  .command-button-icon,
  body[data-theme] .command-button-icon,
  html.native-layout-guard .command-button-icon {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(245, 241, 232, 0.95) !important;
  }

  .locale-switch select,
  .market-switch select,
  body[data-theme] .locale-switch select,
  body[data-theme] .market-switch select,
  html.native-layout-guard .locale-switch select,
  html.native-layout-guard .market-switch select {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .locale-switch:active,
  .market-switch:active,
  .command-button:active,
  body[data-theme] .locale-switch:active,
  body[data-theme] .market-switch:active,
  body[data-theme] .command-button:active {
    background: rgba(255, 255, 255, 0.05) !important;
  }
}

/* v460-product-thumb-polish: clean up generated product thumbnails in report and dense commerce rows. */
@media (max-width: 900px) {
  #report .product-report-row,
  body[data-theme] #report .product-report-row {
    grid-template-columns: 40px 60px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 10px !important;
  }

  #report .product-report-row img,
  body[data-theme] #report .product-report-row img,
  #report .product-signal-row img,
  body[data-theme] #report .product-signal-row img,
  #inventory .watchlist-row img,
  body[data-theme] #inventory .watchlist-row img {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(135deg, rgba(245, 241, 232, 0.08), rgba(245, 241, 232, 0.02)),
      #101216 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    object-fit: cover !important;
  }

  #report .product-report-row > div:not(.report-row-stats),
  body[data-theme] #report .product-report-row > div:not(.report-row-stats) {
    gap: 3px !important;
  }

  #report .product-report-row strong,
  body[data-theme] #report .product-report-row strong {
    font-size: 0.92rem !important;
    line-height: 1.1 !important;
  }

  #report .product-report-row > div:not(.report-row-stats) > span,
  body[data-theme] #report .product-report-row > div:not(.report-row-stats) > span {
    font-size: 0.72rem !important;
    line-height: 1.16 !important;
  }
}

/* v462-tiered-paywall: denser three-plan subscription layout. */
.paywall-panel,
body[data-theme] .paywall-panel {
  gap: 10px !important;
}

.paywall-product,
body[data-theme] .paywall-product {
  min-height: 66px !important;
  padding: 10px 11px !important;
  gap: 9px !important;
}

.paywall-product b,
body[data-theme] .paywall-product b {
  padding: 2px 7px !important;
  font-size: 0.66rem !important;
}

.paywall-product small,
body[data-theme] .paywall-product small {
  font-size: 0.8rem !important;
  line-height: 1.24 !important;
}

.paywall-product em,
body[data-theme] .paywall-product em {
  max-width: 112px !important;
  font-size: 0.95rem !important;
}

.paywall-actions .ghost-button,
body[data-theme] .paywall-actions .ghost-button {
  min-height: 46px !important;
  padding: 9px 10px !important;
  border-radius: 8px !important;
  font-size: 0.86rem !important;
  line-height: 1.15 !important;
}

@media (max-width: 430px) {
  .paywall-panel,
  body[data-theme] .paywall-panel {
    gap: 9px !important;
  }

  .paywall-product,
  body[data-theme] .paywall-product {
    min-height: 72px !important;
    padding: 10px !important;
  }
}

/* v462-paywall-close: keep close affordance compact above tier cards. */
.paywall-close,
body[data-theme] .paywall-close,
#paywallCloseButton.ghost-button {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  font-size: 0 !important;
}

.paywall-close::before,
body[data-theme] .paywall-close::before {
  content: "x";
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1rem !important;
  font-weight: 780 !important;
  line-height: 1 !important;
}

.paywall-panel > .eyebrow,
body[data-theme] .paywall-panel > .eyebrow {
  padding-right: 48px !important;
}

/* v463-mobile-readability-pass: tighter app chrome, calmer cards and readable commerce rows. */
@media (max-width: 900px) {
  html.native-layout-guard body,
  body[data-theme],
  :root {
    --topbar-height: 50px !important;
    --dock-height: 58px !important;
  }

  .app-shell .topbar,
  body[data-theme] .app-shell .topbar,
  html.native-layout-guard .app-shell .topbar,
  html.native-layout-guard body[data-theme] .app-shell .topbar {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    grid-template-columns: 42px minmax(0, 1fr) 40px 44px 52px !important;
    gap: 3px !important;
    padding: 5px 8px !important;
    border-radius: 0 0 12px 12px !important;
    background: rgba(6, 7, 9, 0.96) !important;
    box-shadow: inset 0 -1px 0 rgba(244, 240, 232, 0.08) !important;
  }

  .brand,
  body[data-theme] .brand,
  html.native-layout-guard .brand,
  html.native-layout-guard body[data-theme] .brand {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 38px !important;
    overflow: hidden !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock,
  html.native-layout-guard .brand-logo,
  html.native-layout-guard .brand-logo-lock {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .active-view-chip,
  body[data-theme] .active-view-chip,
  html.native-layout-guard .active-view-chip,
  html.native-layout-guard body[data-theme] .active-view-chip {
    display: flex !important;
    align-items: center !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    padding: 0 9px !important;
    border-radius: 10px !important;
    background: rgba(244, 240, 232, 0.055) !important;
    color: rgba(244, 240, 232, 0.92) !important;
    font-size: 0.76rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
  }

  .command-button,
  body[data-theme] .command-button,
  html.native-layout-guard .command-button,
  html.native-layout-guard body[data-theme] .command-button,
  .locale-switch,
  .market-switch,
  body[data-theme] .locale-switch,
  body[data-theme] .market-switch,
  html.native-layout-guard .locale-switch,
  html.native-layout-guard .market-switch {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 10px !important;
  }

  .command-button,
  body[data-theme] .command-button,
  html.native-layout-guard .command-button {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  .command-button-icon svg,
  body[data-theme] .command-button-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  .locale-switch select,
  .market-switch select,
  body[data-theme] .locale-switch select,
  body[data-theme] .market-switch select,
  html.native-layout-guard .locale-switch select,
  html.native-layout-guard .market-switch select {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    min-width: 40px !important;
    padding: 0 10px 0 2px !important;
    font-size: 0.68rem !important;
    font-weight: 760 !important;
  }

  main > .studio-band.active-view,
  main > .content-band.active-view,
  main > .business-band.active-view,
  html.native-layout-guard main > .studio-band.active-view,
  html.native-layout-guard main > .content-band.active-view,
  html.native-layout-guard main > .business-band.active-view {
    padding: 10px 10px 14px !important;
    scroll-padding-bottom: 18px !important;
  }

  .section-head,
  body[data-theme] .section-head {
    margin: -10px -10px 8px !important;
    padding: 10px 10px 9px !important;
  }

  .section-head h2,
  .panel-head h2,
  .panel-head h3,
  body[data-theme] .section-head h2,
  body[data-theme] .panel-head h2,
  body[data-theme] .panel-head h3 {
    font-size: 1.08rem !important;
    line-height: 1.12 !important;
  }

  #studio .photo-panel h2,
  body[data-theme] #studio .photo-panel h2 {
    font-size: 1.78rem !important;
    line-height: 1.04 !important;
  }

  main h1,
  main .section-head h1,
  body[data-theme] main h1 {
    font-size: 1.34rem !important;
    line-height: 1.09 !important;
  }

  main p,
  main label,
  main small,
  body[data-theme] main p,
  body[data-theme] main label,
  body[data-theme] main small {
    font-size: 0.86rem !important;
    line-height: 1.34 !important;
  }

  .panel,
  [class$="-panel"],
  main article,
  .item-card,
  body[data-theme] .panel,
  body[data-theme] [class$="-panel"],
  body[data-theme] main article,
  body[data-theme] .item-card {
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 24px rgba(0, 0, 0, 0.22) !important;
  }

  .primary-button,
  .ghost-button,
  button[type="submit"],
  label.import-button,
  body[data-theme] .primary-button,
  body[data-theme] .ghost-button,
  body[data-theme] button[type="submit"],
  body[data-theme] label.import-button {
    min-height: 42px !important;
    border-radius: 12px !important;
    padding: 9px 12px !important;
    font-size: 0.82rem !important;
    line-height: 1.12 !important;
  }

  .mobile-dock,
  body[data-theme] .mobile-dock,
  html.native-layout-guard .mobile-dock,
  html.native-layout-guard body[data-theme] .mobile-dock {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 4px 10px calc(4px + var(--safe-bottom, 0px)) !important;
    border-radius: 14px 14px 0 0 !important;
    background: rgba(6, 7, 9, 0.97) !important;
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(244, 240, 232, 0.07) !important;
  }

  .mobile-dock a,
  body[data-theme] .mobile-dock a,
  html.native-layout-guard .mobile-dock a,
  .mobile-dock a.active,
  body[data-theme] .mobile-dock a.active,
  html.native-layout-guard .mobile-dock a.active {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    grid-template-rows: 22px 13px !important;
    gap: 2px !important;
    padding: 4px 0 2px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mobile-dock .dock-icon,
  body[data-theme] .mobile-dock .dock-icon,
  html.native-layout-guard .mobile-dock .dock-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    border-radius: 8px !important;
  }

  .mobile-dock .dock-label,
  body[data-theme] .mobile-dock .dock-label,
  html.native-layout-guard .mobile-dock .dock-label,
  .mobile-dock a.active .dock-label,
  body[data-theme] .mobile-dock a.active .dock-label {
    font-size: 0.61rem !important;
    font-weight: 720 !important;
    line-height: 1 !important;
  }

  #inventory .segmented,
  body[data-theme] #inventory .segmented {
    min-height: 42px !important;
    padding: 4px !important;
    border-radius: 14px !important;
  }

  #inventory .segmented button,
  body[data-theme] #inventory .segmented button {
    min-height: 34px !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
  }

  #inventory .csv-actions,
  body[data-theme] #inventory .csv-actions {
    gap: 6px !important;
  }

  #inventory .csv-actions .ghost-button,
  #inventory .csv-actions label.import-button,
  body[data-theme] #inventory .csv-actions .ghost-button,
  body[data-theme] #inventory .csv-actions label.import-button {
    min-height: 40px !important;
    padding: 8px 7px !important;
    font-size: 0.72rem !important;
  }

  #inventory .inventory-grid,
  body[data-theme] #inventory .inventory-grid {
    order: 1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #inventory .item-form,
  body[data-theme] #inventory .item-form {
    order: 2 !important;
  }

  #inventory .item-card,
  body[data-theme] #inventory .item-card {
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
    min-height: 118px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  #inventory .item-card img,
  body[data-theme] #inventory .item-card img {
    width: 84px !important;
    min-width: 84px !important;
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    border: 1px solid rgba(244, 240, 232, 0.1) !important;
    border-radius: 13px !important;
    background: #07080a !important;
    object-fit: cover !important;
  }

  #inventory .item-body,
  body[data-theme] #inventory .item-body {
    display: grid !important;
    align-content: start !important;
    gap: 5px !important;
    padding: 1px 0 !important;
    min-width: 0 !important;
  }

  #inventory .item-body h3,
  body[data-theme] #inventory .item-body h3 {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--sb-ink) !important;
    font-size: 0.94rem !important;
    line-height: 1.12 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  #inventory .item-meta,
  #inventory .stock-line,
  body[data-theme] #inventory .item-meta,
  body[data-theme] #inventory .stock-line {
    margin: 0 !important;
    gap: 6px !important;
    font-size: 0.64rem !important;
  }

  #inventory .price,
  body[data-theme] #inventory .price {
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  #inventory .pill-row,
  body[data-theme] #inventory .pill-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #inventory .pill,
  #inventory .source-badge,
  #inventory .stock-badge,
  body[data-theme] #inventory .pill,
  body[data-theme] #inventory .source-badge,
  body[data-theme] #inventory .stock-badge {
    padding: 4px 6px !important;
    border-radius: 999px !important;
    font-size: 0.56rem !important;
    line-height: 1 !important;
  }

  #inventory .product-link,
  #inventory .watch-button,
  body[data-theme] #inventory .product-link,
  body[data-theme] #inventory .watch-button {
    min-height: 40px !important;
    border-radius: 11px !important;
    padding: 8px 10px !important;
    font-size: 0.68rem !important;
  }
}

.mobile-dock,
body[data-theme] .mobile-dock,
html.native-layout-guard .mobile-dock,
html.native-layout-guard body[data-theme] .mobile-dock {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* v464-final-mobile-polish: quiet monogram topbar and denser product rows. */
@media (max-width: 900px) {
  .brand,
  body[data-theme] .brand,
  html.native-layout-guard .brand,
  html.native-layout-guard body[data-theme] .brand {
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock,
  html.native-layout-guard .brand-logo,
  html.native-layout-guard .brand-logo-lock {
    display: none !important;
  }

  .brand::before,
  body[data-theme] .brand::before,
  html.native-layout-guard .brand::before,
  html.native-layout-guard body[data-theme] .brand::before {
    content: "SB" !important;
    display: grid !important;
    place-items: center !important;
    width: 38px !important;
    height: 34px !important;
    border: 1px solid rgba(244, 240, 232, 0.16) !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, rgba(244, 240, 232, 0.11), rgba(244, 240, 232, 0.025)) !important;
    color: rgba(244, 240, 232, 0.94) !important;
    font-size: 0.78rem !important;
    font-weight: 860 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }

  #inventory .item-body,
  body[data-theme] #inventory .item-body {
    grid-template-columns: max-content max-content minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
  }

  #inventory .item-body > h3,
  #inventory .item-body > .brand-pill,
  #inventory .item-body > .item-meta,
  #inventory .item-body > .stock-line,
  #inventory .item-body > .pill-row,
  body[data-theme] #inventory .item-body > h3,
  body[data-theme] #inventory .item-body > .brand-pill,
  body[data-theme] #inventory .item-body > .item-meta,
  body[data-theme] #inventory .item-body > .stock-line,
  body[data-theme] #inventory .item-body > .pill-row {
    grid-column: 1 / -1 !important;
  }

  #inventory .product-link,
  body[data-theme] #inventory .product-link {
    grid-column: 1 !important;
  }

  #inventory .watch-button,
  body[data-theme] #inventory .watch-button {
    grid-column: 2 !important;
  }

  #inventory .product-link,
  #inventory .watch-button,
  body[data-theme] #inventory .product-link,
  body[data-theme] #inventory .watch-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }
}

/* v475-final-mobile-override: keep the phone toolbar clean and inventory compact. */
@media (max-width: 900px) {
  html.native-layout-guard body,
  html.native-layout-guard body[data-theme] {
    --topbar-height: 48px !important;
    --dock-height: 56px !important;
  }

  .topbar,
  body[data-theme] .topbar,
  html.native-layout-guard .topbar,
  html.native-layout-guard body[data-theme] .topbar {
    grid-template-columns: 42px minmax(0, 1fr) 40px !important;
    gap: 6px !important;
    min-height: var(--topbar-height) !important;
    height: var(--topbar-height) !important;
    padding: 5px 10px !important;
  }

  .topbar-switches,
  .locale-switch,
  .market-switch,
  body[data-theme] .topbar-switches,
  body[data-theme] .locale-switch,
  body[data-theme] .market-switch,
  html.native-layout-guard .topbar-switches,
  html.native-layout-guard .locale-switch,
  html.native-layout-guard .market-switch,
  html.native-layout-guard body[data-theme] .topbar-switches,
  html.native-layout-guard body[data-theme] .locale-switch,
  html.native-layout-guard body[data-theme] .market-switch {
    display: none !important;
  }

  .active-view-chip,
  body[data-theme] .active-view-chip,
  html.native-layout-guard .active-view-chip,
  html.native-layout-guard body[data-theme] .active-view-chip {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
  }

  .command-button,
  body[data-theme] .command-button,
  html.native-layout-guard .command-button,
  html.native-layout-guard body[data-theme] .command-button {
    grid-column: 3 !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  #inventory.content-band,
  body[data-theme] #inventory.content-band {
    gap: 8px !important;
    padding: 10px 10px 84px !important;
  }

  #inventory .section-head,
  body[data-theme] #inventory .section-head {
    gap: 10px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  #inventory .section-head h2,
  body[data-theme] #inventory .section-head h2 {
    font-size: 1.42rem !important;
    line-height: 1.04 !important;
    max-width: 12ch !important;
  }

  #inventory .section-head .eyebrow,
  body[data-theme] #inventory .section-head .eyebrow {
    font-size: 0.66rem !important;
    line-height: 1 !important;
  }

  #inventory .section-actions,
  body[data-theme] #inventory .section-actions {
    gap: 7px !important;
  }

  #inventory .segmented,
  body[data-theme] #inventory .segmented {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    min-height: 38px !important;
    padding: 4px !important;
  }

  #inventory .segmented button,
  body[data-theme] #inventory .segmented button {
    min-height: 30px !important;
    padding: 5px 4px !important;
    border-radius: 10px !important;
    font-size: 0.72rem !important;
  }

  #inventory .csv-actions,
  body[data-theme] #inventory .csv-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #inventory .csv-actions .ghost-button,
  #inventory .csv-actions label.import-button,
  body[data-theme] #inventory .csv-actions .ghost-button,
  body[data-theme] #inventory .csv-actions label.import-button {
    min-height: 34px !important;
    padding: 7px 5px !important;
    border-radius: 11px !important;
    font-size: 0.6rem !important;
  }

  #inventory .inventory-grid,
  body[data-theme] #inventory .inventory-grid {
    gap: 8px !important;
  }

  #inventory .item-card,
  body[data-theme] #inventory .item-card {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 9px !important;
    min-height: 104px !important;
    padding: 9px !important;
    border-radius: 18px !important;
  }

  #inventory .item-card img,
  body[data-theme] #inventory .item-card img {
    width: 72px !important;
    min-width: 72px !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    border-radius: 12px !important;
  }

  #inventory .item-body,
  body[data-theme] #inventory .item-body {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    align-content: start !important;
  }

  #inventory .item-body > h3,
  body[data-theme] #inventory .item-body > h3 {
    grid-column: 1 / -1 !important;
    font-size: 0.86rem !important;
    line-height: 1.1 !important;
  }

  #inventory .item-body > .brand-pill,
  body[data-theme] #inventory .item-body > .brand-pill {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  #inventory .item-meta,
  body[data-theme] #inventory .item-meta {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  #inventory .stock-line,
  #inventory .pill-row,
  body[data-theme] #inventory .stock-line,
  body[data-theme] #inventory .pill-row {
    grid-column: 1 / -1 !important;
  }

  #inventory .pill,
  #inventory .source-badge,
  #inventory .stock-badge,
  body[data-theme] #inventory .pill,
  body[data-theme] #inventory .source-badge,
  body[data-theme] #inventory .stock-badge {
    padding: 3px 6px !important;
    font-size: 0.52rem !important;
  }

  #inventory .price,
  body[data-theme] #inventory .price {
    font-size: 0.68rem !important;
  }

  #inventory .product-link,
  #inventory .watch-button,
  body[data-theme] #inventory .product-link,
  body[data-theme] #inventory .watch-button {
    min-height: 32px !important;
    padding: 7px 9px !important;
    border-radius: 11px !important;
    font-size: 0.6rem !important;
  }
}

/* v475-inventory-last-word: final compact pass after all legacy overrides. */
@media (max-width: 900px) {
  #inventory .section-head h2,
  body[data-theme] #inventory .section-head h2 {
    max-width: none !important;
  }

  #inventory .item-card,
  body[data-theme] #inventory .item-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    min-height: 92px !important;
  }

  #inventory .item-card img,
  body[data-theme] #inventory .item-card img {
    width: 64px !important;
    min-width: 64px !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
  }

  #inventory .pill-row .pill:nth-of-type(n + 5),
  body[data-theme] #inventory .pill-row .pill:nth-of-type(n + 5) {
    display: none !important;
  }
}

/* v475-paywall-last-word: compact monthly plan picker. */
@media (max-width: 900px) {
  .paywall-dialog,
  body[data-theme] .paywall-dialog {
    padding: calc(var(--safe-top, 0px) + 10px) 10px calc(var(--safe-bottom, 0px) + 10px) !important;
  }

  .paywall-panel,
  body[data-theme] .paywall-panel {
    gap: 8px !important;
    padding: 14px !important;
    border-radius: 20px !important;
  }

  .paywall-panel > .eyebrow,
  body[data-theme] .paywall-panel > .eyebrow {
    padding-right: 46px !important;
    font-size: 0.66rem !important;
  }

  .paywall-panel h2,
  body[data-theme] .paywall-panel h2 {
    max-width: calc(100% - 48px) !important;
    font-size: 1.42rem !important;
    line-height: 1.04 !important;
  }

  .paywall-panel p,
  body[data-theme] .paywall-panel p {
    font-size: 0.88rem !important;
    line-height: 1.28 !important;
  }

  .paywall-store-status,
  body[data-theme] .paywall-store-status {
    padding: 9px 10px !important;
    border-radius: 13px !important;
    font-size: 0.78rem !important;
    line-height: 1.22 !important;
  }

  .paywall-products,
  body[data-theme] .paywall-products {
    gap: 8px !important;
  }

  .paywall-product,
  body[data-theme] .paywall-product {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-height: 76px !important;
    padding: 11px 12px !important;
    gap: 10px !important;
    border-radius: 16px !important;
  }

  .paywall-product b,
  body[data-theme] .paywall-product b {
    width: fit-content !important;
    padding: 2px 7px !important;
    font-size: 0.58rem !important;
  }

  .paywall-product strong,
  body[data-theme] .paywall-product strong {
    font-size: 0.98rem !important;
    line-height: 1.08 !important;
  }

  .paywall-product small,
  body[data-theme] .paywall-product small {
    font-size: 0.7rem !important;
    line-height: 1.22 !important;
  }

  .paywall-product em,
  body[data-theme] .paywall-product em {
    display: grid !important;
    justify-items: end !important;
    max-width: 96px !important;
    color: #d8ff69 !important;
    font-size: 0.98rem !important;
    line-height: 1 !important;
    text-align: right !important;
  }

  .paywall-product em i,
  body[data-theme] .paywall-product em i {
    display: block !important;
    margin-top: 3px !important;
    color: rgba(244, 240, 232, 0.62) !important;
    font-size: 0.56rem !important;
    font-style: normal !important;
    font-weight: 740 !important;
  }

  .paywall-actions,
  body[data-theme] .paywall-actions {
    gap: 8px !important;
  }

  .paywall-actions .ghost-button,
  body[data-theme] .paywall-actions .ghost-button {
    min-height: 40px !important;
    padding: 8px 10px !important;
    border-radius: 13px !important;
    font-size: 0.74rem !important;
  }
}

/* v717-starter-cta-fit: the plan-aware photo CTA stays legible inside the compact studio header. */
@media (max-width: 900px) {
  #studio #analyzeButton[data-requires-starter="true"],
  body[data-theme] #studio #analyzeButton[data-requires-starter="true"],
  html.native-layout-guard #studio #analyzeButton[data-requires-starter="true"],
  html.native-layout-guard body[data-theme] #studio #analyzeButton[data-requires-starter="true"] {
    font-size: 0.72rem !important;
    letter-spacing: -0.02em !important;
  }
}

/* v475-report-ranking-last-word: clean ranking rows for store decisions. */
@media (max-width: 900px) {
  #report .product-report-row,
  body[data-theme] #report .product-report-row {
    grid-template-columns: 34px 58px minmax(0, 1fr) !important;
    grid-template-areas:
      "rank image body"
      "stats stats stats" !important;
    gap: 8px !important;
    padding: 9px !important;
    border-radius: 14px !important;
  }

  #report .report-rank,
  body[data-theme] #report .report-rank {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.78rem !important;
  }

  #report .product-report-row img,
  body[data-theme] #report .product-report-row img {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }

  #report .product-report-row > div:not(.report-row-stats),
  body[data-theme] #report .product-report-row > div:not(.report-row-stats) {
    gap: 3px !important;
  }

  #report .product-report-row strong,
  body[data-theme] #report .product-report-row strong {
    font-size: 0.88rem !important;
    line-height: 1.08 !important;
  }

  #report .product-report-row > div:not(.report-row-stats) > span,
  body[data-theme] #report .product-report-row > div:not(.report-row-stats) > span {
    font-size: 0.64rem !important;
    line-height: 1.14 !important;
  }

  #report .report-row-stats,
  body[data-theme] #report .report-row-stats {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 7px 0 0 !important;
    border-top: 1px solid rgba(245, 241, 232, 0.11) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #report .report-row-stats strong,
  body[data-theme] #report .report-row-stats strong {
    min-width: 34px !important;
    padding: 6px 8px !important;
    background: rgba(245, 241, 232, 0.94) !important;
    color: #111316 !important;
    font-size: 0.7rem !important;
    box-shadow: none !important;
  }

  #report .report-row-stats span,
  body[data-theme] #report .report-row-stats span {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(245, 241, 232, 0.64) !important;
    font-size: 0.62rem !important;
    line-height: 1.16 !important;
    box-shadow: none !important;
  }
}

/* v475-studio-upload-last-word: keep the upload CTA off the placeholder artwork. */
@media (max-width: 900px) {
  .photo-panel .upload-zone,
  body[data-theme] .photo-panel .upload-zone {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    min-height: 360px !important;
    padding: 22px 22px 18px !important;
    gap: 14px !important;
    align-items: center !important;
    justify-items: center !important;
  }

  .photo-panel .upload-zone img,
  body[data-theme] .photo-panel .upload-zone img {
    width: min(68%, 240px) !important;
    max-height: 220px !important;
    object-fit: contain !important;
    grid-area: 1 / 1 !important;
    align-self: center !important;
    justify-self: center !important;
  }

  .photo-panel .upload-zone span,
  body[data-theme] .photo-panel .upload-zone span {
    grid-area: 2 / 1 !important;
    align-self: center !important;
    justify-self: center !important;
    max-width: calc(100% - 28px) !important;
    min-height: 44px !important;
    padding: 10px 18px !important;
    border-radius: 16px !important;
    font-size: 0.88rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
    transform: none !important;
  }

  html.native-layout-guard main > #studio .photo-panel .upload-zone,
  html.native-layout-guard #studio .photo-panel .upload-zone,
  main > #studio .photo-panel .upload-zone,
  #studio .photo-panel .upload-zone,
  body[data-theme] main > #studio .photo-panel .upload-zone,
  body[data-theme] #studio .photo-panel .upload-zone {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    min-height: 360px !important;
    height: auto !important;
    padding: 22px 22px 18px !important;
    gap: 14px !important;
  }

  html.native-layout-guard main > #studio .photo-panel .upload-zone img,
  html.native-layout-guard #studio .photo-panel .upload-zone img,
  main > #studio .photo-panel .upload-zone img,
  #studio .photo-panel .upload-zone img,
  body[data-theme] main > #studio .photo-panel .upload-zone img,
  body[data-theme] #studio .photo-panel .upload-zone img,
  html.native-layout-guard #photoPreview,
  #photoPreview {
    position: static !important;
    inset: auto !important;
    grid-area: 1 / 1 !important;
    width: min(68%, 240px) !important;
    max-width: 240px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 220px !important;
    margin: 0 !important;
    object-fit: contain !important;
    align-self: center !important;
    justify-self: center !important;
  }

  html.native-layout-guard main > #studio .photo-panel .upload-zone span,
  html.native-layout-guard #studio .photo-panel .upload-zone span,
  main > #studio .photo-panel .upload-zone span,
  #studio .photo-panel .upload-zone span,
  body[data-theme] main > #studio .photo-panel .upload-zone span,
  body[data-theme] #studio .photo-panel .upload-zone span {
    position: static !important;
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    grid-area: 2 / 1 !important;
    align-self: center !important;
    justify-self: center !important;
    pointer-events: auto !important;
  }
}

/* v475-premium-mobile-polish: quieter navigation, clearer PL copy surfaces, less visual noise. */
@media (max-width: 900px) {
  html.native-layout-guard body,
  html.native-layout-guard body[data-theme] {
    --topbar-height: 46px !important;
    --dock-height: 62px !important;
  }

  .topbar,
  body[data-theme] .topbar,
  html.native-layout-guard .topbar,
  html.native-layout-guard body[data-theme] .topbar {
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    gap: 7px !important;
    padding: 5px 10px !important;
    background: rgba(4, 5, 7, 0.86) !important;
    border-bottom: 1px solid rgba(245, 241, 232, 0.08) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24) !important;
  }

  .brand,
  body[data-theme] .brand,
  html.native-layout-guard .brand {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  .brand::before,
  body[data-theme] .brand::before,
  html.native-layout-guard .brand::before {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    background: rgba(245, 241, 232, 0.07) !important;
    border-color: rgba(245, 241, 232, 0.16) !important;
    font-size: 0.72rem !important;
  }

  .active-view-chip,
  body[data-theme] .active-view-chip,
  html.native-layout-guard .active-view-chip {
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 12px !important;
    background: rgba(245, 241, 232, 0.07) !important;
    border: 1px solid rgba(245, 241, 232, 0.08) !important;
    font-size: 0.78rem !important;
    font-weight: 820 !important;
  }

  .command-button,
  body[data-theme] .command-button,
  html.native-layout-guard .command-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .command-button svg,
  body[data-theme] .command-button svg {
    width: 20px !important;
    height: 20px !important;
  }

  .mobile-dock,
  body[data-theme] .mobile-dock,
  html.native-layout-guard .mobile-dock,
  html.native-layout-guard body[data-theme] .mobile-dock {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 0 !important;
    height: calc(var(--dock-height) + var(--safe-bottom, 0px)) !important;
    min-height: calc(var(--dock-height) + var(--safe-bottom, 0px)) !important;
    padding: 5px 8px calc(5px + var(--safe-bottom, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(245, 241, 232, 0.1) !important;
    border-radius: 18px 18px 0 0 !important;
    background: rgba(3, 4, 6, 0.96) !important;
    box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.28) !important;
  }

  .mobile-dock a,
  body[data-theme] .mobile-dock a,
  html.native-layout-guard .mobile-dock a,
  .mobile-dock a.active,
  body[data-theme] .mobile-dock a.active,
  html.native-layout-guard .mobile-dock a.active {
    display: grid !important;
    grid-template-rows: 26px 16px !important;
    place-items: center !important;
    gap: 1px !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 2px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(245, 241, 232, 0.72) !important;
  }

  .mobile-dock a::before,
  .mobile-dock a::after,
  body[data-theme] .mobile-dock a::before,
  body[data-theme] .mobile-dock a::after {
    display: none !important;
  }

  .mobile-dock .dock-icon,
  body[data-theme] .mobile-dock .dock-icon,
  html.native-layout-guard .mobile-dock .dock-icon {
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 26px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .mobile-dock .dock-icon svg,
  body[data-theme] .mobile-dock .dock-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 2.2 !important;
  }

  .mobile-dock .dock-label,
  body[data-theme] .mobile-dock .dock-label,
  html.native-layout-guard .mobile-dock .dock-label,
  .mobile-dock a.active .dock-label,
  body[data-theme] .mobile-dock a.active .dock-label {
    max-width: 100% !important;
    color: inherit !important;
    font-size: 0.64rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .mobile-dock a.active,
  body[data-theme] .mobile-dock a.active {
    color: #fffaf2 !important;
  }

  .mobile-dock a.active .dock-icon,
  body[data-theme] .mobile-dock a.active .dock-icon {
    background: linear-gradient(135deg, #f64d8b, #42d2ba) !important;
    color: #fffaf2 !important;
  }

  main > .content-band.active-view,
  main > .business-band.active-view,
  body[data-theme] main > .content-band.active-view,
  body[data-theme] main > .business-band.active-view {
    padding-bottom: calc(var(--dock-height) + var(--safe-bottom, 0px) + 18px) !important;
  }

  :is(#studio, #passport, #coach, #fit, #planner, #capsule, #discover, #brain, #inventory, #lookbook, #clients, #report, #history, #community, #trends) > .section-head,
  body[data-theme] :is(#studio, #passport, #coach, #fit, #planner, #capsule, #discover, #brain, #inventory, #lookbook, #clients, #report, #history, #community, #trends) > .section-head {
    border: 1px solid rgba(245, 241, 232, 0.1) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(245, 241, 232, 0.065), rgba(245, 241, 232, 0.018)) !important;
    box-shadow: none !important;
    padding: 12px !important;
  }

  :is(#studio, #passport, #coach, #fit, #planner, #capsule, #discover, #brain, #inventory, #lookbook, #clients, #report, #history, #community, #trends) > .section-head h2,
  body[data-theme] :is(#studio, #passport, #coach, #fit, #planner, #capsule, #discover, #brain, #inventory, #lookbook, #clients, #report, #history, #community, #trends) > .section-head h2 {
    max-width: none !important;
    font-size: 1.34rem !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
  }

  :is(#studio, #passport, #coach, #fit, #planner, #capsule, #discover, #brain, #inventory, #lookbook, #clients, #report, #history, #community, #trends) .eyebrow,
  body[data-theme] :is(#studio, #passport, #coach, #fit, #planner, #capsule, #discover, #brain, #inventory, #lookbook, #clients, #report, #history, #community, #trends) .eyebrow {
    color: #42d2ba !important;
    font-size: 0.66rem !important;
    letter-spacing: 0 !important;
  }

  .primary-button,
  .ghost-button,
  body[data-theme] .primary-button,
  body[data-theme] .ghost-button {
    border-radius: 12px !important;
    min-height: 40px !important;
    font-size: 0.78rem !important;
    letter-spacing: 0 !important;
  }

  #clients #leadForm .primary-button,
  body[data-theme] #clients #leadForm .primary-button {
    background: linear-gradient(135deg, #f64d8b, #42d2ba) !important;
    color: #fffaf2 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #report > .section-head .section-actions,
  #trends > .section-head .section-actions,
  body[data-theme] #report > .section-head .section-actions,
  body[data-theme] #trends > .section-head .section-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #report > .section-head .section-actions > *,
  #trends > .section-head .section-actions > *,
  body[data-theme] #report > .section-head .section-actions > *,
  body[data-theme] #trends > .section-head .section-actions > * {
    min-width: 0 !important;
    padding: 7px 6px !important;
    font-size: 0.68rem !important;
    line-height: 1.08 !important;
  }

  #inventory .item-card,
  body[data-theme] #inventory .item-card,
  #report .product-report-row,
  body[data-theme] #report .product-report-row,
  #clients :is(.client-metrics > div, .client-dossier-panel, .sales-funnel-panel, .action-queue-panel),
  body[data-theme] #clients :is(.client-metrics > div, .client-dossier-panel, .sales-funnel-panel, .action-queue-panel) {
    border-color: rgba(245, 241, 232, 0.09) !important;
    background: rgba(18, 20, 25, 0.82) !important;
    box-shadow: none !important;
  }

  #inventory .pill-row,
  body[data-theme] #inventory .pill-row {
    gap: 4px !important;
  }

  #inventory .pill-row .pill:nth-of-type(n + 4),
  body[data-theme] #inventory .pill-row .pill:nth-of-type(n + 4) {
    display: none !important;
  }

  #community .circle-avatar,
  body[data-theme] #community .circle-avatar {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #42d2ba, #f64d8b) !important;
    color: #fffaf2 !important;
    font-size: 0.9rem !important;
    box-shadow: none !important;
  }

  #community .circle-identity-card,
  body[data-theme] #community .circle-identity-card {
    gap: 12px !important;
    border-color: rgba(245, 241, 232, 0.1) !important;
    background: rgba(8, 10, 14, 0.78) !important;
  }

  #business.business-band,
  body[data-theme] #business.business-band {
    gap: 12px !important;
    padding: 12px 12px calc(var(--dock-height) + var(--safe-bottom, 0px) + 18px) !important;
    background: linear-gradient(180deg, #101319 0%, #090a0e 100%) !important;
  }

  #business .business-copy,
  body[data-theme] #business .business-copy {
    padding: 18px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(245, 241, 232, 0.1) !important;
    background: linear-gradient(135deg, rgba(245, 241, 232, 0.07), rgba(245, 241, 232, 0.018)) !important;
    box-shadow: none !important;
  }

  #business .business-copy h2,
  body[data-theme] #business .business-copy h2 {
    max-width: 12ch !important;
    font-size: 1.75rem !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  #business .business-copy p,
  body[data-theme] #business .business-copy p {
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
  }

  #business .business-step,
  body[data-theme] #business .business-step {
    border-radius: 16px !important;
    border-color: rgba(245, 241, 232, 0.1) !important;
    background: rgba(18, 20, 25, 0.84) !important;
    box-shadow: none !important;
  }
}

/* v476-product-ui-polish: cleaner mobile product surfaces after the PL review pass. */
@media (max-width: 900px) {
  html.native-layout-guard body,
  html.native-layout-guard body[data-theme] {
    --topbar-height: 44px !important;
    --dock-height: 58px !important;
  }

  .topbar,
  body[data-theme] .topbar,
  html.native-layout-guard .topbar,
  html.native-layout-guard body[data-theme] .topbar {
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    gap: 6px !important;
    padding: 5px 10px !important;
    background: rgba(5, 6, 8, 0.92) !important;
    border-bottom: 1px solid rgba(245, 241, 232, 0.075) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) !important;
  }

  .brand,
  body[data-theme] .brand,
  html.native-layout-guard .brand {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }

  .brand::before,
  body[data-theme] .brand::before,
  html.native-layout-guard .brand::before {
    width: 30px !important;
    height: 30px !important;
    border: 1px solid rgba(245, 241, 232, 0.13) !important;
    border-radius: 9px !important;
    background: rgba(245, 241, 232, 0.055) !important;
    color: #f5f1e8 !important;
    font-size: 0.66rem !important;
  }

  .active-view-chip,
  body[data-theme] .active-view-chip,
  html.native-layout-guard .active-view-chip {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 11px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(245, 241, 232, 0.055) !important;
    color: rgba(245, 241, 232, 0.9) !important;
    font-size: 0.74rem !important;
    font-weight: 780 !important;
  }

  .command-button,
  body[data-theme] .command-button,
  html.native-layout-guard .command-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(245, 241, 232, 0.045) !important;
    color: #f5f1e8 !important;
  }

  .mobile-dock,
  body[data-theme] .mobile-dock,
  html.native-layout-guard .mobile-dock,
  html.native-layout-guard body[data-theme] .mobile-dock {
    height: calc(var(--dock-height) + var(--safe-bottom, 0px)) !important;
    min-height: calc(var(--dock-height) + var(--safe-bottom, 0px)) !important;
    padding: 4px 8px calc(4px + var(--safe-bottom, 0px)) !important;
    border-top: 1px solid rgba(245, 241, 232, 0.08) !important;
    border-radius: 14px 14px 0 0 !important;
    background: rgba(3, 4, 6, 0.965) !important;
    box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.24) !important;
  }

  .mobile-dock a,
  body[data-theme] .mobile-dock a,
  html.native-layout-guard .mobile-dock a {
    grid-template-rows: 24px 14px !important;
    min-height: 48px !important;
    color: rgba(245, 241, 232, 0.64) !important;
  }

  .mobile-dock .dock-icon,
  body[data-theme] .mobile-dock .dock-icon,
  html.native-layout-guard .mobile-dock .dock-icon {
    width: 26px !important;
    height: 24px !important;
    border-radius: 9px !important;
  }

  .mobile-dock .dock-icon svg,
  body[data-theme] .mobile-dock .dock-icon svg {
    width: 17px !important;
    height: 17px !important;
  }

  .mobile-dock .dock-label,
  body[data-theme] .mobile-dock .dock-label,
  html.native-layout-guard .mobile-dock .dock-label {
    font-size: 0.58rem !important;
    font-weight: 720 !important;
  }

  .mobile-dock a.active .dock-icon,
  body[data-theme] .mobile-dock a.active .dock-icon {
    background: linear-gradient(135deg, #ef4d82, #35c7b2) !important;
    box-shadow: 0 8px 16px rgba(53, 199, 178, 0.12) !important;
  }

  main,
  html.native-layout-guard main,
  body[data-theme] main {
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--dock-height)) !important;
  }

  #inventory.content-band,
  body[data-theme] #inventory.content-band {
    gap: 9px !important;
    padding: 10px 10px calc(var(--dock-height) + var(--safe-bottom, 0px) + 18px) !important;
  }

  #inventory .section-head,
  body[data-theme] #inventory .section-head {
    gap: 10px !important;
    border-radius: 17px !important;
    background:
      linear-gradient(135deg, rgba(53, 199, 178, 0.08), rgba(239, 77, 130, 0.035)),
      rgba(14, 17, 22, 0.86) !important;
  }

  #inventory .section-head h2,
  body[data-theme] #inventory .section-head h2 {
    font-size: 1.28rem !important;
    line-height: 1.05 !important;
  }

  #inventory .segmented,
  body[data-theme] #inventory .segmented {
    gap: 3px !important;
    min-height: 36px !important;
    padding: 3px !important;
    border: 1px solid rgba(245, 241, 232, 0.08) !important;
    border-radius: 13px !important;
    background: rgba(5, 6, 8, 0.56) !important;
  }

  #inventory .segmented button,
  body[data-theme] #inventory .segmented button {
    min-height: 30px !important;
    padding: 5px 4px !important;
    border-radius: 10px !important;
    font-size: 0.68rem !important;
    font-weight: 760 !important;
  }

  #inventory .csv-actions,
  body[data-theme] #inventory .csv-actions {
    gap: 5px !important;
  }

  #inventory .csv-actions .ghost-button,
  #inventory .csv-actions label.import-button,
  body[data-theme] #inventory .csv-actions .ghost-button,
  body[data-theme] #inventory .csv-actions label.import-button {
    min-height: 32px !important;
    border-radius: 10px !important;
    border-color: rgba(245, 241, 232, 0.09) !important;
    background: rgba(245, 241, 232, 0.035) !important;
    color: rgba(245, 241, 232, 0.72) !important;
    font-size: 0.58rem !important;
    font-weight: 740 !important;
  }

  #inventory .csv-actions .danger-button,
  body[data-theme] #inventory .csv-actions .danger-button {
    color: #ff9b9b !important;
  }

  #inventory .inventory-grid,
  body[data-theme] #inventory .inventory-grid {
    gap: 8px !important;
  }

  html.native-layout-guard #inventory .item-card,
  html.native-layout-guard body[data-theme] #inventory .item-card,
  #inventory .item-card,
  body[data-theme] #inventory .item-card {
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 10px !important;
    min-height: 118px !important;
    padding: 9px !important;
    border: 1px solid rgba(245, 241, 232, 0.075) !important;
    border-radius: 16px !important;
    background:
      linear-gradient(180deg, rgba(245, 241, 232, 0.035), rgba(245, 241, 232, 0.012)),
      #101217 !important;
    box-shadow: none !important;
  }

  html.native-layout-guard #inventory .item-card::before,
  html.native-layout-guard body[data-theme] #inventory .item-card::before,
  #inventory .item-card::before,
  body[data-theme] #inventory .item-card::before {
    content: none !important;
    display: none !important;
  }

  html.native-layout-guard #inventory .item-card.item-source-user,
  html.native-layout-guard body[data-theme] #inventory .item-card.item-source-user,
  #inventory .item-card.item-source-user,
  body[data-theme] #inventory .item-card.item-source-user {
    border-color: rgba(216, 255, 105, 0.36) !important;
    background:
      linear-gradient(180deg, rgba(216, 255, 105, 0.045), rgba(245, 241, 232, 0.012)),
      #101217 !important;
  }

  html.native-layout-guard #inventory .item-card > img,
  html.native-layout-guard body[data-theme] #inventory .item-card > img,
  #inventory .item-card > img,
  body[data-theme] #inventory .item-card > img {
    width: 82px !important;
    min-width: 82px !important;
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
    border: 1px solid rgba(245, 241, 232, 0.07) !important;
    border-radius: 13px !important;
    background: #080a0d !important;
    object-fit: cover !important;
    box-shadow: none !important;
  }

  #inventory .item-body,
  body[data-theme] #inventory .item-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-content: start !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    padding: 0 !important;
  }

  html.native-layout-guard #inventory .item-card h3,
  html.native-layout-guard body[data-theme] #inventory .item-card h3,
  #inventory .item-card h3,
  body[data-theme] #inventory .item-card h3 {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
    color: #fffaf2 !important;
    font-size: 0.9rem !important;
    font-weight: 830 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  #inventory .item-meta,
  body[data-theme] #inventory .item-meta {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    order: 0 !important;
  }

  #inventory .item-meta .price,
  body[data-theme] #inventory .item-meta .price {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #d8ff69 !important;
    font-size: 0.78rem !important;
    font-weight: 860 !important;
    white-space: nowrap !important;
  }

  #inventory .source-badge,
  #inventory .stock-badge,
  body[data-theme] #inventory .source-badge,
  body[data-theme] #inventory .stock-badge {
    border: 1px solid rgba(53, 199, 178, 0.24) !important;
    border-radius: 999px !important;
    background: rgba(53, 199, 178, 0.08) !important;
    color: rgba(245, 241, 232, 0.86) !important;
    padding: 3px 7px !important;
    font-size: 0.58rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  #inventory .source-user,
  body[data-theme] #inventory .source-user {
    border-color: rgba(216, 255, 105, 0.3) !important;
    background: rgba(216, 255, 105, 0.08) !important;
    color: #e9ff9c !important;
  }

  #inventory .stock-line,
  body[data-theme] #inventory .stock-line {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    color: rgba(245, 241, 232, 0.62) !important;
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
  }

  #inventory .pill-row,
  body[data-theme] #inventory .pill-row {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    max-height: 23px !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  #inventory .pill-row .pill:nth-of-type(n + 4),
  body[data-theme] #inventory .pill-row .pill:nth-of-type(n + 4) {
    display: none !important;
  }

  #inventory .pill,
  body[data-theme] #inventory .pill {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 3px 6px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(245, 241, 232, 0.065) !important;
    color: rgba(245, 241, 232, 0.68) !important;
    font-size: 0.56rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
  }

  #inventory .brand-pill,
  body[data-theme] #inventory .brand-pill {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
    max-width: 100% !important;
  }

  #inventory .product-link,
  #inventory .watch-button,
  body[data-theme] #inventory .product-link,
  body[data-theme] #inventory .watch-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 31px !important;
    width: auto !important;
    margin: 2px 0 0 !important;
    padding: 7px 9px !important;
    border-radius: 10px !important;
    font-size: 0.6rem !important;
    font-weight: 780 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  #inventory .product-link,
  body[data-theme] #inventory .product-link {
    grid-column: 1 !important;
    border: 0 !important;
    background: rgba(245, 241, 232, 0.9) !important;
    color: #080a0d !important;
  }

  #inventory .watch-button,
  body[data-theme] #inventory .watch-button {
    grid-column: 2 !important;
    border: 1px solid rgba(245, 241, 232, 0.1) !important;
    background: rgba(245, 241, 232, 0.035) !important;
    color: rgba(245, 241, 232, 0.78) !important;
  }

  #studio .photo-panel .upload-zone,
  body[data-theme] #studio .photo-panel .upload-zone {
    min-height: 330px !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 50% 25%, rgba(53, 199, 178, 0.1), transparent 34%),
      #050607 !important;
  }

  #studio .photo-panel .upload-zone img,
  body[data-theme] #studio .photo-panel .upload-zone img,
  html.native-layout-guard #photoPreview,
  #photoPreview {
    border-radius: 16px !important;
  }

  .paywall-product,
  body[data-theme] .paywall-product {
    border-color: rgba(245, 241, 232, 0.08) !important;
    background: rgba(245, 241, 232, 0.045) !important;
  }

  .paywall-product em,
  body[data-theme] .paywall-product em {
    color: #d8ff69 !important;
  }
}

/* v476-runtime-audit-fixes: keep mobile tap targets and inventory chips audit-clean. */
@media (max-width: 900px) {
  html.native-layout-guard body,
  html.native-layout-guard body[data-theme] {
    --topbar-height: 48px !important;
  }

  .topbar,
  body[data-theme] .topbar,
  html.native-layout-guard .topbar,
  html.native-layout-guard body[data-theme] .topbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    min-height: var(--topbar-height) !important;
    height: var(--topbar-height) !important;
  }

  .brand,
  body[data-theme] .brand,
  html.native-layout-guard .brand,
  html.native-layout-guard body[data-theme] .brand,
  .command-button,
  body[data-theme] .command-button,
  html.native-layout-guard .command-button,
  html.native-layout-guard body[data-theme] .command-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }

  .brand::before,
  body[data-theme] .brand::before,
  html.native-layout-guard .brand::before,
  html.native-layout-guard body[data-theme] .brand::before {
    width: 34px !important;
    height: 34px !important;
  }

  .active-view-chip,
  body[data-theme] .active-view-chip,
  html.native-layout-guard .active-view-chip {
    height: 30px !important;
    min-height: 30px !important;
  }

  #inventory .pill-row,
  body[data-theme] #inventory .pill-row {
    max-height: none !important;
    min-height: 28px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  #inventory .pill,
  body[data-theme] #inventory .pill {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    line-height: 1 !important;
  }
}

/* v478-logo-and-subscription-cleanup: real topbar mark, no floating package chip on mobile. */
@media (max-width: 900px) {
  #subscriptionButton.subscription-pill,
  body[data-theme] #subscriptionButton.subscription-pill,
  html.native-layout-guard #subscriptionButton.subscription-pill,
  html.native-layout-guard body[data-theme] #subscriptionButton.subscription-pill {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .brand,
  body[data-theme] .brand,
  html.native-layout-guard .brand,
  html.native-layout-guard body[data-theme] .brand {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(245, 241, 232, 0.055) !important;
    box-shadow: inset 0 0 0 1px rgba(245, 241, 232, 0.12) !important;
    overflow: hidden !important;
  }

  .brand::before,
  .brand::after,
  body[data-theme] .brand::before,
  body[data-theme] .brand::after,
  html.native-layout-guard .brand::before,
  html.native-layout-guard .brand::after,
  html.native-layout-guard body[data-theme] .brand::before,
  html.native-layout-guard body[data-theme] .brand::after {
    content: none !important;
    display: none !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock,
  html.native-layout-guard .brand-logo,
  html.native-layout-guard .brand-logo-lock,
  html.native-layout-guard body[data-theme] .brand-logo,
  html.native-layout-guard body[data-theme] .brand-logo-lock {
    display: block !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    opacity: 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
  }

  .brand > span,
  .brand > small,
  body[data-theme] .brand > span,
  body[data-theme] .brand > small,
  html.native-layout-guard .brand > span,
  html.native-layout-guard .brand > small,
  html.native-layout-guard body[data-theme] .brand > span,
  html.native-layout-guard body[data-theme] .brand > small {
    display: none !important;
  }
}

/* v480-mobile-density-pass: reduce vertical scrolling without shrinking primary touch targets. */
@media (max-width: 900px) {
  html.native-layout-guard body,
  html.native-layout-guard body[data-theme],
  body,
  body[data-theme] {
    --topbar-height: 48px !important;
    --dock-height: 56px !important;
  }

  html.native-layout-guard main,
  html.native-layout-guard body[data-theme] main {
    height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--topbar-height) - var(--dock-height)) !important;
    top: calc(env(safe-area-inset-top, 0px) + var(--topbar-height)) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--dock-height)) !important;
  }

  main > .studio-band.active-view,
  main > .content-band.active-view,
  main > .business-band.active-view,
  html.native-layout-guard main > .studio-band.active-view,
  html.native-layout-guard main > .content-band.active-view,
  html.native-layout-guard main > .business-band.active-view,
  body[data-theme] main > .studio-band.active-view,
  body[data-theme] main > .content-band.active-view,
  body[data-theme] main > .business-band.active-view {
    padding: 8px 10px 12px !important;
    scroll-padding-bottom: 14px !important;
  }

  main > .active-view > :first-child,
  html.native-layout-guard main > .active-view > :first-child,
  body[data-theme] main > .active-view > :first-child {
    gap: 9px !important;
  }

  .section-head,
  body[data-theme] .section-head {
    gap: 7px !important;
    margin: -8px -10px 6px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }

  .section-head h2,
  body[data-theme] .section-head h2 {
    font-size: 1.14rem !important;
    line-height: 1.1 !important;
  }

  .section-actions,
  body[data-theme] .section-actions,
  main :is(.field-grid, .profile-grid, .taste-grid, .size-grid, .calendar-grid, .planner-grid, .capsule-grid, .history-grid, .saved-look-grid, .discover-grid, .community-grid, .report-grid),
  body[data-theme] main :is(.field-grid, .profile-grid, .taste-grid, .size-grid, .calendar-grid, .planner-grid, .capsule-grid, .history-grid, .saved-look-grid, .discover-grid, .community-grid, .report-grid) {
    gap: 7px !important;
  }

  main label,
  body[data-theme] main label {
    gap: 5px !important;
    font-size: 0.75rem !important;
    line-height: 1.12 !important;
  }

  main :is(input, select, textarea),
  body[data-theme] main :is(input, select, textarea) {
    min-height: 40px !important;
    border-radius: 11px !important;
    padding-right: 9px !important;
    padding-left: 9px !important;
    font-size: max(1rem, 16px) !important;
    line-height: 1.14 !important;
  }

  main textarea,
  body[data-theme] main textarea {
    min-height: 82px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .primary-button,
  .ghost-button,
  button[type="submit"],
  label.import-button,
  body[data-theme] .primary-button,
  body[data-theme] .ghost-button,
  body[data-theme] button[type="submit"],
  body[data-theme] label.import-button {
    min-height: 40px !important;
    border-radius: 11px !important;
    padding: 7px 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
  }

  .mobile-collapsible :is(.panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head),
  body[data-theme] .mobile-collapsible :is(.panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
  }

  .mobile-collapse-toggle,
  .mobile-list-toggle,
  body[data-theme] .mobile-collapse-toggle,
  body[data-theme] .mobile-list-toggle {
    display: inline-grid !important;
    place-items: center !important;
    min-width: 40px !important;
    width: 40px !important;
    min-height: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(245, 241, 232, 0.12) !important;
    border-radius: 12px !important;
    background: rgba(245, 241, 232, 0.055) !important;
    color: #f7f2e8 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .mobile-collapse-toggle[hidden],
  .mobile-list-toggle[hidden],
  body[data-theme] .mobile-collapse-toggle[hidden],
  body[data-theme] .mobile-list-toggle[hidden] {
    display: none !important;
  }

  .mobile-collapsible.is-collapsed,
  body[data-theme] .mobile-collapsible.is-collapsed {
    gap: 0 !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .mobile-collapsible.is-collapsed > :not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head):not(.catalog-audit-head):not(.watchlist-head),
  body[data-theme] .mobile-collapsible.is-collapsed > :not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head):not(.catalog-audit-head):not(.watchlist-head) {
    display: none !important;
  }

  #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head strong,
  body[data-theme] #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head strong {
    display: none !important;
  }

  #inventory .inventory-grid.mobile-list-collapsed .item-card:nth-of-type(n + 7),
  body[data-theme] #inventory .inventory-grid.mobile-list-collapsed .item-card:nth-of-type(n + 7) {
    display: none !important;
  }

  #inventoryMobileListToggle,
  body[data-theme] #inventoryMobileListToggle {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 40px !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
  }

  #studio .intro-panel,
  body[data-theme] #studio .intro-panel,
  html.native-layout-guard #studio .intro-panel,
  html.native-layout-guard body[data-theme] #studio .intro-panel {
    display: none !important;
  }

  #studio .studio-grid,
  body[data-theme] #studio .studio-grid,
  html.native-layout-guard #studio .studio-grid,
  html.native-layout-guard body[data-theme] #studio .studio-grid {
    gap: 8px !important;
  }

  #studio .photo-panel,
  body[data-theme] #studio .photo-panel,
  html.native-layout-guard #studio .photo-panel,
  html.native-layout-guard body[data-theme] #studio .photo-panel {
    padding: 10px !important;
    border-radius: 18px !important;
  }

  #studio .photo-panel .panel-head,
  body[data-theme] #studio .photo-panel .panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  #studio .photo-panel .eyebrow,
  body[data-theme] #studio .photo-panel .eyebrow {
    font-size: 0.64rem !important;
    line-height: 1 !important;
  }

  #studio .photo-panel h2,
  body[data-theme] #studio .photo-panel h2 {
    font-size: 1.46rem !important;
    line-height: 1.04 !important;
  }

  #studio #analyzeButton,
  body[data-theme] #studio #analyzeButton {
    min-height: 40px !important;
    padding: 8px 11px !important;
    white-space: nowrap !important;
  }

  #studio .photo-panel .upload-zone,
  body[data-theme] #studio .photo-panel .upload-zone,
  html.native-layout-guard #studio .photo-panel .upload-zone,
  html.native-layout-guard body[data-theme] #studio .photo-panel .upload-zone {
    height: clamp(212px, 58vw, 238px) !important;
    min-height: 212px !important;
    max-height: 238px !important;
    aspect-ratio: auto !important;
    margin: 8px 0 !important;
    border-radius: 18px !important;
  }

  #studio .photo-panel .upload-zone img,
  body[data-theme] #studio .photo-panel .upload-zone img,
  html.native-layout-guard #studio #photoPreview,
  #photoPreview {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 14px !important;
    object-fit: contain !important;
  }

  #studio .photo-panel .upload-zone span,
  body[data-theme] #studio .photo-panel .upload-zone span {
    min-height: 40px !important;
    max-width: calc(100% - 22px) !important;
    padding: 8px 13px !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
    line-height: 1.08 !important;
  }

  #studio .score-wrap,
  body[data-theme] #studio .score-wrap,
  html.native-layout-guard #studio .score-wrap,
  html.native-layout-guard body[data-theme] #studio .score-wrap {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 8px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  #studio .score-ring,
  body[data-theme] #studio .score-ring {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
  }

  #studio .score-ring strong,
  body[data-theme] #studio .score-ring strong {
    margin-top: -6px !important;
    font-size: 1.05rem !important;
  }

  #studio .score-ring span,
  body[data-theme] #studio .score-ring span {
    margin-top: 22px !important;
    font-size: 0.56rem !important;
  }

  #studio .score-wrap h3,
  body[data-theme] #studio .score-wrap h3 {
    margin-bottom: 3px !important;
    font-size: 1rem !important;
    line-height: 1.08 !important;
  }

  #studio .score-wrap p,
  body[data-theme] #studio .score-wrap p {
    margin: 0 !important;
    font-size: 0.76rem !important;
    line-height: 1.22 !important;
  }

  #studio .score-meta,
  body[data-theme] #studio .score-meta {
    gap: 4px !important;
    max-height: 30px !important;
    margin-top: 5px !important;
    overflow: hidden !important;
  }

  #studio :is(.vision-panel, .repair-panel),
  body[data-theme] #studio :is(.vision-panel, .repair-panel) {
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  #studio :is(.vision-head, .repair-head),
  body[data-theme] #studio :is(.vision-head, .repair-head) {
    gap: 8px !important;
  }

  #studio :is(.vision-head h3, .repair-head h3),
  body[data-theme] #studio :is(.vision-head h3, .repair-head h3) {
    font-size: 0.98rem !important;
    line-height: 1.08 !important;
  }

  #studio .palette-swatches,
  body[data-theme] #studio .palette-swatches {
    gap: 5px !important;
  }

  #studio .palette-swatches span,
  body[data-theme] #studio .palette-swatches span {
    gap: 4px !important;
    min-height: 0 !important;
    padding: 4px !important;
    border-radius: 10px !important;
    font-size: 0.5rem !important;
  }

  #studio .palette-swatches i,
  body[data-theme] #studio .palette-swatches i {
    height: 22px !important;
    border-radius: 8px !important;
  }

  #studio .vision-signals,
  body[data-theme] #studio .vision-signals {
    gap: 6px !important;
  }

  #studio :is(.vision-signals article, .vision-fixes p, .repair-list > *, .expert-critique-grid article),
  body[data-theme] #studio :is(.vision-signals article, .vision-fixes p, .repair-list > *, .expert-critique-grid article) {
    padding: 7px !important;
    border-radius: 10px !important;
  }

  #studio .vision-signals span,
  #studio .vision-signals strong,
  body[data-theme] #studio .vision-signals span,
  body[data-theme] #studio .vision-signals strong {
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
  }

  #studio .photo-capture-actions,
  body[data-theme] #studio .photo-capture-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #studio .photo-capture-actions .ghost-button,
  body[data-theme] #studio .photo-capture-actions .ghost-button {
    min-height: 40px !important;
    padding: 6px 5px !important;
    font-size: 0.62rem !important;
    line-height: 1.08 !important;
  }

  #studio .repair-card,
  body[data-theme] #studio .repair-card {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  #studio .repair-card img,
  body[data-theme] #studio .repair-card img {
    width: 46px !important;
    height: 46px !important;
  }

  #inventory .inventory-grid,
  body[data-theme] #inventory .inventory-grid {
    gap: 6px !important;
  }

  html.native-layout-guard #inventory .item-card,
  html.native-layout-guard body[data-theme] #inventory .item-card,
  #inventory .item-card,
  body[data-theme] #inventory .item-card {
    grid-template-columns: 68px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 100px !important;
    padding: 7px !important;
    border-radius: 14px !important;
  }

  html.native-layout-guard #inventory .item-card > img,
  html.native-layout-guard body[data-theme] #inventory .item-card > img,
  #inventory .item-card > img,
  body[data-theme] #inventory .item-card > img {
    width: 68px !important;
    min-width: 68px !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    border-radius: 11px !important;
  }

  #inventory .item-body,
  body[data-theme] #inventory .item-body {
    column-gap: 6px !important;
    row-gap: 3px !important;
  }

  html.native-layout-guard #inventory .item-card h3,
  html.native-layout-guard body[data-theme] #inventory .item-card h3,
  #inventory .item-card h3,
  body[data-theme] #inventory .item-card h3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.8rem !important;
    line-height: 1.08 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  #inventory .item-meta,
  body[data-theme] #inventory .item-meta,
  #inventory .stock-line,
  body[data-theme] #inventory .stock-line {
    gap: 5px !important;
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
  }

  #inventory .item-meta .price,
  body[data-theme] #inventory .item-meta .price {
    font-size: 0.7rem !important;
  }

  #inventory .source-badge,
  #inventory .stock-badge,
  body[data-theme] #inventory .source-badge,
  body[data-theme] #inventory .stock-badge {
    min-height: 20px !important;
    padding: 3px 5px !important;
    font-size: 0.5rem !important;
  }

  #inventory .pill-row,
  body[data-theme] #inventory .pill-row {
    min-height: 26px !important;
    max-height: 26px !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  #inventory .pill-row .pill:nth-of-type(n + 3),
  body[data-theme] #inventory .pill-row .pill:nth-of-type(n + 3) {
    display: none !important;
  }

  #inventory .pill,
  body[data-theme] #inventory .pill {
    min-height: 22px !important;
    padding: 4px 5px !important;
    font-size: 0.5rem !important;
  }

  #inventory .product-link,
  #inventory .watch-button,
  body[data-theme] #inventory .product-link,
  body[data-theme] #inventory .watch-button {
    min-height: 40px !important;
    padding: 5px 7px !important;
    border-radius: 10px !important;
    font-size: 0.56rem !important;
  }

  main :is(.quick-stats, .outfit-summary, .wardrobe-metrics, .catalog-audit-metrics, .watchlist-metrics, .passport-metrics, .coach-metrics, .fit-metrics, .capsule-metrics, .client-metrics),
  body[data-theme] main :is(.quick-stats, .outfit-summary, .wardrobe-metrics, .catalog-audit-metrics, .watchlist-metrics, .passport-metrics, .coach-metrics, .fit-metrics, .capsule-metrics, .client-metrics) {
    gap: 6px !important;
  }

  main :is(.quick-stats div, .outfit-summary div, .wardrobe-metrics div, .catalog-audit-metrics div, .watchlist-metrics div, .passport-metrics div, .coach-metrics div, .fit-metrics div, .capsule-metrics div, .client-metrics div),
  body[data-theme] main :is(.quick-stats div, .outfit-summary div, .wardrobe-metrics div, .catalog-audit-metrics div, .watchlist-metrics div, .passport-metrics div, .coach-metrics div, .fit-metrics div, .capsule-metrics div, .client-metrics div) {
    min-height: 44px !important;
    padding: 7px !important;
    border-radius: 11px !important;
  }
}

@media (max-width: 370px) {
  #studio .photo-capture-actions,
  body[data-theme] #studio .photo-capture-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v480-mobile-collapse-hardening: keep collapsed detail panels from leaking content. */
@media (max-width: 900px) {
  #studio .score-meta,
  body[data-theme] #studio .score-meta,
  html.native-layout-guard #studio .score-meta,
  html.native-layout-guard body[data-theme] #studio .score-meta {
    display: none !important;
  }

  #studio .mobile-collapsible.is-collapsed > :not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head),
  body[data-theme] #studio .mobile-collapsible.is-collapsed > :not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head),
  html.native-layout-guard #studio .mobile-collapsible.is-collapsed > :not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head),
  html.native-layout-guard body[data-theme] #studio .mobile-collapsible.is-collapsed > :not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head),
  #inventory .mobile-collapsible.is-collapsed > :not(.panel-head):not(.catalog-audit-head):not(.watchlist-head),
  body[data-theme] #inventory .mobile-collapsible.is-collapsed > :not(.panel-head):not(.catalog-audit-head):not(.watchlist-head),
  html.native-layout-guard #inventory .mobile-collapsible.is-collapsed > :not(.panel-head):not(.catalog-audit-head):not(.watchlist-head),
  html.native-layout-guard body[data-theme] #inventory .mobile-collapsible.is-collapsed > :not(.panel-head):not(.catalog-audit-head):not(.watchlist-head) {
    display: none !important;
  }
}

/* v481-native-preview-logo-fix: phone rail rules also apply in a wide desktop browser. */
html.native-layout-guard #subscriptionButton.subscription-pill,
html.native-layout-guard body[data-theme] #subscriptionButton.subscription-pill {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.native-layout-guard .brand,
html.native-layout-guard .brand.active,
html.native-layout-guard body[data-theme] .brand,
html.native-layout-guard body[data-theme] .brand.active {
  display: grid !important;
  place-items: center !important;
  grid-column: 1 !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.native-layout-guard .brand::before,
html.native-layout-guard .brand::after,
html.native-layout-guard body[data-theme] .brand::before,
html.native-layout-guard body[data-theme] .brand::after {
  content: none !important;
  display: none !important;
}

html.native-layout-guard .brand-logo,
html.native-layout-guard .brand-logo-lock,
html.native-layout-guard body[data-theme] .brand-logo,
html.native-layout-guard body[data-theme] .brand-logo-lock {
  display: block !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  opacity: 1 !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: none !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.native-layout-guard .brand > span,
html.native-layout-guard .brand > small,
html.native-layout-guard body[data-theme] .brand > span,
html.native-layout-guard body[data-theme] .brand > small {
  display: none !important;
}

/* v23-quality-audit: first cleanup batch for readability, pricing clarity and mobile scan speed. */
@media (max-width: 900px) {
  :root,
  html.native-layout-guard body,
  body[data-theme] {
    --topbar-height: 52px !important;
    --dock-height: 62px !important;
  }

  .app-shell .topbar,
  body[data-theme] .app-shell .topbar,
  html.native-layout-guard .app-shell .topbar {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    grid-template-columns: 42px minmax(0, 1fr) 38px !important;
    gap: 7px !important;
    padding: 6px 10px !important;
    border-radius: 0 0 14px 14px !important;
  }

  .topbar-switches,
  body[data-theme] .topbar-switches,
  html.native-layout-guard .topbar-switches {
    display: none !important;
  }

  html.native-layout-guard .brand-logo,
  html.native-layout-guard .brand-logo-lock,
  html.native-layout-guard body[data-theme] .brand-logo,
  html.native-layout-guard body[data-theme] .brand-logo-lock {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
  }

  .active-view-chip,
  body[data-theme] .active-view-chip,
  html.native-layout-guard .active-view-chip {
    height: 34px !important;
    min-height: 34px !important;
    border-radius: 12px !important;
    padding: 0 12px !important;
    font-size: 0.78rem !important;
  }

  .command-button,
  body[data-theme] .command-button,
  html.native-layout-guard .command-button {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  main {
    inset: calc(var(--topbar-height) + var(--safe-top, 0px)) 0 calc(var(--dock-height) + var(--safe-bottom, 0px)) 0 !important;
  }

  main > .studio-band.active-view,
  main > .content-band.active-view,
  main > .business-band.active-view,
  html.native-layout-guard main > .studio-band.active-view,
  html.native-layout-guard main > .content-band.active-view,
  html.native-layout-guard main > .business-band.active-view {
    padding: 8px 10px 12px !important;
  }

  .mobile-dock,
  body[data-theme] .mobile-dock,
  html.native-layout-guard .mobile-dock {
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    padding: 5px 9px calc(5px + var(--safe-bottom, 0px)) !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .mobile-dock a,
  body[data-theme] .mobile-dock a,
  html.native-layout-guard .mobile-dock a {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    grid-template-rows: 24px 14px !important;
    gap: 3px !important;
    padding: 4px 0 2px !important;
  }

  .mobile-dock .dock-icon,
  body[data-theme] .mobile-dock .dock-icon,
  html.native-layout-guard .mobile-dock .dock-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 9px !important;
  }

  .mobile-dock .dock-label,
  body[data-theme] .mobile-dock .dock-label,
  html.native-layout-guard .mobile-dock .dock-label {
    font-size: 0.62rem !important;
    font-weight: 760 !important;
  }

  #studio .photo-panel,
  body[data-theme] #studio .photo-panel {
    gap: 9px !important;
  }

  #studio .photo-panel .panel-head,
  body[data-theme] #studio .photo-panel .panel-head {
    align-items: center !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
  }

  #studio .photo-panel h2,
  body[data-theme] #studio .photo-panel h2 {
    font-size: clamp(1.38rem, 8vw, 1.86rem) !important;
    line-height: 0.98 !important;
  }

  #studio .photo-panel .primary-button,
  body[data-theme] #studio .photo-panel .primary-button {
    min-width: 112px !important;
    min-height: 46px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    font-size: 0.86rem !important;
  }

  #studio .upload-zone,
  body[data-theme] #studio .upload-zone,
  html.native-layout-guard #studio .upload-zone {
    min-height: clamp(190px, 33vh, 258px) !important;
    max-height: 278px !important;
    border-radius: 18px !important;
  }

  #studio .upload-zone img,
  body[data-theme] #studio .upload-zone img,
  html.native-layout-guard #studio .upload-zone img {
    width: min(46vw, 178px) !important;
    height: min(46vw, 178px) !important;
  }

  #studio .score-wrap,
  body[data-theme] #studio .score-wrap {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 86px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  #studio .score-ring,
  body[data-theme] #studio .score-ring {
    width: 58px !important;
    height: 58px !important;
    border-radius: 16px !important;
  }

  #studio .score-wrap h3,
  body[data-theme] #studio .score-wrap h3 {
    font-size: 1rem !important;
    line-height: 1.12 !important;
  }

  #studio .score-wrap p,
  body[data-theme] #studio .score-wrap p {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.78rem !important;
    line-height: 1.28 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  #fit .fit-ticket,
  body[data-theme] #fit .fit-ticket {
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  #fit .fit-metrics,
  body[data-theme] #fit .fit-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #fit .fit-readout,
  body[data-theme] #fit .fit-readout {
    display: grid !important;
    gap: 6px !important;
  }

  #fit .fit-readout p,
  body[data-theme] #fit .fit-readout p {
    padding: 8px 9px !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
  }

  #fit .fit-readout p:nth-of-type(n + 5),
  body[data-theme] #fit .fit-readout p:nth-of-type(n + 5) {
    display: none !important;
  }

  #inventory .inventory-layout > .panel,
  body[data-theme] #inventory .inventory-layout > .panel {
    padding: 12px !important;
  }

  #inventory .inventory-grid,
  body[data-theme] #inventory .inventory-grid {
    gap: 7px !important;
  }

  #inventory .item-card,
  body[data-theme] #inventory .item-card,
  html.native-layout-guard #inventory .item-card {
    grid-template-columns: 62px minmax(0, 1fr) auto !important;
    min-height: 94px !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  #inventory .item-card > img,
  body[data-theme] #inventory .item-card > img,
  html.native-layout-guard #inventory .item-card > img {
    width: 62px !important;
    min-width: 62px !important;
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
  }

  #inventory .item-body h3,
  body[data-theme] #inventory .item-body h3 {
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
  }

  #inventory .product-link,
  #inventory .watch-button,
  body[data-theme] #inventory .product-link,
  body[data-theme] #inventory .watch-button {
    min-height: 34px !important;
    padding: 5px 7px !important;
    font-size: 0.54rem !important;
  }
}

.paywall-panel,
body[data-theme] .paywall-panel {
  width: min(432px, calc(100vw - 18px)) !important;
  gap: 11px !important;
  padding: 18px !important;
  border-radius: 24px !important;
  background: rgba(12, 14, 18, 0.98) !important;
}

.paywall-panel h2,
body[data-theme] .paywall-panel h2 {
  font-size: clamp(1.45rem, 7vw, 2rem) !important;
}

.paywall-panel p,
body[data-theme] .paywall-panel p {
  font-size: 0.88rem !important;
  line-height: 1.36 !important;
}

.paywall-products,
body[data-theme] .paywall-products {
  gap: 8px !important;
}

.paywall-product,
body[data-theme] .paywall-product {
  grid-template-columns: minmax(0, 1fr) minmax(88px, auto) !important;
  min-height: 86px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.paywall-product[data-plan-tier="pro"],
body[data-theme] .paywall-product[data-plan-tier="pro"] {
  border-color: rgba(220, 232, 111, 0.46) !important;
  background: linear-gradient(135deg, rgba(220, 232, 111, 0.11), rgba(255, 255, 255, 0.06)) !important;
}

.paywall-product span,
body[data-theme] .paywall-product span {
  gap: 5px !important;
}

.paywall-product strong,
body[data-theme] .paywall-product strong {
  font-size: 1rem !important;
}

.paywall-product small,
body[data-theme] .paywall-product small {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.76rem !important;
  line-height: 1.22 !important;
}

.paywall-product ul,
body[data-theme] .paywall-product ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.paywall-product li,
body[data-theme] .paywall-product li {
  min-width: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  padding: 3px 6px !important;
  font-size: 0.58rem !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
}

.paywall-product em,
body[data-theme] .paywall-product em {
  display: grid !important;
  gap: 1px !important;
  justify-items: end !important;
  color: #dce86f !important;
  font-size: 1.03rem !important;
  line-height: 1.05 !important;
}

.paywall-product em i,
body[data-theme] .paywall-product em i {
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 0.64rem !important;
  font-style: normal !important;
  font-weight: 760 !important;
}

@media (max-width: 430px) {
  .paywall-panel,
  body[data-theme] .paywall-panel {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .paywall-product,
  body[data-theme] .paywall-product {
    min-height: 82px !important;
    padding: 10px !important;
  }

  .paywall-product li,
  body[data-theme] .paywall-product li {
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* v24-mobile-density-pass: cut report-like screens down for hand-held scanning. */
@media (max-width: 900px) {
  .topbar,
  body[data-theme] .topbar,
  html.native-layout-guard .topbar {
    --topbar-height: 54px !important;
  }

  .brand,
  body[data-theme] .brand {
    flex: 0 0 48px !important;
    width: 48px !important;
    max-width: 48px !important;
  }

  .brand-logo,
  .brand-logo-lock,
  body[data-theme] .brand-logo,
  body[data-theme] .brand-logo-lock {
    width: 44px !important;
    height: 44px !important;
  }

  .active-view-chip,
  body[data-theme] .active-view-chip {
    min-height: 38px !important;
    padding: 7px 12px !important;
    font-size: 0.84rem !important;
  }

  .command-button,
  body[data-theme] .command-button {
    min-width: 42px !important;
    width: 42px !important;
    min-height: 42px !important;
    height: 42px !important;
  }

  .photo-panel,
  body[data-theme] .photo-panel {
    padding: 12px !important;
    border-radius: 18px !important;
  }

  #studio .photo-head,
  body[data-theme] #studio .photo-head {
    align-items: center !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }

  #studio .photo-panel .eyebrow,
  body[data-theme] #studio .photo-panel .eyebrow {
    font-size: 0.6rem !important;
    line-height: 1 !important;
  }

  #studio .photo-panel h2,
  body[data-theme] #studio .photo-panel h2 {
    font-size: clamp(1.32rem, 7.1vw, 1.68rem) !important;
    line-height: 0.96 !important;
  }

  #studio .photo-panel .primary-button,
  body[data-theme] #studio .photo-panel .primary-button {
    min-width: 104px !important;
    min-height: 42px !important;
    padding: 7px 10px !important;
    font-size: 0.78rem !important;
  }

  #studio .upload-zone,
  body[data-theme] #studio .upload-zone,
  html.native-layout-guard #studio .upload-zone {
    min-height: clamp(152px, 27vh, 214px) !important;
    max-height: 224px !important;
  }

  #studio .upload-zone img,
  body[data-theme] #studio .upload-zone img,
  html.native-layout-guard #studio .upload-zone img {
    width: min(38vw, 138px) !important;
    height: min(38vw, 138px) !important;
  }

  #studio .score-wrap,
  body[data-theme] #studio .score-wrap {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    min-height: 72px !important;
    padding: 9px !important;
  }

  #studio .score-ring,
  body[data-theme] #studio .score-ring {
    width: 50px !important;
    height: 50px !important;
    font-size: 0.9rem !important;
  }

  #studio .score-wrap h3,
  body[data-theme] #studio .score-wrap h3 {
    font-size: 0.86rem !important;
    line-height: 1.05 !important;
  }

  #studio .score-wrap p,
  body[data-theme] #studio .score-wrap p {
    -webkit-line-clamp: 2 !important;
    font-size: 0.68rem !important;
  }

  #studio .collapse-card,
  body[data-theme] #studio .collapse-card {
    min-height: 58px !important;
    padding: 10px 12px !important;
  }

  #studio .collapse-card h3,
  body[data-theme] #studio .collapse-card h3 {
    font-size: 0.9rem !important;
    line-height: 1.05 !important;
  }

  #fit .fit-result-panel,
  body[data-theme] #fit .fit-result-panel {
    padding: 0 !important;
  }

  #fit .fit-ticket,
  body[data-theme] #fit .fit-ticket {
    padding: 10px !important;
  }

  #fit .fit-ticket-head,
  body[data-theme] #fit .fit-ticket-head {
    gap: 8px !important;
    margin-bottom: 4px !important;
  }

  #fit .fit-ticket-head h3,
  body[data-theme] #fit .fit-ticket-head h3 {
    font-size: 1.08rem !important;
    line-height: 1.04 !important;
  }

  #fit .fit-metrics > *,
  body[data-theme] #fit .fit-metrics > * {
    min-height: 48px !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  #fit .fit-metrics strong,
  body[data-theme] #fit .fit-metrics strong {
    font-size: 1.03rem !important;
    line-height: 1 !important;
  }

  #fit .fit-readout p:nth-of-type(n + 4),
  body[data-theme] #fit .fit-readout p:nth-of-type(n + 4) {
    display: none !important;
  }

  #fit .fit-alternatives,
  body[data-theme] #fit .fit-alternatives {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  #fit .fit-alternatives > *:nth-child(n + 2),
  body[data-theme] #fit .fit-alternatives > *:nth-child(n + 2) {
    display: none !important;
  }

  #inventory .section-hero,
  body[data-theme] #inventory .section-hero {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  #inventory .section-hero h2,
  body[data-theme] #inventory .section-hero h2 {
    font-size: 1.28rem !important;
    line-height: 0.98 !important;
  }

  #inventory .inventory-tabs,
  body[data-theme] #inventory .inventory-tabs {
    gap: 4px !important;
    margin-top: 10px !important;
  }

  #inventory .inventory-tabs button,
  body[data-theme] #inventory .inventory-tabs button {
    min-height: 40px !important;
    padding: 6px 8px !important;
    font-size: 0.76rem !important;
  }

  #inventory .inventory-actions,
  body[data-theme] #inventory .inventory-actions {
    gap: 5px !important;
    margin-top: 8px !important;
  }

  #inventory .inventory-actions button,
  body[data-theme] #inventory .inventory-actions button {
    min-height: 36px !important;
    padding: 6px 8px !important;
    font-size: 0.68rem !important;
  }

  #inventory .item-card,
  body[data-theme] #inventory .item-card,
  html.native-layout-guard #inventory .item-card {
    grid-template-columns: 56px minmax(0, 1fr) auto !important;
    min-height: 78px !important;
    align-items: center !important;
    padding: 7px !important;
  }

  #inventory .item-card > img,
  body[data-theme] #inventory .item-card > img,
  html.native-layout-guard #inventory .item-card > img {
    width: 56px !important;
    min-width: 56px !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    border-radius: 12px !important;
  }

  #inventory .item-body,
  body[data-theme] #inventory .item-body {
    gap: 5px !important;
  }

  #inventory .item-body h3,
  body[data-theme] #inventory .item-body h3 {
    font-size: 0.7rem !important;
    line-height: 1.04 !important;
  }

  #inventory .item-meta,
  #inventory .item-tags,
  body[data-theme] #inventory .item-meta,
  body[data-theme] #inventory .item-tags {
    gap: 4px !important;
  }

  #inventory .item-meta span,
  #inventory .item-tags span,
  body[data-theme] #inventory .item-meta span,
  body[data-theme] #inventory .item-tags span {
    padding: 3px 6px !important;
    font-size: 0.54rem !important;
    line-height: 1.05 !important;
  }
}

/* v24-inventory-mobile-scan: make the wardrobe list a quick scan list, not full product sheets. */
@media (max-width: 900px) {
  #inventory .inventory-grid.mobile-list-collapsed .item-card:nth-of-type(n + 5),
  body[data-theme] #inventory .inventory-grid.mobile-list-collapsed .item-card:nth-of-type(n + 5) {
    display: none !important;
  }

  #inventory .item-card,
  body[data-theme] #inventory .item-card,
  html.native-layout-guard #inventory .item-card,
  html.native-layout-guard body[data-theme] #inventory .item-card {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    min-height: 72px !important;
    gap: 8px !important;
    padding: 7px !important;
    border-radius: 14px !important;
  }

  #inventory .item-card > img,
  body[data-theme] #inventory .item-card > img,
  html.native-layout-guard #inventory .item-card > img,
  html.native-layout-guard body[data-theme] #inventory .item-card > img {
    width: 50px !important;
    min-width: 50px !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    border-radius: 11px !important;
  }

  #inventory .item-body,
  body[data-theme] #inventory .item-body,
  html.native-layout-guard #inventory .item-body,
  html.native-layout-guard body[data-theme] #inventory .item-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title price"
      "meta action"
      "tags action" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 3px !important;
  }

  #inventory .item-body h3,
  body[data-theme] #inventory .item-body h3,
  html.native-layout-guard #inventory .item-body h3,
  html.native-layout-guard body[data-theme] #inventory .item-body h3 {
    grid-area: title !important;
    display: block !important;
    overflow: hidden !important;
    max-width: 100% !important;
    font-size: 0.7rem !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #inventory .brand-pill,
  #inventory .stock-line,
  #inventory .watch-button,
  body[data-theme] #inventory .brand-pill,
  body[data-theme] #inventory .stock-line,
  body[data-theme] #inventory .watch-button,
  html.native-layout-guard #inventory .brand-pill,
  html.native-layout-guard #inventory .stock-line,
  html.native-layout-guard #inventory .watch-button {
    display: none !important;
  }

  #inventory .item-meta,
  body[data-theme] #inventory .item-meta,
  html.native-layout-guard #inventory .item-meta,
  html.native-layout-guard body[data-theme] #inventory .item-meta {
    display: contents !important;
  }

  #inventory .source-badge,
  body[data-theme] #inventory .source-badge,
  html.native-layout-guard #inventory .source-badge,
  html.native-layout-guard body[data-theme] #inventory .source-badge {
    grid-area: meta !important;
    justify-self: start !important;
    min-height: 18px !important;
    padding: 2px 6px !important;
    font-size: 0.5rem !important;
    line-height: 1 !important;
  }

  #inventory .item-meta .price,
  body[data-theme] #inventory .item-meta .price,
  html.native-layout-guard #inventory .item-meta .price,
  html.native-layout-guard body[data-theme] #inventory .item-meta .price {
    grid-area: price !important;
    justify-self: end !important;
    color: #dce86f !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #inventory .pill-row,
  body[data-theme] #inventory .pill-row,
  html.native-layout-guard #inventory .pill-row,
  html.native-layout-guard body[data-theme] #inventory .pill-row {
    grid-area: tags !important;
    display: flex !important;
    gap: 3px !important;
    min-height: 18px !important;
    max-height: 20px !important;
    overflow: hidden !important;
  }

  #inventory .pill-row .pill:nth-of-type(n + 3),
  body[data-theme] #inventory .pill-row .pill:nth-of-type(n + 3),
  html.native-layout-guard #inventory .pill-row .pill:nth-of-type(n + 3),
  html.native-layout-guard body[data-theme] #inventory .pill-row .pill:nth-of-type(n + 3) {
    display: none !important;
  }

  #inventory .pill,
  body[data-theme] #inventory .pill,
  html.native-layout-guard #inventory .pill,
  html.native-layout-guard body[data-theme] #inventory .pill {
    min-height: 18px !important;
    padding: 2px 6px !important;
    font-size: 0.5rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #inventory .product-link,
  body[data-theme] #inventory .product-link,
  html.native-layout-guard #inventory .product-link,
  html.native-layout-guard body[data-theme] #inventory .product-link {
    grid-area: action !important;
    justify-self: end !important;
    min-width: 74px !important;
    width: auto !important;
    min-height: 44px !important;
    padding: 6px 9px !important;
    border-radius: 12px !important;
    font-size: 0.58rem !important;
  }

  html body main #inventory .item-card .item-body button.watch-button[data-watch-product],
  html body[data-theme] main #inventory .item-card .item-body button.watch-button[data-watch-product],
  html.native-layout-guard body main #inventory .item-card .item-body button.watch-button[data-watch-product],
  html.native-layout-guard body[data-theme] main #inventory .item-card .item-body button.watch-button[data-watch-product] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* v25-deep-module-collapse: make report-like modules navigable on phones. */
@media (max-width: 900px) {
  main .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  html.native-layout-guard main .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 42px !important;
  }

  main .mobile-collapse-toggle,
  body[data-theme] main .mobile-collapse-toggle,
  html.native-layout-guard main .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] main .mobile-collapse-toggle {
    flex: 0 0 44px !important;
    min-width: 44px !important;
    width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  main .mobile-collapse-head :is(.ghost-button, .primary-button),
  body[data-theme] main .mobile-collapse-head :is(.ghost-button, .primary-button),
  html.native-layout-guard main .mobile-collapse-head :is(.ghost-button, .primary-button),
  html.native-layout-guard body[data-theme] main .mobile-collapse-head :is(.ghost-button, .primary-button) {
    min-width: max-content !important;
    white-space: nowrap !important;
  }

  main .mobile-collapsible.is-collapsed > :not(.mobile-collapse-head):not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head):not(.catalog-audit-head):not(.watchlist-head),
  body[data-theme] main .mobile-collapsible.is-collapsed > :not(.mobile-collapse-head):not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head):not(.catalog-audit-head):not(.watchlist-head),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :not(.mobile-collapse-head):not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head):not(.catalog-audit-head):not(.watchlist-head),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :not(.mobile-collapse-head):not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head):not(.catalog-audit-head):not(.watchlist-head) {
    display: none !important;
  }

  #passport .passport-card,
  #coach .coach-answer,
  #planner .planner-ticket,
  #capsule .capsule-board,
  #report .report-layout > .report-panel:first-child,
  #trends .trend-workbench,
  body[data-theme] #passport .passport-card,
  body[data-theme] #coach .coach-answer,
  body[data-theme] #planner .planner-ticket,
  body[data-theme] #capsule .capsule-board,
  body[data-theme] #report .report-layout > .report-panel:first-child,
  body[data-theme] #trends .trend-workbench {
    padding: 11px !important;
    border-radius: 16px !important;
  }

  #passport :is(.passport-metrics, .passport-dna, .passport-reasons),
  #coach :is(.coach-metrics, .coach-items),
  #planner :is(.planner-metrics, .planner-reasons),
  #capsule :is(.capsule-metrics, .capsule-items),
  #report :is(.report-metrics),
  #trends :is(.trend-metrics),
  body[data-theme] #passport :is(.passport-metrics, .passport-dna, .passport-reasons),
  body[data-theme] #coach :is(.coach-metrics, .coach-items),
  body[data-theme] #planner :is(.planner-metrics, .planner-reasons),
  body[data-theme] #capsule :is(.capsule-metrics, .capsule-items),
  body[data-theme] #report :is(.report-metrics),
  body[data-theme] #trends :is(.trend-metrics) {
    gap: 6px !important;
  }

  #passport .passport-reasons > *:nth-child(n + 4),
  #coach .coach-items > *:nth-child(n + 3),
  #planner .planner-reasons > *:nth-child(n + 4),
  #capsule .capsule-items > *:nth-child(n + 5),
  #lookbook #lookbookGrid > *:nth-child(n + 3),
  #clients #clientPipeline > *:nth-child(n + 4),
  #trends #trendGrid > *:nth-child(n + 3),
  body[data-theme] #passport .passport-reasons > *:nth-child(n + 4),
  body[data-theme] #coach .coach-items > *:nth-child(n + 3),
  body[data-theme] #planner .planner-reasons > *:nth-child(n + 4),
  body[data-theme] #capsule .capsule-items > *:nth-child(n + 5),
  body[data-theme] #lookbook #lookbookGrid > *:nth-child(n + 3),
  body[data-theme] #clients #clientPipeline > *:nth-child(n + 4),
  body[data-theme] #trends #trendGrid > *:nth-child(n + 3) {
    display: none !important;
  }

  #lookbook :is(.lookbook-metrics, .lookbook-grid),
  #clients :is(.client-metrics, .client-pipeline),
  body[data-theme] #lookbook :is(.lookbook-metrics, .lookbook-grid),
  body[data-theme] #clients :is(.client-metrics, .client-pipeline) {
    gap: 6px !important;
  }
}

/* v26b-trends-mobile-final: final cascade winner for readable mobile trend cards. */
@media (max-width: 900px) {
  #passport .passport-reasons > *:nth-child(n + 2),
  body[data-theme] #passport .passport-reasons > *:nth-child(n + 2),
  html.native-layout-guard #passport .passport-reasons > *:nth-child(n + 2),
  html.native-layout-guard body[data-theme] #passport .passport-reasons > *:nth-child(n + 2),
  #lookbook #lookbookGrid > *:nth-child(n + 2),
  body[data-theme] #lookbook #lookbookGrid > *:nth-child(n + 2),
  html.native-layout-guard #lookbook #lookbookGrid > *:nth-child(n + 2),
  html.native-layout-guard body[data-theme] #lookbook #lookbookGrid > *:nth-child(n + 2) {
    display: none !important;
  }

  #lookbook .lookbook-grid,
  body[data-theme] #lookbook .lookbook-grid,
  html.native-layout-guard #lookbook .lookbook-grid,
  html.native-layout-guard body[data-theme] #lookbook .lookbook-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: 1fr !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  #lookbook .look-card,
  body[data-theme] #lookbook .look-card,
  html.native-layout-guard #lookbook .look-card,
  html.native-layout-guard body[data-theme] #lookbook .look-card {
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 11px !important;
    border-radius: 14px !important;
    scroll-snap-align: none !important;
  }

  #lookbook .look-card::before,
  body[data-theme] #lookbook .look-card::before,
  html.native-layout-guard #lookbook .look-card::before,
  html.native-layout-guard body[data-theme] #lookbook .look-card::before {
    display: none !important;
  }

  #lookbook .look-card > *,
  body[data-theme] #lookbook .look-card > *,
  html.native-layout-guard #lookbook .look-card > *,
  html.native-layout-guard body[data-theme] #lookbook .look-card > * {
    position: static !important;
    z-index: auto !important;
  }

  #lookbook .look-card-head,
  body[data-theme] #lookbook .look-card-head,
  html.native-layout-guard #lookbook .look-card-head,
  html.native-layout-guard body[data-theme] #lookbook .look-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  #lookbook .look-card-head h3,
  body[data-theme] #lookbook .look-card-head h3,
  html.native-layout-guard #lookbook .look-card-head h3,
  html.native-layout-guard body[data-theme] #lookbook .look-card-head h3 {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 0.9rem !important;
    line-height: 1.08 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  #lookbook .look-card-head > strong,
  body[data-theme] #lookbook .look-card-head > strong,
  html.native-layout-guard #lookbook .look-card-head > strong,
  html.native-layout-guard body[data-theme] #lookbook .look-card-head > strong {
    flex: 0 0 auto !important;
    max-width: 92px !important;
    min-height: 28px !important;
    padding: 4px 8px !important;
    font-size: 0.62rem !important;
    line-height: 1 !important;
  }

  #lookbook .look-products,
  body[data-theme] #lookbook .look-products,
  html.native-layout-guard #lookbook .look-products,
  html.native-layout-guard body[data-theme] #lookbook .look-products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    align-self: auto !important;
    gap: 5px !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  #lookbook .look-product,
  body[data-theme] #lookbook .look-product,
  html.native-layout-guard #lookbook .look-product,
  html.native-layout-guard body[data-theme] #lookbook .look-product {
    display: flex !important;
    grid-row: auto !important;
    height: auto !important;
    min-height: 44px !important;
    min-block-size: 44px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 5px 8px !important;
    border-radius: 11px !important;
  }

  #lookbook .look-product:first-child,
  body[data-theme] #lookbook .look-product:first-child,
  html.native-layout-guard #lookbook .look-product:first-child,
  html.native-layout-guard body[data-theme] #lookbook .look-product:first-child {
    grid-row: auto !important;
  }

  #lookbook .look-card-head > strong,
  body[data-theme] #lookbook .look-card-head > strong,
  html.native-layout-guard #lookbook .look-card-head > strong,
  html.native-layout-guard body[data-theme] #lookbook .look-card-head > strong {
    border: 1px solid rgba(244, 240, 232, 0.16) !important;
    background: rgba(17, 20, 24, 0.88) !important;
    color: #fbf6ea !important;
  }

  #lookbook .look-product img,
  body[data-theme] #lookbook .look-product img,
  html.native-layout-guard #lookbook .look-product img,
  html.native-layout-guard body[data-theme] #lookbook .look-product img {
    display: none !important;
  }

  #lookbook .look-product span,
  body[data-theme] #lookbook .look-product span,
  html.native-layout-guard #lookbook .look-product span,
  html.native-layout-guard body[data-theme] #lookbook .look-product span {
    display: block !important;
    position: static !important;
    overflow: visible !important;
    max-width: 100% !important;
    font-size: 0.5rem !important;
    line-height: 1.12 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #lookbook .look-product:nth-child(n + 4),
  #lookbook .look-stats span:nth-child(n + 3),
  #lookbook .look-script p:nth-child(n + 2),
  body[data-theme] #lookbook .look-product:nth-child(n + 4),
  body[data-theme] #lookbook .look-stats span:nth-child(n + 3),
  body[data-theme] #lookbook .look-script p:nth-child(n + 2),
  html.native-layout-guard #lookbook .look-product:nth-child(n + 4),
  html.native-layout-guard #lookbook .look-stats span:nth-child(n + 3),
  html.native-layout-guard #lookbook .look-script p:nth-child(n + 2),
  html.native-layout-guard body[data-theme] #lookbook .look-product:nth-child(n + 4),
  html.native-layout-guard body[data-theme] #lookbook .look-stats span:nth-child(n + 3),
  html.native-layout-guard body[data-theme] #lookbook .look-script p:nth-child(n + 2) {
    display: none !important;
  }

  #coach .coach-message p:nth-of-type(n + 4),
  #coach .coach-items > *:nth-child(n + 2),
  #fit .fit-readout p:nth-of-type(n + 3),
  #fit .fit-alternatives,
  #planner .planner-outfit > *:nth-child(n + 4),
  #planner .planner-reasons p:nth-of-type(n + 2),
  #capsule .capsule-items > *:nth-child(n + 3),
  #passport .passport-dna > *:nth-child(n + 4),
  #passport .passport-products > *:nth-child(n + 3),
  body[data-theme] #coach .coach-message p:nth-of-type(n + 4),
  body[data-theme] #coach .coach-items > *:nth-child(n + 2),
  body[data-theme] #fit .fit-readout p:nth-of-type(n + 3),
  body[data-theme] #fit .fit-alternatives,
  body[data-theme] #planner .planner-outfit > *:nth-child(n + 4),
  body[data-theme] #planner .planner-reasons p:nth-of-type(n + 2),
  body[data-theme] #capsule .capsule-items > *:nth-child(n + 3),
  body[data-theme] #passport .passport-dna > *:nth-child(n + 4),
  body[data-theme] #passport .passport-products > *:nth-child(n + 3),
  html.native-layout-guard #coach .coach-message p:nth-of-type(n + 4),
  html.native-layout-guard #coach .coach-items > *:nth-child(n + 2),
  html.native-layout-guard #fit .fit-readout p:nth-of-type(n + 3),
  html.native-layout-guard #fit .fit-alternatives,
  html.native-layout-guard #planner .planner-outfit > *:nth-child(n + 4),
  html.native-layout-guard #planner .planner-reasons p:nth-of-type(n + 2),
  html.native-layout-guard #capsule .capsule-items > *:nth-child(n + 3),
  html.native-layout-guard #passport .passport-dna > *:nth-child(n + 4),
  html.native-layout-guard #passport .passport-products > *:nth-child(n + 3),
  html.native-layout-guard body[data-theme] #coach .coach-message p:nth-of-type(n + 4),
  html.native-layout-guard body[data-theme] #coach .coach-items > *:nth-child(n + 2),
  html.native-layout-guard body[data-theme] #fit .fit-readout p:nth-of-type(n + 3),
  html.native-layout-guard body[data-theme] #fit .fit-alternatives,
  html.native-layout-guard body[data-theme] #planner .planner-outfit > *:nth-child(n + 4),
  html.native-layout-guard body[data-theme] #planner .planner-reasons p:nth-of-type(n + 2),
  html.native-layout-guard body[data-theme] #capsule .capsule-items > *:nth-child(n + 3),
  html.native-layout-guard body[data-theme] #passport .passport-dna > *:nth-child(n + 4),
  html.native-layout-guard body[data-theme] #passport .passport-products > *:nth-child(n + 3) {
    display: none !important;
  }

  #coach .coach-items,
  #planner .planner-outfit,
  #capsule .capsule-items,
  body[data-theme] #coach .coach-items,
  body[data-theme] #planner .planner-outfit,
  body[data-theme] #capsule .capsule-items,
  html.native-layout-guard #coach .coach-items,
  html.native-layout-guard #planner .planner-outfit,
  html.native-layout-guard #capsule .capsule-items,
  html.native-layout-guard body[data-theme] #coach .coach-items,
  html.native-layout-guard body[data-theme] #planner .planner-outfit,
  html.native-layout-guard body[data-theme] #capsule .capsule-items {
    gap: 7px !important;
  }

  #trends .trend-grid,
  body[data-theme] #trends .trend-grid,
  html.native-layout-guard #trends .trend-grid,
  html.native-layout-guard body[data-theme] #trends .trend-grid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: 1fr !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  #trends #trendGrid > .trend-card:nth-child(n + 3),
  body[data-theme] #trends #trendGrid > .trend-card:nth-child(n + 3),
  html.native-layout-guard #trends #trendGrid > .trend-card:nth-child(n + 3),
  html.native-layout-guard body[data-theme] #trends #trendGrid > .trend-card:nth-child(n + 3) {
    display: none !important;
  }

  #trends .trend-card,
  body[data-theme] #trends .trend-card,
  html.native-layout-guard #trends .trend-card,
  html.native-layout-guard body[data-theme] #trends .trend-card {
    display: grid !important;
    min-height: 0 !important;
    gap: 7px !important;
    overflow: hidden !important;
    padding: 10px 11px !important;
    border: 1px solid rgba(244, 240, 232, 0.1) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(180deg, rgba(244, 240, 232, 0.055), rgba(244, 240, 232, 0.018)),
      #111418 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    scroll-snap-align: none !important;
  }

  #trends .trend-card::before,
  body[data-theme] #trends .trend-card::before,
  html.native-layout-guard #trends .trend-card::before,
  html.native-layout-guard body[data-theme] #trends .trend-card::before {
    display: none !important;
  }

  #trends .trend-card > *,
  body[data-theme] #trends .trend-card > *,
  html.native-layout-guard #trends .trend-card > *,
  html.native-layout-guard body[data-theme] #trends .trend-card > * {
    position: static !important;
    z-index: auto !important;
  }

  #trends .trend-card-head,
  body[data-theme] #trends .trend-card-head,
  html.native-layout-guard #trends .trend-card-head,
  html.native-layout-guard body[data-theme] #trends .trend-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  #trends .trend-score,
  body[data-theme] #trends .trend-score,
  html.native-layout-guard #trends .trend-score,
  html.native-layout-guard body[data-theme] #trends .trend-score {
    max-width: calc(100% - 66px) !important;
    min-height: 24px !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 4px 8px !important;
    font-size: 0.56rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #trends .trend-card-head .ghost-button,
  body[data-theme] #trends .trend-card-head .ghost-button,
  html.native-layout-guard #trends .trend-card-head .ghost-button,
  html.native-layout-guard body[data-theme] #trends .trend-card-head .ghost-button {
    flex: 0 0 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 0.58rem !important;
  }

  #trends .trend-card h3,
  body[data-theme] #trends .trend-card h3,
  html.native-layout-guard #trends .trend-card h3,
  html.native-layout-guard body[data-theme] #trends .trend-card h3 {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #fbf6ea !important;
    font-size: 0.92rem !important;
    line-height: 1.08 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  #trends .trend-card p,
  body[data-theme] #trends .trend-card p,
  html.native-layout-guard #trends .trend-card p,
  html.native-layout-guard body[data-theme] #trends .trend-card p {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: rgba(251, 246, 234, 0.74) !important;
    font-size: 0.68rem !important;
    line-height: 1.28 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  #trends .trend-card-meta,
  #trends .trend-card .pill-row,
  body[data-theme] #trends .trend-card-meta,
  body[data-theme] #trends .trend-card .pill-row,
  html.native-layout-guard #trends .trend-card-meta,
  html.native-layout-guard #trends .trend-card .pill-row,
  html.native-layout-guard body[data-theme] #trends .trend-card-meta,
  html.native-layout-guard body[data-theme] #trends .trend-card .pill-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #trends .trend-card-meta span,
  #trends .trend-card .pill,
  body[data-theme] #trends .trend-card-meta span,
  body[data-theme] #trends .trend-card .pill,
  html.native-layout-guard #trends .trend-card-meta span,
  html.native-layout-guard #trends .trend-card .pill,
  html.native-layout-guard body[data-theme] #trends .trend-card-meta span,
  html.native-layout-guard body[data-theme] #trends .trend-card .pill {
    min-height: 22px !important;
    max-width: 100% !important;
    padding: 3px 7px !important;
    font-size: 0.52rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #trends .trend-card-meta span:nth-child(n + 3),
  #trends .trend-card .pill:nth-child(n + 4),
  body[data-theme] #trends .trend-card-meta span:nth-child(n + 3),
  body[data-theme] #trends .trend-card .pill:nth-child(n + 4),
  html.native-layout-guard #trends .trend-card-meta span:nth-child(n + 3),
  html.native-layout-guard #trends .trend-card .pill:nth-child(n + 4),
  html.native-layout-guard body[data-theme] #trends .trend-card-meta span:nth-child(n + 3),
  html.native-layout-guard body[data-theme] #trends .trend-card .pill:nth-child(n + 4) {
    display: none !important;
  }
}

/* v482-studio-first-screen-polish: keep the first score card readable on mobile. */
@media (max-width: 900px) {
  #studio .score-wrap,
  body[data-theme] #studio .score-wrap,
  html.native-layout-guard #studio .score-wrap,
  html.native-layout-guard body[data-theme] #studio .score-wrap {
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 104px !important;
    height: auto !important;
    padding: 13px 14px !important;
    overflow: hidden !important;
  }

  #studio .score-ring,
  body[data-theme] #studio .score-ring,
  html.native-layout-guard #studio .score-ring,
  html.native-layout-guard body[data-theme] #studio .score-ring {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    border-radius: 18px !important;
  }

  #studio .score-ring strong,
  body[data-theme] #studio .score-ring strong,
  html.native-layout-guard #studio .score-ring strong,
  html.native-layout-guard body[data-theme] #studio .score-ring strong {
    font-size: 1.12rem !important;
    line-height: 1 !important;
  }

  #studio .score-ring span,
  body[data-theme] #studio .score-ring span,
  html.native-layout-guard #studio .score-ring span,
  html.native-layout-guard body[data-theme] #studio .score-ring span {
    font-size: 0.62rem !important;
    line-height: 1 !important;
  }

  #studio .score-wrap > div:last-child,
  body[data-theme] #studio .score-wrap > div:last-child,
  html.native-layout-guard #studio .score-wrap > div:last-child,
  html.native-layout-guard body[data-theme] #studio .score-wrap > div:last-child {
    min-width: 0 !important;
    align-self: center !important;
    overflow: hidden !important;
  }

  #studio #scoreTitle,
  body[data-theme] #studio #scoreTitle,
  html.native-layout-guard #studio #scoreTitle,
  html.native-layout-guard body[data-theme] #studio #scoreTitle {
    display: -webkit-box !important;
    margin: 0 0 3px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: 1.05rem !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  #studio #scoreText,
  body[data-theme] #studio #scoreText,
  html.native-layout-guard #studio #scoreText,
  html.native-layout-guard body[data-theme] #studio #scoreText {
    display: -webkit-box !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: rgba(245, 241, 232, 0.68) !important;
    font-size: 0.76rem !important;
    line-height: 1.22 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
  }

  #studio #visionConfidence,
  body[data-theme] #studio #visionConfidence,
  html.native-layout-guard #studio #visionConfidence,
  html.native-layout-guard body[data-theme] #studio #visionConfidence {
    min-height: 30px !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* v483-mobile-collapsed-panel-compact: collapsed panels must be compact headers, not empty cards. */
@media (max-width: 900px) {
  main .mobile-collapsible.is-collapsed,
  body[data-theme] main .mobile-collapsible.is-collapsed,
  html.native-layout-guard main .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 76px !important;
    overflow: hidden !important;
    padding: 10px 12px !important;
    gap: 0 !important;
    border-radius: 16px !important;
  }

  main .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  html.native-layout-guard main .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  main .mobile-collapsible.is-collapsed > :is(.panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head),
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  main .mobile-collapsible.is-collapsed > .mobile-collapse-head > :first-child,
  body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head > :first-child,
  html.native-layout-guard main .mobile-collapsible.is-collapsed > .mobile-collapse-head > :first-child,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head > :first-child {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(.eyebrow, h2, h3, h4, p),
  body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(.eyebrow, h2, h3, h4, p),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(.eyebrow, h2, h3, h4, p),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(.eyebrow, h2, h3, h4, p) {
    max-width: 100% !important;
    overflow: hidden !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(h2, h3, h4),
  body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(h2, h3, h4),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(h2, h3, h4),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(h2, h3, h4) {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.05 !important;
  }

  main .mobile-collapsible.is-collapsed > .mobile-collapse-head .eyebrow,
  body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head .eyebrow,
  html.native-layout-guard main .mobile-collapsible.is-collapsed > .mobile-collapse-head .eyebrow,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head .eyebrow {
    margin: 0 0 2px !important;
    font-size: 0.58rem !important;
    line-height: 1 !important;
  }

  main .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  body[data-theme] main .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard main .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed .mobile-collapse-toggle {
    grid-column: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  main .mobile-collapsible.is-collapsed > :not(.mobile-collapse-head):not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head):not(.catalog-audit-head):not(.watchlist-head),
  body[data-theme] main .mobile-collapsible.is-collapsed > :not(.mobile-collapse-head):not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head):not(.catalog-audit-head):not(.watchlist-head),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :not(.mobile-collapse-head):not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head):not(.catalog-audit-head):not(.watchlist-head),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :not(.mobile-collapse-head):not(.panel-head):not(.vision-head):not(.repair-head):not(.expert-critique-head):not(.catalog-audit-head):not(.watchlist-head) {
    display: none !important;
  }
}

/* v484-mobile-collapsed-panel-natural-height: no clipped headings or stray actions in collapsed panels. */
@media (max-width: 900px) {
  main .mobile-collapsible.is-collapsed,
  body[data-theme] main .mobile-collapsible.is-collapsed,
  html.native-layout-guard main .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed {
    max-height: none !important;
    overflow: visible !important;
    padding: 9px 12px !important;
  }

  main .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  html.native-layout-guard main .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 50px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  main .mobile-collapsible.is-collapsed > .mobile-collapse-head > :not(:first-child):not(.mobile-collapse-toggle),
  body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head > :not(:first-child):not(.mobile-collapse-toggle),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > .mobile-collapse-head > :not(:first-child):not(.mobile-collapse-toggle),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head > :not(:first-child):not(.mobile-collapse-toggle) {
    display: none !important;
  }

  main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(.eyebrow, h2, h3, h4, p),
  body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(.eyebrow, h2, h3, h4, p),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(.eyebrow, h2, h3, h4, p),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(.eyebrow, h2, h3, h4, p) {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(h2, h3, h4),
  body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(h2, h3, h4),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(h2, h3, h4),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > .mobile-collapse-head :is(h2, h3, h4) {
    font-size: 0.96rem !important;
    line-height: 1.08 !important;
  }
}

/* v485-mobile-collapsed-head-width: keep every collapsed panel header readable. */
@media (max-width: 900px) {
  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head),
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) > :first-child,
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) > :first-child,
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) > :first-child,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) > :first-child {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) > :not(:first-child):not(.mobile-collapse-toggle),
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) > :not(:first-child):not(.mobile-collapse-toggle),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) > :not(:first-child):not(.mobile-collapse-toggle),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) > :not(:first-child):not(.mobile-collapse-toggle) {
    display: none !important;
  }

  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) :is(.eyebrow, h2, h3, h4, p),
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) :is(.eyebrow, h2, h3, h4, p),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) :is(.eyebrow, h2, h3, h4, p),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) :is(.eyebrow, h2, h3, h4, p) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* v486-brain-collapsed-rules-contrast: keep Brain's collapsed rules panel dark and readable. */
@media (max-width: 900px) {
  #brain .rules-panel.mobile-collapsible.is-collapsed,
  body[data-theme] #brain .rules-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard #brain .rules-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #brain .rules-panel.mobile-collapsible.is-collapsed {
    border: 1px solid rgba(245, 241, 232, 0.14) !important;
    background:
      linear-gradient(180deg, rgba(43, 48, 62, 0.96), rgba(22, 24, 31, 0.98)),
      #171a21 !important;
    color: #fffaf2 !important;
    box-shadow: none !important;
  }

  #brain .rules-panel.mobile-collapsible.is-collapsed > .panel-head,
  body[data-theme] #brain .rules-panel.mobile-collapsible.is-collapsed > .panel-head,
  html.native-layout-guard #brain .rules-panel.mobile-collapsible.is-collapsed > .panel-head,
  html.native-layout-guard body[data-theme] #brain .rules-panel.mobile-collapsible.is-collapsed > .panel-head {
    background: transparent !important;
    color: #fffaf2 !important;
  }

  #brain .rules-panel.mobile-collapsible.is-collapsed .eyebrow,
  body[data-theme] #brain .rules-panel.mobile-collapsible.is-collapsed .eyebrow,
  html.native-layout-guard #brain .rules-panel.mobile-collapsible.is-collapsed .eyebrow,
  html.native-layout-guard body[data-theme] #brain .rules-panel.mobile-collapsible.is-collapsed .eyebrow {
    color: #42d2ba !important;
  }

  #brain .rules-panel.mobile-collapsible.is-collapsed h3,
  body[data-theme] #brain .rules-panel.mobile-collapsible.is-collapsed h3,
  html.native-layout-guard #brain .rules-panel.mobile-collapsible.is-collapsed h3,
  html.native-layout-guard body[data-theme] #brain .rules-panel.mobile-collapsible.is-collapsed h3 {
    color: #fffaf2 !important;
  }

  #brain .rules-panel.mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  body[data-theme] #brain .rules-panel.mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard #brain .rules-panel.mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] #brain .rules-panel.mobile-collapsible.is-collapsed .mobile-collapse-toggle {
    border-color: rgba(245, 241, 232, 0.18) !important;
    background: rgba(245, 241, 232, 0.075) !important;
    color: #fffaf2 !important;
  }
}

/* v487-discover-decision-density: make product discovery a quick decision screen on mobile. */
@media (max-width: 900px) {
  #discover > .section-head,
  body[data-theme] #discover > .section-head,
  html.native-layout-guard #discover > .section-head,
  html.native-layout-guard body[data-theme] #discover > .section-head {
    gap: 10px !important;
    padding: 12px !important;
  }

  #discover > .section-head h2,
  body[data-theme] #discover > .section-head h2,
  html.native-layout-guard #discover > .section-head h2,
  html.native-layout-guard body[data-theme] #discover > .section-head h2 {
    font-size: clamp(1.55rem, 8vw, 2.05rem) !important;
    line-height: 1.04 !important;
  }

  #discover > .section-head .section-actions,
  body[data-theme] #discover > .section-head .section-actions,
  html.native-layout-guard #discover > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #discover > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: minmax(124px, 1.5fr) minmax(74px, 0.8fr) minmax(74px, 0.8fr) !important;
    gap: 7px !important;
  }

  #discover > .section-head .section-actions .primary-button,
  body[data-theme] #discover > .section-head .section-actions .primary-button,
  html.native-layout-guard #discover > .section-head .section-actions .primary-button,
  html.native-layout-guard body[data-theme] #discover > .section-head .section-actions .primary-button {
    grid-column: auto !important;
    min-height: 44px !important;
    height: 44px !important;
  }

  #discover > .section-head .section-actions .ghost-button,
  body[data-theme] #discover > .section-head .section-actions .ghost-button,
  html.native-layout-guard #discover > .section-head .section-actions .ghost-button,
  html.native-layout-guard body[data-theme] #discover > .section-head .section-actions .ghost-button {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 8px !important;
    font-size: 0.84rem !important;
    white-space: nowrap !important;
  }

  #discover .discover-card,
  body[data-theme] #discover .discover-card,
  html.native-layout-guard #discover .discover-card,
  html.native-layout-guard body[data-theme] #discover .discover-card {
    border-radius: 18px !important;
  }

  #discover .discover-media,
  body[data-theme] #discover .discover-media,
  html.native-layout-guard #discover .discover-media,
  html.native-layout-guard body[data-theme] #discover .discover-media {
    height: clamp(124px, 34vw, 154px) !important;
  }

  #discover #discoverScore,
  body[data-theme] #discover #discoverScore,
  html.native-layout-guard #discover #discoverScore,
  html.native-layout-guard body[data-theme] #discover #discoverScore {
    top: 8px !important;
    right: 8px !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 0.86rem !important;
  }

  #discover #discoverScore::after,
  body[data-theme] #discover #discoverScore::after,
  html.native-layout-guard #discover #discoverScore::after,
  html.native-layout-guard body[data-theme] #discover #discoverScore::after {
    margin-top: -5px !important;
    font-size: 0.5rem !important;
  }

  #discover .discover-body,
  body[data-theme] #discover .discover-body,
  html.native-layout-guard #discover .discover-body,
  html.native-layout-guard body[data-theme] #discover .discover-body {
    gap: 7px !important;
    padding: 10px !important;
  }

  #discover .discover-body h3,
  body[data-theme] #discover .discover-body h3,
  html.native-layout-guard #discover .discover-body h3,
  html.native-layout-guard body[data-theme] #discover .discover-body h3 {
    font-size: 1rem !important;
    line-height: 1.08 !important;
  }

  #discover .discover-meta,
  body[data-theme] #discover .discover-meta,
  html.native-layout-guard #discover .discover-meta,
  html.native-layout-guard body[data-theme] #discover .discover-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #discover .discover-meta div,
  body[data-theme] #discover .discover-meta div,
  html.native-layout-guard #discover .discover-meta div,
  html.native-layout-guard body[data-theme] #discover .discover-meta div {
    padding: 6px 7px !important;
  }

  #discover .discover-meta strong,
  body[data-theme] #discover .discover-meta strong,
  html.native-layout-guard #discover .discover-meta strong,
  html.native-layout-guard body[data-theme] #discover .discover-meta strong {
    font-size: 0.76rem !important;
    line-height: 1.06 !important;
  }

  #discover .discover-meta span,
  body[data-theme] #discover .discover-meta span,
  html.native-layout-guard #discover .discover-meta span,
  html.native-layout-guard body[data-theme] #discover .discover-meta span {
    font-size: 0.54rem !important;
    line-height: 1.05 !important;
  }

  #discover .discover-product-link,
  body[data-theme] #discover .discover-product-link,
  html.native-layout-guard #discover .discover-product-link,
  html.native-layout-guard body[data-theme] #discover .discover-product-link {
    min-height: 42px !important;
    height: 42px !important;
  }

  #discover .discover-tags,
  body[data-theme] #discover .discover-tags,
  html.native-layout-guard #discover .discover-tags,
  html.native-layout-guard body[data-theme] #discover .discover-tags {
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #discover .discover-tags span,
  body[data-theme] #discover .discover-tags span,
  html.native-layout-guard #discover .discover-tags span,
  html.native-layout-guard body[data-theme] #discover .discover-tags span {
    min-height: 28px !important;
    max-width: 34% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #discover .discover-reasons p,
  body[data-theme] #discover .discover-reasons p,
  html.native-layout-guard #discover .discover-reasons p,
  html.native-layout-guard body[data-theme] #discover .discover-reasons p {
    padding: 6px 8px !important;
    font-size: 0.68rem !important;
  }
}

/* v488-discover-tag-legibility: compact Discover without clipping tag labels. */
@media (max-width: 900px) {
  #discover > .section-head h2,
  body[data-theme] #discover > .section-head h2,
  html.native-layout-guard #discover > .section-head h2,
  html.native-layout-guard body[data-theme] #discover > .section-head h2 {
    font-size: clamp(1.42rem, 7vw, 1.82rem) !important;
    line-height: 1.05 !important;
  }

  #discover .discover-tags,
  body[data-theme] #discover .discover-tags,
  html.native-layout-guard #discover .discover-tags,
  html.native-layout-guard body[data-theme] #discover .discover-tags {
    flex-wrap: wrap !important;
    overflow: visible !important;
    row-gap: 5px !important;
  }

  #discover .discover-tags span,
  body[data-theme] #discover .discover-tags span,
  html.native-layout-guard #discover .discover-tags span,
  html.native-layout-guard body[data-theme] #discover .discover-tags span {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 28px !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* v489-passport-first-screen-density: make Profil useful before the first scroll. */
@media (max-width: 900px) {
  #passport > .section-head,
  body[data-theme] #passport > .section-head,
  html.native-layout-guard #passport > .section-head,
  html.native-layout-guard body[data-theme] #passport > .section-head {
    gap: 9px !important;
    padding: 11px !important;
    border-radius: 18px !important;
  }

  #passport > .section-head .eyebrow,
  body[data-theme] #passport > .section-head .eyebrow,
  html.native-layout-guard #passport > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] #passport > .section-head .eyebrow {
    font-size: 0.68rem !important;
    line-height: 1 !important;
  }

  #passport > .section-head h2,
  body[data-theme] #passport > .section-head h2,
  html.native-layout-guard #passport > .section-head h2,
  html.native-layout-guard body[data-theme] #passport > .section-head h2 {
    font-size: clamp(1.45rem, 6.8vw, 1.86rem) !important;
    line-height: 1.04 !important;
  }

  #passport > .section-head .section-actions,
  body[data-theme] #passport > .section-head .section-actions,
  html.native-layout-guard #passport > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #passport > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #passport > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #passport > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #passport > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #passport > .section-head .section-actions :is(.primary-button, .ghost-button) {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 9px !important;
    border-radius: 14px !important;
    font-size: 0.86rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #passport .passport-layout,
  body[data-theme] #passport .passport-layout,
  html.native-layout-guard #passport .passport-layout,
  html.native-layout-guard body[data-theme] #passport .passport-layout {
    gap: 8px !important;
  }

  #passport .passport-panel.mobile-collapsible.is-collapsed,
  body[data-theme] #passport .passport-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard #passport .passport-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #passport .passport-panel.mobile-collapsible.is-collapsed {
    padding: 9px 10px !important;
    border-radius: 18px !important;
  }

  #passport .passport-panel.mobile-collapsible.is-collapsed > .panel-head,
  body[data-theme] #passport .passport-panel.mobile-collapsible.is-collapsed > .panel-head,
  html.native-layout-guard #passport .passport-panel.mobile-collapsible.is-collapsed > .panel-head,
  html.native-layout-guard body[data-theme] #passport .passport-panel.mobile-collapsible.is-collapsed > .panel-head {
    min-height: 46px !important;
    gap: 8px !important;
  }

  #passport .passport-panel.mobile-collapsible.is-collapsed h3,
  body[data-theme] #passport .passport-panel.mobile-collapsible.is-collapsed h3,
  html.native-layout-guard #passport .passport-panel.mobile-collapsible.is-collapsed h3,
  html.native-layout-guard body[data-theme] #passport .passport-panel.mobile-collapsible.is-collapsed h3 {
    font-size: 1.08rem !important;
    line-height: 1.08 !important;
  }

  #passport .passport-card-panel,
  body[data-theme] #passport .passport-card-panel,
  html.native-layout-guard #passport .passport-card-panel,
  html.native-layout-guard body[data-theme] #passport .passport-card-panel {
    padding: 8px !important;
    border-radius: 18px !important;
  }

  #passport .passport-card,
  body[data-theme] #passport .passport-card,
  html.native-layout-guard #passport .passport-card,
  html.native-layout-guard body[data-theme] #passport .passport-card {
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  #passport .passport-card-head,
  body[data-theme] #passport .passport-card-head,
  html.native-layout-guard #passport .passport-card-head,
  html.native-layout-guard body[data-theme] #passport .passport-card-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 54px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  #passport .passport-card-head h3,
  body[data-theme] #passport .passport-card-head h3,
  html.native-layout-guard #passport .passport-card-head h3,
  html.native-layout-guard body[data-theme] #passport .passport-card-head h3 {
    font-size: 1.18rem !important;
    line-height: 1.06 !important;
  }

  #passport #passportScore,
  body[data-theme] #passport #passportScore,
  html.native-layout-guard #passport #passportScore,
  html.native-layout-guard body[data-theme] #passport #passportScore {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    font-size: 1.08rem !important;
    border-width: 3px !important;
  }

  #passport .passport-metrics,
  body[data-theme] #passport .passport-metrics,
  html.native-layout-guard #passport .passport-metrics,
  html.native-layout-guard body[data-theme] #passport .passport-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #passport .passport-metrics div,
  body[data-theme] #passport .passport-metrics div,
  html.native-layout-guard #passport .passport-metrics div,
  html.native-layout-guard body[data-theme] #passport .passport-metrics div {
    min-height: 46px !important;
    padding: 7px 8px !important;
    border-radius: 12px !important;
  }

  #passport .passport-metrics strong,
  body[data-theme] #passport .passport-metrics strong,
  html.native-layout-guard #passport .passport-metrics strong,
  html.native-layout-guard body[data-theme] #passport .passport-metrics strong {
    font-size: 0.94rem !important;
    line-height: 1 !important;
  }

  #passport .passport-metrics span,
  body[data-theme] #passport .passport-metrics span,
  html.native-layout-guard #passport .passport-metrics span,
  html.native-layout-guard body[data-theme] #passport .passport-metrics span {
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
  }

  #passport .passport-dna,
  body[data-theme] #passport .passport-dna,
  html.native-layout-guard #passport .passport-dna,
  html.native-layout-guard body[data-theme] #passport .passport-dna,
  #passport .passport-reasons,
  body[data-theme] #passport .passport-reasons,
  html.native-layout-guard #passport .passport-reasons,
  html.native-layout-guard body[data-theme] #passport .passport-reasons {
    gap: 5px !important;
  }

  #passport .passport-dna-row,
  body[data-theme] #passport .passport-dna-row,
  html.native-layout-guard #passport .passport-dna-row,
  html.native-layout-guard body[data-theme] #passport .passport-dna-row {
    min-height: 42px !important;
    gap: 4px !important;
    padding: 7px 9px !important;
    border-radius: 13px !important;
  }

  #passport .passport-dna-row div:first-child,
  body[data-theme] #passport .passport-dna-row div:first-child,
  html.native-layout-guard #passport .passport-dna-row div:first-child,
  html.native-layout-guard body[data-theme] #passport .passport-dna-row div:first-child {
    display: flex !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  #passport .passport-dna-row strong,
  body[data-theme] #passport .passport-dna-row strong,
  html.native-layout-guard #passport .passport-dna-row strong,
  html.native-layout-guard body[data-theme] #passport .passport-dna-row strong,
  #passport .passport-dna-row span,
  body[data-theme] #passport .passport-dna-row span,
  html.native-layout-guard #passport .passport-dna-row span,
  html.native-layout-guard body[data-theme] #passport .passport-dna-row span {
    font-size: 0.84rem !important;
    line-height: 1.05 !important;
  }

  #passport .passport-dna-row strong,
  body[data-theme] #passport .passport-dna-row strong,
  html.native-layout-guard #passport .passport-dna-row strong,
  html.native-layout-guard body[data-theme] #passport .passport-dna-row strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #passport .passport-dna-bar,
  body[data-theme] #passport .passport-dna-bar,
  html.native-layout-guard #passport .passport-dna-bar,
  html.native-layout-guard body[data-theme] #passport .passport-dna-bar {
    height: 4px !important;
  }

  #passport .passport-reasons p,
  body[data-theme] #passport .passport-reasons p,
  html.native-layout-guard #passport .passport-reasons p,
  html.native-layout-guard body[data-theme] #passport .passport-reasons p {
    display: -webkit-box !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 7px 9px !important;
    border-radius: 13px !important;
    font-size: 0.72rem !important;
    line-height: 1.16 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
}

@media (max-width: 430px) {
  #passport > .section-head h2,
  body[data-theme] #passport > .section-head h2,
  html.native-layout-guard #passport > .section-head h2,
  html.native-layout-guard body[data-theme] #passport > .section-head h2 {
    font-size: 1.5rem !important;
  }

  #passport > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #passport > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #passport > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #passport > .section-head .section-actions :is(.primary-button, .ghost-button) {
    font-size: 0.8rem !important;
  }
}

/* v490-passport-dna-strip: keep the profile signal visible without a tall report card. */
@media (max-width: 900px) {
  #passport .passport-panel.mobile-collapsible.is-collapsed .eyebrow,
  body[data-theme] #passport .passport-panel.mobile-collapsible.is-collapsed .eyebrow,
  html.native-layout-guard #passport .passport-panel.mobile-collapsible.is-collapsed .eyebrow,
  html.native-layout-guard body[data-theme] #passport .passport-panel.mobile-collapsible.is-collapsed .eyebrow {
    display: none !important;
  }

  #passport .passport-panel.mobile-collapsible.is-collapsed,
  body[data-theme] #passport .passport-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard #passport .passport-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #passport .passport-panel.mobile-collapsible.is-collapsed {
    padding: 8px 10px !important;
  }

  #passport .passport-panel.mobile-collapsible.is-collapsed h3,
  body[data-theme] #passport .passport-panel.mobile-collapsible.is-collapsed h3,
  html.native-layout-guard #passport .passport-panel.mobile-collapsible.is-collapsed h3,
  html.native-layout-guard body[data-theme] #passport .passport-panel.mobile-collapsible.is-collapsed h3 {
    font-size: 0.98rem !important;
    line-height: 1.05 !important;
  }

  #passport .passport-card,
  body[data-theme] #passport .passport-card,
  html.native-layout-guard #passport .passport-card,
  html.native-layout-guard body[data-theme] #passport .passport-card {
    gap: 7px !important;
  }

  #passport .passport-card-head,
  body[data-theme] #passport .passport-card-head,
  html.native-layout-guard #passport .passport-card-head,
  html.native-layout-guard body[data-theme] #passport .passport-card-head {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }

  #passport .passport-card-head h3,
  body[data-theme] #passport .passport-card-head h3,
  html.native-layout-guard #passport .passport-card-head h3,
  html.native-layout-guard body[data-theme] #passport .passport-card-head h3 {
    font-size: 1.08rem !important;
  }

  #passport #passportScore,
  body[data-theme] #passport #passportScore,
  html.native-layout-guard #passport #passportScore,
  html.native-layout-guard body[data-theme] #passport #passportScore {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 0.98rem !important;
  }

  #passport .passport-metrics,
  body[data-theme] #passport .passport-metrics,
  html.native-layout-guard #passport .passport-metrics,
  html.native-layout-guard body[data-theme] #passport .passport-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #passport .passport-metrics div,
  body[data-theme] #passport .passport-metrics div,
  html.native-layout-guard #passport .passport-metrics div,
  html.native-layout-guard body[data-theme] #passport .passport-metrics div {
    min-height: 48px !important;
    padding: 6px 5px !important;
  }

  #passport .passport-metrics strong,
  body[data-theme] #passport .passport-metrics strong,
  html.native-layout-guard #passport .passport-metrics strong,
  html.native-layout-guard body[data-theme] #passport .passport-metrics strong {
    font-size: 0.84rem !important;
  }

  #passport .passport-metrics span,
  body[data-theme] #passport .passport-metrics span,
  html.native-layout-guard #passport .passport-metrics span,
  html.native-layout-guard body[data-theme] #passport .passport-metrics span {
    font-size: 0.52rem !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  #passport .passport-dna,
  body[data-theme] #passport .passport-dna,
  html.native-layout-guard #passport .passport-dna,
  html.native-layout-guard body[data-theme] #passport .passport-dna {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #passport .passport-dna-row,
  body[data-theme] #passport .passport-dna-row,
  html.native-layout-guard #passport .passport-dna-row,
  html.native-layout-guard body[data-theme] #passport .passport-dna-row {
    display: flex !important;
    min-height: 50px !important;
    justify-content: center !important;
    padding: 6px 7px !important;
  }

  #passport .passport-dna-row div:first-child,
  body[data-theme] #passport .passport-dna-row div:first-child,
  html.native-layout-guard #passport .passport-dna-row div:first-child,
  html.native-layout-guard body[data-theme] #passport .passport-dna-row div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  #passport .passport-dna-row strong,
  body[data-theme] #passport .passport-dna-row strong,
  html.native-layout-guard #passport .passport-dna-row strong,
  html.native-layout-guard body[data-theme] #passport .passport-dna-row strong,
  #passport .passport-dna-row span,
  body[data-theme] #passport .passport-dna-row span,
  html.native-layout-guard #passport .passport-dna-row span,
  html.native-layout-guard body[data-theme] #passport .passport-dna-row span {
    font-size: 0.68rem !important;
    line-height: 1.06 !important;
  }

  #passport .passport-dna-bar,
  body[data-theme] #passport .passport-dna-bar,
  html.native-layout-guard #passport .passport-dna-bar,
  html.native-layout-guard body[data-theme] #passport .passport-dna-bar {
    display: none !important;
  }
}

/* v491-size-passport-mobile-head: prevent vertical title wrapping beside size actions. */
@media (max-width: 900px) {
  #passport .size-passport-panel.mobile-collapsible > .panel-head,
  body[data-theme] #passport .size-passport-panel.mobile-collapsible > .panel-head,
  html.native-layout-guard #passport .size-passport-panel.mobile-collapsible > .panel-head,
  html.native-layout-guard body[data-theme] #passport .size-passport-panel.mobile-collapsible > .panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  #passport .size-passport-panel.mobile-collapsible > .panel-head > :first-child,
  body[data-theme] #passport .size-passport-panel.mobile-collapsible > .panel-head > :first-child,
  html.native-layout-guard #passport .size-passport-panel.mobile-collapsible > .panel-head > :first-child,
  html.native-layout-guard body[data-theme] #passport .size-passport-panel.mobile-collapsible > .panel-head > :first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #passport .size-passport-panel.mobile-collapsible > .panel-head > .mobile-collapse-toggle,
  body[data-theme] #passport .size-passport-panel.mobile-collapsible > .panel-head > .mobile-collapse-toggle,
  html.native-layout-guard #passport .size-passport-panel.mobile-collapsible > .panel-head > .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] #passport .size-passport-panel.mobile-collapsible > .panel-head > .mobile-collapse-toggle {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #passport .size-passport-panel.mobile-collapsible > .panel-head > .panel-actions,
  body[data-theme] #passport .size-passport-panel.mobile-collapsible > .panel-head > .panel-actions,
  html.native-layout-guard #passport .size-passport-panel.mobile-collapsible > .panel-head > .panel-actions,
  html.native-layout-guard body[data-theme] #passport .size-passport-panel.mobile-collapsible > .panel-head > .panel-actions {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  #passport .size-passport-panel.mobile-collapsible.is-collapsed > .panel-head > .panel-actions,
  body[data-theme] #passport .size-passport-panel.mobile-collapsible.is-collapsed > .panel-head > .panel-actions,
  html.native-layout-guard #passport .size-passport-panel.mobile-collapsible.is-collapsed > .panel-head > .panel-actions,
  html.native-layout-guard body[data-theme] #passport .size-passport-panel.mobile-collapsible.is-collapsed > .panel-head > .panel-actions {
    display: none !important;
  }

  #passport .size-passport-panel.mobile-collapsible.is-collapsed .eyebrow,
  body[data-theme] #passport .size-passport-panel.mobile-collapsible.is-collapsed .eyebrow,
  html.native-layout-guard #passport .size-passport-panel.mobile-collapsible.is-collapsed .eyebrow,
  html.native-layout-guard body[data-theme] #passport .size-passport-panel.mobile-collapsible.is-collapsed .eyebrow {
    display: none !important;
  }

  #passport .size-passport-panel.mobile-collapsible h3,
  body[data-theme] #passport .size-passport-panel.mobile-collapsible h3,
  html.native-layout-guard #passport .size-passport-panel.mobile-collapsible h3,
  html.native-layout-guard body[data-theme] #passport .size-passport-panel.mobile-collapsible h3 {
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #passport .size-passport-panel.mobile-collapsible.is-collapsed h3,
  body[data-theme] #passport .size-passport-panel.mobile-collapsible.is-collapsed h3,
  html.native-layout-guard #passport .size-passport-panel.mobile-collapsible.is-collapsed h3,
  html.native-layout-guard body[data-theme] #passport .size-passport-panel.mobile-collapsible.is-collapsed h3 {
    font-size: 1rem !important;
    line-height: 1.08 !important;
  }
}

/* v492-capsule-first-screen-density: make Kapsula a fast mobile decision screen. */
@media (max-width: 900px) {
  #capsule > .section-head,
  body[data-theme] #capsule > .section-head,
  html.native-layout-guard #capsule > .section-head,
  html.native-layout-guard body[data-theme] #capsule > .section-head {
    gap: 9px !important;
    padding: 11px !important;
    border-radius: 18px !important;
  }

  #capsule > .section-head h2,
  body[data-theme] #capsule > .section-head h2,
  html.native-layout-guard #capsule > .section-head h2,
  html.native-layout-guard body[data-theme] #capsule > .section-head h2 {
    font-size: clamp(1.46rem, 6.8vw, 1.84rem) !important;
    line-height: 1.04 !important;
  }

  #capsule > .section-head .section-actions,
  body[data-theme] #capsule > .section-head .section-actions,
  html.native-layout-guard #capsule > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #capsule > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: minmax(120px, 1.2fr) minmax(108px, 1fr) minmax(96px, 0.9fr) !important;
    gap: 7px !important;
  }

  #capsule > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #capsule > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #capsule > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #capsule > .section-head .section-actions :is(.primary-button, .ghost-button) {
    grid-column: auto !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 7px !important;
    border-radius: 14px !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #capsule > .section-head .section-actions .primary-button,
  body[data-theme] #capsule > .section-head .section-actions .primary-button,
  html.native-layout-guard #capsule > .section-head .section-actions .primary-button,
  html.native-layout-guard body[data-theme] #capsule > .section-head .section-actions .primary-button {
    font-size: 0.82rem !important;
  }

  #capsule .capsule-layout,
  body[data-theme] #capsule .capsule-layout,
  html.native-layout-guard #capsule .capsule-layout,
  html.native-layout-guard body[data-theme] #capsule .capsule-layout {
    display: grid !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    justify-content: stretch !important;
    gap: 8px !important;
  }

  #capsule .mobile-collapsible,
  body[data-theme] #capsule .mobile-collapsible,
  html.native-layout-guard #capsule .mobile-collapsible,
  html.native-layout-guard body[data-theme] #capsule .mobile-collapsible,
  #capsule .mobile-collapsible.is-collapsed,
  body[data-theme] #capsule .mobile-collapsible.is-collapsed,
  html.native-layout-guard #capsule .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #capsule .mobile-collapsible.is-collapsed {
    margin-bottom: 0 !important;
  }

  #capsule .capsule-board-panel,
  body[data-theme] #capsule .capsule-board-panel,
  html.native-layout-guard #capsule .capsule-board-panel,
  html.native-layout-guard body[data-theme] #capsule .capsule-board-panel {
    padding: 8px !important;
    border-radius: 18px !important;
  }

  #capsule .capsule-board,
  body[data-theme] #capsule .capsule-board,
  html.native-layout-guard #capsule .capsule-board,
  html.native-layout-guard body[data-theme] #capsule .capsule-board {
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  #capsule .capsule-board-head,
  body[data-theme] #capsule .capsule-board-head,
  html.native-layout-guard #capsule .capsule-board-head,
  html.native-layout-guard body[data-theme] #capsule .capsule-board-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  #capsule .capsule-board-head h3,
  body[data-theme] #capsule .capsule-board-head h3,
  html.native-layout-guard #capsule .capsule-board-head h3,
  html.native-layout-guard body[data-theme] #capsule .capsule-board-head h3 {
    font-size: 1.08rem !important;
    line-height: 1.06 !important;
  }

  #capsule #capsuleScore,
  body[data-theme] #capsule #capsuleScore,
  html.native-layout-guard #capsule #capsuleScore,
  html.native-layout-guard body[data-theme] #capsule #capsuleScore {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 0.98rem !important;
  }

  #capsule .capsule-metrics,
  body[data-theme] #capsule .capsule-metrics,
  html.native-layout-guard #capsule .capsule-metrics,
  html.native-layout-guard body[data-theme] #capsule .capsule-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #capsule .capsule-metrics div,
  body[data-theme] #capsule .capsule-metrics div,
  html.native-layout-guard #capsule .capsule-metrics div,
  html.native-layout-guard body[data-theme] #capsule .capsule-metrics div {
    min-height: 48px !important;
    padding: 6px 5px !important;
    border-radius: 12px !important;
  }

  #capsule .capsule-metrics strong,
  body[data-theme] #capsule .capsule-metrics strong,
  html.native-layout-guard #capsule .capsule-metrics strong,
  html.native-layout-guard body[data-theme] #capsule .capsule-metrics strong {
    font-size: 0.82rem !important;
    line-height: 1 !important;
  }

  #capsule .capsule-metrics span,
  body[data-theme] #capsule .capsule-metrics span,
  html.native-layout-guard #capsule .capsule-metrics span,
  html.native-layout-guard body[data-theme] #capsule .capsule-metrics span {
    font-size: 0.52rem !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  #capsule .capsule-items,
  body[data-theme] #capsule .capsule-items,
  html.native-layout-guard #capsule .capsule-items,
  html.native-layout-guard body[data-theme] #capsule .capsule-items {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  #capsule .capsule-item,
  body[data-theme] #capsule .capsule-item,
  html.native-layout-guard #capsule .capsule-item,
  html.native-layout-guard body[data-theme] #capsule .capsule-item {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 68px !important;
    min-height: 64px !important;
    gap: 7px !important;
    align-items: center !important;
    padding: 7px !important;
    border-radius: 13px !important;
  }

  #capsule .capsule-item img,
  body[data-theme] #capsule .capsule-item img,
  html.native-layout-guard #capsule .capsule-item img,
  html.native-layout-guard body[data-theme] #capsule .capsule-item img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }

  #capsule .capsule-item strong,
  body[data-theme] #capsule .capsule-item strong,
  html.native-layout-guard #capsule .capsule-item strong,
  html.native-layout-guard body[data-theme] #capsule .capsule-item strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.82rem !important;
    line-height: 1.08 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  #capsule .capsule-item > div > span,
  body[data-theme] #capsule .capsule-item > div > span,
  html.native-layout-guard #capsule .capsule-item > div > span,
  html.native-layout-guard body[data-theme] #capsule .capsule-item > div > span {
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
  }

  #capsule .capsule-tags,
  body[data-theme] #capsule .capsule-tags,
  html.native-layout-guard #capsule .capsule-tags,
  html.native-layout-guard body[data-theme] #capsule .capsule-tags {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin-top: 3px !important;
    overflow: hidden !important;
  }

  #capsule .capsule-tags span,
  body[data-theme] #capsule .capsule-tags span,
  html.native-layout-guard #capsule .capsule-tags span,
  html.native-layout-guard body[data-theme] #capsule .capsule-tags span {
    max-width: 50% !important;
    overflow: hidden !important;
    padding: 3px 5px !important;
    font-size: 0.5rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #capsule .capsule-tags span:nth-child(2):not(:last-child),
  body[data-theme] #capsule .capsule-tags span:nth-child(2):not(:last-child),
  html.native-layout-guard #capsule .capsule-tags span:nth-child(2):not(:last-child),
  html.native-layout-guard body[data-theme] #capsule .capsule-tags span:nth-child(2):not(:last-child) {
    display: none !important;
  }

  #capsule .capsule-item .mini-product-link,
  body[data-theme] #capsule .capsule-item .mini-product-link,
  html.native-layout-guard #capsule .capsule-item .mini-product-link,
  html.native-layout-guard body[data-theme] #capsule .capsule-item .mini-product-link {
    min-width: 0 !important;
    width: 68px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    font-size: 0.64rem !important;
    line-height: 1 !important;
  }
}

/* v493-inventory-first-screen-density: make Szafa a short scan list on mobile. */
@media (max-width: 900px) {
  #inventory > .section-head,
  body[data-theme] #inventory > .section-head,
  html.native-layout-guard #inventory > .section-head,
  html.native-layout-guard body[data-theme] #inventory > .section-head {
    gap: 8px !important;
    padding: 11px !important;
    border-radius: 18px !important;
  }

  #inventory > .section-head h2,
  body[data-theme] #inventory > .section-head h2,
  html.native-layout-guard #inventory > .section-head h2,
  html.native-layout-guard body[data-theme] #inventory > .section-head h2 {
    font-size: clamp(1.46rem, 6.8vw, 1.82rem) !important;
    line-height: 1.04 !important;
  }

  #inventory > .section-head .section-actions,
  body[data-theme] #inventory > .section-head .section-actions,
  html.native-layout-guard #inventory > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #inventory > .section-head .section-actions {
    gap: 7px !important;
  }

  #inventory .segmented,
  body[data-theme] #inventory .segmented,
  html.native-layout-guard #inventory .segmented,
  html.native-layout-guard body[data-theme] #inventory .segmented,
  #inventory .csv-actions,
  body[data-theme] #inventory .csv-actions,
  html.native-layout-guard #inventory .csv-actions,
  html.native-layout-guard body[data-theme] #inventory .csv-actions {
    gap: 6px !important;
  }

  #inventory .segmented button,
  body[data-theme] #inventory .segmented button,
  html.native-layout-guard #inventory .segmented button,
  html.native-layout-guard body[data-theme] #inventory .segmented button,
  #inventory .csv-actions :is(button, .import-button),
  body[data-theme] #inventory .csv-actions :is(button, .import-button),
  html.native-layout-guard #inventory .csv-actions :is(button, .import-button),
  html.native-layout-guard body[data-theme] #inventory .csv-actions :is(button, .import-button) {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 8px !important;
    border-radius: 13px !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #inventory .inventory-grid,
  body[data-theme] #inventory .inventory-grid,
  html.native-layout-guard #inventory .inventory-grid,
  html.native-layout-guard body[data-theme] #inventory .inventory-grid {
    gap: 6px !important;
  }

  #inventory .inventory-grid.mobile-list-collapsed .item-card:nth-of-type(n + 4),
  body[data-theme] #inventory .inventory-grid.mobile-list-collapsed .item-card:nth-of-type(n + 4),
  html.native-layout-guard #inventory .inventory-grid.mobile-list-collapsed .item-card:nth-of-type(n + 4),
  html.native-layout-guard body[data-theme] #inventory .inventory-grid.mobile-list-collapsed .item-card:nth-of-type(n + 4) {
    display: none !important;
  }

  #inventory .item-card,
  body[data-theme] #inventory .item-card,
  html.native-layout-guard #inventory .item-card,
  html.native-layout-guard body[data-theme] #inventory .item-card {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    min-height: 64px !important;
    gap: 7px !important;
    align-items: center !important;
    padding: 6px !important;
    border-radius: 13px !important;
  }

  #inventory .item-card > img,
  body[data-theme] #inventory .item-card > img,
  html.native-layout-guard #inventory .item-card > img,
  html.native-layout-guard body[data-theme] #inventory .item-card > img {
    width: 42px !important;
    min-width: 42px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    border-radius: 10px !important;
  }

  #inventory .item-body,
  body[data-theme] #inventory .item-body,
  html.native-layout-guard #inventory .item-body,
  html.native-layout-guard body[data-theme] #inventory .item-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 64px !important;
    grid-template-areas:
      "title price"
      "meta action"
      "tags action" !important;
    column-gap: 7px !important;
    row-gap: 2px !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  #inventory .item-body h3,
  body[data-theme] #inventory .item-body h3,
  html.native-layout-guard #inventory .item-body h3,
  html.native-layout-guard body[data-theme] #inventory .item-body h3 {
    grid-area: title !important;
    display: block !important;
    overflow: hidden !important;
    max-width: 100% !important;
    font-size: 0.76rem !important;
    line-height: 1.06 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #inventory .item-meta,
  body[data-theme] #inventory .item-meta,
  html.native-layout-guard #inventory .item-meta,
  html.native-layout-guard body[data-theme] #inventory .item-meta {
    display: contents !important;
  }

  #inventory .source-badge,
  body[data-theme] #inventory .source-badge,
  html.native-layout-guard #inventory .source-badge,
  html.native-layout-guard body[data-theme] #inventory .source-badge {
    grid-area: meta !important;
    justify-self: start !important;
    min-height: 18px !important;
    padding: 2px 6px !important;
    font-size: 0.5rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #inventory .item-meta .price,
  body[data-theme] #inventory .item-meta .price,
  html.native-layout-guard #inventory .item-meta .price,
  html.native-layout-guard body[data-theme] #inventory .item-meta .price {
    grid-area: price !important;
    justify-self: end !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #inventory .stock-line,
  #inventory .brand-pill,
  #inventory .watch-button,
  body[data-theme] #inventory .stock-line,
  body[data-theme] #inventory .brand-pill,
  body[data-theme] #inventory .watch-button,
  html.native-layout-guard #inventory .stock-line,
  html.native-layout-guard #inventory .brand-pill,
  html.native-layout-guard #inventory .watch-button,
  html.native-layout-guard body[data-theme] #inventory .stock-line,
  html.native-layout-guard body[data-theme] #inventory .brand-pill,
  html.native-layout-guard body[data-theme] #inventory .watch-button {
    display: none !important;
  }

  #inventory .pill-row,
  body[data-theme] #inventory .pill-row,
  html.native-layout-guard #inventory .pill-row,
  html.native-layout-guard body[data-theme] #inventory .pill-row {
    grid-area: tags !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    max-height: 18px !important;
    overflow: hidden !important;
  }

  #inventory .pill-row .pill:nth-of-type(n + 3),
  body[data-theme] #inventory .pill-row .pill:nth-of-type(n + 3),
  html.native-layout-guard #inventory .pill-row .pill:nth-of-type(n + 3),
  html.native-layout-guard body[data-theme] #inventory .pill-row .pill:nth-of-type(n + 3) {
    display: none !important;
  }

  #inventory .pill,
  body[data-theme] #inventory .pill,
  html.native-layout-guard #inventory .pill,
  html.native-layout-guard body[data-theme] #inventory .pill {
    min-height: 18px !important;
    max-width: 50% !important;
    overflow: hidden !important;
    padding: 2px 6px !important;
    font-size: 0.5rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #inventory .product-link,
  body[data-theme] #inventory .product-link,
  html.native-layout-guard #inventory .product-link,
  html.native-layout-guard body[data-theme] #inventory .product-link {
    grid-area: action !important;
    justify-self: end !important;
    min-width: 64px !important;
    width: 64px !important;
    min-height: 42px !important;
    margin-top: 0 !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    font-size: 0.58rem !important;
    line-height: 1 !important;
  }

  #inventoryMobileListToggle,
  body[data-theme] #inventoryMobileListToggle,
  html.native-layout-guard #inventoryMobileListToggle,
  html.native-layout-guard body[data-theme] #inventoryMobileListToggle {
    min-height: 44px !important;
    margin-top: 6px !important;
    border-radius: 14px !important;
    font-size: 0.82rem !important;
  }
}

/* v494-planner-first-screen-density: keep the daily plan readable without report-length rows. */
@media (max-width: 900px) {
  #planner > .section-head,
  body[data-theme] #planner > .section-head,
  html.native-layout-guard #planner > .section-head,
  html.native-layout-guard body[data-theme] #planner > .section-head {
    gap: 9px !important;
    padding: 11px !important;
    border-radius: 18px !important;
  }

  #planner > .section-head h2,
  body[data-theme] #planner > .section-head h2,
  html.native-layout-guard #planner > .section-head h2,
  html.native-layout-guard body[data-theme] #planner > .section-head h2 {
    font-size: clamp(1.44rem, 6.8vw, 1.82rem) !important;
    line-height: 1.04 !important;
  }

  #planner > .section-head .section-actions,
  body[data-theme] #planner > .section-head .section-actions,
  html.native-layout-guard #planner > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #planner > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  #planner > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #planner > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #planner > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #planner > .section-head .section-actions :is(.primary-button, .ghost-button) {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 8px !important;
    border-radius: 14px !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #planner .planner-layout,
  body[data-theme] #planner .planner-layout,
  html.native-layout-guard #planner .planner-layout,
  html.native-layout-guard body[data-theme] #planner .planner-layout {
    gap: 8px !important;
  }

  #planner .planner-result-panel,
  body[data-theme] #planner .planner-result-panel,
  html.native-layout-guard #planner .planner-result-panel,
  html.native-layout-guard body[data-theme] #planner .planner-result-panel {
    padding: 8px !important;
    border-radius: 18px !important;
  }

  #planner .planner-ticket,
  body[data-theme] #planner .planner-ticket,
  html.native-layout-guard #planner .planner-ticket,
  html.native-layout-guard body[data-theme] #planner .planner-ticket {
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  #planner .planner-ticket-head,
  body[data-theme] #planner .planner-ticket-head,
  html.native-layout-guard #planner .planner-ticket-head,
  html.native-layout-guard body[data-theme] #planner .planner-ticket-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }

  #planner .planner-ticket-head h3,
  body[data-theme] #planner .planner-ticket-head h3,
  html.native-layout-guard #planner .planner-ticket-head h3,
  html.native-layout-guard body[data-theme] #planner .planner-ticket-head h3 {
    font-size: 1.08rem !important;
    line-height: 1.06 !important;
  }

  #planner #plannerScore,
  body[data-theme] #planner #plannerScore,
  html.native-layout-guard #planner #plannerScore,
  html.native-layout-guard body[data-theme] #planner #plannerScore {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 0.98rem !important;
  }

  #planner .planner-metrics,
  body[data-theme] #planner .planner-metrics,
  html.native-layout-guard #planner .planner-metrics,
  html.native-layout-guard body[data-theme] #planner .planner-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #planner .planner-metrics div,
  body[data-theme] #planner .planner-metrics div,
  html.native-layout-guard #planner .planner-metrics div,
  html.native-layout-guard body[data-theme] #planner .planner-metrics div {
    min-height: 48px !important;
    padding: 6px 5px !important;
    border-radius: 12px !important;
  }

  #planner .planner-metrics strong,
  body[data-theme] #planner .planner-metrics strong,
  html.native-layout-guard #planner .planner-metrics strong,
  html.native-layout-guard body[data-theme] #planner .planner-metrics strong {
    font-size: 0.78rem !important;
    line-height: 1 !important;
  }

  #planner .planner-metrics span,
  body[data-theme] #planner .planner-metrics span,
  html.native-layout-guard #planner .planner-metrics span,
  html.native-layout-guard body[data-theme] #planner .planner-metrics span {
    font-size: 0.52rem !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  #planner .planner-outfit,
  body[data-theme] #planner .planner-outfit,
  html.native-layout-guard #planner .planner-outfit,
  html.native-layout-guard body[data-theme] #planner .planner-outfit {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  #planner .planner-slot,
  body[data-theme] #planner .planner-slot,
  html.native-layout-guard #planner .planner-slot,
  html.native-layout-guard body[data-theme] #planner .planner-slot {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 68px !important;
    min-height: 62px !important;
    gap: 7px !important;
    align-items: center !important;
    padding: 7px !important;
    border-radius: 13px !important;
  }

  #planner .planner-slot img,
  body[data-theme] #planner .planner-slot img,
  html.native-layout-guard #planner .planner-slot img,
  html.native-layout-guard body[data-theme] #planner .planner-slot img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }

  #planner .planner-slot strong,
  body[data-theme] #planner .planner-slot strong,
  html.native-layout-guard #planner .planner-slot strong,
  html.native-layout-guard body[data-theme] #planner .planner-slot strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.82rem !important;
    line-height: 1.08 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  #planner .planner-slot span,
  body[data-theme] #planner .planner-slot span,
  html.native-layout-guard #planner .planner-slot span,
  html.native-layout-guard body[data-theme] #planner .planner-slot span {
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
  }

  #planner .planner-slot-price,
  body[data-theme] #planner .planner-slot-price,
  html.native-layout-guard #planner .planner-slot-price,
  html.native-layout-guard body[data-theme] #planner .planner-slot-price {
    justify-self: end !important;
    min-width: 60px !important;
    padding: 7px 8px !important;
    border-radius: 999px !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #planner .planner-reasons p,
  body[data-theme] #planner .planner-reasons p,
  html.native-layout-guard #planner .planner-reasons p,
  html.native-layout-guard body[data-theme] #planner .planner-reasons p {
    display: -webkit-box !important;
    overflow: hidden !important;
    padding: 7px 9px !important;
    font-size: 0.72rem !important;
    line-height: 1.16 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* v495-coach-first-screen-density: keep stylist guidance concise on the phone. */
@media (max-width: 900px) {
  #coach > .section-head,
  body[data-theme] #coach > .section-head,
  html.native-layout-guard #coach > .section-head,
  html.native-layout-guard body[data-theme] #coach > .section-head {
    gap: 9px !important;
    padding: 11px !important;
    border-radius: 18px !important;
  }

  #coach > .section-head h2,
  body[data-theme] #coach > .section-head h2,
  html.native-layout-guard #coach > .section-head h2,
  html.native-layout-guard body[data-theme] #coach > .section-head h2 {
    font-size: clamp(1.44rem, 6.8vw, 1.82rem) !important;
    line-height: 1.04 !important;
  }

  #coach > .section-head .section-actions,
  body[data-theme] #coach > .section-head .section-actions,
  html.native-layout-guard #coach > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #coach > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: minmax(106px, 1.05fr) minmax(104px, 1fr) minmax(104px, 1fr) !important;
    gap: 7px !important;
  }

  #coach > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #coach > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #coach > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #coach > .section-head .section-actions :is(.primary-button, .ghost-button) {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 7px !important;
    border-radius: 14px !important;
    font-size: 0.76rem !important;
    line-height: 1.03 !important;
    white-space: normal !important;
  }

  #coach .coach-layout,
  body[data-theme] #coach .coach-layout,
  html.native-layout-guard #coach .coach-layout,
  html.native-layout-guard body[data-theme] #coach .coach-layout {
    gap: 8px !important;
  }

  #coach .coach-answer-panel,
  body[data-theme] #coach .coach-answer-panel,
  html.native-layout-guard #coach .coach-answer-panel,
  html.native-layout-guard body[data-theme] #coach .coach-answer-panel {
    padding: 8px !important;
    border-radius: 18px !important;
  }

  #coach .coach-answer,
  body[data-theme] #coach .coach-answer,
  html.native-layout-guard #coach .coach-answer,
  html.native-layout-guard body[data-theme] #coach .coach-answer {
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  #coach .coach-answer-head,
  body[data-theme] #coach .coach-answer-head,
  html.native-layout-guard #coach .coach-answer-head,
  html.native-layout-guard body[data-theme] #coach .coach-answer-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }

  #coach .coach-answer-head h3,
  body[data-theme] #coach .coach-answer-head h3,
  html.native-layout-guard #coach .coach-answer-head h3,
  html.native-layout-guard body[data-theme] #coach .coach-answer-head h3 {
    font-size: 1.08rem !important;
    line-height: 1.06 !important;
  }

  #coach #coachScore,
  body[data-theme] #coach #coachScore,
  html.native-layout-guard #coach #coachScore,
  html.native-layout-guard body[data-theme] #coach #coachScore {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 0.98rem !important;
  }

  #coach .coach-metrics,
  body[data-theme] #coach .coach-metrics,
  html.native-layout-guard #coach .coach-metrics,
  html.native-layout-guard body[data-theme] #coach .coach-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #coach .coach-metrics div,
  body[data-theme] #coach .coach-metrics div,
  html.native-layout-guard #coach .coach-metrics div,
  html.native-layout-guard body[data-theme] #coach .coach-metrics div {
    min-height: 48px !important;
    padding: 6px 5px !important;
    border-radius: 12px !important;
  }

  #coach .coach-metrics strong,
  body[data-theme] #coach .coach-metrics strong,
  html.native-layout-guard #coach .coach-metrics strong,
  html.native-layout-guard body[data-theme] #coach .coach-metrics strong {
    font-size: 0.78rem !important;
    line-height: 1 !important;
  }

  #coach .coach-metrics span,
  body[data-theme] #coach .coach-metrics span,
  html.native-layout-guard #coach .coach-metrics span,
  html.native-layout-guard body[data-theme] #coach .coach-metrics span {
    font-size: 0.52rem !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  #coach .coach-message,
  body[data-theme] #coach .coach-message,
  html.native-layout-guard #coach .coach-message,
  html.native-layout-guard body[data-theme] #coach .coach-message {
    gap: 5px !important;
  }

  #coach .coach-message p,
  body[data-theme] #coach .coach-message p,
  html.native-layout-guard #coach .coach-message p,
  html.native-layout-guard body[data-theme] #coach .coach-message p {
    display: -webkit-box !important;
    overflow: hidden !important;
    padding: 7px 9px !important;
    font-size: 0.72rem !important;
    line-height: 1.16 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  #coach .coach-message p:nth-of-type(n + 3),
  body[data-theme] #coach .coach-message p:nth-of-type(n + 3),
  html.native-layout-guard #coach .coach-message p:nth-of-type(n + 3),
  html.native-layout-guard body[data-theme] #coach .coach-message p:nth-of-type(n + 3) {
    display: none !important;
  }

  #coach .coach-items,
  body[data-theme] #coach .coach-items,
  html.native-layout-guard #coach .coach-items,
  html.native-layout-guard body[data-theme] #coach .coach-items {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  #coach .coach-item-card,
  body[data-theme] #coach .coach-item-card,
  html.native-layout-guard #coach .coach-item-card,
  html.native-layout-guard body[data-theme] #coach .coach-item-card {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 68px !important;
    min-height: 64px !important;
    gap: 7px !important;
    align-items: center !important;
    padding: 7px !important;
    border-radius: 13px !important;
  }

  #coach .coach-item-card img,
  body[data-theme] #coach .coach-item-card img,
  html.native-layout-guard #coach .coach-item-card img,
  html.native-layout-guard body[data-theme] #coach .coach-item-card img {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
  }

  #coach .coach-item-card strong,
  body[data-theme] #coach .coach-item-card strong,
  html.native-layout-guard #coach .coach-item-card strong,
  html.native-layout-guard body[data-theme] #coach .coach-item-card strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.82rem !important;
    line-height: 1.08 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  #coach .coach-item-card > div > span,
  body[data-theme] #coach .coach-item-card > div > span,
  html.native-layout-guard #coach .coach-item-card > div > span,
  html.native-layout-guard body[data-theme] #coach .coach-item-card > div > span {
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
  }

  #coach .coach-item-tags,
  body[data-theme] #coach .coach-item-tags,
  html.native-layout-guard #coach .coach-item-tags,
  html.native-layout-guard body[data-theme] #coach .coach-item-tags {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin-top: 3px !important;
    overflow: hidden !important;
  }

  #coach .coach-item-tags span,
  body[data-theme] #coach .coach-item-tags span,
  html.native-layout-guard #coach .coach-item-tags span,
  html.native-layout-guard body[data-theme] #coach .coach-item-tags span {
    max-width: 50% !important;
    overflow: hidden !important;
    padding: 3px 5px !important;
    font-size: 0.5rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #coach .coach-item-tags span:nth-child(n + 3),
  body[data-theme] #coach .coach-item-tags span:nth-child(n + 3),
  html.native-layout-guard #coach .coach-item-tags span:nth-child(n + 3),
  html.native-layout-guard body[data-theme] #coach .coach-item-tags span:nth-child(n + 3) {
    display: none !important;
  }

  #coach .coach-item-card .mini-product-link,
  body[data-theme] #coach .coach-item-card .mini-product-link,
  html.native-layout-guard #coach .coach-item-card .mini-product-link,
  html.native-layout-guard body[data-theme] #coach .coach-item-card .mini-product-link {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: 0 !important;
    width: 68px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin-top: 0 !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    font-size: 0.64rem !important;
    line-height: 1 !important;
  }
}

/* v496-community-collapsed-density: make the social workspace scannable without a long first-screen stack. */
@media (max-width: 900px) {
  #community,
  body[data-theme] #community,
  html.native-layout-guard #community,
  html.native-layout-guard body[data-theme] #community {
    gap: 6px !important;
  }

  #community > .section-head,
  body[data-theme] #community > .section-head,
  html.native-layout-guard #community > .section-head,
  html.native-layout-guard body[data-theme] #community > .section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(104px, 116px) !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 10px 11px !important;
    border-radius: 16px !important;
  }

  #community > .section-head .eyebrow,
  body[data-theme] #community > .section-head .eyebrow,
  html.native-layout-guard #community > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] #community > .section-head .eyebrow {
    display: none !important;
  }

  #community > .section-head h2,
  body[data-theme] #community > .section-head h2,
  html.native-layout-guard #community > .section-head h2,
  html.native-layout-guard body[data-theme] #community > .section-head h2 {
    margin: 0 !important;
    font-size: 1.28rem !important;
    line-height: 1.03 !important;
    overflow-wrap: anywhere !important;
  }

  #community > .section-head .section-actions,
  body[data-theme] #community > .section-head .section-actions,
  html.native-layout-guard #community > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #community > .section-head .section-actions {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  #community > .section-head .ghost-button,
  body[data-theme] #community > .section-head .ghost-button,
  html.native-layout-guard #community > .section-head .ghost-button,
  html.native-layout-guard body[data-theme] #community > .section-head .ghost-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    line-height: 1.03 !important;
  }

  #community .mobile-collapsible.is-collapsed,
  body[data-theme] #community .mobile-collapsible.is-collapsed,
  html.native-layout-guard #community .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #community .mobile-collapsible.is-collapsed {
    min-height: 58px !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
    gap: 0 !important;
  }

  #community .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  body[data-theme] #community .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  html.native-layout-guard #community .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  html.native-layout-guard body[data-theme] #community .mobile-collapsible.is-collapsed > .mobile-collapse-head {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    gap: 8px !important;
  }

  #community .mobile-collapsible.is-collapsed > .mobile-collapse-head .eyebrow,
  body[data-theme] #community .mobile-collapsible.is-collapsed > .mobile-collapse-head .eyebrow,
  html.native-layout-guard #community .mobile-collapsible.is-collapsed > .mobile-collapse-head .eyebrow,
  html.native-layout-guard body[data-theme] #community .mobile-collapsible.is-collapsed > .mobile-collapse-head .eyebrow {
    display: none !important;
  }

  #community .mobile-collapsible.is-collapsed > .mobile-collapse-head h3,
  body[data-theme] #community .mobile-collapsible.is-collapsed > .mobile-collapse-head h3,
  html.native-layout-guard #community .mobile-collapsible.is-collapsed > .mobile-collapse-head h3,
  html.native-layout-guard body[data-theme] #community .mobile-collapsible.is-collapsed > .mobile-collapse-head h3 {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.04 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #community .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  body[data-theme] #community .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard #community .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] #community .mobile-collapsible.is-collapsed .mobile-collapse-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
  }
}

/* v497-capsule-scan-row-density: keep capsule products as short scan rows, not stacked cards. */
@media (max-width: 900px) {
  #capsule > .section-head,
  body[data-theme] #capsule > .section-head,
  html.native-layout-guard #capsule > .section-head,
  html.native-layout-guard body[data-theme] #capsule > .section-head {
    gap: 7px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }

  #capsule > .section-head .eyebrow,
  body[data-theme] #capsule > .section-head .eyebrow,
  html.native-layout-guard #capsule > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] #capsule > .section-head .eyebrow {
    display: none !important;
  }

  #capsule > .section-head h2,
  body[data-theme] #capsule > .section-head h2,
  html.native-layout-guard #capsule > .section-head h2,
  html.native-layout-guard body[data-theme] #capsule > .section-head h2 {
    font-size: 1.36rem !important;
    line-height: 1.03 !important;
  }

  #capsule > .section-head .section-actions,
  body[data-theme] #capsule > .section-head .section-actions,
  html.native-layout-guard #capsule > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #capsule > .section-head .section-actions {
    grid-template-columns: minmax(104px, 1.1fr) minmax(96px, 1fr) minmax(88px, 0.92fr) !important;
    gap: 6px !important;
  }

  #capsule > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #capsule > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #capsule > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #capsule > .section-head .section-actions :is(.primary-button, .ghost-button) {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
  }

  #capsule .capsule-layout,
  body[data-theme] #capsule .capsule-layout,
  html.native-layout-guard #capsule .capsule-layout,
  html.native-layout-guard body[data-theme] #capsule .capsule-layout {
    display: grid !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    justify-content: stretch !important;
    gap: 8px !important;
  }

  #capsule .mobile-collapsible,
  body[data-theme] #capsule .mobile-collapsible,
  html.native-layout-guard #capsule .mobile-collapsible,
  html.native-layout-guard body[data-theme] #capsule .mobile-collapsible,
  #capsule .mobile-collapsible.is-collapsed,
  body[data-theme] #capsule .mobile-collapsible.is-collapsed,
  html.native-layout-guard #capsule .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #capsule .mobile-collapsible.is-collapsed {
    margin-bottom: 0 !important;
  }

  #capsule .capsule-board-panel,
  body[data-theme] #capsule .capsule-board-panel,
  html.native-layout-guard #capsule .capsule-board-panel,
  html.native-layout-guard body[data-theme] #capsule .capsule-board-panel {
    padding: 6px !important;
    border-radius: 16px !important;
  }

  #capsule .capsule-board,
  body[data-theme] #capsule .capsule-board,
  html.native-layout-guard #capsule .capsule-board,
  html.native-layout-guard body[data-theme] #capsule .capsule-board {
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  #capsule .capsule-board-head,
  body[data-theme] #capsule .capsule-board-head,
  html.native-layout-guard #capsule .capsule-board-head,
  html.native-layout-guard body[data-theme] #capsule .capsule-board-head {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 7px !important;
  }

  #capsule .capsule-board-head .eyebrow,
  body[data-theme] #capsule .capsule-board-head .eyebrow,
  html.native-layout-guard #capsule .capsule-board-head .eyebrow,
  html.native-layout-guard body[data-theme] #capsule .capsule-board-head .eyebrow {
    display: none !important;
  }

  #capsule .capsule-board-head h3,
  body[data-theme] #capsule .capsule-board-head h3,
  html.native-layout-guard #capsule .capsule-board-head h3,
  html.native-layout-guard body[data-theme] #capsule .capsule-board-head h3 {
    font-size: 1rem !important;
    line-height: 1.04 !important;
  }

  #capsule #capsuleScore,
  body[data-theme] #capsule #capsuleScore,
  html.native-layout-guard #capsule #capsuleScore,
  html.native-layout-guard body[data-theme] #capsule #capsuleScore {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    font-size: 0.9rem !important;
  }

  #capsule .capsule-metrics,
  body[data-theme] #capsule .capsule-metrics,
  html.native-layout-guard #capsule .capsule-metrics,
  html.native-layout-guard body[data-theme] #capsule .capsule-metrics {
    gap: 4px !important;
  }

  #capsule .capsule-metrics div,
  body[data-theme] #capsule .capsule-metrics div,
  html.native-layout-guard #capsule .capsule-metrics div,
  html.native-layout-guard body[data-theme] #capsule .capsule-metrics div {
    min-height: 43px !important;
    padding: 5px 4px !important;
    border-radius: 10px !important;
  }

  #capsule .capsule-metrics strong,
  body[data-theme] #capsule .capsule-metrics strong,
  html.native-layout-guard #capsule .capsule-metrics strong,
  html.native-layout-guard body[data-theme] #capsule .capsule-metrics strong {
    font-size: 0.76rem !important;
  }

  #capsule .capsule-metrics span,
  body[data-theme] #capsule .capsule-metrics span,
  html.native-layout-guard #capsule .capsule-metrics span,
  html.native-layout-guard body[data-theme] #capsule .capsule-metrics span {
    font-size: 0.48rem !important;
    line-height: 1.03 !important;
  }

  #capsule .capsule-items,
  body[data-theme] #capsule .capsule-items,
  html.native-layout-guard #capsule .capsule-items,
  html.native-layout-guard body[data-theme] #capsule .capsule-items {
    align-content: start !important;
    gap: 5px !important;
  }

  #capsule .capsule-item,
  body[data-theme] #capsule .capsule-item,
  html.native-layout-guard #capsule .capsule-item,
  html.native-layout-guard body[data-theme] #capsule .capsule-item {
    grid-template-columns: 40px minmax(0, 1fr) 64px !important;
    min-height: 58px !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }

  #capsule .capsule-item img,
  body[data-theme] #capsule .capsule-item img,
  html.native-layout-guard #capsule .capsule-item img,
  html.native-layout-guard body[data-theme] #capsule .capsule-item img {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 9px !important;
  }

  #capsule .capsule-item > div,
  body[data-theme] #capsule .capsule-item > div,
  html.native-layout-guard #capsule .capsule-item > div,
  html.native-layout-guard body[data-theme] #capsule .capsule-item > div {
    gap: 2px !important;
  }

  #capsule .capsule-item strong,
  body[data-theme] #capsule .capsule-item strong,
  html.native-layout-guard #capsule .capsule-item strong,
  html.native-layout-guard body[data-theme] #capsule .capsule-item strong {
    font-size: 0.76rem !important;
    line-height: 1.05 !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }

  #capsule .capsule-item > div > span,
  body[data-theme] #capsule .capsule-item > div > span,
  html.native-layout-guard #capsule .capsule-item > div > span,
  html.native-layout-guard body[data-theme] #capsule .capsule-item > div > span {
    font-size: 0.52rem !important;
    line-height: 1.02 !important;
  }

  #capsule .capsule-tags,
  body[data-theme] #capsule .capsule-tags,
  html.native-layout-guard #capsule .capsule-tags,
  html.native-layout-guard body[data-theme] #capsule .capsule-tags {
    gap: 3px !important;
    margin-top: 1px !important;
  }

  #capsule .capsule-tags span,
  body[data-theme] #capsule .capsule-tags span,
  html.native-layout-guard #capsule .capsule-tags span,
  html.native-layout-guard body[data-theme] #capsule .capsule-tags span {
    padding: 2px 5px !important;
    font-size: 0.46rem !important;
  }

  #capsule .capsule-item .product-link,
  #capsule .capsule-item .mini-product-link,
  body[data-theme] #capsule .capsule-item .product-link,
  body[data-theme] #capsule .capsule-item .mini-product-link,
  html.native-layout-guard #capsule .capsule-item .product-link,
  html.native-layout-guard #capsule .capsule-item .mini-product-link,
  html.native-layout-guard body[data-theme] #capsule .capsule-item .product-link,
  html.native-layout-guard body[data-theme] #capsule .capsule-item .mini-product-link {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 64px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 5px !important;
    border-radius: 11px !important;
    font-size: 0.58rem !important;
    line-height: 1 !important;
  }
}

/* v498-studio-first-screen-density: keep Skan usable without a tall upload billboard. */
@media (max-width: 900px) {
  #studio .photo-panel,
  body[data-theme] #studio .photo-panel,
  html.native-layout-guard #studio .photo-panel,
  html.native-layout-guard body[data-theme] #studio .photo-panel {
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  #studio .photo-panel .panel-head,
  body[data-theme] #studio .photo-panel .panel-head,
  html.native-layout-guard #studio .photo-panel .panel-head,
  html.native-layout-guard body[data-theme] #studio .photo-panel .panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(116px, 138px) !important;
    gap: 8px !important;
    align-items: center !important;
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
  }

  #studio .photo-panel .panel-head .eyebrow,
  body[data-theme] #studio .photo-panel .panel-head .eyebrow,
  html.native-layout-guard #studio .photo-panel .panel-head .eyebrow,
  html.native-layout-guard body[data-theme] #studio .photo-panel .panel-head .eyebrow {
    display: none !important;
  }

  #studio .photo-panel h2,
  body[data-theme] #studio .photo-panel h2,
  html.native-layout-guard #studio .photo-panel h2,
  html.native-layout-guard body[data-theme] #studio .photo-panel h2 {
    font-size: 1.3rem !important;
    line-height: 1.02 !important;
  }

  #studio .photo-panel .primary-button,
  body[data-theme] #studio .photo-panel .primary-button,
  html.native-layout-guard #studio .photo-panel .primary-button,
  html.native-layout-guard body[data-theme] #studio .photo-panel .primary-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 8px !important;
    border-radius: 13px !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
  }

  #studio .upload-zone,
  body[data-theme] #studio .upload-zone,
  html.native-layout-guard #studio .upload-zone,
  html.native-layout-guard body[data-theme] #studio .upload-zone {
    min-height: 210px !important;
    height: 210px !important;
    border-radius: 16px !important;
  }

  #studio .upload-zone img,
  body[data-theme] #studio .upload-zone img,
  html.native-layout-guard #studio .upload-zone img,
  html.native-layout-guard body[data-theme] #studio .upload-zone img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }

  #studio .upload-zone span,
  body[data-theme] #studio .upload-zone span,
  html.native-layout-guard #studio .upload-zone span,
  html.native-layout-guard body[data-theme] #studio .upload-zone span {
    right: 10px !important;
    bottom: 10px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    border-radius: 13px !important;
    font-size: 0.78rem !important;
    line-height: 44px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  #studio .score-wrap,
  body[data-theme] #studio .score-wrap,
  html.native-layout-guard #studio .score-wrap,
  html.native-layout-guard body[data-theme] #studio .score-wrap {
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 74px !important;
    padding: 8px !important;
    border-radius: 15px !important;
  }

  #studio .score-ring,
  body[data-theme] #studio .score-ring,
  html.native-layout-guard #studio .score-ring,
  html.native-layout-guard body[data-theme] #studio .score-ring {
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 14px !important;
  }

  #studio .score-ring strong,
  body[data-theme] #studio .score-ring strong,
  html.native-layout-guard #studio .score-ring strong,
  html.native-layout-guard body[data-theme] #studio .score-ring strong {
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  #studio .score-ring span,
  body[data-theme] #studio .score-ring span,
  html.native-layout-guard #studio .score-ring span,
  html.native-layout-guard body[data-theme] #studio .score-ring span {
    font-size: 0.56rem !important;
    line-height: 1 !important;
  }

  #studio .score-wrap h3,
  body[data-theme] #studio .score-wrap h3,
  html.native-layout-guard #studio .score-wrap h3,
  html.native-layout-guard body[data-theme] #studio .score-wrap h3 {
    font-size: 0.98rem !important;
    line-height: 1.05 !important;
  }

  #studio .score-wrap p,
  body[data-theme] #studio .score-wrap p,
  html.native-layout-guard #studio .score-wrap p,
  html.native-layout-guard body[data-theme] #studio .score-wrap p {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.72rem !important;
    line-height: 1.14 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  #studio .mobile-collapsible,
  body[data-theme] #studio .mobile-collapsible,
  html.native-layout-guard #studio .mobile-collapsible,
  html.native-layout-guard body[data-theme] #studio .mobile-collapsible,
  #studio .mobile-collapsible.is-collapsed,
  body[data-theme] #studio .mobile-collapsible.is-collapsed,
  html.native-layout-guard #studio .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #studio .mobile-collapsible.is-collapsed {
    margin-bottom: 0 !important;
  }

  #studio .mobile-collapsible.is-collapsed,
  body[data-theme] #studio .mobile-collapsible.is-collapsed,
  html.native-layout-guard #studio .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #studio .mobile-collapsible.is-collapsed {
    min-height: 58px !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
  }

  #studio .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head),
  body[data-theme] #studio .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head),
  html.native-layout-guard #studio .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head),
  html.native-layout-guard body[data-theme] #studio .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head) {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    gap: 8px !important;
  }

  #studio .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head) .eyebrow,
  body[data-theme] #studio .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head) .eyebrow,
  html.native-layout-guard #studio .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head) .eyebrow,
  html.native-layout-guard body[data-theme] #studio .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head) .eyebrow {
    display: none !important;
  }

  #studio .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head) :is(h3, strong),
  body[data-theme] #studio .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head) :is(h3, strong),
  html.native-layout-guard #studio .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head) :is(h3, strong),
  html.native-layout-guard body[data-theme] #studio .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head) :is(h3, strong) {
    font-size: 1rem !important;
    line-height: 1.04 !important;
  }

  #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head,
  body[data-theme] #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head,
  html.native-layout-guard #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head,
  html.native-layout-guard body[data-theme] #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
  }

  #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head span,
  body[data-theme] #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head span,
  html.native-layout-guard #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head span,
  html.native-layout-guard body[data-theme] #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head span {
    display: block !important;
    margin: 0 !important;
    color: #fffaf2 !important;
    font-size: 1rem !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head strong,
  body[data-theme] #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head strong,
  html.native-layout-guard #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head strong,
  html.native-layout-guard body[data-theme] #studio #expertCritique.mobile-collapsible.is-collapsed .expert-critique-head strong {
    display: none !important;
  }
}

/* v499-fit-result-density: make the fitting-room result a compact decision card. */
@media (max-width: 900px) {
  #fit > .section-head,
  body[data-theme] #fit > .section-head,
  html.native-layout-guard #fit > .section-head,
  html.native-layout-guard body[data-theme] #fit > .section-head {
    gap: 7px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }

  #fit > .section-head .eyebrow,
  body[data-theme] #fit > .section-head .eyebrow,
  html.native-layout-guard #fit > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] #fit > .section-head .eyebrow {
    display: none !important;
  }

  #fit > .section-head h2,
  body[data-theme] #fit > .section-head h2,
  html.native-layout-guard #fit > .section-head h2,
  html.native-layout-guard body[data-theme] #fit > .section-head h2 {
    font-size: 1.36rem !important;
    line-height: 1.03 !important;
  }

  #fit > .section-head .section-actions,
  body[data-theme] #fit > .section-head .section-actions,
  html.native-layout-guard #fit > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #fit > .section-head .section-actions {
    grid-template-columns: minmax(104px, 1.1fr) minmax(96px, 1fr) minmax(88px, 0.92fr) !important;
    gap: 6px !important;
  }

  #fit > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #fit > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #fit > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #fit > .section-head .section-actions :is(.primary-button, .ghost-button) {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
  }

  #fit .fit-layout,
  body[data-theme] #fit .fit-layout,
  html.native-layout-guard #fit .fit-layout,
  html.native-layout-guard body[data-theme] #fit .fit-layout {
    display: grid !important;
    grid-auto-rows: max-content !important;
    gap: 8px !important;
    align-content: start !important;
  }

  #fit .fit-ticket,
  body[data-theme] #fit .fit-ticket,
  html.native-layout-guard #fit .fit-ticket,
  html.native-layout-guard body[data-theme] #fit .fit-ticket {
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 15px !important;
  }

  #fit .fit-ticket-head,
  body[data-theme] #fit .fit-ticket-head,
  html.native-layout-guard #fit .fit-ticket-head,
  html.native-layout-guard body[data-theme] #fit .fit-ticket-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 7px !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }

  #fit .fit-ticket-head .eyebrow,
  body[data-theme] #fit .fit-ticket-head .eyebrow,
  html.native-layout-guard #fit .fit-ticket-head .eyebrow,
  html.native-layout-guard body[data-theme] #fit .fit-ticket-head .eyebrow {
    display: none !important;
  }

  #fit .fit-ticket-head h3,
  body[data-theme] #fit .fit-ticket-head h3,
  html.native-layout-guard #fit .fit-ticket-head h3,
  html.native-layout-guard body[data-theme] #fit .fit-ticket-head h3 {
    font-size: 1rem !important;
    line-height: 1.04 !important;
  }

  #fit #fitScore,
  body[data-theme] #fit #fitScore,
  html.native-layout-guard #fit #fitScore,
  html.native-layout-guard body[data-theme] #fit #fitScore {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    font-size: 0.9rem !important;
  }

  #fit .fit-metrics,
  body[data-theme] #fit .fit-metrics,
  html.native-layout-guard #fit .fit-metrics,
  html.native-layout-guard body[data-theme] #fit .fit-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #fit .fit-metrics > *,
  body[data-theme] #fit .fit-metrics > *,
  html.native-layout-guard #fit .fit-metrics > *,
  html.native-layout-guard body[data-theme] #fit .fit-metrics > * {
    min-height: 43px !important;
    padding: 5px 4px !important;
    border-radius: 10px !important;
  }

  #fit .fit-metrics strong,
  body[data-theme] #fit .fit-metrics strong,
  html.native-layout-guard #fit .fit-metrics strong,
  html.native-layout-guard body[data-theme] #fit .fit-metrics strong {
    font-size: 0.76rem !important;
  }

  #fit .fit-metrics span,
  body[data-theme] #fit .fit-metrics span,
  html.native-layout-guard #fit .fit-metrics span,
  html.native-layout-guard body[data-theme] #fit .fit-metrics span {
    font-size: 0.48rem !important;
    line-height: 1.03 !important;
  }

  #fit .fit-readout,
  body[data-theme] #fit .fit-readout,
  html.native-layout-guard #fit .fit-readout,
  html.native-layout-guard body[data-theme] #fit .fit-readout {
    gap: 5px !important;
  }

  #fit .fit-hero-card,
  body[data-theme] #fit .fit-hero-card,
  html.native-layout-guard #fit .fit-hero-card,
  html.native-layout-guard body[data-theme] #fit .fit-hero-card {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    min-height: 62px !important;
    gap: 7px !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }

  #fit .fit-hero-card img,
  body[data-theme] #fit .fit-hero-card img,
  html.native-layout-guard #fit .fit-hero-card img,
  html.native-layout-guard body[data-theme] #fit .fit-hero-card img {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    border-radius: 10px !important;
  }

  #fit .fit-hero-card div,
  body[data-theme] #fit .fit-hero-card div,
  html.native-layout-guard #fit .fit-hero-card div,
  html.native-layout-guard body[data-theme] #fit .fit-hero-card div {
    gap: 2px !important;
  }

  #fit .fit-hero-card span,
  body[data-theme] #fit .fit-hero-card span,
  html.native-layout-guard #fit .fit-hero-card span,
  html.native-layout-guard body[data-theme] #fit .fit-hero-card span {
    font-size: 0.52rem !important;
    line-height: 1.02 !important;
  }

  #fit .fit-hero-card strong,
  body[data-theme] #fit .fit-hero-card strong,
  html.native-layout-guard #fit .fit-hero-card strong,
  html.native-layout-guard body[data-theme] #fit .fit-hero-card strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.78rem !important;
    line-height: 1.06 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }

  #fit .fit-hero-card em,
  body[data-theme] #fit .fit-hero-card em,
  html.native-layout-guard #fit .fit-hero-card em,
  html.native-layout-guard body[data-theme] #fit .fit-hero-card em {
    padding: 3px 7px !important;
    font-size: 0.56rem !important;
    line-height: 1 !important;
  }

  #fit .fit-readout p,
  body[data-theme] #fit .fit-readout p,
  html.native-layout-guard #fit .fit-readout p,
  html.native-layout-guard body[data-theme] #fit .fit-readout p {
    display: -webkit-box !important;
    overflow: hidden !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    font-size: 0.7rem !important;
    line-height: 1.14 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  #fit .mobile-collapsible,
  body[data-theme] #fit .mobile-collapsible,
  html.native-layout-guard #fit .mobile-collapsible,
  html.native-layout-guard body[data-theme] #fit .mobile-collapsible {
    margin-bottom: 0 !important;
  }
}

/* v500-planner-inventory-scroll-trim: remove leftover mobile scroll from Plan and Szafa. */
@media (max-width: 900px) {
  #planner > .section-head,
  body[data-theme] #planner > .section-head,
  html.native-layout-guard #planner > .section-head,
  html.native-layout-guard body[data-theme] #planner > .section-head,
  #inventory > .section-head,
  body[data-theme] #inventory > .section-head,
  html.native-layout-guard #inventory > .section-head,
  html.native-layout-guard body[data-theme] #inventory > .section-head {
    gap: 7px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }

  #planner > .section-head .eyebrow,
  body[data-theme] #planner > .section-head .eyebrow,
  html.native-layout-guard #planner > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] #planner > .section-head .eyebrow,
  #inventory > .section-head .eyebrow,
  body[data-theme] #inventory > .section-head .eyebrow,
  html.native-layout-guard #inventory > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] #inventory > .section-head .eyebrow {
    display: none !important;
  }

  #planner > .section-head h2,
  body[data-theme] #planner > .section-head h2,
  html.native-layout-guard #planner > .section-head h2,
  html.native-layout-guard body[data-theme] #planner > .section-head h2,
  #inventory > .section-head h2,
  body[data-theme] #inventory > .section-head h2,
  html.native-layout-guard #inventory > .section-head h2,
  html.native-layout-guard body[data-theme] #inventory > .section-head h2 {
    margin: 0 !important;
    font-size: 1.34rem !important;
    line-height: 1.03 !important;
    overflow-wrap: anywhere !important;
  }

  #planner > .section-head .section-actions,
  body[data-theme] #planner > .section-head .section-actions,
  html.native-layout-guard #planner > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #planner > .section-head .section-actions {
    gap: 6px !important;
  }

  #planner > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #planner > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #planner > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #planner > .section-head .section-actions :is(.primary-button, .ghost-button) {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    font-size: 0.76rem !important;
  }

  #planner .planner-layout,
  body[data-theme] #planner .planner-layout,
  html.native-layout-guard #planner .planner-layout,
  html.native-layout-guard body[data-theme] #planner .planner-layout,
  #inventory .inventory-layout,
  body[data-theme] #inventory .inventory-layout,
  html.native-layout-guard #inventory .inventory-layout,
  html.native-layout-guard body[data-theme] #inventory .inventory-layout {
    gap: 6px !important;
    align-content: start !important;
  }

  #planner .planner-result-panel,
  body[data-theme] #planner .planner-result-panel,
  html.native-layout-guard #planner .planner-result-panel,
  html.native-layout-guard body[data-theme] #planner .planner-result-panel {
    padding: 6px !important;
    border-radius: 16px !important;
  }

  #planner .planner-ticket,
  body[data-theme] #planner .planner-ticket,
  html.native-layout-guard #planner .planner-ticket,
  html.native-layout-guard body[data-theme] #planner .planner-ticket {
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  #planner .planner-ticket-head,
  body[data-theme] #planner .planner-ticket-head,
  html.native-layout-guard #planner .planner-ticket-head,
  html.native-layout-guard body[data-theme] #planner .planner-ticket-head {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 7px !important;
  }

  #planner .planner-ticket-head .eyebrow,
  body[data-theme] #planner .planner-ticket-head .eyebrow,
  html.native-layout-guard #planner .planner-ticket-head .eyebrow,
  html.native-layout-guard body[data-theme] #planner .planner-ticket-head .eyebrow {
    display: none !important;
  }

  #planner .planner-ticket-head h3,
  body[data-theme] #planner .planner-ticket-head h3,
  html.native-layout-guard #planner .planner-ticket-head h3,
  html.native-layout-guard body[data-theme] #planner .planner-ticket-head h3 {
    font-size: 1rem !important;
    line-height: 1.04 !important;
  }

  #planner #plannerScore,
  body[data-theme] #planner #plannerScore,
  html.native-layout-guard #planner #plannerScore,
  html.native-layout-guard body[data-theme] #planner #plannerScore {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    font-size: 0.9rem !important;
  }

  #planner .planner-metrics,
  body[data-theme] #planner .planner-metrics,
  html.native-layout-guard #planner .planner-metrics,
  html.native-layout-guard body[data-theme] #planner .planner-metrics {
    gap: 4px !important;
  }

  #planner .planner-metrics div,
  body[data-theme] #planner .planner-metrics div,
  html.native-layout-guard #planner .planner-metrics div,
  html.native-layout-guard body[data-theme] #planner .planner-metrics div {
    min-height: 42px !important;
    padding: 5px 4px !important;
    border-radius: 10px !important;
  }

  #planner .planner-metrics strong,
  body[data-theme] #planner .planner-metrics strong,
  html.native-layout-guard #planner .planner-metrics strong,
  html.native-layout-guard body[data-theme] #planner .planner-metrics strong {
    font-size: 0.72rem !important;
  }

  #planner .planner-metrics span,
  body[data-theme] #planner .planner-metrics span,
  html.native-layout-guard #planner .planner-metrics span,
  html.native-layout-guard body[data-theme] #planner .planner-metrics span {
    font-size: 0.47rem !important;
    line-height: 1.02 !important;
  }

  #planner .planner-outfit,
  body[data-theme] #planner .planner-outfit,
  html.native-layout-guard #planner .planner-outfit,
  html.native-layout-guard body[data-theme] #planner .planner-outfit {
    gap: 5px !important;
  }

  #planner .planner-slot,
  body[data-theme] #planner .planner-slot,
  html.native-layout-guard #planner .planner-slot,
  html.native-layout-guard body[data-theme] #planner .planner-slot {
    grid-template-columns: 40px minmax(0, 1fr) 62px !important;
    min-height: 54px !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 12px !important;
  }

  #planner .planner-slot img,
  body[data-theme] #planner .planner-slot img,
  html.native-layout-guard #planner .planner-slot img,
  html.native-layout-guard body[data-theme] #planner .planner-slot img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 9px !important;
  }

  #planner .planner-slot strong,
  body[data-theme] #planner .planner-slot strong,
  html.native-layout-guard #planner .planner-slot strong,
  html.native-layout-guard body[data-theme] #planner .planner-slot strong {
    font-size: 0.76rem !important;
    line-height: 1.05 !important;
  }

  #planner .planner-slot span,
  body[data-theme] #planner .planner-slot span,
  html.native-layout-guard #planner .planner-slot span,
  html.native-layout-guard body[data-theme] #planner .planner-slot span {
    font-size: 0.52rem !important;
    line-height: 1.02 !important;
  }

  #planner .planner-slot-price,
  body[data-theme] #planner .planner-slot-price,
  html.native-layout-guard #planner .planner-slot-price,
  html.native-layout-guard body[data-theme] #planner .planner-slot-price {
    min-width: 0 !important;
    width: 62px !important;
    padding: 6px 5px !important;
    font-size: 0.58rem !important;
  }

  #planner .planner-reasons,
  body[data-theme] #planner .planner-reasons,
  html.native-layout-guard #planner .planner-reasons,
  html.native-layout-guard body[data-theme] #planner .planner-reasons {
    gap: 4px !important;
  }

  #planner .planner-reasons p,
  body[data-theme] #planner .planner-reasons p,
  html.native-layout-guard #planner .planner-reasons p,
  html.native-layout-guard body[data-theme] #planner .planner-reasons p {
    padding: 6px 8px !important;
    border-radius: 10px !important;
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }

  #planner .planner-reasons p:nth-child(n + 2),
  body[data-theme] #planner .planner-reasons p:nth-child(n + 2),
  html.native-layout-guard #planner .planner-reasons p:nth-child(n + 2),
  html.native-layout-guard body[data-theme] #planner .planner-reasons p:nth-child(n + 2) {
    display: none !important;
  }

  #inventory > .section-head .section-actions,
  body[data-theme] #inventory > .section-head .section-actions,
  html.native-layout-guard #inventory > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #inventory > .section-head .section-actions {
    gap: 6px !important;
  }

  #inventory .segmented,
  body[data-theme] #inventory .segmented,
  html.native-layout-guard #inventory .segmented,
  html.native-layout-guard body[data-theme] #inventory .segmented {
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 14px !important;
  }

  #inventory .csv-actions,
  body[data-theme] #inventory .csv-actions,
  html.native-layout-guard #inventory .csv-actions,
  html.native-layout-guard body[data-theme] #inventory .csv-actions {
    gap: 5px !important;
  }

  #inventory .segmented button,
  body[data-theme] #inventory .segmented button,
  html.native-layout-guard #inventory .segmented button,
  html.native-layout-guard body[data-theme] #inventory .segmented button,
  #inventory .csv-actions :is(button, .import-button),
  body[data-theme] #inventory .csv-actions :is(button, .import-button),
  html.native-layout-guard #inventory .csv-actions :is(button, .import-button),
  html.native-layout-guard body[data-theme] #inventory .csv-actions :is(button, .import-button) {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
  }

  #inventory .inventory-grid,
  body[data-theme] #inventory .inventory-grid,
  html.native-layout-guard #inventory .inventory-grid,
  html.native-layout-guard body[data-theme] #inventory .inventory-grid {
    gap: 5px !important;
  }

  #inventory .item-card,
  body[data-theme] #inventory .item-card,
  html.native-layout-guard #inventory .item-card,
  html.native-layout-guard body[data-theme] #inventory .item-card {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    min-height: 56px !important;
    gap: 6px !important;
    padding: 5px !important;
    border-radius: 12px !important;
  }

  #inventory .item-card > img,
  body[data-theme] #inventory .item-card > img,
  html.native-layout-guard #inventory .item-card > img,
  html.native-layout-guard body[data-theme] #inventory .item-card > img {
    width: 40px !important;
    min-width: 40px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 9px !important;
  }

  #inventory .item-body,
  body[data-theme] #inventory .item-body,
  html.native-layout-guard #inventory .item-body,
  html.native-layout-guard body[data-theme] #inventory .item-body {
    grid-template-columns: minmax(0, 1fr) 60px !important;
    column-gap: 6px !important;
  }

  #inventory .item-body h3,
  body[data-theme] #inventory .item-body h3,
  html.native-layout-guard #inventory .item-body h3,
  html.native-layout-guard body[data-theme] #inventory .item-body h3 {
    font-size: 0.72rem !important;
    line-height: 1.04 !important;
  }

  #inventory .source-badge,
  body[data-theme] #inventory .source-badge,
  html.native-layout-guard #inventory .source-badge,
  html.native-layout-guard body[data-theme] #inventory .source-badge,
  #inventory .pill,
  body[data-theme] #inventory .pill,
  html.native-layout-guard #inventory .pill,
  html.native-layout-guard body[data-theme] #inventory .pill {
    min-height: 17px !important;
    padding: 2px 5px !important;
    font-size: 0.47rem !important;
  }

  #inventory .item-meta .price,
  body[data-theme] #inventory .item-meta .price,
  html.native-layout-guard #inventory .item-meta .price,
  html.native-layout-guard body[data-theme] #inventory .item-meta .price {
    font-size: 0.66rem !important;
  }

  #inventory .product-link,
  body[data-theme] #inventory .product-link,
  html.native-layout-guard #inventory .product-link,
  html.native-layout-guard body[data-theme] #inventory .product-link {
    min-width: 60px !important;
    width: 60px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 5px !important;
    border-radius: 11px !important;
    font-size: 0.54rem !important;
  }

  #inventoryMobileListToggle,
  body[data-theme] #inventoryMobileListToggle,
  html.native-layout-guard #inventoryMobileListToggle,
  html.native-layout-guard body[data-theme] #inventoryMobileListToggle {
    min-height: 44px !important;
    height: 44px !important;
    margin-top: 5px !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
  }

  #inventory .mobile-collapsible,
  body[data-theme] #inventory .mobile-collapsible,
  html.native-layout-guard #inventory .mobile-collapsible,
  html.native-layout-guard body[data-theme] #inventory .mobile-collapsible,
  #inventory .mobile-collapsible.is-collapsed,
  body[data-theme] #inventory .mobile-collapsible.is-collapsed,
  html.native-layout-guard #inventory .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #inventory .mobile-collapsible.is-collapsed {
    margin-bottom: 0 !important;
  }

  #inventory .mobile-collapsible.is-collapsed,
  body[data-theme] #inventory .mobile-collapsible.is-collapsed,
  html.native-layout-guard #inventory .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #inventory .mobile-collapsible.is-collapsed {
    min-height: 58px !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
  }

  #inventory .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .catalog-audit-head, .watchlist-head),
  body[data-theme] #inventory .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .catalog-audit-head, .watchlist-head),
  html.native-layout-guard #inventory .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .catalog-audit-head, .watchlist-head),
  html.native-layout-guard body[data-theme] #inventory .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .catalog-audit-head, .watchlist-head) {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    gap: 8px !important;
  }

  #inventory .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .catalog-audit-head, .watchlist-head) .eyebrow,
  body[data-theme] #inventory .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .catalog-audit-head, .watchlist-head) .eyebrow,
  html.native-layout-guard #inventory .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .catalog-audit-head, .watchlist-head) .eyebrow,
  html.native-layout-guard body[data-theme] #inventory .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .catalog-audit-head, .watchlist-head) .eyebrow {
    display: none !important;
  }

  #inventory .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .catalog-audit-head, .watchlist-head) h3,
  body[data-theme] #inventory .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .catalog-audit-head, .watchlist-head) h3,
  html.native-layout-guard #inventory .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .catalog-audit-head, .watchlist-head) h3,
  html.native-layout-guard body[data-theme] #inventory .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .catalog-audit-head, .watchlist-head) h3 {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.04 !important;
  }
}

/* v501-planner-collapsed-panels: make Planner secondary panels short enough for the first screen. */
@media (max-width: 900px) {
  #planner .mobile-collapsible,
  body[data-theme] #planner .mobile-collapsible,
  html.native-layout-guard #planner .mobile-collapsible,
  html.native-layout-guard body[data-theme] #planner .mobile-collapsible,
  #planner .mobile-collapsible.is-collapsed,
  body[data-theme] #planner .mobile-collapsible.is-collapsed,
  html.native-layout-guard #planner .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #planner .mobile-collapsible.is-collapsed {
    margin-bottom: 0 !important;
  }

  #planner .mobile-collapsible.is-collapsed,
  body[data-theme] #planner .mobile-collapsible.is-collapsed,
  html.native-layout-guard #planner .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #planner .mobile-collapsible.is-collapsed {
    min-height: 58px !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
  }

  #planner .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head),
  body[data-theme] #planner .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head),
  html.native-layout-guard #planner .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head),
  html.native-layout-guard body[data-theme] #planner .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    gap: 8px !important;
  }

  #planner .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow,
  body[data-theme] #planner .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow,
  html.native-layout-guard #planner .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow,
  html.native-layout-guard body[data-theme] #planner .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow {
    display: none !important;
  }

  #planner .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3,
  body[data-theme] #planner .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3,
  html.native-layout-guard #planner .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3,
  html.native-layout-guard body[data-theme] #planner .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3 {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.04 !important;
  }
}

/* v502-lookbook-trends-report-density: turn store-heavy views into compact mobile work screens. */
@media (max-width: 900px) {
  #lookbook > .section-head,
  body[data-theme] #lookbook > .section-head,
  html.native-layout-guard #lookbook > .section-head,
  html.native-layout-guard body[data-theme] #lookbook > .section-head,
  #trends > .section-head,
  body[data-theme] #trends > .section-head,
  html.native-layout-guard #trends > .section-head,
  html.native-layout-guard body[data-theme] #trends > .section-head,
  #report > .section-head,
  body[data-theme] #report > .section-head,
  html.native-layout-guard #report > .section-head,
  html.native-layout-guard body[data-theme] #report > .section-head {
    gap: 7px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }

  #lookbook > .section-head .eyebrow,
  body[data-theme] #lookbook > .section-head .eyebrow,
  html.native-layout-guard #lookbook > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] #lookbook > .section-head .eyebrow,
  #trends > .section-head .eyebrow,
  body[data-theme] #trends > .section-head .eyebrow,
  html.native-layout-guard #trends > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] #trends > .section-head .eyebrow,
  #report > .section-head .eyebrow,
  body[data-theme] #report > .section-head .eyebrow,
  html.native-layout-guard #report > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] #report > .section-head .eyebrow {
    display: none !important;
  }

  #lookbook > .section-head h2,
  body[data-theme] #lookbook > .section-head h2,
  html.native-layout-guard #lookbook > .section-head h2,
  html.native-layout-guard body[data-theme] #lookbook > .section-head h2,
  #trends > .section-head h2,
  body[data-theme] #trends > .section-head h2,
  html.native-layout-guard #trends > .section-head h2,
  html.native-layout-guard body[data-theme] #trends > .section-head h2,
  #report > .section-head h2,
  body[data-theme] #report > .section-head h2,
  html.native-layout-guard #report > .section-head h2,
  html.native-layout-guard body[data-theme] #report > .section-head h2 {
    margin: 0 !important;
    font-size: 1.34rem !important;
    line-height: 1.03 !important;
    overflow-wrap: anywhere !important;
  }

  #lookbook > .section-head .section-actions,
  body[data-theme] #lookbook > .section-head .section-actions,
  html.native-layout-guard #lookbook > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #lookbook > .section-head .section-actions,
  #trends > .section-head .section-actions,
  body[data-theme] #trends > .section-head .section-actions,
  html.native-layout-guard #trends > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #trends > .section-head .section-actions,
  #report > .section-head .section-actions,
  body[data-theme] #report > .section-head .section-actions,
  html.native-layout-guard #report > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #report > .section-head .section-actions {
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #lookbook > .section-head .section-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #trends > .section-head .section-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #report > .section-head .section-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #lookbook > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #lookbook > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #lookbook > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #lookbook > .section-head .section-actions :is(.primary-button, .ghost-button),
  #trends > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #trends > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #trends > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #trends > .section-head .section-actions :is(.primary-button, .ghost-button),
  #report > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #report > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #report > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #report > .section-head .section-actions :is(.primary-button, .ghost-button) {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    line-height: 1.03 !important;
    white-space: normal !important;
  }

  #lookbook .lookbook-layout,
  body[data-theme] #lookbook .lookbook-layout,
  html.native-layout-guard #lookbook .lookbook-layout,
  html.native-layout-guard body[data-theme] #lookbook .lookbook-layout,
  #trends .trend-lab,
  body[data-theme] #trends .trend-lab,
  html.native-layout-guard #trends .trend-lab,
  html.native-layout-guard body[data-theme] #trends .trend-lab,
  #report .report-layout,
  body[data-theme] #report .report-layout,
  html.native-layout-guard #report .report-layout,
  html.native-layout-guard body[data-theme] #report .report-layout {
    gap: 6px !important;
    align-content: start !important;
  }

  #lookbook .mobile-collapsible,
  body[data-theme] #lookbook .mobile-collapsible,
  html.native-layout-guard #lookbook .mobile-collapsible,
  html.native-layout-guard body[data-theme] #lookbook .mobile-collapsible,
  #trends .mobile-collapsible,
  body[data-theme] #trends .mobile-collapsible,
  html.native-layout-guard #trends .mobile-collapsible,
  html.native-layout-guard body[data-theme] #trends .mobile-collapsible,
  #report .mobile-collapsible,
  body[data-theme] #report .mobile-collapsible,
  html.native-layout-guard #report .mobile-collapsible,
  html.native-layout-guard body[data-theme] #report .mobile-collapsible {
    margin-bottom: 0 !important;
  }

  #lookbook .mobile-collapsible.is-collapsed,
  body[data-theme] #lookbook .mobile-collapsible.is-collapsed,
  html.native-layout-guard #lookbook .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #lookbook .mobile-collapsible.is-collapsed,
  #trends .mobile-collapsible.is-collapsed,
  body[data-theme] #trends .mobile-collapsible.is-collapsed,
  html.native-layout-guard #trends .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #trends .mobile-collapsible.is-collapsed,
  #report .mobile-collapsible.is-collapsed,
  body[data-theme] #report .mobile-collapsible.is-collapsed,
  html.native-layout-guard #report .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #report .mobile-collapsible.is-collapsed {
    min-height: 58px !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
  }

  #lookbook .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .reservation-head),
  body[data-theme] #lookbook .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .reservation-head),
  html.native-layout-guard #lookbook .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .reservation-head),
  html.native-layout-guard body[data-theme] #lookbook .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .reservation-head),
  #trends .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .trend-intel-head),
  body[data-theme] #trends .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .trend-intel-head),
  html.native-layout-guard #trends .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .trend-intel-head),
  html.native-layout-guard body[data-theme] #trends .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .trend-intel-head),
  #report .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head),
  body[data-theme] #report .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head),
  html.native-layout-guard #report .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head),
  html.native-layout-guard body[data-theme] #report .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 0 !important;
  }

  #lookbook .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .reservation-head) .eyebrow,
  body[data-theme] #lookbook .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .reservation-head) .eyebrow,
  html.native-layout-guard #lookbook .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .reservation-head) .eyebrow,
  html.native-layout-guard body[data-theme] #lookbook .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .reservation-head) .eyebrow,
  #trends .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .trend-intel-head) .eyebrow,
  body[data-theme] #trends .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .trend-intel-head) .eyebrow,
  html.native-layout-guard #trends .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .trend-intel-head) .eyebrow,
  html.native-layout-guard body[data-theme] #trends .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .trend-intel-head) .eyebrow,
  #report .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow,
  body[data-theme] #report .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow,
  html.native-layout-guard #report .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow,
  html.native-layout-guard body[data-theme] #report .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow {
    display: none !important;
  }

  #lookbook .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .reservation-head) h3,
  body[data-theme] #lookbook .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .reservation-head) h3,
  html.native-layout-guard #lookbook .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .reservation-head) h3,
  html.native-layout-guard body[data-theme] #lookbook .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .reservation-head) h3,
  #trends .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .trend-intel-head) h3,
  body[data-theme] #trends .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .trend-intel-head) h3,
  html.native-layout-guard #trends .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .trend-intel-head) h3,
  html.native-layout-guard body[data-theme] #trends .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .trend-intel-head) h3,
  #report .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3,
  body[data-theme] #report .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3,
  html.native-layout-guard #report .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3,
  html.native-layout-guard body[data-theme] #report .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3 {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.04 !important;
    overflow-wrap: anywhere !important;
  }

  #lookbook .lookbook-metrics,
  body[data-theme] #lookbook .lookbook-metrics,
  html.native-layout-guard #lookbook .lookbook-metrics,
  html.native-layout-guard body[data-theme] #lookbook .lookbook-metrics,
  #trends .trend-metrics,
  body[data-theme] #trends .trend-metrics,
  html.native-layout-guard #trends .trend-metrics,
  html.native-layout-guard body[data-theme] #trends .trend-metrics,
  #report .report-metrics,
  body[data-theme] #report .report-metrics,
  html.native-layout-guard #report .report-metrics,
  html.native-layout-guard body[data-theme] #report .report-metrics {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #lookbook .lookbook-metrics > *,
  body[data-theme] #lookbook .lookbook-metrics > *,
  html.native-layout-guard #lookbook .lookbook-metrics > *,
  html.native-layout-guard body[data-theme] #lookbook .lookbook-metrics > *,
  #trends .trend-metrics > *,
  body[data-theme] #trends .trend-metrics > *,
  html.native-layout-guard #trends .trend-metrics > *,
  html.native-layout-guard body[data-theme] #trends .trend-metrics > *,
  #report .report-metrics > *,
  body[data-theme] #report .report-metrics > *,
  html.native-layout-guard #report .report-metrics > *,
  html.native-layout-guard body[data-theme] #report .report-metrics > * {
    min-height: 42px !important;
    padding: 5px 4px !important;
    border-radius: 10px !important;
  }

  #lookbook .lookbook-metrics strong,
  body[data-theme] #lookbook .lookbook-metrics strong,
  html.native-layout-guard #lookbook .lookbook-metrics strong,
  html.native-layout-guard body[data-theme] #lookbook .lookbook-metrics strong,
  #trends .trend-metrics strong,
  body[data-theme] #trends .trend-metrics strong,
  html.native-layout-guard #trends .trend-metrics strong,
  html.native-layout-guard body[data-theme] #trends .trend-metrics strong,
  #report .report-metrics strong,
  body[data-theme] #report .report-metrics strong,
  html.native-layout-guard #report .report-metrics strong,
  html.native-layout-guard body[data-theme] #report .report-metrics strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.68rem !important;
    line-height: 1.02 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }

  #lookbook .lookbook-metrics span,
  body[data-theme] #lookbook .lookbook-metrics span,
  html.native-layout-guard #lookbook .lookbook-metrics span,
  html.native-layout-guard body[data-theme] #lookbook .lookbook-metrics span,
  #trends .trend-metrics span,
  body[data-theme] #trends .trend-metrics span,
  html.native-layout-guard #trends .trend-metrics span,
  html.native-layout-guard body[data-theme] #trends .trend-metrics span,
  #report .report-metrics span,
  body[data-theme] #report .report-metrics span,
  html.native-layout-guard #report .report-metrics span,
  html.native-layout-guard body[data-theme] #report .report-metrics span {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.47rem !important;
    line-height: 1.03 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  #lookbook .lookbook-workbench,
  body[data-theme] #lookbook .lookbook-workbench,
  html.native-layout-guard #lookbook .lookbook-workbench,
  html.native-layout-guard body[data-theme] #lookbook .lookbook-workbench,
  #trends .trend-workbench,
  body[data-theme] #trends .trend-workbench,
  html.native-layout-guard #trends .trend-workbench,
  html.native-layout-guard body[data-theme] #trends .trend-workbench {
    gap: 6px !important;
  }

  #lookbook .lookbook-grid,
  body[data-theme] #lookbook .lookbook-grid,
  html.native-layout-guard #lookbook .lookbook-grid,
  html.native-layout-guard body[data-theme] #lookbook .lookbook-grid {
    gap: 6px !important;
  }

  #lookbook #lookbookGrid > .look-card:nth-child(n + 2),
  body[data-theme] #lookbook #lookbookGrid > .look-card:nth-child(n + 2),
  html.native-layout-guard #lookbook #lookbookGrid > .look-card:nth-child(n + 2),
  html.native-layout-guard body[data-theme] #lookbook #lookbookGrid > .look-card:nth-child(n + 2) {
    display: none !important;
  }

  #lookbook .look-card,
  body[data-theme] #lookbook .look-card,
  html.native-layout-guard #lookbook .look-card,
  html.native-layout-guard body[data-theme] #lookbook .look-card {
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  #lookbook .look-card-head,
  body[data-theme] #lookbook .look-card-head,
  html.native-layout-guard #lookbook .look-card-head,
  html.native-layout-guard body[data-theme] #lookbook .look-card-head {
    gap: 6px !important;
  }

  #lookbook .look-card-head .trend-score,
  body[data-theme] #lookbook .look-card-head .trend-score,
  html.native-layout-guard #lookbook .look-card-head .trend-score,
  html.native-layout-guard body[data-theme] #lookbook .look-card-head .trend-score {
    min-height: 24px !important;
    padding: 4px 8px !important;
    font-size: 0.56rem !important;
    line-height: 1 !important;
  }

  #lookbook .look-card h3,
  body[data-theme] #lookbook .look-card h3,
  html.native-layout-guard #lookbook .look-card h3,
  html.native-layout-guard body[data-theme] #lookbook .look-card h3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.9rem !important;
    line-height: 1.06 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }

  #lookbook .look-card-head > strong,
  body[data-theme] #lookbook .look-card-head > strong,
  html.native-layout-guard #lookbook .look-card-head > strong,
  html.native-layout-guard body[data-theme] #lookbook .look-card-head > strong {
    min-width: 60px !important;
    padding: 6px 8px !important;
    font-size: 0.66rem !important;
  }

  #lookbook .look-products,
  body[data-theme] #lookbook .look-products,
  html.native-layout-guard #lookbook .look-products,
  html.native-layout-guard body[data-theme] #lookbook .look-products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #lookbook .look-product,
  body[data-theme] #lookbook .look-product,
  html.native-layout-guard #lookbook .look-product,
  html.native-layout-guard body[data-theme] #lookbook .look-product {
    min-height: 42px !important;
    padding: 5px !important;
    border-radius: 10px !important;
  }

  #lookbook .look-product img,
  body[data-theme] #lookbook .look-product img,
  html.native-layout-guard #lookbook .look-product img,
  html.native-layout-guard body[data-theme] #lookbook .look-product img {
    display: none !important;
  }

  #lookbook .look-product span,
  body[data-theme] #lookbook .look-product span,
  html.native-layout-guard #lookbook .look-product span,
  html.native-layout-guard body[data-theme] #lookbook .look-product span {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.55rem !important;
    line-height: 1.05 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  #lookbook .look-stats,
  body[data-theme] #lookbook .look-stats,
  html.native-layout-guard #lookbook .look-stats,
  html.native-layout-guard body[data-theme] #lookbook .look-stats {
    gap: 4px !important;
  }

  #lookbook .look-stats span,
  body[data-theme] #lookbook .look-stats span,
  html.native-layout-guard #lookbook .look-stats span,
  html.native-layout-guard body[data-theme] #lookbook .look-stats span {
    min-height: 24px !important;
    padding: 4px 7px !important;
    font-size: 0.54rem !important;
  }

  #lookbook .look-stats span:nth-child(n + 3),
  body[data-theme] #lookbook .look-stats span:nth-child(n + 3),
  html.native-layout-guard #lookbook .look-stats span:nth-child(n + 3),
  html.native-layout-guard body[data-theme] #lookbook .look-stats span:nth-child(n + 3),
  #lookbook .look-script p:nth-child(n + 2),
  body[data-theme] #lookbook .look-script p:nth-child(n + 2),
  html.native-layout-guard #lookbook .look-script p:nth-child(n + 2),
  html.native-layout-guard body[data-theme] #lookbook .look-script p:nth-child(n + 2) {
    display: none !important;
  }

  #lookbook .look-script p,
  body[data-theme] #lookbook .look-script p,
  html.native-layout-guard #lookbook .look-script p,
  html.native-layout-guard body[data-theme] #lookbook .look-script p {
    display: -webkit-box !important;
    overflow: hidden !important;
    padding: 6px 8px !important;
    border-radius: 10px !important;
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  #lookbook .look-card .primary-button.full,
  body[data-theme] #lookbook .look-card .primary-button.full,
  html.native-layout-guard #lookbook .look-card .primary-button.full,
  html.native-layout-guard body[data-theme] #lookbook .look-card .primary-button.full {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
  }

  #trends .trend-metrics {
    margin-top: 0 !important;
  }

  #trends .trend-grid,
  body[data-theme] #trends .trend-grid,
  html.native-layout-guard #trends .trend-grid,
  html.native-layout-guard body[data-theme] #trends .trend-grid {
    gap: 6px !important;
  }

  #trends .trend-card,
  body[data-theme] #trends .trend-card,
  html.native-layout-guard #trends .trend-card,
  html.native-layout-guard body[data-theme] #trends .trend-card {
    gap: 5px !important;
    padding: 8px !important;
    border-radius: 13px !important;
  }

  #trends .trend-card p,
  body[data-theme] #trends .trend-card p,
  html.native-layout-guard #trends .trend-card p,
  html.native-layout-guard body[data-theme] #trends .trend-card p {
    font-size: 0.64rem !important;
    line-height: 1.12 !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }

  #trends .trend-card-meta span:nth-child(n + 2),
  #trends .trend-card .pill:nth-child(n + 3),
  body[data-theme] #trends .trend-card-meta span:nth-child(n + 2),
  body[data-theme] #trends .trend-card .pill:nth-child(n + 3),
  html.native-layout-guard #trends .trend-card-meta span:nth-child(n + 2),
  html.native-layout-guard #trends .trend-card .pill:nth-child(n + 3),
  html.native-layout-guard body[data-theme] #trends .trend-card-meta span:nth-child(n + 2),
  html.native-layout-guard body[data-theme] #trends .trend-card .pill:nth-child(n + 3) {
    display: none !important;
  }

  #trends .trend-card-meta span,
  #trends .trend-card .pill,
  body[data-theme] #trends .trend-card-meta span,
  body[data-theme] #trends .trend-card .pill,
  html.native-layout-guard #trends .trend-card-meta span,
  html.native-layout-guard #trends .trend-card .pill,
  html.native-layout-guard body[data-theme] #trends .trend-card-meta span,
  html.native-layout-guard body[data-theme] #trends .trend-card .pill {
    min-height: 21px !important;
    padding: 3px 6px !important;
    font-size: 0.5rem !important;
  }

  #report .report-panel,
  body[data-theme] #report .report-panel,
  html.native-layout-guard #report .report-panel,
  html.native-layout-guard body[data-theme] #report .report-panel {
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }

  #report .report-panel > .panel-head,
  body[data-theme] #report .report-panel > .panel-head,
  html.native-layout-guard #report .report-panel > .panel-head,
  html.native-layout-guard body[data-theme] #report .report-panel > .panel-head {
    gap: 7px !important;
    margin-bottom: 0 !important;
  }

  #report .report-panel > .panel-head .eyebrow,
  body[data-theme] #report .report-panel > .panel-head .eyebrow,
  html.native-layout-guard #report .report-panel > .panel-head .eyebrow,
  html.native-layout-guard body[data-theme] #report .report-panel > .panel-head .eyebrow {
    display: none !important;
  }

  #report .report-panel > .panel-head h3,
  body[data-theme] #report .report-panel > .panel-head h3,
  html.native-layout-guard #report .report-panel > .panel-head h3,
  html.native-layout-guard body[data-theme] #report .report-panel > .panel-head h3 {
    font-size: 1rem !important;
    line-height: 1.04 !important;
  }
}

/* v503-density-regression-fixes: remove clipped copy and stray collapsed Trend buttons. */
@media (max-width: 900px) {
  #trends .trend-intel-panel.mobile-collapsible.is-collapsed .trend-intel-actions,
  body[data-theme] #trends .trend-intel-panel.mobile-collapsible.is-collapsed .trend-intel-actions,
  html.native-layout-guard #trends .trend-intel-panel.mobile-collapsible.is-collapsed .trend-intel-actions,
  html.native-layout-guard body[data-theme] #trends .trend-intel-panel.mobile-collapsible.is-collapsed .trend-intel-actions {
    display: none !important;
  }

  #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head > div,
  body[data-theme] #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head > div,
  html.native-layout-guard #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head > div,
  html.native-layout-guard body[data-theme] #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head > div {
    display: block !important;
    min-width: 0 !important;
  }

  #trends .trend-metrics > *,
  body[data-theme] #trends .trend-metrics > *,
  html.native-layout-guard #trends .trend-metrics > *,
  html.native-layout-guard body[data-theme] #trends .trend-metrics > * {
    min-height: 54px !important;
  }

  #trends .trend-metrics > *:last-child strong,
  body[data-theme] #trends .trend-metrics > *:last-child strong,
  html.native-layout-guard #trends .trend-metrics > *:last-child strong,
  html.native-layout-guard body[data-theme] #trends .trend-metrics > *:last-child strong {
    font-size: 0.55rem !important;
    line-height: 1.06 !important;
    overflow-wrap: anywhere !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  #lookbook .look-card h3,
  body[data-theme] #lookbook .look-card h3,
  html.native-layout-guard #lookbook .look-card h3,
  html.native-layout-guard body[data-theme] #lookbook .look-card h3 {
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  #lookbook .look-script,
  body[data-theme] #lookbook .look-script,
  html.native-layout-guard #lookbook .look-script,
  html.native-layout-guard body[data-theme] #lookbook .look-script {
    display: none !important;
  }

  #lookbook .reservation-panel.mobile-collapsible.is-collapsed,
  body[data-theme] #lookbook .reservation-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard #lookbook .reservation-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #lookbook .reservation-panel.mobile-collapsible.is-collapsed {
    border-color: rgba(245, 241, 232, 0.14) !important;
    background: #171a21 !important;
    color: #fffaf2 !important;
  }
}

/* v504-trend-intel-actions-mobile: keep import buttons readable instead of squeezed vertical text. */
@media (max-width: 900px) {
  #trends .trend-intel-head,
  body[data-theme] #trends .trend-intel-head,
  html.native-layout-guard #trends .trend-intel-head,
  html.native-layout-guard body[data-theme] #trends .trend-intel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  #trends .trend-intel-actions,
  body[data-theme] #trends .trend-intel-actions,
  html.native-layout-guard #trends .trend-intel-actions,
  html.native-layout-guard body[data-theme] #trends .trend-intel-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 78px) !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
  }

  #trends .trend-intel-actions :is(.primary-button, .ghost-button),
  body[data-theme] #trends .trend-intel-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #trends .trend-intel-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #trends .trend-intel-actions :is(.primary-button, .ghost-button) {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 5px !important;
    border-radius: 12px !important;
    font-size: 0.5rem !important;
    line-height: 1.04 !important;
    white-space: normal !important;
  }
}

/* v505-passport-history-density: trim profile memory screens without losing the decision content. */
@media (max-width: 900px) {
  #passport > .section-head,
  body[data-theme] #passport > .section-head,
  html.native-layout-guard #passport > .section-head,
  html.native-layout-guard body[data-theme] #passport > .section-head,
  #history > .section-head,
  body[data-theme] #history > .section-head,
  html.native-layout-guard #history > .section-head,
  html.native-layout-guard body[data-theme] #history > .section-head {
    gap: 7px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }

  #passport > .section-head .eyebrow,
  body[data-theme] #passport > .section-head .eyebrow,
  html.native-layout-guard #passport > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] #passport > .section-head .eyebrow,
  #history > .section-head .eyebrow,
  body[data-theme] #history > .section-head .eyebrow,
  html.native-layout-guard #history > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] #history > .section-head .eyebrow {
    display: none !important;
  }

  #passport > .section-head h2,
  body[data-theme] #passport > .section-head h2,
  html.native-layout-guard #passport > .section-head h2,
  html.native-layout-guard body[data-theme] #passport > .section-head h2,
  #history > .section-head h2,
  body[data-theme] #history > .section-head h2,
  html.native-layout-guard #history > .section-head h2,
  html.native-layout-guard body[data-theme] #history > .section-head h2 {
    margin: 0 !important;
    font-size: 1.34rem !important;
    line-height: 1.03 !important;
    overflow-wrap: anywhere !important;
  }

  #passport > .section-head .section-actions,
  body[data-theme] #passport > .section-head .section-actions,
  html.native-layout-guard #passport > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #passport > .section-head .section-actions,
  #history > .section-head .section-actions,
  body[data-theme] #history > .section-head .section-actions,
  html.native-layout-guard #history > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #history > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #passport > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #passport > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #passport > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #passport > .section-head .section-actions :is(.primary-button, .ghost-button),
  #history > .section-head .section-actions .ghost-button,
  body[data-theme] #history > .section-head .section-actions .ghost-button,
  html.native-layout-guard #history > .section-head .section-actions .ghost-button,
  html.native-layout-guard body[data-theme] #history > .section-head .section-actions .ghost-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    font-size: 0.74rem !important;
    line-height: 1.03 !important;
    white-space: normal !important;
  }

  #passport .passport-layout,
  body[data-theme] #passport .passport-layout,
  html.native-layout-guard #passport .passport-layout,
  html.native-layout-guard body[data-theme] #passport .passport-layout,
  #history .history-layout,
  body[data-theme] #history .history-layout,
  html.native-layout-guard #history .history-layout,
  html.native-layout-guard body[data-theme] #history .history-layout {
    gap: 6px !important;
    align-content: start !important;
  }

  #passport .mobile-collapsible,
  body[data-theme] #passport .mobile-collapsible,
  html.native-layout-guard #passport .mobile-collapsible,
  html.native-layout-guard body[data-theme] #passport .mobile-collapsible,
  #passport .mobile-collapsible.is-collapsed,
  body[data-theme] #passport .mobile-collapsible.is-collapsed,
  html.native-layout-guard #passport .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #passport .mobile-collapsible.is-collapsed {
    margin-bottom: 0 !important;
  }

  #passport .mobile-collapsible.is-collapsed,
  body[data-theme] #passport .mobile-collapsible.is-collapsed,
  html.native-layout-guard #passport .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #passport .mobile-collapsible.is-collapsed {
    min-height: 58px !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
  }

  #passport .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head),
  body[data-theme] #passport .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head),
  html.native-layout-guard #passport .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head),
  html.native-layout-guard body[data-theme] #passport .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  #passport .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow,
  body[data-theme] #passport .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow,
  html.native-layout-guard #passport .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow,
  html.native-layout-guard body[data-theme] #passport .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow {
    display: none !important;
  }

  #passport .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3,
  body[data-theme] #passport .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3,
  html.native-layout-guard #passport .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3,
  html.native-layout-guard body[data-theme] #passport .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3 {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.04 !important;
    overflow-wrap: anywhere !important;
  }

  #passport .passport-card-panel,
  body[data-theme] #passport .passport-card-panel,
  html.native-layout-guard #passport .passport-card-panel,
  html.native-layout-guard body[data-theme] #passport .passport-card-panel {
    padding: 6px !important;
    border-radius: 16px !important;
  }

  #passport .passport-card,
  body[data-theme] #passport .passport-card,
  html.native-layout-guard #passport .passport-card,
  html.native-layout-guard body[data-theme] #passport .passport-card {
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  #passport .passport-card-head,
  body[data-theme] #passport .passport-card-head,
  html.native-layout-guard #passport .passport-card-head,
  html.native-layout-guard body[data-theme] #passport .passport-card-head {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 7px !important;
  }

  #passport .passport-card-head .eyebrow,
  body[data-theme] #passport .passport-card-head .eyebrow,
  html.native-layout-guard #passport .passport-card-head .eyebrow,
  html.native-layout-guard body[data-theme] #passport .passport-card-head .eyebrow {
    display: none !important;
  }

  #passport .passport-card-head h3,
  body[data-theme] #passport .passport-card-head h3,
  html.native-layout-guard #passport .passport-card-head h3,
  html.native-layout-guard body[data-theme] #passport .passport-card-head h3 {
    font-size: 1rem !important;
    line-height: 1.04 !important;
  }

  #passport #passportScore,
  body[data-theme] #passport #passportScore,
  html.native-layout-guard #passport #passportScore,
  html.native-layout-guard body[data-theme] #passport #passportScore {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    font-size: 0.9rem !important;
  }

  #passport .passport-metrics,
  body[data-theme] #passport .passport-metrics,
  html.native-layout-guard #passport .passport-metrics,
  html.native-layout-guard body[data-theme] #passport .passport-metrics,
  #history .style-memory-metrics,
  body[data-theme] #history .style-memory-metrics,
  html.native-layout-guard #history .style-memory-metrics,
  html.native-layout-guard body[data-theme] #history .style-memory-metrics {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #passport .passport-metrics > *,
  body[data-theme] #passport .passport-metrics > *,
  html.native-layout-guard #passport .passport-metrics > *,
  html.native-layout-guard body[data-theme] #passport .passport-metrics > *,
  #history .style-memory-metrics > *,
  body[data-theme] #history .style-memory-metrics > *,
  html.native-layout-guard #history .style-memory-metrics > *,
  html.native-layout-guard body[data-theme] #history .style-memory-metrics > * {
    min-height: 42px !important;
    padding: 5px 4px !important;
    border-radius: 10px !important;
  }

  #passport .passport-metrics strong,
  body[data-theme] #passport .passport-metrics strong,
  html.native-layout-guard #passport .passport-metrics strong,
  html.native-layout-guard body[data-theme] #passport .passport-metrics strong,
  #history .style-memory-metrics strong,
  body[data-theme] #history .style-memory-metrics strong,
  html.native-layout-guard #history .style-memory-metrics strong,
  html.native-layout-guard body[data-theme] #history .style-memory-metrics strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.68rem !important;
    line-height: 1.02 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }

  #passport .passport-metrics span,
  body[data-theme] #passport .passport-metrics span,
  html.native-layout-guard #passport .passport-metrics span,
  html.native-layout-guard body[data-theme] #passport .passport-metrics span,
  #history .style-memory-metrics span,
  body[data-theme] #history .style-memory-metrics span,
  html.native-layout-guard #history .style-memory-metrics span,
  html.native-layout-guard body[data-theme] #history .style-memory-metrics span {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.47rem !important;
    line-height: 1.03 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  #passport .passport-dna,
  body[data-theme] #passport .passport-dna,
  html.native-layout-guard #passport .passport-dna,
  html.native-layout-guard body[data-theme] #passport .passport-dna {
    gap: 4px !important;
  }

  #passport .passport-dna-row,
  body[data-theme] #passport .passport-dna-row,
  html.native-layout-guard #passport .passport-dna-row,
  html.native-layout-guard body[data-theme] #passport .passport-dna-row {
    min-height: 40px !important;
    padding: 5px 6px !important;
    border-radius: 10px !important;
  }

  #passport .passport-reasons p,
  body[data-theme] #passport .passport-reasons p,
  html.native-layout-guard #passport .passport-reasons p,
  html.native-layout-guard body[data-theme] #passport .passport-reasons p {
    padding: 6px 8px !important;
    border-radius: 10px !important;
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }

  #history .history-block,
  body[data-theme] #history .history-block,
  html.native-layout-guard #history .history-block,
  html.native-layout-guard body[data-theme] #history .history-block {
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }

  #history .history-block-head .eyebrow,
  body[data-theme] #history .history-block-head .eyebrow,
  html.native-layout-guard #history .history-block-head .eyebrow,
  html.native-layout-guard body[data-theme] #history .history-block-head .eyebrow {
    display: none !important;
  }

  #history .history-block-head h3,
  body[data-theme] #history .history-block-head h3,
  html.native-layout-guard #history .history-block-head h3,
  html.native-layout-guard body[data-theme] #history .history-block-head h3 {
    font-size: 1rem !important;
    line-height: 1.04 !important;
  }

  #history .history-grid,
  #history .saved-look-grid,
  body[data-theme] #history .history-grid,
  body[data-theme] #history .saved-look-grid,
  html.native-layout-guard #history .history-grid,
  html.native-layout-guard #history .saved-look-grid,
  html.native-layout-guard body[data-theme] #history .history-grid,
  html.native-layout-guard body[data-theme] #history .saved-look-grid {
    gap: 5px !important;
  }

  #history .empty-card,
  body[data-theme] #history .empty-card,
  html.native-layout-guard #history .empty-card,
  html.native-layout-guard body[data-theme] #history .empty-card {
    min-height: 96px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  #history .empty-card h3,
  body[data-theme] #history .empty-card h3,
  html.native-layout-guard #history .empty-card h3,
  html.native-layout-guard body[data-theme] #history .empty-card h3 {
    font-size: 0.96rem !important;
    line-height: 1.05 !important;
  }

  #history .empty-card p,
  body[data-theme] #history .empty-card p,
  html.native-layout-guard #history .empty-card p,
  html.native-layout-guard body[data-theme] #history .empty-card p {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.68rem !important;
    line-height: 1.12 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
}

/* v506-studio-coach-final-scroll: remove the final 29px mobile scroll tail. */
@media (max-width: 900px) {
  #studio .photo-panel,
  body[data-theme] #studio .photo-panel,
  html.native-layout-guard #studio .photo-panel,
  html.native-layout-guard body[data-theme] #studio .photo-panel {
    gap: 6px !important;
    padding: 9px !important;
  }

  #studio .photo-panel .panel-head,
  body[data-theme] #studio .photo-panel .panel-head,
  html.native-layout-guard #studio .photo-panel .panel-head,
  html.native-layout-guard body[data-theme] #studio .photo-panel .panel-head {
    padding-bottom: 6px !important;
  }

  #studio .upload-zone,
  body[data-theme] #studio .upload-zone,
  html.native-layout-guard #studio .upload-zone,
  html.native-layout-guard body[data-theme] #studio .upload-zone {
    min-height: 190px !important;
    height: 190px !important;
  }

  #studio .score-wrap,
  body[data-theme] #studio .score-wrap,
  html.native-layout-guard #studio .score-wrap,
  html.native-layout-guard body[data-theme] #studio .score-wrap {
    min-height: 66px !important;
    padding: 7px !important;
  }

  #coach > .section-head,
  body[data-theme] #coach > .section-head,
  html.native-layout-guard #coach > .section-head,
  html.native-layout-guard body[data-theme] #coach > .section-head {
    gap: 7px !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }

  #coach > .section-head .eyebrow,
  body[data-theme] #coach > .section-head .eyebrow,
  html.native-layout-guard #coach > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] #coach > .section-head .eyebrow {
    display: none !important;
  }

  #coach > .section-head h2,
  body[data-theme] #coach > .section-head h2,
  html.native-layout-guard #coach > .section-head h2,
  html.native-layout-guard body[data-theme] #coach > .section-head h2 {
    margin: 0 !important;
    font-size: 1.34rem !important;
    line-height: 1.03 !important;
    overflow-wrap: anywhere !important;
  }

  #coach > .section-head .section-actions,
  body[data-theme] #coach > .section-head .section-actions,
  html.native-layout-guard #coach > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #coach > .section-head .section-actions {
    gap: 6px !important;
  }

  #coach > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #coach > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #coach > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #coach > .section-head .section-actions :is(.primary-button, .ghost-button) {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    line-height: 1.03 !important;
  }

  #coach .mobile-collapsible,
  body[data-theme] #coach .mobile-collapsible,
  html.native-layout-guard #coach .mobile-collapsible,
  html.native-layout-guard body[data-theme] #coach .mobile-collapsible,
  #coach .mobile-collapsible.is-collapsed,
  body[data-theme] #coach .mobile-collapsible.is-collapsed,
  html.native-layout-guard #coach .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #coach .mobile-collapsible.is-collapsed {
    margin-bottom: 0 !important;
  }

  #coach .mobile-collapsible.is-collapsed,
  body[data-theme] #coach .mobile-collapsible.is-collapsed,
  html.native-layout-guard #coach .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #coach .mobile-collapsible.is-collapsed {
    min-height: 58px !important;
    padding: 7px 10px !important;
    border-radius: 14px !important;
  }

  #coach .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head),
  body[data-theme] #coach .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head),
  html.native-layout-guard #coach .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head),
  html.native-layout-guard body[data-theme] #coach .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    gap: 8px !important;
  }

  #coach .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow,
  body[data-theme] #coach .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow,
  html.native-layout-guard #coach .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow,
  html.native-layout-guard body[data-theme] #coach .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) .eyebrow {
    display: none !important;
  }

  #coach .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3,
  body[data-theme] #coach .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3,
  html.native-layout-guard #coach .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3,
  html.native-layout-guard body[data-theme] #coach .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head) h3 {
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.04 !important;
  }
}

/* v507-studio-upload-final-density: make Studio fit the phone viewport without hiding upload. */
@media (max-width: 900px) {
  #studio .upload-zone,
  body[data-theme] #studio .upload-zone,
  html.native-layout-guard #studio .upload-zone,
  html.native-layout-guard body[data-theme] #studio .upload-zone {
    min-height: 160px !important;
    height: 160px !important;
  }

  #studio .upload-zone span,
  body[data-theme] #studio .upload-zone span,
  html.native-layout-guard #studio .upload-zone span,
  html.native-layout-guard body[data-theme] #studio .upload-zone span {
    min-height: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
  }
}

/* v508-studio-upload-specificity-lock: beat the earlier photo-panel clamp measured at 226px. */
@media (max-width: 900px) {
  html.native-layout-guard #studio .photo-panel .upload-zone,
  html.native-layout-guard body[data-theme] #studio .photo-panel .upload-zone,
  main > #studio .photo-panel .upload-zone,
  body[data-theme] main > #studio .photo-panel .upload-zone,
  #studio .photo-panel .upload-zone,
  body[data-theme] #studio .photo-panel .upload-zone {
    height: 186px !important;
    min-height: 186px !important;
    max-height: 186px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }

  html.native-layout-guard #studio .photo-panel .upload-zone span,
  html.native-layout-guard body[data-theme] #studio .photo-panel .upload-zone span,
  main > #studio .photo-panel .upload-zone span,
  body[data-theme] main > #studio .photo-panel .upload-zone span,
  #studio .photo-panel .upload-zone span,
  body[data-theme] #studio .photo-panel .upload-zone span {
    min-height: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
  }
}

/* v509-clients-mobile-pipeline-polish: replace the cut-off white kanban with a compact mobile list. */
@media (max-width: 900px) {
  #clients .client-pipeline,
  body[data-theme] #clients .client-pipeline,
  html.native-layout-guard #clients .client-pipeline,
  html.native-layout-guard body[data-theme] #clients .client-pipeline {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    max-height: 292px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(251, 246, 234, 0.08) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(145deg, rgba(45, 210, 196, 0.08), transparent 48%),
      #101318 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
    padding: 8px !important;
    scroll-snap-type: none !important;
    scrollbar-width: none !important;
  }

  #clients .client-pipeline::-webkit-scrollbar,
  body[data-theme] #clients .client-pipeline::-webkit-scrollbar,
  html.native-layout-guard #clients .client-pipeline::-webkit-scrollbar,
  html.native-layout-guard body[data-theme] #clients .client-pipeline::-webkit-scrollbar {
    display: none !important;
  }

  #clients .pipeline-column,
  body[data-theme] #clients .pipeline-column,
  html.native-layout-guard #clients .pipeline-column,
  html.native-layout-guard body[data-theme] #clients .pipeline-column {
    display: grid !important;
    gap: 7px !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border: 1px solid rgba(251, 246, 234, 0.08) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(135deg, rgba(251, 246, 234, 0.07), rgba(251, 246, 234, 0.018)),
      #171a20 !important;
    box-shadow: none !important;
    padding: 8px !important;
    scroll-snap-align: none !important;
  }

  #clients .pipeline-column:has(.pipeline-empty),
  body[data-theme] #clients .pipeline-column:has(.pipeline-empty),
  html.native-layout-guard #clients .pipeline-column:has(.pipeline-empty),
  html.native-layout-guard body[data-theme] #clients .pipeline-column:has(.pipeline-empty) {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 56px !important;
    padding: 7px 8px !important;
  }

  #clients .pipeline-column:has(.pipeline-empty) .pipeline-list,
  body[data-theme] #clients .pipeline-column:has(.pipeline-empty) .pipeline-list,
  html.native-layout-guard #clients .pipeline-column:has(.pipeline-empty) .pipeline-list,
  html.native-layout-guard body[data-theme] #clients .pipeline-column:has(.pipeline-empty) .pipeline-list {
    display: none !important;
  }

  #clients .pipeline-head,
  body[data-theme] #clients .pipeline-head,
  html.native-layout-guard #clients .pipeline-head,
  html.native-layout-guard body[data-theme] #clients .pipeline-head {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 38px !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.16) !important;
    padding: 4px 4px 4px 8px !important;
    backdrop-filter: none !important;
  }

  #clients .pipeline-head h3,
  body[data-theme] #clients .pipeline-head h3,
  html.native-layout-guard #clients .pipeline-head h3,
  html.native-layout-guard body[data-theme] #clients .pipeline-head h3 {
    margin: 0 !important;
    color: #fbf6ea !important;
    font-size: 0.92rem !important;
    line-height: 1.05 !important;
  }

  #clients .pipeline-head span,
  body[data-theme] #clients .pipeline-head span,
  html.native-layout-guard #clients .pipeline-head span,
  html.native-layout-guard body[data-theme] #clients .pipeline-head span {
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(45, 210, 196, 0.2) !important;
    border-radius: 12px !important;
    background: rgba(45, 210, 196, 0.1) !important;
    color: #fbf6ea !important;
    font-size: 0.82rem !important;
  }

  #clients .pipeline-list,
  body[data-theme] #clients .pipeline-list,
  html.native-layout-guard #clients .pipeline-list,
  html.native-layout-guard body[data-theme] #clients .pipeline-list {
    display: grid !important;
    gap: 7px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  #clients .lead-card,
  body[data-theme] #clients .lead-card,
  html.native-layout-guard #clients .lead-card,
  html.native-layout-guard body[data-theme] #clients .lead-card {
    display: grid !important;
    gap: 7px !important;
    border: 1px solid rgba(251, 246, 234, 0.08) !important;
    border-radius: 13px !important;
    background: rgba(251, 246, 234, 0.055) !important;
    box-shadow: none !important;
    padding: 8px !important;
  }

  #clients .lead-card-head,
  body[data-theme] #clients .lead-card-head,
  html.native-layout-guard #clients .lead-card-head,
  html.native-layout-guard body[data-theme] #clients .lead-card-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  #clients .lead-card-head strong,
  body[data-theme] #clients .lead-card-head strong,
  html.native-layout-guard #clients .lead-card-head strong,
  html.native-layout-guard body[data-theme] #clients .lead-card-head strong {
    color: #fbf6ea !important;
  }

  #clients .lead-card-head > strong,
  body[data-theme] #clients .lead-card-head > strong,
  html.native-layout-guard #clients .lead-card-head > strong,
  html.native-layout-guard body[data-theme] #clients .lead-card-head > strong {
    align-self: start !important;
    border: 1px solid rgba(239, 204, 113, 0.16) !important;
    background: rgba(239, 204, 113, 0.1) !important;
    color: #f5f57d !important;
    white-space: nowrap !important;
  }

  #clients .lead-card-head span,
  #clients .lead-card p,
  body[data-theme] #clients .lead-card-head span,
  body[data-theme] #clients .lead-card p,
  html.native-layout-guard #clients .lead-card-head span,
  html.native-layout-guard #clients .lead-card p,
  html.native-layout-guard body[data-theme] #clients .lead-card-head span,
  html.native-layout-guard body[data-theme] #clients .lead-card p {
    color: rgba(251, 246, 234, 0.68) !important;
  }

  #clients .lead-actions,
  body[data-theme] #clients .lead-actions,
  html.native-layout-guard #clients .lead-actions,
  html.native-layout-guard body[data-theme] #clients .lead-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  #clients .lead-actions .ghost-button,
  #clients .lead-actions .won-badge,
  body[data-theme] #clients .lead-actions .ghost-button,
  body[data-theme] #clients .lead-actions .won-badge,
  html.native-layout-guard #clients .lead-actions .ghost-button,
  html.native-layout-guard #clients .lead-actions .won-badge,
  html.native-layout-guard body[data-theme] #clients .lead-actions .ghost-button,
  html.native-layout-guard body[data-theme] #clients .lead-actions .won-badge {
    width: 100% !important;
    min-height: 40px !important;
    border-radius: 11px !important;
    padding: 0 6px !important;
    white-space: normal !important;
  }
}

/* v510-clients-mobile-pipeline-no-clipping: keep the overview short and non-clipped. */
@media (max-width: 900px) {
  #clients .pipeline-column:has(.pipeline-empty),
  body[data-theme] #clients .pipeline-column:has(.pipeline-empty),
  html.native-layout-guard #clients .pipeline-column:has(.pipeline-empty),
  html.native-layout-guard body[data-theme] #clients .pipeline-column:has(.pipeline-empty) {
    display: none !important;
  }

  #clients .pipeline-column,
  body[data-theme] #clients .pipeline-column,
  html.native-layout-guard #clients .pipeline-column,
  html.native-layout-guard body[data-theme] #clients .pipeline-column {
    overflow: visible !important;
  }

  #clients .lead-card,
  body[data-theme] #clients .lead-card,
  html.native-layout-guard #clients .lead-card,
  html.native-layout-guard body[data-theme] #clients .lead-card {
    min-height: 58px !important;
  }

  #clients .lead-card p,
  #clients .lead-actions,
  body[data-theme] #clients .lead-card p,
  body[data-theme] #clients .lead-actions,
  html.native-layout-guard #clients .lead-card p,
  html.native-layout-guard #clients .lead-actions,
  html.native-layout-guard body[data-theme] #clients .lead-card p,
  html.native-layout-guard body[data-theme] #clients .lead-actions {
    display: none !important;
  }

  #clients .lead-card-head,
  body[data-theme] #clients .lead-card-head,
  html.native-layout-guard #clients .lead-card-head,
  html.native-layout-guard body[data-theme] #clients .lead-card-head {
    align-items: center !important;
  }

  #clients .lead-card-head span,
  body[data-theme] #clients .lead-card-head span,
  html.native-layout-guard #clients .lead-card-head span,
  html.native-layout-guard body[data-theme] #clients .lead-card-head span {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
  }
}

/* v511-clients-collapsed-head-labels: collapsed client panels must not render as empty bars. */
@media (max-width: 900px) {
  #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head),
  body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head),
  html.native-layout-guard #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head),
  html.native-layout-guard body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) > :first-child,
  body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) > :first-child,
  html.native-layout-guard #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) > :first-child,
  html.native-layout-guard body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) > :first-child {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
  }

  #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) > :not(:first-child):not(.mobile-collapse-toggle),
  body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) > :not(:first-child):not(.mobile-collapse-toggle),
  html.native-layout-guard #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) > :not(:first-child):not(.mobile-collapse-toggle),
  html.native-layout-guard body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) > :not(:first-child):not(.mobile-collapse-toggle) {
    display: none !important;
  }

  #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) :is(.eyebrow, h3),
  body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) :is(.eyebrow, h3),
  html.native-layout-guard #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) :is(.eyebrow, h3),
  html.native-layout-guard body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) :is(.eyebrow, h3) {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #fbf6ea !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) .eyebrow,
  body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) .eyebrow,
  html.native-layout-guard #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) .eyebrow,
  html.native-layout-guard body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) .eyebrow {
    color: #2dd2c4 !important;
  }

  #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) .mobile-collapse-toggle,
  body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) .mobile-collapse-toggle,
  html.native-layout-guard #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) .mobile-collapse-toggle {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
  }
}

/* v512-clients-mobile-scroll-zero: keep the fixed client overview inside the first mobile viewport. */
@media (max-width: 900px) {
  #clients .client-pipeline,
  body[data-theme] #clients .client-pipeline,
  html.native-layout-guard #clients .client-pipeline,
  html.native-layout-guard body[data-theme] #clients .client-pipeline {
    gap: 6px !important;
    max-height: 210px !important;
    padding: 6px !important;
  }

  #clients .pipeline-column,
  body[data-theme] #clients .pipeline-column,
  html.native-layout-guard #clients .pipeline-column,
  html.native-layout-guard body[data-theme] #clients .pipeline-column {
    gap: 4px !important;
    padding: 5px !important;
  }

  #clients .pipeline-head,
  body[data-theme] #clients .pipeline-head,
  html.native-layout-guard #clients .pipeline-head,
  html.native-layout-guard body[data-theme] #clients .pipeline-head {
    grid-template-columns: minmax(0, 1fr) 34px !important;
    min-height: 36px !important;
    padding: 2px 2px 2px 8px !important;
  }

  #clients .pipeline-head span,
  body[data-theme] #clients .pipeline-head span,
  html.native-layout-guard #clients .pipeline-head span,
  html.native-layout-guard body[data-theme] #clients .pipeline-head span {
    min-width: 34px !important;
    width: 34px !important;
    height: 34px !important;
  }

  #clients .lead-card,
  body[data-theme] #clients .lead-card,
  html.native-layout-guard #clients .lead-card,
  html.native-layout-guard body[data-theme] #clients .lead-card {
    min-height: 48px !important;
    padding: 6px !important;
  }

  #clients .lead-card-head span,
  body[data-theme] #clients .lead-card-head span,
  html.native-layout-guard #clients .lead-card-head span,
  html.native-layout-guard body[data-theme] #clients .lead-card-head span {
    display: none !important;
  }

  #clients :is(.client-dossier-panel, .sales-funnel-panel, .action-queue-panel).mobile-collapsible.is-collapsed,
  body[data-theme] #clients :is(.client-dossier-panel, .sales-funnel-panel, .action-queue-panel).mobile-collapsible.is-collapsed,
  html.native-layout-guard #clients :is(.client-dossier-panel, .sales-funnel-panel, .action-queue-panel).mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #clients :is(.client-dossier-panel, .sales-funnel-panel, .action-queue-panel).mobile-collapsible.is-collapsed {
    min-height: 52px !important;
    padding: 6px 8px !important;
  }

  #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head),
  body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head),
  html.native-layout-guard #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head),
  html.native-layout-guard body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) {
    grid-template-columns: minmax(0, 1fr) 40px !important;
    min-height: 40px !important;
    height: 40px !important;
  }

  #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) .mobile-collapse-toggle,
  body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) .mobile-collapse-toggle,
  html.native-layout-guard #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] #clients .mobile-collapsible.is-collapsed > :is(.client-dossier-head, .sales-funnel-head, .action-queue-head) .mobile-collapse-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
}

/* v513-paywall-plan-cta-affordance: make each paid plan visibly purchasable, not just card-clickable. */
.paywall-product em .paywall-plan-cta,
body[data-theme] .paywall-product em .paywall-plan-cta {
  display: inline-grid !important;
  place-items: center !important;
  min-height: 30px !important;
  margin-top: 4px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(220, 232, 111, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(220, 232, 111, 0.13) !important;
  color: #fffbe9 !important;
  font-size: 0.66rem !important;
  font-style: normal !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.paywall-product[data-plan-tier="pro"] em .paywall-plan-cta,
body[data-theme] .paywall-product[data-plan-tier="pro"] em .paywall-plan-cta {
  background: #dce86f !important;
  color: #11140d !important;
}

@media (max-width: 430px) {
  .paywall-panel,
  body[data-theme] .paywall-panel {
    gap: 9px !important;
    padding: 14px !important;
  }

  .paywall-products,
  body[data-theme] .paywall-products {
    gap: 7px !important;
  }

  .paywall-product,
  body[data-theme] .paywall-product {
    min-height: 84px !important;
    padding: 9px 10px !important;
  }

  .paywall-product em .paywall-plan-cta,
  body[data-theme] .paywall-product em .paywall-plan-cta {
    min-height: 28px !important;
    margin-top: 3px !important;
    padding: 0 8px !important;
    font-size: 0.58rem !important;
  }
}

/* v514-inventory-tools-tray: keep database maintenance out of the first Szafa decision path. */
#inventory .inventory-tools-menu,
body[data-theme] #inventory .inventory-tools-menu {
  min-width: 0 !important;
}

#inventory .inventory-tools-menu summary,
body[data-theme] #inventory .inventory-tools-menu summary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(251, 246, 234, 0.12) !important;
  border-radius: 13px !important;
  background: rgba(251, 246, 234, 0.055) !important;
  color: rgba(251, 246, 234, 0.8) !important;
  cursor: pointer !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  list-style: none !important;
  white-space: nowrap !important;
}

#inventory .inventory-tools-menu summary::-webkit-details-marker,
body[data-theme] #inventory .inventory-tools-menu summary::-webkit-details-marker {
  display: none !important;
}

#inventory .inventory-tools-menu summary::after,
body[data-theme] #inventory .inventory-tools-menu summary::after {
  content: "+";
  color: #2dd2c4 !important;
}

#inventory .inventory-tools-menu[open] summary::after,
body[data-theme] #inventory .inventory-tools-menu[open] summary::after {
  content: "-";
}

@media (max-width: 900px) {
  #inventory > .section-head .section-actions,
  body[data-theme] #inventory > .section-head .section-actions,
  html.native-layout-guard #inventory > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #inventory > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(104px, auto) !important;
    align-items: center !important;
    gap: 7px !important;
  }

  #inventory .segmented,
  body[data-theme] #inventory .segmented,
  html.native-layout-guard #inventory .segmented,
  html.native-layout-guard body[data-theme] #inventory .segmented {
    min-width: 0 !important;
  }

  #inventory .inventory-tools-menu,
  body[data-theme] #inventory .inventory-tools-menu,
  html.native-layout-guard #inventory .inventory-tools-menu,
  html.native-layout-guard body[data-theme] #inventory .inventory-tools-menu {
    position: relative !important;
    justify-self: end !important;
    width: 100% !important;
    max-width: 118px !important;
  }

  #inventory .inventory-tools-menu summary,
  body[data-theme] #inventory .inventory-tools-menu summary,
  html.native-layout-guard #inventory .inventory-tools-menu summary,
  html.native-layout-guard body[data-theme] #inventory .inventory-tools-menu summary {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
  }

  #inventory .inventory-tools-menu .csv-actions,
  body[data-theme] #inventory .inventory-tools-menu .csv-actions,
  html.native-layout-guard #inventory .inventory-tools-menu .csv-actions,
  html.native-layout-guard body[data-theme] #inventory .inventory-tools-menu .csv-actions {
    position: absolute !important;
    z-index: 8 !important;
    right: 0 !important;
    top: calc(100% + 6px) !important;
    display: none !important;
    width: min(282px, calc(100vw - 34px)) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 7px !important;
    border: 1px solid rgba(251, 246, 234, 0.13) !important;
    border-radius: 14px !important;
    background: rgba(12, 14, 18, 0.98) !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36) !important;
  }

  #inventory .inventory-tools-menu[open] .csv-actions,
  body[data-theme] #inventory .inventory-tools-menu[open] .csv-actions,
  html.native-layout-guard #inventory .inventory-tools-menu[open] .csv-actions,
  html.native-layout-guard body[data-theme] #inventory .inventory-tools-menu[open] .csv-actions {
    display: grid !important;
  }

  #inventory .inventory-tools-menu .csv-actions :is(button, .import-button),
  body[data-theme] #inventory .inventory-tools-menu .csv-actions :is(button, .import-button),
  html.native-layout-guard #inventory .inventory-tools-menu .csv-actions :is(button, .import-button),
  html.native-layout-guard body[data-theme] #inventory .inventory-tools-menu .csv-actions :is(button, .import-button) {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 8px !important;
    border-radius: 11px !important;
    font-size: 0.68rem !important;
  }
}

/* v515-mobile-collapsed-headers-quiet: keep scan-first sections tappable without oversized title blocks. */
@media (max-width: 900px) {
  main .mobile-collapsible.is-collapsed,
  body[data-theme] main .mobile-collapsible.is-collapsed,
  html.native-layout-guard main .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed {
    min-height: 56px !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
    margin-bottom: 0 !important;
  }

  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head),
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 8px !important;
    min-height: 44px !important;
    height: auto !important;
    align-items: center !important;
  }

  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) > :first-child,
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) > :first-child,
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) > :first-child,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) > :first-child {
    display: grid !important;
    gap: 0 !important;
    align-content: center !important;
  }

  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) .eyebrow,
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) .eyebrow,
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) .eyebrow,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) .eyebrow {
    display: none !important;
  }

  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) :is(h2, h3, h4),
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) :is(h2, h3, h4),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) :is(h2, h3, h4),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head) :is(h2, h3, h4) {
    margin: 0 !important;
    color: #fffaf2 !important;
    font-size: 0.92rem !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    line-height: 1.08 !important;
  }

  main .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  body[data-theme] main .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard main .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed .mobile-collapse-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: 1.02rem !important;
    line-height: 1 !important;
  }
}

/* v516-mobile-section-head-quiet: make tool screens feel operational, not like oversized landing heroes. */
@media (max-width: 900px) {
  main > .content-band > .section-head,
  body[data-theme] main > .content-band > .section-head,
  html.native-layout-guard main > .content-band > .section-head,
  html.native-layout-guard body[data-theme] main > .content-band > .section-head {
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  main > .content-band > .section-head .eyebrow,
  body[data-theme] main > .content-band > .section-head .eyebrow,
  html.native-layout-guard main > .content-band > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] main > .content-band > .section-head .eyebrow {
    margin-bottom: 3px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }

  main > .content-band > .section-head h2,
  body[data-theme] main > .content-band > .section-head h2,
  html.native-layout-guard main > .content-band > .section-head h2,
  html.native-layout-guard body[data-theme] main > .content-band > .section-head h2 {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: 1.22rem !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  main > .content-band > .section-head .section-actions,
  body[data-theme] main > .content-band > .section-head .section-actions,
  html.native-layout-guard main > .content-band > .section-head .section-actions,
  html.native-layout-guard body[data-theme] main > .content-band > .section-head .section-actions {
    gap: 6px !important;
  }

  main > .content-band > .section-head .section-actions :is(button, .ghost-button, .primary-button),
  body[data-theme] main > .content-band > .section-head .section-actions :is(button, .ghost-button, .primary-button),
  html.native-layout-guard main > .content-band > .section-head .section-actions :is(button, .ghost-button, .primary-button),
  html.native-layout-guard body[data-theme] main > .content-band > .section-head .section-actions :is(button, .ghost-button, .primary-button) {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 0.72rem !important;
    line-height: 1.04 !important;
  }
}

/* v517-business-mobile-console: make the shop entry read like a working console, not a marketing hero. */
@media (max-width: 900px) {
  main > #business.business-band.active-view,
  body[data-theme] main > #business.business-band.active-view,
  html.native-layout-guard main > #business.business-band.active-view,
  html.native-layout-guard body[data-theme] main > #business.business-band.active-view {
    gap: 8px !important;
    padding: 8px 12px calc(var(--dock-height, 92px) + var(--safe-bottom, 0px) + 10px) !important;
  }

  #business .business-copy,
  body[data-theme] #business .business-copy,
  html.native-layout-guard #business .business-copy,
  html.native-layout-guard body[data-theme] #business .business-copy {
    display: grid !important;
    gap: 7px !important;
    padding: 10px !important;
    border: 1px solid rgba(251, 246, 234, 0.1) !important;
    border-radius: 14px !important;
    background:
      linear-gradient(145deg, rgba(239, 75, 139, 0.1), rgba(45, 210, 196, 0.055) 48%, transparent),
      #15191f !important;
  }

  #business .business-copy .eyebrow,
  body[data-theme] #business .business-copy .eyebrow,
  html.native-layout-guard #business .business-copy .eyebrow,
  html.native-layout-guard body[data-theme] #business .business-copy .eyebrow {
    margin: 0 !important;
    color: #2dd2c4 !important;
    font-size: 0.58rem !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }

  #business .business-copy h2,
  body[data-theme] #business .business-copy h2,
  html.native-layout-guard #business .business-copy h2,
  html.native-layout-guard body[data-theme] #business .business-copy h2 {
    margin: 0 !important;
    color: #fffaf2 !important;
    font-size: 1.08rem !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
    line-height: 1.04 !important;
  }

  #business .business-copy p,
  body[data-theme] #business .business-copy p,
  html.native-layout-guard #business .business-copy p,
  html.native-layout-guard body[data-theme] #business .business-copy p {
    max-width: 100% !important;
    margin: 0 !important;
    color: rgba(251, 246, 234, 0.68) !important;
    font-size: 0.72rem !important;
    line-height: 1.22 !important;
  }

  #business .business-status-grid,
  body[data-theme] #business .business-status-grid,
  html.native-layout-guard #business .business-status-grid,
  html.native-layout-guard body[data-theme] #business .business-status-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #business .business-status-grid span,
  body[data-theme] #business .business-status-grid span,
  html.native-layout-guard #business .business-status-grid span,
  html.native-layout-guard body[data-theme] #business .business-status-grid span {
    display: grid !important;
    gap: 1px !important;
    min-height: 36px !important;
    align-content: center !important;
    padding: 4px 7px !important;
    border: 1px solid rgba(251, 246, 234, 0.1) !important;
    border-radius: 11px !important;
    background: rgba(0, 0, 0, 0.2) !important;
  }

  #business .business-status-grid strong,
  body[data-theme] #business .business-status-grid strong,
  html.native-layout-guard #business .business-status-grid strong,
  html.native-layout-guard body[data-theme] #business .business-status-grid strong {
    color: #fffaf2 !important;
    font-size: 0.76rem !important;
    font-weight: 820 !important;
    line-height: 1 !important;
  }

  #business .business-status-grid em,
  body[data-theme] #business .business-status-grid em,
  html.native-layout-guard #business .business-status-grid em,
  html.native-layout-guard body[data-theme] #business .business-status-grid em {
    color: rgba(251, 246, 234, 0.58) !important;
    font-size: 0.58rem !important;
    font-style: normal !important;
    font-weight: 720 !important;
    line-height: 1 !important;
  }

  #business .business-actions,
  body[data-theme] #business .business-actions,
  html.native-layout-guard #business .business-actions,
  html.native-layout-guard body[data-theme] #business .business-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #business .business-actions > *,
  body[data-theme] #business .business-actions > *,
  html.native-layout-guard #business .business-actions > *,
  html.native-layout-guard body[data-theme] #business .business-actions > * {
    grid-column: auto !important;
  }

  #business .business-actions :is(.primary-button, .ghost-button),
  body[data-theme] #business .business-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #business .business-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #business .business-actions :is(.primary-button, .ghost-button) {
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 7px !important;
    border-radius: 12px !important;
    font-size: 0.58rem !important;
    line-height: 1.04 !important;
    white-space: normal !important;
  }

  #business .business-steps,
  body[data-theme] #business .business-steps,
  html.native-layout-guard #business .business-steps,
  html.native-layout-guard body[data-theme] #business .business-steps {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #business .business-step,
  body[data-theme] #business .business-step,
  html.native-layout-guard #business .business-step,
  html.native-layout-guard body[data-theme] #business .business-step {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    min-height: 66px !important;
    padding: 9px !important;
    border-radius: 14px !important;
  }

  #business .business-step span,
  body[data-theme] #business .business-step span,
  html.native-layout-guard #business .business-step span,
  html.native-layout-guard body[data-theme] #business .business-step span {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.72rem !important;
  }

  #business .business-step h3,
  body[data-theme] #business .business-step h3,
  html.native-layout-guard #business .business-step h3,
  html.native-layout-guard body[data-theme] #business .business-step h3 {
    font-size: 0.92rem !important;
    line-height: 1.08 !important;
  }

  #business .business-step p,
  body[data-theme] #business .business-step p,
  html.native-layout-guard #business .business-step p,
  html.native-layout-guard body[data-theme] #business .business-step p {
    font-size: 0.72rem !important;
    line-height: 1.18 !important;
  }
}

/* v518-community-mobile-tool-grid: make publishing tools scan like controls, not a long wall of bars. */
@media (max-width: 900px) {
  #community.community-band.active-view,
  body[data-theme] #community.community-band.active-view,
  html.native-layout-guard #community.community-band.active-view,
  html.native-layout-guard body[data-theme] #community.community-band.active-view {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    gap: 7px !important;
  }

  #community > .section-head,
  body[data-theme] #community > .section-head,
  html.native-layout-guard #community > .section-head,
  html.native-layout-guard body[data-theme] #community > .section-head {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) 74px !important;
    gap: 7px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
  }

  #community > .section-head h2,
  body[data-theme] #community > .section-head h2,
  html.native-layout-guard #community > .section-head h2,
  html.native-layout-guard body[data-theme] #community > .section-head h2 {
    font-size: 1.12rem !important;
    line-height: 1.03 !important;
  }

  #community > .section-head .ghost-button,
  body[data-theme] #community > .section-head .ghost-button,
  html.native-layout-guard #community > .section-head .ghost-button,
  html.native-layout-guard body[data-theme] #community > .section-head .ghost-button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 6px !important;
    border-radius: 11px !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
  }

  #community .mobile-collapsible.is-collapsed,
  body[data-theme] #community .mobile-collapsible.is-collapsed,
  html.native-layout-guard #community .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #community .mobile-collapsible.is-collapsed {
    grid-column: auto !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 4px !important;
    border-radius: 13px !important;
    background:
      linear-gradient(145deg, rgba(45, 210, 196, 0.06), rgba(239, 75, 139, 0.035)),
      #171a20 !important;
  }

  #community .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  body[data-theme] #community .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  html.native-layout-guard #community .mobile-collapsible.is-collapsed > .mobile-collapse-head,
  html.native-layout-guard body[data-theme] #community .mobile-collapsible.is-collapsed > .mobile-collapse-head {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    gap: 5px !important;
  }

  #community .mobile-collapsible.is-collapsed > .mobile-collapse-head h3,
  body[data-theme] #community .mobile-collapsible.is-collapsed > .mobile-collapse-head h3,
  html.native-layout-guard #community .mobile-collapsible.is-collapsed > .mobile-collapse-head h3,
  html.native-layout-guard body[data-theme] #community .mobile-collapsible.is-collapsed > .mobile-collapse-head h3 {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 0.82rem !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
  }

  #community .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  body[data-theme] #community .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard #community .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] #community .mobile-collapsible.is-collapsed .mobile-collapse-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 11px !important;
    font-size: 1.05rem !important;
  }

  #community .social-share-panel.mobile-collapsible.is-collapsed,
  body[data-theme] #community .social-share-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard #community .social-share-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #community .social-share-panel.mobile-collapsible.is-collapsed,
  #community .community-feed-panel.mobile-collapsible.is-collapsed,
  body[data-theme] #community .community-feed-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard #community .community-feed-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #community .community-feed-panel.mobile-collapsible.is-collapsed {
    border-color: rgba(45, 210, 196, 0.22) !important;
  }
}

/* v519-report-mobile-decision-grid: make the shop report a compact decision console on phones. */
@media (max-width: 900px) {
  #report > .section-head,
  body[data-theme] #report > .section-head,
  html.native-layout-guard #report > .section-head,
  html.native-layout-guard body[data-theme] #report > .section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
  }

  #report > .section-head h2,
  body[data-theme] #report > .section-head h2,
  html.native-layout-guard #report > .section-head h2,
  html.native-layout-guard body[data-theme] #report > .section-head h2 {
    font-size: 1.12rem !important;
    line-height: 1.03 !important;
  }

  #report > .section-head .section-actions,
  body[data-theme] #report > .section-head .section-actions,
  html.native-layout-guard #report > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #report > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #report > .section-head .section-actions :is(.primary-button, .ghost-button),
  body[data-theme] #report > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #report > .section-head .section-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #report > .section-head .section-actions :is(.primary-button, .ghost-button) {
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 6px !important;
    border-radius: 11px !important;
    font-size: 0.68rem !important;
    line-height: 1.04 !important;
    white-space: nowrap !important;
  }

  #report .report-layout,
  body[data-theme] #report .report-layout,
  html.native-layout-guard #report .report-layout,
  html.native-layout-guard body[data-theme] #report .report-layout {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    gap: 7px !important;
    margin-top: 7px !important;
  }

  #report .report-layout > .report-panel:first-child,
  body[data-theme] #report .report-layout > .report-panel:first-child,
  html.native-layout-guard #report .report-layout > .report-panel:first-child,
  html.native-layout-guard body[data-theme] #report .report-layout > .report-panel:first-child,
  #report .report-layout > .report-panel.mobile-collapsible:not(.is-collapsed),
  body[data-theme] #report .report-layout > .report-panel.mobile-collapsible:not(.is-collapsed),
  html.native-layout-guard #report .report-layout > .report-panel.mobile-collapsible:not(.is-collapsed),
  html.native-layout-guard body[data-theme] #report .report-layout > .report-panel.mobile-collapsible:not(.is-collapsed) {
    grid-column: 1 / -1 !important;
  }

  #report .report-layout > .report-panel:first-child,
  body[data-theme] #report .report-layout > .report-panel:first-child,
  html.native-layout-guard #report .report-layout > .report-panel:first-child,
  html.native-layout-guard body[data-theme] #report .report-layout > .report-panel:first-child {
    padding: 9px !important;
    border-radius: 14px !important;
  }

  #report .report-layout > .report-panel.mobile-collapsible.is-collapsed,
  body[data-theme] #report .report-layout > .report-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard #report .report-layout > .report-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #report .report-layout > .report-panel.mobile-collapsible.is-collapsed {
    grid-column: auto !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 4px !important;
    border-radius: 13px !important;
    background:
      linear-gradient(145deg, rgba(45, 210, 196, 0.06), rgba(239, 75, 139, 0.035)),
      #171a20 !important;
  }

  #report .report-layout > .report-panel.mobile-collapsible.is-collapsed > .mobile-collapse-head,
  body[data-theme] #report .report-layout > .report-panel.mobile-collapsible.is-collapsed > .mobile-collapse-head,
  html.native-layout-guard #report .report-layout > .report-panel.mobile-collapsible.is-collapsed > .mobile-collapse-head,
  html.native-layout-guard body[data-theme] #report .report-layout > .report-panel.mobile-collapsible.is-collapsed > .mobile-collapse-head {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 44px !important;
    height: 44px !important;
    gap: 5px !important;
  }

  #report .report-layout > .report-panel.mobile-collapsible.is-collapsed > .mobile-collapse-head h3,
  body[data-theme] #report .report-layout > .report-panel.mobile-collapsible.is-collapsed > .mobile-collapse-head h3,
  html.native-layout-guard #report .report-layout > .report-panel.mobile-collapsible.is-collapsed > .mobile-collapse-head h3,
  html.native-layout-guard body[data-theme] #report .report-layout > .report-panel.mobile-collapsible.is-collapsed > .mobile-collapse-head h3 {
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 0.82rem !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
  }

  #report .campaign-panel.mobile-collapsible.is-collapsed > .mobile-collapse-head .campaign-actions,
  body[data-theme] #report .campaign-panel.mobile-collapsible.is-collapsed > .mobile-collapse-head .campaign-actions,
  html.native-layout-guard #report .campaign-panel.mobile-collapsible.is-collapsed > .mobile-collapse-head .campaign-actions,
  html.native-layout-guard body[data-theme] #report .campaign-panel.mobile-collapsible.is-collapsed > .mobile-collapse-head .campaign-actions {
    display: none !important;
  }

  #report .report-layout > .report-panel.mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  body[data-theme] #report .report-layout > .report-panel.mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard #report .report-layout > .report-panel.mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] #report .report-layout > .report-panel.mobile-collapsible.is-collapsed .mobile-collapse-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 11px !important;
    font-size: 1.05rem !important;
  }
}

/* v520-trends-collapsed-import-guard: keep market import actions inside the expanded Trend panel. */
@media (max-width: 900px) {
  #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head,
  body[data-theme] #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head,
  html.native-layout-guard #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head,
  html.native-layout-guard body[data-theme] #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 5px !important;
    min-height: 44px !important;
    height: 44px !important;
    overflow: hidden !important;
  }

  #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head .trend-intel-actions,
  body[data-theme] #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head .trend-intel-actions,
  html.native-layout-guard #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head .trend-intel-actions,
  html.native-layout-guard body[data-theme] #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head .trend-intel-actions {
    display: none !important;
  }

  #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head h3,
  body[data-theme] #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head h3,
  html.native-layout-guard #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head h3,
  html.native-layout-guard body[data-theme] #trends .trend-intel-panel.mobile-collapsible.is-collapsed > .trend-intel-head h3 {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 0.9rem !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
  }
}

/* v521-history-empty-state-console: make empty style memory feel like a compact tool, not a tall report. */
@media (max-width: 900px) {
  #history > .section-head,
  body[data-theme] #history > .section-head,
  html.native-layout-guard #history > .section-head,
  html.native-layout-guard body[data-theme] #history > .section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 9px 10px !important;
    border-radius: 14px !important;
  }

  #history > .section-head h2,
  body[data-theme] #history > .section-head h2,
  html.native-layout-guard #history > .section-head h2,
  html.native-layout-guard body[data-theme] #history > .section-head h2 {
    font-size: 1.12rem !important;
    line-height: 1.03 !important;
  }

  #history > .section-head .section-actions,
  body[data-theme] #history > .section-head .section-actions,
  html.native-layout-guard #history > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #history > .section-head .section-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #history > .section-head .section-actions .ghost-button,
  body[data-theme] #history > .section-head .section-actions .ghost-button,
  html.native-layout-guard #history > .section-head .section-actions .ghost-button,
  html.native-layout-guard body[data-theme] #history > .section-head .section-actions .ghost-button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 6px !important;
    border-radius: 11px !important;
    font-size: 0.68rem !important;
    line-height: 1.04 !important;
    white-space: nowrap !important;
  }

  #history .style-memory-metrics,
  body[data-theme] #history .style-memory-metrics,
  html.native-layout-guard #history .style-memory-metrics,
  html.native-layout-guard body[data-theme] #history .style-memory-metrics {
    gap: 4px !important;
    padding-bottom: 4px !important;
  }

  #history .style-memory-metrics > *,
  body[data-theme] #history .style-memory-metrics > *,
  html.native-layout-guard #history .style-memory-metrics > *,
  html.native-layout-guard body[data-theme] #history .style-memory-metrics > * {
    min-height: 38px !important;
    padding: 4px !important;
    border-radius: 10px !important;
  }

  #history .history-layout,
  body[data-theme] #history .history-layout,
  html.native-layout-guard #history .history-layout,
  html.native-layout-guard body[data-theme] #history .history-layout {
    gap: 7px !important;
  }

  #history .history-block,
  body[data-theme] #history .history-block,
  html.native-layout-guard #history .history-block,
  html.native-layout-guard body[data-theme] #history .history-block {
    gap: 5px !important;
    padding: 7px !important;
    border-radius: 14px !important;
  }

  #history .history-block-head,
  body[data-theme] #history .history-block-head,
  html.native-layout-guard #history .history-block-head,
  html.native-layout-guard body[data-theme] #history .history-block-head {
    margin-bottom: 0 !important;
  }

  #history .history-block-head h3,
  body[data-theme] #history .history-block-head h3,
  html.native-layout-guard #history .history-block-head h3,
  html.native-layout-guard body[data-theme] #history .history-block-head h3 {
    font-size: 0.92rem !important;
    line-height: 1.04 !important;
  }

  #history .empty-card,
  body[data-theme] #history .empty-card,
  html.native-layout-guard #history .empty-card,
  html.native-layout-guard body[data-theme] #history .empty-card {
    min-height: 68px !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  #history .empty-card h3,
  body[data-theme] #history .empty-card h3,
  html.native-layout-guard #history .empty-card h3,
  html.native-layout-guard body[data-theme] #history .empty-card h3 {
    font-size: 0.86rem !important;
    line-height: 1.04 !important;
  }

  #history .empty-card p,
  body[data-theme] #history .empty-card p,
  html.native-layout-guard #history .empty-card p,
  html.native-layout-guard body[data-theme] #history .empty-card p {
    font-size: 0.62rem !important;
    line-height: 1.1 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
}

/* v522-clients-mobile-sales-console: make clienteling feel like a calm sales console, not a destructive admin panel. */
@media (max-width: 900px) {
  #clients,
  body[data-theme] #clients,
  html.native-layout-guard #clients,
  html.native-layout-guard body[data-theme] #clients {
    gap: 6px !important;
  }

  #clients > .section-head,
  body[data-theme] #clients > .section-head,
  html.native-layout-guard #clients > .section-head,
  html.native-layout-guard body[data-theme] #clients > .section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 82px !important;
    gap: 7px !important;
    align-items: center !important;
    padding: 8px 9px !important;
    border-radius: 14px !important;
  }

  #clients > .section-head .eyebrow,
  body[data-theme] #clients > .section-head .eyebrow,
  html.native-layout-guard #clients > .section-head .eyebrow,
  html.native-layout-guard body[data-theme] #clients > .section-head .eyebrow {
    display: none !important;
  }

  #clients > .section-head h2,
  body[data-theme] #clients > .section-head h2,
  html.native-layout-guard #clients > .section-head h2,
  html.native-layout-guard body[data-theme] #clients > .section-head h2 {
    margin: 0 !important;
    font-size: 1.14rem !important;
    line-height: 1.04 !important;
  }

  #clients #clearLeadsButton,
  body[data-theme] #clients #clearLeadsButton,
  html.native-layout-guard #clients #clearLeadsButton,
  html.native-layout-guard body[data-theme] #clients #clearLeadsButton {
    width: 82px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 7px !important;
    border-color: rgba(255, 153, 153, 0.28) !important;
    border-radius: 12px !important;
    background: rgba(86, 43, 48, 0.2) !important;
    color: #ffd0d0 !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #clients #leadForm.mobile-collapsible.is-collapsed,
  body[data-theme] #clients #leadForm.mobile-collapsible.is-collapsed,
  html.native-layout-guard #clients #leadForm.mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #clients #leadForm.mobile-collapsible.is-collapsed {
    min-height: 52px !important;
    padding: 6px 8px !important;
    border-radius: 14px !important;
  }

  #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head,
  body[data-theme] #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head,
  html.native-layout-guard #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head,
  html.native-layout-guard body[data-theme] #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head .eyebrow,
  body[data-theme] #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head .eyebrow,
  html.native-layout-guard #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head .eyebrow,
  html.native-layout-guard body[data-theme] #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head .eyebrow {
    display: none !important;
  }

  #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head h3,
  body[data-theme] #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head h3,
  html.native-layout-guard #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head h3,
  html.native-layout-guard body[data-theme] #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head h3 {
    margin: 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.04 !important;
  }

  #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head .mobile-collapse-toggle,
  body[data-theme] #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head .mobile-collapse-toggle,
  html.native-layout-guard #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] #clients #leadForm.mobile-collapsible.is-collapsed > .panel-head .mobile-collapse-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 12px !important;
  }

  #clients .client-metrics,
  body[data-theme] #clients .client-metrics,
  html.native-layout-guard #clients .client-metrics,
  html.native-layout-guard body[data-theme] #clients .client-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #clients .client-metrics div,
  body[data-theme] #clients .client-metrics div,
  html.native-layout-guard #clients .client-metrics div,
  html.native-layout-guard body[data-theme] #clients .client-metrics div {
    min-height: 42px !important;
    padding: 5px 4px !important;
    border-radius: 10px !important;
  }

  #clients .client-metrics strong,
  body[data-theme] #clients .client-metrics strong,
  html.native-layout-guard #clients .client-metrics strong,
  html.native-layout-guard body[data-theme] #clients .client-metrics strong {
    font-size: 0.74rem !important;
    line-height: 1.02 !important;
    white-space: nowrap !important;
  }

  #clients .client-metrics span,
  body[data-theme] #clients .client-metrics span,
  html.native-layout-guard #clients .client-metrics span,
  html.native-layout-guard body[data-theme] #clients .client-metrics span {
    font-size: 0.48rem !important;
    line-height: 1.03 !important;
    overflow-wrap: anywhere !important;
  }

  #clients .client-pipeline,
  body[data-theme] #clients .client-pipeline,
  html.native-layout-guard #clients .client-pipeline,
  html.native-layout-guard body[data-theme] #clients .client-pipeline {
    max-height: 178px !important;
    gap: 5px !important;
    padding: 5px !important;
    border-radius: 15px !important;
  }

  #clients .pipeline-column,
  body[data-theme] #clients .pipeline-column,
  html.native-layout-guard #clients .pipeline-column,
  html.native-layout-guard body[data-theme] #clients .pipeline-column {
    gap: 3px !important;
    padding: 4px !important;
    border-radius: 12px !important;
  }

  #clients .pipeline-head,
  body[data-theme] #clients .pipeline-head,
  html.native-layout-guard #clients .pipeline-head,
  html.native-layout-guard body[data-theme] #clients .pipeline-head {
    grid-template-columns: minmax(0, 1fr) 30px !important;
    min-height: 32px !important;
    padding: 2px 2px 2px 7px !important;
    border-radius: 10px !important;
  }

  #clients .pipeline-head h3,
  body[data-theme] #clients .pipeline-head h3,
  html.native-layout-guard #clients .pipeline-head h3,
  html.native-layout-guard body[data-theme] #clients .pipeline-head h3 {
    font-size: 0.78rem !important;
    line-height: 1.03 !important;
  }

  #clients .pipeline-head span,
  body[data-theme] #clients .pipeline-head span,
  html.native-layout-guard #clients .pipeline-head span,
  html.native-layout-guard body[data-theme] #clients .pipeline-head span {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 0.72rem !important;
  }

  #clients .lead-card,
  body[data-theme] #clients .lead-card,
  html.native-layout-guard #clients .lead-card,
  html.native-layout-guard body[data-theme] #clients .lead-card {
    min-height: 42px !important;
    padding: 5px !important;
    border-radius: 10px !important;
  }

  #clients .lead-card-head,
  body[data-theme] #clients .lead-card-head,
  html.native-layout-guard #clients .lead-card-head,
  html.native-layout-guard body[data-theme] #clients .lead-card-head {
    grid-template-columns: minmax(0, 1fr) minmax(62px, auto) !important;
    gap: 6px !important;
  }

  #clients .lead-card-head strong,
  body[data-theme] #clients .lead-card-head strong,
  html.native-layout-guard #clients .lead-card-head strong,
  html.native-layout-guard body[data-theme] #clients .lead-card-head strong {
    font-size: 0.78rem !important;
    line-height: 1.02 !important;
  }

  #clients .lead-card-head > strong,
  body[data-theme] #clients .lead-card-head > strong,
  html.native-layout-guard #clients .lead-card-head > strong,
  html.native-layout-guard body[data-theme] #clients .lead-card-head > strong {
    padding: 5px 6px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
  }
}

/* v523-business-mobile-workbench: make Sklepy feel like a working shop panel with compact decisions. */
@media (max-width: 900px) {
  main > #business.business-band.active-view,
  body[data-theme] main > #business.business-band.active-view,
  html.native-layout-guard main > #business.business-band.active-view,
  html.native-layout-guard body[data-theme] main > #business.business-band.active-view {
    gap: 6px !important;
    padding: 7px 10px calc(var(--dock-height, 92px) + var(--safe-bottom, 0px) + 8px) !important;
  }

  #business .business-copy,
  body[data-theme] #business .business-copy,
  html.native-layout-guard #business .business-copy,
  html.native-layout-guard body[data-theme] #business .business-copy {
    gap: 6px !important;
    padding: 8px 9px !important;
    border-radius: 13px !important;
  }

  #business .business-copy .eyebrow,
  body[data-theme] #business .business-copy .eyebrow,
  html.native-layout-guard #business .business-copy .eyebrow,
  html.native-layout-guard body[data-theme] #business .business-copy .eyebrow {
    font-size: 0.54rem !important;
    line-height: 1 !important;
  }

  #business .business-copy h2,
  body[data-theme] #business .business-copy h2,
  html.native-layout-guard #business .business-copy h2,
  html.native-layout-guard body[data-theme] #business .business-copy h2 {
    font-size: 1.16rem !important;
    line-height: 1.02 !important;
  }

  #business .business-copy p,
  body[data-theme] #business .business-copy p,
  html.native-layout-guard #business .business-copy p,
  html.native-layout-guard body[data-theme] #business .business-copy p {
    font-size: 0.68rem !important;
    line-height: 1.14 !important;
  }

  #business .business-status-grid,
  body[data-theme] #business .business-status-grid,
  html.native-layout-guard #business .business-status-grid,
  html.native-layout-guard body[data-theme] #business .business-status-grid {
    gap: 4px !important;
  }

  #business .business-status-grid span,
  body[data-theme] #business .business-status-grid span,
  html.native-layout-guard #business .business-status-grid span,
  html.native-layout-guard body[data-theme] #business .business-status-grid span {
    min-height: 38px !important;
    padding: 4px 5px !important;
    border-radius: 10px !important;
  }

  #business .business-status-grid strong,
  body[data-theme] #business .business-status-grid strong,
  html.native-layout-guard #business .business-status-grid strong,
  html.native-layout-guard body[data-theme] #business .business-status-grid strong {
    font-size: 0.74rem !important;
  }

  #business .business-status-grid em,
  body[data-theme] #business .business-status-grid em,
  html.native-layout-guard #business .business-status-grid em,
  html.native-layout-guard body[data-theme] #business .business-status-grid em {
    font-size: 0.55rem !important;
    overflow-wrap: anywhere !important;
  }

  #business .business-actions,
  body[data-theme] #business .business-actions,
  html.native-layout-guard #business .business-actions,
  html.native-layout-guard body[data-theme] #business .business-actions {
    gap: 5px !important;
  }

  #business .business-actions :is(.primary-button, .ghost-button),
  body[data-theme] #business .business-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard #business .business-actions :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #business .business-actions :is(.primary-button, .ghost-button) {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 5px !important;
    font-size: 0.68rem !important;
    line-height: 1.04 !important;
    white-space: nowrap !important;
  }

  #business .business-steps,
  body[data-theme] #business .business-steps,
  html.native-layout-guard #business .business-steps,
  html.native-layout-guard body[data-theme] #business .business-steps {
    gap: 5px !important;
  }

  #business .business-step,
  body[data-theme] #business .business-step,
  html.native-layout-guard #business .business-step,
  html.native-layout-guard body[data-theme] #business .business-step {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    min-height: 56px !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    column-gap: 7px !important;
  }

  #business .business-step span,
  body[data-theme] #business .business-step span,
  html.native-layout-guard #business .business-step span,
  html.native-layout-guard body[data-theme] #business .business-step span {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 0.68rem !important;
  }

  #business .business-step h3,
  body[data-theme] #business .business-step h3,
  html.native-layout-guard #business .business-step h3,
  html.native-layout-guard body[data-theme] #business .business-step h3 {
    font-size: 0.86rem !important;
    line-height: 1.04 !important;
  }

  #business .business-step p,
  body[data-theme] #business .business-step p,
  html.native-layout-guard #business .business-step p,
  html.native-layout-guard body[data-theme] #business .business-step p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    font-size: 0.62rem !important;
    line-height: 1.08 !important;
  }
}

/* v524-mobile-dock-final-polish: keep the dock readable without letting it dominate every screen. */
@media (max-width: 900px) {
  :root,
  body[data-theme],
  html.native-layout-guard body,
  html.native-layout-guard body[data-theme] {
    --dock-height: 56px !important;
  }

  .mobile-dock,
  body[data-theme] .mobile-dock,
  html.native-layout-guard .mobile-dock,
  html.native-layout-guard body[data-theme] .mobile-dock {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 0 !important;
    height: calc(var(--dock-height) + var(--safe-bottom, 0px)) !important;
    min-height: calc(var(--dock-height) + var(--safe-bottom, 0px)) !important;
    max-height: calc(var(--dock-height) + var(--safe-bottom, 0px)) !important;
    padding: 4px 7px calc(4px + var(--safe-bottom, 0px)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(245, 241, 232, 0.08) !important;
    border-radius: 13px 13px 0 0 !important;
    background: rgba(3, 4, 6, 0.965) !important;
    box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
  }

  .mobile-dock a,
  body[data-theme] .mobile-dock a,
  html.native-layout-guard .mobile-dock a,
  html.native-layout-guard body[data-theme] .mobile-dock a,
  .mobile-dock a.active,
  body[data-theme] .mobile-dock a.active,
  html.native-layout-guard .mobile-dock a.active,
  html.native-layout-guard body[data-theme] .mobile-dock a.active {
    display: grid !important;
    grid-template-rows: 21px 13px !important;
    place-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    padding: 2px 0 1px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(245, 241, 232, 0.68) !important;
    overflow: hidden !important;
  }

  .mobile-dock a::before,
  .mobile-dock a::after,
  body[data-theme] .mobile-dock a::before,
  body[data-theme] .mobile-dock a::after,
  html.native-layout-guard .mobile-dock a::before,
  html.native-layout-guard .mobile-dock a::after {
    display: none !important;
    content: none !important;
  }

  .mobile-dock .dock-icon,
  body[data-theme] .mobile-dock .dock-icon,
  html.native-layout-guard .mobile-dock .dock-icon,
  html.native-layout-guard body[data-theme] .mobile-dock .dock-icon {
    display: grid !important;
    place-items: center !important;
    width: 24px !important;
    min-width: 24px !important;
    height: 22px !important;
    min-height: 22px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: currentColor !important;
  }

  .mobile-dock .dock-icon svg,
  body[data-theme] .mobile-dock .dock-icon svg,
  html.native-layout-guard .mobile-dock .dock-icon svg,
  html.native-layout-guard body[data-theme] .mobile-dock .dock-icon svg {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2.2px !important;
  }

  .mobile-dock .dock-label,
  body[data-theme] .mobile-dock .dock-label,
  html.native-layout-guard .mobile-dock .dock-label,
  html.native-layout-guard body[data-theme] .mobile-dock .dock-label,
  .mobile-dock a.active .dock-label,
  body[data-theme] .mobile-dock a.active .dock-label,
  html.native-layout-guard .mobile-dock a.active .dock-label {
    max-width: 100% !important;
    max-height: 13px !important;
    color: currentColor !important;
    font-size: 0.56rem !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-dock a.active,
  body[data-theme] .mobile-dock a.active,
  html.native-layout-guard .mobile-dock a.active,
  html.native-layout-guard body[data-theme] .mobile-dock a.active,
  .mobile-dock a:focus-visible,
  body[data-theme] .mobile-dock a:focus-visible,
  html.native-layout-guard .mobile-dock a:focus-visible {
    color: #fffaf2 !important;
    outline: none !important;
  }

  .mobile-dock a.active .dock-icon,
  body[data-theme] .mobile-dock a.active .dock-icon,
  html.native-layout-guard .mobile-dock a.active .dock-icon,
  .mobile-dock a:focus-visible .dock-icon,
  body[data-theme] .mobile-dock a:focus-visible .dock-icon,
  html.native-layout-guard .mobile-dock a:focus-visible .dock-icon {
    background: rgba(249, 80, 142, 0.92) !important;
    box-shadow: 0 5px 12px rgba(249, 80, 142, 0.2) !important;
    color: #fffaf2 !important;
  }
}

/* v525-mobile-collapsed-final-quiet: final pass so collapsed tool rows read like controls, not giant cards. */
@media (max-width: 900px) {
  main .mobile-collapsible.is-collapsed,
  body[data-theme] main .mobile-collapsible.is-collapsed,
  html.native-layout-guard main .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed {
    min-height: 52px !important;
    padding: 4px 7px !important;
    border-radius: 12px !important;
    border-width: 1px !important;
    background: linear-gradient(180deg, rgba(30, 32, 38, 0.86), rgba(14, 15, 18, 0.92)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  }

  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head),
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }

  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) > :first-child,
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) > :first-child,
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) > :first-child,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) > :first-child {
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    gap: 0 !important;
    align-content: center !important;
  }

  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) .eyebrow,
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) .eyebrow,
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) .eyebrow,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) .eyebrow {
    display: none !important;
  }

  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) :is(h2, h3, h4, strong),
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) :is(h2, h3, h4, strong),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) :is(h2, h3, h4, strong),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) :is(h2, h3, h4, strong) {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: rgba(255, 250, 242, 0.95) !important;
    font-size: 0.78rem !important;
    font-weight: 760 !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  main .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  body[data-theme] main .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard main .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed .mobile-collapse-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 11px !important;
    font-size: 0.96rem !important;
    line-height: 1 !important;
    background: rgba(255, 255, 255, 0.055) !important;
  }
}

/* v528-inventory-more-button-polish: make the mobile "more" control read like an inline action, not another heavy module card. */
@media (max-width: 900px) {
  #inventory #inventoryMobileListToggle,
  body[data-theme] #inventory #inventoryMobileListToggle,
  html.native-layout-guard #inventory #inventoryMobileListToggle,
  html.native-layout-guard body[data-theme] #inventory #inventoryMobileListToggle {
    justify-self: center !important;
    width: auto !important;
    min-width: 148px !important;
    max-width: min(74%, 260px) !important;
    min-height: 44px !important;
    margin: 6px auto 0 !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.075) !important;
    color: rgba(255, 250, 242, 0.92) !important;
    box-shadow: none !important;
    font-size: 0.78rem !important;
    font-weight: 760 !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }
}

/* v529-community-expanded-panel-legibility: expanded mobile community tools must get full width. */
@media (max-width: 900px) {
  #community .mobile-collapsible:not(.is-collapsed),
  body[data-theme] #community .mobile-collapsible:not(.is-collapsed),
  html.native-layout-guard #community .mobile-collapsible:not(.is-collapsed),
  html.native-layout-guard body[data-theme] #community .mobile-collapsible:not(.is-collapsed) {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  #community .mobile-collapsible:not(.is-collapsed) .mobile-collapse-head,
  #community .mobile-collapsible:not(.is-collapsed) .panel-head,
  body[data-theme] #community .mobile-collapsible:not(.is-collapsed) .mobile-collapse-head,
  body[data-theme] #community .mobile-collapsible:not(.is-collapsed) .panel-head,
  html.native-layout-guard #community .mobile-collapsible:not(.is-collapsed) .mobile-collapse-head,
  html.native-layout-guard #community .mobile-collapsible:not(.is-collapsed) .panel-head,
  html.native-layout-guard body[data-theme] #community .mobile-collapsible:not(.is-collapsed) .mobile-collapse-head,
  html.native-layout-guard body[data-theme] #community .mobile-collapsible:not(.is-collapsed) .panel-head {
    min-width: 0 !important;
  }

  #community #circleIdentityCard,
  body[data-theme] #community #circleIdentityCard,
  html.native-layout-guard #community #circleIdentityCard,
  html.native-layout-guard body[data-theme] #community #circleIdentityCard {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #community .circle-identity-main,
  #community .circle-identity-main > div,
  body[data-theme] #community .circle-identity-main,
  body[data-theme] #community .circle-identity-main > div,
  html.native-layout-guard #community .circle-identity-main,
  html.native-layout-guard #community .circle-identity-main > div,
  html.native-layout-guard body[data-theme] #community .circle-identity-main,
  html.native-layout-guard body[data-theme] #community .circle-identity-main > div {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #community .circle-identity-main strong,
  body[data-theme] #community .circle-identity-main strong,
  html.native-layout-guard #community .circle-identity-main strong,
  html.native-layout-guard body[data-theme] #community .circle-identity-main strong {
    max-width: 100% !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  #community .social-card-preview,
  body[data-theme] #community .social-card-preview,
  html.native-layout-guard #community .social-card-preview,
  html.native-layout-guard body[data-theme] #community .social-card-preview {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #community .social-card-copy,
  #community .social-card-headline,
  #community .social-export-grid,
  #community .social-item-strip,
  body[data-theme] #community .social-card-copy,
  body[data-theme] #community .social-card-headline,
  body[data-theme] #community .social-export-grid,
  body[data-theme] #community .social-item-strip,
  html.native-layout-guard #community .social-card-copy,
  html.native-layout-guard #community .social-card-headline,
  html.native-layout-guard #community .social-export-grid,
  html.native-layout-guard #community .social-item-strip,
  html.native-layout-guard body[data-theme] #community .social-card-copy,
  html.native-layout-guard body[data-theme] #community .social-card-headline,
  html.native-layout-guard body[data-theme] #community .social-export-grid,
  html.native-layout-guard body[data-theme] #community .social-item-strip {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #community #publishCommunityButton,
  body[data-theme] #community #publishCommunityButton,
  html.native-layout-guard #community #publishCommunityButton,
  html.native-layout-guard body[data-theme] #community #publishCommunityButton {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.08 !important;
  }
}

/* v548-control-alignment-lock: keep close and compact controls optically centered. */
.quick-action-head,
body[data-theme] .quick-action-head,
html.native-layout-guard .quick-action-head,
html.native-layout-guard body[data-theme] .quick-action-head,
.command-head,
body[data-theme] .command-head,
html.native-layout-guard .command-head,
html.native-layout-guard body[data-theme] .command-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: start !important;
  gap: 12px !important;
}

.quick-action-head > div,
body[data-theme] .quick-action-head > div,
html.native-layout-guard .quick-action-head > div,
html.native-layout-guard body[data-theme] .quick-action-head > div,
.command-head > div,
body[data-theme] .command-head > div,
html.native-layout-guard .command-head > div,
html.native-layout-guard body[data-theme] .command-head > div {
  min-width: 0 !important;
}

.icon-button.dialog-close-button,
body[data-theme] .icon-button.dialog-close-button,
html.native-layout-guard .icon-button.dialog-close-button,
html.native-layout-guard body[data-theme] .icon-button.dialog-close-button {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(248, 243, 233, 0.18) !important;
  border-radius: 14px !important;
  background: rgba(12, 13, 16, 0.92) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-sizing: border-box !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
}

.quick-action-head .dialog-close-button,
body[data-theme] .quick-action-head .dialog-close-button,
html.native-layout-guard .quick-action-head .dialog-close-button,
html.native-layout-guard body[data-theme] .quick-action-head .dialog-close-button,
.command-head .dialog-close-button,
body[data-theme] .command-head .dialog-close-button,
html.native-layout-guard .command-head .dialog-close-button,
html.native-layout-guard body[data-theme] .command-head .dialog-close-button {
  justify-self: end !important;
  align-self: start !important;
}

.paywall-close,
body[data-theme] .paywall-close,
html.native-layout-guard .paywall-close,
html.native-layout-guard body[data-theme] .paywall-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2 !important;
}

.icon-button.dialog-close-button > span,
body[data-theme] .icon-button.dialog-close-button > span,
html.native-layout-guard .icon-button.dialog-close-button > span,
html.native-layout-guard body[data-theme] .icon-button.dialog-close-button > span {
  display: none !important;
}

.icon-button.dialog-close-button::before,
body[data-theme] .icon-button.dialog-close-button::before,
html.native-layout-guard .icon-button.dialog-close-button::before,
html.native-layout-guard body[data-theme] .icon-button.dialog-close-button::before,
.icon-button.dialog-close-button::after,
body[data-theme] .icon-button.dialog-close-button::after,
html.native-layout-guard .icon-button.dialog-close-button::after,
html.native-layout-guard body[data-theme] .icon-button.dialog-close-button::after {
  content: "" !important;
  display: block !important;
  grid-area: 1 / 1 !important;
  width: 18px !important;
  height: 2px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: center !important;
}

.icon-button.dialog-close-button::before,
body[data-theme] .icon-button.dialog-close-button::before,
html.native-layout-guard .icon-button.dialog-close-button::before,
html.native-layout-guard body[data-theme] .icon-button.dialog-close-button::before {
  transform: rotate(45deg) !important;
}

.icon-button.dialog-close-button::after,
body[data-theme] .icon-button.dialog-close-button::after,
html.native-layout-guard .icon-button.dialog-close-button::after,
html.native-layout-guard body[data-theme] .icon-button.dialog-close-button::after {
  transform: rotate(-45deg) !important;
}

@media (max-width: 900px) {
  main .mobile-collapse-toggle,
  body[data-theme] main .mobile-collapse-toggle,
  html.native-layout-guard main .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] main .mobile-collapse-toggle {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .mobile-list-toggle,
  body[data-theme] .mobile-list-toggle,
  html.native-layout-guard .mobile-list-toggle,
  html.native-layout-guard body[data-theme] .mobile-list-toggle {
    display: grid !important;
    place-items: center !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }
}

/* v553-pwa-update-banner: user-controlled updates keep in-progress form entries safe. */
/* v699-compact-pwa-update-banner: keep the update affordance usable without hiding the Studio on short phones. */
body,
html.native-layout-guard body {
  --pwa-update-banner-height: 0px;
}

body.update-ready,
html.native-layout-guard body.update-ready {
  --pwa-update-banner-height: 60px !important;
}

.app-update-banner,
body[data-theme] .app-update-banner,
html.native-layout-guard .app-update-banner,
html.native-layout-guard body[data-theme] .app-update-banner {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + var(--topbar-height, 48px)) !important;
  right: auto !important;
  left: var(--app-rail-left, 0px) !important;
  z-index: 85 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: var(--app-rail-width, min(430px, 100vw)) !important;
  min-width: 0 !important;
  max-width: var(--app-rail-width, min(430px, 100vw)) !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(244, 240, 232, 0.16) !important;
  background:
    linear-gradient(110deg, rgba(217, 230, 107, 0.18), rgba(12, 14, 17, 0.96) 48%),
    #0c0e11 !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.26) !important;
  color: #f8f4ea !important;
  box-sizing: border-box !important;
}

.app-update-banner[hidden],
body[data-theme] .app-update-banner[hidden],
html.native-layout-guard .app-update-banner[hidden],
html.native-layout-guard body[data-theme] .app-update-banner[hidden] {
  display: none !important;
}

.app-update-banner p,
body[data-theme] .app-update-banner p,
html.native-layout-guard .app-update-banner p,
html.native-layout-guard body[data-theme] .app-update-banner p {
  min-width: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 0.78rem !important;
  font-weight: 760 !important;
  line-height: 1.24 !important;
}

.app-update-banner button,
body[data-theme] .app-update-banner button,
html.native-layout-guard .app-update-banner button,
html.native-layout-guard body[data-theme] .app-update-banner button {
  min-width: 96px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(217, 230, 107, 0.76) !important;
  border-radius: 12px !important;
  background: #d9e66b !important;
  color: #171a13 !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  cursor: pointer !important;
}

.app-update-banner button:focus-visible,
body[data-theme] .app-update-banner button:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 2px !important;
}

body.update-ready .app-toast,
body.update-ready[data-theme] .app-toast {
  top: calc(env(safe-area-inset-top, 0px) + var(--topbar-height, 48px) + var(--pwa-update-banner-height) + 10px) !important;
}

/* toast-dialog-stack-contract: feedback stays visible without becoming an interactive overlay. */
.app-toast,
body[data-theme] .app-toast,
html.native-layout-guard .app-toast,
html.native-layout-guard body[data-theme] .app-toast {
  z-index: 2500 !important;
  pointer-events: none !important;
}

@media (max-width: 900px) {
  body.update-ready .app-toast,
  body.update-ready[data-theme] .app-toast,
  html.native-layout-guard body.update-ready .app-toast,
  html.native-layout-guard body.update-ready[data-theme] .app-toast {
    top: auto !important;
    bottom: calc(var(--dock-height, 78px) + var(--safe-bottom, 0px) + 14px) !important;
  }
}

body.paywall-open .app-update-banner,
body[data-theme].paywall-open .app-update-banner,
html.native-layout-guard body.paywall-open .app-update-banner,
html.native-layout-guard body[data-theme].paywall-open .app-update-banner {
  display: none !important;
}

@media (max-width: 370px) {
  body.update-ready,
  html.native-layout-guard body.update-ready {
    --pwa-update-banner-height: 60px !important;
  }

  .app-update-banner,
  body[data-theme] .app-update-banner,
  html.native-layout-guard .app-update-banner,
  html.native-layout-guard body[data-theme] .app-update-banner {
    grid-template-columns: minmax(0, 1fr) auto !important;
    justify-items: stretch !important;
    gap: 8px !important;
    min-height: 56px !important;
  }

  .app-update-banner button,
  body[data-theme] .app-update-banner button,
  html.native-layout-guard .app-update-banner button,
  html.native-layout-guard body[data-theme] .app-update-banner button {
    width: auto !important;
  }
}

/* Inventory comparison rail: fitting-room tickets for quick, side-by-side decisions. */
#inventory .inventory-compare-panel,
body[data-theme] #inventory .inventory-compare-panel,
html.native-layout-guard #inventory .inventory-compare-panel,
html.native-layout-guard body[data-theme] #inventory .inventory-compare-panel {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 12px 0 10px !important;
  scroll-margin-top: calc(var(--topbar-height, 64px) + var(--safe-top, 0px) + 112px) !important;
  padding: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(239, 204, 113, 0.24) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(239, 204, 113, 0.075), transparent 42%),
    linear-gradient(180deg, rgba(248, 244, 234, 0.045), rgba(248, 244, 234, 0.012)),
    #090b0e !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 40px rgba(0, 0, 0, 0.24) !important;
  color: #f8f4ea !important;
}

#inventory .inventory-compare-panel[hidden],
body[data-theme] #inventory .inventory-compare-panel[hidden],
html.native-layout-guard #inventory .inventory-compare-panel[hidden],
html.native-layout-guard body[data-theme] #inventory .inventory-compare-panel[hidden] {
  display: none !important;
}

#inventory .inventory-compare-head,
body[data-theme] #inventory .inventory-compare-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
  min-width: 0 !important;
  margin: 0 0 10px !important;
  padding: 0 0 11px !important;
  border-bottom: 1px solid rgba(248, 244, 234, 0.1) !important;
}

#inventory .inventory-compare-heading,
body[data-theme] #inventory .inventory-compare-heading {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

#inventory .inventory-compare-heading .eyebrow,
body[data-theme] #inventory .inventory-compare-heading .eyebrow {
  margin: 0 !important;
  color: #efcc71 !important;
  font-size: 0.6rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

#inventory .inventory-compare-heading h3,
body[data-theme] #inventory .inventory-compare-heading h3 {
  min-width: 0 !important;
  margin: 0 !important;
  color: #fffaf0 !important;
  font-size: clamp(1rem, 2vw, 1.24rem) !important;
  font-weight: 880 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
}

#inventory .inventory-compare-heading p,
body[data-theme] #inventory .inventory-compare-heading p {
  max-width: 62ch !important;
  min-width: 0 !important;
  margin: 1px 0 0 !important;
  color: rgba(248, 244, 234, 0.62) !important;
  font-size: 0.7rem !important;
  line-height: 1.35 !important;
}

#inventory .inventory-compare-actions,
body[data-theme] #inventory .inventory-compare-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}

#inventory .inventory-compare-clear,
body[data-theme] #inventory .inventory-compare-clear {
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-color: rgba(248, 244, 234, 0.18) !important;
  border-radius: 11px !important;
  background: rgba(248, 244, 234, 0.045) !important;
  color: rgba(248, 244, 234, 0.82) !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

/* A tailor's chalk ticket explains the recommendation without turning it into a score. */
#inventory .inventory-compare-verdict,
body[data-theme] #inventory .inventory-compare-verdict,
html.native-layout-guard #inventory .inventory-compare-verdict,
html.native-layout-guard body[data-theme] #inventory .inventory-compare-verdict {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.42fr) !important;
  grid-template-areas:
    "mark mark"
    "copy rule" !important;
  align-items: end !important;
  gap: 6px 18px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 3px !important;
  padding: 12px 14px 13px 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(239, 204, 113, 0.19) !important;
  border-left: 3px solid rgba(239, 204, 113, 0.78) !important;
  border-radius: 4px 13px 13px 4px !important;
  background:
    linear-gradient(92deg, rgba(239, 204, 113, 0.075), transparent 43%),
    repeating-linear-gradient(0deg, rgba(248, 244, 234, 0.018) 0 1px, transparent 1px 22px),
    rgba(248, 244, 234, 0.025) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  color: #f8f4ea !important;
}

#inventory .inventory-compare-verdict[hidden],
body[data-theme] #inventory .inventory-compare-verdict[hidden],
html.native-layout-guard #inventory .inventory-compare-verdict[hidden],
html.native-layout-guard body[data-theme] #inventory .inventory-compare-verdict[hidden] {
  display: none !important;
}

#inventory .inventory-compare-verdict-mark,
body[data-theme] #inventory .inventory-compare-verdict-mark {
  grid-area: mark !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-self: start !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  color: #efcc71 !important;
  font-size: 0.57rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

#inventory .inventory-compare-verdict-mark::before,
body[data-theme] #inventory .inventory-compare-verdict-mark::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 17px !important;
  height: 8px !important;
  border-bottom: 2px solid #efcc71 !important;
  border-left: 2px solid #efcc71 !important;
  filter: drop-shadow(1px 1px 0 rgba(239, 204, 113, 0.18)) !important;
  transform: rotate(-45deg) translateY(-1px) !important;
  transform-origin: center !important;
}

#inventory .inventory-compare-verdict-copy,
body[data-theme] #inventory .inventory-compare-verdict-copy {
  grid-area: copy !important;
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#inventory .inventory-compare-verdict-copy h4,
body[data-theme] #inventory .inventory-compare-verdict-copy h4 {
  min-width: 0 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  color: #fffaf0 !important;
  font-size: clamp(0.86rem, 1.8vw, 1rem) !important;
  font-weight: 880 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.16 !important;
}

#inventory .inventory-compare-verdict-copy ul,
body[data-theme] #inventory .inventory-compare-verdict-copy ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 20px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 0 16px !important;
  color: rgba(248, 244, 234, 0.68) !important;
}

#inventory .inventory-compare-verdict-copy li,
body[data-theme] #inventory .inventory-compare-verdict-copy li {
  flex: 1 1 150px !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  font-size: 0.65rem !important;
  font-weight: 680 !important;
  line-height: 1.35 !important;
}

#inventory .inventory-compare-verdict-copy li::marker,
body[data-theme] #inventory .inventory-compare-verdict-copy li::marker {
  color: rgba(239, 204, 113, 0.88) !important;
}

#inventory .inventory-compare-verdict-rule,
body[data-theme] #inventory .inventory-compare-verdict-rule {
  grid-area: rule !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 2px 0 2px 12px !important;
  overflow-wrap: anywhere !important;
  border-left: 1px dashed rgba(239, 204, 113, 0.32) !important;
  color: rgba(248, 221, 148, 0.65) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 0.66rem !important;
  font-style: italic !important;
  line-height: 1.38 !important;
}

#inventory .inventory-compare-verdict.is-unavailable,
body[data-theme] #inventory .inventory-compare-verdict.is-unavailable {
  border-color: rgba(217, 145, 115, 0.2) !important;
  border-left-color: rgba(217, 145, 115, 0.72) !important;
  background:
    linear-gradient(92deg, rgba(217, 145, 115, 0.075), transparent 43%),
    repeating-linear-gradient(0deg, rgba(248, 244, 234, 0.018) 0 1px, transparent 1px 22px),
    rgba(248, 244, 234, 0.025) !important;
}

#inventory .inventory-compare-verdict.is-unavailable .inventory-compare-verdict-mark,
body[data-theme] #inventory .inventory-compare-verdict.is-unavailable .inventory-compare-verdict-mark {
  color: #d99173 !important;
}

#inventory .inventory-compare-verdict.is-unavailable .inventory-compare-verdict-mark::before,
body[data-theme] #inventory .inventory-compare-verdict.is-unavailable .inventory-compare-verdict-mark::before {
  width: 16px !important;
  height: 16px !important;
  border: 0 !important;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), #d99173 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), #d99173 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) !important;
  filter: drop-shadow(1px 1px 0 rgba(217, 145, 115, 0.17)) !important;
  transform: rotate(-4deg) !important;
}

#inventory .inventory-compare-verdict.is-unavailable .inventory-compare-verdict-rule,
body[data-theme] #inventory .inventory-compare-verdict.is-unavailable .inventory-compare-verdict-rule {
  border-left-color: rgba(217, 145, 115, 0.3) !important;
  color: rgba(235, 179, 155, 0.67) !important;
}

/* The decision strip sits outside the live verdict so its controls stay cleanly interactive. */
#inventory .inventory-compare-decision-actions,
body[data-theme] #inventory .inventory-compare-decision-actions,
html.native-layout-guard #inventory .inventory-compare-decision-actions,
html.native-layout-guard body[data-theme] #inventory .inventory-compare-decision-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(144px, 0.62fr) !important;
  gap: 7px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: -1px 0 3px !important;
  padding: 0 0 0 3px !important;
}

#inventory .inventory-compare-decision-actions[hidden],
body[data-theme] #inventory .inventory-compare-decision-actions[hidden],
html.native-layout-guard #inventory .inventory-compare-decision-actions[hidden],
html.native-layout-guard body[data-theme] #inventory .inventory-compare-decision-actions[hidden] {
  display: none !important;
}

#inventory .inventory-compare-decision-actions button,
body[data-theme] #inventory .inventory-compare-decision-actions button {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 1px 9px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 8px 9px 8px 12px !important;
  overflow: hidden !important;
  border-radius: 4px 4px 12px 12px !important;
  box-shadow: none !important;
  text-align: left !important;
  white-space: normal !important;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease !important;
}

#inventory .inventory-compare-decision-actions button strong,
body[data-theme] #inventory .inventory-compare-decision-actions button strong,
#inventory .inventory-compare-decision-actions button span,
body[data-theme] #inventory .inventory-compare-decision-actions button span {
  grid-column: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

#inventory .inventory-compare-decision-actions button strong,
body[data-theme] #inventory .inventory-compare-decision-actions button strong {
  color: inherit !important;
  font-size: 0.7rem !important;
  font-weight: 930 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.18 !important;
}

#inventory .inventory-compare-decision-actions button span,
body[data-theme] #inventory .inventory-compare-decision-actions button span {
  color: inherit !important;
  font-size: 0.55rem !important;
  font-weight: 690 !important;
  line-height: 1.22 !important;
  opacity: 0.7 !important;
}

#inventory .inventory-compare-decision-actions button::after,
body[data-theme] #inventory .inventory-compare-decision-actions button::after {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid currentColor !important;
  border-radius: 50% !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 0.72 !important;
}

#inventory .inventory-compare-build-outfit,
body[data-theme] #inventory .inventory-compare-build-outfit {
  border: 1px solid rgba(239, 204, 113, 0.66) !important;
  background: linear-gradient(105deg, #e6bd54, #f3d98e 72%, #d5aa3f) !important;
  color: #18140a !important;
}

#inventory .inventory-compare-build-outfit::after,
body[data-theme] #inventory .inventory-compare-build-outfit::after {
  content: "↗" !important;
}

#inventory .inventory-compare-watch,
body[data-theme] #inventory .inventory-compare-watch {
  border: 1px solid rgba(248, 244, 234, 0.18) !important;
  background: rgba(248, 244, 234, 0.055) !important;
  color: rgba(248, 244, 234, 0.84) !important;
}

#inventory .inventory-compare-watch::after,
body[data-theme] #inventory .inventory-compare-watch::after {
  content: "+" !important;
}

#inventory .inventory-compare-watch.is-watching,
body[data-theme] #inventory .inventory-compare-watch.is-watching {
  border-color: rgba(220, 232, 111, 0.32) !important;
  background: rgba(220, 232, 111, 0.08) !important;
  color: rgba(232, 240, 139, 0.78) !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

#inventory .inventory-compare-watch.is-watching::after,
body[data-theme] #inventory .inventory-compare-watch.is-watching::after {
  content: "→" !important;
}

#inventory .inventory-compare-decision-actions button:focus-visible,
body[data-theme] #inventory .inventory-compare-decision-actions button:focus-visible {
  outline: 2px solid #fff7d9 !important;
  outline-offset: 2px !important;
}

@media (hover: hover) and (pointer: fine) {
  #inventory .inventory-compare-decision-actions button:not([aria-disabled="true"]):hover,
  body[data-theme] #inventory .inventory-compare-decision-actions button:not([aria-disabled="true"]):hover {
    transform: translateY(-1px) !important;
  }

  #inventory .inventory-compare-build-outfit:hover,
  body[data-theme] #inventory .inventory-compare-build-outfit:hover {
    background: linear-gradient(105deg, #efc962, #f7e3a4 72%, #ddb64c) !important;
  }
}

#inventory .inventory-compare-grid,
body[data-theme] #inventory .inventory-compare-grid {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 18px 0 0 !important;
}

#inventory .inventory-compare-grid::before,
body[data-theme] #inventory .inventory-compare-grid::before {
  content: "" !important;
  position: absolute !important;
  top: 7px !important;
  right: 3px !important;
  left: 3px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(239, 204, 113, 0.18), rgba(239, 204, 113, 0.78) 20% 80%, rgba(239, 204, 113, 0.18)) !important;
  box-shadow: 0 2px 8px rgba(239, 204, 113, 0.12) !important;
  pointer-events: none !important;
}

#inventory .inventory-compare-card,
body[data-theme] #inventory .inventory-compare-card {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-rows: auto auto 1fr auto !important;
  align-content: start !important;
  gap: 11px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 274px !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(248, 244, 234, 0.14) !important;
  border-top-color: rgba(239, 204, 113, 0.46) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(155deg, rgba(239, 204, 113, 0.085), transparent 38%),
    #111419 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 26px rgba(0, 0, 0, 0.2) !important;
  color: #f8f4ea !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

#inventory .inventory-compare-card.is-recommended,
body[data-theme] #inventory .inventory-compare-card.is-recommended {
  border-color: rgba(239, 204, 113, 0.58) !important;
  border-top-color: #efcc71 !important;
  background:
    linear-gradient(155deg, rgba(239, 204, 113, 0.13), transparent 42%),
    #111419 !important;
  box-shadow:
    inset 3px 0 0 rgba(239, 204, 113, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 14px 30px rgba(0, 0, 0, 0.24) !important;
}

#inventory .inventory-compare-card::before,
body[data-theme] #inventory .inventory-compare-card::before,
#inventory .inventory-compare-empty-slot::before,
body[data-theme] #inventory .inventory-compare-empty-slot::before {
  content: "" !important;
  position: absolute !important;
  top: -13px !important;
  left: 21px !important;
  width: 14px !important;
  height: 13px !important;
  border: 2px solid rgba(239, 204, 113, 0.72) !important;
  border-bottom: 0 !important;
  border-radius: 9px 9px 0 0 !important;
  background: #090b0e !important;
  box-shadow: 0 -2px 8px rgba(239, 204, 113, 0.1) !important;
  pointer-events: none !important;
}

#inventory .inventory-compare-remove,
body[data-theme] #inventory .inventory-compare-remove {
  position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 9px !important;
  border: 1px solid rgba(248, 244, 234, 0.14) !important;
  border-radius: 11px !important;
  background: rgba(8, 10, 13, 0.82) !important;
  color: rgba(248, 244, 234, 0.74) !important;
  box-shadow: none !important;
  font-size: 1.08rem !important;
  line-height: 1 !important;
}

#inventory .inventory-compare-product,
body[data-theme] #inventory .inventory-compare-product {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  padding-right: 34px !important;
}

#inventory .inventory-compare-product img,
body[data-theme] #inventory .inventory-compare-product img {
  display: block !important;
  width: 52px !important;
  min-width: 52px !important;
  height: 66px !important;
  min-height: 66px !important;
  margin: 0 !important;
  border: 1px solid rgba(248, 244, 234, 0.11) !important;
  border-radius: 10px !important;
  background: #1a1d22 !important;
  object-fit: cover !important;
}

#inventory .inventory-compare-product > div,
body[data-theme] #inventory .inventory-compare-product > div {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
}

#inventory .inventory-compare-winner-ribbon,
body[data-theme] #inventory .inventory-compare-winner-ribbon {
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  box-sizing: border-box !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 19px !important;
  margin: 0 0 1px 2px !important;
  padding: 3px 11px 3px 8px !important;
  overflow: hidden !important;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%, 3px 50%) !important;
  background: linear-gradient(100deg, #e7bf58, #f5dc96 68%, #d5aa3f) !important;
  color: #17140c !important;
  box-shadow: 0 2px 8px rgba(239, 204, 113, 0.16) !important;
  font-size: 0.5rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.09em !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transform: rotate(-1deg) !important;
}

#inventory .inventory-compare-product h4,
body[data-theme] #inventory .inventory-compare-product h4 {
  display: -webkit-box !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #fffaf0 !important;
  font-size: 0.84rem !important;
  font-weight: 860 !important;
  line-height: 1.12 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
}

#inventory .inventory-compare-product small,
body[data-theme] #inventory .inventory-compare-product small {
  min-width: 0 !important;
  overflow: hidden !important;
  color: rgba(248, 244, 234, 0.57) !important;
  font-size: 0.61rem !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#inventory .inventory-compare-specs,
body[data-theme] #inventory .inventory-compare-specs {
  display: grid !important;
  align-content: start !important;
  gap: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#inventory .inventory-compare-specs > div,
body[data-theme] #inventory .inventory-compare-specs > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 8px 0 6px !important;
  border-top: 1px solid rgba(248, 244, 234, 0.085) !important;
}

#inventory .inventory-compare-specs dt,
#inventory .inventory-compare-specs dd,
body[data-theme] #inventory .inventory-compare-specs dt,
body[data-theme] #inventory .inventory-compare-specs dd {
  min-width: 0 !important;
  margin: 0 !important;
  font-size: 0.63rem !important;
  line-height: 1.2 !important;
}

#inventory .inventory-compare-specs dt,
body[data-theme] #inventory .inventory-compare-specs dt {
  color: rgba(248, 244, 234, 0.5) !important;
  font-weight: 680 !important;
}

#inventory .inventory-compare-specs dd,
body[data-theme] #inventory .inventory-compare-specs dd {
  overflow: hidden !important;
  color: rgba(255, 250, 240, 0.92) !important;
  font-weight: 820 !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#inventory .inventory-compare-size-stamp,
body[data-theme] #inventory .inventory-compare-size-stamp {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  justify-self: start !important;
  max-width: 100% !important;
  min-height: 32px !important;
  margin-top: auto !important;
  padding: 5px 9px !important;
  overflow: hidden !important;
  border: 1px double rgba(239, 204, 113, 0.58) !important;
  border-radius: 8px !important;
  background: rgba(239, 204, 113, 0.075) !important;
  color: #f2d481 !important;
  font-size: 0.58rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transform: rotate(-1deg) !important;
}

#inventory .inventory-compare-size-stamp span,
#inventory .inventory-compare-size-stamp strong,
body[data-theme] #inventory .inventory-compare-size-stamp span,
body[data-theme] #inventory .inventory-compare-size-stamp strong {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#inventory .inventory-compare-size-stamp span,
body[data-theme] #inventory .inventory-compare-size-stamp span {
  opacity: 0.68 !important;
}

#inventory .inventory-compare-size-stamp.is-match,
body[data-theme] #inventory .inventory-compare-size-stamp.is-match {
  border-color: rgba(220, 232, 111, 0.82) !important;
  background:
    linear-gradient(135deg, rgba(220, 232, 111, 0.18), rgba(220, 232, 111, 0.06)),
    #11150d !important;
  color: #e5ef86 !important;
  box-shadow: inset 0 0 0 1px rgba(220, 232, 111, 0.11) !important;
}

#inventory .inventory-compare-size-stamp.is-missing,
body[data-theme] #inventory .inventory-compare-size-stamp.is-missing {
  border-color: rgba(239, 204, 113, 0.48) !important;
  background: rgba(239, 204, 113, 0.055) !important;
  color: rgba(248, 221, 148, 0.74) !important;
}

#inventory .inventory-compare-empty-slot,
body[data-theme] #inventory .inventory-compare-empty-slot {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 274px !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px dashed rgba(239, 204, 113, 0.24) !important;
  border-radius: 14px !important;
  background: rgba(248, 244, 234, 0.018) !important;
  color: rgba(248, 244, 234, 0.43) !important;
  font-size: 0.68rem !important;
  font-weight: 740 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

#inventory .inventory-compare-empty-slot > span,
body[data-theme] #inventory .inventory-compare-empty-slot > span {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(239, 204, 113, 0.34) !important;
  border-radius: 50% !important;
  color: #efcc71 !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

#inventory .inventory-compare-empty-slot > strong,
body[data-theme] #inventory .inventory-compare-empty-slot > strong {
  max-width: 18ch !important;
  color: rgba(248, 244, 234, 0.58) !important;
  font-size: 0.68rem !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

/* v694: the first selection stays lightweight while the shopper finds a second option. */
#inventory .inventory-compare-panel.is-selection-pending .inventory-compare-grid,
body[data-theme] #inventory .inventory-compare-panel.is-selection-pending .inventory-compare-grid,
html.native-layout-guard #inventory .inventory-compare-panel.is-selection-pending .inventory-compare-grid,
html.native-layout-guard body[data-theme] #inventory .inventory-compare-panel.is-selection-pending .inventory-compare-grid {
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
}

#inventory .inventory-compare-pending-card,
body[data-theme] #inventory .inventory-compare-pending-card,
html.native-layout-guard #inventory .inventory-compare-pending-card,
html.native-layout-guard body[data-theme] #inventory .inventory-compare-pending-card {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 72px !important;
  padding: 8px !important;
  border: 1px solid rgba(239, 204, 113, 0.24) !important;
  border-left: 3px solid rgba(239, 204, 113, 0.72) !important;
  border-radius: 12px !important;
  background: rgba(248, 244, 234, 0.035) !important;
}

#inventory .inventory-compare-pending-card img,
body[data-theme] #inventory .inventory-compare-pending-card img {
  display: block !important;
  width: 48px !important;
  height: 54px !important;
  margin: 0 !important;
  border: 1px solid rgba(248, 244, 234, 0.12) !important;
  border-radius: 9px !important;
  background: #171a1f !important;
  object-fit: cover !important;
}

#inventory .inventory-compare-pending-card > div,
body[data-theme] #inventory .inventory-compare-pending-card > div {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

#inventory .inventory-compare-pending-card span,
body[data-theme] #inventory .inventory-compare-pending-card span {
  color: #efcc71 !important;
  font-size: 0.55rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

#inventory .inventory-compare-pending-card strong,
body[data-theme] #inventory .inventory-compare-pending-card strong {
  overflow: hidden !important;
  color: #fffaf0 !important;
  font-size: 0.8rem !important;
  font-weight: 860 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#inventory .inventory-compare-pending-card small,
body[data-theme] #inventory .inventory-compare-pending-card small {
  overflow: hidden !important;
  color: rgba(248, 244, 234, 0.6) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#inventory .inventory-compare-card .product-link,
body[data-theme] #inventory .inventory-compare-card .product-link,
html.native-layout-guard #inventory .inventory-compare-card .product-link,
html.native-layout-guard body[data-theme] #inventory .inventory-compare-card .product-link {
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 42px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 10px !important;
}

/* Inventory-card controls stay paired like the two sides of a garment ticket. */
#inventory .inventory-card-actions,
body[data-theme] #inventory .inventory-card-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-top: 9px !important;
}

#inventory .inventory-card-actions > :only-child,
body[data-theme] #inventory .inventory-card-actions > :only-child {
  grid-column: 1 / -1 !important;
}

#inventory .inventory-card-actions :is(.watch-button, .compare-button),
body[data-theme] #inventory .inventory-card-actions :is(.watch-button, .compare-button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  /* 42 px było poniżej progu 44 px z wytycznych Apple i WCAG 2.5.5. Te dwa
     przyciski nie są objęte globalną regułą z design-v794.css, która podnosi
     pozostałe kontrolki do 46 px. */
  min-height: 44px !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  overflow: hidden !important;
  border-radius: 11px !important;
  box-shadow: none !important;
  font-size: max(0.75rem, 12px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

#inventory .inventory-card-actions .watch-button,
body[data-theme] #inventory .inventory-card-actions .watch-button {
  border: 1px solid rgba(248, 244, 234, 0.16) !important;
  background: rgba(248, 244, 234, 0.055) !important;
  color: rgba(255, 250, 240, 0.84) !important;
}

#inventory .inventory-card-actions .watch-button.is-watching,
body[data-theme] #inventory .inventory-card-actions .watch-button.is-watching {
  border-color: rgba(220, 232, 111, 0.44) !important;
  background: rgba(220, 232, 111, 0.09) !important;
  color: #e5ef86 !important;
}

#inventory .compare-button,
body[data-theme] #inventory .compare-button {
  border: 1px solid rgba(239, 204, 113, 0.34) !important;
  background: rgba(239, 204, 113, 0.065) !important;
  color: #f2d481 !important;
  cursor: pointer !important;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease !important;
}

#inventory .compare-button.is-comparing,
#inventory .compare-button[aria-pressed="true"],
body[data-theme] #inventory .compare-button.is-comparing,
body[data-theme] #inventory .compare-button[aria-pressed="true"] {
  border-color: #dce86f !important;
  background:
    linear-gradient(135deg, rgba(220, 232, 111, 0.92), rgba(232, 239, 142, 0.78)),
    #dce86f !important;
  color: #14170e !important;
  box-shadow: inset 0 0 0 1px rgba(20, 23, 14, 0.12) !important;
}

#inventory :is(.inventory-compare-clear, .inventory-compare-remove, .compare-button, .inventory-card-actions .watch-button):focus-visible,
body[data-theme] #inventory :is(.inventory-compare-clear, .inventory-compare-remove, .compare-button, .inventory-card-actions .watch-button):focus-visible {
  outline: 3px solid #dce86f !important;
  outline-offset: 2px !important;
}

@media (hover: hover) and (pointer: fine) {
  #inventory .inventory-compare-card:hover,
  body[data-theme] #inventory .inventory-compare-card:hover {
    border-color: rgba(239, 204, 113, 0.38) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      0 16px 32px rgba(0, 0, 0, 0.27) !important;
    transform: translateY(-2px) !important;
  }

  #inventory .inventory-compare-card.is-recommended:hover,
  body[data-theme] #inventory .inventory-compare-card.is-recommended:hover {
    border-color: rgba(239, 204, 113, 0.72) !important;
    box-shadow:
      inset 3px 0 0 rgba(239, 204, 113, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.065),
      0 17px 34px rgba(0, 0, 0, 0.29) !important;
  }

  #inventory .compare-button:hover,
  body[data-theme] #inventory .compare-button:hover {
    border-color: rgba(220, 232, 111, 0.7) !important;
    color: #e8f08b !important;
  }
}

@media (max-width: 900px) {
  #inventory .item-body,
  body[data-theme] #inventory .item-body,
  html.native-layout-guard #inventory .item-body,
  html.native-layout-guard body[data-theme] #inventory .item-body {
    grid-template-columns: minmax(0, 1fr) 64px !important;
    grid-template-areas:
      "title price"
      "meta link"
      "tags link"
      "actions actions" !important;
  }

  #inventory .item-card .product-link,
  body[data-theme] #inventory .item-card .product-link,
  html.native-layout-guard #inventory .item-card .product-link,
  html.native-layout-guard body[data-theme] #inventory .item-card .product-link {
    grid-area: link !important;
  }

  #inventory .inventory-card-actions,
  body[data-theme] #inventory .inventory-card-actions,
  html.native-layout-guard #inventory .inventory-card-actions,
  html.native-layout-guard body[data-theme] #inventory .inventory-card-actions {
    grid-area: actions !important;
    align-self: end !important;
    gap: 5px !important;
    margin-top: 4px !important;
  }
}

@media (max-width: 720px) {
  #inventory .inventory-compare-panel,
  body[data-theme] #inventory .inventory-compare-panel,
  html.native-layout-guard #inventory .inventory-compare-panel,
  html.native-layout-guard body[data-theme] #inventory .inventory-compare-panel {
    padding: 11px !important;
    border-radius: 16px !important;
  }

  #inventory .inventory-compare-head,
  body[data-theme] #inventory .inventory-compare-head {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
  }

  #inventory .inventory-compare-actions,
  body[data-theme] #inventory .inventory-compare-actions {
    justify-content: stretch !important;
  }

  #inventory .inventory-compare-clear,
  body[data-theme] #inventory .inventory-compare-clear {
    width: 100% !important;
  }

  #inventory .inventory-compare-panel.is-selection-pending .inventory-compare-head,
  body[data-theme] #inventory .inventory-compare-panel.is-selection-pending .inventory-compare-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
  }

  #inventory .inventory-compare-panel.is-selection-pending .inventory-compare-actions,
  body[data-theme] #inventory .inventory-compare-panel.is-selection-pending .inventory-compare-actions {
    justify-content: flex-end !important;
  }

  #inventory .inventory-compare-panel.is-selection-pending .inventory-compare-clear,
  body[data-theme] #inventory .inventory-compare-panel.is-selection-pending .inventory-compare-clear {
    width: auto !important;
    min-width: 44px !important;
    padding-inline: 10px !important;
  }

  #inventory .inventory-compare-verdict,
  body[data-theme] #inventory .inventory-compare-verdict,
  html.native-layout-guard #inventory .inventory-compare-verdict,
  html.native-layout-guard body[data-theme] #inventory .inventory-compare-verdict {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "mark"
      "copy"
      "rule" !important;
    align-items: start !important;
    gap: 7px !important;
    padding: 11px 11px 12px 13px !important;
  }

  #inventory .inventory-compare-verdict-copy ul,
  body[data-theme] #inventory .inventory-compare-verdict-copy ul {
    display: grid !important;
    gap: 3px !important;
  }

  #inventory .inventory-compare-verdict-copy li,
  body[data-theme] #inventory .inventory-compare-verdict-copy li {
    width: 100% !important;
  }

  #inventory .inventory-compare-verdict-rule,
  body[data-theme] #inventory .inventory-compare-verdict-rule,
  #inventory .inventory-compare-verdict.is-unavailable .inventory-compare-verdict-rule,
  body[data-theme] #inventory .inventory-compare-verdict.is-unavailable .inventory-compare-verdict-rule {
    padding: 7px 0 0 !important;
    border-top: 1px dashed currentColor !important;
    border-left: 0 !important;
  }

  #inventory .inventory-compare-grid,
  body[data-theme] #inventory .inventory-compare-grid {
    display: flex !important;
    align-items: stretch !important;
    gap: 9px !important;
    padding: 18px 2px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    scroll-padding-inline: 2px !important;
    scroll-snap-type: inline mandatory !important;
    scrollbar-color: rgba(239, 204, 113, 0.44) rgba(248, 244, 234, 0.04) !important;
    scrollbar-width: thin !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #inventory .inventory-compare-grid::-webkit-scrollbar,
  body[data-theme] #inventory .inventory-compare-grid::-webkit-scrollbar {
    height: 5px !important;
  }

  #inventory .inventory-compare-grid::-webkit-scrollbar-track,
  body[data-theme] #inventory .inventory-compare-grid::-webkit-scrollbar-track {
    border-radius: 999px !important;
    background: rgba(248, 244, 234, 0.04) !important;
  }

  #inventory .inventory-compare-grid::-webkit-scrollbar-thumb,
  body[data-theme] #inventory .inventory-compare-grid::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(239, 204, 113, 0.44) !important;
  }

  #inventory :is(.inventory-compare-card, .inventory-compare-empty-slot),
  body[data-theme] #inventory :is(.inventory-compare-card, .inventory-compare-empty-slot) {
    flex: 0 0 min(220px, calc(100% - 24px)) !important;
    width: min(220px, calc(100% - 24px)) !important;
    max-width: min(220px, calc(100% - 24px)) !important;
    min-width: min(220px, calc(100% - 24px)) !important;
    min-height: 270px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }
}

@media (max-width: 370px) {
  #inventory .inventory-compare-decision-actions,
  body[data-theme] #inventory .inventory-compare-decision-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #inventory .inventory-card-actions,
  body[data-theme] #inventory .inventory-card-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  #inventory .inventory-card-actions :is(.watch-button, .compare-button),
  body[data-theme] #inventory .inventory-card-actions :is(.watch-button, .compare-button) {
    min-height: 44px !important;
    padding: 4px !important;
    font-size: max(0.7rem, 11px) !important;
    letter-spacing: -0.01em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #inventory .inventory-compare-card,
  #inventory .compare-button,
  #inventory .inventory-compare-decision-actions button,
  body[data-theme] #inventory .inventory-compare-card,
  body[data-theme] #inventory .compare-button,
  body[data-theme] #inventory .inventory-compare-decision-actions button {
    transition: none !important;
  }

  #inventory .inventory-compare-card:hover,
  body[data-theme] #inventory .inventory-compare-card:hover,
  #inventory .inventory-compare-decision-actions button:hover,
  body[data-theme] #inventory .inventory-compare-decision-actions button:hover {
    transform: none !important;
  }

  #inventory .inventory-compare-grid,
  body[data-theme] #inventory .inventory-compare-grid {
    scroll-behavior: auto !important;
  }
}

/* v571: the Radar closes the purchase loop with a wardrobe accession action. */
#inventory .watchlist-body > .watchlist-row-actions,
body[data-theme] #inventory .watchlist-body > .watchlist-row-actions,
html.native-layout-guard #inventory .watchlist-body > .watchlist-row-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  align-items: stretch !important;
  width: 100% !important;
}

#inventory .watchlist-row-actions.has-open .watchlist-claim-button,
body[data-theme] #inventory .watchlist-row-actions.has-open .watchlist-claim-button {
  grid-column: 1 / -1 !important;
}

#inventory .watchlist-row-actions > :is(button, a),
body[data-theme] #inventory .watchlist-row-actions > :is(button, a),
html.native-layout-guard #inventory .watchlist-row-actions > :is(button, a) {
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
}

#inventory .watchlist-claim-button,
body[data-theme] #inventory .watchlist-claim-button,
html.native-layout-guard #inventory .watchlist-claim-button {
  border: 1px solid rgba(97, 215, 207, 0.58) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(105deg, rgba(97, 215, 207, 0.16), rgba(97, 215, 207, 0.04)),
    #0b1112 !important;
  color: #b9fff8 !important;
  box-shadow: inset 3px 0 0 rgba(97, 215, 207, 0.42) !important;
  font-size: 0.68rem !important;
  font-weight: 930 !important;
  letter-spacing: 0.055em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
}

#inventory .watchlist-price-ready .watchlist-claim-button,
body[data-theme] #inventory .watchlist-price-ready .watchlist-claim-button {
  border-color: rgba(185, 255, 248, 0.72) !important;
  background:
    linear-gradient(105deg, rgba(97, 215, 207, 0.3), rgba(97, 215, 207, 0.09)),
    #0b1516 !important;
  box-shadow:
    inset 3px 0 0 rgba(185, 255, 248, 0.72),
    0 8px 20px rgba(0, 0, 0, 0.18) !important;
}

#inventory .watchlist-claim-button:hover,
body[data-theme] #inventory .watchlist-claim-button:hover {
  border-color: #b9fff8 !important;
  color: #eafffd !important;
  transform: translateY(-1px) !important;
}

#inventory .watchlist-claim-button:focus-visible,
body[data-theme] #inventory .watchlist-claim-button:focus-visible {
  outline: 2px solid #b9fff8 !important;
  outline-offset: 2px !important;
}

@keyframes radar-wardrobe-accession {
  from {
    box-shadow: inset 0 0 0 rgba(97, 215, 207, 0), 0 0 0 rgba(97, 215, 207, 0);
  }
  to {
    box-shadow: inset 4px 0 0 rgba(97, 215, 207, 0.72), 0 16px 34px rgba(0, 0, 0, 0.28);
  }
}

#inventory .item-card.is-radar-owned,
body[data-theme] #inventory .item-card.is-radar-owned,
html.native-layout-guard #inventory .item-card.is-radar-owned {
  scroll-margin-block: 96px !important;
  border-color: rgba(97, 215, 207, 0.62) !important;
  background:
    linear-gradient(108deg, rgba(97, 215, 207, 0.14), transparent 54%),
    #0d1213 !important;
  box-shadow: inset 4px 0 0 rgba(97, 215, 207, 0.72), 0 16px 34px rgba(0, 0, 0, 0.28) !important;
  animation: radar-wardrobe-accession 380ms ease-out both !important;
}

#inventory .item-card.is-radar-owned:focus-visible,
body[data-theme] #inventory .item-card.is-radar-owned:focus-visible {
  outline: 2px solid #b9fff8 !important;
  outline-offset: 3px !important;
}

#inventory .radar-owned-badge,
body[data-theme] #inventory .radar-owned-badge,
html.native-layout-guard #inventory .radar-owned-badge {
  display: inline-flex !important;
  justify-self: start !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 6px !important;
  padding: 4px 8px 3px !important;
  border: 1px dashed rgba(97, 215, 207, 0.62) !important;
  border-radius: 3px !important;
  background: rgba(97, 215, 207, 0.08) !important;
  color: #82e8e0 !important;
  font-size: 0.54rem !important;
  font-weight: 930 !important;
  letter-spacing: 0.09em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  transform: rotate(-0.7deg) !important;
}

#inventory .owned-size-pill,
body[data-theme] #inventory .owned-size-pill {
  border-color: rgba(97, 215, 207, 0.38) !important;
  color: #b9fff8 !important;
}

@media (prefers-reduced-motion: reduce) {
  #inventory .item-card.is-radar-owned,
  body[data-theme] #inventory .item-card.is-radar-owned {
    animation: none !important;
  }

  #inventory .watchlist-claim-button:hover,
  body[data-theme] #inventory .watchlist-claim-button:hover {
    transform: none !important;
  }
}

/* v572: a detachable accession receipt makes the last Radar move reversible. */
#inventory .radar-owned-accession,
body[data-theme] #inventory .radar-owned-accession,
html.native-layout-guard #inventory .radar-owned-accession {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 7px !important;
  align-items: center !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 7px !important;
  padding: 0 0 7px !important;
  border-bottom: 1px dashed rgba(97, 215, 207, 0.28) !important;
}

#inventory .radar-owned-accession .radar-owned-badge,
body[data-theme] #inventory .radar-owned-accession .radar-owned-badge {
  min-width: 0 !important;
  margin: 0 !important;
}

#inventory .radar-owned-undo,
body[data-theme] #inventory .radar-owned-undo,
html.native-layout-guard #inventory .radar-owned-undo {
  min-width: 88px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 8px 11px !important;
  border: 1px dashed rgba(239, 204, 113, 0.52) !important;
  border-radius: 7px !important;
  background: rgba(239, 204, 113, 0.07) !important;
  color: #f3d98e !important;
  box-shadow: none !important;
  font-size: 0.61rem !important;
  font-weight: 920 !important;
  letter-spacing: 0.045em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

#inventory .radar-owned-undo:hover,
body[data-theme] #inventory .radar-owned-undo:hover {
  border-style: solid !important;
  background: rgba(239, 204, 113, 0.13) !important;
  color: #fff0bd !important;
}

#inventory .radar-owned-undo:focus-visible,
body[data-theme] #inventory .radar-owned-undo:focus-visible {
  outline: 2px solid #f3d98e !important;
  outline-offset: 2px !important;
}

@media (max-width: 350px) {
  #inventory .radar-owned-accession,
  body[data-theme] #inventory .radar-owned-accession {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #inventory .radar-owned-undo,
  body[data-theme] #inventory .radar-owned-undo {
    justify-self: stretch !important;
    width: 100% !important;
  }
}

@media (max-width: 900px) {
  #inventory .radar-owned-accession,
  body[data-theme] #inventory .radar-owned-accession,
  html.native-layout-guard #inventory .radar-owned-accession {
    grid-area: actions !important;
    grid-column: 1 / -1 !important;
  }
}

/* v573: the 320 px Radar keeps labels readable instead of compressing them into receipts. */
@media (max-width: 420px) {
  #inventory > .section-head .section-actions,
  body[data-theme] #inventory > .section-head .section-actions,
  html.native-layout-guard #inventory > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #inventory > .section-head .section-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #inventory .segmented,
  body[data-theme] #inventory .segmented,
  html.native-layout-guard #inventory .segmented,
  html.native-layout-guard body[data-theme] #inventory .segmented {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
  }

  #inventory .segmented button,
  body[data-theme] #inventory .segmented button,
  html.native-layout-guard #inventory .segmented button,
  html.native-layout-guard body[data-theme] #inventory .segmented button {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 7px !important;
    font-size: 0.68rem !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #inventory .inventory-tools-menu,
  body[data-theme] #inventory .inventory-tools-menu,
  html.native-layout-guard #inventory .inventory-tools-menu,
  html.native-layout-guard body[data-theme] #inventory .inventory-tools-menu {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }

  #inventory .watchlist-row,
  body[data-theme] #inventory .watchlist-row,
  html.native-layout-guard #inventory .watchlist-row,
  html.native-layout-guard body[data-theme] #inventory .watchlist-row {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 9px !important;
    align-items: start !important;
    padding: 9px !important;
  }

  #inventory .watchlist-row > img,
  body[data-theme] #inventory .watchlist-row > img,
  html.native-layout-guard #inventory .watchlist-row > img,
  html.native-layout-guard body[data-theme] #inventory .watchlist-row > img {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
  }

  #inventory .watchlist-row-head,
  body[data-theme] #inventory .watchlist-row-head,
  html.native-layout-guard #inventory .watchlist-row-head,
  html.native-layout-guard body[data-theme] #inventory .watchlist-row-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
    gap: 6px !important;
  }

  #inventory .watchlist-row-head strong,
  body[data-theme] #inventory .watchlist-row-head strong,
  html.native-layout-guard #inventory .watchlist-row-head strong,
  html.native-layout-guard body[data-theme] #inventory .watchlist-row-head strong,
  #inventory .item-body h3,
  body[data-theme] #inventory .item-body h3,
  html.native-layout-guard #inventory .item-body h3,
  html.native-layout-guard body[data-theme] #inventory .item-body h3 {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  #inventory .watchlist-row-head > span,
  body[data-theme] #inventory .watchlist-row-head > span,
  html.native-layout-guard #inventory .watchlist-row-head > span,
  html.native-layout-guard body[data-theme] #inventory .watchlist-row-head > span {
    justify-self: start !important;
  }

  #inventory .watchlist-target-form,
  body[data-theme] #inventory .watchlist-target-form,
  html.native-layout-guard #inventory .watchlist-target-form,
  html.native-layout-guard body[data-theme] #inventory .watchlist-target-form,
  #inventory .watchlist-target-field,
  body[data-theme] #inventory .watchlist-target-field,
  html.native-layout-guard #inventory .watchlist-target-field,
  html.native-layout-guard body[data-theme] #inventory .watchlist-target-field {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #inventory .watchlist-target-field > span,
  body[data-theme] #inventory .watchlist-target-field > span,
  html.native-layout-guard #inventory .watchlist-target-field > span,
  html.native-layout-guard body[data-theme] #inventory .watchlist-target-field > span {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.2 !important;
  }

  #inventory .watchlist-target-submit,
  body[data-theme] #inventory .watchlist-target-submit,
  html.native-layout-guard #inventory .watchlist-target-submit,
  html.native-layout-guard body[data-theme] #inventory .watchlist-target-submit {
    width: 100% !important;
  }
}

/* v575: a tailor's measuring rail shows the exact distance to each Radar threshold. */
#inventory .watchlist-price-runway,
body[data-theme] #inventory .watchlist-price-runway,
html.native-layout-guard #inventory .watchlist-price-runway,
html.native-layout-guard body[data-theme] #inventory .watchlist-price-runway {
  display: grid !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 8px 0 0 !important;
  padding: 7px 0 0 !important;
  border-top: 1px dashed rgba(248, 244, 234, 0.16) !important;
}

#inventory .watchlist-price-runway-copy,
body[data-theme] #inventory .watchlist-price-runway-copy,
html.native-layout-guard #inventory .watchlist-price-runway-copy {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 4px 7px !important;
  min-width: 0 !important;
}

#inventory .watchlist-price-runway-copy :is(span, b, strong),
body[data-theme] #inventory .watchlist-price-runway-copy :is(span, b, strong) {
  margin: 0 !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.055em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

#inventory .watchlist-price-runway-label,
body[data-theme] #inventory .watchlist-price-runway-label {
  color: rgba(248, 244, 234, 0.68) !important;
}

#inventory .watchlist-price-runway-copy b,
body[data-theme] #inventory .watchlist-price-runway-copy b {
  color: #f3d98e !important;
  font-variant-numeric: tabular-nums !important;
}

#inventory .watchlist-price-runway-copy strong,
body[data-theme] #inventory .watchlist-price-runway-copy strong {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  color: rgba(248, 244, 234, 0.56) !important;
  font-variant-numeric: tabular-nums !important;
}

#inventory .watchlist-price-runway-bar,
body[data-theme] #inventory .watchlist-price-runway-bar,
html.native-layout-guard #inventory .watchlist-price-runway-bar {
  display: block !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 6px !important;
  min-height: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: transparent !important;
  accent-color: #f3d98e !important;
}

#inventory .watchlist-price-runway-bar::-webkit-progress-bar,
body[data-theme] #inventory .watchlist-price-runway-bar::-webkit-progress-bar {
  border-radius: 2px !important;
  background:
    repeating-linear-gradient(90deg, rgba(248, 244, 234, 0.1) 0 1px, transparent 1px 12px),
    rgba(248, 244, 234, 0.08) !important;
}

#inventory .watchlist-price-runway-bar::-webkit-progress-value,
body[data-theme] #inventory .watchlist-price-runway-bar::-webkit-progress-value {
  border-radius: 2px !important;
  background:
    repeating-linear-gradient(90deg, rgba(11, 17, 18, 0.28) 0 1px, transparent 1px 12px),
    linear-gradient(90deg, #b88b34, #f3d98e) !important;
}

#inventory .watchlist-price-runway-bar::-moz-progress-bar,
body[data-theme] #inventory .watchlist-price-runway-bar::-moz-progress-bar {
  border-radius: 2px !important;
  background:
    repeating-linear-gradient(90deg, rgba(11, 17, 18, 0.28) 0 1px, transparent 1px 12px),
    linear-gradient(90deg, #b88b34, #f3d98e) !important;
}

#inventory .watchlist-price-runway.is-ready .watchlist-price-runway-label,
#inventory .watchlist-price-runway.is-ready .watchlist-price-runway-copy b,
body[data-theme] #inventory .watchlist-price-runway.is-ready .watchlist-price-runway-label,
body[data-theme] #inventory .watchlist-price-runway.is-ready .watchlist-price-runway-copy b {
  color: #b9fff8 !important;
}

#inventory .watchlist-price-runway.is-ready .watchlist-price-runway-bar,
body[data-theme] #inventory .watchlist-price-runway.is-ready .watchlist-price-runway-bar {
  accent-color: #82e8e0 !important;
}

#inventory .watchlist-price-runway.is-ready .watchlist-price-runway-bar::-webkit-progress-value,
body[data-theme] #inventory .watchlist-price-runway.is-ready .watchlist-price-runway-bar::-webkit-progress-value {
  background:
    repeating-linear-gradient(90deg, rgba(11, 17, 18, 0.28) 0 1px, transparent 1px 12px),
    linear-gradient(90deg, #2f8f89, #82e8e0) !important;
}

#inventory .watchlist-price-runway.is-ready .watchlist-price-runway-bar::-moz-progress-bar,
body[data-theme] #inventory .watchlist-price-runway.is-ready .watchlist-price-runway-bar::-moz-progress-bar {
  background:
    repeating-linear-gradient(90deg, rgba(11, 17, 18, 0.28) 0 1px, transparent 1px 12px),
    linear-gradient(90deg, #2f8f89, #82e8e0) !important;
}

/* v576: quick percentage cuts turn each Radar threshold into a one-tap decision. */
#inventory .watchlist-target-presets,
body[data-theme] #inventory .watchlist-target-presets,
html.native-layout-guard #inventory .watchlist-target-presets,
html.native-layout-guard body[data-theme] #inventory .watchlist-target-presets {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 1px 0 0 !important;
  padding: 8px 0 0 !important;
  border-top: 1px dashed rgba(248, 244, 234, 0.14) !important;
}

#inventory .watchlist-target-presets-label,
body[data-theme] #inventory .watchlist-target-presets-label,
html.native-layout-guard #inventory .watchlist-target-presets-label {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  color: rgba(248, 244, 234, 0.58) !important;
  font-size: 0.54rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.085em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

#inventory .watchlist-target-preset,
body[data-theme] #inventory .watchlist-target-preset,
html.native-layout-guard #inventory .watchlist-target-preset,
html.native-layout-guard body[data-theme] #inventory .watchlist-target-preset {
  display: inline-grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 8px 4px !important;
  border: 1px solid rgba(239, 204, 113, 0.34) !important;
  border-radius: 6px !important;
  background: rgba(239, 204, 113, 0.07) !important;
  color: rgba(248, 220, 145, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  font-size: 0.67rem !important;
  font-weight: 930 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.035em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#inventory .watchlist-target-preset:hover,
body[data-theme] #inventory .watchlist-target-preset:hover {
  border-color: rgba(239, 204, 113, 0.68) !important;
  background: rgba(239, 204, 113, 0.13) !important;
  color: #f8dc91 !important;
}

#inventory .watchlist-target-preset[aria-pressed="true"],
body[data-theme] #inventory .watchlist-target-preset[aria-pressed="true"],
html.native-layout-guard #inventory .watchlist-target-preset[aria-pressed="true"],
html.native-layout-guard body[data-theme] #inventory .watchlist-target-preset[aria-pressed="true"] {
  border-color: rgba(97, 215, 207, 0.72) !important;
  background:
    linear-gradient(135deg, rgba(97, 215, 207, 0.2), rgba(97, 215, 207, 0.08)) !important;
  color: #b9fff8 !important;
  box-shadow: inset 0 0 0 1px rgba(185, 255, 248, 0.08) !important;
}

#inventory .watchlist-target-preset:focus-visible,
body[data-theme] #inventory .watchlist-target-preset:focus-visible,
html.native-layout-guard #inventory .watchlist-target-preset:focus-visible,
html.native-layout-guard body[data-theme] #inventory .watchlist-target-preset:focus-visible {
  outline: 2px solid #b9fff8 !important;
  outline-offset: 2px !important;
}

/* v577: a correction slip keeps the previous Radar target safely reversible. */
#inventory .watchlist-target-undo,
body[data-theme] #inventory .watchlist-target-undo,
html.native-layout-guard #inventory .watchlist-target-undo,
html.native-layout-guard body[data-theme] #inventory .watchlist-target-undo {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 1px 0 0 !important;
  padding: 7px 7px 7px 9px !important;
  border: 1px solid rgba(97, 215, 207, 0.3) !important;
  border-left: 3px solid rgba(97, 215, 207, 0.74) !important;
  border-radius: 6px !important;
  background:
    linear-gradient(105deg, rgba(97, 215, 207, 0.12), transparent 68%),
    rgba(4, 7, 8, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

#inventory .watchlist-target-undo-copy,
body[data-theme] #inventory .watchlist-target-undo-copy,
html.native-layout-guard #inventory .watchlist-target-undo-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#inventory .watchlist-target-undo-copy > span,
body[data-theme] #inventory .watchlist-target-undo-copy > span {
  color: rgba(248, 244, 234, 0.58) !important;
  font-size: 0.52rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.075em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

#inventory .watchlist-target-undo-copy > strong,
body[data-theme] #inventory .watchlist-target-undo-copy > strong {
  color: #b9fff8 !important;
  font-size: 0.76rem !important;
  font-weight: 930 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
}

#inventory .watchlist-target-undo-button,
body[data-theme] #inventory .watchlist-target-undo-button,
html.native-layout-guard #inventory .watchlist-target-undo-button,
html.native-layout-guard body[data-theme] #inventory .watchlist-target-undo-button {
  min-width: 72px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(185, 255, 248, 0.42) !important;
  border-radius: 5px !important;
  background: rgba(97, 215, 207, 0.08) !important;
  color: #b9fff8 !important;
  box-shadow: none !important;
  font-size: 0.61rem !important;
  font-weight: 930 !important;
  letter-spacing: 0.035em !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

#inventory .watchlist-target-undo-button:hover,
body[data-theme] #inventory .watchlist-target-undo-button:hover {
  border-color: rgba(185, 255, 248, 0.72) !important;
  background: rgba(97, 215, 207, 0.16) !important;
}

#inventory .watchlist-target-undo-button:focus-visible,
body[data-theme] #inventory .watchlist-target-undo-button:focus-visible,
html.native-layout-guard #inventory .watchlist-target-undo-button:focus-visible,
html.native-layout-guard body[data-theme] #inventory .watchlist-target-undo-button:focus-visible {
  outline: 2px solid #b9fff8 !important;
  outline-offset: 2px !important;
}

@media (max-width: 370px) {
  #inventory .watchlist-target-undo,
  body[data-theme] #inventory .watchlist-target-undo,
  html.native-layout-guard #inventory .watchlist-target-undo,
  html.native-layout-guard body[data-theme] #inventory .watchlist-target-undo {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #inventory .watchlist-target-undo-button,
  body[data-theme] #inventory .watchlist-target-undo-button,
  html.native-layout-guard #inventory .watchlist-target-undo-button,
  html.native-layout-guard body[data-theme] #inventory .watchlist-target-undo-button {
    width: 100% !important;
  }
}

/* v578: three stacked receipt tickets separate price-ready from truly buy-ready. */
#inventory .watchlist-scope-filter,
body[data-theme] #inventory .watchlist-scope-filter,
html.native-layout-guard #inventory .watchlist-scope-filter,
html.native-layout-guard body[data-theme] #inventory .watchlist-scope-filter {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding: 3px !important;
}

#inventory .watchlist-scope-button,
body[data-theme] #inventory .watchlist-scope-button,
html.native-layout-guard #inventory .watchlist-scope-button,
html.native-layout-guard body[data-theme] #inventory .watchlist-scope-button {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 4px !important;
  min-height: 56px !important;
  padding: 5px 4px !important;
  text-align: center !important;
}

#inventory .watchlist-scope-button[aria-pressed="true"],
body[data-theme] #inventory .watchlist-scope-button[aria-pressed="true"],
html.native-layout-guard #inventory .watchlist-scope-button[aria-pressed="true"],
html.native-layout-guard body[data-theme] #inventory .watchlist-scope-button[aria-pressed="true"] {
  box-shadow: inset 0 -3px 0 rgba(97, 215, 207, 0.78) !important;
}

#inventory .watchlist-scope-label,
body[data-theme] #inventory .watchlist-scope-label,
html.native-layout-guard #inventory .watchlist-scope-label {
  min-height: 1.1em !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.03em !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

#inventory .watchlist-scope-count,
body[data-theme] #inventory .watchlist-scope-count,
html.native-layout-guard #inventory .watchlist-scope-count {
  min-width: 24px !important;
  width: auto !important;
  height: 22px !important;
  padding: 0 4px !important;
  border-radius: 3px !important;
  font-size: 0.6rem !important;
}

#inventory .watchlist-scope-button:focus-visible,
body[data-theme] #inventory .watchlist-scope-button:focus-visible,
html.native-layout-guard #inventory .watchlist-scope-button:focus-visible,
html.native-layout-guard body[data-theme] #inventory .watchlist-scope-button:focus-visible {
  outline-offset: -3px !important;
}

#inventory .watchlist-ready-to-buy,
body[data-theme] #inventory .watchlist-ready-to-buy,
html.native-layout-guard #inventory .watchlist-ready-to-buy,
html.native-layout-guard body[data-theme] #inventory .watchlist-ready-to-buy {
  box-shadow:
    inset 3px 0 0 rgba(97, 215, 207, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

/* v580: native purchase calls expose one clear, non-repeatable busy state. */
.paywall-product:disabled,
body[data-theme] .paywall-product:disabled {
  cursor: wait !important;
  opacity: 0.48 !important;
  transform: none !important;
}

.paywall-product[aria-busy="true"],
body[data-theme] .paywall-product[aria-busy="true"] {
  border-color: rgba(185, 255, 248, 0.82) !important;
  opacity: 1 !important;
  box-shadow:
    inset 3px 0 0 rgba(97, 215, 207, 0.82),
    0 16px 34px rgba(0, 0, 0, 0.24) !important;
}

.paywall-product[aria-busy="true"] .paywall-plan-cta,
body[data-theme] .paywall-product[aria-busy="true"] .paywall-plan-cta {
  position: relative !important;
  padding-right: 28px !important;
}

.paywall-product[aria-busy="true"] .paywall-plan-cta::after,
body[data-theme] .paywall-product[aria-busy="true"] .paywall-plan-cta::after {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: paywall-purchase-spin 0.7s linear infinite;
}

@keyframes paywall-purchase-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .paywall-product[aria-busy="true"] .paywall-plan-cta::after,
  body[data-theme] .paywall-product[aria-busy="true"] .paywall-plan-cta::after {
    animation: none;
    border-right-color: currentColor;
  }
}

/* v586: Discover turns one product into an anchored Studio look. */
#discover .discover-look-actions,
body[data-theme] #discover .discover-look-actions,
html.native-layout-guard #discover .discover-look-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#discover .discover-build-look,
body[data-theme] #discover .discover-build-look,
html.native-layout-guard #discover .discover-build-look {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 46px !important;
  width: 100% !important;
  min-width: 0 !important;
  border-color: rgba(255, 113, 143, 0.76) !important;
  background:
    linear-gradient(102deg, rgba(255, 255, 255, 0.22), transparent 42%),
    linear-gradient(180deg, #ff6686 0%, #ff365f 58%, #b51f43 100%) !important;
  color: #fff8fa !important;
  padding: 10px 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 12px 28px rgba(255, 54, 95, 0.24) !important;
}

#discover .discover-build-look::after,
body[data-theme] #discover .discover-build-look::after {
  flex: 0 0 auto !important;
  margin-left: 12px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  content: "→" !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
}

#discover .discover-build-look:disabled,
body[data-theme] #discover .discover-build-look:disabled {
  cursor: not-allowed !important;
  border-color: rgba(244, 240, 232, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.08), rgba(244, 240, 232, 0.025)),
    #111419 !important;
  color: rgba(244, 240, 232, 0.56) !important;
  box-shadow: none !important;
}

#discover .discover-build-look:disabled::after,
body[data-theme] #discover .discover-build-look:disabled::after {
  content: "×" !important;
}

#discover .discover-product-link,
body[data-theme] #discover .discover-product-link,
html.native-layout-guard #discover .discover-product-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  width: 100% !important;
  min-width: 0 !important;
  border-color: rgba(244, 240, 232, 0.16) !important;
  background: rgba(5, 6, 8, 0.64) !important;
  color: rgba(255, 255, 250, 0.84) !important;
  box-shadow: none !important;
}

#discover .discover-product-link[hidden],
body[data-theme] #discover .discover-product-link[hidden],
html.native-layout-guard #discover .discover-product-link[hidden] {
  display: none !important;
}

#discover .discover-build-look:focus-visible,
#discover .discover-product-link:focus-visible,
body[data-theme] #discover .discover-build-look:focus-visible,
body[data-theme] #discover .discover-product-link:focus-visible {
  outline: 3px solid var(--sb-mint, #b9f7e4) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: no-preference) {
  #discover .discover-build-look:not(:disabled):hover,
  body[data-theme] #discover .discover-build-look:not(:disabled):hover {
    transform: translateY(-1px) !important;
  }
}

/* v588: a Studio look enters commerce as a signed client brief, not another generated card. */
#studio .studio-client-action,
body[data-theme] #studio .studio-client-action,
html.native-layout-guard #studio .studio-client-action {
  border-color: rgba(239, 204, 113, 0.52) !important;
  background:
    linear-gradient(100deg, rgba(239, 204, 113, 0.16), rgba(239, 204, 113, 0.035)),
    rgba(10, 11, 13, 0.74) !important;
  color: #ffe7a4 !important;
}

#studio .studio-client-action::after,
body[data-theme] #studio .studio-client-action::after {
  display: inline-block !important;
  margin-left: 8px !important;
  content: "→" !important;
  color: rgba(255, 231, 164, 0.86) !important;
}

#lookbook .look-card.look-card-studio,
body[data-theme] #lookbook .look-card.look-card-studio,
html.native-layout-guard #lookbook .look-card.look-card-studio {
  position: relative !important;
  scroll-margin-block: 84px !important;
  border-color: rgba(239, 204, 113, 0.64) !important;
  background:
    linear-gradient(110deg, rgba(239, 204, 113, 0.14), transparent 46%),
    var(--read-card, #151515) !important;
  box-shadow:
    inset 3px 0 0 rgba(239, 204, 113, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 36px rgba(0, 0, 0, 0.3) !important;
  animation: studio-look-arrive 360ms ease-out both !important;
}

#lookbook .look-card.look-card-studio::before,
body[data-theme] #lookbook .look-card.look-card-studio::before {
  position: absolute !important;
  inset: 9px auto 9px 8px !important;
  width: 1px !important;
  border: 0 !important;
  border-left: 1px dashed rgba(255, 235, 184, 0.48) !important;
  border-radius: 0 !important;
  background: transparent !important;
  content: "" !important;
  pointer-events: none !important;
}

#lookbook .look-card-studio .trend-score,
body[data-theme] #lookbook .look-card-studio .trend-score {
  border: 1px dashed rgba(239, 204, 113, 0.62) !important;
  border-radius: 3px !important;
  background: rgba(239, 204, 113, 0.1) !important;
  color: #efcc71 !important;
  padding: 4px 7px 3px !important;
  font-size: 0.56rem !important;
  font-weight: 940 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transform: rotate(-1deg) !important;
}

#lookbook .studio-look-origin,
body[data-theme] #lookbook .studio-look-origin {
  margin: 7px 0 0 !important;
  color: rgba(255, 236, 190, 0.74) !important;
  font-size: 0.68rem !important;
  line-height: 1.28 !important;
}

#lookbook .look-studio-warning,
body[data-theme] #lookbook .look-studio-warning {
  grid-column: 1 / -1 !important;
  color: #ffd59c !important;
}

#lookbook .look-card-studio .primary-button:disabled,
body[data-theme] #lookbook .look-card-studio .primary-button:disabled {
  cursor: not-allowed !important;
  border-color: rgba(244, 240, 232, 0.14) !important;
  background: rgba(244, 240, 232, 0.07) !important;
  color: rgba(244, 240, 232, 0.52) !important;
  box-shadow: none !important;
}

@keyframes studio-look-arrive {
  from {
    opacity: 0.7;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #lookbook .look-card.look-card-studio,
  body[data-theme] #lookbook .look-card.look-card-studio {
    animation: none !important;
  }
}

/* v589: an active reservation turns into a deliberate client message, not an orphaned cart. */
#lookbook .reservation-followup-action,
body[data-theme] #lookbook .reservation-followup-action,
html.native-layout-guard #lookbook .reservation-followup-action {
  position: relative !important;
  border-color: rgba(239, 204, 113, 0.52) !important;
  background:
    linear-gradient(100deg, rgba(239, 204, 113, 0.15), rgba(239, 204, 113, 0.035)),
    rgba(10, 11, 13, 0.68) !important;
  color: #ffe7a4 !important;
}

#lookbook .reservation-followup-action::after,
body[data-theme] #lookbook .reservation-followup-action::after {
  display: inline-block !important;
  margin-left: 7px !important;
  content: "↗" !important;
  color: rgba(255, 231, 164, 0.88) !important;
  transition: transform 160ms ease !important;
}

#lookbook .reservation-followup-action:focus-visible,
body[data-theme] #lookbook .reservation-followup-action:focus-visible {
  outline: 3px solid rgba(255, 230, 157, 0.9) !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: no-preference) {
  #lookbook .reservation-followup-action:not(:disabled):hover::after,
  body[data-theme] #lookbook .reservation-followup-action:not(:disabled):hover::after {
    transform: translate(2px, -2px) !important;
  }
}

/* v590: a named reservation leaves a discreet but traceable fitting-stage mark. */
#lookbook .reservation-pipeline-sync,
body[data-theme] #lookbook .reservation-pipeline-sync,
html.native-layout-guard #lookbook .reservation-pipeline-sync {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 0 0 7px !important;
  border: 1px solid rgba(239, 204, 113, 0.48) !important;
  border-radius: 999px !important;
  background: rgba(239, 204, 113, 0.1) !important;
  color: #ffe7a4 !important;
  padding: 2px 6px !important;
  font-size: 0.56rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
}

/* v591: the client dossier carries one live reservation as a time-sensitive ticket. */
#clients .client-reservation-card,
body[data-theme] #clients .client-reservation-card,
html.native-layout-guard #clients .client-reservation-card {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(239, 204, 113, 0.45) !important;
  border-left: 3px solid rgba(239, 204, 113, 0.82) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(105deg, rgba(239, 204, 113, 0.15), rgba(239, 204, 113, 0.025) 62%),
    rgba(10, 11, 13, 0.66) !important;
  box-shadow: inset 0 1px 0 rgba(255, 244, 206, 0.08) !important;
  padding: 10px !important;
}

#clients .client-reservation-card span,
body[data-theme] #clients .client-reservation-card span {
  display: block !important;
  color: rgba(255, 233, 170, 0.76) !important;
  font-size: 0.64rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#clients .client-reservation-card strong,
body[data-theme] #clients .client-reservation-card strong {
  display: block !important;
  margin-top: 3px !important;
  color: #fff0c5 !important;
}

#clients .client-reservation-card p,
body[data-theme] #clients .client-reservation-card p {
  margin: 5px 0 0 !important;
  color: rgba(255, 245, 216, 0.68) !important;
  font-size: 0.72rem !important;
}

#clients .client-reservation-open,
body[data-theme] #clients .client-reservation-open {
  border-color: rgba(239, 204, 113, 0.52) !important;
  background: rgba(239, 204, 113, 0.1) !important;
  color: #ffe7a4 !important;
  white-space: nowrap !important;
}

#clients .client-reservation-open::after,
body[data-theme] #clients .client-reservation-open::after {
  display: inline-block !important;
  margin-left: 7px !important;
  content: "→" !important;
}

#clients .client-reservation-actions,
body[data-theme] #clients .client-reservation-actions,
html.native-layout-guard #clients .client-reservation-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

#clients .client-reservation-actions .ghost-button,
#clients .client-reservation-actions .primary-button,
body[data-theme] #clients .client-reservation-actions .ghost-button,
body[data-theme] #clients .client-reservation-actions .primary-button {
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 0.7rem !important;
}

#clients .client-reservation-followup,
body[data-theme] #clients .client-reservation-followup {
  border-color: rgba(185, 247, 228, 0.48) !important;
  background: rgba(185, 247, 228, 0.1) !important;
  color: #b9f7e4 !important;
}

/* v630: the newest sale can be safely corrected from its client context. */
#clients .client-purchase-card .client-purchase-restore,
body[data-theme] #clients .client-purchase-card .client-purchase-restore,
html.native-layout-guard #clients .client-purchase-card .client-purchase-restore {
  width: 100% !important;
  min-height: 34px !important;
  margin-top: 9px !important;
  border-color: rgba(185, 247, 228, 0.48) !important;
  background: rgba(185, 247, 228, 0.08) !important;
  color: #b9f7e4 !important;
  font-size: 0.7rem !important;
}

/* v627: an urgent dossier ticket can be closed without losing the client context. */
#clients .client-reservation-sell,
body[data-theme] #clients .client-reservation-sell,
html.native-layout-guard #clients .client-reservation-sell {
  border-color: rgba(185, 247, 228, 0.7) !important;
  background: linear-gradient(135deg, rgba(85, 208, 165, 0.92), rgba(46, 160, 124, 0.92)) !important;
  color: #041912 !important;
}

#clients .client-reservation-release,
body[data-theme] #clients .client-reservation-release,
html.native-layout-guard #clients .client-reservation-release {
  border-color: rgba(255, 171, 184, 0.58) !important;
  background: rgba(255, 99, 123, 0.1) !important;
  color: #ffc3cd !important;
}

#clients .client-reservation-card.client-reservation-urgent,
body[data-theme] #clients .client-reservation-card.client-reservation-urgent,
html.native-layout-guard #clients .client-reservation-card.client-reservation-urgent {
  border-color: rgba(255, 99, 123, 0.56) !important;
  border-left-color: rgba(255, 99, 123, 0.92) !important;
  background:
    linear-gradient(105deg, rgba(255, 99, 123, 0.17), rgba(255, 99, 123, 0.025) 62%),
    rgba(10, 11, 13, 0.7) !important;
}

#clients .client-reservation-card .client-reservation-urgency,
body[data-theme] #clients .client-reservation-card .client-reservation-urgency {
  color: #ffbcc7 !important;
  font-weight: 900 !important;
}

@media (max-width: 560px) {
  #clients .client-reservation-card,
  body[data-theme] #clients .client-reservation-card {
    grid-template-columns: 1fr !important;
  }

  #clients .client-reservation-open,
  body[data-theme] #clients .client-reservation-open {
    width: 100% !important;
  }

  #clients .client-reservation-actions,
  body[data-theme] #clients .client-reservation-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  #clients .client-reservation-actions .client-reservation-open,
  body[data-theme] #clients .client-reservation-actions .client-reservation-open {
    width: auto !important;
  }
}

/* v595: a fitting can return to a stronger proposal without pretending the sale was lost. */
#clients .client-stage-rewind,
body[data-theme] #clients .client-stage-rewind,
html.native-layout-guard #clients .client-stage-rewind,
#clients .lead-back-button,
body[data-theme] #clients .lead-back-button,
html.native-layout-guard #clients .lead-back-button {
  border-color: rgba(185, 247, 228, 0.42) !important;
  background: rgba(185, 247, 228, 0.08) !important;
  color: #b9f7e4 !important;
}

#clients .client-stage-rewind::before,
body[data-theme] #clients .client-stage-rewind::before,
#clients .lead-back-button::before,
body[data-theme] #clients .lead-back-button::before {
  display: inline-block !important;
  margin-right: 7px !important;
  content: "←" !important;
}

#clients .client-stage-rewind {
  justify-self: start !important;
}

@media (max-width: 560px) {
  #clients .client-stage-rewind,
  body[data-theme] #clients .client-stage-rewind {
    width: 100% !important;
  }
}

/* v581: cached Premium stays visibly pending until the native store answers. */
#subscriptionButton[aria-busy="true"],
body[data-theme] #subscriptionButton[aria-busy="true"] {
  cursor: progress !important;
  border-color: rgba(185, 255, 248, 0.62) !important;
  box-shadow: inset 3px 0 0 rgba(97, 215, 207, 0.72) !important;
}

#subscriptionButton[aria-busy="true"] strong,
body[data-theme] #subscriptionButton[aria-busy="true"] strong {
  color: #b9fff8 !important;
}

/* v677-clients-mobile-head-actions: keep CRM title clear of its filter and reset controls. */
@media (max-width: 900px) {
  #clients > .section-head,
  body[data-theme] #clients > .section-head,
  html.native-layout-guard #clients > .section-head,
  html.native-layout-guard body[data-theme] #clients > .section-head {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  #clients > .section-head .section-actions,
  body[data-theme] #clients > .section-head .section-actions,
  html.native-layout-guard #clients > .section-head .section-actions,
  html.native-layout-guard body[data-theme] #clients > .section-head .section-actions {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    grid-template-columns: minmax(0, 1fr) 82px !important;
    gap: 6px !important;
    width: 100% !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  #clients #togglePipelinePrioritiesButton,
  body[data-theme] #clients #togglePipelinePrioritiesButton,
  html.native-layout-guard #clients #togglePipelinePrioritiesButton,
  html.native-layout-guard body[data-theme] #clients #togglePipelinePrioritiesButton {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 7px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* v678-clients-priority-control-placement: override the legacy CRM ghost-button grid placement inside the action group. */
@media (max-width: 900px) {
  #clients > .section-head .section-actions > :is(.primary-button, .ghost-button),
  body[data-theme] #clients > .section-head .section-actions > :is(.primary-button, .ghost-button),
  html.native-layout-guard #clients > .section-head .section-actions > :is(.primary-button, .ghost-button),
  html.native-layout-guard body[data-theme] #clients > .section-head .section-actions > :is(.primary-button, .ghost-button) {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    max-width: none !important;
  }
}

/* v679-clients-mobile-reset-only: recover a compact title-and-reset row when no priority filter is available. */
@media (max-width: 900px) {
  #clients > .section-head:not(.has-pipeline-priorities),
  body[data-theme] #clients > .section-head:not(.has-pipeline-priorities),
  html.native-layout-guard #clients > .section-head:not(.has-pipeline-priorities),
  html.native-layout-guard body[data-theme] #clients > .section-head:not(.has-pipeline-priorities) {
    grid-template-columns: minmax(0, 1fr) 82px !important;
    align-items: center !important;
  }

  #clients > .section-head:not(.has-pipeline-priorities) .section-actions,
  body[data-theme] #clients > .section-head:not(.has-pipeline-priorities) .section-actions,
  html.native-layout-guard #clients > .section-head:not(.has-pipeline-priorities) .section-actions,
  html.native-layout-guard body[data-theme] #clients > .section-head:not(.has-pipeline-priorities) .section-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-template-columns: 82px !important;
    gap: 0 !important;
    width: 82px !important;
  }

  #clients > .section-head:not(.has-pipeline-priorities) #clearLeadsButton,
  body[data-theme] #clients > .section-head:not(.has-pipeline-priorities) #clearLeadsButton,
  html.native-layout-guard #clients > .section-head:not(.has-pipeline-priorities) #clearLeadsButton,
  html.native-layout-guard body[data-theme] #clients > .section-head:not(.has-pipeline-priorities) #clearLeadsButton {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 82px !important;
  }
}

/* v682-clients-visible-status: keep CRM updates available even while the mobile lead form is collapsed. */
#clients > .client-pipeline-status,
body[data-theme] #clients > .client-pipeline-status,
html.native-layout-guard #clients > .client-pipeline-status,
html.native-layout-guard body[data-theme] #clients > .client-pipeline-status {
  min-height: 0 !important;
  margin: 0 0 8px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(97, 215, 207, 0.26) !important;
  border-radius: 12px !important;
  background: rgba(25, 72, 72, 0.24) !important;
  color: #b9fff8 !important;
  font-size: 0.78rem !important;
  font-weight: 720 !important;
  line-height: 1.2 !important;
}

#clients > .client-pipeline-status:empty,
body[data-theme] #clients > .client-pipeline-status:empty,
html.native-layout-guard #clients > .client-pipeline-status:empty,
html.native-layout-guard body[data-theme] #clients > .client-pipeline-status:empty {
  display: none !important;
}

/* v695-report-mobile-final-row: avoid an orphaned half-width campaign tile. */
@media (max-width: 900px) {
  #report .report-layout > .report-panel.mobile-collapsible.is-collapsed:last-child,
  body[data-theme] #report .report-layout > .report-panel.mobile-collapsible.is-collapsed:last-child,
  html.native-layout-guard #report .report-layout > .report-panel.mobile-collapsible.is-collapsed:last-child,
  html.native-layout-guard body[data-theme] #report .report-layout > .report-panel.mobile-collapsible.is-collapsed:last-child {
    grid-column: 1 / -1 !important;
  }
}

/* v697-mobile-text-safety: never clip or overlap a mobile panel heading when copy or system text is larger. */
@media (max-width: 900px) {
  main .mobile-collapsible.is-collapsed,
  body[data-theme] main .mobile-collapsible.is-collapsed,
  html.native-layout-guard main .mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head),
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) {
    height: auto !important;
    min-height: 44px !important;
    align-items: center !important;
  }

  main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) :is(h2, h3, h4, strong),
  body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) :is(h2, h3, h4, strong),
  html.native-layout-guard main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) :is(h2, h3, h4, strong),
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed > :is(.mobile-collapse-head, .panel-head, .vision-head, .repair-head, .expert-critique-head, .catalog-audit-head, .watchlist-head, .reservation-head, .client-dossier-head, .sales-funnel-head, .action-queue-head, .trend-intel-head) :is(h2, h3, h4, strong) {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.15 !important;
  }

  main .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  body[data-theme] main .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard main .mobile-collapsible.is-collapsed .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] main .mobile-collapsible.is-collapsed .mobile-collapse-toggle {
    align-self: center !important;
  }

  #studio .score-wrap,
  body[data-theme] #studio .score-wrap,
  html.native-layout-guard #studio .score-wrap,
  html.native-layout-guard body[data-theme] #studio .score-wrap,
  #studio .score-wrap > div:last-child,
  body[data-theme] #studio .score-wrap > div:last-child,
  html.native-layout-guard #studio .score-wrap > div:last-child,
  html.native-layout-guard body[data-theme] #studio .score-wrap > div:last-child {
    height: auto !important;
    overflow: visible !important;
  }

  #studio :is(#scoreTitle, #scoreText),
  body[data-theme] #studio :is(#scoreTitle, #scoreText),
  html.native-layout-guard #studio :is(#scoreTitle, #scoreText),
  html.native-layout-guard body[data-theme] #studio :is(#scoreTitle, #scoreText) {
    overflow-wrap: anywhere !important;
  }
}

@media (max-width: 360px) {
  #studio .photo-panel .panel-head,
  body[data-theme] #studio .photo-panel .panel-head,
  html.native-layout-guard #studio .photo-panel .panel-head,
  html.native-layout-guard body[data-theme] #studio .photo-panel .panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #studio #analyzeButton,
  body[data-theme] #studio #analyzeButton,
  html.native-layout-guard #studio #analyzeButton,
  html.native-layout-guard body[data-theme] #studio #analyzeButton {
    width: 100% !important;
  }
}

/* v723-mobile-photo-action: keep the full outfit review CTA readable beside no Studio title. */
@media (max-width: 540px) {
  #studio .photo-panel .panel-head,
  body[data-theme] #studio .photo-panel .panel-head,
  html.native-layout-guard #studio .photo-panel .panel-head,
  html.native-layout-guard body[data-theme] #studio .photo-panel .panel-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #studio #analyzeButton,
  body[data-theme] #studio #analyzeButton,
  html.native-layout-guard #studio #analyzeButton,
  html.native-layout-guard body[data-theme] #studio #analyzeButton {
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
  }
}

/* v710-app-review-ipad-and-subscription-legal: use the available iPad canvas and keep Apple's required subscription links visible. */
.paywall-legal,
body[data-theme] .paywall-legal,
html.native-layout-guard .paywall-legal,
html.native-layout-guard body[data-theme] .paywall-legal {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 0 !important;
  color: rgba(244, 240, 232, 0.72) !important;
  font-size: 0.76rem !important;
  line-height: 1.35 !important;
}

.paywall-legal a,
body[data-theme] .paywall-legal a,
html.native-layout-guard .paywall-legal a,
html.native-layout-guard body[data-theme] .paywall-legal a {
  color: #dce86f !important;
  font-weight: 760 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

.paywall-product em i,
body[data-theme] .paywall-product em i {
  max-width: 15ch !important;
  white-space: normal !important;
}

@media (min-width: 700px) {
  :root {
    --app-rail-width: min(1180px, calc(100vw - 32px)) !important;
    --app-rail-left: max(16px, calc((100vw - var(--app-rail-width)) / 2)) !important;
    --app-width: var(--app-rail-width) !important;
    --app-stage-top: 0px !important;
    --app-stage-bottom: 0px !important;
  }

  body::before {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .topbar,
  .mobile-dock,
  body[data-theme] .topbar,
  body[data-theme] .mobile-dock {
    width: var(--app-rail-width) !important;
    max-width: var(--app-rail-width) !important;
  }

  main > .studio-band,
  main > .content-band,
  main > .business-band {
    width: var(--app-rail-width) !important;
    max-width: var(--app-rail-width) !important;
    padding: 20px 20px 132px !important;
  }

  .paywall-panel,
  body[data-theme] .paywall-panel {
    width: min(680px, calc(100vw - 64px)) !important;
    max-height: calc(100dvh - 64px) !important;
  }
}

/* v710-touch-targets: legal notices remain easy to tap and fit within the compact phone paywall. */
#studio .photo-ai-notice a,
body[data-theme] #studio .photo-ai-notice a,
html.native-layout-guard #studio .photo-ai-notice a,
html.native-layout-guard body[data-theme] #studio .photo-ai-notice a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 40px !important;
}

.paywall-legal,
body[data-theme] .paywall-legal,
html.native-layout-guard .paywall-legal,
html.native-layout-guard body[data-theme] .paywall-legal {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
}

/* Kolumna ma ok. 130 px na ekranie 320 px, a niemieckie
   „Nutzungsbedingungen (EULA)” to jedno długie słowo bez miejsca na złamanie —
   wychodziło poza kolumnę. To są linki wymagane przez Apple, więc nie mogą być
   przycięte w żadnym języku. */
.paywall-legal a,
body[data-theme] .paywall-legal a,
html.native-layout-guard .paywall-legal a {
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}

.paywall-legal #paywallLegalIntro {
  grid-column: 1 / -1 !important;
}

.paywall-legal [aria-hidden="true"] {
  display: none !important;
}

.paywall-legal a,
body[data-theme] .paywall-legal a,
html.native-layout-guard .paywall-legal a,
html.native-layout-guard body[data-theme] .paywall-legal a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 40px !important;
  padding-block: 2px !important;
}

@media (max-width: 699px) {
  .paywall-dialog,
  body[data-theme] .paywall-dialog {
    padding: calc(var(--safe-top, 0px) + 6px) 6px calc(var(--safe-bottom, 0px) + 6px) !important;
  }

  .paywall-panel,
  body[data-theme] .paywall-panel {
    width: min(460px, 100%) !important;
    max-height: calc(100dvh - var(--safe-top, 0px) - var(--safe-bottom, 0px) - 12px) !important;
    gap: 8px !important;
    padding: 12px 11px !important;
  }

  .paywall-actions,
  body[data-theme] .paywall-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .paywall-actions .ghost-button,
  body[data-theme] .paywall-actions .ghost-button {
    min-height: 44px !important;
    padding-inline: 8px !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
  }
}

/* v725-mobile-empty-score-compact: one upload instruction is enough before a photo exists. */
@media (max-width: 540px) {
  #studio .score-wrap[data-photo-ready="false"]:has(.score-ring[data-empty="true"]),
  body[data-theme] #studio .score-wrap[data-photo-ready="false"]:has(.score-ring[data-empty="true"]),
  html.native-layout-guard #studio .score-wrap[data-photo-ready="false"]:has(.score-ring[data-empty="true"]),
  html.native-layout-guard body[data-theme] #studio .score-wrap[data-photo-ready="false"]:has(.score-ring[data-empty="true"]) {
    height: auto !important;
    min-height: 64px !important;
    margin-top: 6px !important;
    padding: 6px !important;
  }

  #studio .score-wrap[data-photo-ready="false"]:has(.score-ring[data-empty="true"]) #scoreText,
  body[data-theme] #studio .score-wrap[data-photo-ready="false"]:has(.score-ring[data-empty="true"]) #scoreText,
  html.native-layout-guard #studio .score-wrap[data-photo-ready="false"]:has(.score-ring[data-empty="true"]) #scoreText,
  html.native-layout-guard body[data-theme] #studio .score-wrap[data-photo-ready="false"]:has(.score-ring[data-empty="true"]) #scoreText {
    display: none !important;
  }
}

/* v726-tablet-empty-score: the expanded tablet flow already explains the next photo step. */
@media (min-width: 681px) and (max-width: 900px) {
  #studio .score-wrap:has(.score-ring[data-empty="true"]),
  body[data-theme] #studio .score-wrap:has(.score-ring[data-empty="true"]),
  html.native-layout-guard #studio .score-wrap:has(.score-ring[data-empty="true"]),
  html.native-layout-guard body[data-theme] #studio .score-wrap:has(.score-ring[data-empty="true"]) {
    display: none !important;
  }
}

/* v731-studio-value-hierarchy: keep one dominant score and make its explanation read as supporting evidence. */
#studio .expert-verdict-explanation-top,
body[data-theme] #studio .expert-verdict-explanation-top,
html.native-layout-guard #studio .expert-verdict-explanation-top,
html.native-layout-guard body[data-theme] #studio .expert-verdict-explanation-top {
  grid-template-columns: minmax(0, 1fr) !important;
}

#studio #analyzeButton[hidden],
#studio .vision-panel[hidden],
#studio [hidden],
body[data-theme] #studio #analyzeButton[hidden],
body[data-theme] #studio .vision-panel[hidden],
body[data-theme] #studio [hidden],
html.native-layout-guard #studio #analyzeButton[hidden],
html.native-layout-guard #studio .vision-panel[hidden],
html.native-layout-guard #studio [hidden],
html.native-layout-guard body[data-theme] #studio [hidden] {
  display: none !important;
}

/* v754-photo-disclosure-layout: keep the privacy action distinct from the decision copy on phones. */
#studio .photo-ai-notice,
body[data-theme] #studio .photo-ai-notice,
html.native-layout-guard #studio .photo-ai-notice,
html.native-layout-guard body[data-theme] #studio .photo-ai-notice {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(185, 247, 228, 0.16) !important;
  border-radius: 14px !important;
  background: rgba(5, 6, 8, 0.42) !important;
}

#studio .photo-ai-notice span,
body[data-theme] #studio .photo-ai-notice span,
html.native-layout-guard #studio .photo-ai-notice span,
html.native-layout-guard body[data-theme] #studio .photo-ai-notice span {
  color: var(--sb-soft, #d9d4cb) !important;
  font-size: 0.76rem !important;
  line-height: 1.32 !important;
}

#studio .photo-ai-notice a,
body[data-theme] #studio .photo-ai-notice a,
html.native-layout-guard #studio .photo-ai-notice a,
html.native-layout-guard body[data-theme] #studio .photo-ai-notice a {
  display: inline-flex !important;
  align-items: center !important;
  justify-self: start !important;
  min-height: 44px !important;
  color: var(--sb-mint, #b9f7e4) !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

#studio .photo-journey,
body[data-theme] #studio .photo-journey,
html.native-layout-guard #studio .photo-journey,
html.native-layout-guard body[data-theme] #studio .photo-journey {
  display: grid !important;
  gap: 10px !important;
  margin: 14px 0 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(185, 247, 228, 0.28) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(ellipse at 0 0, rgba(185, 247, 228, 0.1), transparent 54%),
    rgba(5, 6, 8, 0.56) !important;
}

#studio .photo-journey-head,
body[data-theme] #studio .photo-journey-head,
html.native-layout-guard #studio .photo-journey-head,
html.native-layout-guard body[data-theme] #studio .photo-journey-head {
  display: grid !important;
  gap: 2px !important;
}

#studio .photo-journey-head span,
body[data-theme] #studio .photo-journey-head span,
html.native-layout-guard #studio .photo-journey-head span,
html.native-layout-guard body[data-theme] #studio .photo-journey-head span {
  color: var(--sb-mint, #b9f7e4) !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
}

#studio .photo-journey-head strong,
body[data-theme] #studio .photo-journey-head strong,
html.native-layout-guard #studio .photo-journey-head strong,
html.native-layout-guard body[data-theme] #studio .photo-journey-head strong {
  color: var(--sb-ink, #f4f0e8) !important;
  font-size: 1rem !important;
}

#studio .photo-journey-actions,
body[data-theme] #studio .photo-journey-actions,
html.native-layout-guard #studio .photo-journey-actions,
html.native-layout-guard body[data-theme] #studio .photo-journey-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#studio .photo-journey-actions button,
body[data-theme] #studio .photo-journey-actions button,
html.native-layout-guard #studio .photo-journey-actions button,
html.native-layout-guard body[data-theme] #studio .photo-journey-actions button {
  display: grid !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 8px 10px !important;
  place-items: center !important;
  text-align: center !important;
  font-size: 0.78rem !important;
  line-height: 1.15 !important;
}

#studio .photo-journey-actions button[data-locked],
body[data-theme] #studio .photo-journey-actions button[data-locked],
html.native-layout-guard #studio .photo-journey-actions button[data-locked],
html.native-layout-guard body[data-theme] #studio .photo-journey-actions button[data-locked] {
  min-height: 56px !important;
  border-color: rgba(239, 196, 104, 0.42) !important;
  background: rgba(239, 196, 104, 0.07) !important;
}

#studio .photo-journey-action-label,
body[data-theme] #studio .photo-journey-action-label,
html.native-layout-guard #studio .photo-journey-action-label,
html.native-layout-guard body[data-theme] #studio .photo-journey-action-label {
  min-width: 0 !important;
  color: var(--ui-text) !important;
}

#studio .photo-journey-actions [data-photo-journey-action="outfit"][data-photo-journey-variant="preview"],
body[data-theme] #studio .photo-journey-actions [data-photo-journey-action="outfit"][data-photo-journey-variant="preview"],
html.native-layout-guard #studio .photo-journey-actions [data-photo-journey-action="outfit"][data-photo-journey-variant="preview"],
html.native-layout-guard body[data-theme] #studio .photo-journey-actions [data-photo-journey-action="outfit"][data-photo-journey-variant="preview"] {
  grid-column: 1 / -1 !important;
}

#studio .photo-journey-access-badge,
body[data-theme] #studio .photo-journey-access-badge,
html.native-layout-guard #studio .photo-journey-access-badge,
html.native-layout-guard body[data-theme] #studio .photo-journey-access-badge {
  display: block !important;
  margin-top: 3px !important;
  color: var(--sb-gold, #efc468) !important;
  font-size: 0.64rem !important;
  font-weight: 760 !important;
  line-height: 1.1 !important;
}

#studio .expert-style-verdict > .photo-journey .ghost-button[data-locked],
body[data-theme] #studio .expert-style-verdict > .photo-journey .ghost-button[data-locked],
html.native-layout-guard #studio .expert-style-verdict > .photo-journey .ghost-button[data-locked],
html.native-layout-guard body[data-theme] #studio .expert-style-verdict > .photo-journey .ghost-button[data-locked] {
  border-color: #6b4900 !important;
  background: #fff1cf !important;
}

#studio .expert-style-verdict > .photo-journey .ghost-button[data-locked] .photo-journey-access-badge,
body[data-theme] #studio .expert-style-verdict > .photo-journey .ghost-button[data-locked] .photo-journey-access-badge,
html.native-layout-guard #studio .expert-style-verdict > .photo-journey .ghost-button[data-locked] .photo-journey-access-badge,
html.native-layout-guard body[data-theme] #studio .expert-style-verdict > .photo-journey .ghost-button[data-locked] .photo-journey-access-badge {
  color: #6b4900 !important;
}

#studio .expert-style-verdict > .photo-journey.photo-journey-collapsible > summary > small,
body[data-theme] #studio .expert-style-verdict > .photo-journey.photo-journey-collapsible > summary > small,
html.native-layout-guard #studio .expert-style-verdict > .photo-journey.photo-journey-collapsible > summary > small,
html.native-layout-guard body[data-theme] #studio .expert-style-verdict > .photo-journey.photo-journey-collapsible > summary > small {
  color: #6b5b60 !important;
}

#studio .expert-style-verdict > .photo-journey .photo-journey-action-label,
body[data-theme] #studio .expert-style-verdict > .photo-journey .photo-journey-action-label,
html.native-layout-guard #studio .expert-style-verdict > .photo-journey .photo-journey-action-label,
html.native-layout-guard body[data-theme] #studio .expert-style-verdict > .photo-journey .photo-journey-action-label {
  color: #160d11 !important;
}

#studio .photo-journey-actions .primary-button,
body[data-theme] #studio .photo-journey-actions .primary-button,
html.native-layout-guard #studio .photo-journey-actions .primary-button,
html.native-layout-guard body[data-theme] #studio .photo-journey-actions .primary-button {
  grid-column: 1 / -1 !important;
}

/* v757-photo-result-shortcut: keep the most useful next action beside the model recommendation. */
#studio .expert-next-move,
body[data-theme] #studio .expert-next-move,
html.native-layout-guard #studio .expert-next-move,
html.native-layout-guard body[data-theme] #studio .expert-next-move {
  display: grid !important;
  gap: 8px !important;
}

#studio .expert-next-move-action,
body[data-theme] #studio .expert-next-move-action,
html.native-layout-guard #studio .expert-next-move-action,
html.native-layout-guard body[data-theme] #studio .expert-next-move-action {
  justify-self: start !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
}

/* v769-model-retry-pending: make the in-place Gemini retry visibly non-repeatable. */
#studio .expert-model-error-action:disabled,
body[data-theme] #studio .expert-model-error-action:disabled,
html.native-layout-guard #studio .expert-model-error-action:disabled,
html.native-layout-guard body[data-theme] #studio .expert-model-error-action:disabled {
  cursor: wait !important;
  opacity: 0.64 !important;
  transform: none !important;
}

@media (max-width: 360px) {
  #studio .photo-ai-notice,
  body[data-theme] #studio .photo-ai-notice,
  html.native-layout-guard #studio .photo-ai-notice,
  html.native-layout-guard body[data-theme] #studio .photo-ai-notice {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #studio .photo-ai-notice a,
  body[data-theme] #studio .photo-ai-notice a,
  html.native-layout-guard #studio .photo-ai-notice a,
  html.native-layout-guard body[data-theme] #studio .photo-ai-notice a {
    justify-self: start !important;
  }
}

/* v772-look-board: make the recommendation feel like a finished outfit, not a product table. */
#studio .recommendation-panel,
body[data-theme] #studio .recommendation-panel,
html.native-layout-guard #studio .recommendation-panel,
html.native-layout-guard body[data-theme] #studio .recommendation-panel {
  display: grid !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 73, 127, 0.72) !important;
  border-radius: 4px !important;
  background: #fffaf3 !important;
  color: #160d11 !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34) !important;
}

#studio .recommendation-panel > .panel-head,
body[data-theme] #studio .recommendation-panel > .panel-head,
html.native-layout-guard #studio .recommendation-panel > .panel-head,
html.native-layout-guard body[data-theme] #studio .recommendation-panel > .panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 0 !important;
  border-bottom: 2px solid #160d11 !important;
  background:
    linear-gradient(110deg, rgba(255, 73, 127, 0.11), transparent 43%),
    #f3e8dc !important;
  color: #160d11 !important;
}

#studio .recommendation-heading,
body[data-theme] #studio .recommendation-heading {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#studio .recommendation-edition-line,
body[data-theme] #studio .recommendation-edition-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#studio .recommendation-edition-line .eyebrow,
body[data-theme] #studio .recommendation-edition-line .eyebrow {
  margin: 0 !important;
  color: #ed2f6c !important;
  font-size: 0.72rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.14em !important;
}

#studio #outfitReadyLabel,
body[data-theme] #studio #outfitReadyLabel {
  color: #6f5d64 !important;
  font-size: 0.6rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.15 !important;
  text-align: right !important;
  text-transform: uppercase !important;
}

#studio #recommendation-title,
body[data-theme] #studio #recommendation-title {
  margin: 2px 0 0 !important;
  color: #160d11 !important;
  font-size: clamp(2.05rem, 9vw, 3.8rem) !important;
  font-weight: 950 !important;
  letter-spacing: -0.065em !important;
  line-height: 0.88 !important;
}

#studio .outfit-editorial-thesis,
body[data-theme] #studio .outfit-editorial-thesis {
  max-width: 33ch !important;
  margin: 2px 0 0 !important;
  color: #5f5056 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1rem !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
}

#studio .recommendation-panel > .mode-switch,
body[data-theme] #studio .recommendation-panel > .mode-switch {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid #3a2930 !important;
  border-radius: 0 !important;
  background: #160d11 !important;
}

#studio .recommendation-panel > .mode-switch button,
body[data-theme] #studio .recommendation-panel > .mode-switch button {
  min-height: 44px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-right: 1px solid #4e3941 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #bbaab0 !important;
  box-shadow: none !important;
  font-size: 0.7rem !important;
  font-weight: 850 !important;
}

#studio .recommendation-panel > .mode-switch button:last-child,
body[data-theme] #studio .recommendation-panel > .mode-switch button:last-child {
  border-right: 0 !important;
}

#studio .recommendation-panel > .mode-switch button.active,
body[data-theme] #studio .recommendation-panel > .mode-switch button.active {
  background: #ed2f6c !important;
  color: #ffffff !important;
}

#studio .recommendation-panel > .outfit-summary,
body[data-theme] #studio .recommendation-panel > .outfit-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border-bottom: 1px solid #d5c7cb !important;
  background: #fffaf3 !important;
}

#studio .recommendation-panel > .outfit-summary > div,
body[data-theme] #studio .recommendation-panel > .outfit-summary > div {
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 74px !important;
  padding: 12px 10px !important;
  border: 0 !important;
  border-right: 1px solid #d5c7cb !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #160d11 !important;
  box-shadow: none !important;
}

#studio .recommendation-panel > .outfit-summary > div:last-child,
body[data-theme] #studio .recommendation-panel > .outfit-summary > div:last-child {
  border-right: 0 !important;
}

#studio .recommendation-panel > .outfit-summary strong,
body[data-theme] #studio .recommendation-panel > .outfit-summary strong {
  color: #160d11 !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

#studio .recommendation-panel > .outfit-summary span,
body[data-theme] #studio .recommendation-panel > .outfit-summary span {
  color: #79666d !important;
  font-size: 0.55rem !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  text-transform: uppercase !important;
}

#studio .recommendation-panel > .outfit-list,
body[data-theme] #studio .recommendation-panel > .outfit-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 18px !important;
  background: #f3e8dc !important;
}

#studio .recommendation-panel .outfit-row,
body[data-theme] #studio .recommendation-panel .outfit-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 9px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #160d11 !important;
  color: #fff8ef !important;
  box-shadow: none !important;
}

#studio .recommendation-panel .outfit-row:first-child,
body[data-theme] #studio .recommendation-panel .outfit-row:first-child {
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
  grid-template-rows: auto auto auto !important;
  align-items: stretch !important;
  padding: 0 !important;
}

#studio .recommendation-panel .outfit-row-media,
body[data-theme] #studio .recommendation-panel .outfit-row-media {
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
  background: #09080a !important;
}

#studio .recommendation-panel .outfit-row-media img,
body[data-theme] #studio .recommendation-panel .outfit-row-media img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 160px !important;
  aspect-ratio: 1 / 1.08 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #09080a !important;
  object-fit: contain !important;
  object-position: center !important;
}

#studio .recommendation-panel .outfit-row:first-child .outfit-row-media,
body[data-theme] #studio .recommendation-panel .outfit-row:first-child .outfit-row-media {
  grid-column: 1 !important;
  grid-row: 1 / 4 !important;
}

#studio .recommendation-panel .outfit-row:first-child .outfit-row-media img,
body[data-theme] #studio .recommendation-panel .outfit-row:first-child .outfit-row-media img {
  height: 100% !important;
  min-height: 236px !important;
  aspect-ratio: auto !important;
}

#studio .recommendation-panel .outfit-row-number,
body[data-theme] #studio .recommendation-panel .outfit-row-number {
  position: absolute !important;
  top: 9px !important;
  left: 10px !important;
  z-index: 1 !important;
  color: #ff4f86 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.55rem !important;
  font-style: italic !important;
  font-weight: 700 !important;
  letter-spacing: -0.06em !important;
  line-height: 1 !important;
}

#studio .recommendation-panel .outfit-row-copy,
body[data-theme] #studio .recommendation-panel .outfit-row-copy {
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 0 11px !important;
}

#studio .recommendation-panel .outfit-row:first-child .outfit-row-copy,
body[data-theme] #studio .recommendation-panel .outfit-row:first-child .outfit-row-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  padding: 18px 14px 0 !important;
}

#studio .recommendation-panel .outfit-row-role,
body[data-theme] #studio .recommendation-panel .outfit-row-role {
  color: #ff4f86 !important;
  font-size: 0.55rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

#studio .recommendation-panel .outfit-row-copy > strong,
body[data-theme] #studio .recommendation-panel .outfit-row-copy > strong {
  color: #fff8ef !important;
  font-size: clamp(0.92rem, 3.6vw, 1.25rem) !important;
  font-weight: 880 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}

#studio .recommendation-panel .outfit-row-copy > span:not(.outfit-row-role):not(.outfit-anchor-badge),
body[data-theme] #studio .recommendation-panel .outfit-row-copy > span:not(.outfit-row-role):not(.outfit-anchor-badge) {
  color: #bbaab0 !important;
  font-size: 0.64rem !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
}

#studio .recommendation-panel .outfit-row > .price,
body[data-theme] #studio .recommendation-panel .outfit-row > .price {
  padding: 0 11px !important;
  color: #fff8ef !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

#studio .recommendation-panel .outfit-row:first-child > .price,
body[data-theme] #studio .recommendation-panel .outfit-row:first-child > .price {
  grid-column: 2 !important;
  grid-row: 2 !important;
  padding: 0 14px !important;
}

#studio .recommendation-panel .outfit-row .taste-actions,
body[data-theme] #studio .recommendation-panel .outfit-row .taste-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 11px !important;
}

#studio .recommendation-panel .outfit-row:first-child .taste-actions,
body[data-theme] #studio .recommendation-panel .outfit-row:first-child .taste-actions {
  grid-column: 2 !important;
  grid-row: 3 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-self: end !important;
  padding: 0 14px 14px !important;
}

#studio .recommendation-panel .outfit-row .taste-actions > *,
body[data-theme] #studio .recommendation-panel .outfit-row .taste-actions > * {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 7px 5px !important;
  border: 1px solid #5c424c !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #d8cbd0 !important;
  box-shadow: none !important;
  font-size: 0.58rem !important;
  font-weight: 820 !important;
  line-height: 1.12 !important;
  text-align: center !important;
}

#studio .recommendation-panel .outfit-row .taste-actions > *:nth-child(3),
#studio .recommendation-panel .outfit-row .taste-actions .mini-product-link,
body[data-theme] #studio .recommendation-panel .outfit-row .taste-actions > *:nth-child(3),
body[data-theme] #studio .recommendation-panel .outfit-row .taste-actions .mini-product-link {
  grid-column: 1 / -1 !important;
}

#studio .recommendation-panel .outfit-row:first-child .taste-actions > *:nth-child(3),
body[data-theme] #studio .recommendation-panel .outfit-row:first-child .taste-actions > *:nth-child(3) {
  grid-column: auto !important;
}

/* Ten sam defekt kontrastu co przy CTA werdyktu (4,02:1 przy 8,8 px), a element
   siedzi dokładnie w `.recommendation-panel`, dla którego design-v794.css:2718
   definiuje akcent #a81243 z białym tekstem. Bierzemy go stąd zamiast wprowadzać
   kolejny odcień różu. */
#studio .recommendation-panel .outfit-row .taste-actions > *.active,
body[data-theme] #studio .recommendation-panel .outfit-row .taste-actions > *.active {
  border-color: #a81243 !important;
  background: #a81243 !important;
  color: #ffffff !important;
}

#studio .recommendation-panel > .recommendation-actions,
body[data-theme] #studio .recommendation-panel > .recommendation-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 18px 18px !important;
  background: #f3e8dc !important;
}

#studio .recommendation-panel > .recommendation-actions > *,
body[data-theme] #studio .recommendation-panel > .recommendation-actions > * {
  min-width: 0 !important;
  min-height: 48px !important;
  border-radius: 0 !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

#studio .recommendation-panel #saveOutfitButton,
#studio .recommendation-panel #openSavedOutfitButton,
body[data-theme] #studio .recommendation-panel #saveOutfitButton,
body[data-theme] #studio .recommendation-panel #openSavedOutfitButton {
  grid-column: 1 / -1 !important;
}

#studio .recommendation-panel #saveOutfitButton,
body[data-theme] #studio .recommendation-panel #saveOutfitButton {
  border-color: #ff8bb0 !important;
  background: #ed2f6c !important;
  color: #ffffff !important;
}

#studio .recommendation-panel > .recommendation-actions .ghost-button,
body[data-theme] #studio .recommendation-panel > .recommendation-actions .ghost-button {
  border-color: #160d11 !important;
  background: transparent !important;
  color: #160d11 !important;
}

#studio .recommendation-panel > #savedLookStatus,
body[data-theme] #studio .recommendation-panel > #savedLookStatus {
  margin: 0 18px !important;
  color: #5f5056 !important;
}

#studio .recommendation-panel > .taste-panel,
body[data-theme] #studio .recommendation-panel > .taste-panel {
  margin: 18px !important;
  border-radius: 0 !important;
}

#studio .recommendation-panel > .reasons-list,
body[data-theme] #studio .recommendation-panel > .reasons-list {
  margin: 0 18px 18px !important;
}

@media (max-width: 380px) {
  #studio .recommendation-panel > .outfit-list,
  body[data-theme] #studio .recommendation-panel > .outfit-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #studio .recommendation-panel .outfit-row:first-child,
  body[data-theme] #studio .recommendation-panel .outfit-row:first-child {
    grid-column: 1 !important;
  }
}

@media (max-width: 900px) {
  #studio .recommendation-panel.mobile-collapsible.is-collapsed .outfit-editorial-thesis,
  body[data-theme] #studio .recommendation-panel.mobile-collapsible.is-collapsed .outfit-editorial-thesis {
    display: none !important;
  }
}

/* v772-look-board-guard: keep the editorial board inside the rail and the mobile header compact. */
#studio .recommendation-panel,
body[data-theme] #studio .recommendation-panel,
html.native-layout-guard #studio .recommendation-panel,
html.native-layout-guard body[data-theme] #studio .recommendation-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#studio .recommendation-panel > .taste-panel,
body[data-theme] #studio .recommendation-panel > .taste-panel,
html.native-layout-guard #studio .recommendation-panel > .taste-panel,
html.native-layout-guard body[data-theme] #studio .recommendation-panel > .taste-panel {
  width: auto !important;
  max-width: calc(100% - 36px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#studio .recommendation-panel > .reasons-list,
body[data-theme] #studio .recommendation-panel > .reasons-list {
  width: auto !important;
  max-width: calc(100% - 36px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#studio .recommendation-panel .outfit-row:first-child .taste-actions,
body[data-theme] #studio .recommendation-panel .outfit-row:first-child .taste-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#studio .recommendation-panel .outfit-row:first-child .taste-actions > *:nth-child(3),
body[data-theme] #studio .recommendation-panel .outfit-row:first-child .taste-actions > *:nth-child(3) {
  grid-column: 1 / -1 !important;
}

#studio .recommendation-panel .outfit-row .taste-actions > *,
body[data-theme] #studio .recommendation-panel .outfit-row .taste-actions > *,
#studio .recommendation-panel > .recommendation-actions > *,
body[data-theme] #studio .recommendation-panel > .recommendation-actions > * {
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

#studio .recommendation-panel .outfit-row .taste-actions > *,
body[data-theme] #studio .recommendation-panel .outfit-row .taste-actions > * {
  font-size: 0.55rem !important;
}

@media (max-width: 900px) {
  #studio .recommendation-panel.mobile-collapsible:not(.is-collapsed) > .panel-head,
  body[data-theme] #studio .recommendation-panel.mobile-collapsible:not(.is-collapsed) > .panel-head,
  html.native-layout-guard #studio .recommendation-panel.mobile-collapsible:not(.is-collapsed) > .panel-head,
  html.native-layout-guard body[data-theme] #studio .recommendation-panel.mobile-collapsible:not(.is-collapsed) > .panel-head {
    position: relative !important;
    padding-right: 72px !important;
  }

  #studio .recommendation-panel.mobile-collapsible:not(.is-collapsed) > .panel-head > .mobile-collapse-toggle,
  body[data-theme] #studio .recommendation-panel.mobile-collapsible:not(.is-collapsed) > .panel-head > .mobile-collapse-toggle,
  html.native-layout-guard #studio .recommendation-panel.mobile-collapsible:not(.is-collapsed) > .panel-head > .mobile-collapse-toggle,
  html.native-layout-guard body[data-theme] #studio .recommendation-panel.mobile-collapsible:not(.is-collapsed) > .panel-head > .mobile-collapse-toggle {
    position: absolute !important;
    right: 18px !important;
    top: 10px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  #studio .recommendation-panel.mobile-collapsible.is-collapsed,
  body[data-theme] #studio .recommendation-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard #studio .recommendation-panel.mobile-collapsible.is-collapsed,
  html.native-layout-guard body[data-theme] #studio .recommendation-panel.mobile-collapsible.is-collapsed {
    min-height: 52px !important;
    height: auto !important;
    padding: 4px 7px !important;
    overflow: hidden !important;
    border-color: rgba(255, 73, 127, 0.24) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, rgba(30, 18, 24, 0.94), rgba(14, 8, 11, 0.97)) !important;
  }

  #studio .recommendation-panel.mobile-collapsible.is-collapsed > .panel-head,
  body[data-theme] #studio .recommendation-panel.mobile-collapsible.is-collapsed > .panel-head,
  html.native-layout-guard #studio .recommendation-panel.mobile-collapsible.is-collapsed > .panel-head,
  html.native-layout-guard body[data-theme] #studio .recommendation-panel.mobile-collapsible.is-collapsed > .panel-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
  }

  #studio .recommendation-panel.mobile-collapsible.is-collapsed .recommendation-heading,
  body[data-theme] #studio .recommendation-panel.mobile-collapsible.is-collapsed .recommendation-heading {
    gap: 0 !important;
    overflow: hidden !important;
  }

  #studio .recommendation-panel.mobile-collapsible.is-collapsed .recommendation-edition-line,
  body[data-theme] #studio .recommendation-panel.mobile-collapsible.is-collapsed .recommendation-edition-line,
  #studio .recommendation-panel.mobile-collapsible.is-collapsed .outfit-editorial-thesis,
  body[data-theme] #studio .recommendation-panel.mobile-collapsible.is-collapsed .outfit-editorial-thesis {
    display: none !important;
  }

  #studio .recommendation-panel.mobile-collapsible.is-collapsed #recommendation-title,
  body[data-theme] #studio .recommendation-panel.mobile-collapsible.is-collapsed #recommendation-title {
    display: block !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: #fff8ef !important;
    font-family: inherit !important;
    font-size: 0.78rem !important;
    font-weight: 780 !important;
    letter-spacing: 0 !important;
    line-height: 1.08 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* v773-style-memory-editorial: turn History into a living style profile instead of a metrics dashboard. */
#history .style-memory-metrics,
body[data-theme] #history .style-memory-metrics,
html.native-layout-guard #history .style-memory-metrics,
html.native-layout-guard body[data-theme] #history .style-memory-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 73, 127, 0.64) !important;
  border-radius: 4px !important;
  background: #160d11 !important;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28) !important;
}

#history .style-memory-editorial,
body[data-theme] #history .style-memory-editorial,
html.native-layout-guard #history .style-memory-editorial,
html.native-layout-guard body[data-theme] #history .style-memory-editorial {
  position: relative !important;
  grid-column: 1 / -1 !important;
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 270px !important;
  padding: 22px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 2px solid #160d11 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(112deg, rgba(255, 73, 127, 0.14), transparent 45%),
    #f3e8dc !important;
  color: #160d11 !important;
  box-shadow: none !important;
}

#history .style-memory-editorial::after,
body[data-theme] #history .style-memory-editorial::after {
  content: "SB / MEMORY";
  position: absolute;
  right: -8px;
  bottom: -20px;
  color: rgba(22, 13, 17, 0.045);
  font-size: clamp(4.6rem, 14vw, 9rem);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.08em;
  line-height: 0.8;
  pointer-events: none;
}

#history .style-memory-editorial-top,
body[data-theme] #history .style-memory-editorial-top {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

#history .style-memory-editorial-top span,
#history .style-memory-editorial-top em,
body[data-theme] #history .style-memory-editorial-top span,
body[data-theme] #history .style-memory-editorial-top em {
  margin: 0 !important;
  color: #ed2f6c !important;
  font-size: 0.68rem !important;
  font-style: normal !important;
  font-weight: 950 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

#history .style-memory-editorial-top em,
body[data-theme] #history .style-memory-editorial-top em {
  color: #6f5d64 !important;
  font-size: 0.56rem !important;
  text-align: right !important;
}

#history .style-memory-editorial h3,
body[data-theme] #history .style-memory-editorial h3 {
  position: relative !important;
  z-index: 1 !important;
  max-width: 14ch !important;
  margin: 18px 0 0 !important;
  color: #160d11 !important;
  font-size: clamp(2.3rem, 8vw, 5rem) !important;
  font-weight: 950 !important;
  letter-spacing: -0.065em !important;
  line-height: 0.9 !important;
  overflow-wrap: anywhere !important;
}

#history .style-memory-editorial p,
body[data-theme] #history .style-memory-editorial p {
  position: relative !important;
  z-index: 1 !important;
  max-width: 53ch !important;
  margin: 0 !important;
  color: #5f5056 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(0.95rem, 2.6vw, 1.25rem) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
}

#history .style-memory-rhythm,
body[data-theme] #history .style-memory-rhythm {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 1.6fr 0.72fr 0.34fr !important;
  gap: 5px !important;
  width: min(250px, 70%) !important;
  margin-top: auto !important;
}

#history .style-memory-rhythm span,
body[data-theme] #history .style-memory-rhythm span {
  display: block !important;
  height: 5px !important;
  background: #160d11 !important;
}

#history .style-memory-rhythm span:nth-child(2),
body[data-theme] #history .style-memory-rhythm span:nth-child(2) {
  background: #ed2f6c !important;
}

#history .style-memory-stat,
body[data-theme] #history .style-memory-stat,
html.native-layout-guard #history .style-memory-stat,
html.native-layout-guard body[data-theme] #history .style-memory-stat {
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  min-width: 0 !important;
  min-height: 104px !important;
  padding: 16px !important;
  border: 0 !important;
  border-right: 1px solid rgba(243, 232, 220, 0.24) !important;
  border-radius: 0 !important;
  background: #160d11 !important;
  color: #fffaf3 !important;
}

#history .style-memory-stat:last-child,
body[data-theme] #history .style-memory-stat:last-child {
  border-right: 0 !important;
}

#history .style-memory-stat strong,
body[data-theme] #history .style-memory-stat strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #fffaf3 !important;
  font-size: clamp(1.25rem, 3vw, 2rem) !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;
  line-height: 0.98 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#history .style-memory-stat span,
body[data-theme] #history .style-memory-stat span {
  color: #aa989f !important;
  font-size: 0.62rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.055em !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
}

#history .history-layout,
body[data-theme] #history .history-layout {
  gap: 12px !important;
}

#history .history-block,
body[data-theme] #history .history-block,
html.native-layout-guard #history .history-block,
html.native-layout-guard body[data-theme] #history .history-block {
  gap: 10px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#history .history-block-head,
body[data-theme] #history .history-block-head {
  min-height: 54px !important;
  padding: 0 4px !important;
  border: 0 !important;
}

#history .history-block-head h3,
body[data-theme] #history .history-block-head h3 {
  color: #fffaf3 !important;
  font-size: clamp(1.3rem, 4vw, 2rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}

#history .history-empty-card,
body[data-theme] #history .history-empty-card,
html.native-layout-guard #history .history-empty-card,
html.native-layout-guard body[data-theme] #history .history-empty-card {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-content: start !important;
  align-items: start !important;
  gap: 18px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 260px !important;
  padding: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 73, 127, 0.42) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

#history .history-empty-reviews,
body[data-theme] #history .history-empty-reviews {
  background: #160d11 !important;
  color: #fffaf3 !important;
}

#history .history-empty-looks,
body[data-theme] #history .history-empty-looks {
  background:
    linear-gradient(120deg, rgba(255, 73, 127, 0.12), transparent 50%),
    #f3e8dc !important;
  color: #160d11 !important;
}

#history .history-empty-index,
body[data-theme] #history .history-empty-index {
  color: #ed2f6c !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 2.35rem !important;
  font-style: italic !important;
  font-weight: 800 !important;
  line-height: 0.9 !important;
}

#history .history-empty-copy,
body[data-theme] #history .history-empty-copy {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
}

#history .history-empty-card h3,
body[data-theme] #history .history-empty-card h3 {
  margin: 0 !important;
  color: inherit !important;
  font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
}

#history .history-empty-card p,
body[data-theme] #history .history-empty-card p {
  display: block !important;
  margin: 0 !important;
  overflow: visible !important;
  color: rgba(255, 250, 243, 0.66) !important;
  font-size: 0.84rem !important;
  line-height: 1.4 !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

#history .history-empty-looks p,
body[data-theme] #history .history-empty-looks p {
  color: #6f5d64 !important;
}

#history .history-empty-action,
body[data-theme] #history .history-empty-action {
  grid-column: 2 !important;
  justify-self: start !important;
  min-height: 46px !important;
  margin-top: auto !important;
  padding: 0 18px !important;
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 0.74rem !important;
  font-weight: 900 !important;
}

#history .saved-look-card,
body[data-theme] #history .saved-look-card,
html.native-layout-guard #history .saved-look-card,
html.native-layout-guard body[data-theme] #history .saved-look-card {
  grid-template-rows: auto auto auto auto auto auto !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 73, 127, 0.54) !important;
  border-radius: 4px !important;
  background: #160d11 !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.28) !important;
}

#history .saved-look-edition-line,
body[data-theme] #history .saved-look-edition-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#history .saved-look-edition-line span,
#history .saved-look-edition-line em,
body[data-theme] #history .saved-look-edition-line span,
body[data-theme] #history .saved-look-edition-line em {
  color: #ed2f6c !important;
  font-size: 0.64rem !important;
  font-style: normal !important;
  font-weight: 950 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.15 !important;
}

#history .saved-look-edition-line em,
body[data-theme] #history .saved-look-edition-line em {
  color: #aa989f !important;
  font-size: 0.54rem !important;
  text-align: right !important;
}

#history .saved-look-thesis,
body[data-theme] #history .saved-look-thesis {
  margin: 0 !important;
  color: #d8c9ce !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 0.92rem !important;
  font-style: italic !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#history .saved-product,
#history .saved-product img,
#history .saved-product span,
body[data-theme] #history .saved-product,
body[data-theme] #history .saved-product img,
body[data-theme] #history .saved-product span {
  border-radius: 0 !important;
}

#history .saved-look-actions .primary-button,
#history .saved-look-actions .ghost-button,
body[data-theme] #history .saved-look-actions .primary-button,
body[data-theme] #history .saved-look-actions .ghost-button {
  min-height: 46px !important;
  border-radius: 0 !important;
}

@media (max-width: 699px) {
  #history .style-memory-metrics,
  body[data-theme] #history .style-memory-metrics,
  html.native-layout-guard #history .style-memory-metrics,
  html.native-layout-guard body[data-theme] #history .style-memory-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #history .style-memory-editorial,
  body[data-theme] #history .style-memory-editorial {
    min-height: 310px !important;
    padding: 18px !important;
  }

  #history .style-memory-editorial h3,
  body[data-theme] #history .style-memory-editorial h3 {
    margin-top: 22px !important;
    font-size: clamp(2.28rem, 11vw, 3.15rem) !important;
  }

  #history .style-memory-stat,
  body[data-theme] #history .style-memory-stat,
  html.native-layout-guard #history .style-memory-stat,
  html.native-layout-guard body[data-theme] #history .style-memory-stat {
    min-height: 94px !important;
    padding: 14px !important;
    border-bottom: 1px solid rgba(243, 232, 220, 0.2) !important;
  }

  #history .style-memory-stat:nth-of-type(3),
  #history .style-memory-stat:nth-of-type(5),
  body[data-theme] #history .style-memory-stat:nth-of-type(3),
  body[data-theme] #history .style-memory-stat:nth-of-type(5) {
    border-right: 0 !important;
  }

  #history .history-block,
  body[data-theme] #history .history-block,
  html.native-layout-guard #history .history-block,
  html.native-layout-guard body[data-theme] #history .history-block {
    gap: 8px !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  #history .history-empty-card,
  body[data-theme] #history .history-empty-card,
  html.native-layout-guard #history .history-empty-card,
  html.native-layout-guard body[data-theme] #history .history-empty-card {
    min-height: 230px !important;
    padding: 18px !important;
  }

  #history .history-empty-card h3,
  body[data-theme] #history .history-empty-card h3 {
    font-size: 1.55rem !important;
  }

  #history .saved-look-card,
  body[data-theme] #history .saved-look-card,
  html.native-layout-guard #history .saved-look-card,
  html.native-layout-guard body[data-theme] #history .saved-look-card {
    padding: 14px !important;
  }
}

/* v773-style-memory-guard: neutralize broad legacy metric selectors without weakening the new audit. */
#history .style-memory-editorial .style-memory-editorial-top,
#history .style-memory-editorial .style-memory-rhythm,
body[data-theme] #history .style-memory-editorial .style-memory-editorial-top,
body[data-theme] #history .style-memory-editorial .style-memory-rhythm,
html.native-layout-guard #history .style-memory-editorial .style-memory-editorial-top,
html.native-layout-guard #history .style-memory-editorial .style-memory-rhythm,
html.native-layout-guard body[data-theme] #history .style-memory-editorial .style-memory-editorial-top,
html.native-layout-guard body[data-theme] #history .style-memory-editorial .style-memory-rhythm {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#history .style-memory-editorial::after,
body[data-theme] #history .style-memory-editorial::after {
  content: none !important;
  display: none !important;
}

#history .style-memory-stat strong,
body[data-theme] #history .style-memory-stat strong,
html.native-layout-guard #history .style-memory-stat strong,
html.native-layout-guard body[data-theme] #history .style-memory-stat strong {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  line-height: 1.08 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

#history .saved-product span,
body[data-theme] #history .saved-product span,
html.native-layout-guard #history .saved-product span,
html.native-layout-guard body[data-theme] #history .saved-product span {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  line-height: 1.15 !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

@media (max-width: 699px) {
  #history .style-memory-editorial,
  body[data-theme] #history .style-memory-editorial,
  html.native-layout-guard #history .style-memory-editorial,
  html.native-layout-guard body[data-theme] #history .style-memory-editorial {
    min-height: 278px !important;
  }
}

/* v774: the selected Studio set becomes a client-ready editorial proposal. */
#lookbook .lookbook-grid,
body[data-theme] #lookbook .lookbook-grid,
html.native-layout-guard #lookbook .lookbook-grid {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
}

#lookbook .lookbook-grid > .look-card,
body[data-theme] #lookbook .lookbook-grid > .look-card,
html.native-layout-guard #lookbook .lookbook-grid > .look-card {
  flex: 0 0 min(84%, 390px) !important;
}

#lookbook .lookbook-grid > .client-pitch-card,
body[data-theme] #lookbook .lookbook-grid > .client-pitch-card,
html.native-layout-guard #lookbook .lookbook-grid > .client-pitch-card {
  flex-basis: 100% !important;
  min-height: 790px !important;
  overflow: hidden !important;
  border: 1px solid rgba(19, 18, 17, 0.16) !important;
  border-radius: 3px !important;
  background: #f1eee6 !important;
  color: #12110f !important;
  padding: 0 0 16px !important;
  box-shadow: 0 22px 54px rgba(25, 21, 18, 0.2) !important;
}

#lookbook .client-pitch-card::before,
body[data-theme] #lookbook .client-pitch-card::before,
html.native-layout-guard #lookbook .client-pitch-card::before {
  content: none !important;
  display: none !important;
}

#lookbook .client-pitch-edition,
body[data-theme] #lookbook .client-pitch-edition,
html.native-layout-guard #lookbook .client-pitch-edition {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 42px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: #12110f !important;
  color: #fffdf7 !important;
  padding: 10px 15px !important;
  font-size: 0.58rem !important;
  font-weight: 920 !important;
  letter-spacing: 0.15em !important;
  line-height: 1.15 !important;
}

#lookbook .client-pitch-edition strong,
body[data-theme] #lookbook .client-pitch-edition strong {
  color: #f0d0d0 !important;
  font: inherit !important;
  text-align: right !important;
}

#lookbook .client-pitch-card .look-card-head,
body[data-theme] #lookbook .client-pitch-card .look-card-head,
html.native-layout-guard #lookbook .client-pitch-card .look-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 18px 16px 0 !important;
}

#lookbook .client-pitch-card .trend-score,
body[data-theme] #lookbook .client-pitch-card .trend-score {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(18, 17, 15, 0.56) !important;
  padding: 0 !important;
  font-size: 0.57rem !important;
  letter-spacing: 0.14em !important;
  transform: none !important;
}

#lookbook .client-pitch-card .look-card-head h3,
body[data-theme] #lookbook .client-pitch-card .look-card-head h3,
html.native-layout-guard #lookbook .client-pitch-card .look-card-head h3 {
  max-width: 9.4em !important;
  margin: 9px 0 0 !important;
  color: #12110f !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2.15rem, 11.5vw, 3.6rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.86 !important;
  text-wrap: balance !important;
}

#lookbook .client-pitch-card .look-card-head > strong,
body[data-theme] #lookbook .client-pitch-card .look-card-head > strong {
  align-self: start !important;
  border: 1px solid rgba(18, 17, 15, 0.18) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #12110f !important;
  padding: 6px 8px !important;
  font-size: 0.72rem !important;
}

#lookbook .client-pitch-card .studio-look-origin,
body[data-theme] #lookbook .client-pitch-card .studio-look-origin {
  margin: 10px 0 0 !important;
  color: rgba(18, 17, 15, 0.58) !important;
  font-size: 0.66rem !important;
  line-height: 1.3 !important;
}

#lookbook .client-pitch-thesis,
body[data-theme] #lookbook .client-pitch-thesis,
html.native-layout-guard #lookbook .client-pitch-thesis {
  margin: 16px 16px 0 !important;
  border: 0 !important;
  border-left: 4px solid #12110f !important;
  background: #ebcdcd !important;
  color: #12110f !important;
  padding: 13px 14px !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(0.92rem, 3.9vw, 1.1rem) !important;
  font-weight: 500 !important;
  line-height: 1.22 !important;
}

#lookbook .client-pitch-card .look-products,
body[data-theme] #lookbook .client-pitch-card .look-products,
html.native-layout-guard #lookbook .client-pitch-card .look-products {
  display: grid !important;
  grid-template-columns: 1.35fr minmax(0, 0.9fr) !important;
  grid-template-rows: repeat(2, minmax(150px, 1fr)) !important;
  gap: 3px !important;
  min-height: 350px !important;
  margin: 16px 16px 0 !important;
  padding: 3px !important;
  background: #12110f !important;
}

#lookbook .client-pitch-card .look-product,
body[data-theme] #lookbook .client-pitch-card .look-product,
html.native-layout-guard #lookbook .client-pitch-card .look-product {
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #d9d5cd !important;
}

#lookbook .client-pitch-card .look-product:first-child,
body[data-theme] #lookbook .client-pitch-card .look-product:first-child {
  grid-row: 1 / span 2 !important;
}

#lookbook .client-pitch-card .look-product img,
body[data-theme] #lookbook .client-pitch-card .look-product img,
html.native-layout-guard #lookbook .client-pitch-card .look-product img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  filter: saturate(0.86) contrast(1.03) !important;
}

#lookbook .client-pitch-card .look-product-number,
body[data-theme] #lookbook .client-pitch-card .look-product-number,
html.native-layout-guard #lookbook .client-pitch-card .look-product-number {
  position: absolute !important;
  inset: 8px 8px auto auto !important;
  display: block !important;
  width: auto !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f1eee6 !important;
  color: #12110f !important;
  padding: 5px 6px !important;
  font-size: 0.58rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  -webkit-line-clamp: unset !important;
  backdrop-filter: none !important;
}

#lookbook .client-pitch-card .look-product-caption,
body[data-theme] #lookbook .client-pitch-card .look-product-caption,
html.native-layout-guard #lookbook .client-pitch-card .look-product-caption {
  position: absolute !important;
  inset: auto 7px 7px 7px !important;
  display: grid !important;
  gap: 3px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(18, 17, 15, 0.88) !important;
  color: #fffdf7 !important;
  padding: 7px 8px !important;
  line-height: 1.1 !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  backdrop-filter: blur(10px) !important;
}

/* 7,7 px przy rozstrzeleniu 0,12em — najmniejszy tekst w całej aplikacji.
   Podniesione do 11,5 px, rozstrzelenie ścięte do 0,04em. */
#lookbook .client-pitch-card .look-product-caption small,
body[data-theme] #lookbook .client-pitch-card .look-product-caption small {
  color: #efcdcd !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.15 !important;
}

#lookbook .client-pitch-card .look-product-caption strong,
body[data-theme] #lookbook .client-pitch-card .look-product-caption strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #fffdf7 !important;
  /* Nazwa rzeczy zostaje większa od podniesionej etykiety nad nią. */
  font-size: 0.82rem !important;
  font-weight: 760 !important;
  line-height: 1.14 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#lookbook .client-pitch-card .look-product-wardrobe::after,
body[data-theme] #lookbook .client-pitch-card .look-product-wardrobe::after {
  content: none !important;
  display: none !important;
}

#lookbook .client-pitch-card .look-stats,
body[data-theme] #lookbook .client-pitch-card .look-stats,
html.native-layout-guard #lookbook .client-pitch-card .look-stats {
  margin: 14px 16px 0 !important;
  padding: 0 0 2px !important;
}

#lookbook .client-pitch-card .look-stats span,
body[data-theme] #lookbook .client-pitch-card .look-stats span {
  border: 1px solid rgba(18, 17, 15, 0.17) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(18, 17, 15, 0.72) !important;
  padding: 6px 8px !important;
  font-size: 0.6rem !important;
}

#lookbook .client-pitch-card .look-script,
body[data-theme] #lookbook .client-pitch-card .look-script {
  margin: 12px 16px 0 !important;
}

#lookbook .client-pitch-card .look-script p,
body[data-theme] #lookbook .client-pitch-card .look-script p {
  border: 0 !important;
  border-top: 1px solid rgba(18, 17, 15, 0.13) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(18, 17, 15, 0.7) !important;
  padding: 8px 0 0 !important;
  font-size: 0.68rem !important;
}

#lookbook .client-pitch-card .primary-button,
body[data-theme] #lookbook .client-pitch-card .primary-button,
html.native-layout-guard #lookbook .client-pitch-card .primary-button {
  width: auto !important;
  min-height: 48px !important;
  margin: 14px 16px 0 !important;
  border: 1px solid #12110f !important;
  border-radius: 0 !important;
  background: #12110f !important;
  color: #fffdf7 !important;
  box-shadow: none !important;
  font-size: 0.72rem !important;
  font-weight: 920 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#lookbook .client-pitch-card .primary-button:disabled,
body[data-theme] #lookbook .client-pitch-card .primary-button:disabled {
  border-color: rgba(18, 17, 15, 0.3) !important;
  background: rgba(18, 17, 15, 0.1) !important;
  color: rgba(18, 17, 15, 0.5) !important;
}

@media (min-width: 760px) {
  #lookbook .lookbook-grid > .client-pitch-card,
  body[data-theme] #lookbook .lookbook-grid > .client-pitch-card {
    flex-basis: min(72%, 720px) !important;
  }

  #lookbook .lookbook-grid > .look-card:not(.client-pitch-card),
  body[data-theme] #lookbook .lookbook-grid > .look-card:not(.client-pitch-card) {
    flex-basis: min(42%, 390px) !important;
  }
}

/* v774 mobile cascade lock: keep the editorial collage above legacy density guards. */
@media (max-width: 900px) {
  #lookbook .lookbook-panel,
  body[data-theme] #lookbook .lookbook-panel,
  html.native-layout-guard body[data-theme] #lookbook .lookbook-panel {
    position: static !important;
    top: auto !important;
  }

  #lookbook > .section-head,
  body[data-theme] #lookbook > .section-head,
  html.native-layout-guard body[data-theme] #lookbook > .section-head {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
  }

  #lookbook #lookbookGrid {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding: 0 0 8px !important;
    scroll-snap-type: x mandatory !important;
  }

  #lookbook #lookbookGrid > .look-card,
  #lookbook #lookbookGrid > .look-card:nth-child(n + 2) {
    display: grid !important;
    flex: 0 0 84% !important;
    scroll-snap-align: center !important;
  }

  #lookbook #lookbookGrid > .client-pitch-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    gap: 0 !important;
    flex-basis: 100% !important;
    min-height: 0 !important;
    padding: 0 0 16px !important;
    border-radius: 3px !important;
  }

  #lookbook #lookbookGrid .client-pitch-card > * {
    position: relative !important;
    z-index: 1 !important;
  }

  #lookbook #lookbookGrid .client-pitch-edition {
    display: flex !important;
    min-height: 42px !important;
    padding: 10px 15px !important;
  }

  #lookbook #lookbookGrid .client-pitch-card .look-card-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 18px 16px 0 !important;
  }

  #lookbook #lookbookGrid .client-pitch-card .look-card-head h3 {
    display: block !important;
    max-height: none !important;
    margin: 9px 0 0 !important;
    overflow: visible !important;
    font-size: clamp(2.15rem, 11.5vw, 3.6rem) !important;
    line-height: 0.86 !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  #lookbook #lookbookGrid .client-pitch-card .trend-score {
    min-height: 0 !important;
    padding: 0 !important;
  }

  #lookbook #lookbookGrid .client-pitch-card .look-products {
    display: grid !important;
    grid-template-columns: 1.35fr minmax(0, 0.9fr) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(0, 1fr) !important;
    align-self: auto !important;
    gap: 3px !important;
    height: 320px !important;
    min-height: 0 !important;
    margin: 16px 16px 0 !important;
    overflow: hidden !important;
    padding: 3px !important;
  }

  #lookbook #lookbookGrid .client-pitch-card .look-products:has(.look-product:nth-child(4)) {
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    height: 380px !important;
  }

  #lookbook #lookbookGrid .client-pitch-card .look-product,
  #lookbook #lookbookGrid .client-pitch-card .look-product:first-child {
    position: relative !important;
    display: grid !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    min-block-size: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  #lookbook #lookbookGrid .client-pitch-card .look-product:first-child {
    grid-row: 1 / span 2 !important;
  }

  #lookbook #lookbookGrid .client-pitch-card .look-product img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  #lookbook #lookbookGrid .client-pitch-card .look-product-number {
    position: absolute !important;
    inset: 8px 8px auto auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 5px 6px !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  #lookbook #lookbookGrid .client-pitch-card .look-product-caption {
    position: absolute !important;
    inset: auto 7px 7px 7px !important;
    display: grid !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    gap: 3px !important;
    overflow: visible !important;
    padding: 7px 8px !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  #lookbook #lookbookGrid .client-pitch-card .look-product-caption strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }

  #lookbook #lookbookGrid > .look-card:not(.client-pitch-card) .look-product {
    min-height: 54px !important;
  }

  #lookbook #lookbookGrid > .look-card:not(.client-pitch-card) .look-product > span {
    display: -webkit-box !important;
    max-height: none !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
}

/* v775 cascade lock: keep Client Desk editorial after every legacy CRM guard. */
@media (max-width: 900px) {
  #clients #clientDesk {
    position: relative !important;
    display: grid !important;
    gap: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 3px !important;
  }

  #clients #clientDesk .client-desk-edition {
    display: flex !important;
    min-height: 42px !important;
    padding: 10px 15px !important;
  }

  #clients #clientDesk .client-desk-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(116px, 0.65fr) !important;
    min-width: 0 !important;
  }

  #clients #clientDesk .client-desk-copy {
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 16px 14px !important;
  }

  #clients #clientDesk h3 {
    display: block !important;
    max-width: 8em !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    color: #12110f !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(2.7rem, 14vw, 4.1rem) !important;
    font-weight: 500 !important;
    letter-spacing: -0.06em !important;
    line-height: 0.84 !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  #clients #clientDesk .client-desk-narrative {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 11px 10px !important;
    color: #12110f !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 0.9rem !important;
    line-height: 1.24 !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  #clients #clientDesk .client-desk-facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    overflow: visible !important;
  }

  #clients #clientDesk .client-desk-facts > div {
    display: grid !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px !important;
  }

  #clients #clientDesk .client-desk-facts > div:last-child {
    grid-column: 1 / -1 !important;
  }

  #clients #clientDesk .client-desk-facts :is(strong, span) {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  #clients #clientDesk .client-desk-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #clients #clientDesk .client-desk-actions > :is(button, .primary-button, .ghost-button) {
    grid-column: 1 !important;
    width: 100% !important;
    min-height: 48px !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  #clients #clientDesk .client-desk-product {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    min-height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  #clients #clientDesk .client-desk-product img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
  }

  #clients #clientDesk .client-desk-product figcaption {
    position: absolute !important;
    inset: auto 6px 6px 6px !important;
    display: grid !important;
    gap: 5px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px !important;
  }

  #clients #clientDesk .client-desk-product figcaption :is(small, strong, span) {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }
}

/* v776: turn the store report into one merchandising decision before the dashboards. */
#report #merchBrief,
body[data-theme] #report #merchBrief,
html.native-layout-guard body[data-theme] #report #merchBrief {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 1px solid #12110f !important;
  border-radius: 3px !important;
  background: #f1eee6 !important;
  color: #12110f !important;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.22) !important;
}

#report #merchBrief .merch-brief-edition,
body[data-theme] #report #merchBrief .merch-brief-edition {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 46px !important;
  padding: 11px 16px !important;
  background: #12110f !important;
  color: #fffdf7 !important;
  font-size: 0.62rem !important;
  font-weight: 920 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.1 !important;
}

#report #merchBrief .merch-brief-edition strong,
body[data-theme] #report #merchBrief .merch-brief-edition strong {
  color: #ee527f !important;
  font: inherit !important;
}

#report #merchBrief .merch-brief-layout,
body[data-theme] #report #merchBrief .merch-brief-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr) !important;
  min-width: 0 !important;
}

#report #merchBrief .merch-brief-copy,
body[data-theme] #report #merchBrief .merch-brief-copy {
  display: grid !important;
  align-content: start !important;
  gap: 16px !important;
  min-width: 0 !important;
  padding: clamp(24px, 4vw, 48px) !important;
}

#report #merchBrief .merch-brief-kicker,
body[data-theme] #report #merchBrief .merch-brief-kicker {
  margin: 0 !important;
  color: rgba(18, 17, 15, 0.58) !important;
  font-size: 0.62rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.15em !important;
  line-height: 1 !important;
}

#report #merchBrief h3,
body[data-theme] #report #merchBrief h3 {
  max-width: 10em !important;
  margin: 0 !important;
  color: #12110f !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(3rem, 6.7vw, 6.5rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.065em !important;
  line-height: 0.85 !important;
}

#report #merchBrief .merch-brief-narrative,
body[data-theme] #report #merchBrief .merch-brief-narrative {
  max-width: 62ch !important;
  margin: 0 !important;
  border-left: 4px solid #12110f !important;
  background: #ebcdcd !important;
  color: #12110f !important;
  padding: 14px 16px !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(0.95rem, 1.8vw, 1.18rem) !important;
  line-height: 1.3 !important;
}

#report #merchBrief .merch-brief-hold .merch-brief-narrative,
body[data-theme] #report #merchBrief .merch-brief-hold .merch-brief-narrative {
  background: #f0d2a8 !important;
}

#report #merchBrief .merch-brief-facts,
body[data-theme] #report #merchBrief .merch-brief-facts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  border: 1px solid rgba(18, 17, 15, 0.16) !important;
  background: rgba(18, 17, 15, 0.16) !important;
}

#report #merchBrief .merch-brief-facts > div,
body[data-theme] #report #merchBrief .merch-brief-facts > div {
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 12px !important;
  background: #f1eee6 !important;
}

#report #merchBrief .merch-brief-facts strong,
body[data-theme] #report #merchBrief .merch-brief-facts strong {
  overflow: visible !important;
  color: #12110f !important;
  font-size: clamp(0.88rem, 2vw, 1.2rem) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

#report #merchBrief .merch-brief-facts span,
body[data-theme] #report #merchBrief .merch-brief-facts span {
  color: rgba(18, 17, 15, 0.56) !important;
  font-size: 0.57rem !important;
  font-weight: 830 !important;
  letter-spacing: 0.07em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

#report #merchBrief .merch-brief-actions,
body[data-theme] #report #merchBrief .merch-brief-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) !important;
  gap: 8px !important;
}

#report #merchBrief .merch-brief-actions button,
body[data-theme] #report #merchBrief .merch-brief-actions button,
#report #merchBrief .merch-brief-empty button {
  min-height: 50px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0.68rem !important;
  font-weight: 920 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

#report #merchBrief .merch-brief-actions .primary-button,
body[data-theme] #report #merchBrief .merch-brief-actions .primary-button,
#report #merchBrief .merch-brief-empty .primary-button {
  border: 1px solid #12110f !important;
  background: #12110f !important;
  color: #fffdf7 !important;
}

#report #merchBrief .merch-brief-actions .ghost-button,
body[data-theme] #report #merchBrief .merch-brief-actions .ghost-button {
  border: 1px solid #12110f !important;
  background: transparent !important;
  color: #12110f !important;
}

#report #merchBrief .merch-brief-product,
body[data-theme] #report #merchBrief .merch-brief-product {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
  background: #d6d1c8 !important;
}

#report #merchBrief .merch-brief-product img,
body[data-theme] #report #merchBrief .merch-brief-product img,
html.native-layout-guard body[data-theme] #report #merchBrief .merch-brief-product img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  filter: saturate(0.82) contrast(1.04) !important;
}

#report #merchBrief .merch-brief-product figcaption,
body[data-theme] #report #merchBrief .merch-brief-product figcaption {
  position: absolute !important;
  inset: auto 10px 10px 10px !important;
  display: grid !important;
  gap: 5px !important;
  padding: 12px !important;
  background: rgba(18, 17, 15, 0.9) !important;
  color: #fffdf7 !important;
  backdrop-filter: blur(12px) !important;
}

#report #merchBrief .merch-brief-product figcaption small,
body[data-theme] #report #merchBrief .merch-brief-product figcaption small {
  color: #efcdcd !important;
  font-size: 0.54rem !important;
  font-weight: 920 !important;
  letter-spacing: 0.12em !important;
}

#report #merchBrief .merch-brief-product figcaption strong,
body[data-theme] #report #merchBrief .merch-brief-product figcaption strong {
  color: #fffdf7 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.45rem, 3vw, 2.2rem) !important;
  line-height: 1 !important;
}

#report #merchBrief .merch-brief-product figcaption span,
body[data-theme] #report #merchBrief .merch-brief-product figcaption span {
  color: rgba(255, 253, 247, 0.72) !important;
  font-size: 0.68rem !important;
  line-height: 1.25 !important;
}

#report #merchBrief .merch-brief-empty,
body[data-theme] #report #merchBrief .merch-brief-empty {
  display: grid !important;
  gap: 16px !important;
  justify-items: start !important;
  padding: clamp(24px, 5vw, 54px) !important;
}

#report #merchBrief .merch-brief-empty p,
body[data-theme] #report #merchBrief .merch-brief-empty p {
  max-width: 48ch !important;
  margin: 0 !important;
  color: rgba(18, 17, 15, 0.68) !important;
}

@media (max-width: 900px) {
  #report #merchBrief .merch-brief-edition,
  body[data-theme] #report #merchBrief .merch-brief-edition {
    min-height: 42px !important;
    padding: 10px 14px !important;
    font-size: 0.55rem !important;
  }

  #report #merchBrief .merch-brief-layout,
  body[data-theme] #report #merchBrief .merch-brief-layout,
  html.native-layout-guard body[data-theme] #report #merchBrief .merch-brief-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.38fr) minmax(112px, 0.62fr) !important;
    min-width: 0 !important;
  }

  #report #merchBrief .merch-brief-copy,
  body[data-theme] #report #merchBrief .merch-brief-copy {
    gap: 12px !important;
    min-width: 0 !important;
    padding: 16px 13px !important;
  }

  #report #merchBrief h3,
  body[data-theme] #report #merchBrief h3 {
    display: block !important;
    max-width: 7.2em !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: clamp(2.4rem, 12.8vw, 4rem) !important;
    line-height: 0.85 !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  #report #merchBrief .merch-brief-narrative,
  body[data-theme] #report #merchBrief .merch-brief-narrative {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 11px 10px !important;
    font-size: 0.82rem !important;
    line-height: 1.24 !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  #report #merchBrief .merch-brief-facts,
  body[data-theme] #report #merchBrief .merch-brief-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #report #merchBrief .merch-brief-facts > div,
  body[data-theme] #report #merchBrief .merch-brief-facts > div {
    min-height: 0 !important;
    padding: 9px !important;
  }

  #report #merchBrief .merch-brief-facts > div:last-child,
  body[data-theme] #report #merchBrief .merch-brief-facts > div:last-child {
    grid-column: 1 / -1 !important;
  }

  #report #merchBrief .merch-brief-actions,
  body[data-theme] #report #merchBrief .merch-brief-actions {
    grid-template-columns: 1fr !important;
  }

  #report #merchBrief .merch-brief-actions button,
  body[data-theme] #report #merchBrief .merch-brief-actions button {
    width: 100% !important;
    min-height: 48px !important;
  }

  #report #merchBrief .merch-brief-product,
  body[data-theme] #report #merchBrief .merch-brief-product {
    min-height: 100% !important;
  }

  #report #merchBrief .merch-brief-product figcaption,
  body[data-theme] #report #merchBrief .merch-brief-product figcaption {
    inset: auto 6px 6px 6px !important;
    padding: 8px !important;
  }

  #report #merchBrief .merch-brief-product figcaption span,
  body[data-theme] #report #merchBrief .merch-brief-product figcaption span {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.58rem !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
  }
}

/* v777: Style Circle opens with one live challenge instead of a wall of tools. */
#community #circleDispatch,
body[data-theme] #community #circleDispatch,
html.native-layout-guard body[data-theme] #community #circleDispatch {
  position: relative !important;
  display: grid !important;
  grid-column: 1 / -1 !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 1px solid #11100f !important;
  border-radius: 3px !important;
  background: #f2efe7 !important;
  color: #11100f !important;
  box-shadow: 0 22px 76px rgba(0, 0, 0, 0.24) !important;
}

#community #circleDispatch .circle-dispatch-edition,
body[data-theme] #community #circleDispatch .circle-dispatch-edition {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 46px !important;
  padding: 11px 16px !important;
  background: #11100f !important;
  color: #fffdf7 !important;
  font-size: 0.62rem !important;
  font-weight: 920 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.1 !important;
}

#community #circleDispatch .circle-dispatch-edition strong,
body[data-theme] #community #circleDispatch .circle-dispatch-edition strong {
  color: #4f7dff !important;
  font: inherit !important;
}

#community #circleDispatch .circle-dispatch-layout,
body[data-theme] #community #circleDispatch .circle-dispatch-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(270px, 0.75fr) !important;
  min-width: 0 !important;
}

#community #circleDispatch .circle-dispatch-copy,
body[data-theme] #community #circleDispatch .circle-dispatch-copy {
  display: grid !important;
  align-content: start !important;
  gap: 15px !important;
  min-width: 0 !important;
  padding: clamp(24px, 4vw, 48px) !important;
}

#community #circleDispatch .circle-dispatch-kicker,
body[data-theme] #community #circleDispatch .circle-dispatch-kicker {
  margin: 0 !important;
  color: rgba(17, 16, 15, 0.58) !important;
  font-size: 0.62rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.15em !important;
  line-height: 1 !important;
}

#community #circleDispatch h3,
body[data-theme] #community #circleDispatch h3 {
  display: block !important;
  max-width: 9em !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  color: #11100f !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(3rem, 6.2vw, 6.2rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.065em !important;
  line-height: 0.86 !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

#community #circleDispatch .circle-dispatch-narrative,
body[data-theme] #community #circleDispatch .circle-dispatch-narrative {
  display: block !important;
  max-width: 62ch !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  border-left: 4px solid #11100f !important;
  background: #c9d5ff !important;
  color: #11100f !important;
  padding: 14px 16px !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(0.95rem, 1.8vw, 1.16rem) !important;
  line-height: 1.3 !important;
}

#community #circleDispatch .circle-dispatch-facts,
body[data-theme] #community #circleDispatch .circle-dispatch-facts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  border: 1px solid rgba(17, 16, 15, 0.18) !important;
  background: rgba(17, 16, 15, 0.18) !important;
}

#community #circleDispatch .circle-dispatch-facts > div,
body[data-theme] #community #circleDispatch .circle-dispatch-facts > div {
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  min-width: 0 !important;
  padding: 12px !important;
  background: #f2efe7 !important;
}

#community #circleDispatch .circle-dispatch-facts strong,
body[data-theme] #community #circleDispatch .circle-dispatch-facts strong {
  display: block !important;
  overflow: visible !important;
  color: #11100f !important;
  font-size: clamp(0.8rem, 1.8vw, 1.12rem) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

#community #circleDispatch .circle-dispatch-facts span,
body[data-theme] #community #circleDispatch .circle-dispatch-facts span {
  color: rgba(17, 16, 15, 0.56) !important;
  font-size: 0.56rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

#community #circleDispatch .circle-dispatch-reward,
body[data-theme] #community #circleDispatch .circle-dispatch-reward {
  margin: -3px 0 0 !important;
  color: rgba(17, 16, 15, 0.64) !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.3 !important;
}

#community #circleDispatch .circle-dispatch-actions,
body[data-theme] #community #circleDispatch .circle-dispatch-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr) !important;
  gap: 8px !important;
}

#community #circleDispatch .circle-dispatch-actions button,
body[data-theme] #community #circleDispatch .circle-dispatch-actions button {
  min-height: 50px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0.68rem !important;
  font-weight: 920 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}

#community #circleDispatch .circle-dispatch-actions .primary-button,
body[data-theme] #community #circleDispatch .circle-dispatch-actions .primary-button {
  border: 1px solid #11100f !important;
  background: #11100f !important;
  color: #fffdf7 !important;
}

#community #circleDispatch .circle-dispatch-actions .ghost-button,
body[data-theme] #community #circleDispatch .circle-dispatch-actions .ghost-button {
  border: 1px solid #11100f !important;
  background: transparent !important;
  color: #11100f !important;
}

#community #circleDispatch .circle-dispatch-look,
body[data-theme] #community #circleDispatch .circle-dispatch-look {
  display: grid !important;
  grid-template-rows: 1.35fr 0.82fr 0.82fr !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 100% !important;
  padding: 3px !important;
  background: #11100f !important;
}

#community #circleDispatch .circle-dispatch-piece,
body[data-theme] #community #circleDispatch .circle-dispatch-piece {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  background: #d6d2c9 !important;
}

#community #circleDispatch .circle-dispatch-piece img,
body[data-theme] #community #circleDispatch .circle-dispatch-piece img,
html.native-layout-guard body[data-theme] #community #circleDispatch .circle-dispatch-piece img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  filter: saturate(0.84) contrast(1.04) !important;
}

#community #circleDispatch .circle-dispatch-piece > span,
body[data-theme] #community #circleDispatch .circle-dispatch-piece > span {
  position: absolute !important;
  inset: 8px 8px auto auto !important;
  z-index: 2 !important;
  padding: 5px 6px !important;
  background: #f2efe7 !important;
  color: #11100f !important;
  font-size: 0.55rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

#community #circleDispatch .circle-dispatch-piece figcaption,
body[data-theme] #community #circleDispatch .circle-dispatch-piece figcaption {
  position: absolute !important;
  inset: auto 7px 7px 7px !important;
  display: grid !important;
  gap: 4px !important;
  padding: 8px !important;
  background: rgba(17, 16, 15, 0.88) !important;
  color: #fffdf7 !important;
  backdrop-filter: blur(10px) !important;
}

#community #circleDispatch .circle-dispatch-piece figcaption small,
body[data-theme] #community #circleDispatch .circle-dispatch-piece figcaption small {
  color: #c9d5ff !important;
  font-size: 0.48rem !important;
  font-weight: 920 !important;
  letter-spacing: 0.11em !important;
}

#community #circleDispatch .circle-dispatch-piece figcaption strong,
body[data-theme] #community #circleDispatch .circle-dispatch-piece figcaption strong {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  color: #fffdf7 !important;
  font-size: 0.65rem !important;
  font-weight: 780 !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

@media (max-width: 900px) {
  #community #circleDispatch .circle-dispatch-edition,
  body[data-theme] #community #circleDispatch .circle-dispatch-edition {
    min-height: 42px !important;
    padding: 10px 14px !important;
    font-size: 0.55rem !important;
  }

  #community #circleDispatch .circle-dispatch-layout,
  body[data-theme] #community #circleDispatch .circle-dispatch-layout,
  html.native-layout-guard body[data-theme] #community #circleDispatch .circle-dispatch-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.38fr) minmax(112px, 0.62fr) !important;
    min-width: 0 !important;
  }

  #community #circleDispatch .circle-dispatch-copy,
  body[data-theme] #community #circleDispatch .circle-dispatch-copy {
    gap: 11px !important;
    min-width: 0 !important;
    padding: 16px 13px !important;
  }

  #community #circleDispatch h3,
  body[data-theme] #community #circleDispatch h3 {
    max-width: 7.1em !important;
    font-size: clamp(2.25rem, 11.8vw, 3.8rem) !important;
    line-height: 0.86 !important;
  }

  #community #circleDispatch .circle-dispatch-narrative,
  body[data-theme] #community #circleDispatch .circle-dispatch-narrative {
    padding: 11px 10px !important;
    font-size: 0.8rem !important;
    line-height: 1.23 !important;
  }

  #community #circleDispatch .circle-dispatch-facts,
  body[data-theme] #community #circleDispatch .circle-dispatch-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #community #circleDispatch .circle-dispatch-facts > div,
  body[data-theme] #community #circleDispatch .circle-dispatch-facts > div {
    min-height: 0 !important;
    padding: 9px !important;
  }

  #community #circleDispatch .circle-dispatch-facts > div:last-child,
  body[data-theme] #community #circleDispatch .circle-dispatch-facts > div:last-child {
    grid-column: 1 / -1 !important;
  }

  #community #circleDispatch .circle-dispatch-actions,
  body[data-theme] #community #circleDispatch .circle-dispatch-actions {
    grid-template-columns: 1fr !important;
  }

  #community #circleDispatch .circle-dispatch-actions button,
  body[data-theme] #community #circleDispatch .circle-dispatch-actions button {
    width: 100% !important;
    min-height: 48px !important;
  }

  #community #circleDispatch .circle-dispatch-look,
  body[data-theme] #community #circleDispatch .circle-dispatch-look {
    min-height: 100% !important;
  }

  #community #circleDispatch .circle-dispatch-piece figcaption,
  body[data-theme] #community #circleDispatch .circle-dispatch-piece figcaption {
    inset: auto 5px 5px 5px !important;
    padding: 7px !important;
  }
}
/* v778: The Edit turns discovery into one editorial product decision. */
#discover,
body[data-theme] #discover,
html.native-layout-guard body[data-theme] #discover {
  overflow: hidden !important;
  border: 1px solid rgba(12, 12, 12, 0.92) !important;
  border-radius: 0 !important;
  background: #f3efe6 !important;
  color: #11100e !important;
  box-shadow: none !important;
}

#discover > .discover-edit-head,
body[data-theme] #discover > .discover-edit-head,
html.native-layout-guard body[data-theme] #discover > .discover-edit-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: clamp(22px, 4vw, 48px) !important;
  border: 0 !important;
  border-bottom: 1px solid #11100e !important;
  border-radius: 0 !important;
  background: #f3efe6 !important;
  color: #11100e !important;
  box-shadow: none !important;
}

#discover > .discover-edit-head > div,
body[data-theme] #discover > .discover-edit-head > div {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#discover #discoverEdition,
body[data-theme] #discover #discoverEdition {
  color: #1746ff !important;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
}

#discover #discoverHeadline,
body[data-theme] #discover #discoverHeadline,
html.native-layout-guard body[data-theme] #discover #discoverHeadline {
  max-width: 9.5em !important;
  margin: 0 !important;
  color: #11100e !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(3.1rem, 7.2vw, 7.8rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.075em !important;
  line-height: 0.84 !important;
  text-wrap: balance !important;
}

#discover .discover-edit-deck,
body[data-theme] #discover .discover-edit-deck {
  max-width: 58ch !important;
  margin: 4px 0 0 !important;
  color: rgba(17, 16, 14, 0.7) !important;
  font-size: clamp(0.82rem, 1.3vw, 1rem) !important;
  font-weight: 650 !important;
  line-height: 1.42 !important;
}

#discover .discover-next-edit,
body[data-theme] #discover .discover-next-edit,
html.native-layout-guard body[data-theme] #discover .discover-next-edit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 168px !important;
  min-height: 48px !important;
  border: 1px solid #11100e !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #11100e !important;
  box-shadow: none !important;
}

#discover .discover-next-edit::after,
body[data-theme] #discover .discover-next-edit::after {
  margin-left: 14px !important;
  content: "→" !important;
  font-size: 1.1rem !important;
}

#discover .discover-layout,
body[data-theme] #discover .discover-layout,
html.native-layout-guard body[data-theme] #discover .discover-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.45fr) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#discover .discover-card-panel,
body[data-theme] #discover .discover-card-panel,
#discover .discover-side-panel,
body[data-theme] #discover .discover-side-panel {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#discover .discover-card,
body[data-theme] #discover .discover-card,
html.native-layout-guard body[data-theme] #discover .discover-card {
  display: grid !important;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr) !important;
  min-height: 600px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f8f5ed !important;
  color: #11100e !important;
  box-shadow: none !important;
}

#discover .discover-media,
body[data-theme] #discover .discover-media,
html.native-layout-guard body[data-theme] #discover .discover-media {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  height: auto !important;
  min-height: 600px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid #11100e !important;
  border-radius: 0 !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 44%),
    #b7d8ff !important;
}

#discover .discover-media::after,
body[data-theme] #discover .discover-media::after {
  position: absolute !important;
  inset: auto 22px 18px !important;
  z-index: 0 !important;
  color: rgba(17, 16, 14, 0.42) !important;
  content: "STYLEBRAIN / CURATED OBJECT" !important;
  font-size: 0.56rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-align: left !important;
}

#discover .discover-media img,
body[data-theme] #discover .discover-media img,
html.native-layout-guard body[data-theme] #discover .discover-media img {
  position: relative !important;
  z-index: 1 !important;
  width: 88% !important;
  height: 88% !important;
  min-height: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 34px 42px rgba(23, 32, 54, 0.2)) !important;
}

#discover #discoverScore,
body[data-theme] #discover #discoverScore,
html.native-layout-guard body[data-theme] #discover #discoverScore {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 74px !important;
  height: 74px !important;
  border: 1px solid #11100e !important;
  border-radius: 50% !important;
  background: #f3efe6 !important;
  color: #11100e !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.45rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

#discover #discoverScore::after,
body[data-theme] #discover #discoverScore::after {
  display: none !important;
}

#discover .discover-body,
body[data-theme] #discover .discover-body,
html.native-layout-guard body[data-theme] #discover .discover-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  min-width: 0 !important;
  padding: clamp(24px, 4vw, 48px) !important;
  background: #f8f5ed !important;
  color: #11100e !important;
}

#discover .discover-edit-story,
body[data-theme] #discover .discover-edit-story {
  order: 1 !important;
  display: grid !important;
  gap: 11px !important;
  min-width: 0 !important;
}

#discover #discoverKicker,
body[data-theme] #discover #discoverKicker {
  color: #1746ff !important;
  font-size: 0.64rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
}

#discover .discover-body h3,
body[data-theme] #discover .discover-body h3,
html.native-layout-guard body[data-theme] #discover .discover-body h3 {
  display: block !important;
  max-width: 12ch !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #11100e !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(2.7rem, 5.4vw, 6.1rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.065em !important;
  line-height: 0.87 !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

#discover .discover-edit-thesis,
body[data-theme] #discover .discover-edit-thesis {
  max-width: 55ch !important;
  margin: 0 !important;
  color: rgba(17, 16, 14, 0.72) !important;
  font-size: 0.9rem !important;
  font-weight: 650 !important;
  line-height: 1.42 !important;
}

#discover .discover-meta,
body[data-theme] #discover .discover-meta,
html.native-layout-guard body[data-theme] #discover .discover-meta {
  order: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(17, 16, 14, 0.24) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#discover .discover-meta > div,
body[data-theme] #discover .discover-meta > div {
  min-width: 0 !important;
  padding: 11px 10px !important;
  border: 0 !important;
  border-right: 1px solid rgba(17, 16, 14, 0.2) !important;
  background: transparent !important;
}

#discover .discover-meta > div:last-child,
body[data-theme] #discover .discover-meta > div:last-child {
  border-right: 0 !important;
}

#discover .discover-meta strong,
body[data-theme] #discover .discover-meta strong {
  color: #11100e !important;
  font-size: 0.78rem !important;
}

#discover .discover-meta span,
body[data-theme] #discover .discover-meta span {
  color: rgba(17, 16, 14, 0.52) !important;
  font-size: 0.57rem !important;
  letter-spacing: 0.05em !important;
}

#discover .discover-edit-proof,
body[data-theme] #discover .discover-edit-proof {
  order: 3 !important;
  display: grid !important;
  gap: 9px !important;
  padding: 14px !important;
  background: #1746ff !important;
  color: #fff !important;
}

#discover #discoverProofLabel,
body[data-theme] #discover #discoverProofLabel {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
}

#discover .discover-reasons,
body[data-theme] #discover .discover-reasons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#discover .discover-reasons p,
body[data-theme] #discover .discover-reasons p,
html.native-layout-guard body[data-theme] #discover .discover-reasons p {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

#discover .discover-reasons p::before,
body[data-theme] #discover .discover-reasons p::before {
  margin-right: 6px !important;
  content: "↳" !important;
  color: #b9fff5 !important;
}

#discover .discover-tags,
body[data-theme] #discover .discover-tags,
html.native-layout-guard body[data-theme] #discover .discover-tags {
  order: 4 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  overflow: visible !important;
}

#discover .discover-tags span,
body[data-theme] #discover .discover-tags span,
html.native-layout-guard body[data-theme] #discover .discover-tags span {
  width: auto !important;
  min-height: 28px !important;
  max-width: 100% !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(17, 16, 14, 0.28) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #11100e !important;
  font-size: 0.62rem !important;
  line-height: 1.1 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

#discover .discover-look-actions,
body[data-theme] #discover .discover-look-actions,
html.native-layout-guard body[data-theme] #discover .discover-look-actions {
  order: 5 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin-top: auto !important;
}

#discover .discover-build-look,
body[data-theme] #discover .discover-build-look,
html.native-layout-guard body[data-theme] #discover .discover-build-look {
  min-height: 52px !important;
  border: 1px solid #11100e !important;
  border-radius: 0 !important;
  background: #11100e !important;
  color: #fff !important;
  box-shadow: none !important;
}

#discover .discover-build-look::after,
body[data-theme] #discover .discover-build-look::after {
  content: "↗" !important;
}

#discover .discover-decision-actions,
body[data-theme] #discover .discover-decision-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#discover .discover-decision-actions button,
body[data-theme] #discover .discover-decision-actions button,
#discover .discover-product-link,
body[data-theme] #discover .discover-product-link,
html.native-layout-guard body[data-theme] #discover .discover-product-link {
  min-height: 44px !important;
  border: 1px solid rgba(17, 16, 14, 0.34) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #11100e !important;
  box-shadow: none !important;
}

#discover .discover-product-link,
body[data-theme] #discover .discover-product-link {
  font-size: 0.72rem !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

#discover .discover-side-panel,
body[data-theme] #discover .discover-side-panel,
html.native-layout-guard body[data-theme] #discover .discover-side-panel {
  border-left: 1px solid #11100e !important;
  background: #11100e !important;
  color: #f8f5ed !important;
}

#discover .discover-side-panel .panel-head,
body[data-theme] #discover .discover-side-panel .panel-head {
  background: transparent !important;
  color: #f8f5ed !important;
}

#discover .discover-side-panel h3,
body[data-theme] #discover .discover-side-panel h3 {
  color: #f8f5ed !important;
}

#discover .discover-side-panel .eyebrow,
body[data-theme] #discover .discover-side-panel .eyebrow {
  color: #7ca3ff !important;
}

@media (max-width: 900px) {
  #discover > .discover-edit-head,
  body[data-theme] #discover > .discover-edit-head,
  html.native-layout-guard body[data-theme] #discover > .discover-edit-head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }

  #discover #discoverHeadline,
  body[data-theme] #discover #discoverHeadline,
  html.native-layout-guard body[data-theme] #discover #discoverHeadline {
    max-width: 8em !important;
    font-size: clamp(3rem, 15.5vw, 4.8rem) !important;
    line-height: 0.84 !important;
  }

  #discover .discover-next-edit,
  body[data-theme] #discover .discover-next-edit {
    width: 100% !important;
    min-height: 46px !important;
  }

  #discover .discover-layout,
  body[data-theme] #discover .discover-layout,
  html.native-layout-guard body[data-theme] #discover .discover-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #discover .discover-card,
  body[data-theme] #discover .discover-card,
  html.native-layout-guard body[data-theme] #discover .discover-card {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
  }

  #discover .discover-media,
  body[data-theme] #discover .discover-media,
  html.native-layout-guard body[data-theme] #discover .discover-media {
    height: clamp(280px, 82vw, 390px) !important;
    min-height: 280px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #11100e !important;
  }

  #discover #discoverScore,
  body[data-theme] #discover #discoverScore {
    top: 14px !important;
    right: 14px !important;
    width: 64px !important;
    height: 64px !important;
    font-size: 1.3rem !important;
  }

  #discover .discover-body,
  body[data-theme] #discover .discover-body,
  html.native-layout-guard body[data-theme] #discover .discover-body {
    gap: 15px !important;
    padding: 20px 16px !important;
  }

  #discover .discover-body h3,
  body[data-theme] #discover .discover-body h3,
  html.native-layout-guard body[data-theme] #discover .discover-body h3 {
    max-width: 9ch !important;
    font-size: clamp(2.65rem, 13vw, 4.25rem) !important;
  }

  #discover .discover-meta,
  body[data-theme] #discover .discover-meta,
  html.native-layout-guard body[data-theme] #discover .discover-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #discover .discover-meta > div:nth-child(2),
  body[data-theme] #discover .discover-meta > div:nth-child(2) {
    border-right: 0 !important;
  }

  #discover .discover-meta > div:nth-child(-n + 2),
  body[data-theme] #discover .discover-meta > div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(17, 16, 14, 0.2) !important;
  }

  #discover .discover-reasons,
  body[data-theme] #discover .discover-reasons {
    grid-template-columns: 1fr !important;
  }

  #discover .discover-side-panel,
  body[data-theme] #discover .discover-side-panel,
  html.native-layout-guard body[data-theme] #discover .discover-side-panel {
    border-top: 1px solid #11100e !important;
    border-left: 0 !important;
  }
}

/* v779: Day Brief turns the planner into one weather-aware editorial decision. */
#planner,
body[data-theme] #planner,
html.native-layout-guard body[data-theme] #planner {
  overflow: hidden !important;
  border: 1px solid #0f0f0e !important;
  border-radius: 0 !important;
  background: #11110f !important;
  color: #f6f0e5 !important;
  box-shadow: none !important;
}

#planner > .planner-brief-head,
body[data-theme] #planner > .planner-brief-head,
html.native-layout-guard body[data-theme] #planner > .planner-brief-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: clamp(24px, 4vw, 52px) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(246, 240, 229, 0.24) !important;
  border-radius: 0 !important;
  background: #11110f !important;
  color: #f6f0e5 !important;
  box-shadow: none !important;
}

#planner > .planner-brief-head > div,
body[data-theme] #planner > .planner-brief-head > div {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#planner #plannerBriefEdition,
body[data-theme] #planner #plannerBriefEdition {
  color: #ff5a36 !important;
  font-size: 0.7rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
}

#planner #plannerBriefHeadline,
body[data-theme] #planner #plannerBriefHeadline,
html.native-layout-guard body[data-theme] #planner #plannerBriefHeadline {
  max-width: 9em !important;
  margin: 0 !important;
  color: #f6f0e5 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(3.2rem, 7.3vw, 7.9rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.075em !important;
  line-height: 0.84 !important;
  text-wrap: balance !important;
}

#planner .planner-brief-deck,
body[data-theme] #planner .planner-brief-deck {
  max-width: 62ch !important;
  margin: 4px 0 0 !important;
  color: rgba(246, 240, 229, 0.68) !important;
  font-size: clamp(0.82rem, 1.3vw, 1rem) !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

#planner .planner-refresh-brief,
body[data-theme] #planner .planner-refresh-brief,
html.native-layout-guard body[data-theme] #planner .planner-refresh-brief {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 170px !important;
  min-height: 48px !important;
  border: 1px solid rgba(246, 240, 229, 0.72) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #f6f0e5 !important;
  box-shadow: none !important;
}

#planner .planner-refresh-brief::after,
body[data-theme] #planner .planner-refresh-brief::after {
  margin-left: 14px !important;
  content: "↻" !important;
  font-size: 1rem !important;
}

#planner .planner-layout,
body[data-theme] #planner .planner-layout,
html.native-layout-guard body[data-theme] #planner .planner-layout {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#planner .planner-result-panel,
body[data-theme] #planner .planner-result-panel,
html.native-layout-guard #planner .planner-result-panel,
html.native-layout-guard body[data-theme] #planner .planner-result-panel {
  order: 1 !important;
  grid-column: 1 / -1 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f3ede2 !important;
  box-shadow: none !important;
}

#planner .planner-panel,
body[data-theme] #planner .planner-panel {
  order: 2 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

#planner .planner-history-panel,
body[data-theme] #planner .planner-history-panel {
  order: 3 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

#planner .planner-brief-edition,
body[data-theme] #planner .planner-brief-edition {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 46px !important;
  padding: 12px clamp(18px, 3vw, 36px) !important;
  border-bottom: 1px solid #11110f !important;
  background: #ff5a36 !important;
  color: #11110f !important;
  font-size: 0.63rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.16em !important;
}

#planner .planner-ticket,
body[data-theme] #planner .planner-ticket,
html.native-layout-guard body[data-theme] #planner .planner-ticket {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f3ede2 !important;
  color: #11110f !important;
  box-shadow: none !important;
}

#planner .planner-ticket-head,
body[data-theme] #planner .planner-ticket-head,
html.native-layout-guard body[data-theme] #planner .planner-ticket-head {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 20px !important;
  min-width: 0 !important;
  padding: clamp(24px, 4vw, 48px) !important;
  border-right: 1px solid #11110f !important;
  background: #f3ede2 !important;
  color: #11110f !important;
}

#planner .planner-ticket-head > div,
body[data-theme] #planner .planner-ticket-head > div {
  display: grid !important;
  gap: 13px !important;
  min-width: 0 !important;
}

#planner #plannerBriefKicker,
body[data-theme] #planner #plannerBriefKicker {
  color: #e83f21 !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
}

#planner .planner-ticket-head h3,
body[data-theme] #planner .planner-ticket-head h3,
html.native-layout-guard body[data-theme] #planner .planner-ticket-head h3 {
  display: block !important;
  max-width: 8ch !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #11110f !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(3rem, 6vw, 6.8rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.07em !important;
  line-height: 0.86 !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

#planner .planner-brief-narrative,
body[data-theme] #planner .planner-brief-narrative {
  margin: 0 !important;
  padding: 14px !important;
  border-left: 4px solid #ff5a36 !important;
  background: rgba(17, 17, 15, 0.055) !important;
  color: rgba(17, 17, 15, 0.72) !important;
  font-size: 0.82rem !important;
  font-weight: 650 !important;
  line-height: 1.43 !important;
}

#planner #plannerScore,
body[data-theme] #planner #plannerScore,
html.native-layout-guard body[data-theme] #planner #plannerScore {
  display: grid !important;
  place-items: center !important;
  width: 86px !important;
  height: 86px !important;
  margin: 0 !important;
  border: 1px solid #11110f !important;
  border-radius: 50% !important;
  background: #ff5a36 !important;
  color: #11110f !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.8rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

#planner #plannerScore::after,
body[data-theme] #planner #plannerScore::after {
  display: none !important;
}

#planner .planner-metrics,
body[data-theme] #planner .planner-metrics,
html.native-layout-guard body[data-theme] #planner .planner-metrics {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  border-top: 1px solid #11110f !important;
  border-right: 1px solid #11110f !important;
  border-bottom: 1px solid #11110f !important;
  border-radius: 0 !important;
  background: #11110f !important;
  color: #f3ede2 !important;
}

#planner .planner-metrics > div,
body[data-theme] #planner .planner-metrics > div {
  min-width: 0 !important;
  padding: 13px !important;
  border: 0 !important;
  border-right: 1px solid rgba(243, 237, 226, 0.2) !important;
  border-bottom: 1px solid rgba(243, 237, 226, 0.2) !important;
  background: transparent !important;
}

#planner .planner-metrics > div:nth-child(2n),
body[data-theme] #planner .planner-metrics > div:nth-child(2n) {
  border-right: 0 !important;
}

#planner .planner-metrics > div:nth-last-child(-n + 2),
body[data-theme] #planner .planner-metrics > div:nth-last-child(-n + 2) {
  border-bottom: 0 !important;
}

#planner .planner-metrics strong,
body[data-theme] #planner .planner-metrics strong {
  color: #f3ede2 !important;
  font-size: 0.86rem !important;
}

#planner .planner-metrics span,
body[data-theme] #planner .planner-metrics span {
  color: rgba(243, 237, 226, 0.58) !important;
  font-size: 0.57rem !important;
}

#planner .planner-outfit,
body[data-theme] #planner .planner-outfit,
html.native-layout-guard body[data-theme] #planner .planner-outfit {
  grid-column: 2 !important;
  grid-row: 1 / span 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(150px, 0.75fr) !important;
  grid-auto-rows: minmax(150px, 1fr) !important;
  gap: 0 !important;
  min-width: 0 !important;
  min-height: 620px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: #d9dfc2 !important;
}

#planner .planner-slot,
body[data-theme] #planner .planner-slot,
html.native-layout-guard #planner .planner-slot,
html.native-layout-guard body[data-theme] #planner .planner-slot {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid #11110f !important;
  border-bottom: 1px solid #11110f !important;
  border-radius: 0 !important;
  background: #d9dfc2 !important;
  color: #f6f0e5 !important;
  box-shadow: none !important;
}

#planner .planner-slot:first-child,
body[data-theme] #planner .planner-slot:first-child {
  grid-row: 1 / span 3 !important;
}

#planner .planner-slot img,
body[data-theme] #planner .planner-slot img,
html.native-layout-guard #planner .planner-slot img,
html.native-layout-guard body[data-theme] #planner .planner-slot img {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: contain !important;
  padding: 10px !important;
  filter: none !important;
}

#planner .planner-slot-number,
body[data-theme] #planner .planner-slot-number {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid #11110f !important;
  border-radius: 50% !important;
  background: #f3ede2 !important;
  color: #11110f !important;
  font-size: 0.58rem !important;
  font-weight: 900 !important;
}

#planner .planner-slot-copy,
body[data-theme] #planner .planner-slot-copy,
html.native-layout-guard #planner .planner-slot-copy,
html.native-layout-guard body[data-theme] #planner .planner-slot-copy {
  position: absolute !important;
  right: 7px !important;
  bottom: 7px !important;
  left: 7px !important;
  z-index: 2 !important;
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
  padding: 9px !important;
  background: rgba(17, 17, 15, 0.9) !important;
  color: #f6f0e5 !important;
}

/* Etykieta roli miała 8 px przy rozstrzeleniu 0,11em — na zdjęciu w kafelku
   nie dawała się przeczytać. Podniesiona do 11,5 px; rozstrzelenie ścięte do
   0,04em, żeby napis zajął w kafelku zbliżoną szerokość. */
#planner .planner-slot-copy small,
body[data-theme] #planner .planner-slot-copy small {
  color: #ff8a70 !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
}

#planner .planner-slot-copy strong,
body[data-theme] #planner .planner-slot-copy strong,
html.native-layout-guard #planner .planner-slot-copy strong,
html.native-layout-guard body[data-theme] #planner .planner-slot-copy strong {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  color: #f6f0e5 !important;
  /* Nazwa rzeczy musi zostać większa od podniesionej etykiety roli — inaczej
     podpis czyta się jako dwie równorzędne linie. */
  font-size: 0.86rem !important;
  line-height: 1.1 !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

/* 8,3 px na szerszych ekranach (na wąskich ta linia jest ukryta niżej w pliku). */
#planner .planner-slot-copy > span,
body[data-theme] #planner .planner-slot-copy > span {
  color: rgba(246, 240, 229, 0.66) !important;
  font-size: 0.72rem !important;
  line-height: 1.12 !important;
}

#planner .planner-slot-price,
body[data-theme] #planner .planner-slot-price {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 2 !important;
  width: auto !important;
  max-width: calc(100% - 58px) !important;
  padding: 6px 8px !important;
  border: 1px solid #11110f !important;
  border-radius: 999px !important;
  background: #f3ede2 !important;
  color: #11110f !important;
  font-size: 0.56rem !important;
  font-weight: 900 !important;
}

#planner .planner-reasons,
body[data-theme] #planner .planner-reasons,
html.native-layout-guard body[data-theme] #planner .planner-reasons {
  grid-column: 1 !important;
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 16px !important;
  border-right: 1px solid #11110f !important;
  background: #f3ede2 !important;
}

#planner .planner-reasons p,
body[data-theme] #planner .planner-reasons p,
html.native-layout-guard body[data-theme] #planner .planner-reasons p {
  display: block !important;
  margin: 0 !important;
  padding: 7px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(17, 17, 15, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(17, 17, 15, 0.72) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
}

#planner .planner-reasons p::before,
body[data-theme] #planner .planner-reasons p::before {
  margin-right: 7px !important;
  content: "↳" !important;
  color: #e83f21 !important;
}

#planner .planner-brief-actions,
body[data-theme] #planner .planner-brief-actions {
  grid-column: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 16px !important;
  border-top: 1px solid #11110f !important;
  border-right: 1px solid #11110f !important;
  background: #f3ede2 !important;
}

#planner .planner-brief-actions button,
body[data-theme] #planner .planner-brief-actions button {
  min-height: 46px !important;
  border: 1px solid #11110f !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #11110f !important;
  box-shadow: none !important;
}

#planner .planner-brief-actions #usePlanButton,
body[data-theme] #planner .planner-brief-actions #usePlanButton {
  grid-column: 1 / -1 !important;
  min-height: 52px !important;
  background: #ff5a36 !important;
  color: #11110f !important;
}

#planner .planner-brief-actions #usePlanButton::after,
body[data-theme] #planner .planner-brief-actions #usePlanButton::after {
  margin-left: 12px !important;
  content: "↗" !important;
}

#planner #plannerStatus,
body[data-theme] #planner #plannerStatus {
  grid-column: 1 !important;
  margin: 0 !important;
  padding: 0 16px 16px !important;
  border-right: 1px solid #11110f !important;
  color: #b52d17 !important;
}

@media (max-width: 900px) {
  #planner > .planner-brief-head,
  body[data-theme] #planner > .planner-brief-head,
  html.native-layout-guard body[data-theme] #planner > .planner-brief-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }

  #planner #plannerBriefHeadline,
  body[data-theme] #planner #plannerBriefHeadline,
  html.native-layout-guard body[data-theme] #planner #plannerBriefHeadline {
    max-width: 7.6em !important;
    font-size: clamp(2.95rem, 15vw, 4.7rem) !important;
  }

  #planner .planner-refresh-brief,
  body[data-theme] #planner .planner-refresh-brief {
    width: 100% !important;
    min-height: 46px !important;
  }

  #planner .planner-layout,
  body[data-theme] #planner .planner-layout,
  html.native-layout-guard body[data-theme] #planner .planner-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #planner .planner-ticket,
  body[data-theme] #planner .planner-ticket,
  html.native-layout-guard body[data-theme] #planner .planner-ticket {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #planner .planner-ticket-head,
  body[data-theme] #planner .planner-ticket-head,
  html.native-layout-guard body[data-theme] #planner .planner-ticket-head {
    grid-column: 1 !important;
    grid-row: auto !important;
    padding: 22px 16px !important;
    border-right: 0 !important;
  }

  #planner .planner-ticket-head h3,
  body[data-theme] #planner .planner-ticket-head h3 {
    max-width: 8ch !important;
    font-size: clamp(3rem, 14vw, 4.5rem) !important;
  }

  #planner #plannerScore,
  body[data-theme] #planner #plannerScore {
    width: 72px !important;
    height: 72px !important;
    font-size: 1.55rem !important;
  }

  #planner .planner-metrics,
  body[data-theme] #planner .planner-metrics,
  html.native-layout-guard body[data-theme] #planner .planner-metrics {
    grid-column: 1 !important;
    grid-row: auto !important;
    border-right: 0 !important;
  }

  #planner .planner-outfit,
  body[data-theme] #planner .planner-outfit,
  html.native-layout-guard body[data-theme] #planner .planner-outfit {
    grid-column: 1 !important;
    grid-row: auto !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(112px, 0.75fr) !important;
    grid-auto-rows: minmax(112px, 1fr) !important;
    min-height: 460px !important;
  }

  #planner .planner-slot:first-child,
  body[data-theme] #planner .planner-slot:first-child {
    grid-row: 1 / span 3 !important;
  }

  #planner .planner-slot-copy,
  body[data-theme] #planner .planner-slot-copy,
  html.native-layout-guard #planner .planner-slot-copy,
  html.native-layout-guard body[data-theme] #planner .planner-slot-copy {
    right: 5px !important;
    bottom: 5px !important;
    left: 5px !important;
    padding: 7px !important;
  }

  /* Ta reguła wygrywa na telefonie, więc podniesienie tytułu wyżej w pliku samo
     w sobie nic by na nim nie zmieniło. */
  #planner .planner-slot-copy strong,
  body[data-theme] #planner .planner-slot-copy strong,
  html.native-layout-guard #planner .planner-slot-copy strong,
  html.native-layout-guard body[data-theme] #planner .planner-slot-copy strong {
    font-size: 0.8rem !important;
  }

  #planner .planner-slot-copy > span,
  body[data-theme] #planner .planner-slot-copy > span {
    display: none !important;
  }

  #planner .planner-reasons,
  body[data-theme] #planner .planner-reasons,
  html.native-layout-guard body[data-theme] #planner .planner-reasons,
  #planner .planner-brief-actions,
  body[data-theme] #planner .planner-brief-actions,
  #planner #plannerStatus,
  body[data-theme] #planner #plannerStatus {
    grid-column: 1 !important;
    grid-row: auto !important;
    border-right: 0 !important;
  }

  #planner .planner-panel,
  body[data-theme] #planner .planner-panel,
  #planner .planner-history-panel,
  body[data-theme] #planner .planner-history-panel {
    grid-column: 1 !important;
  }
}

/* v803-pending-generation-flow: input first; a result board is only expansive after a real result exists. */
#planner[data-generation-state="pending"] .planner-panel,
body[data-theme] #planner[data-generation-state="pending"] .planner-panel,
#coach[data-generation-state="pending"] .coach-panel,
body[data-theme] #coach[data-generation-state="pending"] .coach-panel,
#capsule[data-generation-state="pending"] .capsule-panel,
body[data-theme] #capsule[data-generation-state="pending"] .capsule-panel {
  order: 1 !important;
  grid-column: 1 / -1 !important;
}

#planner[data-generation-state="pending"] .planner-result-panel,
body[data-theme] #planner[data-generation-state="pending"] .planner-result-panel,
#coach[data-generation-state="pending"] .coach-answer-panel,
body[data-theme] #coach[data-generation-state="pending"] .coach-answer-panel,
#capsule[data-generation-state="pending"] .capsule-board-panel,
body[data-theme] #capsule[data-generation-state="pending"] .capsule-board-panel {
  order: 2 !important;
  grid-column: 1 / -1 !important;
}

#planner[data-generation-state="pending"] .planner-ticket,
body[data-theme] #planner[data-generation-state="pending"] .planner-ticket {
  grid-template-columns: minmax(0, 1fr) !important;
}

#planner[data-generation-state="pending"] .planner-ticket-head,
body[data-theme] #planner[data-generation-state="pending"] .planner-ticket-head {
  grid-column: 1 / -1 !important;
  padding: clamp(18px, 3vw, 28px) !important;
  border-right: 0 !important;
}

#planner[data-generation-state="pending"] .planner-ticket-head h3,
body[data-theme] #planner[data-generation-state="pending"] .planner-ticket-head h3,
#coach[data-generation-state="pending"] .coach-answer-head h3,
body[data-theme] #coach[data-generation-state="pending"] .coach-answer-head h3,
#capsule[data-generation-state="pending"] .capsule-board-head h3,
body[data-theme] #capsule[data-generation-state="pending"] .capsule-board-head h3 {
  max-width: none !important;
  font-family: inherit !important;
  font-size: clamp(1.22rem, 2.6vw, 1.7rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
}

#planner[data-generation-state="pending"] .planner-brief-narrative,
body[data-theme] #planner[data-generation-state="pending"] .planner-brief-narrative,
#planner[data-generation-state="pending"] #plannerScore,
body[data-theme] #planner[data-generation-state="pending"] #plannerScore,
#planner[data-generation-state="pending"] .planner-metrics,
body[data-theme] #planner[data-generation-state="pending"] .planner-metrics,
#planner[data-generation-state="pending"] .planner-reasons,
body[data-theme] #planner[data-generation-state="pending"] .planner-reasons,
#planner[data-generation-state="pending"] .planner-brief-actions,
body[data-theme] #planner[data-generation-state="pending"] .planner-brief-actions,
#planner[data-generation-state="pending"] #plannerStatus:empty,
body[data-theme] #planner[data-generation-state="pending"] #plannerStatus:empty,
#coach[data-generation-state="pending"] .coach-session-narrative,
body[data-theme] #coach[data-generation-state="pending"] .coach-session-narrative,
#coach[data-generation-state="pending"] #coachScore,
body[data-theme] #coach[data-generation-state="pending"] #coachScore,
#coach[data-generation-state="pending"] .coach-metrics,
body[data-theme] #coach[data-generation-state="pending"] .coach-metrics,
#coach[data-generation-state="pending"] .coach-session-actions,
body[data-theme] #coach[data-generation-state="pending"] .coach-session-actions,
#capsule[data-generation-state="pending"] .capsule-edit-narrative,
body[data-theme] #capsule[data-generation-state="pending"] .capsule-edit-narrative,
#capsule[data-generation-state="pending"] #capsuleScore,
body[data-theme] #capsule[data-generation-state="pending"] #capsuleScore,
#capsule[data-generation-state="pending"] .capsule-metrics,
body[data-theme] #capsule[data-generation-state="pending"] .capsule-metrics,
#capsule[data-generation-state="pending"] .capsule-edit-actions,
body[data-theme] #capsule[data-generation-state="pending"] .capsule-edit-actions,
#capsule[data-generation-state="pending"] #capsuleStatus:empty,
body[data-theme] #capsule[data-generation-state="pending"] #capsuleStatus:empty {
  display: none !important;
}

#planner[data-generation-state="pending"] .planner-outfit,
body[data-theme] #planner[data-generation-state="pending"] .planner-outfit {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  display: block !important;
  min-height: 0 !important;
  padding: 0 clamp(18px, 3vw, 28px) clamp(18px, 3vw, 28px) !important;
  overflow: visible !important;
  background: transparent !important;
}

#planner[data-generation-state="pending"] .planner-empty,
body[data-theme] #planner[data-generation-state="pending"] .planner-empty,
#coach[data-generation-state="pending"] .coach-empty,
body[data-theme] #coach[data-generation-state="pending"] .coach-empty,
#capsule[data-generation-state="pending"] .capsule-empty,
body[data-theme] #capsule[data-generation-state="pending"] .capsule-empty {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 16px !important;
}

#planner[data-generation-state="pending"] .planner-empty h4,
body[data-theme] #planner[data-generation-state="pending"] .planner-empty h4,
#coach[data-generation-state="pending"] .coach-empty h4,
body[data-theme] #coach[data-generation-state="pending"] .coach-empty h4,
#capsule[data-generation-state="pending"] .capsule-empty h4,
body[data-theme] #capsule[data-generation-state="pending"] .capsule-empty h4 {
  margin: 0 0 4px !important;
  font-size: 0.88rem !important;
  line-height: 1.18 !important;
}

#planner[data-generation-state="pending"] .planner-empty p,
body[data-theme] #planner[data-generation-state="pending"] .planner-empty p,
#coach[data-generation-state="pending"] .coach-empty p,
body[data-theme] #coach[data-generation-state="pending"] .coach-empty p,
#capsule[data-generation-state="pending"] .capsule-empty p,
body[data-theme] #capsule[data-generation-state="pending"] .capsule-empty p {
  margin: 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.38 !important;
}

#coach[data-generation-state="pending"] .coach-answer,
body[data-theme] #coach[data-generation-state="pending"] .coach-answer,
#capsule[data-generation-state="pending"] .capsule-board,
body[data-theme] #capsule[data-generation-state="pending"] .capsule-board {
  gap: 14px !important;
}

#coach[data-generation-state="pending"] .coach-answer-head,
body[data-theme] #coach[data-generation-state="pending"] .coach-answer-head,
#capsule[data-generation-state="pending"] .capsule-board-head,
body[data-theme] #capsule[data-generation-state="pending"] .capsule-board-head {
  grid-template-columns: minmax(0, 1fr) !important;
}

#coach[data-generation-state="pending"] .coach-session-quote,
body[data-theme] #coach[data-generation-state="pending"] .coach-session-quote {
  margin: 0 !important;
  padding: 12px 14px !important;
}

@media (max-width: 900px) {
  #planner[data-generation-state="pending"] > .planner-brief-head,
  body[data-theme] #planner[data-generation-state="pending"] > .planner-brief-head,
  #coach[data-generation-state="pending"] > .section-head,
  body[data-theme] #coach[data-generation-state="pending"] > .section-head,
  #capsule[data-generation-state="pending"] > .section-head,
  body[data-theme] #capsule[data-generation-state="pending"] > .section-head {
    gap: 10px !important;
    padding: 14px 14px !important;
  }

  #planner[data-generation-state="pending"] #plannerBriefHeadline,
  body[data-theme] #planner[data-generation-state="pending"] #plannerBriefHeadline,
  #coach[data-generation-state="pending"] #coachHeadline,
  body[data-theme] #coach[data-generation-state="pending"] #coachHeadline,
  #capsule[data-generation-state="pending"] #capsuleHeadline,
  body[data-theme] #capsule[data-generation-state="pending"] #capsuleHeadline {
    max-width: none !important;
    font-size: clamp(1.62rem, 7.6vw, 2.15rem) !important;
    line-height: 1.01 !important;
  }

  #planner[data-generation-state="pending"] .planner-ticket-head,
  body[data-theme] #planner[data-generation-state="pending"] .planner-ticket-head {
    padding: 16px !important;
  }

  #planner[data-generation-state="pending"] .planner-outfit,
  body[data-theme] #planner[data-generation-state="pending"] .planner-outfit {
    padding: 0 16px 16px !important;
  }
}

/* v804-pending-native-final: this must stay last so the native layout guard cannot restore empty result cards. */
html.native-layout-guard body[data-theme] #planner[data-generation-state="pending"] .planner-panel,
html.native-layout-guard body[data-theme] #coach[data-generation-state="pending"] .coach-panel,
html.native-layout-guard body[data-theme] #capsule[data-generation-state="pending"] .capsule-panel {
  order: 1 !important;
  grid-column: 1 / -1 !important;
}

html.native-layout-guard body[data-theme] #planner[data-generation-state="pending"] .planner-result-panel,
html.native-layout-guard body[data-theme] #coach[data-generation-state="pending"] .coach-answer-panel,
html.native-layout-guard body[data-theme] #capsule[data-generation-state="pending"] .capsule-board-panel {
  order: 2 !important;
  grid-column: 1 / -1 !important;
}

html.native-layout-guard body[data-theme] :is(
  #planner[data-generation-state="pending"] .planner-ticket-head h3,
  #coach[data-generation-state="pending"] .coach-answer-head h3,
  #capsule[data-generation-state="pending"] .capsule-board-head h3
) {
  max-width: none !important;
  font-family: inherit !important;
  font-size: clamp(1.22rem, 2.6vw, 1.7rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
}

html.native-layout-guard body[data-theme] :is(
  #planner[data-generation-state="pending"] #plannerScore,
  #planner[data-generation-state="pending"] .planner-metrics,
  #planner[data-generation-state="pending"] .planner-reasons,
  #planner[data-generation-state="pending"] .planner-brief-actions,
  #coach[data-generation-state="pending"] #coachScore,
  #coach[data-generation-state="pending"] .coach-metrics,
  #coach[data-generation-state="pending"] .coach-session-actions,
  #capsule[data-generation-state="pending"] #capsuleScore,
  #capsule[data-generation-state="pending"] .capsule-metrics,
  #capsule[data-generation-state="pending"] .capsule-edit-actions
) {
  display: none !important;
}

html.native-layout-guard body[data-theme] #planner[data-generation-state="pending"] .planner-ticket {
  grid-template-columns: minmax(0, 1fr) !important;
}

html.native-layout-guard body[data-theme] #planner[data-generation-state="pending"] .planner-ticket-head {
  grid-column: 1 / -1 !important;
  padding: 16px !important;
  border-right: 0 !important;
}

html.native-layout-guard body[data-theme] #planner[data-generation-state="pending"] .planner-outfit {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  display: block !important;
  min-height: 0 !important;
  padding: 0 16px 16px !important;
  overflow: visible !important;
  background: transparent !important;
}

html.native-layout-guard body[data-theme] :is(
  #planner[data-generation-state="pending"] .planner-empty,
  #coach[data-generation-state="pending"] .coach-empty,
  #capsule[data-generation-state="pending"] .capsule-empty
) {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 16px !important;
}

html.native-layout-guard body[data-theme] :is(
  #planner[data-generation-state="pending"] .planner-empty h4,
  #coach[data-generation-state="pending"] .coach-empty h4,
  #capsule[data-generation-state="pending"] .capsule-empty h4
) {
  margin: 0 0 4px !important;
  font-size: 0.88rem !important;
  line-height: 1.18 !important;
}

html.native-layout-guard body[data-theme] :is(
  #planner[data-generation-state="pending"] .planner-empty p,
  #coach[data-generation-state="pending"] .coach-empty p,
  #capsule[data-generation-state="pending"] .capsule-empty p
) {
  margin: 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.38 !important;
}

@media (max-width: 900px) {
  html.native-layout-guard body[data-theme] :is(
    #planner[data-generation-state="pending"] #plannerBriefHeadline,
    #coach[data-generation-state="pending"] #coachHeadline,
    #capsule[data-generation-state="pending"] #capsuleHeadline
  ) {
    max-width: none !important;
    font-size: clamp(1.62rem, 7.6vw, 2.15rem) !important;
    line-height: 1.01 !important;
  }
}
#community[data-state="local-only"] #communityLocalNotice,
body[data-theme] #community[data-state="local-only"] #communityLocalNotice {
  display: inline-flex;
  max-width: 72ch;
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent, #ff3b7d) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #ff3b7d) 10%, transparent);
  color: var(--text, #f7f7f7);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

@media (max-width: 680px) {
  #community[data-state="local-only"] #communityLocalNotice,
  body[data-theme] #community[data-state="local-only"] #communityLocalNotice {
    border-radius: 16px;
  }
}

/* v886: put the actual local publishing task before the optional template on phones. */
@media (max-width: 680px) {
  #community > .section-head,
  body[data-theme] #community > .section-head,
  html.native-layout-guard #community > .section-head,
  html.native-layout-guard body[data-theme] #community > .section-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #community[data-state="local-only"] #communityLocalNotice,
  body[data-theme] #community[data-state="local-only"] #communityLocalNotice {
    width: 100% !important;
    max-width: none !important;
  }

  #community > .section-head .section-actions,
  body[data-theme] #community > .section-head .section-actions {
    width: 100% !important;
  }

  #community > .section-head #clearCommunityButton,
  body[data-theme] #community > .section-head #clearCommunityButton {
    width: 100% !important;
    min-height: 44px !important;
    height: auto !important;
    white-space: normal !important;
  }

  #community > .social-share-panel,
  body[data-theme] #community > .social-share-panel,
  html.native-layout-guard #community > .social-share-panel,
  html.native-layout-guard body[data-theme] #community > .social-share-panel {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  #community > #circleDispatch,
  body[data-theme] #community > #circleDispatch,
  html.native-layout-guard #community > #circleDispatch,
  html.native-layout-guard body[data-theme] #community > #circleDispatch {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  #community > .community-feed-panel,
  body[data-theme] #community > .community-feed-panel,
  html.native-layout-guard #community > .community-feed-panel,
  html.native-layout-guard body[data-theme] #community > .community-feed-panel {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
}

/* Web plan cards describe packages; only native builds expose purchase buttons. */
body.ui-v794[data-theme] #paywallDialog article.paywall-product,
html.native-layout-guard body.ui-v794[data-theme] #paywallDialog article.paywall-product,
body.ui-v794[data-theme] #paywallDialog article.paywall-product:hover {
  cursor: default !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: #181c25 !important;
}

body.ui-v794[data-theme] #paywallDialog article.paywall-product .paywall-plan-cta,
html.native-layout-guard body.ui-v794[data-theme] #paywallDialog article.paywall-product .paywall-plan-cta {
  border-color: #526071 !important;
  background: #343b47 !important;
  color: #e5e7eb !important;
}