:root {
  --ink: #151515;
  --muted: #63666a;
  --line: #d8dcdf;
  --paper: #f6f8f9;
  --white: #ffffff;
  --coral: #e84d5b;
  --teal: #0b8f83;
  --blue: #2f6fed;
  --yellow: #f5c84c;
  --green: #67b346;
  --shadow: 0 18px 48px rgba(18, 22, 27, 0.12);
}
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100000;
  min-height: 44px;
  padding: 11px 16px;
  border: 2px solid #111;
  border-radius: 12px;
  background: #fff;
  color: #111;
  font-weight: 900;
  line-height: 1.2;
  transform: translateY(calc(-100% - 18px));
  transition: transform 140ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

#mainContent:focus {
  outline: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
label.import-button:focus-within {
  outline: 3px solid rgba(47, 111, 237, 0.32);
  outline-offset: 2px;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.app-shell {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(21, 21, 21, 0.08);
  background: rgba(246, 248, 249, 0.88);
  backdrop-filter: blur(16px);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 32px));
  min-height: 68px;
  margin: 0 auto;
  gap: 20px;
}

.brand,
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  font-weight: 800;
}

.brand small {
  display: none;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--ink);
  color: var(--white);
  border-radius: 8px;
  letter-spacing: 0;
}

.topbar-actions a {
  color: var(--muted);
  font-size: 0.95rem;
}

.mobile-dock {
  display: none;
}

.quick-action-button {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 31;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: var(--coral);
  color: var(--white);
  box-shadow: 0 16px 38px rgba(232, 77, 91, 0.34);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.quick-action-button:hover,
.quick-action-button:focus-visible {
  background: var(--ink);
}

.command-button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 900;
}

.topbar-switches {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.locale-switch,
.market-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.locale-switch select,
.market-switch select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 0 9px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.app-status {
  display: none;
}

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: start center;
  background: rgba(21, 21, 21, 0.46);
  padding: 8vh 16px 24px;
}

.command-palette[hidden] {
  display: none;
}

.quick-action-sheet {
  position: fixed;
  inset: 0;
  z-index: 42;
  display: grid;
  align-items: end;
  justify-items: end;
  background: rgba(21, 21, 21, 0.38);
  padding: 16px;
}

.quick-action-sheet[hidden] {
  display: none;
}

.quick-action-panel {
  width: min(640px, 100%);
  border: 1px solid rgba(21, 21, 21, 0.14);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 28px 90px rgba(10, 12, 14, 0.28);
  padding: 14px;
}

.quick-action-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.quick-action-head h2 {
  font-size: 1.22rem;
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 12px;
}

.quick-action-grid button {
  display: grid;
  gap: 5px;
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
  color: var(--ink);
  padding: 12px;
  text-align: left;
}

.quick-action-grid button:hover,
.quick-action-grid button:focus-visible {
  border-color: rgba(11, 143, 131, 0.45);
  background: #edf7f6;
}

.quick-action-grid strong {
  font-size: 0.9rem;
  line-height: 1.15;
}

.quick-action-grid span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.command-panel {
  width: min(680px, 100%);
  border: 1px solid rgba(21, 21, 21, 0.14);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 28px 90px rgba(10, 12, 14, 0.32);
  padding: 16px;
}

.command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.command-head h2 {
  font-size: 1.28rem;
}

#commandSearchInput {
  width: 100%;
  min-height: 48px;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
  padding: 0 13px;
  font-weight: 850;
}

.command-results {
  display: grid;
  max-height: min(52vh, 520px);
  overflow: auto;
  gap: 6px;
  padding-right: 2px;
}

.command-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 11px 12px;
  color: var(--ink);
  text-align: left;
}

.command-row:hover,
.command-row:focus-visible,
.command-row.active {
  border-color: rgba(11, 143, 131, 0.42);
  background: #edf7f5;
}

.command-row strong,
.command-row span {
  display: block;
}

.command-row strong {
  font-size: 0.92rem;
}

.command-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.command-row kbd {
  border-radius: 999px;
  background: #edf1f3;
  color: var(--muted);
  padding: 6px 8px;
  font-size: 0.68rem;
  font-weight: 900;
}

.studio-band[hidden],
.content-band[hidden],
.business-band[hidden] {
  display: none !important;
}

.topbar-actions a.active,
.brand.active {
  background: #edf7f5;
  color: var(--ink);
}

.studio-band,
.content-band,
.business-band {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  scroll-margin-top: 96px;
}

.studio-band {
  padding: 34px 0 54px;
}

.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(310px, 0.95fr);
  gap: 16px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.intro-panel {
  display: flex;
  min-height: auto;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  border-left: 5px solid var(--teal);
  padding: 20px;
  background: var(--white);
  color: var(--ink);
}

.eyebrow {
  color: var(--coral);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intro-panel .eyebrow {
  color: var(--coral);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 10px;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  line-height: 1.04;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 8px;
  font-size: 1rem;
  letter-spacing: 0;
}

p {
  color: var(--muted);
  line-height: 1.55;
}

.intro-panel p {
  max-width: 620px;
  color: var(--muted);
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 26px;
}

.quick-stats div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
}

.quick-stats strong,
.quick-stats span {
  display: block;
}

.quick-stats strong {
  font-size: 1.5rem;
}

.quick-stats span {
  color: var(--muted);
  font-size: 0.78rem;
}

.photo-panel,
.controls-panel,
.recommendation-panel,
.item-form {
  padding: 20px;
}

.panel-head,
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.panel-head {
  margin-bottom: 18px;
}

.panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.photo-panel {
  min-height: 420px;
}

.upload-zone {
  position: relative;
  display: block;
  overflow: hidden;
  height: 230px;
  border-radius: 8px;
  background: #e6eaed;
}

.upload-zone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-zone span {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 800;
}

#photoInput {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.score-wrap {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
}

.score-ring {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--white) 58%, transparent 59%),
    conic-gradient(var(--teal) 0deg 310deg, #e7ecef 310deg 360deg);
}

.score-ring strong,
.score-ring span {
  grid-area: 1 / 1;
}

.score-ring strong {
  margin-top: -8px;
  font-size: 1.55rem;
}

.score-ring span {
  margin-top: 30px;
  color: var(--muted);
  font-size: 0.72rem;
}

.vision-panel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.vision-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vision-head h3 {
  margin-bottom: 0;
}

#visionConfidence {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  color: var(--white);
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 900;
}

.palette-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.palette-swatches span {
  display: grid;
  gap: 6px;
  min-height: auto;
  border: 1px solid rgba(21, 21, 21, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 252, 0.64);
  color: var(--app-muted, var(--muted));
  padding: 6px;
  font-size: 0.58rem;
  font-weight: 850;
  text-shadow: none;
}

.palette-swatches i {
  display: block;
  width: 100%;
  height: 34px;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(16, 17, 20, 0.12),
    0 8px 16px rgba(16, 17, 20, 0.06);
}

.palette-swatches small {
  display: block;
  color: var(--app-muted, var(--muted));
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.vision-signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.vision-signals article {
  border-radius: 8px;
  background: #edf1f3;
  padding: 10px;
}

.vision-signals span,
.vision-signals strong {
  display: block;
}

.vision-signals span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.vision-signals strong {
  margin-top: 3px;
  font-size: 0.9rem;
}

.vision-fixes {
  display: grid;
  gap: 7px;
}

.vision-fixes p {
  margin: 0;
  border-left: 4px solid var(--blue);
  border-radius: 4px;
  background: #eef4ff;
  padding: 8px 9px;
  color: #27436f;
  font-size: 0.82rem;
}

.photo-capture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.photo-capture-actions .ghost-button {
  flex: 1 1 150px;
  min-height: 42px;
}

.photo-capture-draft {
  display: grid;
  gap: 8px;
}

.photo-capture-editor {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfc;
  padding: 10px;
}

.photo-capture-editor[hidden] {
  display: none;
}

.photo-capture-editor label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.photo-capture-editor input,
.photo-capture-editor select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  padding: 0 10px;
  font: inherit;
  font-size: max(1rem, 16px);
  font-weight: 760;
}

.capture-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.photo-capture-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
  padding: 10px;
}

.photo-capture-card img {
  width: 76px;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  background: #e6eaed;
}

.photo-capture-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.photo-capture-card h4 {
  margin: 3px 0 7px;
  font-size: 0.95rem;
}

.capture-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.capture-meta span {
  border-radius: 999px;
  background: #edf1f3;
  padding: 5px 8px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.2;
}

.capture-meta strong {
  color: var(--ink);
}

.repair-panel {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.repair-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.repair-head h3 {
  margin-bottom: 0;
}

.repair-head .ghost-button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.72rem;
}

.repair-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.repair-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 10px;
}

.repair-metrics strong,
.repair-metrics span {
  display: block;
}

.repair-metrics strong {
  overflow: hidden;
  font-size: 1.03rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repair-metrics span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.repair-list {
  display: grid;
  gap: 8px;
}

.repair-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px;
}

.repair-hot {
  border-left-color: var(--coral);
}

.repair-warn {
  border-left-color: #ffbf47;
}

.repair-good {
  border-left-color: var(--teal);
}

.repair-card img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: #edf1f3;
  object-fit: cover;
}

.repair-card h4 {
  margin: 3px 0 0;
  font-size: 0.9rem;
}

.repair-card p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 780;
}

.repair-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.repair-card-head span,
.repair-card-head strong {
  font-size: 0.68rem;
  font-weight: 900;
}

.repair-card-head span {
  color: var(--muted);
  text-transform: uppercase;
}

.repair-card-head strong {
  color: var(--teal);
}

.repair-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.repair-tags span {
  border-radius: 999px;
  background: #edf1f3;
  color: var(--muted);
  padding: 5px 7px;
  font-size: 0.66rem;
  font-weight: 850;
}

.repair-empty {
  min-height: 96px;
}

.controls-panel,
.recommendation-panel {
  min-height: 250px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  padding: 0 12px;
}

textarea {
  min-height: 126px;
  resize: vertical;
  padding: 12px;
  line-height: 1.45;
}

input[type="range"] {
  padding: 0;
  accent-color: var(--teal);
}

.range-value {
  color: var(--ink);
  font-size: 0.9rem;
}

.primary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 850;
}

.primary-button {
  background: var(--ink);
  color: var(--white);
}

.ghost-button {
  background: var(--white);
  color: var(--ink);
}

.danger-button {
  border-color: rgba(232, 77, 91, 0.45);
  color: var(--coral);
}

.full {
  width: 100%;
}

.mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f1f4f5;
}

.mode-switch button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.mode-switch button.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 7px 18px rgba(18, 22, 27, 0.1);
}

.recommendation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.recommendation-actions .primary-button,
.recommendation-actions .ghost-button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.outfit-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.outfit-summary div {
  padding: 10px;
  border-radius: 8px;
  background: #edf1f3;
}

.outfit-summary strong,
.outfit-summary span {
  display: block;
}

.outfit-summary strong {
  font-size: 1rem;
}

.outfit-summary span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.outfit-list {
  display: grid;
  gap: 10px;
}

.outfit-row {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.outfit-row img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
}

.outfit-row strong,
.outfit-row span {
  display: block;
}

.outfit-row span,
.price {
  color: var(--muted);
  font-size: 0.82rem;
}

.taste-actions {
  display: flex;
  grid-column: 2 / -1;
  flex-wrap: wrap;
  gap: 6px;
}

.taste-actions button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--muted);
  padding: 0 9px;
  font-size: 0.72rem;
  font-weight: 900;
}

.taste-actions button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.taste-panel {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 14px;
}

.taste-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.taste-head h3 {
  margin-bottom: 0;
}

.taste-head .ghost-button {
  min-height: 32px;
  border-color: var(--line);
  padding: 0 10px;
  font-size: 0.74rem;
}

.taste-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.taste-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 10px;
}

.taste-metrics strong,
.taste-metrics span {
  display: block;
}

.taste-metrics strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taste-metrics span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
}

.taste-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.taste-tags p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.taste-tags span {
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 0.72rem;
  font-weight: 900;
}

.taste-positive {
  background: rgba(103, 179, 70, 0.14);
  color: var(--green);
}

.taste-negative {
  background: rgba(232, 77, 91, 0.14);
  color: var(--coral);
}

.reasons-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.reasons-list h3 {
  margin-bottom: 0;
}

.reasons-list p {
  margin: 0;
  border-left: 4px solid var(--teal);
  border-radius: 4px;
  background: #edf7f5;
  padding: 9px 10px;
  color: #2e5250;
  font-size: 0.86rem;
}

.content-band {
  padding: 52px 0;
}

.section-head {
  margin-bottom: 22px;
}

.section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.passport-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.passport-panel {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.passport-card-panel {
  grid-column: 2;
  overflow: hidden;
  padding: 0;
}

.passport-card {
  display: grid;
  gap: 14px;
  min-height: 100%;
  border-top: 6px solid var(--blue);
  background:
    linear-gradient(90deg, rgba(47, 111, 237, 0.1) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, rgba(11, 143, 131, 0.08), transparent 220px),
    var(--white);
  padding: 16px;
}

.passport-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.passport-card-head h3 {
  margin-bottom: 0;
}

#passportScore {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border: 3px solid var(--teal);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 1.05rem;
}

.passport-metrics,
.passport-dna,
.passport-reasons,
.passport-products,
.passport-history {
  display: grid;
  gap: 8px;
}

.passport-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.passport-metrics div,
.passport-history-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
  padding: 10px;
}

.passport-metrics strong,
.passport-metrics span,
.passport-history-card strong,
.passport-history-card span {
  display: block;
}

.passport-metrics span,
.passport-history-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.passport-dna-row {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  padding: 10px;
}

.passport-dna-row div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.passport-dna-row span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.passport-dna-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ecef;
}

.passport-dna-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

.passport-reasons p {
  margin: 0;
  border-left: 4px solid var(--blue);
  border-radius: 4px;
  background: #eef4ff;
  padding: 9px 10px;
  color: #24446e;
  font-size: 0.82rem;
  line-height: 1.42;
}

.passport-products-panel {
  grid-column: 2;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.passport-products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.passport-product-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 9px;
}

.passport-product-card img {
  width: 58px;
  height: 58px;
  border-radius: 7px;
  object-fit: cover;
}

.passport-product-card strong,
.passport-product-card span {
  display: block;
}

.passport-product-card > div > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 780;
}

.passport-product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.passport-product-tags span {
  width: fit-content;
  border-radius: 999px;
  background: #edf1f3;
  padding: 5px 7px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.size-passport-panel {
  grid-column: 2;
  display: grid;
  gap: 12px;
  overflow: hidden;
  padding: 16px;
  border-top: 5px solid var(--teal);
  background:
    linear-gradient(90deg, rgba(11, 143, 131, 0.11) 0 1px, transparent 1px 32px),
    var(--white);
}

.size-passport-panel .panel-head {
  align-items: flex-start;
  margin-bottom: 0;
}

.size-passport-controls {
  display: grid;
  gap: 12px;
}

.size-passport-metrics,
.size-measurement-guide,
.size-passport-map {
  display: grid;
  gap: 8px;
}

.size-passport-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.size-passport-map {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.size-passport-metrics div,
.size-passport-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
  padding: 10px;
}

.size-passport-metrics strong,
.size-passport-metrics span,
.size-passport-row span,
.size-passport-row strong,
.size-passport-row small {
  display: block;
}

.size-passport-metrics span,
.size-passport-row span,
.size-passport-row small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.size-passport-row {
  border-left: 5px solid var(--teal);
}

.size-passport-row strong {
  margin: 5px 0;
  font-size: 1.16rem;
}

.size-measurement-guide-card {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(11, 143, 131, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(11, 143, 131, 0.14), transparent 180px),
    #f7fcfb;
  padding: 12px;
}

.size-measurement-guide-card span,
.size-measurement-guide-card strong,
.size-measurement-guide-card p {
  display: block;
}

.size-measurement-guide-card span {
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.size-measurement-guide-card strong {
  margin-top: 4px;
}

.size-measurement-guide-card p {
  margin: 0;
  color: #284b48;
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.4;
}

.passport-history-panel {
  grid-column: 1;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.passport-history-card {
  display: grid;
  gap: 5px;
  border-left: 5px solid var(--blue);
}

.passport-history-card small {
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.coach-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.coach-panel {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.coach-answer-panel {
  grid-column: 2;
  overflow: hidden;
  padding: 0;
}

.coach-answer {
  display: grid;
  gap: 14px;
  min-height: 100%;
  border-top: 6px solid var(--green);
  background:
    linear-gradient(90deg, rgba(103, 179, 70, 0.1) 0 1px, transparent 1px 48px),
    linear-gradient(180deg, rgba(47, 111, 237, 0.07), transparent 220px),
    var(--white);
  padding: 16px;
}

.coach-answer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.coach-answer-head h3 {
  margin-bottom: 0;
}

#coachScore {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border: 3px solid var(--green);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 1.05rem;
}

.coach-metrics,
.coach-message,
.coach-items,
.coach-history {
  display: grid;
  gap: 8px;
}

.coach-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.coach-metrics div,
.coach-history-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
  padding: 10px;
}

.coach-metrics strong,
.coach-metrics span,
.coach-history-card strong,
.coach-history-card span {
  display: block;
}

.coach-metrics strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coach-metrics span,
.coach-history-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.coach-message p {
  margin: 0;
  border-left: 4px solid var(--green);
  border-radius: 4px;
  background: #f1f8ed;
  color: #2f5728;
  padding: 9px 10px;
  font-size: 0.84rem;
  line-height: 1.43;
}

.coach-message p:nth-child(even) {
  border-left-color: var(--blue);
  background: #eef4ff;
  color: #24446e;
}

.coach-items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coach-item-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 9px;
}

.coach-item-card img {
  width: 62px;
  height: 62px;
  border-radius: 7px;
  object-fit: cover;
}

.coach-item-card strong,
.coach-item-card span {
  display: block;
}

.coach-item-card > div > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 780;
}

.coach-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.coach-item-tags span {
  width: fit-content;
  border-radius: 999px;
  background: #edf1f3;
  padding: 5px 7px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.coach-history-panel {
  grid-column: 1;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.coach-history-card {
  display: grid;
  gap: 5px;
  border-left: 5px solid var(--green);
}

.coach-history-card small {
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fit-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.fit-panel {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.fit-result-panel {
  grid-column: 2;
  overflow: hidden;
  padding: 0;
}

.fit-ticket {
  display: grid;
  gap: 14px;
  min-height: 100%;
  border-top: 6px solid var(--yellow);
  background:
    linear-gradient(90deg, rgba(245, 200, 76, 0.2) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, rgba(232, 77, 91, 0.07), transparent 220px),
    var(--white);
  padding: 16px;
}

.fit-ticket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.fit-ticket-head h3 {
  margin-bottom: 0;
}

#fitScore {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border: 3px solid var(--yellow);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 1.05rem;
}

.fit-metrics,
.fit-readout,
.fit-alternatives,
.fit-alternative-grid,
.fit-history {
  display: grid;
  gap: 8px;
}

.fit-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fit-metrics div,
.fit-history-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
  padding: 10px;
}

.fit-metrics strong,
.fit-metrics span,
.fit-history-card strong,
.fit-history-card span {
  display: block;
}

.fit-metrics strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fit-metrics span,
.fit-history-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.fit-readout p {
  margin: 0;
  border-left: 4px solid var(--yellow);
  border-radius: 4px;
  background: #fff8df;
  color: #594a16;
  padding: 9px 10px;
  font-size: 0.84rem;
  line-height: 1.43;
}

.fit-readout p:nth-child(even) {
  border-left-color: var(--coral);
  background: #fff0f2;
  color: #693039;
}

.fit-alternatives h4 {
  margin: 0;
  font-size: 0.92rem;
}

.fit-alternative-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fit-alt-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 9px;
}

.fit-alt-card img {
  width: 58px;
  height: 58px;
  border-radius: 7px;
  object-fit: cover;
}

.fit-alt-card strong,
.fit-alt-card span {
  display: block;
}

.fit-alt-card > div > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 780;
}

.fit-history-panel {
  grid-column: 1;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.fit-history-card {
  display: grid;
  gap: 5px;
  border-left: 5px solid var(--yellow);
}

.fit-history-card small {
  color: #816611;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.planner-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.planner-panel {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.planner-result-panel {
  overflow: hidden;
  padding: 0;
}

.planner-ticket {
  position: relative;
  display: grid;
  gap: 14px;
  min-height: 100%;
  border-top: 6px solid var(--teal);
  padding: 16px;
}

.planner-ticket::after {
  position: absolute;
  right: 15px;
  bottom: 0;
  left: 15px;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(21, 21, 21, 0.22) 50%, transparent 0);
  background-size: 10px 1px;
  content: "";
}

.planner-ticket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.planner-ticket-head h3 {
  margin-bottom: 0;
}

#plannerScore {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 1.05rem;
}

.planner-metrics,
.planner-history {
  display: grid;
  gap: 8px;
}

.planner-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.planner-metrics div,
.planner-history-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
  padding: 10px;
}

.planner-metrics strong,
.planner-metrics span,
.planner-history-card strong,
.planner-history-card span {
  display: block;
}

.planner-metrics strong {
  font-size: 0.95rem;
}

.planner-metrics span,
.planner-history-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.planner-outfit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.planner-slot {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 9px;
}

.planner-slot img {
  width: 58px;
  height: 58px;
  border-radius: 7px;
  object-fit: cover;
}

.planner-slot strong,
.planner-slot span {
  display: block;
}

.planner-slot span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

.planner-slot-price {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 950;
  text-align: right;
}

.planner-reasons {
  display: grid;
  gap: 7px;
}

.planner-reasons p {
  margin: 0;
  border-left: 4px solid var(--yellow);
  border-radius: 4px;
  background: #fff9e6;
  padding: 9px 10px;
  color: #5b4a12;
  font-size: 0.82rem;
  line-height: 1.42;
}

.planner-history-panel {
  grid-column: 1;
  padding: 16px;
}

.planner-history-card {
  display: grid;
  gap: 5px;
  border-left: 5px solid var(--teal);
}

.planner-history-card small {
  color: var(--coral);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.capsule-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.capsule-panel {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.capsule-board-panel {
  grid-column: 2;
  overflow: hidden;
  padding: 0;
}

.capsule-board {
  display: grid;
  gap: 14px;
  min-height: 100%;
  border-top: 6px solid var(--coral);
  background:
    linear-gradient(135deg, rgba(245, 200, 76, 0.12) 0 12px, transparent 12px 24px),
    var(--white);
  padding: 16px;
}

.capsule-board-head,
.capsule-outfit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.capsule-board-head h3 {
  margin-bottom: 0;
}

#capsuleScore {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border: 3px solid var(--yellow);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 1.05rem;
}

.capsule-metrics,
.capsule-items,
.capsule-outfits,
.capsule-history {
  display: grid;
  gap: 8px;
}

.capsule-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capsule-metrics div,
.capsule-history-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
  padding: 10px;
}

.capsule-metrics strong,
.capsule-metrics span,
.capsule-history-card strong,
.capsule-history-card span {
  display: block;
}

.capsule-metrics span,
.capsule-history-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.capsule-items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.capsule-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  padding: 9px;
}

.capsule-item img {
  width: 58px;
  height: 58px;
  border-radius: 7px;
  object-fit: cover;
}

.capsule-item strong,
.capsule-item span {
  display: block;
}

.capsule-item > div > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 780;
}

.capsule-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.capsule-tags span {
  width: fit-content;
  border-radius: 999px;
  background: #edf1f3;
  padding: 5px 7px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
}

.capsule-outfits-panel {
  grid-column: 2;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.capsule-outfits {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.capsule-outfit-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 11px;
}

.capsule-outfit-head span {
  color: var(--coral);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.capsule-outfit-head strong {
  font-size: 0.82rem;
}

.capsule-outfit-items {
  display: grid;
  gap: 6px;
}

.capsule-outfit-items span {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
  gap: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
}

.capsule-outfit-items strong {
  color: var(--ink);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.capsule-history-panel {
  grid-column: 1;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.capsule-history-card {
  display: grid;
  gap: 5px;
  border-left: 5px solid var(--coral);
}

.capsule-history-card small {
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.discover-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.96fr) minmax(320px, 0.74fr);
  gap: 14px;
  align-items: start;
}

.discover-card-panel {
  overflow: hidden;
  padding: 0;
}

.discover-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.88fr) minmax(0, 1fr);
  min-height: 520px;
}

.discover-media {
  position: relative;
  min-height: 520px;
  background: #dfe5e8;
}

.discover-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#discoverScore {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 3px solid var(--white);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
  font-size: 1.08rem;
}

.discover-body {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
}

.discover-body h3 {
  font-size: 1.55rem;
  line-height: 1.05;
}

.discover-meta,
.discover-metrics {
  display: grid;
  gap: 8px;
}

.discover-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.discover-meta div,
.discover-metrics div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
  padding: 10px;
}

.discover-meta strong,
.discover-meta span,
.discover-metrics strong,
.discover-metrics span {
  display: block;
}

.discover-meta span,
.discover-metrics span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.discover-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.discover-tags span {
  border-radius: 999px;
  background: #edf1f3;
  padding: 7px 9px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.discover-reasons {
  display: grid;
  gap: 8px;
}

.discover-reasons p {
  margin: 0;
  border-left: 4px solid var(--teal);
  border-radius: 4px;
  background: #edf7f5;
  padding: 9px 10px;
  color: #2e5250;
  font-size: 0.84rem;
}

.discover-product-link {
  width: fit-content;
}

.discover-side-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.discover-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.discover-queue {
  display: grid;
  gap: 8px;
}

.discover-queue-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 8px;
}

.discover-queue-card img {
  width: 54px;
  height: 54px;
  border-radius: 7px;
  object-fit: cover;
}

.discover-queue-card strong,
.discover-queue-card span {
  display: block;
}

.discover-queue-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 780;
}

.discover-queue-score {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 950;
}

.segmented {
  display: flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.segmented button {
  min-width: 82px;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.segmented button.active {
  background: var(--ink);
  color: var(--white);
}

.csv-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#csvInput {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.status-line {
  min-height: 24px;
  margin: -8px 0 18px;
  color: var(--teal);
  font-size: 0.9rem;
  font-weight: 800;
}

.brain-band {
  border-top: 1px solid var(--line);
}

.brain-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.75fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.brain-panel {
  padding: 20px;
}

.brain-count {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
}

.rule-list {
  display: grid;
  gap: 10px;
}

.rule-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.rule-card p {
  margin-bottom: 0;
  font-size: 0.88rem;
}

.rule-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.rule-actions span {
  color: var(--teal);
  font-size: 0.84rem;
  font-weight: 900;
}

.rule-actions .ghost-button {
  min-height: 34px;
  border-color: var(--line);
  padding: 0 10px;
  font-size: 0.78rem;
}

.wardrobe-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  padding: 20px;
}

.wardrobe-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.wardrobe-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 13px;
}

.wardrobe-metrics strong,
.wardrobe-metrics span {
  display: block;
}

.wardrobe-metrics strong {
  overflow: hidden;
  font-size: 1.12rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wardrobe-metrics span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
}

.wardrobe-map {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: 12px;
  align-items: start;
}

.wardrobe-coverage,
.wardrobe-gaps {
  display: grid;
  gap: 8px;
}

.wardrobe-coverage-row,
.wardrobe-gap-card,
.wardrobe-gaps-head {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.wardrobe-coverage-row {
  display: grid;
  gap: 9px;
  border-left: 4px solid var(--teal);
  padding: 10px;
}

.wardrobe-missing {
  border-left-color: var(--coral);
}

.wardrobe-thin {
  border-left-color: #ffbf47;
}

.wardrobe-coverage-row strong,
.wardrobe-coverage-row span,
.wardrobe-gaps-head strong,
.wardrobe-gaps-head span,
.wardrobe-gap-card strong,
.wardrobe-gap-card span {
  display: block;
}

.wardrobe-coverage-row span,
.wardrobe-gaps-head span,
.wardrobe-gap-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.wardrobe-bar {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: #dfe6e8;
}

.wardrobe-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.wardrobe-missing .wardrobe-bar span {
  background: var(--coral);
}

.wardrobe-thin .wardrobe-bar span {
  background: #ffbf47;
}

.wardrobe-gaps-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px;
}

.wardrobe-gaps-head strong {
  margin-top: 2px;
}

.wardrobe-gap-card {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
}

.wardrobe-gap-card img {
  width: 66px;
  height: 66px;
  border-radius: 8px;
  background: #edf1f3;
  object-fit: cover;
}

.wardrobe-gap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.wardrobe-gap-tags span {
  border-radius: 999px;
  background: #edf1f3;
  color: var(--muted);
  padding: 6px 8px;
  font-size: 0.7rem;
  font-weight: 850;
}

.wardrobe-empty {
  min-height: 126px;
}

.catalog-audit-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
  padding: 20px;
}

.catalog-audit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.catalog-audit-head h3 {
  margin-bottom: 0;
}

.catalog-audit-head .ghost-button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.catalog-audit-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.catalog-audit-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 13px;
}

.catalog-audit-metrics strong,
.catalog-audit-metrics span {
  display: block;
}

.catalog-audit-metrics strong {
  overflow: hidden;
  font-size: 1.12rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-audit-metrics span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
}

.catalog-audit-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.catalog-audit-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px;
}

.catalog-audit-block {
  border-left-color: var(--coral);
}

.catalog-audit-warn {
  border-left-color: #ffbf47;
}

.catalog-audit-row img {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: #edf1f3;
  object-fit: cover;
}

.catalog-audit-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.catalog-audit-row-head strong {
  display: block;
}

.catalog-audit-row-head span {
  color: var(--teal);
  font-size: 0.74rem;
  font-weight: 950;
}

.catalog-audit-row p {
  margin: 5px 0 0;
  color: #506063;
  font-size: 0.76rem;
  font-weight: 740;
  line-height: 1.4;
}

.catalog-audit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.catalog-audit-tags span {
  border-radius: 999px;
  background: #edf1f3;
  color: var(--muted);
  padding: 5px 7px;
  font-size: 0.66rem;
  font-weight: 850;
}

.catalog-audit-empty {
  min-height: 116px;
}

.inventory-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.item-form {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 86px;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.item-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.item-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.item-body {
  padding: 14px;
}

.item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.stock-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.stock-badge {
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 0.7rem;
  font-weight: 900;
}

.stock-available {
  background: rgba(103, 179, 70, 0.14);
  color: var(--green);
}

.stock-low {
  background: rgba(245, 200, 76, 0.18);
  color: #9a7200;
}

.stock-missing {
  background: rgba(232, 77, 91, 0.14);
  color: var(--coral);
}

.stock-owned {
  background: rgba(11, 143, 131, 0.13);
  color: var(--teal);
}

.product-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  padding: 0 10px;
  font-size: 0.74rem;
  font-weight: 900;
}

.mini-product-link {
  margin-top: 0;
  background: #edf1f3;
  color: var(--ink);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.pill {
  border-radius: 999px;
  background: #edf1f3;
  color: #4b4f54;
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 800;
}

.source-badge {
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 0.72rem;
  font-weight: 850;
}

.source-shop {
  background: rgba(47, 111, 237, 0.13);
  color: var(--blue);
}

.source-user {
  background: rgba(11, 143, 131, 0.13);
  color: var(--teal);
}

.trend-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.trend-lab {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.trend-form {
  position: sticky;
  top: 88px;
  padding: 20px;
}

.trend-form .field-grid {
  align-items: start;
}

.trend-workbench {
  display: grid;
  gap: 14px;
}

.trend-intel-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 18px;
}

.trend-intel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.trend-intel-head h3 {
  margin-bottom: 0;
}

.trend-intel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.market-trend-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.market-trend-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfb;
  padding: 12px;
}

.market-trend-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.market-trend-card strong {
  font-size: 0.92rem;
}

.market-trend-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.trend-brief-field {
  display: grid;
  gap: 8px;
}

.trend-brief-field textarea {
  min-height: 116px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
  color: var(--ink);
}

.trend-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.trend-metrics div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 13px;
}

.trend-metrics strong,
.trend-metrics span {
  display: block;
}

.trend-metrics strong {
  overflow: hidden;
  font-size: 1.08rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trend-metrics span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
}

.trend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.trend-card {
  display: grid;
  min-height: 220px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: var(--white);
}

.trend-card:nth-child(2) {
  border-top: 5px solid var(--coral);
}

.trend-card:nth-child(3) {
  border-top: 5px solid var(--yellow);
}

.trend-card:nth-child(4) {
  border-top: 5px solid var(--green);
}

.trend-card:first-child {
  border-top: 5px solid var(--teal);
}

.trend-card-expired {
  opacity: 0.64;
}

.trend-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.trend-card-head .ghost-button {
  min-height: 30px;
  border-color: var(--line);
  padding: 0 9px;
  font-size: 0.72rem;
}

.trend-score {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 850;
}

.trend-card h3 {
  margin-top: 4px;
}

.trend-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.trend-card-meta span {
  border-radius: 999px;
  background: #edf1f3;
  color: var(--muted);
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 850;
}

.history-band {
  border-bottom: 1px solid var(--line);
}

.lookbook-band {
  border-top: 1px solid var(--line);
}

.clients-band {
  border-top: 1px solid var(--line);
}

.report-band {
  border-top: 1px solid var(--line);
}

.lookbook-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.lookbook-panel {
  display: grid;
  gap: 14px;
  padding: 20px;
  position: sticky;
  top: 86px;
}

.lookbook-workbench {
  display: grid;
  gap: 14px;
}

.lookbook-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.lookbook-metrics div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 13px;
}

.lookbook-metrics strong,
.lookbook-metrics span {
  display: block;
}

.lookbook-metrics strong {
  font-size: 1.15rem;
}

.lookbook-metrics span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.look-card {
  display: grid;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 14px;
}

.look-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.look-card-head h3 {
  margin-bottom: 0;
}

.look-card-head > strong {
  white-space: nowrap;
}

.look-products {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.look-products div,
.look-products a {
  display: grid;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.look-products img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  background: #edf1f3;
}

.look-products span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
}

.look-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.look-stats span {
  border-radius: 8px;
  background: #edf1f3;
  padding: 8px;
  color: #3f474b;
  font-size: 0.75rem;
  font-weight: 850;
}

.look-script {
  display: grid;
  gap: 7px;
}

.look-script p {
  margin: 0;
  border-left: 4px solid var(--coral);
  border-radius: 4px;
  background: #fff2f3;
  padding: 8px 9px;
  color: #6a3037;
  font-size: 0.8rem;
}

.reservation-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 16px;
  scroll-margin-top: 104px;
}

.reservation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.reservation-head h3 {
  margin-bottom: 0;
}

.reservation-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.reservation-actions .ghost-button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.reservation-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.reservation-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 11px;
}

.reservation-metrics strong,
.reservation-metrics span {
  display: block;
}

.reservation-metrics strong {
  overflow: hidden;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reservation-metrics span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.reservation-list {
  display: grid;
  gap: 10px;
}

.reservation-empty {
  min-height: 118px;
}

.reservation-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1.2fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.reservation-card strong,
.reservation-card span {
  display: block;
}

.reservation-card > div > span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.reservation-card > div > .reservation-source-badge {
  width: fit-content;
  margin-top: 7px;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 0.68rem;
  line-height: 1.2;
}

.reservation-card > div > .reservation-source-reactivation {
  color: #075c50;
  background: #e1f8f2;
}

.reservation-card > div > .reservation-source-recovery {
  color: #775108;
  background: #fff3d5;
}

.reservation-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.reservation-card .ghost-button,
.reservation-card .primary-button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.reservation-card .ghost-button {
  border-color: var(--line);
}

.reservation-card .reservation-source-followup-action {
  border-color: #8ad6c8;
  color: #075c50;
}

.reservation-products {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reservation-products span {
  border-radius: 999px;
  background: #edf1f3;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.reservation-products a {
  color: var(--blue);
  font-weight: 950;
}

.order-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.order-head h3 {
  margin-bottom: 0;
}

.order-list {
  display: grid;
  gap: 10px;
}

.order-empty {
  min-height: 112px;
}

.order-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.order-card strong,
.order-card span {
  display: block;
}

.order-card > div > span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.order-card > div > .order-decision-speed {
  color: #7c4128;
  font-weight: 950;
}

.order-card-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.order-restore-action {
  border-color: rgba(154, 85, 53, 0.42);
  color: #7c4128;
}

.followup-panel {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.followup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.followup-head h3 {
  margin-bottom: 0;
}

.followup-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.followup-actions .ghost-button,
.followup-actions .primary-button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.followup-preview {
  display: grid;
  gap: 8px;
  border-left: 4px solid #2f8f74;
  border-radius: 4px;
  background: #f1faf6;
  padding: 12px 13px;
  color: #173b35;
}

.followup-preview p {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.55;
}

.followup-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.followup-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 11px;
}

.followup-metrics strong,
.followup-metrics span {
  display: block;
}

.followup-metrics strong {
  overflow: hidden;
  font-size: 1.02rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.followup-metrics span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.followup-history-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.followup-history-head h4 {
  margin: 0;
}

.followup-history {
  display: grid;
  gap: 9px;
}

.followup-empty {
  min-height: 104px;
}

.followup-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-left: 4px solid #2f8f74;
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.followup-card-silent {
  border-left-color: #ffbf47;
}

.followup-card-replied {
  border-left-color: var(--teal);
}

.followup-card-main {
  display: grid;
  gap: 8px;
}

.followup-card-main strong,
.followup-card-main span {
  display: block;
}

.followup-card-main span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.followup-card-main .followup-linked-state {
  width: fit-content;
  margin-top: 7px;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 0.68rem;
  line-height: 1.2;
}

.followup-card-main .followup-linked-reservation {
  color: #075c50;
  background: #e1f8f2;
}

.followup-card-main .followup-linked-sale {
  color: #775108;
  background: #fff3d5;
}

.followup-card-main p {
  margin: 0;
  color: #506063;
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.5;
}

.followup-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.followup-card-actions .ghost-button {
  min-height: 31px;
  padding: 0 9px;
  font-size: 0.72rem;
}

.followup-card-actions .followup-linked-open {
  border-color: #8ad6c8;
  color: #075c50;
}

.followup-card-actions .followup-linked-sale-open {
  border-color: #e5c577;
  color: #775108;
}

.clients-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.client-form {
  display: grid;
  gap: 14px;
  padding: 20px;
  position: sticky;
  top: 86px;
}

.client-workbench {
  display: grid;
  gap: 14px;
}

.client-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.client-metrics div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 13px;
}

.client-metrics strong,
.client-metrics span {
  display: block;
}

.client-metrics strong {
  font-size: 1.15rem;
}

.client-metrics span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.client-dossier-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 14px;
}

.client-dossier-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.client-dossier-head h3 {
  margin-bottom: 0;
}

.client-dossier-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.client-dossier-actions select {
  width: min(230px, 100%);
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 0 10px;
  color: var(--ink);
  font-size: max(1rem, 16px);
  font-weight: 850;
}

.client-dossier-actions .ghost-button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.client-dossier-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.client-dossier-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 11px;
}

.client-dossier-metrics strong,
.client-dossier-metrics span {
  display: block;
}

.client-dossier-metrics strong {
  overflow: hidden;
  font-size: 1.02rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-dossier-metrics span,
.client-dossier-profile span,
.client-dossier-risk span,
.client-product-card span,
.client-dossier-note span,
.client-message-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.client-dossier-body {
  display: grid;
  gap: 10px;
}

.client-dossier-main {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.client-risk-hot {
  border-left-color: var(--coral);
}

.client-risk-warm {
  border-left-color: #ffbf47;
}

.client-risk-good {
  border-left-color: var(--teal);
}

.client-dossier-profile {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(190px, 0.7fr);
  gap: 12px;
}

.client-dossier-profile strong,
.client-dossier-risk strong,
.client-product-card strong,
.client-dossier-note strong {
  display: block;
  margin-top: 3px;
}

.client-dossier-profile p,
.client-product-card p,
.client-dossier-note p,
.client-message-card p {
  margin: 6px 0 0;
  color: #506063;
  font-size: 0.82rem;
  font-weight: 740;
  line-height: 1.45;
}

.client-dossier-risk {
  border-radius: 8px;
  background: #edf1f3;
  padding: 10px;
}

.client-dossier-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) repeat(2, minmax(0, 0.8fr));
  gap: 9px;
}

.client-product-card,
.client-dossier-note,
.client-message-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 10px;
}

.client-reactivation-pause-controls {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.client-reactivation-last-status {
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.client-reactivation-open,
.client-reactivation-reservation,
.client-reactivation-sale {
  width: 100%;
  margin-top: 8px;
}

.client-recovery-prepare {
  width: 100%;
  margin-top: 10px;
}

.client-recovery-candidate-detail {
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.client-recovery-last-status {
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.client-recovery-open {
  width: 100%;
  margin-top: 8px;
}

.client-recovery-reservation {
  width: 100%;
  margin-top: 8px;
}

.client-reactivation-sale,
.client-recovery-sale {
  border-color: #e5c577;
  color: #775108;
}

.client-recovery-sale {
  width: 100%;
  margin-top: 8px;
}

.client-reservation-source {
  color: #0d766d;
  font-weight: 800;
}

.client-reservation-source-open {
  border-color: #89c7be;
  color: #0c665f;
}

.client-reactivation-pause-controls label {
  display: grid;
  gap: 5px;
}

.client-reactivation-pause-controls select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: max(1rem, 16px);
  font-weight: 750;
  padding: 6px 8px;
}

.client-relationship-timeline-card {
  grid-column: span 2;
}

.client-relationship-timeline {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
}

.client-relationship-timeline li {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 7px;
}

.client-relationship-timeline li > span {
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 850;
}

.client-relationship-timeline li strong {
  font-size: 0.78rem;
}

.client-relationship-timeline li p {
  margin-top: 2px;
  font-size: 0.74rem;
}

.client-relationship-timeline-open {
  margin-top: 6px;
  min-height: 30px;
  padding: 4px 7px;
  font-size: 0.7rem;
}

.campaign-attribution-note {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.45;
}

.client-product-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.client-product-card img {
  width: 62px;
  height: 62px;
  border-radius: 8px;
  background: #edf1f3;
  object-fit: cover;
}

.client-product-reserve {
  width: 100%;
  min-height: 34px;
  margin-top: 10px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.client-message-card {
  border-left: 4px solid var(--blue);
  background: #eef4ff;
}

.client-message-card p {
  color: #27436f;
}

.client-dossier-empty {
  min-height: 112px;
}

.sales-funnel-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 14px;
}

.sales-funnel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sales-funnel-head h3 {
  margin-bottom: 0;
}

.funnel-health {
  display: flex;
  justify-content: flex-end;
}

.funnel-health span {
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.72rem;
  font-weight: 950;
}

.funnel-health-neutral {
  background: #edf1f3;
  color: #39424a;
}

.funnel-health-warn {
  background: #fff5df;
  color: #8a5b00;
}

.funnel-health-hot {
  background: #fff2f3;
  color: #9e2431;
}

.funnel-health-good {
  background: #edf7f5;
  color: #1f6e64;
}

.sales-funnel-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.sales-funnel-stage {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 11px;
}

.funnel-stage-top,
.funnel-stage-bottom {
  display: grid;
  gap: 2px;
}

.funnel-stage-top span,
.funnel-stage-bottom span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
}

.funnel-stage-top strong {
  font-size: 1.28rem;
}

.funnel-stage-bottom strong {
  overflow: hidden;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funnel-stage-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4eaed;
}

.funnel-stage-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.sales-funnel-reservation .funnel-stage-bar span,
.sales-funnel-followups .funnel-stage-bar span {
  background: #ffbf47;
}

.sales-funnel-reservation-outcomes .funnel-stage-bar span {
  background: #d5654a;
}

.sales-funnel-reactivation .funnel-stage-bar span {
  background: #8764c7;
}

.sales-funnel-recovery .funnel-stage-bar span {
  background: #2c7f90;
}

.sales-funnel-sold .funnel-stage-bar span {
  background: var(--coral);
}

.sales-funnel-insight {
  display: grid;
  gap: 4px;
  border-left: 4px solid var(--teal);
  border-radius: 4px;
  background: #edf7f5;
  padding: 10px 11px;
  color: #2e5250;
}

.sales-funnel-insight strong,
.sales-funnel-insight p {
  margin: 0;
}

.sales-funnel-insight p {
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.5;
}

.action-queue-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 14px;
}

.action-queue-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.action-queue-head h3 {
  margin-bottom: 0;
}

.action-queue-head .ghost-button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.action-queue-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.action-queue-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 11px;
}

.action-queue-metrics strong,
.action-queue-metrics span {
  display: block;
}

.action-queue-metrics strong {
  font-size: 1.04rem;
}

.action-queue-metrics span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.action-queue-list {
  display: grid;
  gap: 9px;
}

.action-queue-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.action-queue-empty {
  min-height: 108px;
}

.queue-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-left: 4px solid #9aa7ad;
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.queue-card-hot {
  border-left-color: var(--coral);
}

.queue-card-warm {
  border-left-color: #ffbf47;
}

.queue-card-calm {
  border-left-color: var(--teal);
}

.action-card-main {
  display: grid;
  gap: 5px;
}

.action-card-main span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.action-card-main strong {
  font-size: 0.96rem;
}

.action-card-main p {
  margin: 0;
  color: #506063;
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.5;
}

.action-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.action-card-actions .ghost-button,
.action-card-actions .primary-button {
  min-height: 31px;
  padding: 0 9px;
  font-size: 0.72rem;
}

.client-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.pipeline-column {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  min-height: 260px;
  padding: 10px;
}

.pipeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.pipeline-head h3 {
  margin-bottom: 0;
}

.pipeline-head span {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  font-weight: 900;
}

.pipeline-priority-filter[aria-pressed="true"] {
  border-color: #0d6d66;
  background: #0d6d66;
  color: #fff;
}

.pipeline-list {
  display: grid;
  gap: 8px;
}

.pipeline-empty {
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--muted);
  font-size: 0.84rem;
}

.lead-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px;
}

.lead-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.lead-card-head strong,
.lead-card-head span {
  display: block;
}

.lead-card-head span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.lead-card p {
  margin: 0;
  font-size: 0.82rem;
}

.lead-priority {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #f0bb68;
  border-radius: 10px;
  background: rgba(240, 187, 104, 0.12);
  padding: 7px 8px 7px 10px;
  color: #875000;
  font-size: 0.73rem;
  font-weight: 800;
}

.lead-priority .ghost-button {
  min-height: 29px;
  border-color: currentColor;
  color: inherit;
  padding: 0 8px;
  font-size: 0.71rem;
}

.lead-priority-reactivation,
.lead-priority-recovery {
  border-color: #8ec7c1;
  background: rgba(142, 199, 193, 0.14);
  color: #0d6d66;
}

.lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lead-actions .ghost-button {
  min-height: 32px;
  border-color: var(--line);
  padding: 0 9px;
  font-size: 0.74rem;
}

.lead-actions .lead-dossier-button {
  border-color: #8ec7c1;
  color: #0d6d66;
}

.won-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border-radius: 8px;
  background: rgba(103, 179, 70, 0.14);
  color: var(--green);
  padding: 0 9px;
  font-size: 0.74rem;
  font-weight: 900;
}

.report-layout {
  display: grid;
  grid-template-columns: 0.86fr 1.2fr 0.94fr;
  gap: 16px;
  align-items: start;
}

.report-panel {
  padding: 20px;
}

.campaign-panel {
  grid-column: 1 / -1;
}

.demand-panel {
  grid-column: 1 / -1;
}

.restock-panel {
  grid-column: 1 / -1;
}

.report-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.report-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 13px;
}

.report-metrics strong,
.report-metrics span {
  display: block;
}

.report-metrics strong {
  font-size: 1.25rem;
}

.report-metrics span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.product-report-list,
.action-report-list {
  display: grid;
  gap: 10px;
}

.product-signal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.product-signal-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 11px;
}

.product-signal-metrics strong,
.product-signal-metrics span {
  display: block;
}

.product-signal-metrics strong {
  overflow: hidden;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-signal-metrics span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.product-signal-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.product-signal-empty {
  min-height: 104px;
}

.product-signal-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 4px solid #ffbf47;
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px;
}

.product-signal-row img {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: #edf1f3;
  object-fit: cover;
}

.product-signal-row strong,
.product-signal-row span {
  display: block;
}

.product-signal-row > div > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.product-signal-bar {
  overflow: hidden;
  height: 5px;
  margin-top: 7px;
  border-radius: 999px;
  background: #dfe6e8;
}

.product-signal-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.product-signal-score {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.restock-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.restock-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 11px;
}

.restock-metrics strong,
.restock-metrics span {
  display: block;
}

.restock-metrics strong {
  overflow: hidden;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.restock-metrics span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.restock-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.restock-empty {
  min-height: 104px;
}

.restock-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px;
}

.restock-missing,
.restock-hot {
  border-left-color: var(--coral);
}

.restock-warn {
  border-left-color: #ffbf47;
}

.restock-row img {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: #edf1f3;
  object-fit: cover;
}

.restock-row strong,
.restock-row span {
  display: block;
}

.restock-row > div > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.restock-row > strong {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.restock-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.restock-tags span {
  border-radius: 999px;
  background: #edf1f3;
  color: var(--muted);
  padding: 6px 8px;
  font-size: 0.7rem;
  font-weight: 850;
}

.campaign-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.campaign-actions .ghost-button,
.campaign-actions .primary-button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.campaign-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.campaign-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 11px;
}

.campaign-metrics strong,
.campaign-metrics span {
  display: block;
}

.campaign-metrics strong {
  overflow: hidden;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-metrics span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.campaign-segment {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.campaign-segment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.campaign-segment-head span,
.campaign-segment-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.campaign-segment-head strong,
.campaign-segment-card strong {
  display: block;
  margin-top: 3px;
}

.campaign-segment-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.campaign-segment-list > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #506063;
  font-size: 0.84rem;
  font-weight: 760;
}

.campaign-segment-card {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  padding: 10px;
}

.campaign-segment-card p {
  margin: 0;
  color: #506063;
  font-size: 0.78rem;
  font-weight: 730;
  line-height: 1.45;
}

.campaign-grid {
  display: grid;
  grid-template-columns: 1.05fr repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.campaign-brief,
.campaign-copy-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 13px;
}

.campaign-brief {
  border-left: 4px solid var(--teal);
}

.campaign-copy-card {
  border-left: 4px solid #ffbf47;
}

.campaign-brief span,
.campaign-copy-card span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.campaign-brief strong,
.campaign-copy-card strong {
  display: block;
  margin-top: 3px;
}

.campaign-brief p,
.campaign-copy-card p {
  margin: 0;
  color: #506063;
  font-size: 0.82rem;
  font-weight: 730;
  line-height: 1.5;
}

.campaign-brief ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.campaign-brief li {
  color: #506063;
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.45;
}

.campaign-history-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.campaign-history-head h4 {
  margin: 0;
}

.campaign-history-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.campaign-history-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 11px;
}

.campaign-history-metrics strong,
.campaign-history-metrics span {
  display: block;
}

.campaign-history-metrics strong {
  overflow: hidden;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-history-metrics span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.campaign-history {
  display: grid;
  gap: 9px;
}

.campaign-history-empty {
  min-height: 104px;
}

.campaign-history-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}

.campaign-history-closed {
  border-left-color: #9aa7ad;
}

.campaign-history-main {
  display: grid;
  gap: 8px;
}

.campaign-history-main strong,
.campaign-history-main span {
  display: block;
}

.campaign-history-main > div > span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.campaign-history-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.campaign-history-stats span {
  border-radius: 999px;
  background: #edf1f3;
  color: var(--muted);
  padding: 6px 8px;
  font-size: 0.72rem;
  font-weight: 850;
}

.campaign-history-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.campaign-history-actions .ghost-button {
  min-height: 31px;
  padding: 0 9px;
  font-size: 0.72rem;
}

.product-report-row {
  display: grid;
  grid-template-columns: 34px 62px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px;
}

.report-rank {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  font-weight: 900;
}

.product-report-row img {
  width: 62px;
  height: 62px;
  border-radius: 8px;
  object-fit: cover;
  background: #edf1f3;
}

.product-report-row strong,
.product-report-row span {
  display: block;
}

.product-report-row span,
.report-row-stats span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.report-bar {
  overflow: hidden;
  height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  background: #e0e6e8;
}

.report-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.report-row-stats {
  min-width: 72px;
  text-align: right;
}

.report-row-stats strong {
  font-size: 1.15rem;
}

.action-card {
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 8px;
  background: var(--white);
  padding: 14px;
}

.action-card h3 {
  margin-bottom: 7px;
}

.action-card p {
  margin-bottom: 0;
  font-size: 0.88rem;
}

.action-hot {
  border-left-color: var(--coral);
}

.action-warn {
  border-left-color: var(--yellow);
}

.action-good {
  border-left-color: var(--green);
}

.action-neutral {
  border-left-color: var(--teal);
}

.style-memory-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.style-memory-metrics div {
  border-radius: 8px;
  background: #edf1f3;
  padding: 13px;
}

.style-memory-metrics strong,
.style-memory-metrics span {
  display: block;
}

.style-memory-metrics strong {
  overflow: hidden;
  font-size: 1.08rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-memory-metrics span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
}

.history-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 16px;
  align-items: start;
}

.history-block {
  display: grid;
  gap: 12px;
}

.history-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.history-block-head h3 {
  margin: 0;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.history-card,
.empty-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.history-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
}

.empty-card {
  grid-column: 1 / -1;
  min-height: 154px;
  padding: 22px;
}

.history-score {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  font-size: 1.65rem;
  font-weight: 900;
}

.saved-look-grid {
  display: grid;
  gap: 12px;
}

.saved-look-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid #ffbf47;
  border-radius: 8px;
  background: var(--white);
  padding: 14px;
}

.saved-look-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.saved-look-head h3 {
  margin: 4px 0 0;
}

.saved-look-head span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
}

.saved-look-head .trend-score {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 0;
  color: var(--white);
}

.saved-look-head > strong {
  white-space: nowrap;
}

.saved-look-products {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.saved-look-products div,
.saved-look-products a {
  display: grid;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.saved-look-products img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #edf1f3;
  object-fit: cover;
}

.saved-look-products span {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 850;
  line-height: 1.2;
}

.saved-look-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.saved-look-stats span {
  border-radius: 999px;
  background: #edf1f3;
  color: var(--muted);
  padding: 6px 8px;
  font-size: 0.72rem;
  font-weight: 850;
}

.saved-look-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}

.saved-look-actions button,
.saved-look-actions .ghost-button {
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  font-size: 0.72rem;
}

.business-band {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 20px;
  padding: 62px 0 74px;
}

.business-copy {
  padding-top: 12px;
}

.business-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.business-steps article {
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: var(--white);
}

.business-steps span {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 38px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  font-weight: 900;
}

@media (min-width: 1120px) {
  body {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
  }

  .app-shell {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow: auto;
    border-right: 1px solid rgba(21, 21, 21, 0.1);
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.94);
  }

  .topbar {
    width: auto;
    min-height: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    padding: 18px 14px;
  }

  .brand {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 2px 10px;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding-bottom: 16px;
  }

  .brand-mark {
    grid-row: 1 / span 2;
  }

  .brand small {
    display: block;
    grid-column: 2;
  }

  .topbar-actions {
    display: grid;
    gap: 4px;
    align-items: stretch;
    margin-top: 6px;
  }

  .topbar-actions a {
    display: block;
    border-radius: 8px;
    padding: 10px 11px;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 850;
  }

  .topbar-actions a:hover,
  .topbar-actions a:focus-visible,
  .topbar-actions a.active {
    background: #edf1f3;
  }

  .topbar-actions a.active {
    box-shadow: inset 4px 0 0 var(--teal);
  }

  .brand.active {
    background: transparent;
  }

  .command-button {
    width: 100%;
  }

  .topbar-switches {
    display: grid;
    gap: 9px;
    margin-top: auto;
  }

  .locale-switch,
  .market-switch {
    justify-content: space-between;
  }

  .locale-switch select,
  .market-switch select {
    min-width: 82px;
  }

  .app-status {
    display: grid;
    gap: 2px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--teal);
    border-radius: 8px;
    background: #f9fbfb;
    padding: 11px;
  }

  .app-status span {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  .app-status strong {
    font-size: 0.88rem;
  }

  main {
    min-width: 0;
    padding: 18px 20px 44px;
  }

  .studio-band,
  .content-band,
  .business-band {
    width: 100%;
    max-width: none;
    scroll-margin-top: 18px;
  }

  .studio-band {
    padding: 0 0 18px;
  }

  .studio-grid {
    grid-template-columns: 260px minmax(330px, 390px) minmax(430px, 1fr);
    grid-template-rows: auto auto;
    gap: 14px;
    align-items: start;
  }

  .intro-panel {
    grid-column: 1;
    min-height: auto;
    justify-content: flex-start;
    padding: 14px;
    background: var(--white);
    color: var(--ink);
  }

  .intro-panel .eyebrow {
    color: var(--coral);
  }

  .intro-panel p {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.42;
  }

  .intro-panel h1 {
    margin-bottom: 8px;
    font-size: 1.26rem;
    line-height: 1.08;
  }

  .quick-stats {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 10px;
  }

  .quick-stats div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    border: 1px solid var(--line);
    background: #f9fbfb;
    padding: 7px 8px;
  }

  .quick-stats strong {
    font-size: 0.98rem;
  }

  .quick-stats span {
    color: var(--muted);
    font-size: 0.68rem;
  }

  .controls-panel {
    grid-column: 1;
  }

  .photo-panel {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 0;
  }

  .recommendation-panel {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .upload-zone {
    height: 188px;
  }

  .content-band {
    border-top: 1px solid var(--line);
    padding: 22px 0;
  }

  .section-head {
    margin-bottom: 14px;
  }

  .section-head h2 {
    font-size: 1.45rem;
  }

  .business-band {
    border-top: 1px solid var(--line);
    padding: 24px 0 30px;
  }
}

@media (max-width: 980px) {
  .studio-grid,
  .passport-layout,
  .coach-layout,
  .fit-layout,
  .planner-layout,
  .capsule-layout,
  .discover-layout,
  .discover-card,
  .brain-layout,
  .wardrobe-map,
  .inventory-layout,
  .lookbook-layout,
  .clients-layout,
  .client-dossier-profile,
  .client-dossier-grid,
  .report-layout,
  .history-layout,
  .trend-lab,
  .business-band {
    grid-template-columns: 1fr;
  }

  .inventory-grid,
  .passport-products,
  .coach-items,
  .fit-alternative-grid,
  .trend-grid,
  .market-trend-preview,
  .lookbook-grid,
  .sales-funnel-grid,
  .catalog-audit-list,
  .product-signal-list,
  .restock-list,
  .campaign-grid,
  .client-pipeline,
  .history-grid,
  .business-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .item-form,
  .passport-panel,
  .coach-panel,
  .fit-panel,
  .planner-panel,
  .capsule-panel,
  .lookbook-panel,
  .client-form,
  .trend-form {
    position: static;
  }

  .capsule-board-panel,
  .capsule-outfits-panel,
  .capsule-history-panel {
    grid-column: auto;
  }

  .passport-card-panel,
  .passport-products-panel,
  .size-passport-panel,
  .passport-history-panel,
  .coach-answer-panel,
  .coach-history-panel,
  .fit-result-panel,
  .fit-history-panel {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  body {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  .app-shell {
    position: static;
  }

  .topbar {
    align-items: flex-start;
    min-height: 84px;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }

  .topbar-actions {
    display: none;
  }

  .mobile-dock {
    position: fixed;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    z-index: 30;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(72px, 1fr);
    gap: 6px;
    overflow-x: auto;
    border: 1px solid rgba(21, 21, 21, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 42px rgba(18, 22, 27, 0.2);
    padding: 6px;
    scrollbar-width: none;
    backdrop-filter: blur(14px);
  }

  .mobile-dock::-webkit-scrollbar {
    display: none;
  }

  .mobile-dock a {
    display: grid;
    place-items: center;
    min-height: 42px;
    border-radius: 6px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
  }

  .mobile-dock a:focus-visible,
  .mobile-dock a.active {
    background: var(--ink);
    color: var(--white);
  }

  .mobile-dock a.active {
    box-shadow: inset 0 4px 0 var(--teal);
  }

  .quick-action-button {
    right: 18px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
    font-size: 1.85rem;
  }

  .quick-action-sheet {
    align-items: end;
    justify-items: stretch;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .quick-action-panel {
    max-height: min(72vh, 620px);
    overflow: auto;
  }

  .quick-action-grid {
    grid-template-columns: 1fr;
  }

  .quick-action-grid button {
    min-height: 72px;
  }

  .command-button {
    width: 100%;
  }

  .topbar-switches {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .locale-switch,
  .market-switch {
    min-width: 0;
    justify-content: space-between;
  }

  .locale-switch select,
  .market-switch select {
    min-width: 0;
  }

  .command-palette {
    align-items: stretch;
    padding: 10px;
  }

  .command-panel {
    align-self: start;
  }

  .command-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .command-row kbd {
    width: fit-content;
  }

  .studio-band,
  .content-band,
  .business-band {
    width: min(100% - 22px, 1180px);
    scroll-margin-top: 148px;
  }

  .reservation-panel {
    scroll-margin-top: 156px;
  }

  .intro-panel {
    min-height: auto;
    padding: 18px;
  }

  h1 {
    font-size: 1.72rem;
  }

  .quick-stats,
  .field-grid,
  .field-grid.two,
  .passport-metrics,
  .passport-products,
  .size-passport-metrics,
  .size-passport-map,
  .coach-metrics,
  .coach-items,
  .fit-metrics,
  .fit-alternative-grid,
  .planner-metrics,
  .planner-outfit,
  .capsule-metrics,
  .capsule-items,
  .capsule-outfits,
  .discover-meta,
  .discover-metrics,
  .inventory-grid,
  .trend-grid,
  .market-trend-preview,
  .trend-metrics,
  .taste-metrics,
  .repair-metrics,
  .wardrobe-metrics,
  .catalog-audit-metrics,
  .reservation-metrics,
  .followup-metrics,
  .action-queue-metrics,
  .lookbook-grid,
  .lookbook-metrics,
  .sales-funnel-grid,
  .client-metrics,
  .client-dossier-metrics,
  .client-pipeline,
  .report-metrics,
  .campaign-metrics,
  .campaign-history-metrics,
  .product-signal-metrics,
  .restock-metrics,
  .style-memory-metrics,
  .campaign-segment-list,
  .catalog-audit-list,
  .product-signal-list,
  .restock-list,
  .campaign-grid,
  .business-steps {
    grid-template-columns: 1fr;
  }

  .planner-panel .field-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .passport-panel .field-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .size-passport-panel .field-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .size-passport-panel .field-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coach-panel .field-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fit-panel .field-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .size-measurement-guide-card {
    grid-template-columns: 1fr;
  }

  .photo-capture-card {
    grid-template-columns: 1fr;
  }

  .photo-capture-card img {
    width: 100%;
    max-height: 190px;
  }

  .capture-field-grid {
    grid-template-columns: 1fr;
  }

  .passport-panel {
    margin-bottom: 118px;
    padding-bottom: 48px;
  }

  .coach-panel {
    margin-bottom: 136px;
    padding: 12px;
    gap: 8px;
  }

  body[data-view="coach"] .coach-panel .panel-head {
    display: none;
  }

  body[data-view="coach"] .coach-panel input,
  body[data-view="coach"] .coach-panel select {
    min-height: 38px;
  }

  body[data-view="coach"] #coachPromptInput {
    min-height: 76px;
  }

  #passportAvoidInput {
    width: calc(100% - 72px);
  }

  .passport-product-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .passport-product-card .product-link {
    grid-column: 2;
    width: fit-content;
  }

  .coach-item-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .coach-item-card img {
    width: 54px;
    height: 54px;
  }

  .coach-item-card .product-link {
    grid-column: 2;
    width: fit-content;
  }

  body[data-view="coach"] .quick-action-button,
  body[data-view="fit"] .quick-action-button {
    display: none;
  }

  body[data-view="coach"] .coach-panel {
    max-height: none;
    overflow: visible;
  }

  .fit-panel {
    margin-bottom: 118px;
    padding: 12px;
    gap: 8px;
  }

  .fit-alt-card {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .fit-alt-card img {
    width: 54px;
    height: 54px;
  }

  .fit-alt-card .product-link {
    grid-column: 2;
    width: fit-content;
  }

  .capsule-panel .field-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planner-panel {
    margin-bottom: 118px;
  }

  .capsule-panel {
    margin-bottom: 118px;
  }

  .capsule-item {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .capsule-item .product-link {
    grid-column: 2;
    width: fit-content;
  }

  .capsule-outfit-items span {
    grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
  }

  .discover-card {
    min-height: 0;
  }

  .discover-media {
    min-height: 190px;
    height: 190px;
  }

  .discover-body {
    gap: 10px;
    padding: 14px;
  }

  .discover-body h3 {
    font-size: 1.32rem;
  }

  .discover-tags span {
    padding: 6px 8px;
  }

  .discover-product-link {
    order: 3;
  }

  .discover-tags {
    order: 4;
    margin-top: 184px;
  }

  .discover-reasons {
    order: 5;
  }

  .discover-reasons p {
    padding: 8px 9px;
  }

  .discover-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intro-panel .quick-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
  }

  .intro-panel .quick-stats div {
    padding: 8px;
  }

  .intro-panel .quick-stats strong {
    font-size: 1rem;
  }

  .intro-panel .quick-stats span {
    font-size: 0.64rem;
    line-height: 1.2;
  }

  .product-report-row {
    grid-template-columns: 34px 54px minmax(0, 1fr);
  }

  .reservation-card {
    grid-template-columns: 1fr;
  }

  .reservation-card-actions {
    justify-content: stretch;
  }

  .reservation-card-actions button,
  .order-card,
  .client-dossier-actions,
  .client-dossier-actions select,
  .client-dossier-actions button {
    width: 100%;
  }

  .order-card {
    grid-template-columns: 1fr;
  }

  .followup-card {
    grid-template-columns: 1fr;
  }

  .followup-card-actions {
    justify-content: stretch;
  }

  .followup-card-actions button {
    flex: 1 1 120px;
  }

  .campaign-history-card {
    grid-template-columns: 1fr;
  }

  .campaign-history-actions {
    justify-content: stretch;
  }

  .campaign-history-actions button {
    flex: 1 1 120px;
  }

  .saved-look-head {
    grid-template-columns: 1fr;
  }

  .saved-look-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saved-look-actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .saved-look-actions button {
    width: 100%;
  }

  .action-queue-head,
  .sales-funnel-head,
  .campaign-actions,
  .campaign-history-head,
  .recommendation-actions,
  .catalog-audit-head,
  .history-block-head,
  .campaign-segment-head,
  .queue-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .action-queue-head,
  .sales-funnel-head,
  .campaign-actions,
  .campaign-history-head,
  .recommendation-actions,
  .history-block-head,
  .campaign-segment-head {
    flex-direction: column;
  }

  .funnel-health {
    justify-content: flex-start;
  }

  .action-card-actions {
    justify-content: stretch;
  }

  .action-card-actions button {
    flex: 1 1 120px;
  }

  .followup-head {
    align-items: stretch;
    flex-direction: column;
  }

  .followup-actions {
    justify-content: stretch;
  }

  .followup-actions button {
    flex: 1 1 130px;
  }

  .report-row-stats {
    grid-column: 3;
    text-align: left;
  }

  .section-head,
  .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-actions,
  .csv-actions {
    width: 100%;
  }

  .segmented {
    width: 100%;
  }

  .segmented button {
    flex: 1;
    min-width: 0;
  }

  .csv-actions .ghost-button {
    flex: 1;
    min-width: 0;
  }

  .outfit-summary,
  .history-grid {
    grid-template-columns: 1fr;
  }

  .rule-card {
    grid-template-columns: 1fr;
  }

  .rule-actions {
    justify-items: start;
  }

  .score-wrap {
    grid-template-columns: 1fr;
  }
}

/* Native app shell reset: StyleBrain should read as an iOS/Android app, not a website. */
:root {
  --app-width: min(100vw, 460px);
  --app-bg: #f3f6f1;
  --app-surface: rgba(255, 255, 252, 0.94);
  --app-ink: #101114;
  --app-muted: #71747b;
  --app-line: rgba(16, 17, 20, 0.1);
  --app-lime: #c8ff4d;
  --app-rouge: #ff4f6d;
  --app-blue: #3d63ff;
  --app-gold: #e0b238;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --topbar-height: 74px;
  --dock-height: 78px;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 50% 0 / 22px 22px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 50% 0 / 22px 22px,
    #090a0d;
  color: var(--app-ink);
}

body::before {
  content: "";
  position: fixed;
  top: 10px;
  bottom: 10px;
  left: 50%;
  z-index: 0;
  width: var(--app-width);
  max-width: calc(100vw - 16px);
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 34px;
  background: var(--app-bg);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
  transform: translateX(-50%);
}

.app-shell {
  position: fixed;
  top: 10px;
  right: 0;
  left: 0;
  z-index: 34;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.topbar {
  width: var(--app-width);
  max-width: calc(100vw - 16px);
  min-height: calc(var(--topbar-height) + var(--safe-top));
  margin: 0 auto;
  border-radius: 32px 32px 18px 18px;
  background: rgba(9, 10, 13, 0.93);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
  padding: calc(10px + var(--safe-top)) 12px 10px;
  gap: 8px;
}

.brand {
  min-width: 0;
  gap: 9px;
  color: #fffefa;
}

.brand > span:not(.brand-mark) {
  overflow: hidden;
  max-width: 112px;
  font-size: 0.98rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand small {
  display: block;
  color: rgba(255, 255, 250, 0.52);
  font-size: 0.58rem;
  line-height: 1;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(200, 255, 77, 0.38);
  border-radius: 15px;
  background: var(--app-lime);
  color: #101114;
  font-size: 0.82rem;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
}

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

.command-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 250, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 250, 0.1);
  color: transparent;
  padding: 0;
}

.command-button::before {
  content: "";
  display: grid;
  place-items: center;
  color: #fffefa;
  font-size: 1.25rem;
  line-height: 1;
}

.topbar-switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(54px, 1fr));
  width: min(150px, 38vw);
  gap: 6px;
}

.locale-switch,
.market-switch {
  display: block;
  min-width: 0;
}

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

.locale-switch select,
.market-switch select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 250, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 250, 0.1);
  color: #fffefa;
  padding: 0 8px;
  text-align: center;
}

main {
  position: fixed;
  inset: calc(10px + var(--topbar-height) + var(--safe-top)) 0 calc(10px + var(--dock-height) + var(--safe-bottom)) 0;
  z-index: 2;
  display: grid;
  justify-items: center;
  overflow: hidden;
}

.studio-band,
.content-band,
.business-band {
  width: var(--app-width);
  max-width: calc(100vw - 16px);
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 0 0 26px 26px;
  padding: 10px 10px 26px;
  scroll-margin-top: 0;
  scrollbar-width: none;
}

.studio-band::-webkit-scrollbar,
.content-band::-webkit-scrollbar,
.business-band::-webkit-scrollbar {
  display: none;
}

.studio-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.photo-panel {
  order: 1;
}

.recommendation-panel {
  order: 2;
}

.controls-panel {
  order: 3;
}

.intro-panel {
  order: 4;
}

.panel,
.passport-panel,
.coach-panel,
.fit-panel,
.planner-panel,
.capsule-panel,
.lookbook-panel,
.report-panel,
.campaign-panel,
.demand-panel,
.restock-panel,
.wardrobe-panel,
.catalog-audit-panel,
.passport-card-panel,
.passport-products-panel,
.passport-history-panel,
.coach-answer-panel,
.coach-history-panel,
.fit-result-panel,
.fit-history-panel,
.planner-result-panel,
.planner-history-panel,
.capsule-board-panel,
.capsule-outfits-panel,
.capsule-history-panel,
.discover-card-panel,
.discover-side-panel,
.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,
.brain-panel,
.trend-intel-panel,
.reservation-panel,
.followup-panel,
.client-dossier-panel,
.sales-funnel-panel,
.action-queue-panel {
  border: 1px solid var(--app-line);
  border-radius: 24px;
  background: var(--app-surface);
  box-shadow: 0 10px 28px rgba(16, 17, 20, 0.08);
}

.photo-panel,
.controls-panel,
.recommendation-panel,
.item-form {
  padding: 12px;
}

.section-head {
  position: sticky;
  top: -10px;
  z-index: 4;
  margin: -10px -10px 10px;
  border-bottom: 1px solid rgba(16, 17, 20, 0.08);
  background: rgba(243, 246, 241, 0.92);
  padding: 12px 12px 10px;
  backdrop-filter: blur(16px);
}

.section-head h2,
.panel-head h2,
.panel-head h3 {
  font-size: 1.05rem;
  line-height: 1.1;
}

.eyebrow {
  color: var(--app-rouge);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

h1 {
  font-size: 1.35rem;
  line-height: 1.08;
}

h2 {
  font-size: 1.18rem;
  line-height: 1.08;
}

p {
  color: var(--app-muted);
}

.upload-zone {
  height: min(56vh, 520px);
  min-height: 330px;
  border-radius: 22px;
  background: #111318;
}

.upload-zone::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 250, 0.42);
  border-radius: 17px;
  pointer-events: none;
}

.upload-zone span {
  right: 16px;
  bottom: 16px;
  border: 1px solid rgba(16, 17, 20, 0.1);
  border-radius: 999px;
  background: var(--app-lime);
  color: #101114;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.score-wrap {
  grid-template-columns: 82px minmax(0, 1fr);
  border-radius: 22px;
  background: #101114;
  padding: 12px;
}

.score-wrap h3,
.score-wrap p {
  color: #fffefa;
}

.score-wrap p {
  opacity: 0.68;
}

.score-ring {
  width: 82px;
  height: 82px;
  background:
    radial-gradient(circle at center, #101114 57%, transparent 58%),
    conic-gradient(var(--app-lime) 0deg 310deg, rgba(255, 255, 250, 0.18) 310deg 360deg);
  color: #fffefa;
}

.vision-panel,
.repair-panel,
.taste-panel {
  border-top: 1px solid rgba(16, 17, 20, 0.08);
}

.photo-capture-card,
.photo-capture-editor,
.vision-signals article,
.quick-stats div,
.outfit-summary div {
  border-radius: 18px;
}

.field-grid,
.field-grid.two,
.field-grid.four,
.passport-metrics,
.passport-products,
.size-passport-metrics,
.size-passport-map,
.coach-metrics,
.coach-items,
.fit-metrics,
.fit-alternative-grid,
.planner-metrics,
.planner-outfit,
.capsule-metrics,
.capsule-items,
.capsule-outfits,
.discover-meta,
.discover-metrics,
.inventory-grid,
.trend-grid,
.market-trend-preview,
.trend-metrics,
.taste-metrics,
.repair-metrics,
.wardrobe-metrics,
.catalog-audit-metrics,
.reservation-metrics,
.followup-metrics,
.action-queue-metrics,
.lookbook-grid,
.lookbook-metrics,
.sales-funnel-grid,
.client-metrics,
.client-dossier-metrics,
.client-pipeline,
.report-metrics,
.campaign-metrics,
.campaign-history-metrics,
.product-signal-metrics,
.restock-metrics,
.style-memory-metrics,
.campaign-segment-list,
.catalog-audit-list,
.product-signal-list,
.restock-list,
.campaign-grid,
.business-steps {
  grid-template-columns: 1fr;
}

.quick-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.community-band {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.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;
  gap: 12px;
  padding: 12px;
}

.circle-identity-form {
  display: grid;
  gap: 10px;
}

.circle-identity-form textarea {
  min-height: 86px;
  resize: vertical;
}

.circle-identity-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 250, 0.9), rgba(200, 255, 77, 0.28)),
    #fffefa;
  padding: 10px;
}

.circle-avatar {
  display: grid;
  place-items: center;
  min-height: 78px;
  border-radius: 18px;
  background: #101114;
  color: #fffefa;
  font-size: 1rem;
  font-weight: 950;
}

.circle-identity-main {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.circle-identity-main strong {
  display: block;
  overflow: hidden;
  color: #101114;
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.circle-identity-main span,
.circle-identity-main p {
  color: var(--app-muted);
  font-size: 0.72rem;
}

.circle-identity-main p {
  margin: 0;
  line-height: 1.35;
}

.circle-identity-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.circle-identity-stats span {
  border-radius: 14px;
  background: rgba(16, 17, 20, 0.06);
  padding: 7px;
}

.circle-identity-stats strong {
  font-size: 0.86rem;
}

.circle-rooms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.circle-rooms button {
  display: grid;
  gap: 4px;
  min-height: 58px;
  border: 1px solid rgba(16, 17, 20, 0.08);
  border-radius: 18px;
  background: rgba(16, 17, 20, 0.04);
  color: #101114;
  padding: 10px;
  text-align: left;
}

.circle-rooms button.active {
  border-color: rgba(16, 17, 20, 0.28);
  background: #101114;
  color: #fffefa;
}

.circle-rooms strong {
  font-size: 0.84rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
  white-space: normal;
}

.circle-rooms span {
  color: var(--app-muted);
  font-size: 0.66rem;
}

.circle-rooms button.active span {
  color: rgba(255, 255, 250, 0.62);
}

.circle-room-insight {
  display: grid;
  gap: 3px;
  border-radius: 18px;
  background: rgba(200, 255, 77, 0.24);
  padding: 10px;
}

.circle-room-insight strong {
  color: #101114;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.circle-room-insight span {
  color: var(--app-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.social-share-panel textarea {
  min-height: 118px;
  resize: vertical;
}

.social-share-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.social-share-actions button {
  width: 100%;
}

.social-share-preview {
  display: grid;
  gap: 10px;
}

.social-card-preview {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(16, 17, 20, 0.1);
  border-radius: 22px;
  background: #101114;
  color: #fffefa;
  padding: 8px;
}

.social-card-media {
  position: relative;
  overflow: hidden;
  min-height: 158px;
  border-radius: 17px;
  background: #23262d;
}

.social-card-media img {
  width: 100%;
  height: 100%;
  min-height: 158px;
  object-fit: cover;
}

.social-card-media span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  border-radius: 999px;
  background: var(--app-lime);
  color: #101114;
  padding: 5px 8px;
  font-size: 0.62rem;
  font-weight: 900;
}

.social-card-copy {
  display: grid;
  min-width: 0;
  gap: 8px;
  align-content: start;
}

.social-card-copy strong,
.community-post-head strong {
  color: inherit;
  font-size: 0.95rem;
}

.social-card-copy span,
.community-post-head span,
.community-post-stats {
  color: rgba(255, 255, 250, 0.62);
  font-size: 0.68rem;
}

.social-card-copy p {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 250, 0.86);
  font-size: 0.78rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.community-challenge,
.community-leaderboard {
  display: grid;
  gap: 8px;
}

.community-challenge-card {
  display: grid;
  gap: 10px;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(200, 255, 77, 0.92), rgba(255, 79, 109, 0.12) 62%),
    #15171c;
  color: #101114;
  padding: 12px;
}

.community-challenge-card span,
.community-challenge-prize span,
.community-leaderboard-title {
  display: block;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.community-challenge-card strong {
  display: block;
  margin-top: 3px;
  font-size: 1.04rem;
  line-height: 1.1;
}

.community-challenge-card p {
  margin-top: 6px;
  color: rgba(16, 17, 20, 0.72);
  font-size: 0.82rem;
}

.community-challenge-prize {
  border-top: 1px solid rgba(16, 17, 20, 0.12);
  padding-top: 10px;
}

.community-challenge-card .primary-button {
  width: 100%;
  background: #101114;
  color: #fffefa;
}

.community-leaderboard {
  border: 1px solid rgba(16, 17, 20, 0.08);
  border-radius: 18px;
  background: rgba(16, 17, 20, 0.035);
  padding: 10px;
}

.community-leaderboard-title {
  color: var(--app-rouge);
}

.community-leaderboard p {
  margin: 0;
  font-size: 0.78rem;
}

.community-leader-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border-top: 1px solid rgba(16, 17, 20, 0.08);
  padding-top: 8px;
}

.community-leader-row strong {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #101114;
  color: #fffefa;
  font-size: 0.72rem;
}

.community-leader-row span {
  min-width: 0;
  overflow: hidden;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-leader-row em {
  color: var(--app-muted);
  font-size: 0.68rem;
  font-style: normal;
  white-space: nowrap;
}

.community-battle,
.community-battle-history {
  display: grid;
  gap: 8px;
}

.community-battle-card,
.community-battle-empty {
  display: grid;
  gap: 12px;
  overflow: hidden;
  border-radius: 22px;
  background: #101114;
  color: #fffefa;
  padding: 10px;
}

.community-battle-empty {
  background:
    linear-gradient(145deg, rgba(61, 99, 255, 0.2), rgba(255, 79, 109, 0.18)),
    #101114;
}

.community-battle-empty h3,
.community-battle-empty p {
  color: #fffefa;
}

.community-battle-empty p {
  opacity: 0.68;
}

.community-battle-prompt {
  display: grid;
  gap: 3px;
}

.community-battle-prompt span {
  color: rgba(255, 255, 250, 0.58);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.community-battle-prompt strong {
  font-size: 0.98rem;
}

.community-battle-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
}

.community-battle-vs {
  align-self: center;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 250, 0.16);
  border-radius: 999px;
  background: var(--app-rouge);
  color: #fffefa;
  font-size: 0.68rem;
  font-weight: 950;
}

.community-battle-side {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 250, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.07);
  padding: 6px;
}

.community-battle-media {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  border-radius: 14px;
  background: #23262d;
}

.community-battle-media img {
  width: 100%;
  height: 100%;
  min-height: 132px;
  object-fit: cover;
}

.community-battle-media span {
  position: absolute;
  top: 7px;
  right: 7px;
  border-radius: 999px;
  background: var(--app-lime);
  color: #101114;
  padding: 5px 7px;
  font-size: 0.62rem;
  font-weight: 950;
}

.community-battle-side-body {
  display: grid;
  gap: 6px;
}

.community-battle-side-body strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-battle-side-body > span {
  color: rgba(255, 255, 250, 0.62);
  font-size: 0.64rem;
}

.community-battle-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.community-battle-items span {
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.1);
  padding: 4px 6px;
  color: rgba(255, 255, 250, 0.78);
  font-size: 0.56rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-battle-meter {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.12);
}

.community-battle-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--app-lime);
}

.community-battle-side .ghost-button {
  min-height: 34px;
  border-color: rgba(255, 255, 250, 0.18);
  color: #fffefa;
  padding: 0 8px;
  font-size: 0.66rem;
}

.community-battle-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.community-battle-actions button,
.community-battle-empty button {
  width: 100%;
}

.community-battle-history {
  border: 1px solid rgba(16, 17, 20, 0.08);
  border-radius: 18px;
  background: rgba(16, 17, 20, 0.035);
  padding: 10px;
}

.community-battle-history:empty {
  display: none;
}

.community-battle-history-title {
  color: var(--app-rouge);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.community-battle-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-top: 1px solid rgba(16, 17, 20, 0.08);
  padding-top: 8px;
}

.community-battle-history-row span,
.community-battle-history-row em {
  color: var(--app-muted);
  font-size: 0.66rem;
  font-style: normal;
}

.community-battle-history-row strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-moodboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.community-moodboard-metrics div {
  border: 1px solid rgba(16, 17, 20, 0.08);
  border-radius: 18px;
  background: rgba(255, 79, 109, 0.08);
  padding: 10px;
}

.community-moodboard-metrics strong {
  display: block;
  color: #101114;
  font-size: 1rem;
}

.community-moodboard-metrics span {
  display: block;
  overflow: hidden;
  color: var(--app-muted);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-moodboard {
  display: grid;
  gap: 9px;
}

.community-moodboard-empty,
.community-moodboard-card {
  overflow: hidden;
  border: 1px solid rgba(16, 17, 20, 0.1);
  border-radius: 22px;
  background: #fffefa;
}

.community-moodboard-empty {
  display: grid;
  gap: 6px;
  padding: 12px;
}

.community-moodboard-empty h3,
.community-moodboard-empty p {
  margin: 0;
}

.community-moodboard-empty h3 {
  color: #101114;
  font-size: 0.94rem;
}

.community-moodboard-empty p {
  font-size: 0.78rem;
  line-height: 1.35;
}

.community-moodboard-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 9px;
  padding: 8px;
}

.community-moodboard-media {
  position: relative;
  overflow: hidden;
  min-height: 124px;
  border-radius: 16px;
  background: #15171c;
}

.community-moodboard-media img {
  width: 100%;
  height: 100%;
  min-height: 124px;
  object-fit: cover;
}

.community-moodboard-media span {
  position: absolute;
  top: 7px;
  right: 7px;
  border-radius: 999px;
  background: var(--app-lime);
  color: #101114;
  padding: 5px 7px;
  font-size: 0.6rem;
  font-weight: 950;
}

.community-moodboard-body {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.community-moodboard-head {
  display: grid;
  gap: 2px;
}

.community-moodboard-head strong {
  overflow: hidden;
  color: #101114;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-moodboard-head span {
  overflow: hidden;
  color: var(--app-muted);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-moodboard-body p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #25272d;
  font-size: 0.74rem;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.community-moodboard-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.community-moodboard-items span {
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(61, 99, 255, 0.1);
  color: #233b9d;
  padding: 5px 7px;
  font-size: 0.58rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-moodboard-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.community-moodboard-actions .ghost-button {
  min-height: 34px;
  border-radius: 14px;
  padding: 0 8px;
  font-size: 0.68rem;
}

.community-shop-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.community-shop-metrics div {
  border: 1px solid rgba(16, 17, 20, 0.08);
  border-radius: 18px;
  background: rgba(16, 17, 20, 0.045);
  padding: 10px;
}

.community-shop-metrics strong {
  display: block;
  overflow: hidden;
  color: #101114;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-shop-metrics span {
  display: block;
  overflow: hidden;
  color: var(--app-muted);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-shop-cart {
  display: grid;
  gap: 9px;
}

.community-shop-empty,
.community-shop-receipt {
  overflow: hidden;
  border-radius: 22px;
}

.community-shop-empty {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(16, 17, 20, 0.1);
  background: #fffefa;
  padding: 12px;
}

.community-shop-empty h3,
.community-shop-empty p {
  margin: 0;
}

.community-shop-empty h3 {
  color: #101114;
  font-size: 0.94rem;
}

.community-shop-empty p {
  font-size: 0.78rem;
  line-height: 1.35;
}

.community-shop-receipt {
  display: grid;
  gap: 11px;
  background:
    linear-gradient(150deg, rgba(255, 79, 109, 0.16), transparent 48%),
    #101114;
  color: #fffefa;
  padding: 10px;
}

.community-shop-head {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 9px;
  align-items: stretch;
}

.community-shop-head img {
  width: 84px;
  height: 104px;
  border-radius: 16px;
  object-fit: cover;
}

.community-shop-head div {
  display: grid;
  min-width: 0;
  gap: 5px;
  align-content: center;
}

.community-shop-head span {
  color: rgba(255, 255, 250, 0.6);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.community-shop-head strong {
  overflow: hidden;
  color: #fffefa;
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-shop-head p {
  margin: 0;
  color: rgba(255, 255, 250, 0.7);
  font-size: 0.74rem;
  line-height: 1.35;
}

.community-shop-products {
  display: grid;
  gap: 7px;
}

.community-shop-product {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 250, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 250, 0.07);
  padding: 6px;
}

.community-shop-product img {
  width: 46px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
}

.community-shop-product div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.community-shop-product strong {
  overflow: hidden;
  color: #fffefa;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-shop-product span {
  overflow: hidden;
  color: rgba(255, 255, 250, 0.6);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-shop-product a,
.community-shop-product em {
  border-radius: 999px;
  background: rgba(200, 255, 77, 0.92);
  color: #101114;
  padding: 5px 7px;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 950;
}

.community-shop-product-unavailable {
  opacity: 0.58;
}

.community-shop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.community-shop-actions button {
  width: 100%;
}

.community-pulse-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.community-pulse-metrics div {
  border: 1px solid rgba(16, 17, 20, 0.08);
  border-radius: 18px;
  background: rgba(200, 255, 77, 0.18);
  padding: 10px;
}

.community-pulse-metrics strong {
  display: block;
  overflow: hidden;
  color: #101114;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-pulse-metrics span {
  display: block;
  overflow: hidden;
  color: var(--app-muted);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-pulse {
  display: grid;
  gap: 9px;
}

.community-pulse-empty,
.community-pulse-card {
  overflow: hidden;
  border-radius: 22px;
}

.community-pulse-empty {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(16, 17, 20, 0.1);
  background: #fffefa;
  padding: 12px;
}

.community-pulse-empty h3,
.community-pulse-empty p {
  margin: 0;
}

.community-pulse-empty h3 {
  color: #101114;
  font-size: 0.94rem;
}

.community-pulse-empty p {
  font-size: 0.78rem;
  line-height: 1.35;
}

.community-pulse-card {
  display: grid;
  gap: 12px;
  background:
    linear-gradient(155deg, rgba(200, 255, 77, 0.28), transparent 42%),
    repeating-linear-gradient(90deg, rgba(255, 255, 250, 0.06) 0 1px, transparent 1px 13px),
    #101114;
  color: #fffefa;
  padding: 10px;
}

.community-pulse-lead {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.community-pulse-lead img {
  width: 88px;
  height: 112px;
  border-radius: 17px;
  object-fit: cover;
}

.community-pulse-lead div {
  display: grid;
  min-width: 0;
  gap: 6px;
  align-content: center;
}

.community-pulse-lead span {
  color: rgba(255, 255, 250, 0.6);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.community-pulse-lead strong {
  overflow: hidden;
  color: #fffefa;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-pulse-lead p {
  margin: 0;
  color: rgba(255, 255, 250, 0.72);
  font-size: 0.74rem;
  line-height: 1.35;
}

.community-pulse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.community-pulse-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 250, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 250, 0.07);
  padding: 8px;
}

.community-pulse-grid span {
  color: rgba(255, 255, 250, 0.56);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.community-pulse-grid strong {
  overflow: hidden;
  color: #fffefa;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-pulse-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.community-pulse-tags span {
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(200, 255, 77, 0.16);
  color: #d7ff72;
  padding: 5px 8px;
  font-size: 0.6rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-drop-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.community-drop-metrics div {
  border: 1px solid rgba(16, 17, 20, 0.08);
  border-radius: 18px;
  background: rgba(61, 99, 255, 0.08);
  padding: 10px;
}

.community-drop-metrics strong {
  display: block;
  overflow: hidden;
  color: #101114;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-drop-metrics span {
  display: block;
  overflow: hidden;
  color: var(--app-muted);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-drops {
  display: grid;
  gap: 9px;
}

.community-drop-empty,
.community-drop-card {
  overflow: hidden;
  border-radius: 22px;
}

.community-drop-empty {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(16, 17, 20, 0.1);
  background: #fffefa;
  padding: 12px;
}

.community-drop-empty h3,
.community-drop-empty p {
  margin: 0;
}

.community-drop-empty h3 {
  color: #101114;
  font-size: 0.94rem;
}

.community-drop-empty p {
  font-size: 0.78rem;
  line-height: 1.35;
}

.community-drop-card {
  display: grid;
  gap: 11px;
  border: 1px solid rgba(16, 17, 20, 0.1);
  background: #fffefa;
  padding: 8px;
}

.community-drop-hero {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.community-drop-hero img {
  width: 92px;
  height: 118px;
  border-radius: 17px;
  object-fit: cover;
}

.community-drop-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
  align-content: center;
}

.community-drop-copy span {
  overflow: hidden;
  color: var(--app-rouge);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.community-drop-copy strong {
  overflow: hidden;
  color: #101114;
  font-size: 0.98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-drop-copy p {
  margin: 0;
  color: var(--app-muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.community-drop-items {
  display: grid;
  gap: 7px;
}

.community-drop-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(16, 17, 20, 0.08);
  border-radius: 16px;
  background: rgba(16, 17, 20, 0.035);
  padding: 6px;
}

.community-drop-item img {
  width: 44px;
  height: 50px;
  border-radius: 12px;
  object-fit: cover;
}

.community-drop-item div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.community-drop-item strong {
  overflow: hidden;
  color: #101114;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-drop-item span {
  overflow: hidden;
  color: var(--app-muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-drop-item em {
  border-radius: 999px;
  background: #101114;
  color: #fffefa;
  padding: 5px 7px;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
}

.community-drop-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.community-drop-actions button {
  width: 100%;
}

.community-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.community-metrics div {
  border: 1px solid rgba(16, 17, 20, 0.08);
  border-radius: 18px;
  background: rgba(16, 17, 20, 0.04);
  padding: 10px;
}

.community-metrics strong {
  display: block;
  font-size: 1rem;
}

.community-metrics span {
  display: block;
  color: var(--app-muted);
  font-size: 0.68rem;
}

.community-feed {
  display: grid;
  gap: 10px;
}

.community-post-card {
  display: grid;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(16, 17, 20, 0.1);
  border-radius: 22px;
  background: #fffefa;
  padding: 8px;
}

.community-post-media {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  border-radius: 17px;
  background: #15171c;
}

.community-post-media img {
  width: 100%;
  height: 100%;
  min-height: 210px;
  object-fit: cover;
}

.community-post-media span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 999px;
  background: rgba(9, 10, 13, 0.84);
  color: #fffefa;
  padding: 6px 10px;
  font-size: 0.66rem;
  font-weight: 900;
}

.community-post-body {
  display: grid;
  gap: 9px;
  padding: 2px 2px 4px;
}

.community-author-line {
  display: grid;
  gap: 2px;
  border-bottom: 1px solid rgba(16, 17, 20, 0.08);
  padding-bottom: 8px;
}

.community-author-line strong {
  color: #101114;
  font-size: 0.82rem;
}

.community-author-line span {
  color: var(--app-muted);
  font-size: 0.68rem;
}

.community-post-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.community-post-head span,
.community-post-stats {
  color: var(--app-muted);
}

.community-post-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.community-post-head .ghost-button,
.community-comment-form .ghost-button {
  min-height: 34px;
  border-radius: 14px;
  padding: 0 10px;
  white-space: nowrap;
}

.community-post-actions .ghost-button.active {
  border-color: rgba(255, 79, 109, 0.34);
  background: rgba(255, 79, 109, 0.11);
  color: #101114;
}

.community-moodboard-actions .ghost-button.active {
  border-color: rgba(16, 17, 20, 0.28);
  background: #101114;
  color: #fffefa;
}

.community-post-body p {
  color: #25272d;
  font-size: 0.84rem;
  line-height: 1.4;
}

.community-item-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.community-item-pills span {
  border-radius: 999px;
  background: rgba(61, 99, 255, 0.1);
  color: #233b9d;
  padding: 6px 9px;
  font-size: 0.66rem;
  font-weight: 850;
}

.community-post-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.community-challenge-tag {
  width: fit-content;
  border-radius: 999px;
  background: rgba(200, 255, 77, 0.76);
  color: #101114;
  padding: 6px 9px;
  font-size: 0.66rem;
  font-weight: 900;
}

.community-room-tag {
  width: fit-content;
  border-radius: 999px;
  background: rgba(16, 17, 20, 0.08);
  color: #101114;
  padding: 6px 9px;
  font-size: 0.66rem;
  font-weight: 900;
}

.community-comment-list {
  display: grid;
  gap: 6px;
}

.community-comment-list:empty {
  display: none;
}

.community-comment-list article {
  display: grid;
  gap: 2px;
  border-left: 2px solid rgba(255, 79, 109, 0.34);
  padding-left: 8px;
}

.community-comment-list strong {
  color: #101114;
  font-size: 0.7rem;
}

.community-comment-list span {
  color: var(--app-muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.community-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.community-comment-form input {
  min-width: 0;
  min-height: 34px;
  border-radius: 14px;
  font-size: max(1rem, 16px);
}

.mobile-dock {
  position: fixed;
  right: 0;
  bottom: 8px;
  left: 0;
  z-index: 36;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(var(--app-width), calc(100vw - 18px));
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 250, 0.12);
  border-radius: 22px;
  background: rgba(10, 11, 14, 0.88);
  box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.2);
  padding: 6px 8px calc(6px + var(--safe-bottom));
  scrollbar-width: none;
  backdrop-filter: blur(18px);
}

.mobile-dock::-webkit-scrollbar {
  display: none;
}

.mobile-dock a {
  display: grid;
  grid-template-rows: 24px auto;
  gap: 4px;
  place-items: center;
  min-width: 0;
  min-height: 52px;
  border-radius: 16px;
  color: rgba(255, 255, 250, 0.52);
  font-size: 0.56rem;
  font-weight: 820;
  line-height: 1;
  text-align: center;
  white-space: normal;
}

.mobile-dock a::before {
  content: attr(data-glyph);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 250, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.055);
  color: rgba(255, 255, 250, 0.76);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
}

.mobile-dock a.active,
.mobile-dock a:focus-visible {
  background: rgba(255, 255, 250, 0.055);
  color: #fffefa;
}

.mobile-dock a.active::before,
.mobile-dock a:focus-visible::before {
  border-color: transparent;
  background: var(--app-lime);
  color: #101114;
}

.quick-action-button {
  right: max(18px, calc((100vw - var(--app-width)) / 2 + 18px));
  bottom: calc(98px + var(--safe-bottom));
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 250, 0.22);
  border-radius: 22px;
  background: var(--app-rouge);
  box-shadow: 0 18px 34px rgba(255, 79, 109, 0.36);
}

.quick-action-sheet,
.command-palette {
  z-index: 50;
  place-items: end center;
  padding: 10px 10px calc(10px + var(--safe-bottom));
  background: rgba(9, 10, 13, 0.54);
}

.quick-action-panel,
.command-panel {
  width: var(--app-width);
  max-width: calc(100vw - 16px);
  max-height: min(78vh, 720px);
  overflow: auto;
  border-radius: 28px;
  background: #fffefa;
  padding: 14px;
}

.quick-action-grid {
  grid-template-columns: 1fr;
}

@media (max-width: 480px) {
  body::before,
  .app-shell {
    top: 0;
  }

  body::before,
  .topbar,
  .mobile-dock,
  .studio-band,
  .content-band,
  .business-band,
  .quick-action-panel,
  .command-panel {
    max-width: 100vw;
  }

  body::before {
    bottom: 0;
    border: 0;
    border-radius: 0;
  }

  .topbar {
    border-radius: 0 0 22px 22px;
  }

  .mobile-dock {
    bottom: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
  }

  main {
    inset: calc(var(--topbar-height) + var(--safe-top)) 0 calc(var(--dock-height) + var(--safe-bottom)) 0;
  }
}

/* v40 visual direction: fashion utility OS, not neon startup chrome. */
:root {
  --app-bg: #f4f6f3;
  --app-surface: rgba(255, 255, 255, 0.91);
  --app-ink: #161719;
  --app-muted: #70736f;
  --app-line: rgba(22, 23, 25, 0.12);
  --app-lime: #dce86f;
  --app-rouge: #cf4057;
  --app-blue: #495f8c;
  --app-gold: #b69855;
  --topbar-height: 68px;
  --dock-height: 72px;
}

body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent 240px),
    #dfe3de;
}

body::before {
  top: 8px;
  bottom: 8px;
  border-color: rgba(22, 23, 25, 0.08);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(244, 246, 243, 0.94) 36%),
    var(--app-bg);
  box-shadow: 0 20px 54px rgba(22, 23, 25, 0.18);
}

.topbar {
  min-height: calc(var(--topbar-height) + var(--safe-top));
  border: 1px solid rgba(22, 23, 25, 0.1);
  border-radius: 20px 20px 12px 12px;
  background: rgba(250, 251, 248, 0.9);
  box-shadow: 0 10px 26px rgba(22, 23, 25, 0.1);
  padding: calc(8px + var(--safe-top)) 12px 8px;
  backdrop-filter: blur(18px);
}

.brand {
  color: var(--app-ink);
}

.brand > span:not(.brand-mark) {
  max-width: 124px;
  font-size: 0.94rem;
  font-weight: 900;
}

.brand small {
  color: var(--app-muted);
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: #161719;
  color: #fff;
  box-shadow: none;
}

.command-button,
.locale-switch select,
.market-switch select {
  border-color: rgba(22, 23, 25, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--app-ink);
  box-shadow: inset 0 -1px 0 rgba(22, 23, 25, 0.04);
}

.command-button::before {
  color: var(--app-ink);
}

.command-button {
  position: relative;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 999px;
  color: transparent;
  font-size: 0;
}

.command-button::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--app-ink);
  border-radius: 999px;
}

.command-button::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 21px;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--app-ink);
  transform: rotate(45deg);
  transform-origin: left center;
}

.locale-switch select,
.market-switch select {
  min-height: 38px;
  font-size: 0.72rem;
}

main {
  inset: calc(8px + var(--topbar-height) + var(--safe-top)) 0 calc(8px + var(--dock-height) + var(--safe-bottom)) 0;
}

.studio-band,
.content-band,
.business-band {
  padding: 8px 10px 22px;
  border-radius: 0 0 20px 20px;
}

.panel,
.passport-panel,
.coach-panel,
.fit-panel,
.planner-panel,
.capsule-panel,
.lookbook-panel,
.report-panel,
.campaign-panel,
.demand-panel,
.restock-panel,
.wardrobe-panel,
.catalog-audit-panel,
.passport-card-panel,
.passport-products-panel,
.passport-history-panel,
.coach-answer-panel,
.coach-history-panel,
.fit-result-panel,
.fit-history-panel,
.planner-result-panel,
.planner-history-panel,
.capsule-board-panel,
.capsule-outfits-panel,
.capsule-history-panel,
.discover-card-panel,
.discover-side-panel,
.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,
.brain-panel,
.trend-intel-panel,
.reservation-panel,
.followup-panel,
.client-dossier-panel,
.sales-funnel-panel,
.action-queue-panel {
  border-color: rgba(22, 23, 25, 0.11);
  border-radius: 14px;
  background: var(--app-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 22px rgba(22, 23, 25, 0.07);
}

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  top: -8px;
  margin: -8px -10px 12px;
  border-bottom-color: rgba(22, 23, 25, 0.08);
  background: rgba(244, 246, 243, 0.9);
  padding: 16px 14px 14px;
}

.section-head h2,
.panel-head h2,
.panel-head h3 {
  font-size: 1rem;
  line-height: 1.12;
}

#inventory .section-head h2 {
  max-width: 280px;
  font-size: 1.2rem;
  letter-spacing: 0;
}

.eyebrow {
  color: var(--app-rouge);
  font-size: 0.62rem;
  letter-spacing: 0;
}

.section-actions {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: stretch;
  gap: 8px;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 12px;
  background: rgba(22, 23, 25, 0.055);
  padding: 3px;
}

.segmented button {
  min-width: 0;
  min-height: 34px;
  border-radius: 9px;
  font-size: 0.82rem;
}

.segmented button.active {
  background: #fff;
  color: var(--app-ink);
  box-shadow: 0 1px 6px rgba(22, 23, 25, 0.12);
}

.csv-actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
}

.primary-button,
.ghost-button,
label.import-button {
  min-height: 38px;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 850;
}

.ghost-button {
  border-color: rgba(22, 23, 25, 0.16);
  background: rgba(255, 255, 255, 0.78);
}

.danger-button {
  border-color: rgba(207, 64, 87, 0.34);
  background: rgba(207, 64, 87, 0.06);
  color: var(--app-rouge);
}

.wardrobe-panel {
  gap: 12px;
  padding: 14px;
}

.wardrobe-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.wardrobe-metrics div {
  min-height: 74px;
  border: 1px solid rgba(22, 23, 25, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.68);
  padding: 10px;
}

.wardrobe-metrics strong {
  font-size: 1rem;
}

.wardrobe-metrics span {
  font-size: 0.68rem;
}

.wardrobe-map,
.inventory-layout {
  grid-template-columns: 1fr;
}

.wardrobe-coverage-row,
.wardrobe-gap-card,
.wardrobe-gaps-head,
.item-card,
.photo-capture-card,
.photo-capture-editor,
.vision-signals article,
.quick-stats div,
.outfit-summary div {
  border-radius: 10px;
}

.wardrobe-coverage-row {
  border-left-width: 3px;
  background: rgba(255, 255, 255, 0.72);
}

.inventory-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.item-card {
  background: rgba(255, 255, 255, 0.78);
}

.item-body {
  padding: 10px;
}

.quick-action-button {
  right: max(16px, calc((100vw - var(--app-width)) / 2 + 16px));
  bottom: calc(82px + var(--safe-bottom));
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: var(--app-rouge);
  box-shadow: 0 12px 28px rgba(207, 64, 87, 0.26);
  font-size: 1.75rem;
}

.mobile-dock {
  bottom: 8px;
  border-color: rgba(22, 23, 25, 0.1);
  border-radius: 18px;
  background: rgba(250, 251, 248, 0.92);
  box-shadow: 0 -8px 24px rgba(22, 23, 25, 0.14);
  padding: 6px 8px calc(6px + var(--safe-bottom));
}

.mobile-dock a {
  position: relative;
  min-height: 48px;
  border-radius: 12px;
  color: rgba(22, 23, 25, 0.52);
  font-size: 0.55rem;
}

.mobile-dock a::before {
  width: 24px;
  height: 24px;
  border-color: rgba(22, 23, 25, 0.12);
  background: rgba(22, 23, 25, 0.04);
  color: rgba(22, 23, 25, 0.68);
}

.mobile-dock a.active,
.mobile-dock a:focus-visible {
  background: transparent;
  color: var(--app-ink);
}

.mobile-dock a.active::before,
.mobile-dock a:focus-visible::before {
  background: var(--app-ink);
  color: #fff;
}

.mobile-dock a.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--app-rouge);
}

@media (max-width: 480px) {
  body::before {
    border-radius: 0;
  }

  .topbar {
    border-radius: 0 0 16px 16px;
  }

  .mobile-dock {
    bottom: 0;
    border-radius: 16px 16px 0 0;
  }
}

/* v42: remove the fake-device theatre and make the app feel like a clean fashion tool. */
:root {
  --app-width: min(100vw, 540px);
  --app-bg: #f6f7f3;
  --app-surface: rgba(255, 255, 255, 0.88);
  --app-line: rgba(22, 23, 25, 0.1);
  --app-rouge: #b93c51;
  --topbar-height: 62px;
  --dock-height: 66px;
}

body {
  background: #ecefeb;
}

body::before {
  display: none;
}

.app-shell {
  top: 0;
}

.topbar {
  width: var(--app-width);
  max-width: 100vw;
  border-width: 0 0 1px;
  border-radius: 0;
  background: rgba(248, 249, 246, 0.94);
  box-shadow: none;
  padding: calc(8px + var(--safe-top)) 14px 8px;
}

.brand {
  gap: 8px;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(22, 23, 25, 0.16);
  border-radius: 7px;
  background: #fff;
  color: var(--app-ink);
  font-size: 0.68rem;
  font-weight: 950;
}

.brand > span:not(.brand-mark) {
  max-width: 112px;
  font-size: 0.86rem;
}

.brand small {
  font-size: 0.52rem;
}

.command-button,
.locale-switch select,
.market-switch select {
  background: rgba(255, 255, 255, 0.66);
}

.command-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
}

.command-button::before {
  top: 8px;
  left: 8px;
}

.command-button::after {
  top: 21px;
  left: 20px;
}

.topbar-switches {
  width: min(134px, 36vw);
}

.locale-switch select,
.market-switch select {
  min-height: 34px;
  border-radius: 10px;
  font-size: 0.68rem;
}

main {
  inset: calc(var(--topbar-height) + var(--safe-top)) 0 calc(var(--dock-height) + var(--safe-bottom)) 0;
}

.studio-band,
.content-band,
.business-band {
  max-width: 100vw;
  border-radius: 0;
  background: var(--app-bg);
  padding: 8px 10px 18px;
}

.section-head {
  margin: -8px -10px 10px;
  background: rgba(246, 247, 243, 0.94);
  padding: 14px 14px 12px;
}

#inventory .section-head h2 {
  max-width: none;
  font-size: 1.08rem;
}

.section-actions {
  gap: 7px;
}

.segmented {
  border: 1px solid rgba(22, 23, 25, 0.08);
  background: rgba(22, 23, 25, 0.04);
}

.csv-actions {
  grid-template-columns: 1fr 1fr 0.72fr;
}

.primary-button,
.ghost-button,
label.import-button {
  min-height: 36px;
  border-radius: 9px;
  font-size: 0.76rem;
}

.panel,
.passport-panel,
.coach-panel,
.fit-panel,
.planner-panel,
.capsule-panel,
.lookbook-panel,
.report-panel,
.campaign-panel,
.demand-panel,
.restock-panel,
.wardrobe-panel,
.catalog-audit-panel,
.passport-card-panel,
.passport-products-panel,
.passport-history-panel,
.coach-answer-panel,
.coach-history-panel,
.fit-result-panel,
.fit-history-panel,
.planner-result-panel,
.planner-history-panel,
.capsule-board-panel,
.capsule-outfits-panel,
.capsule-history-panel,
.discover-card-panel,
.discover-side-panel,
.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,
.brain-panel,
.trend-intel-panel,
.reservation-panel,
.followup-panel,
.client-dossier-panel,
.sales-funnel-panel,
.action-queue-panel {
  border-radius: 12px;
  box-shadow: none;
}

.wardrobe-panel,
.catalog-audit-panel {
  padding: 12px;
}

.wardrobe-metrics div {
  min-height: 64px;
  background: rgba(22, 23, 25, 0.035);
}

.inventory-grid {
  gap: 8px;
}

.item-card {
  border-color: rgba(22, 23, 25, 0.1);
}

.item-card img {
  aspect-ratio: 1 / 1;
}

.quick-action-button {
  right: max(14px, calc((100vw - var(--app-width)) / 2 + 14px));
  bottom: calc(76px + var(--safe-bottom));
  width: 44px;
  height: 44px;
  border: 1px solid rgba(22, 23, 25, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: var(--app-ink);
  box-shadow: 0 10px 24px rgba(22, 23, 25, 0.14);
  font-size: 1.5rem;
}

.mobile-dock {
  bottom: 0;
  width: var(--app-width);
  max-width: 100vw;
  border-width: 1px 0 0;
  border-radius: 0;
  background: rgba(248, 249, 246, 0.94);
  box-shadow: none;
  padding: 5px 8px calc(5px + var(--safe-bottom));
}

.mobile-dock a {
  min-height: 46px;
  border-radius: 10px;
}

.mobile-dock a::before {
  width: 22px;
  height: 22px;
  background: transparent;
}

.mobile-dock a.active::after {
  bottom: 1px;
  height: 2px;
  background: var(--app-ink);
}

@media (max-width: 480px) {
  .topbar,
  .mobile-dock {
    max-width: 100vw;
  }

  .topbar,
  .mobile-dock {
    border-radius: 0;
  }
}

/* v43: topbar reads as an app toolbar, not a brand banner. */
.topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
}

.brand {
  min-width: 0;
}

.brand > span:not(.brand-mark) {
  max-width: 82px;
  font-size: 0.82rem;
}

.brand small {
  display: none;
}

.active-view-chip {
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border-left: 1px solid rgba(22, 23, 25, 0.13);
  color: var(--app-muted);
  padding-left: 9px;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.command-button {
  justify-self: end;
}

.topbar-switches {
  justify-self: end;
  width: min(122px, 34vw);
}

.locale-switch select,
.market-switch select {
  padding: 0 6px;
}

.mobile-dock a {
  font-size: 0.52rem;
}

.quick-action-button {
  bottom: calc(72px + var(--safe-bottom));
}

/* v44: native app tabs and tighter fashion-workspace chrome. */
:root {
  --app-width: min(100vw, 460px);
  --app-bg: #f3f4ef;
  --app-surface: rgba(255, 255, 252, 0.9);
  --app-ink: #141516;
  --app-muted: #676a66;
  --app-line: rgba(20, 21, 22, 0.11);
  --app-lime: #d9e66b;
  --app-rouge: #a93448;
  --topbar-height: 58px;
  --dock-height: 62px;
}

body {
  background: #e7ebe4;
}

.topbar {
  grid-template-columns: 32px minmax(0, 1fr) 34px minmax(92px, 112px);
  min-height: calc(var(--topbar-height) + var(--safe-top));
  gap: 8px;
  border-bottom-color: rgba(20, 21, 22, 0.09);
  background: rgba(246, 247, 242, 0.96);
  padding: calc(7px + var(--safe-top)) 12px 7px;
}

.brand {
  display: block;
  width: 32px;
  height: 32px;
}

.brand > span:not(.brand-mark),
.brand small {
  display: none;
}

.brand-mark {
  position: relative;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: #141516;
  color: #fffefa;
  font-size: 0.66rem;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.09);
}

.brand-mark::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--app-lime);
}

.active-view-chip {
  border-left: 0;
  color: var(--app-ink);
  padding-left: 0;
  font-size: 0.82rem;
  font-weight: 920;
  letter-spacing: 0;
  text-transform: none;
}

.command-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 252, 0.82);
}

.topbar-switches {
  width: min(112px, 32vw);
  gap: 4px;
}

.locale-switch select,
.market-switch select {
  min-height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 252, 0.74);
  font-size: 0.66rem;
}

main {
  inset: calc(var(--topbar-height) + var(--safe-top)) 0 calc(var(--dock-height) + var(--safe-bottom)) 0;
}

.studio-band,
.content-band,
.business-band {
  padding: 7px 9px 18px;
}

.section-head {
  margin: -7px -9px 10px;
  padding: 12px 13px 11px;
}

.mobile-dock {
  width: var(--app-width);
  max-width: 100vw;
  border-top-color: rgba(20, 21, 22, 0.1);
  background: rgba(246, 247, 242, 0.97);
  padding: 4px 7px calc(4px + var(--safe-bottom));
}

.mobile-dock a {
  grid-template-rows: 24px 14px;
  gap: 3px;
  min-height: 50px;
  border-radius: 0;
  color: rgba(20, 21, 22, 0.5);
  font-size: 0.57rem;
  font-weight: 850;
}

.mobile-dock a::before {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(20, 21, 22, 0.56);
  font-size: 0.95rem;
  line-height: 1;
}

.mobile-dock a.active,
.mobile-dock a:focus-visible {
  background: transparent;
  color: var(--app-ink);
}

.mobile-dock a.active::before,
.mobile-dock a:focus-visible::before {
  background: #141516;
  color: #fffefa;
}

.mobile-dock a.active::after {
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--app-rouge);
}

.quick-action-button {
  right: max(12px, calc((100vw - var(--app-width)) / 2 + 12px));
  bottom: calc(68px + var(--safe-bottom));
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: #141516;
  color: #fffefa;
  box-shadow: 0 12px 28px rgba(20, 21, 22, 0.18);
  font-size: 1.55rem;
}

.wardrobe-metrics {
  overflow: hidden;
  gap: 0;
  border: 1px solid rgba(20, 21, 22, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 252, 0.68);
}

.wardrobe-metrics div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  min-height: 52px;
  border: 0;
  border-bottom: 1px solid rgba(20, 21, 22, 0.07);
  border-radius: 0;
  background: transparent;
  padding: 9px 12px;
}

.wardrobe-metrics div:last-child {
  border-bottom: 0;
}

.wardrobe-metrics strong {
  font-size: 1.08rem;
}

.wardrobe-metrics span {
  font-size: 0.72rem;
  line-height: 1.1;
}

/* v45: camera scan surface and closet-shelf product cards. */
.photo-panel {
  overflow: hidden;
  border-color: rgba(20, 21, 22, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 250, 0.06), transparent 120px),
    #141516;
  color: #fffefa;
}

.photo-panel .panel-head {
  align-items: center;
}

.photo-panel .eyebrow {
  color: var(--app-lime);
}

.photo-panel h2,
.photo-panel h3 {
  color: #fffefa;
}

.photo-panel p,
.photo-panel .status-line {
  color: rgba(255, 255, 250, 0.68);
}

.photo-panel .primary-button {
  background: #fffefa;
  color: #141516;
}

.upload-zone {
  height: min(58vh, 520px);
  min-height: 360px;
  border: 1px solid rgba(255, 255, 250, 0.14);
  border-radius: 18px;
  background: #08090b;
}

.upload-zone img {
  filter: saturate(0.96) contrast(1.04);
}

.upload-zone::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 250, 0.42);
  border-radius: 13px;
  background:
    linear-gradient(#fffefa, #fffefa) left top / 28px 1px no-repeat,
    linear-gradient(#fffefa, #fffefa) left top / 1px 28px no-repeat,
    linear-gradient(#fffefa, #fffefa) right top / 28px 1px no-repeat,
    linear-gradient(#fffefa, #fffefa) right top / 1px 28px no-repeat,
    linear-gradient(#fffefa, #fffefa) left bottom / 28px 1px no-repeat,
    linear-gradient(#fffefa, #fffefa) left bottom / 1px 28px no-repeat,
    linear-gradient(#fffefa, #fffefa) right bottom / 28px 1px no-repeat,
    linear-gradient(#fffefa, #fffefa) right bottom / 1px 28px no-repeat;
  opacity: 0.72;
}

.upload-zone::after {
  inset: auto 16px 16px 16px;
  z-index: 1;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 250, 0.36);
}

.upload-zone span {
  z-index: 2;
  right: 18px;
  bottom: 28px;
  border: 1px solid rgba(255, 255, 250, 0.14);
  border-radius: 999px;
  background: rgba(20, 21, 22, 0.72);
  color: #fffefa;
  backdrop-filter: blur(12px);
}

.score-wrap {
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid rgba(255, 255, 250, 0.1);
  background: rgba(255, 255, 250, 0.08);
}

.score-ring {
  width: 76px;
  height: 76px;
  background:
    radial-gradient(circle at center, #141516 56%, transparent 57%),
    conic-gradient(var(--app-lime) 0deg 310deg, rgba(255, 255, 250, 0.16) 310deg 360deg);
}

.vision-panel,
.repair-panel,
.taste-panel {
  border-top-color: rgba(255, 255, 250, 0.1);
}

.vision-signals article,
.photo-capture-editor,
.photo-capture-card {
  border: 1px solid rgba(255, 255, 250, 0.1);
  background: rgba(255, 255, 250, 0.08);
}

.vision-signals span,
.photo-capture-editor label {
  color: rgba(255, 255, 250, 0.62);
}

.vision-signals strong,
.photo-capture-card strong {
  color: #fffefa;
}

.vision-fixes p {
  border-left-color: var(--app-lime);
  background: rgba(217, 230, 107, 0.12);
  color: #eef6a6;
}

.photo-capture-editor input,
.photo-capture-editor select {
  border-color: rgba(255, 255, 250, 0.12);
  background: rgba(255, 255, 250, 0.9);
}

.inventory-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
}

.item-card {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.item-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(20, 21, 22, 0.11);
}

.item-source-user::before {
  box-shadow:
    inset 0 0 0 2px rgba(217, 230, 107, 0.78),
    0 10px 24px rgba(20, 21, 22, 0.1);
}

.item-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  object-fit: cover;
}

.item-body {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 8px 2px 0;
}

.item-body h3 {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.2em;
  margin: 0;
  color: var(--app-ink);
  font-size: 0.82rem;
  line-height: 1.1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.item-meta {
  order: -1;
  margin: -38px 8px 6px;
  pointer-events: none;
}

.item-card .source-badge,
.item-card .stock-badge {
  border-radius: 999px;
  backdrop-filter: blur(12px);
}

.item-card .source-badge {
  background: rgba(20, 21, 22, 0.76);
  color: #fffefa;
}

.item-card .source-user {
  background: rgba(217, 230, 107, 0.9);
  color: #141516;
}

.item-meta .price {
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.86);
  color: #141516;
  padding: 6px 8px;
  font-size: 0.64rem;
}

.stock-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 0;
  font-size: 0.66rem;
}

.pill-row {
  max-height: 25px;
  overflow: hidden;
  gap: 5px;
  margin-top: 0;
}

.pill {
  background: rgba(20, 21, 22, 0.06);
  padding: 4px 7px;
  font-size: 0.62rem;
}

.item-card .product-link {
  justify-content: center;
  min-height: 32px;
  margin-top: 2px;
  border-radius: 10px;
  background: #141516;
  font-size: 0.68rem;
}

/* v46: StyleCircle as a native social darkroom, not a form stack. */
#community {
  background:
    linear-gradient(180deg, #171819 0, #22241f 220px, #f3f4ef 520px),
    #f3f4ef;
  padding-top: 0;
}

#community .section-head {
  margin: 0 -9px 10px;
  border-bottom: 1px solid rgba(255, 255, 250, 0.1);
  background: rgba(23, 24, 25, 0.96);
  color: #fffefa;
}

#community .section-head .eyebrow {
  color: var(--app-lime);
}

#community .section-head h2 {
  color: #fffefa;
}

#community .section-head .danger-button {
  border-color: rgba(255, 255, 250, 0.16);
  background: rgba(255, 255, 250, 0.08);
  color: #fffefa;
}

#community .circle-identity-panel,
#community .circle-room-panel,
#community .social-share-panel,
#community .community-challenge-panel,
#community .community-battle-panel,
#community .community-moodboard-panel,
#community .community-shop-panel,
#community .community-pulse-panel,
#community .community-drop-panel,
#community .community-feed-panel {
  border-color: rgba(20, 21, 22, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.92);
}

#community .social-share-panel {
  overflow: hidden;
  border-color: rgba(255, 255, 250, 0.12);
  background:
    linear-gradient(135deg, rgba(217, 230, 107, 0.2), transparent 42%),
    #141516;
  color: #fffefa;
}

#community .social-share-panel .eyebrow,
#community .social-share-panel label {
  color: rgba(255, 255, 250, 0.68);
}

#community .social-share-panel h3 {
  color: #fffefa;
}

#community .social-share-panel select,
#community .social-share-panel textarea {
  border-color: rgba(255, 255, 250, 0.12);
  background: rgba(255, 255, 250, 0.92);
  color: #141516;
}

#community .social-share-panel .primary-button {
  background: #fffefa;
  color: #141516;
}

#community .social-share-panel .ghost-button {
  border-color: rgba(255, 255, 250, 0.14);
  background: rgba(255, 255, 250, 0.08);
  color: #fffefa;
}

#community .social-card-preview {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 420px;
  border: 1px solid rgba(255, 255, 250, 0.14);
  border-radius: 22px;
  background: #08090b;
  padding: 0;
}

#community .social-card-preview-feed {
  min-height: 350px;
}

#community .social-card-preview-reel,
#community .social-card-preview-story {
  aspect-ratio: 9 / 16;
}

#community .social-card-media {
  min-height: 100%;
  border-radius: 0;
}

#community .social-card-media img {
  min-height: 420px;
}

#community .social-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 9, 11, 0.08), transparent 42%, rgba(8, 9, 11, 0.82)),
    linear-gradient(90deg, rgba(8, 9, 11, 0.26), transparent 50%);
}

#community .social-card-media span {
  top: 12px;
  right: 12px;
  bottom: auto;
  z-index: 2;
  background: rgba(255, 255, 250, 0.88);
  color: #141516;
}

#community .social-card-copy {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  gap: 10px;
  align-content: end;
}

#community .social-card-copy strong {
  font-size: 1.08rem;
}

#community .social-card-copy p {
  max-height: 8.2em;
  margin: 0;
  color: rgba(255, 255, 250, 0.9);
}

#community .social-platform-snapchat .social-card-media span,
#community .social-platform-tiktok .social-card-media span {
  background: var(--app-lime);
}

#community .social-share-actions {
  grid-template-columns: 1fr 1fr;
}

#community .social-share-actions .primary-button {
  grid-column: 1 / -1;
}

#community .community-metrics,
#community .community-moodboard-metrics,
#community .community-shop-metrics,
#community .community-pulse-metrics,
#community .community-drop-metrics {
  overflow: hidden;
  gap: 0;
  border: 1px solid rgba(20, 21, 22, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 250, 0.72);
}

#community .community-metrics div,
#community .community-moodboard-metrics div,
#community .community-shop-metrics div,
#community .community-pulse-metrics div,
#community .community-drop-metrics div {
  border: 0;
  border-right: 1px solid rgba(20, 21, 22, 0.07);
  border-radius: 0;
  background: transparent;
  padding: 9px;
}

#community .community-metrics div:last-child,
#community .community-moodboard-metrics div:last-child,
#community .community-shop-metrics div:last-child,
#community .community-pulse-metrics div:last-child,
#community .community-drop-metrics div:last-child {
  border-right: 0;
}

#community .community-feed {
  gap: 18px;
}

#community .community-post-card {
  overflow: visible;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#community .community-post-media {
  min-height: 420px;
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(20, 21, 22, 0.13);
}

#community .community-post-media img {
  min-height: 420px;
}

#community .community-post-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(8, 9, 11, 0.74));
}

#community .community-post-media span {
  z-index: 2;
  background: rgba(255, 255, 250, 0.9);
  color: #141516;
}

#community .community-post-body {
  position: relative;
  z-index: 2;
  margin: -24px 10px 0;
  border: 1px solid rgba(20, 21, 22, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.96);
  padding: 12px;
  box-shadow: 0 12px 28px rgba(20, 21, 22, 0.1);
}

#community .community-author-line {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

#community .community-author-line strong,
#community .community-author-line span {
  grid-column: 1;
}

#community .community-author-line::after {
  content: "Circle";
  grid-column: 2;
  grid-row: 1 / 3;
  border-radius: 999px;
  background: rgba(20, 21, 22, 0.06);
  color: var(--app-muted);
  padding: 5px 8px;
  font-size: 0.62rem;
  font-weight: 900;
}

#community .community-post-head {
  display: grid;
  gap: 9px;
}

#community .community-post-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
}

#community .community-post-actions .ghost-button,
#community .community-comment-form .ghost-button {
  min-width: 0;
  border-radius: 10px;
  font-size: 0.68rem;
}

#community .community-item-pills {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

#community .community-item-pills::-webkit-scrollbar {
  display: none;
}

#community .community-item-pills span {
  flex: 0 0 auto;
  max-width: 78%;
  overflow: hidden;
  background: rgba(20, 21, 22, 0.06);
  color: #25272d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#community .community-post-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

#community .community-post-stats span {
  border-radius: 10px;
  background: rgba(20, 21, 22, 0.04);
  padding: 7px;
  font-size: 0.62rem;
  font-weight: 850;
}

#community .community-comment-form {
  grid-template-columns: minmax(0, 1fr) 76px;
}

#community .community-empty {
  border-radius: 18px;
}

/* v47: Coach as chat, Fit as a fitting-room ticket. */
#coach,
#fit {
  background:
    linear-gradient(180deg, rgba(20, 21, 22, 0.04), transparent 220px),
    var(--app-bg);
}

#coach .section-head,
#fit .section-head {
  border-bottom-color: rgba(20, 21, 22, 0.08);
  background: rgba(246, 247, 242, 0.96);
}

#coach .coach-layout,
#fit .fit-layout {
  grid-template-columns: 1fr;
  gap: 10px;
}

#coach .coach-panel,
#fit .fit-panel {
  position: static;
  order: 2;
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.88);
  padding: 12px;
}

#coach .coach-answer-panel,
#fit .fit-result-panel {
  grid-column: auto;
  order: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#coach .coach-history-panel,
#fit .fit-history-panel {
  grid-column: auto;
  order: 3;
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.84);
  padding: 12px;
}

#coach .coach-answer,
#fit .fit-ticket {
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #141516;
  color: #fffefa;
  padding: 14px;
}

#coach .coach-answer {
  background:
    linear-gradient(145deg, rgba(217, 230, 107, 0.16), transparent 38%),
    #141516;
}

#fit .fit-ticket {
  background:
    linear-gradient(145deg, rgba(169, 52, 72, 0.18), transparent 38%),
    #141516;
}

#coach .coach-answer .eyebrow,
#fit .fit-ticket .eyebrow {
  color: var(--app-lime);
}

#coach .coach-answer h3,
#fit .fit-ticket h3 {
  color: #fffefa;
}

#coach #coachScore,
#fit #fitScore {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 250, 0.16);
  background: rgba(255, 255, 250, 0.08);
  color: #fffefa;
}

#coach .coach-metrics,
#fit .fit-metrics {
  overflow: hidden;
  gap: 0;
  border: 1px solid rgba(255, 255, 250, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 250, 0.06);
}

#coach .coach-metrics div,
#fit .fit-metrics div {
  border: 0;
  border-right: 1px solid rgba(255, 255, 250, 0.08);
  border-radius: 0;
  background: transparent;
  padding: 9px;
}

#coach .coach-metrics div:last-child,
#fit .fit-metrics div:last-child {
  border-right: 0;
}

#coach .coach-metrics strong,
#fit .fit-metrics strong {
  color: #fffefa;
}

#coach .coach-metrics span,
#fit .fit-metrics span {
  color: rgba(255, 255, 250, 0.58);
}

#coach .coach-message {
  align-items: start;
}

#coach .coach-message p {
  width: fit-content;
  max-width: 88%;
  margin: 0;
  border: 0;
  border-radius: 16px 16px 16px 5px;
  background: rgba(255, 255, 250, 0.1);
  color: rgba(255, 255, 250, 0.88);
  padding: 10px 12px;
}

#coach .coach-message .coach-prompt-bubble {
  justify-self: end;
  border-radius: 16px 16px 5px 16px;
  background: #fffefa;
  color: #141516;
  font-weight: 820;
}

#coach .coach-message .coach-ai-bubble:nth-child(odd) {
  background: rgba(217, 230, 107, 0.14);
  color: #eef6a6;
}

#coach .coach-items,
#fit .fit-alternative-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 78%);
  grid-template-columns: none;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#coach .coach-items::-webkit-scrollbar,
#fit .fit-alternative-grid::-webkit-scrollbar {
  display: none;
}

#coach .coach-item-card,
#fit .fit-alt-card {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: stretch;
  border: 1px solid rgba(255, 255, 250, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 250, 0.08);
  color: #fffefa;
  padding: 8px;
  scroll-snap-align: start;
}

#coach .coach-item-card img,
#fit .fit-alt-card img {
  width: 72px;
  height: 92px;
  border-radius: 12px;
}

#coach .coach-item-card strong,
#fit .fit-alt-card strong {
  color: #fffefa;
}

#coach .coach-item-card > div > span,
#fit .fit-alt-card > div > span {
  color: rgba(255, 255, 250, 0.58);
}

#coach .coach-item-tags {
  flex-wrap: nowrap;
  overflow: hidden;
}

#coach .coach-item-tags span {
  background: rgba(255, 255, 250, 0.1);
  color: rgba(255, 255, 250, 0.72);
}

#coach .coach-item-card .product-link,
#fit .fit-alt-card .product-link {
  grid-column: 2;
  width: fit-content;
  background: #fffefa;
  color: #141516;
}

#fit .fit-readout {
  gap: 9px;
}

#fit .fit-hero-card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 250, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.08);
  padding: 8px;
}

#fit .fit-hero-card img {
  width: 104px;
  height: 136px;
  border-radius: 14px;
  object-fit: cover;
}

#fit .fit-hero-card div {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 6px;
}

#fit .fit-hero-card span {
  overflow: hidden;
  color: rgba(255, 255, 250, 0.58);
  font-size: 0.68rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

#fit .fit-hero-card strong {
  color: #fffefa;
  font-size: 1.04rem;
  line-height: 1.08;
}

#fit .fit-hero-card em {
  width: fit-content;
  border-radius: 999px;
  background: var(--app-lime);
  color: #141516;
  padding: 6px 9px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

#fit .fit-readout p {
  margin: 0;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 250, 0.08);
  color: rgba(255, 255, 250, 0.82);
  padding: 10px 12px;
}

#fit .fit-readout p:nth-child(even) {
  background: rgba(217, 230, 107, 0.12);
  color: #eef6a6;
}

#fit .fit-alternatives h4 {
  color: #fffefa;
}

#coach .coach-history-card,
#fit .fit-history-card {
  border: 1px solid rgba(20, 21, 22, 0.08);
  border-left: 0;
  border-radius: 14px;
  background: rgba(20, 21, 22, 0.035);
}

@media (max-width: 680px) {
  #coach .coach-metrics,
  #fit .fit-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #coach .coach-metrics div:nth-child(2),
  #fit .fit-metrics div:nth-child(2) {
    border-right: 0;
  }

  #coach .coach-metrics div:nth-child(-n + 2),
  #fit .fit-metrics div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 250, 0.08);
  }
}

/* v48: Planner as a day itinerary, Capsule as a wardrobe rail. */
#planner,
#capsule {
  background:
    linear-gradient(180deg, rgba(20, 21, 22, 0.05), transparent 260px),
    var(--app-bg);
}

#planner .section-head,
#capsule .section-head {
  border-bottom-color: rgba(20, 21, 22, 0.08);
  background: rgba(246, 247, 242, 0.96);
}

#planner .planner-layout,
#capsule .capsule-layout {
  grid-template-columns: 1fr;
  gap: 10px;
}

#planner .planner-panel,
#capsule .capsule-panel {
  position: static;
  order: 2;
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.9);
  padding: 12px;
}

#planner .planner-result-panel,
#capsule .capsule-board-panel {
  grid-column: auto;
  order: 1;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#planner .planner-history-panel,
#capsule .capsule-history-panel {
  grid-column: auto;
  order: 4;
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.86);
  padding: 12px;
}

#planner .planner-ticket,
#capsule .capsule-board {
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #141516;
  color: #fffefa;
  padding: 14px;
}

#planner .planner-ticket {
  background:
    linear-gradient(145deg, rgba(217, 230, 107, 0.14), transparent 40%),
    #141516;
}

#capsule .capsule-board {
  background:
    linear-gradient(145deg, rgba(169, 52, 72, 0.18), transparent 42%),
    #141516;
}

#planner .planner-ticket::after {
  right: 18px;
  left: 18px;
  background-image: linear-gradient(90deg, rgba(255, 255, 250, 0.24) 50%, transparent 0);
}

#planner .planner-ticket .eyebrow,
#capsule .capsule-board .eyebrow {
  color: var(--app-lime);
}

#planner .planner-ticket h3,
#capsule .capsule-board h3 {
  color: #fffefa;
}

#planner #plannerScore,
#capsule #capsuleScore {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 250, 0.16);
  background: rgba(255, 255, 250, 0.08);
  color: #fffefa;
}

#planner .planner-metrics,
#capsule .capsule-metrics {
  overflow: hidden;
  gap: 0;
  border: 1px solid rgba(255, 255, 250, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 250, 0.06);
}

#planner .planner-metrics div,
#capsule .capsule-metrics div {
  border: 0;
  border-right: 1px solid rgba(255, 255, 250, 0.08);
  border-radius: 0;
  background: transparent;
  padding: 9px;
}

#planner .planner-metrics div:last-child,
#capsule .capsule-metrics div:last-child {
  border-right: 0;
}

#planner .planner-metrics strong,
#capsule .capsule-metrics strong {
  color: #fffefa;
}

#planner .planner-metrics span,
#capsule .capsule-metrics span {
  color: rgba(255, 255, 250, 0.58);
}

#planner .planner-outfit,
#capsule .capsule-items {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 64%);
  grid-template-columns: none;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#planner .planner-outfit::-webkit-scrollbar,
#capsule .capsule-items::-webkit-scrollbar {
  display: none;
}

#planner .planner-slot,
#capsule .capsule-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: end;
  min-height: 236px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 250, 0.1);
  border-radius: 18px;
  background: #08090b;
  color: #fffefa;
  padding: 0;
  scroll-snap-align: start;
}

#planner .planner-slot img,
#capsule .capsule-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

#planner .planner-slot::after,
#capsule .capsule-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(8, 9, 11, 0.86));
}

#planner .planner-slot > div,
#capsule .capsule-item > div {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 4px;
  padding: 76px 10px 10px;
}

#planner .planner-slot strong,
#capsule .capsule-item strong {
  display: -webkit-box;
  overflow: hidden;
  color: #fffefa;
  font-size: 0.88rem;
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#planner .planner-slot span,
#capsule .capsule-item > div > span {
  overflow: hidden;
  color: rgba(255, 255, 250, 0.62);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#planner .planner-slot-price {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.9);
  color: #141516 !important;
  padding: 6px 8px;
  font-size: 0.62rem;
}

#planner .planner-source-user .planner-slot-price,
#capsule .capsule-source-user .capsule-tags span:last-child {
  background: var(--app-lime);
  color: #141516 !important;
}

#planner .planner-reasons p {
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 250, 0.08);
  color: rgba(255, 255, 250, 0.82);
  padding: 10px 12px;
}

#planner .planner-reasons p:nth-child(odd) {
  background: rgba(217, 230, 107, 0.12);
  color: #eef6a6;
}

#capsule .capsule-tags {
  position: relative;
  z-index: 2;
  flex-wrap: nowrap;
  overflow: hidden;
}

#capsule .capsule-tags span {
  background: rgba(255, 255, 250, 0.12);
  color: rgba(255, 255, 250, 0.76);
}

#capsule .capsule-item .product-link {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  background: #fffefa;
  color: #141516;
}

#capsule .capsule-outfits-panel {
  grid-column: auto;
  order: 3;
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.9);
  padding: 12px;
}

#capsule .capsule-outfits {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 82%);
  grid-template-columns: none;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#capsule .capsule-outfits::-webkit-scrollbar {
  display: none;
}

#capsule .capsule-outfit-card {
  border: 0;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(20, 21, 22, 0.92), rgba(20, 21, 22, 0.76)),
    #141516;
  color: #fffefa;
  padding: 12px;
  scroll-snap-align: start;
}

#capsule .capsule-outfit-head span {
  color: var(--app-lime);
}

#capsule .capsule-outfit-head strong,
#capsule .capsule-outfit-items strong {
  color: #fffefa;
}

#capsule .capsule-outfit-items span {
  grid-template-columns: 62px minmax(0, 1fr);
  border-top: 1px solid rgba(255, 255, 250, 0.1);
  color: rgba(255, 255, 250, 0.7);
  padding-top: 7px;
}

#planner .planner-history-card,
#capsule .capsule-history-card {
  border: 1px solid rgba(20, 21, 22, 0.08);
  border-left: 0;
  border-radius: 14px;
  background: rgba(20, 21, 22, 0.035);
}

@media (max-width: 680px) {
  #planner .planner-metrics,
  #capsule .capsule-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #planner .planner-metrics div:nth-child(2),
  #capsule .capsule-metrics div:nth-child(2) {
    border-right: 0;
  }

  #planner .planner-metrics div:nth-child(-n + 2),
  #capsule .capsule-metrics div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 250, 0.08);
  }
}

/* v49: Discover as a swipeable product feed card. */
#discover {
  background:
    linear-gradient(180deg, #141516 0, #1d1f1b 290px, var(--app-bg) 700px),
    var(--app-bg);
  padding-top: 0;
}

#discover .section-head {
  margin: 0 -9px 10px;
  border-bottom-color: rgba(255, 255, 250, 0.1);
  background: rgba(20, 21, 22, 0.96);
  color: #fffefa;
}

#discover .section-head .eyebrow {
  color: var(--app-lime);
}

#discover .section-head h2 {
  color: #fffefa;
}

#discover .section-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#discover .section-actions .primary-button {
  grid-column: 1 / -1;
  background: #fffefa;
  color: #141516;
}

#discover .section-actions .ghost-button {
  border-color: rgba(255, 255, 250, 0.16);
  background: rgba(255, 255, 250, 0.08);
  color: #fffefa;
}

#discover .discover-layout {
  grid-template-columns: 1fr;
  gap: 10px;
}

#discover .discover-card-panel {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

#discover .discover-card {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: min(68vh, 620px);
  border: 1px solid rgba(255, 255, 250, 0.12);
  border-radius: 24px;
  background: #08090b;
  box-shadow: 0 18px 42px rgba(20, 21, 22, 0.18);
}

#discover .discover-media {
  position: absolute;
  inset: 0;
  min-height: 0;
  background: #08090b;
}

#discover .discover-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#discover .discover-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 9, 11, 0.12), transparent 38%, rgba(8, 9, 11, 0.9)),
    linear-gradient(90deg, rgba(8, 9, 11, 0.26), transparent 58%);
}

#discover #discoverScore {
  top: 14px;
  right: 14px;
  bottom: auto;
  z-index: 3;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(255, 255, 250, 0.18);
  background: rgba(20, 21, 22, 0.72);
  color: #fffefa;
  backdrop-filter: blur(14px);
}

#discover #discoverScore::after {
  content: "pkt";
  display: block;
  margin-top: -8px;
  color: rgba(255, 255, 250, 0.58);
  font-size: 0.56rem;
  font-weight: 900;
  text-transform: uppercase;
}

#discover .discover-body {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 255, 250, 0.12);
  border-radius: 20px;
  background: rgba(20, 21, 22, 0.72);
  color: #fffefa;
  padding: 12px;
  backdrop-filter: blur(18px);
}

#discover .discover-body .eyebrow {
  color: var(--app-lime);
}

#discover .discover-body h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #fffefa;
  font-size: 1.18rem;
  line-height: 1.04;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#discover .discover-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 250, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 250, 0.06);
}

#discover .discover-meta div {
  min-width: 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 250, 0.08);
  border-radius: 0;
  background: transparent;
  padding: 8px;
}

#discover .discover-meta div:last-child {
  border-right: 0;
}

#discover .discover-meta strong {
  overflow: hidden;
  color: #fffefa;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#discover .discover-meta span {
  color: rgba(255, 255, 250, 0.56);
  font-size: 0.56rem;
}

#discover .discover-tags {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 5px;
  margin-top: 0;
  padding-bottom: 1px;
  scrollbar-width: none;
}

#discover .discover-tags::-webkit-scrollbar {
  display: none;
}

#discover .discover-tags span {
  flex: 0 0 auto;
  max-width: 72%;
  overflow: hidden;
  background: rgba(255, 255, 250, 0.1);
  color: rgba(255, 255, 250, 0.74);
  padding: 6px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#discover .discover-reasons {
  gap: 6px;
}

#discover .discover-reasons p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(217, 230, 107, 0.12);
  color: #eef6a6;
  padding: 8px 10px;
  font-size: 0.72rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#discover .discover-product-link {
  justify-content: center;
  width: 100%;
  background: #fffefa;
  color: #141516;
}

#discover .discover-side-panel {
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.9);
  padding: 12px;
}

#discover .discover-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(20, 21, 22, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 250, 0.7);
}

#discover .discover-metrics div {
  min-width: 0;
  border: 0;
  border-right: 1px solid rgba(20, 21, 22, 0.07);
  border-radius: 0;
  background: transparent;
  padding: 9px;
}

#discover .discover-metrics div:last-child {
  border-right: 0;
}

#discover .discover-metrics strong {
  overflow: hidden;
  color: var(--app-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#discover .discover-queue {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 46%);
  grid-template-columns: none;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#discover .discover-queue::-webkit-scrollbar {
  display: none;
}

#discover .discover-queue > .eyebrow {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 92px;
  border: 1px dashed rgba(20, 21, 22, 0.14);
  border-radius: 16px;
  color: var(--app-muted);
  padding: 8px;
  text-align: center;
}

#discover .discover-queue-card {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 210px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: #08090b;
  color: #fffefa;
  padding: 0;
  scroll-snap-align: start;
}

#discover button.discover-queue-card {
  width: 100%;
  appearance: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

#discover button.discover-queue-card:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 250, 0.72), 0 10px 22px rgba(8, 9, 11, 0.22);
}

#discover button.discover-queue-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

#discover .discover-queue-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

#discover .discover-queue-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(8, 9, 11, 0.88));
}

#discover .discover-queue-card div {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 4px;
  padding: 76px 9px 9px;
}

#discover .discover-queue-card strong {
  display: -webkit-box;
  overflow: hidden;
  color: #fffefa;
  font-size: 0.76rem;
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#discover .discover-queue-card span {
  overflow: hidden;
  color: rgba(255, 255, 250, 0.62);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#discover .discover-queue-score {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 34px;
  min-height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.9);
  color: #141516 !important;
  padding: 0 8px;
  font-weight: 950;
}

@media (max-width: 680px) {
  #discover .discover-card {
    min-height: min(68vh, 590px);
  }

  #discover .discover-meta,
  #discover .discover-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #discover .discover-meta div:nth-child(2),
  #discover .discover-metrics div:nth-child(2) {
    border-right: 0;
  }

  #discover .discover-meta div:nth-child(-n + 2),
  #discover .discover-metrics div:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 250, 0.08);
  }

  #discover .discover-metrics div:nth-child(-n + 2) {
    border-bottom-color: rgba(20, 21, 22, 0.07);
  }
}

/* v50: Brain as a style-memory lab. */
#brain {
  background:
    linear-gradient(180deg, #141516 0, #20221e 260px, var(--app-bg) 620px),
    var(--app-bg);
  padding-top: 0;
}

#brain .section-head {
  margin: 0 -9px 10px;
  border-bottom-color: rgba(255, 255, 250, 0.1);
  background: rgba(20, 21, 22, 0.96);
  color: #fffefa;
}

#brain .section-head .eyebrow {
  color: var(--app-lime);
}

#brain .section-head h2 {
  color: #fffefa;
}

#brain .section-head .ghost-button {
  border-color: rgba(255, 255, 250, 0.16);
  background: rgba(255, 255, 250, 0.08);
  color: #fffefa;
}

#brain .brain-layout {
  grid-template-columns: 1fr;
  gap: 10px;
}

#brain .brain-panel {
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.9);
  padding: 12px;
}

#brain #profileForm {
  overflow: hidden;
  border-color: rgba(255, 255, 250, 0.12);
  background:
    linear-gradient(145deg, rgba(217, 230, 107, 0.14), transparent 42%),
    #141516;
  color: #fffefa;
}

#brain #profileForm .eyebrow,
#brain #profileForm label {
  color: rgba(255, 255, 250, 0.66);
}

#brain #profileForm h3 {
  color: #fffefa;
}

#brain #profileForm .field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#brain #profileForm label {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 250, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 250, 0.07);
  padding: 10px;
}

#brain #profileForm select,
#brain #profileForm input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border-color: rgba(255, 255, 250, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 250, 0.92);
  color: #141516;
}

#brain #profileForm .primary-button {
  background: #fffefa;
  color: #141516;
}

#brain #profileForm .status-line {
  color: var(--app-lime);
}

#brain #ruleForm {
  border: 1px solid rgba(20, 21, 22, 0.08);
  background: rgba(255, 255, 250, 0.9);
}

#brain #ruleForm label {
  display: grid;
  gap: 7px;
  border-bottom: 1px solid rgba(20, 21, 22, 0.07);
  padding-bottom: 10px;
}

#brain #ruleForm label:last-of-type {
  border-bottom: 0;
}

#brain #ruleForm input {
  border-radius: 12px;
  background: rgba(20, 21, 22, 0.035);
}

#brain .rules-panel {
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: 0;
}

#brain .rules-panel .panel-head {
  border: 1px solid rgba(20, 21, 22, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 250, 0.9);
  padding: 12px;
}

#brain .brain-count {
  min-width: 44px;
  height: 36px;
  border-radius: 999px;
  background: #141516;
  color: #fffefa;
  font-size: 0.84rem;
}

#brain .rule-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 82%);
  grid-template-columns: none;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#brain .rule-list::-webkit-scrollbar {
  display: none;
}

#brain .rule-card {
  position: relative;
  display: grid;
  min-height: 190px;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(217, 230, 107, 0.16), transparent 45%),
    #141516;
  color: #fffefa;
  padding: 14px;
  scroll-snap-align: start;
}

#brain .rule-card-negative {
  background:
    linear-gradient(145deg, rgba(169, 52, 72, 0.28), transparent 48%),
    #141516;
}

#brain .rule-card::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 250, 0.22), rgba(255, 255, 250, 0.06));
}

#brain .rule-card > div:first-child {
  display: grid;
  align-content: end;
  gap: 8px;
  min-width: 0;
  padding-top: 32px;
}

#brain .rule-card strong {
  display: -webkit-box;
  overflow: hidden;
  color: #fffefa;
  font-size: 1rem;
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#brain .rule-card p {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 250, 0.72);
  font-size: 0.76rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

#brain .rule-card .pill-row {
  max-height: none;
  overflow: hidden;
  gap: 5px;
}

#brain .rule-card .pill {
  background: rgba(255, 255, 250, 0.1);
  color: rgba(255, 255, 250, 0.76);
  font-size: 0.62rem;
}

#brain .rule-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: end;
  margin-top: 12px;
}

#brain .rule-actions span {
  border-radius: 999px;
  background: var(--app-lime);
  color: #141516;
  padding: 6px 9px;
  font-size: 0.68rem;
}

#brain .rule-card-negative .rule-actions span {
  background: rgba(255, 255, 250, 0.14);
  color: #fffefa;
}

#brain .rule-actions .ghost-button {
  min-height: 32px;
  border-color: rgba(255, 255, 250, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 250, 0.08);
  color: #fffefa;
}

@media (max-width: 420px) {
  #brain #profileForm .field-grid {
    grid-template-columns: 1fr;
  }
}

/* v51: Lookbook showroom and clienteling desk, built as mobile app surfaces. */
#lookbook,
#clients {
  --v51-ink: #151515;
  --v51-paper: #fbfaf4;
  --v51-milk: #fffdf6;
  --v51-oyster: #e8ece9;
  --v51-rust: #9a5535;
  --v51-petrol: #164e4f;
  --v51-rose: #bf3f57;
  --v51-steel: #637277;
  background:
    linear-gradient(180deg, rgba(21, 21, 21, 0.96) 0 150px, transparent 150px),
    var(--v51-paper);
  padding-top: 0;
}

#lookbook .section-head,
#clients .section-head {
  margin: 0 -9px 10px;
  border-bottom: 1px solid rgba(255, 253, 246, 0.12);
  background: rgba(21, 21, 21, 0.98);
  color: var(--v51-milk);
}

#lookbook .section-head .eyebrow,
#clients .section-head .eyebrow {
  color: #d7e5e8;
}

#lookbook .section-head h2,
#clients .section-head h2 {
  color: var(--v51-milk);
  font-size: clamp(1.28rem, 5.2vw, 1.9rem);
}

#lookbook .section-actions,
#clients .section-actions,
#lookbook .reservation-actions,
#lookbook .followup-actions,
#clients .client-dossier-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

#lookbook .section-actions::-webkit-scrollbar,
#clients .section-actions::-webkit-scrollbar,
#lookbook .reservation-actions::-webkit-scrollbar,
#lookbook .followup-actions::-webkit-scrollbar,
#clients .client-dossier-actions::-webkit-scrollbar {
  display: none;
}

#lookbook .section-head .primary-button,
#clients .section-head .primary-button,
#lookbook .section-head .ghost-button,
#clients .section-head .ghost-button {
  min-height: 36px;
  border-color: rgba(255, 253, 246, 0.16);
  border-radius: 999px;
  padding: 0 12px;
  white-space: nowrap;
}

#lookbook .section-head .primary-button,
#clients .section-head .primary-button {
  background: var(--v51-milk);
  color: var(--v51-ink);
}

#lookbook .section-head .ghost-button,
#clients .section-head .ghost-button {
  background: rgba(255, 253, 246, 0.08);
  color: var(--v51-milk);
}

#lookbook .lookbook-layout,
#clients .clients-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#lookbook .lookbook-panel,
#clients .client-form {
  position: static;
  overflow: hidden;
  border: 1px solid rgba(21, 21, 21, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(154, 85, 53, 0.14), transparent 42%),
    var(--v51-milk);
  box-shadow: 0 18px 42px rgba(21, 21, 21, 0.08);
  padding: 12px;
}

#lookbook .lookbook-panel .panel-head,
#clients .client-form .panel-head {
  margin-bottom: 0;
}

#lookbook .lookbook-panel label,
#clients .client-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(21, 21, 21, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.62);
  padding: 9px;
  color: rgba(21, 21, 21, 0.58);
}

#lookbook .lookbook-panel input,
#lookbook .lookbook-panel select,
#clients .client-form input,
#clients .client-form select {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border-color: rgba(21, 21, 21, 0.08);
  border-radius: 10px;
  background: #fff;
  color: var(--v51-ink);
}

#lookbook .lookbook-panel .field-grid,
#clients .client-form .field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#lookbook .lookbook-workbench,
#clients .client-workbench {
  display: grid;
  gap: 10px;
}

#lookbook .lookbook-metrics,
#clients .client-metrics,
#lookbook .reservation-metrics,
#clients .client-dossier-metrics,
#clients .action-queue-metrics {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 38%);
  grid-template-columns: none;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 0 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#lookbook .lookbook-metrics::-webkit-scrollbar,
#clients .client-metrics::-webkit-scrollbar,
#lookbook .reservation-metrics::-webkit-scrollbar,
#clients .client-dossier-metrics::-webkit-scrollbar,
#clients .action-queue-metrics::-webkit-scrollbar {
  display: none;
}

#lookbook .lookbook-metrics div,
#clients .client-metrics div,
#lookbook .reservation-metrics div,
#clients .client-dossier-metrics div,
#clients .action-queue-metrics div {
  min-height: 76px;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(215, 229, 232, 0.66), rgba(255, 253, 246, 0.92)),
    var(--v51-milk);
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.06);
  padding: 12px;
  scroll-snap-align: start;
}

#lookbook .lookbook-metrics strong,
#clients .client-metrics strong,
#lookbook .reservation-metrics strong,
#clients .client-dossier-metrics strong,
#clients .action-queue-metrics strong {
  color: var(--v51-ink);
  font-size: 1.02rem;
}

#lookbook .lookbook-metrics span,
#clients .client-metrics span,
#lookbook .reservation-metrics span,
#clients .client-dossier-metrics span,
#clients .action-queue-metrics span {
  margin-top: 3px;
  color: var(--v51-steel);
  font-size: 0.67rem;
  line-height: 1.15;
}

#lookbook .lookbook-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 84%);
  grid-template-columns: none;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

#lookbook .lookbook-grid::-webkit-scrollbar {
  display: none;
}

#lookbook .look-card {
  position: relative;
  display: grid;
  min-height: 520px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(21, 21, 21, 0.02), rgba(21, 21, 21, 0.9)),
    var(--v51-ink);
  color: var(--v51-milk);
  box-shadow: 0 18px 48px rgba(21, 21, 21, 0.18);
  padding: 12px;
  scroll-snap-align: center;
}

#lookbook .look-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(145deg, rgba(154, 85, 53, 0.34), transparent 42%),
    radial-gradient(circle at 85% 12%, rgba(215, 229, 232, 0.2), transparent 30%);
  pointer-events: none;
}

#lookbook .look-card-trend::before {
  background:
    linear-gradient(145deg, rgba(191, 63, 87, 0.36), transparent 42%),
    radial-gradient(circle at 85% 12%, rgba(215, 229, 232, 0.2), transparent 30%);
}

#lookbook .look-card-budget::before {
  background:
    linear-gradient(145deg, rgba(22, 78, 79, 0.38), transparent 42%),
    radial-gradient(circle at 85% 12%, rgba(215, 229, 232, 0.2), transparent 30%);
}

#lookbook .look-card > * {
  position: relative;
  z-index: 1;
}

#lookbook .look-card-head {
  align-items: flex-start;
}

#lookbook .trend-score {
  display: inline-flex;
  max-width: 100%;
  border: 1px solid rgba(255, 253, 246, 0.16);
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.1);
  color: rgba(255, 253, 246, 0.76);
  padding: 6px 9px;
  font-size: 0.63rem;
  font-weight: 900;
  line-height: 1;
}

#lookbook .look-card-head h3 {
  margin-top: 10px;
  color: var(--v51-milk);
  font-size: clamp(1.24rem, 6vw, 1.9rem);
  line-height: 0.98;
}

#lookbook .look-card-head > strong {
  border-radius: 999px;
  background: var(--v51-milk);
  color: var(--v51-ink);
  padding: 7px 10px;
  font-size: 0.78rem;
}

#lookbook .look-products {
  display: grid;
  grid-template-columns: 1.35fr repeat(2, minmax(0, 0.82fr));
  grid-auto-rows: minmax(94px, auto);
  gap: 7px;
  align-self: end;
  margin-top: auto;
}

#lookbook .look-product {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 253, 246, 0.1);
  color: inherit;
}

#lookbook .look-product:first-child {
  grid-row: span 2;
}

#lookbook .look-product img {
  width: 100%;
  height: 100%;
  min-height: 112px;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
}

#lookbook .look-product:first-child img {
  min-height: 236px;
}

#lookbook .look-product span {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  display: -webkit-box;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(21, 21, 21, 0.64);
  color: var(--v51-milk);
  padding: 6px 7px;
  font-size: 0.62rem;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  backdrop-filter: blur(12px);
}

#lookbook .look-product-wardrobe::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d7e5e8;
  box-shadow: 0 0 0 4px rgba(21, 21, 21, 0.22);
}

#lookbook .look-stats {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

#lookbook .look-stats::-webkit-scrollbar {
  display: none;
}

#lookbook .look-stats span {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 253, 246, 0.14);
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.09);
  color: rgba(255, 253, 246, 0.8);
  padding: 7px 9px;
  font-size: 0.66rem;
  white-space: nowrap;
}

#lookbook .look-script {
  display: grid;
  gap: 6px;
}

#lookbook .look-script p {
  border: 0;
  border-radius: 13px;
  background: rgba(255, 253, 246, 0.09);
  color: rgba(255, 253, 246, 0.82);
  padding: 9px;
  font-size: 0.74rem;
}

#lookbook .look-card .primary-button {
  min-height: 42px;
  border-radius: 999px;
  background: var(--v51-milk);
  color: var(--v51-ink);
}

#lookbook .reservation-panel,
#lookbook .followup-panel,
#clients .client-dossier-panel,
#clients .sales-funnel-panel,
#clients .action-queue-panel {
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--v51-milk);
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.08);
  padding: 12px;
}

#lookbook .reservation-head,
#lookbook .followup-head,
#clients .client-dossier-head,
#clients .sales-funnel-head,
#clients .action-queue-head {
  align-items: flex-start;
}

#lookbook .reservation-head h3,
#lookbook .followup-head h3,
#clients .client-dossier-head h3,
#clients .sales-funnel-head h3,
#clients .action-queue-head h3 {
  font-size: 1.02rem;
  line-height: 1.08;
}

#lookbook .reservation-actions .ghost-button,
#lookbook .followup-actions .ghost-button,
#lookbook .followup-actions .primary-button,
#clients .client-dossier-actions .ghost-button,
#clients .action-queue-head .ghost-button {
  flex: 0 0 auto;
  border-radius: 999px;
  white-space: nowrap;
}

#lookbook .reservation-card,
#lookbook .order-card {
  grid-template-columns: 1fr;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(154, 85, 53, 0.16), transparent 44%),
    #fff;
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.07);
}

#lookbook .reservation-products {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

#lookbook .reservation-products::-webkit-scrollbar {
  display: none;
}

#lookbook .reservation-products span {
  flex: 0 0 auto;
  background: var(--v51-oyster);
}

#lookbook .order-card-actions {
  justify-content: flex-start;
}

#lookbook .followup-preview,
#lookbook .followup-history,
#lookbook .order-list,
#lookbook .reservation-list {
  min-width: 0;
}

#clients .client-dossier-panel {
  background:
    linear-gradient(145deg, rgba(22, 78, 79, 0.24), transparent 42%),
    var(--v51-ink);
  color: var(--v51-milk);
}

#clients .client-dossier-panel .eyebrow,
#clients .client-dossier-panel h3 {
  color: var(--v51-milk);
}

#clients .client-dossier-actions select {
  flex: 0 0 min(210px, 72vw);
  border-color: rgba(255, 253, 246, 0.14);
  border-radius: 999px;
  background: rgba(255, 253, 246, 0.1);
  color: var(--v51-milk);
}

#clients .client-dossier-actions .ghost-button {
  border-color: rgba(255, 253, 246, 0.14);
  background: rgba(255, 253, 246, 0.1);
  color: var(--v51-milk);
}

#clients .client-dossier-metrics div {
  background: rgba(255, 253, 246, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 246, 0.1);
}

#clients .client-dossier-metrics strong {
  color: var(--v51-milk);
}

#clients .client-dossier-metrics span {
  color: rgba(255, 253, 246, 0.62);
}

#clients .client-dossier-main {
  border: 0;
  border-radius: 18px;
  background: rgba(255, 253, 246, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 246, 0.1);
}

#clients .client-dossier-profile {
  grid-template-columns: 1fr;
}

#clients .client-dossier-profile span,
#clients .client-dossier-risk span,
#clients .client-product-card span,
#clients .client-dossier-note span,
#clients .client-message-card span {
  color: rgba(255, 253, 246, 0.62);
}

#clients .client-dossier-profile strong,
#clients .client-dossier-risk strong,
#clients .client-product-card strong,
#clients .client-dossier-note strong {
  color: var(--v51-milk);
}

#clients .client-dossier-profile p,
#clients .client-product-card p,
#clients .client-dossier-note p,
#clients .client-message-card p {
  color: rgba(255, 253, 246, 0.74);
}

#clients .client-dossier-risk,
#clients .client-product-card,
#clients .client-dossier-note,
#clients .client-message-card {
  border: 1px solid rgba(255, 253, 246, 0.1);
  border-radius: 16px;
  background: rgba(255, 253, 246, 0.08);
}

#clients .client-product-card {
  grid-template-columns: 76px minmax(0, 1fr);
}

#clients .client-product-card img {
  width: 76px;
  height: 96px;
  border-radius: 13px;
}

#clients .client-dossier-grid {
  grid-template-columns: 1fr;
}

#clients .client-relationship-timeline-card {
  grid-column: auto;
}

#clients .mini-product-link {
  display: inline-flex;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--v51-milk);
  color: var(--v51-ink);
  padding: 7px 10px;
}

#clients .sales-funnel-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 40%);
  grid-template-columns: none;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#clients .sales-funnel-grid::-webkit-scrollbar {
  display: none;
}

#clients .sales-funnel-stage {
  min-height: 132px;
  border: 0;
  border-radius: 17px;
  background:
    linear-gradient(145deg, rgba(22, 78, 79, 0.14), transparent 52%),
    #fff;
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.07);
  scroll-snap-align: start;
}

#clients .sales-funnel-reservation,
#clients .sales-funnel-followups {
  background:
    linear-gradient(145deg, rgba(154, 85, 53, 0.16), transparent 52%),
    #fff;
}

#clients .sales-funnel-reservation-outcomes {
  background:
    linear-gradient(145deg, rgba(213, 101, 74, 0.18), transparent 52%),
    #fff;
}

#clients .sales-funnel-reactivation {
  background:
    linear-gradient(145deg, rgba(135, 100, 199, 0.18), transparent 52%),
    #fff;
}

#clients .sales-funnel-recovery {
  background:
    linear-gradient(145deg, rgba(44, 127, 144, 0.18), transparent 52%),
    #fff;
}

#clients .client-reactivation-card {
  background:
    linear-gradient(145deg, rgba(135, 100, 199, 0.14), transparent 52%),
    #fff;
}

#clients .client-recovery-card {
  background:
    linear-gradient(145deg, rgba(44, 127, 144, 0.14), transparent 52%),
    #fff;
}

#clients .client-reactivation-pause-controls select {
  border-color: rgba(255, 253, 246, 0.16);
  background: rgba(255, 253, 246, 0.94);
  color: var(--v51-ink);
}

#clients .client-relationship-timeline li {
  border-color: rgba(255, 253, 246, 0.12);
}

#clients .client-relationship-timeline li > span {
  color: rgba(255, 253, 246, 0.58);
}

#clients .sales-funnel-sold {
  background:
    linear-gradient(145deg, rgba(191, 63, 87, 0.18), transparent 52%),
    #fff;
}

#clients .sales-funnel-insight {
  border: 0;
  border-radius: 16px;
  background: rgba(22, 78, 79, 0.1);
  color: var(--v51-petrol);
}

#clients .action-queue-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 78%);
  grid-template-columns: none;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#clients .action-queue-list::-webkit-scrollbar {
  display: none;
}

#clients .queue-card {
  grid-template-columns: 1fr;
  min-height: 156px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    inset 5px 0 0 var(--v51-steel),
    inset 0 0 0 1px rgba(21, 21, 21, 0.07);
  scroll-snap-align: start;
}

#clients .queue-card-hot {
  box-shadow:
    inset 5px 0 0 var(--v51-rose),
    inset 0 0 0 1px rgba(21, 21, 21, 0.07);
}

#clients .queue-card-warm {
  box-shadow:
    inset 5px 0 0 var(--v51-rust),
    inset 0 0 0 1px rgba(21, 21, 21, 0.07);
}

#clients .queue-card-calm {
  box-shadow:
    inset 5px 0 0 var(--v51-petrol),
    inset 0 0 0 1px rgba(21, 21, 21, 0.07);
}

#clients .action-card-actions {
  justify-content: flex-start;
}

#clients .client-pipeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(266px, 82%);
  grid-template-columns: none;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

#clients .client-pipeline::-webkit-scrollbar {
  display: none;
}

#clients .pipeline-column {
  min-height: 330px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.07);
  padding: 11px;
  scroll-snap-align: center;
}

#clients .pipeline-column-new {
  background:
    linear-gradient(145deg, rgba(215, 229, 232, 0.58), transparent 48%),
    #fff;
}

#clients .pipeline-column-brief {
  background:
    linear-gradient(145deg, rgba(154, 85, 53, 0.16), transparent 48%),
    #fff;
}

#clients .pipeline-column-fitting {
  background:
    linear-gradient(145deg, rgba(22, 78, 79, 0.16), transparent 48%),
    #fff;
}

#clients .pipeline-column-won {
  background:
    linear-gradient(145deg, rgba(191, 63, 87, 0.15), transparent 48%),
    #fff;
}

#clients .pipeline-head {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: -2px -2px 9px;
  border-radius: 17px;
  background: rgba(255, 253, 246, 0.76);
  padding: 8px;
  backdrop-filter: blur(12px);
}

#clients .pipeline-head h3 {
  font-size: 0.92rem;
}

#clients .pipeline-head span {
  min-width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--v51-ink);
  color: var(--v51-milk);
}

#clients .pipeline-list {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: none;
}

#clients .pipeline-list::-webkit-scrollbar {
  display: none;
}

#clients .lead-card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    inset 0 0 0 1px rgba(21, 21, 21, 0.07),
    0 10px 24px rgba(21, 21, 21, 0.07);
  padding: 12px;
}

#clients .lead-card::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: var(--v51-steel);
}

#clients .lead-stage-new::before {
  background: #91a9ae;
}

#clients .lead-stage-brief::before {
  background: var(--v51-rust);
}

#clients .lead-stage-fitting::before {
  background: var(--v51-petrol);
}

#clients .lead-stage-won::before {
  background: var(--v51-rose);
}

#clients .lead-card-head {
  gap: 10px;
}

#clients .lead-card-head > div {
  min-width: 0;
}

#clients .lead-card-head strong {
  color: var(--v51-ink);
}

#clients .lead-card-head > strong {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--v51-ink);
  color: var(--v51-milk);
  padding: 6px 9px;
  font-size: 0.72rem;
}

#clients .lead-card-head span {
  color: var(--v51-steel);
  font-size: 0.69rem;
}

#clients .lead-card p {
  color: #404447;
  font-size: 0.78rem;
  line-height: 1.4;
}

#clients .lead-actions {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

#clients .lead-actions::-webkit-scrollbar {
  display: none;
}

#clients .lead-actions .ghost-button,
#clients .lead-actions .won-badge {
  flex: 0 0 auto;
  border-radius: 999px;
  white-space: nowrap;
}

#clients .pipeline-empty {
  border: 0;
  border-radius: 16px;
  background: rgba(21, 21, 21, 0.05);
  color: var(--v51-steel);
}

@media (min-width: 720px) {
  #lookbook .lookbook-layout,
  #clients .clients-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  #lookbook .lookbook-panel,
  #clients .client-form {
    position: sticky;
    top: 86px;
  }

  #lookbook .lookbook-grid {
    grid-auto-columns: minmax(320px, 48%);
  }

  #clients .client-pipeline {
    grid-auto-columns: minmax(250px, 42%);
  }

  #clients .action-queue-list {
    grid-auto-columns: minmax(240px, 46%);
  }
}

@media (max-width: 420px) {
  #lookbook .lookbook-panel .field-grid,
  #clients .client-form .field-grid {
    grid-template-columns: 1fr;
  }

  #lookbook .lookbook-grid,
  #clients .client-pipeline {
    grid-auto-columns: minmax(282px, 92%);
  }

  #lookbook .look-card {
    min-height: 500px;
  }

  #lookbook .look-products {
    grid-template-columns: 1.25fr minmax(0, 0.9fr);
  }

  #lookbook .look-product:nth-child(n + 4) {
    display: none;
  }

  #clients .client-dossier-head,
  #clients .sales-funnel-head,
  #clients .action-queue-head,
  #lookbook .reservation-head,
  #lookbook .followup-head {
    display: grid;
  }
}

/* v52: Report as a buying decision deck, Trends as a live signal desk. */
#report,
#trends {
  --v52-ink: #171311;
  --v52-paper: #f7f4ec;
  --v52-card: #fffdf7;
  --v52-fog: #e4ebe8;
  --v52-wine: #853f52;
  --v52-copper: #a7663e;
  --v52-pine: #245c52;
  --v52-denim: #445f82;
  --v52-muted: #6d6861;
  background:
    linear-gradient(180deg, rgba(23, 19, 17, 0.96) 0 142px, transparent 142px),
    var(--v52-paper);
  padding-top: 0;
}

#report .section-head,
#trends .section-head {
  margin: 0 -9px 10px;
  border-bottom: 1px solid rgba(255, 253, 247, 0.12);
  background: rgba(23, 19, 17, 0.98);
  color: var(--v52-card);
}

#report .section-head .eyebrow,
#trends .section-head .eyebrow {
  color: #d8d0bf;
}

#report .section-head h2,
#trends .section-head h2 {
  color: var(--v52-card);
  font-size: clamp(1.3rem, 5.1vw, 1.9rem);
}

#report .section-actions,
#trends .section-actions,
#report .campaign-actions,
#trends .trend-intel-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

#report .section-actions::-webkit-scrollbar,
#trends .section-actions::-webkit-scrollbar,
#report .campaign-actions::-webkit-scrollbar,
#trends .trend-intel-actions::-webkit-scrollbar {
  display: none;
}

#report .section-head .primary-button,
#trends .section-head .primary-button,
#report .section-head .ghost-button,
#trends .section-head .ghost-button {
  min-height: 36px;
  border-color: rgba(255, 253, 247, 0.16);
  border-radius: 999px;
  padding: 0 12px;
  white-space: nowrap;
}

#report .section-head .primary-button,
#trends .section-head .primary-button {
  background: var(--v52-card);
  color: var(--v52-ink);
}

#report .section-head .ghost-button,
#trends .section-head .ghost-button {
  background: rgba(255, 253, 247, 0.08);
  color: var(--v52-card);
}

#report .report-layout,
#trends .trend-lab {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#report .report-panel,
#trends .trend-form,
#trends .trend-intel-panel {
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--v52-card);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 17, 0.08);
  padding: 12px;
}

#trends .trend-form {
  position: static;
  background:
    linear-gradient(135deg, rgba(36, 92, 82, 0.16), transparent 44%),
    var(--v52-card);
}

#trends .trend-form label,
#trends .trend-brief-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(23, 19, 17, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.56);
  padding: 9px;
  color: rgba(23, 19, 17, 0.58);
}

#trends .trend-form input,
#trends .trend-form select,
#trends .trend-brief-field textarea {
  width: 100%;
  min-width: 0;
  border-color: rgba(23, 19, 17, 0.08);
  border-radius: 10px;
  background: #fff;
  color: var(--v52-ink);
}

#trends .trend-form .field-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#report .panel-head,
#trends .panel-head,
#trends .trend-intel-head {
  align-items: flex-start;
  margin-bottom: 9px;
}

#report .report-metrics,
#report .product-signal-metrics,
#report .restock-metrics,
#report .campaign-metrics,
#report .campaign-history-metrics,
#trends .trend-metrics {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 38%);
  grid-template-columns: none;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 0 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#report .report-metrics::-webkit-scrollbar,
#report .product-signal-metrics::-webkit-scrollbar,
#report .restock-metrics::-webkit-scrollbar,
#report .campaign-metrics::-webkit-scrollbar,
#report .campaign-history-metrics::-webkit-scrollbar,
#trends .trend-metrics::-webkit-scrollbar {
  display: none;
}

#report .report-metrics div,
#report .product-signal-metrics div,
#report .restock-metrics div,
#report .campaign-metrics div,
#report .campaign-history-metrics div,
#trends .trend-metrics div {
  min-height: 76px;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(228, 235, 232, 0.8), rgba(255, 253, 247, 0.88)),
    var(--v52-card);
  box-shadow: inset 0 0 0 1px rgba(23, 19, 17, 0.06);
  padding: 12px;
  scroll-snap-align: start;
}

#report .report-metrics strong,
#report .product-signal-metrics strong,
#report .restock-metrics strong,
#report .campaign-metrics strong,
#report .campaign-history-metrics strong,
#trends .trend-metrics strong {
  color: var(--v52-ink);
  font-size: 1.02rem;
}

#report .report-metrics span,
#report .product-signal-metrics span,
#report .restock-metrics span,
#report .campaign-metrics span,
#report .campaign-history-metrics span,
#trends .trend-metrics span {
  margin-top: 3px;
  color: var(--v52-muted);
  font-size: 0.67rem;
  line-height: 1.15;
}

#report .product-report-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(282px, 84%);
  grid-template-columns: none;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

#report .product-report-list::-webkit-scrollbar {
  display: none;
}

#report .product-report-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  min-height: 430px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background:
    linear-gradient(180deg, transparent 0, rgba(23, 19, 17, 0.88) 72%),
    var(--v52-ink);
  color: var(--v52-card);
  box-shadow: 0 18px 48px rgba(23, 19, 17, 0.17);
  padding: 12px;
  scroll-snap-align: center;
}

#report .product-report-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(145deg, rgba(167, 102, 62, 0.32), transparent 42%),
    radial-gradient(circle at 86% 12%, rgba(68, 95, 130, 0.24), transparent 30%);
  pointer-events: none;
}

#report .product-report-missing::before,
#report .product-report-blocked::before {
  background:
    linear-gradient(145deg, rgba(133, 63, 82, 0.38), transparent 42%),
    radial-gradient(circle at 86% 12%, rgba(68, 95, 130, 0.24), transparent 30%);
}

#report .product-report-row > * {
  position: relative;
  z-index: 1;
}

#report .report-rank {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--v52-card);
  color: var(--v52-ink);
}

#report .product-report-row img {
  width: calc(100% + 24px);
  height: 238px;
  max-width: none;
  margin: -12px -12px 0;
  border-radius: 0;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.02);
}

#report .product-report-row > div:not(.report-row-stats) {
  display: grid;
  gap: 5px;
  align-self: end;
  margin-top: 12px;
}

#report .product-report-row strong {
  color: var(--v52-card);
  font-size: 1.06rem;
  line-height: 1.1;
}

#report .product-report-row span,
#report .report-row-stats span {
  color: rgba(255, 253, 247, 0.68);
}

#report .report-bar {
  height: 6px;
  margin-top: 8px;
  background: rgba(255, 253, 247, 0.14);
}

#report .report-bar span {
  background: var(--v52-copper);
}

#report .product-report-available .report-bar span {
  background: #d8d0bf;
}

#report .product-report-low .report-bar span {
  background: var(--v52-copper);
}

#report .product-report-missing .report-bar span,
#report .product-report-blocked .report-bar span {
  background: var(--v52-wine);
}

#report .report-row-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 253, 247, 0.14);
  padding-top: 10px;
  text-align: left;
}

#report .report-row-stats strong {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--v52-card);
  color: var(--v52-ink);
  padding: 7px 10px;
  font-size: 0.82rem;
}

#report .action-report-list,
#report .product-signal-list,
#report .restock-list,
#report .campaign-segment-list,
#report .campaign-grid,
#report .campaign-history {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(248px, 78%);
  grid-template-columns: none;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#report .action-report-list::-webkit-scrollbar,
#report .product-signal-list::-webkit-scrollbar,
#report .restock-list::-webkit-scrollbar,
#report .campaign-segment-list::-webkit-scrollbar,
#report .campaign-grid::-webkit-scrollbar,
#report .campaign-history::-webkit-scrollbar {
  display: none;
}

#report .action-card,
#report .product-signal-row,
#report .restock-row,
#report .campaign-segment,
#report .campaign-segment-card,
#report .campaign-brief,
#report .campaign-copy-card,
#report .campaign-history-card {
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23, 19, 17, 0.07);
  scroll-snap-align: start;
}

#report .action-card {
  min-height: 142px;
  box-shadow:
    inset 5px 0 0 var(--v52-denim),
    inset 0 0 0 1px rgba(23, 19, 17, 0.07);
}

#report .action-hot {
  box-shadow:
    inset 5px 0 0 var(--v52-wine),
    inset 0 0 0 1px rgba(23, 19, 17, 0.07);
}

#report .action-warn {
  box-shadow:
    inset 5px 0 0 var(--v52-copper),
    inset 0 0 0 1px rgba(23, 19, 17, 0.07);
}

#report .action-good,
#report .action-neutral {
  box-shadow:
    inset 5px 0 0 var(--v52-pine),
    inset 0 0 0 1px rgba(23, 19, 17, 0.07);
}

#report .product-signal-row,
#report .restock-row {
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: start;
  min-height: 166px;
  background:
    linear-gradient(145deg, rgba(228, 235, 232, 0.64), transparent 58%),
    #fff;
}

#report .product-signal-hot,
#report .restock-hot,
#report .restock-missing {
  background:
    linear-gradient(145deg, rgba(133, 63, 82, 0.15), transparent 58%),
    #fff;
}

#report .product-signal-warm,
#report .restock-warn {
  background:
    linear-gradient(145deg, rgba(167, 102, 62, 0.16), transparent 58%),
    #fff;
}

#report .product-signal-row img,
#report .restock-row img {
  width: 74px;
  height: 92px;
  border-radius: 14px;
}

#report .product-signal-score,
#report .restock-row > strong {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(23, 19, 17, 0.08);
}

#report .restock-tags {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

#report .restock-tags::-webkit-scrollbar {
  display: none;
}

#report .restock-tags span {
  flex: 0 0 auto;
  background: var(--v52-fog);
}

#report .campaign-panel {
  background:
    linear-gradient(145deg, rgba(68, 95, 130, 0.12), transparent 50%),
    var(--v52-card);
}

#report .campaign-actions .primary-button,
#report .campaign-actions .ghost-button {
  flex: 0 0 auto;
  border-radius: 999px;
  white-space: nowrap;
}

#report .campaign-segment {
  display: grid;
  gap: 9px;
  padding: 11px;
}

#report .campaign-segment-list {
  margin: 0 -1px;
}

#report .campaign-segment-list > p {
  grid-column: auto;
  min-width: 240px;
}

#report .campaign-segment-card {
  min-height: 138px;
  padding: 11px;
}

#report .campaign-lead-fitting {
  box-shadow:
    inset 5px 0 0 var(--v52-pine),
    inset 0 0 0 1px rgba(23, 19, 17, 0.07);
}

#report .campaign-lead-brief {
  box-shadow:
    inset 5px 0 0 var(--v52-copper),
    inset 0 0 0 1px rgba(23, 19, 17, 0.07);
}

#report .campaign-brief,
#report .campaign-copy-card {
  min-height: 250px;
  padding: 13px;
}

#report .campaign-brief {
  background:
    linear-gradient(145deg, rgba(36, 92, 82, 0.16), transparent 50%),
    #fff;
}

#report .campaign-copy-instagram-dm {
  background:
    linear-gradient(145deg, rgba(133, 63, 82, 0.12), transparent 54%),
    #fff;
}

#report .campaign-copy-newsletter {
  background:
    linear-gradient(145deg, rgba(68, 95, 130, 0.12), transparent 54%),
    #fff;
}

#report .campaign-copy-sklep {
  background:
    linear-gradient(145deg, rgba(167, 102, 62, 0.13), transparent 54%),
    #fff;
}

#report .campaign-history-card {
  grid-template-columns: 1fr;
  min-height: 150px;
  padding: 12px;
}

#report .campaign-history-actions {
  justify-content: flex-start;
}

#trends .trend-workbench {
  display: grid;
  gap: 10px;
}

#trends .trend-intel-panel {
  background:
    linear-gradient(145deg, rgba(68, 95, 130, 0.14), transparent 44%),
    var(--v52-card);
}

#trends .trend-intel-head {
  display: grid;
  gap: 10px;
}

#trends .trend-intel-actions .primary-button,
#trends .trend-intel-actions .ghost-button {
  flex: 0 0 auto;
  border-radius: 999px;
  white-space: nowrap;
}

#trends .market-trend-preview {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 72%);
  grid-template-columns: none;
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#trends .market-trend-preview::-webkit-scrollbar {
  display: none;
}

#trends .market-trend-card {
  min-height: 150px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(23, 19, 17, 0.07);
  scroll-snap-align: start;
}

#trends .trend-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(278px, 84%);
  grid-template-columns: none;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

#trends .trend-grid::-webkit-scrollbar {
  display: none;
}

#trends .trend-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(23, 19, 17, 0.02), rgba(23, 19, 17, 0.9)),
    var(--v52-ink);
  color: var(--v52-card);
  box-shadow: 0 18px 48px rgba(23, 19, 17, 0.16);
  padding: 14px;
  scroll-snap-align: center;
}

#trends .trend-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(145deg, rgba(36, 92, 82, 0.36), transparent 43%),
    radial-gradient(circle at 86% 12%, rgba(216, 208, 191, 0.2), transparent 30%);
  pointer-events: none;
}

#trends .trend-card-hot::before {
  background:
    linear-gradient(145deg, rgba(133, 63, 82, 0.42), transparent 43%),
    radial-gradient(circle at 86% 12%, rgba(216, 208, 191, 0.2), transparent 30%);
}

#trends .trend-card-warm::before {
  background:
    linear-gradient(145deg, rgba(167, 102, 62, 0.38), transparent 43%),
    radial-gradient(circle at 86% 12%, rgba(216, 208, 191, 0.2), transparent 30%);
}

#trends .trend-card > * {
  position: relative;
  z-index: 1;
}

#trends .trend-card-expired {
  opacity: 0.62;
}

#trends .trend-card-head {
  align-items: flex-start;
}

#trends .trend-card-head .ghost-button {
  flex: 0 0 auto;
  border-color: rgba(255, 253, 247, 0.16);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.08);
  color: var(--v52-card);
}

#trends .trend-score {
  margin-bottom: 0;
  border: 1px solid rgba(255, 253, 247, 0.16);
  background: rgba(255, 253, 247, 0.1);
  color: rgba(255, 253, 247, 0.8);
}

#trends .trend-card h3 {
  margin-top: 46px;
  color: var(--v52-card);
  font-size: clamp(1.28rem, 6vw, 1.92rem);
  line-height: 1;
}

#trends .trend-card p {
  color: rgba(255, 253, 247, 0.78);
  font-size: 0.82rem;
  line-height: 1.45;
}

#trends .trend-card-meta {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

#trends .trend-card-meta::-webkit-scrollbar {
  display: none;
}

#trends .trend-card-meta span,
#trends .trend-card .pill {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 253, 247, 0.13);
  background: rgba(255, 253, 247, 0.09);
  color: rgba(255, 253, 247, 0.72);
}

#trends .trend-card .pill-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

#trends .trend-card .pill-row::-webkit-scrollbar {
  display: none;
}

@media (min-width: 720px) {
  #report .product-report-list,
  #trends .trend-grid {
    grid-auto-columns: minmax(310px, 48%);
  }

  #report .action-report-list,
  #report .product-signal-list,
  #report .restock-list,
  #report .campaign-segment-list,
  #report .campaign-grid,
  #report .campaign-history {
    grid-auto-columns: minmax(250px, 46%);
  }

  #trends .trend-lab {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  #trends .trend-form {
    position: sticky;
    top: 86px;
  }
}

@media (max-width: 420px) {
  #trends .trend-form .field-grid {
    grid-template-columns: 1fr;
  }

  #report .product-report-list,
  #trends .trend-grid {
    grid-auto-columns: minmax(282px, 92%);
  }

  #report .product-report-row {
    min-height: 410px;
  }

  #report .campaign-segment-head,
  #trends .trend-card-head {
    display: grid;
  }
}

/* v53: Style memory shelf and in-app merchant launch board. */
#history,
#business {
  --v53-ink: #161514;
  --v53-paper: #f4f1ea;
  --v53-card: #fffdf7;
  --v53-silk: #ebe4d8;
  --v53-berry: #9d3d55;
  --v53-moss: #50684a;
  --v53-graphite: #4f5659;
  --v53-brass: #a98142;
  --v53-muted: #716b63;
  background:
    linear-gradient(180deg, rgba(22, 21, 20, 0.96) 0 142px, transparent 142px),
    var(--v53-paper);
}

#history {
  padding-top: 0;
}

#history .section-head {
  margin: 0 -9px 10px;
  border-bottom: 1px solid rgba(255, 253, 247, 0.12);
  background: rgba(22, 21, 20, 0.98);
  color: var(--v53-card);
}

#history .section-head .eyebrow {
  color: #ded2c0;
}

#history .section-head h2 {
  color: var(--v53-card);
  font-size: clamp(1.3rem, 5.2vw, 1.9rem);
}

#history .section-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

#history .section-actions::-webkit-scrollbar {
  display: none;
}

#history .section-head .ghost-button {
  flex: 0 0 auto;
  min-height: 36px;
  border-color: rgba(255, 253, 247, 0.16);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.08);
  color: var(--v53-card);
  padding: 0 12px;
  white-space: nowrap;
}

#history .style-memory-metrics {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 38%);
  grid-template-columns: none;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 0 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

#history .style-memory-metrics::-webkit-scrollbar {
  display: none;
}

#history .style-memory-metrics div {
  min-height: 76px;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(235, 228, 216, 0.9), rgba(255, 253, 247, 0.9)),
    var(--v53-card);
  box-shadow: inset 0 0 0 1px rgba(22, 21, 20, 0.06);
  padding: 12px;
  scroll-snap-align: start;
}

#history .style-memory-metrics strong {
  color: var(--v53-ink);
  font-size: 1.02rem;
}

#history .style-memory-metrics span {
  margin-top: 3px;
  color: var(--v53-muted);
  font-size: 0.67rem;
  line-height: 1.15;
}

#history .history-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#history .history-block {
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: var(--v53-card);
  box-shadow: inset 0 0 0 1px rgba(22, 21, 20, 0.08);
  padding: 12px;
}

#history .history-block:first-child {
  background:
    linear-gradient(145deg, rgba(80, 104, 74, 0.15), transparent 48%),
    var(--v53-card);
}

#history .history-block:nth-child(2) {
  background:
    linear-gradient(145deg, rgba(157, 61, 85, 0.12), transparent 48%),
    var(--v53-card);
}

#history .history-block-head {
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#history .history-block-head h3 {
  font-size: 1.05rem;
}

#history .saved-look-toggle {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  gap: 7px;
  border-color: rgba(157, 61, 85, 0.2);
  border-radius: 999px;
  background: rgba(157, 61, 85, 0.08);
  color: var(--v53-berry);
  padding: 0 9px 0 12px;
  white-space: nowrap;
}

#history .saved-look-toggle > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#history .saved-look-toggle-count {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--v53-berry);
  color: var(--v53-card);
  padding: 4px 7px;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#history .saved-look-toggle svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

#history .saved-look-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  #history .saved-look-toggle svg {
    transition: none;
  }
}

#history .history-grid,
#history .saved-look-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(276px, 84%);
  grid-template-columns: none;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 0 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

#history .saved-look-grid {
  align-items: start;
}

#history .history-grid::-webkit-scrollbar,
#history .saved-look-grid::-webkit-scrollbar {
  display: none;
}

#history .history-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 260px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(22, 21, 20, 0.04), rgba(22, 21, 20, 0.9)),
    var(--v53-ink);
  color: var(--v53-card);
  box-shadow: 0 18px 42px rgba(22, 21, 20, 0.14);
  padding: 13px;
  scroll-snap-align: center;
}

#history .history-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(145deg, rgba(80, 104, 74, 0.34), transparent 44%),
    radial-gradient(circle at 86% 14%, rgba(235, 228, 216, 0.2), transparent 32%);
  pointer-events: none;
}

#history .history-card-warm::before {
  background:
    linear-gradient(145deg, rgba(169, 129, 66, 0.38), transparent 44%),
    radial-gradient(circle at 86% 14%, rgba(235, 228, 216, 0.2), transparent 32%);
}

#history .history-card-soft::before {
  background:
    linear-gradient(145deg, rgba(79, 86, 89, 0.38), transparent 44%),
    radial-gradient(circle at 86% 14%, rgba(235, 228, 216, 0.2), transparent 32%);
}

#history .history-card > * {
  position: relative;
  z-index: 1;
}

#history .history-score {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: var(--v53-card);
  color: var(--v53-ink);
  font-size: 1.22rem;
}

#history .history-card h3 {
  margin-top: auto;
  color: var(--v53-card);
  font-size: 1.1rem;
  line-height: 1.08;
}

#history .history-card p {
  color: rgba(255, 253, 247, 0.76);
  font-size: 0.78rem;
  line-height: 1.45;
}

#history .history-card .pill-row,
#history .saved-look-stats {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

#history .history-card .pill-row::-webkit-scrollbar,
#history .saved-look-stats::-webkit-scrollbar {
  display: none;
}

#history .history-card .pill,
#history .saved-look-stats span {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 253, 247, 0.13);
  background: rgba(255, 253, 247, 0.09);
  color: rgba(255, 253, 247, 0.72);
}

#history .saved-look-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-self: start;
  align-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: 470px;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(22, 21, 20, 0.02), rgba(22, 21, 20, 0.9)),
    var(--v53-ink);
  color: var(--v53-card);
  box-shadow: 0 18px 42px rgba(22, 21, 20, 0.15);
  padding: 12px;
  scroll-snap-align: center;
}

#history .saved-look-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(145deg, rgba(157, 61, 85, 0.3), transparent 44%),
    radial-gradient(circle at 86% 14%, rgba(235, 228, 216, 0.19), transparent 32%);
  pointer-events: none;
}

#history .saved-look-card > * {
  position: relative;
  z-index: 1;
}

#history .saved-look-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

#history .saved-look-head .trend-score {
  border: 1px solid rgba(255, 253, 247, 0.16);
  background: rgba(255, 253, 247, 0.1);
  color: rgba(255, 253, 247, 0.78);
}

#history .saved-look-head h3 {
  display: -webkit-box;
  overflow: hidden;
  color: var(--v53-card);
  font-size: clamp(1.12rem, 5.4vw, 1.62rem);
  line-height: 1.02;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#history .saved-look-head span {
  color: rgba(255, 253, 247, 0.66);
}

#history .saved-look-head > strong {
  border-radius: 999px;
  background: var(--v53-card);
  color: var(--v53-ink);
  padding: 7px 10px;
  font-size: 0.78rem;
}

#history .saved-look-products {
  display: grid;
  grid-template-columns: 1.35fr repeat(2, minmax(0, 0.82fr));
  grid-auto-rows: minmax(88px, auto);
  gap: 7px;
  align-self: end;
  margin-top: auto;
}

#history .saved-product {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 253, 247, 0.1);
  color: inherit;
}

#history .saved-product:first-child {
  grid-row: span 2;
}

#history .saved-product img {
  width: 100%;
  height: 100%;
  min-height: 104px;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
}

#history .saved-product:first-child img {
  min-height: 222px;
}

#history .saved-product span {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  display: -webkit-box;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(22, 21, 20, 0.64);
  color: var(--v53-card);
  padding: 6px 7px;
  font-size: 0.62rem;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  backdrop-filter: blur(12px);
}

#history .saved-product-user::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ded2c0;
  box-shadow: 0 0 0 4px rgba(22, 21, 20, 0.22);
}

#history .saved-look-actions {
  justify-content: stretch;
}

#history .saved-look-actions .primary-button {
  border-color: var(--v53-card);
  border-radius: 999px;
  background: var(--v53-card);
  color: var(--v53-ink);
}

#history .saved-look-actions .ghost-button {
  border-color: rgba(255, 253, 247, 0.14);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.09);
  color: var(--v53-card);
}

#history .empty-card {
  min-width: 260px;
  border: 0;
  border-radius: 18px;
  background: rgba(22, 21, 20, 0.06);
  box-shadow: inset 0 0 0 1px rgba(22, 21, 20, 0.06);
}

#business {
  width: var(--app-width, min(100% - 22px, 1180px));
  max-width: var(--app-width, 1180px);
  margin: 0 auto;
  border-top: 0;
  border-radius: 24px 24px 0 0;
  padding: 12px 0 28px;
}

#business .business-copy {
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(169, 129, 66, 0.16), transparent 46%),
    var(--v53-ink);
  color: var(--v53-card);
  padding: 18px;
}

#business .business-copy .eyebrow {
  color: #ded2c0;
}

#business .business-copy h2 {
  color: var(--v53-card);
  font-size: clamp(1.34rem, 5.5vw, 2rem);
  line-height: 1.02;
}

#business .business-copy p {
  max-width: 48ch;
  color: rgba(255, 253, 247, 0.72);
  font-size: 0.86rem;
  line-height: 1.5;
}

#business .business-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(228px, 72%);
  grid-template-columns: none;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

#business .business-steps::-webkit-scrollbar {
  display: none;
}

#business .business-step {
  min-height: 220px;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--v53-card);
  box-shadow: inset 0 0 0 1px rgba(22, 21, 20, 0.08);
  padding: 14px;
  scroll-snap-align: center;
}

#business .business-step-catalog {
  background:
    linear-gradient(145deg, rgba(80, 104, 74, 0.15), transparent 52%),
    var(--v53-card);
}

#business .business-step-ai {
  background:
    linear-gradient(145deg, rgba(157, 61, 85, 0.13), transparent 52%),
    var(--v53-card);
}

#business .business-step-sales {
  background:
    linear-gradient(145deg, rgba(169, 129, 66, 0.17), transparent 52%),
    var(--v53-card);
}

#business .business-step span {
  width: 42px;
  height: 42px;
  margin-bottom: 54px;
  border-radius: 999px;
  background: var(--v53-ink);
  color: var(--v53-card);
}

#business .business-step h3 {
  font-size: 1.05rem;
}

#business .business-step p {
  color: var(--v53-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (min-width: 720px) {
  #history .history-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  #history .history-grid {
    grid-auto-columns: minmax(260px, 82%);
  }

  #history .saved-look-grid {
    grid-auto-columns: minmax(320px, 76%);
  }

  #business {
    display: grid;
    grid-template-columns: minmax(260px, 0.86fr) minmax(0, 1.14fr);
    gap: 12px;
    align-items: stretch;
  }

  #business .business-steps {
    padding-top: 0;
  }
}

@media (max-width: 420px) {
  #history .saved-look-toggle {
    width: 100%;
    justify-content: space-between;
    margin-inline-start: 0;
  }

  #history .history-grid,
  #history .saved-look-grid {
    grid-auto-columns: minmax(282px, 92%);
  }

  #history .saved-look-card {
    min-height: 452px;
  }

  #history .saved-look-products {
    grid-template-columns: 1.25fr minmax(0, 0.9fr);
  }

  #history .saved-product:nth-child(n + 4) {
    display: none;
  }

  #business .business-steps {
    grid-auto-columns: minmax(230px, 86%);
  }
}

#history .saved-look-products.saved-look-products-count-1 {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
}

#history .saved-look-products-count-1 .saved-product:first-child {
  grid-row: auto;
}

#history .saved-look-products-count-1 .saved-product img,
#history .saved-look-products-count-1 .saved-product:first-child img {
  height: clamp(168px, 48vw, 220px);
  min-height: 0;
}

/* v54: Installed-app shell polish for iOS/Android standalone mode. */
html {
  min-height: 100%;
  background: #151515;
}

body {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: rgba(21, 21, 21, 0.12);
  text-rendering: optimizeLegibility;
}

.app-shell {
  padding-top: env(safe-area-inset-top, 0);
}

.mobile-dock {
  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
}

.quick-action-button {
  bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px));
}

@media (display-mode: standalone) {
  body {
    min-height: 100dvh;
    background: #151515;
  }

  .content-band,
  .studio-band,
  .business-band {
    scroll-margin-top: calc(84px + env(safe-area-inset-top, 0px));
  }

  .app-shell {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .command-panel {
    margin-top: env(safe-area-inset-top, 0);
  }
}

@supports (-webkit-touch-callout: none) {
  input,
  select,
  textarea {
    font-size: max(16px, 1rem);
  }
}

/* v55: Native app chrome, tabbar and action sheets. */
:root {
  --shell-black: #121314;
  --shell-cream: #fffefa;
  --shell-muted: rgba(255, 254, 250, 0.6);
  --shell-line: rgba(255, 254, 250, 0.12);
  --shell-accent: #d9e66b;
  --shell-rouge: #a93448;
}

.app-shell {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 58;
  border: 0;
  background: transparent;
  padding-top: 0;
  pointer-events: none;
}

.topbar {
  pointer-events: auto;
  width: min(var(--app-width), calc(100vw - 14px));
  min-height: calc(58px + env(safe-area-inset-top, 0px));
  margin: 0 auto;
  border: 1px solid var(--shell-line);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: rgba(18, 19, 20, 0.94);
  box-shadow: 0 14px 34px rgba(18, 19, 20, 0.22);
  color: var(--shell-cream);
  grid-template-columns: 36px minmax(0, 1fr) 40px minmax(92px, 116px);
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 8px;
  backdrop-filter: blur(20px);
}

.brand {
  width: 36px;
  height: 36px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 14px;
  background: var(--shell-accent);
  color: var(--shell-black);
  font-size: 0.72rem;
  box-shadow: inset 0 -4px 0 rgba(18, 19, 20, 0.13);
}

.active-view-chip {
  color: var(--shell-cream);
  font-size: 0.88rem;
  font-weight: 920;
  line-height: 1.05;
}

.command-button {
  display: grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  overflow: hidden;
  border: 1px solid var(--shell-line);
  border-radius: 15px;
  background: rgba(255, 254, 250, 0.08);
  color: transparent;
  font-size: 0;
  padding: 0;
}

.command-button::before {
  content: "⌕";
  color: var(--shell-cream);
  font-size: 1.24rem;
  font-weight: 900;
}

.topbar-switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 5px;
}

.locale-switch select,
.market-switch select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--shell-line);
  border-radius: 15px;
  background: rgba(255, 254, 250, 0.08);
  color: var(--shell-cream);
  padding: 0 6px;
  text-align: center;
  appearance: none;
}

main {
  inset: calc(66px + env(safe-area-inset-top, 0px)) 0 calc(92px + env(safe-area-inset-bottom, 0px)) 0;
}

.mobile-dock {
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 57;
  width: min(var(--app-width), calc(100vw - 14px));
  border: 1px solid var(--shell-line);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: rgba(18, 19, 20, 0.94);
  box-shadow: 0 -16px 34px rgba(18, 19, 20, 0.22);
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(20px);
}

.mobile-dock a {
  min-height: 52px;
  border-radius: 17px;
  color: var(--shell-muted);
  font-size: 0.58rem;
}

.mobile-dock a::before {
  width: 27px;
  height: 27px;
  border: 1px solid rgba(255, 254, 250, 0.1);
  background: rgba(255, 254, 250, 0.06);
  color: rgba(255, 254, 250, 0.76);
  font-size: 0.78rem;
}

.mobile-dock a.active,
.mobile-dock a:focus-visible {
  background: rgba(255, 254, 250, 0.07);
  color: var(--shell-cream);
}

.mobile-dock a.active::before,
.mobile-dock a:focus-visible::before {
  background: var(--shell-accent);
  color: var(--shell-black);
}

.mobile-dock a.active::after {
  bottom: 4px;
  width: 16px;
  height: 2px;
  background: var(--shell-rouge);
}

.quick-action-button {
  right: max(16px, calc((100vw - var(--app-width)) / 2 + 16px));
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  z-index: 59;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 254, 250, 0.22);
  border-radius: 20px;
  background: var(--shell-rouge);
  box-shadow: 0 18px 34px rgba(169, 52, 72, 0.34);
  color: transparent;
  font-size: 0;
}

.quick-action-button::before {
  content: "+";
  color: var(--shell-cream);
  font-size: 1.76rem;
  font-weight: 850;
  line-height: 1;
}

.quick-action-sheet,
.command-palette {
  z-index: 70;
  place-items: end center;
  background: rgba(18, 19, 20, 0.62);
  padding: 12px 8px calc(12px + env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(8px);
}

.quick-action-panel,
.command-panel {
  width: min(var(--app-width), calc(100vw - 14px));
  max-height: min(78dvh, 720px);
  overflow: auto;
  border: 1px solid rgba(18, 19, 20, 0.08);
  border-radius: 28px 28px 20px 20px;
  background:
    linear-gradient(180deg, rgba(245, 241, 232, 0.96), #fffefa 40%),
    #fffefa;
  box-shadow: 0 -24px 70px rgba(18, 19, 20, 0.28);
  padding: 14px;
}

.quick-action-head,
.command-head {
  border-bottom: 1px solid rgba(18, 19, 20, 0.08);
  padding-bottom: 11px;
}

.quick-action-head .ghost-button,
.command-head .ghost-button {
  min-height: 34px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 0.74rem;
}

.quick-action-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quick-action-grid button {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 3px 9px;
  min-height: 86px;
  border: 0;
  border-radius: 18px;
  background: rgba(18, 19, 20, 0.045);
  box-shadow: inset 0 0 0 1px rgba(18, 19, 20, 0.06);
  padding: 11px;
}

.quick-action-grid button::before {
  content: "•";
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: var(--shell-black);
  color: var(--shell-cream);
  font-size: 1.12rem;
  line-height: 1;
}

.quick-action-grid [data-quick-action="photo"]::before {
  content: "⌾";
}

.quick-action-grid [data-quick-action="passport"]::before {
  content: "◫";
}

.quick-action-grid [data-quick-action="coach"]::before {
  content: "✶";
}

.quick-action-grid [data-quick-action="fit"]::before {
  content: "↕";
}

.quick-action-grid [data-quick-action="planner"]::before {
  content: "◷";
}

.quick-action-grid [data-quick-action="capsule"]::before {
  content: "▦";
}

.quick-action-grid [data-quick-action="discover"]::before {
  content: "◇";
}

.quick-action-grid [data-quick-action="community"]::before {
  content: "◎";
}

.quick-action-grid [data-quick-action="item"]::before {
  content: "＋";
}

.quick-action-grid [data-quick-action="lookbook"]::before {
  content: "▱";
}

.quick-action-grid [data-quick-action="lead"]::before {
  content: "ID";
  font-size: 0.74rem;
  font-weight: 950;
}

.quick-action-grid [data-quick-action="report"]::before {
  content: "▤";
}

.quick-action-grid [data-quick-action="trend"]::before {
  content: "⌁";
}

.quick-action-grid [data-quick-action="export-workspace"]::before {
  content: "⇪";
}

.quick-action-grid [data-quick-action="import-workspace"]::before {
  content: "⇩";
}

.quick-action-grid strong,
.quick-action-grid span {
  min-width: 0;
}

.quick-action-grid strong {
  align-self: end;
}

.quick-action-grid span {
  align-self: start;
}

#commandSearchInput {
  min-height: 48px;
  border: 0;
  border-radius: 17px;
  background: rgba(18, 19, 20, 0.055);
  box-shadow: inset 0 0 0 1px rgba(18, 19, 20, 0.06);
}

.command-row {
  border: 0;
  border-radius: 17px;
  background: rgba(18, 19, 20, 0.045);
  box-shadow: inset 0 0 0 1px rgba(18, 19, 20, 0.05);
}

.command-row kbd {
  border-radius: 999px;
  background: var(--shell-black);
  color: var(--shell-cream);
}

@media (min-width: 1120px) {
  .app-shell {
    position: fixed;
  }

  .topbar {
    width: min(460px, calc(100vw - 14px));
  }

  main {
    padding: 0;
  }
}

@media (max-width: 380px) {
  .topbar {
    grid-template-columns: 34px minmax(0, 1fr) 38px minmax(78px, 96px);
    gap: 6px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .active-view-chip {
    font-size: 0.78rem;
  }

  .locale-switch select,
  .market-switch select {
    font-size: 0.6rem;
  }

  .quick-action-grid {
    grid-template-columns: 1fr;
  }
}

/* v56: PWA install state, offline signal and tactile mobile actions. */
.active-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.active-view-chip::after {
  content: attr(data-connection);
  display: none;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 254, 250, 0.14);
  border-radius: 999px;
  background: rgba(255, 254, 250, 0.08);
  color: rgba(255, 254, 250, 0.68);
  padding: 4px 7px;
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

body.is-offline .active-view-chip::after {
  display: inline-flex;
  border-color: rgba(169, 52, 72, 0.32);
  background: rgba(169, 52, 72, 0.18);
  color: #ffd8df;
}

.quick-action-grid [data-quick-action="install"] {
  background:
    linear-gradient(145deg, rgba(217, 230, 107, 0.18), transparent 48%),
    rgba(18, 19, 20, 0.045);
}

.quick-action-grid [data-quick-action="install"]::before {
  content: "⇣";
  background: var(--shell-accent);
  color: var(--shell-black);
  font-size: 1rem;
}

body.is-installed-app .quick-action-grid [data-quick-action="install"]::before {
  content: "✓";
}

body.can-install .quick-action-button {
  box-shadow:
    0 18px 34px rgba(169, 52, 72, 0.34),
    0 0 0 5px rgba(217, 230, 107, 0.12);
}

@media (hover: none) {
  .mobile-dock a,
  .quick-action-button,
  .quick-action-grid button,
  .command-row {
    touch-action: manipulation;
  }
}

/* v57: Global app toast and dock swipe feedback. */
.app-toast {
  position: fixed;
  right: max(14px, calc((100vw - var(--app-width)) / 2 + 14px));
  bottom: calc(152px + env(safe-area-inset-bottom, 0px));
  left: max(14px, calc((100vw - var(--app-width)) / 2 + 14px));
  z-index: 80;
  display: block;
  max-width: calc(var(--app-width) - 28px);
  margin: 0 auto;
  transform: translateY(16px) scale(0.98);
  border: 1px solid rgba(255, 254, 250, 0.12);
  border-radius: 18px;
  background: rgba(18, 19, 20, 0.92);
  box-shadow: 0 18px 42px rgba(18, 19, 20, 0.28);
  color: #fffefa;
  opacity: 0;
  padding: 12px 14px;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.25;
  pointer-events: none;
  text-align: center;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  backdrop-filter: blur(18px);
}

.app-toast[hidden] {
  display: none;
}

.app-toast.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.app-toast[data-tone="success"] {
  border-color: rgba(217, 230, 107, 0.24);
  background:
    linear-gradient(90deg, rgba(217, 230, 107, 0.16), transparent 58%),
    rgba(18, 19, 20, 0.92);
}

.app-toast[data-tone="warning"] {
  border-color: rgba(169, 52, 72, 0.32);
  background:
    linear-gradient(90deg, rgba(169, 52, 72, 0.22), transparent 58%),
    rgba(18, 19, 20, 0.92);
}

.visually-hidden-input {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 380px) {
  .app-toast {
    bottom: calc(146px + env(safe-area-inset-bottom, 0px));
    font-size: 0.78rem;
  }
}

/* v58: Camera-first upload and native social share feedback. */
.upload-zone {
  touch-action: manipulation;
}

.upload-zone::after {
  content: "⌾";
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 254, 250, 0.18);
  border-radius: 15px;
  background: rgba(18, 19, 20, 0.68);
  color: #fffefa;
  font-size: 1.08rem;
  font-weight: 950;
  backdrop-filter: blur(14px);
}

#community .social-share-actions {
  display: grid;
  grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#community .social-share-actions button {
  min-width: 0;
  min-height: 42px;
  border-radius: 999px;
  white-space: nowrap;
}

#community #systemShareButton::before {
  content: none;
}

@media (max-width: 420px) {
  #community .social-share-actions {
    grid-template-columns: 1fr;
  }
}

/* v61: Product watchlist and local shopping alerts. */
.quick-action-grid [data-quick-action="watchlist"]::before {
  content: "◈";
}

.watchlist-panel {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  border-color: rgba(18, 19, 20, 0.12);
  background:
    linear-gradient(135deg, rgba(255, 254, 250, 0.94), rgba(240, 245, 245, 0.98)),
    #fffefa;
}

.watchlist-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(245, 200, 76, 0.16), transparent 34%),
    repeating-linear-gradient(135deg, rgba(11, 143, 131, 0.08) 0 1px, transparent 1px 12px);
}

.watchlist-head,
.watchlist-metrics,
.watchlist-list,
.watchlist-panel .status-line {
  position: relative;
}

.watchlist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.watchlist-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.watchlist-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.watchlist-metrics div {
  border: 1px solid rgba(18, 19, 20, 0.08);
  border-radius: 8px;
  background: rgba(255, 254, 250, 0.76);
  padding: 12px;
}

.watchlist-metrics strong {
  display: block;
  overflow: hidden;
  font-size: 1.18rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watchlist-metrics span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.watchlist-list {
  display: grid;
  gap: 9px;
}

.watchlist-empty,
.watchlist-row {
  border: 1px solid rgba(18, 19, 20, 0.1);
  border-radius: 8px;
  background: rgba(255, 254, 250, 0.82);
  box-shadow: 0 10px 28px rgba(18, 19, 20, 0.06);
}

.watchlist-empty {
  min-height: 116px;
  padding: 18px;
}

.watchlist-empty p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.watchlist-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
}

.watchlist-row img {
  width: 74px;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
}

.watchlist-body {
  min-width: 0;
}

.watchlist-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.watchlist-row-head strong {
  min-width: 0;
  font-size: 0.94rem;
  line-height: 1.12;
}

.watchlist-row-head span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(18, 19, 20, 0.08);
  padding: 4px 7px;
  font-size: 0.66rem;
  font-weight: 950;
}

.watchlist-signal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.watchlist-signal span {
  border-radius: 999px;
  background: #edf1f3;
  color: #4b4f54;
  padding: 5px 7px;
  font-size: 0.68rem;
  font-weight: 850;
}

.watchlist-body p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 820;
}

.watchlist-row-actions {
  display: grid;
  gap: 7px;
  justify-items: stretch;
  min-width: 88px;
}

.watchlist-row-actions .ghost-button,
.watchlist-row-actions .product-link {
  justify-content: center;
  min-height: 34px;
  margin: 0;
  border-radius: 8px;
  font-size: 0.72rem;
}

.watchlist-low {
  border-color: rgba(245, 200, 76, 0.46);
}

.watchlist-missing {
  border-color: rgba(232, 77, 91, 0.36);
}

.watchlist-price-ready {
  border-color: rgba(11, 143, 131, 0.4);
}

.watch-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  width: 100%;
  margin-top: 9px;
  border: 1px solid rgba(18, 19, 20, 0.13);
  border-radius: 8px;
  background: #fffefa;
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 950;
}

.watch-button.is-watching {
  border-color: rgba(11, 143, 131, 0.42);
  background: rgba(11, 143, 131, 0.1);
  color: var(--teal);
}

.item-card.item-watched {
  box-shadow:
    inset 0 0 0 2px rgba(11, 143, 131, 0.12),
    0 10px 28px rgba(18, 19, 20, 0.05);
}

@media (max-width: 760px) {
  .watchlist-head {
    display: grid;
  }

  .watchlist-actions {
    justify-content: stretch;
  }

  .watchlist-actions button {
    flex: 1 1 120px;
  }

  .watchlist-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .watchlist-row {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .watchlist-row img {
    width: 62px;
  }

  .watchlist-row-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .watchlist-metrics {
    grid-template-columns: 1fr;
  }
}

/* v62: real SVG dock icons instead of font glyphs. */
.mobile-dock {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 2px;
  border-color: rgba(255, 254, 250, 0.12) !important;
  background: rgba(18, 19, 20, 0.95) !important;
  box-shadow: 0 -14px 32px rgba(18, 19, 20, 0.22) !important;
}

.mobile-dock a {
  position: relative;
  display: grid !important;
  grid-template-rows: 32px auto;
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 54px;
  padding: 4px 2px 5px;
  border-radius: 14px;
  background: transparent !important;
  color: rgba(255, 254, 250, 0.58);
  font-size: 0;
  font-weight: 900;
  letter-spacing: 0;
}

.mobile-dock a::before {
  content: none !important;
  display: none !important;
}

.mobile-dock a::after {
  content: "";
  opacity: 0;
}

.dock-icon {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(255, 254, 250, 0.13);
  border-radius: 12px;
  background: rgba(255, 254, 250, 0.06);
  color: rgba(255, 254, 250, 0.72);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.dock-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.dock-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: currentColor;
  font-size: 0.68rem;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-dock a.active,
.mobile-dock a:focus-visible {
  color: #fffefa;
}

.mobile-dock a.active .dock-icon,
.mobile-dock a:focus-visible .dock-icon {
  border-color: rgba(217, 230, 107, 0.56);
  background: #d9e66b;
  color: #121314;
  transform: translateY(-1px);
}

.mobile-dock a.active::after {
  position: absolute;
  bottom: 2px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #cf4057;
  opacity: 1;
}

@media (max-width: 380px) {
  .dock-icon {
    width: 29px;
    height: 29px;
  }

  .dock-icon svg {
    width: 18px;
    height: 18px;
  }

  .dock-label {
    font-size: 0.64rem;
  }
}

/* v64: professor-level fashion critique. */
.expert-critique {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.expert-critique-head {
  border: 1px solid rgba(255, 254, 250, 0.12);
  border-radius: 14px;
  background: rgba(255, 254, 250, 0.08);
  padding: 12px;
}

.expert-critique-head span,
.expert-critique-grid article > span {
  display: block;
  color: #d9e66b;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.expert-critique-head strong {
  display: block;
  margin-top: 5px;
  color: #fffefa;
  font-size: 1rem;
  line-height: 1.18;
}

.expert-critique-grid {
  display: grid;
  gap: 8px;
}

.expert-critique-grid article {
  border: 1px solid rgba(255, 254, 250, 0.1);
  border-radius: 14px;
  background: rgba(255, 254, 250, 0.065);
  padding: 11px;
}

.expert-critique-grid p {
  margin: 6px 0 0;
  color: rgba(255, 254, 250, 0.78);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.45;
}

@media (min-width: 760px) {
  .expert-critique-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v66: the top command control owns one inline SVG icon. */
.command-button {
  position: relative;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  color: #fffefa;
  font-size: 0;
}

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

.command-button-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: currentColor;
}

.command-button-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

.command-button-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* v67: StyleBrain logo-matched black metal mobile skin. */
:root {
  --ink: #f6f2ea;
  --muted: rgba(246, 242, 234, 0.66);
  --line: rgba(238, 232, 218, 0.14);
  --paper: #070707;
  --white: #fffefa;
  --coral: #c99b38;
  --teal: #9fa6a9;
  --blue: #c6ccd0;
  --yellow: #d7ad4a;
  --green: #807053;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
  --app-bg: #080808;
  --app-surface: rgba(18, 18, 18, 0.9);
  --app-ink: #f5f1e8;
  --app-muted: rgba(245, 241, 232, 0.62);
  --app-line: rgba(240, 235, 222, 0.13);
  --app-lime: #d4a643;
  --app-rouge: #c99b38;
  --app-blue: #bfc5c8;
  --app-gold: #d4a643;
  --shell-black: #090909;
  --shell-cream: #f5f1e8;
  --shell-muted: rgba(245, 241, 232, 0.62);
  --shell-line: rgba(238, 232, 218, 0.15);
  --shell-accent: #d4a643;
  --shell-rouge: #d4a643;
}

html {
  background: #050505;
}

body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.09), transparent 42%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px) 50% 0 / 32px 32px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) 50% 0 / 32px 32px,
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 8px),
    #050505;
  color: var(--app-ink);
}

body::before {
  border-color: rgba(234, 222, 191, 0.17);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 170px),
    radial-gradient(ellipse at 50% -80px, rgba(210, 166, 67, 0.2), transparent 44%),
    linear-gradient(180deg, #121212 0%, #090909 44%, #060606 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.8),
    0 34px 90px rgba(0, 0, 0, 0.62);
}

.topbar,
.mobile-dock,
.quick-action-panel,
.command-panel {
  border-color: rgba(236, 226, 198, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(9, 9, 9, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.82),
    0 18px 46px rgba(0, 0, 0, 0.42);
  color: var(--shell-cream);
}

.topbar {
  grid-template-columns: 46px minmax(0, 1fr) 40px minmax(92px, 116px);
  min-height: calc(64px + env(safe-area-inset-top, 0px));
}

.brand {
  width: 46px;
  height: 46px;
}

.brand-mark {
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(245, 239, 222, 0.18);
  border-radius: 16px;
  background: #050505;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 9px 22px rgba(0, 0, 0, 0.45);
}

.brand > span:not(.brand-mark),
.brand small {
  display: none;
}

.active-view-chip {
  color: #f6f2ea;
  font-family:
    "Avenir Next Condensed", "SF Pro Display", Inter, ui-sans-serif, system-ui,
    sans-serif;
  font-size: 0.94rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.active-view-chip::after {
  width: 26px;
  background: linear-gradient(90deg, transparent, #d4a643, transparent);
}

.command-button,
.locale-switch select,
.market-switch select {
  border-color: rgba(236, 226, 198, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.018)),
    #171717;
  color: #f5f1e8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.85);
}

.command-button-icon {
  color: #f5f1e8;
}

main {
  inset: calc(72px + env(safe-area-inset-top, 0px)) 0 calc(92px + env(safe-area-inset-bottom, 0px)) 0;
}

.studio-band,
.content-band,
.business-band {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 170px),
    #090909;
}

.panel,
.passport-panel,
.coach-panel,
.fit-panel,
.planner-panel,
.capsule-panel,
.lookbook-panel,
.report-panel,
.campaign-panel,
.demand-panel,
.restock-panel,
.wardrobe-panel,
.catalog-audit-panel,
.passport-card-panel,
.passport-products-panel,
.passport-history-panel,
.coach-answer-panel,
.coach-history-panel,
.fit-result-panel,
.fit-history-panel,
.planner-result-panel,
.planner-history-panel,
.capsule-board-panel,
.capsule-outfits-panel,
.capsule-history-panel,
.discover-card-panel,
.discover-side-panel,
.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,
.brain-panel,
.trend-intel-panel,
.reservation-panel,
.followup-panel,
.client-dossier-panel,
.sales-funnel-panel,
.action-queue-panel,
.watchlist-panel {
  border-color: rgba(238, 232, 218, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.02)),
    rgba(18, 18, 18, 0.88);
  color: var(--app-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.26);
}

.intro-panel {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  background:
    linear-gradient(90deg, rgba(8, 8, 8, 0.92), rgba(8, 8, 8, 0.62)),
    url("icons/stylebrain-logo.png") center 30% / cover no-repeat,
    #080808;
}

.intro-panel::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 16px;
  width: 68px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #d4a643, transparent);
  box-shadow: 0 0 18px rgba(212, 166, 67, 0.36);
}

.intro-panel > * {
  position: relative;
  z-index: 1;
}

.panel h1,
.panel h2,
.panel h3,
.section-head h2,
.section-head h3,
.score-wrap h3,
.expert-critique-head strong {
  color: #f8f3e9;
  letter-spacing: 0;
}

.eyebrow,
.panel-head .eyebrow,
.intro-panel .eyebrow,
.photo-panel .eyebrow,
#community .section-head .eyebrow,
#discover .section-head .eyebrow,
#brain .section-head .eyebrow,
#lookbook .section-head .eyebrow,
#clients .section-head .eyebrow,
#report .section-head .eyebrow,
#trends .section-head .eyebrow,
#history .section-head .eyebrow {
  color: #d4a643;
  letter-spacing: 0.1em;
}

.panel p,
.status-line,
.score-wrap p,
.outfit-summary span,
.quick-stats span,
.expert-critique-grid p,
.vision-panel,
.repair-panel,
.taste-panel {
  color: rgba(245, 241, 232, 0.68);
}

input,
select,
textarea,
.segmented,
.quick-stats div,
.outfit-summary div,
.vision-panel,
.repair-panel,
.taste-panel,
.expert-critique-head,
.expert-critique-grid article,
.upload-zone {
  border-color: rgba(238, 232, 218, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(6, 6, 6, 0.56);
  color: var(--app-ink);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(212, 166, 67, 0.58);
  box-shadow: 0 0 0 3px rgba(212, 166, 67, 0.16);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
label.import-button:focus-within {
  outline-color: rgba(212, 166, 67, 0.38);
}

.primary-button,
.segmented button.active,
.mobile-dock a.active .dock-icon,
.mobile-dock a:focus-visible .dock-icon {
  border-color: rgba(231, 197, 106, 0.48);
  background:
    linear-gradient(180deg, #e2c26b 0%, #c99b38 48%, #8f6922 100%);
  color: #0a0a0a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 14px 30px rgba(212, 166, 67, 0.22);
}

.ghost-button,
.segmented button,
.photo-capture-actions .ghost-button,
.repair-head .ghost-button {
  border-color: rgba(238, 232, 218, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.018)),
    rgba(15, 15, 15, 0.72);
  color: #f4efe4;
}

.quick-action-button {
  border: 1px solid rgba(231, 197, 106, 0.48);
  background:
    linear-gradient(180deg, #e2c26b 0%, #c99b38 50%, #8b641f 100%);
  color: #080808;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 18px 42px rgba(212, 166, 67, 0.34);
}

.upload-zone {
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 48px rgba(0, 0, 0, 0.3);
}

.upload-zone::after {
  background: linear-gradient(180deg, transparent 32%, rgba(4, 4, 4, 0.84));
}

.upload-zone span {
  border-color: rgba(231, 197, 106, 0.34);
  background: rgba(8, 8, 8, 0.76);
  color: #f8f3e9;
}

.score-ring {
  background:
    conic-gradient(#d4a643 calc(var(--score, 86) * 3.6deg), rgba(255, 255, 255, 0.12) 0),
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.18), transparent 54%),
    #090909;
  color: #f8f3e9;
  box-shadow:
    inset 0 0 0 10px rgba(5, 5, 5, 0.72),
    0 14px 34px rgba(0, 0, 0, 0.42);
}

.palette-swatches span,
.color-swatch,
.swatch {
  border-color: rgba(238, 232, 218, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.mobile-dock {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(9, 9, 9, 0.94);
}

.mobile-dock a {
  color: rgba(245, 241, 232, 0.58);
}

.dock-icon {
  border-color: rgba(238, 232, 218, 0.13);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(245, 241, 232, 0.74);
}

.mobile-dock a.active,
.mobile-dock a:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #f8f3e9;
}

.mobile-dock a.active::after {
  background: linear-gradient(90deg, transparent, #d4a643, transparent);
}

.app-toast {
  border-color: rgba(231, 197, 106, 0.32);
  background: rgba(10, 10, 10, 0.94);
  color: #f8f3e9;
}

@media (max-width: 480px) {
  .topbar {
    border-radius: 0 0 24px 24px;
  }

  body::before {
    border-radius: 0;
  }
}

/* v71: restore the real logo asset and fix the inventory contrast. */
.topbar {
  grid-template-columns: 82px minmax(0, 1fr) 40px minmax(92px, 116px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(9, 9, 9, 0.94);
}

.brand {
  width: 82px;
  min-width: 82px;
  height: 46px;
  overflow: hidden;
}

.brand-logo {
  display: block;
  width: 82px;
  height: 46px;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: scale(1.42);
  transform-origin: center;
}

.brand-mark {
  display: none !important;
}

.active-view-chip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#inventory.content-band {
  background:
    radial-gradient(ellipse at 50% -100px, rgba(212, 166, 67, 0.12), transparent 42%),
    linear-gradient(180deg, #0b0b0b 0%, #070707 100%);
}

#inventory .section-head {
  margin: 0 0 14px;
  border: 1px solid rgba(238, 232, 218, 0.13);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(16, 16, 16, 0.92);
  padding: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.28);
}

#inventory .section-head h2 {
  color: #f7f1e6;
  font-size: 1.35rem;
  line-height: 1.05;
  text-shadow: none;
}

#inventory .section-actions {
  display: grid;
  gap: 10px;
  width: 100%;
}

#inventory .segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid rgba(238, 232, 218, 0.15);
  border-radius: 16px;
  background: rgba(5, 5, 5, 0.72);
  padding: 4px;
}

#inventory .segmented button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(245, 241, 232, 0.72);
  font-size: 0.92rem;
  font-weight: 900;
}

#inventory .segmented button.active {
  background:
    linear-gradient(180deg, #e1c16b 0%, #c99b38 48%, #89621f 100%);
  color: #070707;
}

#inventory .csv-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#inventory .csv-actions .ghost-button,
#inventory .import-button {
  display: grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid rgba(238, 232, 218, 0.16);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(18, 18, 18, 0.86);
  color: #f7f1e6;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

#inventory .wardrobe-panel,
#inventory .catalog-audit-panel,
#inventory .watchlist-panel,
#inventory .item-form {
  border-color: rgba(238, 232, 218, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(17, 17, 17, 0.92);
}

#inventory .wardrobe-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#inventory .wardrobe-metrics div,
#inventory .wardrobe-coverage-row,
#inventory .wardrobe-gap-card,
#inventory .wardrobe-gaps-head {
  border: 1px solid rgba(238, 232, 218, 0.13);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)),
    rgba(7, 7, 7, 0.72);
  color: #f7f1e6;
}

#inventory .wardrobe-metrics strong,
#inventory .wardrobe-coverage-row strong,
#inventory .wardrobe-gap-card strong,
#inventory .wardrobe-gaps-head strong {
  color: #f7f1e6;
}

#inventory .wardrobe-metrics span,
#inventory .wardrobe-coverage-row span,
#inventory .wardrobe-gap-card span,
#inventory .wardrobe-gaps-head span {
  color: rgba(245, 241, 232, 0.64);
}

#inventory .wardrobe-coverage-row {
  border-left: 3px solid rgba(212, 166, 67, 0.86);
  padding: 12px;
}

#inventory .wardrobe-bar {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.16);
}

#inventory .wardrobe-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d4a643, #f0c963);
}

#inventory .wardrobe-gap-card img {
  border-radius: 10px;
}

#inventory .wardrobe-gap-tags span {
  background: rgba(245, 241, 232, 0.08);
  color: rgba(245, 241, 232, 0.72);
}

@media (max-width: 370px) {
  .topbar {
    grid-template-columns: 66px minmax(0, 1fr) 38px minmax(84px, 104px);
  }

  .brand,
  .brand-logo {
    width: 66px;
    min-width: 66px;
  }

  .brand-logo {
    transform: scale(1.55);
  }

  #inventory .csv-actions {
    grid-template-columns: 1fr;
  }
}

/* v72: finish the inventory dark pass. */

#inventory .catalog-audit-metrics,
#inventory .watchlist-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* v73: global contrast cleanup for the remaining app surfaces. */
.content-band > .section-head,
.passport-band > .section-head,
.coach-band > .section-head,
.fit-band > .section-head,
.planner-band > .section-head,
.capsule-band > .section-head,
.discover-band > .section-head,
.brain-band > .section-head,
.lookbook-band > .section-head,
.clients-band > .section-head,
.report-band > .section-head,
.trend-band > .section-head,
.history-band > .section-head,
.community-band > .section-head {
  border: 1px solid rgba(238, 232, 218, 0.13);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(14, 14, 14, 0.9);
  color: #f7f1e6;
  padding: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 18px 42px rgba(0, 0, 0, 0.26);
}

.content-band > .section-head h2,
.passport-band > .section-head h2,
.coach-band > .section-head h2,
.fit-band > .section-head h2,
.planner-band > .section-head h2,
.capsule-band > .section-head h2,
.discover-band > .section-head h2,
.brain-band > .section-head h2,
.lookbook-band > .section-head h2,
.clients-band > .section-head h2,
.report-band > .section-head h2,
.trend-band > .section-head h2,
.history-band > .section-head h2,
.community-band > .section-head h2 {
  color: #f7f1e6;
  line-height: 1.06;
}

.content-band .empty-card,
.content-band .history-card,
.content-band .saved-look-card,
.content-band .rule-card,
.content-band .coach-item-card,
.content-band .passport-product-card,
.content-band .client-product-card,
.content-band .look-card,
.content-band .campaign-segment,
.content-band .campaign-history-row,
.content-band .trend-card,
.content-band .discover-card,
.content-band .community-post,
.content-band .community-comment,
.content-band .action-card,
.content-band .queue-card,
.content-band .report-row {
  border-color: rgba(238, 232, 218, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
    rgba(8, 8, 8, 0.74);
  color: #f7f1e6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 12px 28px rgba(0, 0, 0, 0.2);
}

.content-band .empty-card p,
.content-band .history-card p,
.content-band .saved-look-card p,
.content-band .rule-card p,
.content-band .coach-item-card span,
.content-band .passport-product-card span,
.content-band .client-product-card p,
.content-band .look-card p,
.content-band .campaign-segment p,
.content-band .campaign-history-row p,
.content-band .trend-card p,
.content-band .discover-card p,
.content-band .community-post p,
.content-band .community-comment p,
.content-band .action-card p,
.content-band .queue-card p,
.content-band .report-row p {
  color: rgba(245, 241, 232, 0.66);
}

.content-band .product-link,
.content-band .mini-product-link,
.content-band .tag,
.content-band .pill,
.content-band .badge,
.content-band .source-badge,
.content-band .stock-badge,
.content-band .trend-chip,
.content-band .signal-chip {
  border-color: rgba(238, 232, 218, 0.14);
  background: rgba(245, 241, 232, 0.075);
  color: rgba(245, 241, 232, 0.78);
}

.content-band input,
.content-band select,
.content-band textarea {
  border-color: rgba(238, 232, 218, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(5, 5, 5, 0.72);
  color: #f7f1e6;
}

.content-band input::placeholder,
.content-band textarea::placeholder {
  color: rgba(245, 241, 232, 0.42);
}

.content-band label {
  color: rgba(245, 241, 232, 0.72);
}

.content-band .panel-head,
.content-band .catalog-audit-head,
.content-band .watchlist-head,
.content-band .followup-head,
.content-band .sales-funnel-head,
.content-band .action-queue-head {
  border-color: rgba(238, 232, 218, 0.1);
}

.content-band .primary-button {
  border-color: rgba(231, 197, 106, 0.48);
  background:
    linear-gradient(180deg, #e2c26b 0%, #c99b38 48%, #8f6922 100%);
  color: #070707;
}

.content-band .ghost-button {
  border-color: rgba(238, 232, 218, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(15, 15, 15, 0.82);
  color: #f7f1e6;
}

.content-band .danger-button {
  border-color: rgba(197, 93, 86, 0.34);
  color: #e28d86;
}

.command-panel,
.quick-action-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(10, 10, 10, 0.96);
  color: #f7f1e6;
}

.command-result,
.quick-action-grid button {
  border-color: rgba(238, 232, 218, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)),
    rgba(7, 7, 7, 0.74);
  color: #f7f1e6;
}

.command-result span,
.quick-action-grid button span {
  color: rgba(245, 241, 232, 0.62);
}

/* v74: app-wide component contract so old light cards cannot leak through. */
.content-band article,
.business-band article,
.studio-band article,
.content-band :is(.empty-card, .history-card, .saved-look-card, .rule-card, .look-card, .client-product-card, .passport-product-card, .coach-item-card, .discover-card, .trend-card, .report-row, .campaign-segment, .campaign-history-row, .queue-card, .action-card, .community-post, .community-comment),
.content-band :is(.catalog-audit-row, .watchlist-row, .wardrobe-coverage-row, .wardrobe-gap-card, .wardrobe-gaps-head) {
  border-color: rgba(238, 232, 218, 0.13) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    rgba(8, 8, 8, 0.78) !important;
  color: #f7f1e6 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

.content-band article h2,
.content-band article h3,
.content-band article h4,
.content-band article strong,
.business-band article h3,
.studio-band article h3 {
  color: #f7f1e6 !important;
}

.content-band article p,
.content-band article span,
.business-band article p,
.studio-band article p,
.content-band :is(.status-line, .meta-line, .hint-line, .product-signal, .campaign-note) {
  color: rgba(245, 241, 232, 0.66) !important;
}

.content-band :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) {
  border: 1px solid rgba(238, 232, 218, 0.13) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
    rgba(7, 7, 7, 0.72) !important;
  color: #f7f1e6 !important;
}

.content-band :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) span {
  color: rgba(245, 241, 232, 0.62) !important;
}

.content-band :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) {
  background: transparent !important;
}

.content-band :is(input, select, textarea),
.command-panel input,
.quick-action-panel input {
  border-color: rgba(238, 232, 218, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(4, 4, 4, 0.78) !important;
  color: #f7f1e6 !important;
  box-shadow: none !important;
}

.content-band :is(input, textarea)::placeholder,
.command-panel input::placeholder,
.quick-action-panel input::placeholder {
  color: rgba(245, 241, 232, 0.42) !important;
}

.content-band :is(.pill, .tag, .badge, .source-badge, .stock-badge, .trend-chip, .signal-chip, .product-chip, .mood-chip),
.content-band article :is(.pill, .tag, .badge, .source-badge, .stock-badge, .trend-chip, .signal-chip, .product-chip, .mood-chip) {
  border: 1px solid rgba(238, 232, 218, 0.13) !important;
  background: rgba(245, 241, 232, 0.075) !important;
  color: rgba(245, 241, 232, 0.78) !important;
}

.content-band :is(.product-link, .mini-product-link, .ghost-button, .watch-button),
.content-band article :is(.product-link, .mini-product-link, .ghost-button, .watch-button) {
  border-color: rgba(238, 232, 218, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(15, 15, 15, 0.86) !important;
  color: #f7f1e6 !important;
}

.content-band :is(.primary-button, button[type="submit"]) {
  border-color: rgba(231, 197, 106, 0.48) !important;
  background:
    linear-gradient(180deg, #e2c26b 0%, #c99b38 48%, #8f6922 100%) !important;
  color: #070707 !important;
}

.content-band :is(.danger-button, .delete-button, [data-delete], [data-watch-remove]) {
  border-color: rgba(197, 93, 86, 0.34) !important;
  color: #e28d86 !important;
}

.content-band img {
  background: rgba(245, 241, 232, 0.08);
}

.business-step {
  border-color: rgba(238, 232, 218, 0.13) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
    rgba(8, 8, 8, 0.78) !important;
}

/* v75: studio and native chrome polish. */
.topbar {
  border-bottom-color: rgba(212, 166, 67, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(212, 166, 67, 0.16),
    0 16px 44px rgba(0, 0, 0, 0.42);
}

.active-view-chip {
  display: grid;
  align-content: center;
  min-height: 38px;
  border-left: 1px solid rgba(212, 166, 67, 0.24);
  padding-left: 10px;
}

.command-button,
.locale-switch select,
.market-switch select {
  min-height: 38px;
}

.mobile-dock {
  border-top-color: rgba(212, 166, 67, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012)),
    linear-gradient(90deg, rgba(212, 166, 67, 0.08), transparent 28%, transparent 72%, rgba(212, 166, 67, 0.08)),
    rgba(8, 8, 8, 0.96);
}

.mobile-dock a {
  gap: 6px;
  min-height: 58px;
}

.dock-icon {
  width: 34px;
  height: 34px;
  border-radius: 13px;
}

.mobile-dock a.active .dock-icon,
.mobile-dock a:focus-visible .dock-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 0 4px rgba(212, 166, 67, 0.1),
    0 12px 24px rgba(212, 166, 67, 0.2);
}

.mobile-dock a.active::after {
  bottom: -1px;
  width: 28px;
  height: 3px;
  box-shadow: 0 0 16px rgba(212, 166, 67, 0.45);
}

#studio.studio-band {
  background:
    radial-gradient(ellipse at 50% -120px, rgba(212, 166, 67, 0.16), transparent 44%),
    linear-gradient(180deg, #0c0c0c 0%, #070707 100%);
}

#studio .studio-grid {
  gap: 12px;
}

#studio .photo-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(238, 232, 218, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    radial-gradient(ellipse at 80% 0%, rgba(212, 166, 67, 0.12), transparent 38%),
    rgba(13, 13, 13, 0.94);
}

#studio .photo-panel::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(212, 166, 67, 0.1);
  border-radius: 18px;
  mask-image: linear-gradient(180deg, #000 0 34px, transparent 34px calc(100% - 34px), #000 calc(100% - 34px));
}

#studio .photo-panel .panel-head {
  position: relative;
  z-index: 1;
  align-items: center;
  border-bottom: 1px solid rgba(238, 232, 218, 0.1);
  padding-bottom: 12px;
}

#studio .photo-panel h2 {
  font-size: 1.24rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

#studio .upload-zone {
  position: relative;
  min-height: 360px;
  border: 1px solid rgba(238, 232, 218, 0.14);
  border-radius: 18px;
  background: #050505;
}

#studio .upload-zone img {
  min-height: 360px;
  filter: contrast(1.06) saturate(0.9);
}

#studio .upload-zone::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(245, 241, 232, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(#d4a643, #d4a643) left top / 34px 1px no-repeat,
    linear-gradient(#d4a643, #d4a643) left top / 1px 34px no-repeat,
    linear-gradient(#d4a643, #d4a643) right bottom / 34px 1px no-repeat,
    linear-gradient(#d4a643, #d4a643) right bottom / 1px 34px no-repeat;
  opacity: 0.62;
}

#studio .upload-zone span {
  z-index: 2;
  right: 16px;
  bottom: 16px;
  border-radius: 999px;
  padding: 10px 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#studio .score-wrap {
  border: 1px solid rgba(238, 232, 218, 0.13);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)),
    rgba(5, 5, 5, 0.74);
  padding: 12px;
}

#studio .score-ring {
  width: 88px;
  height: 88px;
}

#studio .score-ring strong {
  font-size: 1.7rem;
}

#studio .expert-critique-head,
#studio .expert-critique-grid article,
#studio .vision-panel,
#studio .repair-panel,
#studio .taste-panel {
  border-color: rgba(238, 232, 218, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)),
    rgba(4, 4, 4, 0.72);
}

#studio .repair-metrics,
#studio .repair-list,
#studio .vision-signals,
#studio .vision-fixes {
  color: #f7f1e6;
}

#studio .photo-capture-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

#studio .photo-capture-actions .ghost-button {
  min-height: 40px;
  border-radius: 12px;
  font-size: 0.72rem;
}

#studio .intro-panel {
  min-height: 210px;
  border-color: rgba(212, 166, 67, 0.18);
}

#studio .intro-panel h1 {
  max-width: 12ch;
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: 0.92;
}

#studio .intro-panel p {
  max-width: 30ch;
}

#studio .intro-panel .quick-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#studio .intro-panel .quick-stats div {
  min-height: 72px;
}

@media (max-width: 390px) {
  .topbar {
    grid-template-columns: 64px minmax(0, 1fr) 38px minmax(76px, 94px);
    gap: 6px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .active-view-chip {
    padding-left: 7px;
    font-size: 0.78rem;
  }

  .topbar-switches {
    gap: 4px;
  }

  .locale-switch select,
  .market-switch select {
    padding: 0 4px;
    font-size: 0.66rem;
  }

  #studio .upload-zone,
  #studio .upload-zone img {
    min-height: 300px;
  }

  #studio .photo-capture-actions {
    grid-template-columns: 1fr;
  }
}

/* v76: StyleCircle, share kit and command sheets as native premium surfaces. */
#community.community-band {
  background:
    radial-gradient(ellipse at 50% -120px, rgba(212, 166, 67, 0.15), transparent 43%),
    linear-gradient(180deg, #0b0b0b 0%, #070707 100%);
}

#community .section-head {
  border-color: rgba(212, 166, 67, 0.18);
}

#community .circle-identity-card,
#community .circle-room-insight,
#community .social-card-preview,
#community .community-post-card,
#community .community-challenge-card,
#community .community-leader-row,
#community .community-battle-card,
#community .community-battle-empty,
#community .community-moodboard-card,
#community .community-moodboard-empty,
#community .community-shop-receipt,
#community .community-shop-empty,
#community .community-pulse-card,
#community .community-pulse-empty,
#community .community-drop-card,
#community .community-drop-empty {
  border: 1px solid rgba(238, 232, 218, 0.13) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.016)),
    rgba(7, 7, 7, 0.78) !important;
  color: #f7f1e6 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 14px 34px rgba(0, 0, 0, 0.25) !important;
}

#community .circle-identity-card {
  grid-template-columns: 62px minmax(0, 1fr);
  border-radius: 20px;
}

#community .circle-avatar {
  border: 1px solid rgba(212, 166, 67, 0.34);
  background:
    linear-gradient(180deg, #e2c26b, #9f7629);
  color: #080808;
}

#community .circle-identity-main strong,
#community .community-author-line strong,
#community .community-post-head strong,
#community .social-card-copy strong,
#community .community-battle-side-body strong,
#community .community-moodboard-head strong,
#community .community-shop-head strong,
#community .community-pulse-lead strong,
#community .community-drop-copy strong {
  color: #f7f1e6 !important;
}

#community .circle-identity-main span,
#community .circle-identity-main p,
#community .community-author-line span,
#community .community-post-head span,
#community .community-post-stats,
#community .social-card-copy span,
#community .social-card-copy p,
#community .community-battle-side-body > span,
#community .community-moodboard-head span,
#community .community-shop-head span,
#community .community-shop-head p,
#community .community-pulse-lead span,
#community .community-pulse-lead p,
#community .community-drop-copy span,
#community .community-drop-copy p {
  color: rgba(245, 241, 232, 0.66) !important;
}

#community .circle-identity-stats span,
#community .community-metrics div,
#community .community-moodboard-metrics div,
#community .community-shop-metrics div,
#community .community-pulse-metrics div,
#community .community-drop-metrics div {
  border: 1px solid rgba(238, 232, 218, 0.12) !important;
  background: rgba(245, 241, 232, 0.065) !important;
  color: #f7f1e6 !important;
}

#community .circle-rooms {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#community .circle-rooms button {
  min-height: 68px;
  border-color: rgba(238, 232, 218, 0.13);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
    rgba(6, 6, 6, 0.78);
  color: #f7f1e6;
}

#community .circle-rooms button.active {
  border-color: rgba(212, 166, 67, 0.52);
  background:
    linear-gradient(180deg, #e2c26b 0%, #c99b38 48%, #8f6922 100%);
  color: #070707;
}

#community .circle-rooms button.active span {
  color: rgba(7, 7, 7, 0.68);
}

#community .social-share-panel {
  border-color: rgba(212, 166, 67, 0.2);
}

#community .social-share-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#community .social-card-preview {
  grid-template-columns: minmax(118px, 0.82fr) minmax(0, 1fr);
  padding: 10px;
}

#community .social-card-media {
  min-height: 188px;
  border: 1px solid rgba(238, 232, 218, 0.11);
  background: #050505;
}

#community .social-card-media img,
#community .community-post-media img,
#community .community-battle-media img,
#community .community-moodboard-media img,
#community .community-shop-head img,
#community .community-pulse-lead img,
#community .community-drop-hero img {
  filter: contrast(1.06) saturate(0.92);
}

#community .social-card-media span,
#community .community-post-media span,
#community .community-moodboard-media span,
#community .community-drop-copy span {
  border: 1px solid rgba(212, 166, 67, 0.28);
  background: rgba(8, 8, 8, 0.76);
  color: #e6c066;
}

#community .community-post-card {
  padding: 10px;
}

#community .community-post-media {
  min-height: 260px;
  border: 1px solid rgba(238, 232, 218, 0.11);
}

#community .community-author-line {
  border-bottom-color: rgba(238, 232, 218, 0.1);
}

#community .community-post-body p {
  color: rgba(245, 241, 232, 0.78) !important;
}

#community .community-post-actions .ghost-button.active,
#community .community-moodboard-actions .ghost-button.active {
  border-color: rgba(212, 166, 67, 0.42) !important;
  background: rgba(212, 166, 67, 0.13) !important;
  color: #e6c066 !important;
}

#community .community-item-pills span,
#community .community-pulse-tags span,
#community .community-moodboard-items span,
#community .community-battle-items span {
  border: 1px solid rgba(238, 232, 218, 0.13) !important;
  background: rgba(245, 241, 232, 0.075) !important;
  color: rgba(245, 241, 232, 0.78) !important;
}

#community .community-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

#community .community-comment-form input {
  min-height: 40px;
  border-radius: 14px;
}

.quick-action-sheet,
.command-palette {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(212, 166, 67, 0.14), transparent 48%),
    rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px);
}

.quick-action-panel,
.command-panel {
  border-color: rgba(238, 232, 218, 0.16);
  border-radius: 26px 26px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(8, 8, 8, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 -24px 70px rgba(0, 0, 0, 0.56);
}

.quick-action-head,
.command-head {
  border-bottom-color: rgba(238, 232, 218, 0.12);
}

.quick-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.quick-action-grid button {
  min-height: 96px;
  align-content: start;
  border-color: rgba(238, 232, 218, 0.13);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    rgba(6, 6, 6, 0.76);
  color: #f7f1e6;
}

.quick-action-grid button:focus-visible,
.quick-action-grid button:hover {
  border-color: rgba(212, 166, 67, 0.42);
  background:
    linear-gradient(180deg, rgba(212, 166, 67, 0.18), rgba(255, 255, 255, 0.018)),
    rgba(10, 10, 10, 0.92);
}

.quick-action-grid strong {
  color: #f7f1e6;
}

.quick-action-grid span {
  color: rgba(245, 241, 232, 0.58);
}

#commandSearchInput {
  border-color: rgba(238, 232, 218, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(4, 4, 4, 0.78);
  color: #f7f1e6;
}

.command-result {
  border-radius: 16px;
}

@media (max-width: 420px) {
  #community .circle-rooms,
  #community .social-share-actions,
  .quick-action-grid {
    grid-template-columns: 1fr;
  }

  #community .social-card-preview {
    grid-template-columns: 1fr;
  }

  #community .social-card-media {
    min-height: 240px;
  }
}

#inventory .catalog-audit-metrics div,
#inventory .watchlist-metrics div,
#inventory .catalog-audit-row,
#inventory .watchlist-row,
#inventory .watchlist-empty,
#inventory .empty-card,
#inventory .item-card {
  border: 1px solid rgba(238, 232, 218, 0.13);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018)),
    rgba(7, 7, 7, 0.74);
  color: #f7f1e6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 28px rgba(0, 0, 0, 0.22);
}

#inventory .item-card {
  overflow: hidden;
}

#inventory .item-card img {
  border-bottom: 1px solid rgba(238, 232, 218, 0.1);
}

#inventory .item-body,
#inventory .catalog-audit-row > div,
#inventory .watchlist-body {
  min-width: 0;
}

#inventory .item-card h3,
#inventory .item-card strong,
#inventory .catalog-audit-row-head strong,
#inventory .watchlist-row-head strong,
#inventory .watchlist-empty h4,
#inventory .empty-card h4,
#inventory .catalog-audit-metrics strong,
#inventory .watchlist-metrics strong {
  color: #f7f1e6;
}

#inventory .stock-line,
#inventory .item-card p,
#inventory .catalog-audit-row p,
#inventory .watchlist-body p,
#inventory .watchlist-empty p,
#inventory .empty-card p,
#inventory .catalog-audit-metrics span,
#inventory .watchlist-metrics span {
  color: rgba(245, 241, 232, 0.64);
}

#inventory .item-meta,
#inventory .stock-line,
#inventory .watchlist-row-head,
#inventory .catalog-audit-row-head {
  color: rgba(245, 241, 232, 0.78);
}

#inventory .source-badge,
#inventory .stock-badge,
#inventory .pill,
#inventory .catalog-audit-tags span,
#inventory .watchlist-row-head span,
#inventory .watchlist-signal span {
  border: 1px solid rgba(238, 232, 218, 0.12);
  background: rgba(245, 241, 232, 0.075);
  color: rgba(245, 241, 232, 0.78);
}

#inventory .source-shop,
#inventory .stock-available,
#inventory .watchlist-price-ready .watchlist-row-head span {
  border-color: rgba(212, 166, 67, 0.3);
  color: #e6c066;
}

#inventory .source-user,
#inventory .stock-owned {
  border-color: rgba(190, 196, 198, 0.3);
  color: #c8cdd0;
}

#inventory .stock-low,
#inventory .watchlist-low {
  border-color: rgba(212, 166, 67, 0.38);
  color: #e6c066;
}

#inventory .stock-missing,
#inventory .watchlist-missing {
  border-color: rgba(197, 93, 86, 0.42);
  color: #e28d86;
}

#inventory .catalog-audit-row {
  border-left: 3px solid rgba(212, 166, 67, 0.8);
}

#inventory .catalog-audit-block {
  border-left-color: rgba(197, 93, 86, 0.85);
}

#inventory .catalog-audit-warn {
  border-left-color: rgba(212, 166, 67, 0.9);
}

#inventory .catalog-audit-row img,
#inventory .watchlist-row img {
  background: rgba(245, 241, 232, 0.08);
  border-radius: 10px;
}

#inventory .inventory-grid {
  gap: 10px;
}

#inventory .product-link,
#inventory .watch-button,
#inventory .watchlist-row-actions .ghost-button,
#inventory .watchlist-row-actions .product-link {
  border: 1px solid rgba(238, 232, 218, 0.15);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
    rgba(15, 15, 15, 0.88);
  color: #f7f1e6;
}

#inventory .watch-button.is-watching {
  border-color: rgba(212, 166, 67, 0.42);
  background: rgba(212, 166, 67, 0.12);
  color: #e6c066;
}

#inventory .danger-button,
#inventory .watchlist-row-actions .danger-button {
  border-color: rgba(197, 93, 86, 0.32);
  color: #e28d86;
}

@media (max-width: 460px) {
  #inventory .inventory-grid,
  #inventory .catalog-audit-list {
    grid-template-columns: 1fr;
  }

  #inventory .watchlist-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  #inventory .watchlist-row-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v82: hard readability gate. Obsidian/platinum/gold, no pale text on pale surfaces. */
:root {
  --read-bg: #050505;
  --read-shell: #0a0a0a;
  --read-panel: #111111;
  --read-panel-2: #181818;
  --read-card: #202020;
  --read-text: #f8f3e9;
  --read-soft: #d4ccbd;
  --read-muted: #a9a194;
  --read-faint: #7f786e;
  --read-line: rgba(248, 243, 233, 0.18);
  --read-line-soft: rgba(248, 243, 233, 0.11);
  --read-gold: #d4a643;
  --read-gold-bright: #e8c66e;
  --read-danger: #e28d86;
  --app-bg: var(--read-bg);
  --app-surface: var(--read-panel);
  --app-ink: var(--read-text);
  --app-muted: var(--read-muted);
  --ink: var(--read-text);
  --muted: var(--read-muted);
  --paper: var(--read-bg);
  --line: var(--read-line);
}

html,
body {
  background:
    radial-gradient(ellipse at 50% -12%, rgba(212, 166, 67, 0.14), transparent 34%),
    linear-gradient(180deg, #050505 0%, #0a0a0a 48%, #050505 100%) !important;
  color: var(--read-text) !important;
  color-scheme: dark;
}

body::before {
  display: none !important;
}

main,
.studio-band,
.content-band,
.business-band {
  background:
    repeating-linear-gradient(135deg, rgba(248, 243, 233, 0.028) 0 1px, transparent 1px 16px),
    var(--read-bg) !important;
  color: var(--read-text) !important;
}

.app-shell,
.topbar,
.mobile-dock {
  border-color: var(--read-line-soft) !important;
  background:
    linear-gradient(180deg, rgba(248, 243, 233, 0.07), rgba(248, 243, 233, 0.018)),
    rgba(8, 8, 8, 0.96) !important;
  color: var(--read-text) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42) !important;
}

.brand,
.brand > span,
.brand small,
.active-view-chip,
.topbar-actions a,
.locale-switch,
.market-switch,
.dock-label {
  color: var(--read-text) !important;
}

.brand small,
.topbar-actions a,
.locale-switch span,
.market-switch span {
  color: var(--read-muted) !important;
}

.brand-logo {
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.48));
}

.panel,
[class$="-panel"],
.section-head,
.intro-panel,
.photo-panel,
.vision-panel,
.repair-panel,
.taste-panel,
.controls-panel,
.recommendation-panel,
.passport-panel,
.coach-panel,
.fit-panel,
.planner-panel,
.capsule-panel,
.lookbook-panel,
.report-panel,
.inventory-layout > *,
.wardrobe-panel,
.catalog-audit-panel,
.watchlist-panel,
.social-share-panel,
.community-feed-panel,
.community-shop-panel,
.trend-intel-panel,
.brain-panel {
  border-color: var(--read-line-soft) !important;
  background:
    linear-gradient(180deg, rgba(248, 243, 233, 0.062), rgba(248, 243, 233, 0.018)),
    var(--read-panel) !important;
  color: var(--read-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(248, 243, 233, 0.075),
    0 18px 42px rgba(0, 0, 0, 0.34) !important;
}

main article,
.quick-stats div,
.outfit-summary div,
.vision-signals article,
.expert-critique-head,
.expert-critique-grid article,
.repair-card,
.repair-metrics div,
.photo-capture-card,
.photo-capture-editor,
.outfit-row,
.item-card,
.empty-card,
.history-card,
.saved-look-card,
.rule-card,
.trend-card,
.discover-card,
.look-card,
.client-product-card,
.passport-product-card,
.coach-item-card,
.planner-slot,
.planner-history-card,
.capsule-history-card,
.fit-history-card,
.size-measurement-guide-card,
.size-passport-metrics div,
.wardrobe-metrics div,
.wardrobe-coverage-row,
.wardrobe-gap-card,
.catalog-audit-row,
.catalog-audit-metrics div,
.watchlist-row,
.watchlist-empty,
.watchlist-metrics div,
.report-row,
.report-metric,
.campaign-history-row,
.queue-card,
.action-card,
.lead-card,
.reservation-card,
.community-post-card,
.community-challenge-card,
.community-battle-card,
.community-moodboard-card,
.community-pulse-card,
.community-drop-card,
.circle-identity-card,
.social-card-preview {
  border-color: var(--read-line-soft) !important;
  background:
    linear-gradient(180deg, rgba(248, 243, 233, 0.075), rgba(248, 243, 233, 0.024)),
    var(--read-card) !important;
  color: var(--read-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(248, 243, 233, 0.075),
    0 14px 30px rgba(0, 0, 0, 0.24) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
.panel h1,
.panel h2,
.panel h3,
.section-head h2,
.panel-head h2,
.panel-head h3,
.item-card h3,
.outfit-row strong,
.expert-critique-head strong,
.expert-critique-grid strong,
.history-card h3,
.saved-look-card h3,
.trend-card h3,
.look-card h3,
.repair-card h4,
.watchlist-row-head strong,
.catalog-audit-row-head strong {
  color: var(--read-text) !important;
  text-shadow: none !important;
}

p,
span,
small,
label,
li,
td,
th,
.status-line,
.panel p,
.section-head p,
.item-card p,
.outfit-row span,
.expert-critique-grid p,
.vision-fixes p,
.repair-card p,
.history-card p,
.saved-look-card p,
.trend-card p,
.look-card p,
.watchlist-body p,
.catalog-audit-row p,
.empty-card p {
  color: var(--read-soft) !important;
}

.eyebrow,
.trend-score,
.source-shop,
.stock-available,
.watchlist-price-ready .watchlist-row-head span,
.panel-head .eyebrow,
.section-head .eyebrow {
  color: var(--read-gold-bright) !important;
}

input,
select,
textarea,
.content-band input,
.content-band select,
.content-band textarea,
.locale-switch select,
.market-switch select,
#commandSearchInput {
  border-color: var(--read-line) !important;
  background:
    linear-gradient(180deg, rgba(248, 243, 233, 0.06), rgba(248, 243, 233, 0.018)),
    #080808 !important;
  color: var(--read-text) !important;
  caret-color: var(--read-gold-bright);
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--read-faint) !important;
}

option {
  background: #080808 !important;
  color: var(--read-text) !important;
}

button,
.ghost-button,
.import-button,
.product-link,
.mini-product-link,
.watch-button,
.command-button,
.quick-action-grid button,
.circle-rooms button,
.segmented button,
.mode-switch button,
.taste-actions button {
  border-color: var(--read-line) !important;
  background:
    linear-gradient(180deg, rgba(248, 243, 233, 0.075), rgba(248, 243, 233, 0.02)),
    #121212 !important;
  color: var(--read-text) !important;
}

.primary-button,
button[type="submit"],
.segmented button.active,
.mode-switch button.active,
.mobile-dock a.active .dock-icon,
.circle-rooms button.active {
  border-color: rgba(232, 198, 110, 0.6) !important;
  background:
    linear-gradient(180deg, #f0d57e 0%, #d4a643 48%, #9a7427 100%) !important;
  color: #050505 !important;
  text-shadow: none !important;
}

.primary-button *,
button[type="submit"] *,
.segmented button.active *,
.mode-switch button.active *,
.circle-rooms button.active * {
  color: #050505 !important;
}

.danger-button,
.delete-button,
[data-watch-remove],
[data-rule-remove],
[data-trend-remove] {
  border-color: rgba(226, 141, 134, 0.42) !important;
  background: rgba(226, 141, 134, 0.1) !important;
  color: var(--read-danger) !important;
}

.pill,
.tag,
.badge,
.source-badge,
.stock-badge,
.trend-chip,
.signal-chip,
.product-chip,
.mood-chip,
.repair-tags span,
.watchlist-signal span,
.catalog-audit-tags span,
.community-item-pills span,
.community-pulse-tags span,
.community-moodboard-items span,
.community-battle-items span {
  border-color: var(--read-line-soft) !important;
  background: rgba(248, 243, 233, 0.085) !important;
  color: var(--read-soft) !important;
}

.price,
.history-score,
.trend-card-meta span,
.app-toast,
.range-value,
.score-value {
  color: var(--read-text) !important;
}

.palette-swatch small,
.stock-line,
.item-meta,
.watchlist-row-head span,
.catalog-audit-metrics span,
.watchlist-metrics span,
.wardrobe-metrics span,
.quick-stats span,
.outfit-summary span,
.repair-metrics span {
  color: var(--read-muted) !important;
}

.upload-zone,
.photo-frame,
.social-card-media,
.community-post-media,
.community-battle-media,
.community-moodboard-media,
.community-shop-head img,
.community-pulse-lead img,
.community-drop-hero img {
  border-color: var(--read-line-soft) !important;
  background: #080808 !important;
  color: var(--read-text) !important;
}

.photo-frame img,
.item-card img,
.outfit-row img,
.repair-card img,
.planner-slot img,
.watchlist-row img,
.catalog-audit-row img,
.social-card-media img,
.community-post-media img {
  background: #0b0b0b !important;
}

.progress-bar,
.wardrobe-coverage-row .progress,
.catalog-audit-bar,
.product-signal-bar {
  background: rgba(248, 243, 233, 0.16) !important;
}

.progress-bar span,
.wardrobe-coverage-row .progress span,
.catalog-audit-bar span,
.product-signal-bar span {
  background: var(--read-gold-bright) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
label.import-button:focus-within {
  outline: 3px solid rgba(232, 198, 110, 0.44) !important;
  outline-offset: 2px;
}

/* v83: final readability clamp for legacy light widgets. */
.app-shell *,
.content-band *,
.mobile-dock * {
  text-shadow: none !important;
}

.section-actions,
.csv-actions,
.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,
.outfit-list,
.inventory-grid,
.product-list,
.history-list,
.look-list,
.community-feed,
.watchlist-list,
.catalog-audit-list {
  color: var(--read-text) !important;
}

.taste-metrics div,
.passport-metrics div,
.coach-metrics div,
.fit-metrics div,
.planner-metrics div,
.capsule-metrics div,
.discover-metrics div,
.trend-metrics div,
.lookbook-metrics div,
.reservation-metrics div,
.followup-metrics div,
.client-metrics div,
.client-dossier-metrics div,
.action-queue-metrics div,
.report-metrics div,
.campaign-metrics div,
.campaign-history-metrics div,
.product-signal-metrics div,
.restock-metrics div,
.style-memory-metrics div,
.community-metrics div,
.community-moodboard-metrics div,
.community-shop-metrics div,
.community-pulse-metrics div,
.community-drop-metrics div,
.circle-identity-stats span,
.community-post-stats span,
.look-stats span,
.saved-look-stats span,
.report-row-stats span,
.product-signal,
.campaign-note,
.meta-line,
.hint-line {
  border-color: var(--read-line-soft) !important;
  background:
    linear-gradient(180deg, rgba(248, 243, 233, 0.072), rgba(248, 243, 233, 0.018)),
    rgba(12, 12, 12, 0.92) !important;
  color: var(--read-text) !important;
}

.taste-metrics strong,
.passport-metrics strong,
.coach-metrics strong,
.fit-metrics strong,
.planner-metrics strong,
.capsule-metrics strong,
.discover-metrics strong,
.trend-metrics strong,
.lookbook-metrics strong,
.reservation-metrics strong,
.followup-metrics strong,
.client-metrics strong,
.client-dossier-metrics strong,
.action-queue-metrics strong,
.report-metrics strong,
.campaign-metrics strong,
.campaign-history-metrics strong,
.product-signal-metrics strong,
.restock-metrics strong,
.style-memory-metrics strong,
.community-metrics strong,
.community-moodboard-metrics strong,
.community-shop-metrics strong,
.community-pulse-metrics strong,
.community-drop-metrics strong,
.circle-identity-stats strong,
.community-post-stats strong,
.look-stats strong,
.saved-look-stats strong,
.report-row-stats strong {
  color: var(--read-text) !important;
}

.taste-metrics span,
.passport-metrics span,
.coach-metrics span,
.fit-metrics span,
.planner-metrics span,
.capsule-metrics span,
.discover-metrics span,
.trend-metrics span,
.lookbook-metrics span,
.reservation-metrics span,
.followup-metrics span,
.client-metrics span,
.client-dossier-metrics span,
.action-queue-metrics span,
.report-metrics span,
.campaign-metrics span,
.campaign-history-metrics span,
.product-signal-metrics span,
.restock-metrics span,
.style-memory-metrics span,
.community-metrics span,
.community-moodboard-metrics span,
.community-shop-metrics span,
.community-pulse-metrics span,
.community-drop-metrics span,
.circle-identity-stats span,
.community-post-stats span,
.look-stats span,
.saved-look-stats span,
.report-row-stats span {
  color: var(--read-muted) !important;
}

.wardrobe-bar,
.stock-bar,
.restock-bar,
.report-bar,
.campaign-bar,
.product-signal-score,
.discover-queue-score {
  overflow: hidden;
  border-color: var(--read-line-soft) !important;
  background: rgba(248, 243, 233, 0.16) !important;
}

.wardrobe-bar span,
.stock-bar span,
.restock-bar span,
.report-bar span,
.campaign-bar span,
.product-signal-score span,
.discover-queue-score span {
  background:
    linear-gradient(90deg, var(--read-gold), var(--read-gold-bright)) !important;
}

.segmented,
.mode-switch,
.locale-switch,
.market-switch,
.command-panel,
.quick-action-panel,
.app-toast {
  border-color: var(--read-line-soft) !important;
  background:
    linear-gradient(180deg, rgba(248, 243, 233, 0.075), rgba(248, 243, 233, 0.018)),
    rgba(8, 8, 8, 0.96) !important;
  color: var(--read-text) !important;
}

.segmented button:not(.active),
.mode-switch button:not(.active),
.mobile-dock a:not(.active) {
  color: var(--read-muted) !important;
}

.mobile-dock a.active,
.mobile-dock a.active .dock-label,
.mobile-dock a.active span {
  color: var(--read-text) !important;
}

.mobile-dock a.active .dock-icon {
  color: #050505 !important;
}

.palette-swatch {
  border-color: var(--read-line-soft) !important;
  box-shadow:
    inset 0 0 0 1px rgba(248, 243, 233, 0.18),
    0 10px 22px rgba(0, 0, 0, 0.28) !important;
}

.palette-swatch small {
  display: inline-block;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.72) !important;
  padding: 3px 7px;
  color: var(--read-text) !important;
}

.score-ring {
  color: var(--read-text) !important;
}

.score-ring strong,
.score-ring span {
  color: var(--read-text) !important;
}

.content-band :is(.warning, .error, .danger, .negative) {
  color: var(--read-danger) !important;
}

/* v84: typography polish. Native mobile fonts, no fake-heavy raster text. */
:root {
  --type-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --type-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --type-data: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
  font-family: var(--type-ui) !important;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-synthesis: none;
}

body,
.content-band,
.panel,
[class$="-panel"] {
  font-size: 16px;
  line-height: 1.45;
}

body *,
.app-shell *,
.content-band *,
.mobile-dock * {
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app-shell,
.topbar,
.mobile-dock,
.command-panel,
.quick-action-panel,
.app-toast {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-head h2,
.panel-head h2,
.panel-head h3,
.score-wrap h3,
.brand > span,
.active-view-chip {
  font-family: var(--type-display) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
}

h1,
.intro-panel h1 {
  font-size: clamp(1.82rem, 7vw, 2.6rem) !important;
}

h2,
.section-head h2 {
  font-size: clamp(1.25rem, 4.8vw, 1.72rem) !important;
}

h3,
.panel-head h3 {
  font-size: clamp(1rem, 3.5vw, 1.22rem) !important;
}

h4,
h5,
h6 {
  font-size: 0.98rem !important;
}

p,
li,
td,
th,
label,
.status-line,
.panel p,
.section-head p,
.expert-critique-grid p,
.vision-fixes p,
.repair-card p,
.history-card p,
.saved-look-card p,
.trend-card p,
.look-card p,
.watchlist-body p,
.catalog-audit-row p,
.empty-card p {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

span,
small,
.eyebrow,
.brand small,
.item-meta,
.stock-line,
.source-shop,
.dock-label,
.locale-switch span,
.market-switch span,
.topbar-actions a,
.palette-swatch small,
.trend-card-meta span,
.watchlist-row-head span,
.catalog-audit-metrics span,
.watchlist-metrics span,
.wardrobe-metrics span,
.quick-stats span,
.outfit-summary span,
.repair-metrics span {
  font-size: max(0.72rem, 12px) !important;
  font-weight: 500 !important;
  line-height: 1.28 !important;
}

.eyebrow,
.brand small,
.panel-head .eyebrow,
.section-head .eyebrow {
  text-transform: none !important;
  font-weight: 600 !important;
}

strong,
b,
.quick-stats strong,
.outfit-summary strong,
.score-ring strong,
.vision-signals strong,
.expert-critique-head strong,
.expert-critique-grid strong,
.taste-metrics strong,
.passport-metrics strong,
.coach-metrics strong,
.fit-metrics strong,
.planner-metrics strong,
.capsule-metrics strong,
.discover-metrics strong,
.trend-metrics strong,
.lookbook-metrics strong,
.reservation-metrics strong,
.followup-metrics strong,
.client-metrics strong,
.client-dossier-metrics strong,
.action-queue-metrics strong,
.report-metrics strong,
.campaign-metrics strong,
.campaign-history-metrics strong,
.product-signal-metrics strong,
.restock-metrics strong,
.style-memory-metrics strong,
.community-metrics strong,
.community-moodboard-metrics strong,
.community-shop-metrics strong,
.community-pulse-metrics strong,
.community-drop-metrics strong,
.wardrobe-metrics strong,
.wardrobe-coverage-row strong,
.wardrobe-gap-card strong,
.catalog-audit-metrics strong,
.watchlist-metrics strong {
  font-weight: 700 !important;
  line-height: 1.12 !important;
}

button,
.ghost-button,
.primary-button,
.import-button,
.product-link,
.mini-product-link,
.watch-button,
.command-button,
.quick-action-grid button,
.circle-rooms button,
.segmented button,
.mode-switch button,
.taste-actions button,
.locale-switch select,
.market-switch select {
  font-size: max(0.82rem, 13px) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  text-transform: none !important;
}

input,
select,
textarea,
#commandSearchInput {
  font-size: max(1rem, 16px) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
}

.mobile-dock a,
.mobile-dock .dock-label {
  font-size: max(0.68rem, 11.5px) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
}

.dock-icon,
.topbar-actions button,
.quick-action-button {
  font-weight: 600 !important;
}

.price,
.history-score,
.trend-score,
.score-value,
.range-value,
.metric-value,
.score-ring strong,
.quick-stats strong,
.outfit-summary strong,
.wardrobe-metrics strong,
.catalog-audit-metrics strong,
.watchlist-metrics strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 1;
}

.score-ring span,
.palette-swatch small,
.pill,
.tag,
.badge,
.source-badge,
.stock-badge,
.trend-chip,
.signal-chip,
.product-chip,
.mood-chip,
.repair-tags span,
.watchlist-signal span,
.catalog-audit-tags span,
.community-item-pills span,
.community-pulse-tags span,
.community-moodboard-items span,
.community-battle-items span {
  font-weight: 600 !important;
  text-transform: none !important;
}

/* v85: modal overlay guard. Hidden means gone; open means visible panel, not a black veil. */
[hidden],
.command-palette[hidden],
.quick-action-sheet[hidden],
.app-toast[hidden],
.photo-capture-editor[hidden],
.studio-band[hidden],
.content-band[hidden],
.business-band[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.command-palette:not([hidden]),
.quick-action-sheet:not([hidden]) {
  display: grid !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  z-index: 90 !important;
  background: rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: max(18px, env(safe-area-inset-top, 0px)) 18px max(18px, env(safe-area-inset-bottom, 0px)) !important;
}

.command-palette:not([hidden]) .command-panel,
.quick-action-sheet:not([hidden]) .quick-action-panel {
  display: grid !important;
  width: min(460px, calc(100vw - 36px)) !important;
  max-height: min(78dvh, 680px) !important;
  margin: auto !important;
  overflow: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  border: 1px solid rgba(248, 243, 233, 0.18) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(248, 243, 233, 0.08), rgba(248, 243, 233, 0.02)),
    #101010 !important;
  box-shadow:
    inset 0 1px 0 rgba(248, 243, 233, 0.1),
    0 24px 70px rgba(0, 0, 0, 0.46) !important;
  color: var(--read-text) !important;
}

.command-palette:not([hidden]) .command-head,
.quick-action-sheet:not([hidden]) .quick-action-head {
  border-bottom-color: var(--read-line-soft) !important;
}

/* v86: photo clarity. Outfit photos must stay inspectable, not smoked over. */
#studio .photo-panel {
  overflow: visible !important;
}

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

#studio .upload-zone,
.upload-zone {
  isolation: isolate;
  overflow: hidden !important;
  border-color: rgba(248, 243, 233, 0.18) !important;
  background: #080808 !important;
}

#studio .upload-zone img,
.upload-zone img,
#uploadedPhoto {
  position: relative;
  z-index: 0;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  object-fit: cover;
  object-position: center top;
}

#studio .upload-zone span,
.upload-zone span {
  z-index: 2;
  border: 1px solid rgba(248, 243, 233, 0.2) !important;
  background: rgba(8, 8, 8, 0.78) !important;
  color: var(--read-text) !important;
  text-transform: none !important;
}

#studio .score-wrap,
#studio .vision-panel,
#studio .repair-panel,
#studio .taste-panel {
  background:
    linear-gradient(180deg, rgba(248, 243, 233, 0.07), rgba(248, 243, 233, 0.018)),
    #101010 !important;
}

/* v87: single native app shell. Remove old competing chrome layers. */
:root {
  --app-width: min(100vw, 430px);
  --topbar-height: 66px;
  --dock-height: 84px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html,
body {
  min-height: 100dvh;
  height: 100%;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse at 50% -8%, rgba(212, 166, 67, 0.12), transparent 34%),
    #050505 !important;
}

body::before,
body::after {
  content: none !important;
  display: none !important;
}

.app-shell {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 58 !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  pointer-events: none !important;
}

.topbar {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) 44px minmax(96px, 120px) !important;
  align-items: center !important;
  width: min(var(--app-width), calc(100vw - 14px)) !important;
  min-height: calc(var(--topbar-height) + var(--safe-top)) !important;
  margin: 0 auto !important;
  gap: 8px !important;
  border: 1px solid rgba(248, 243, 233, 0.14) !important;
  border-top: 0 !important;
  border-radius: 0 0 22px 22px !important;
  background:
    linear-gradient(180deg, rgba(248, 243, 233, 0.07), rgba(248, 243, 233, 0.018)),
    #0d0d0d !important;
  box-shadow:
    inset 0 1px 0 rgba(248, 243, 233, 0.1),
    0 18px 42px rgba(0, 0, 0, 0.38) !important;
  padding: calc(8px + var(--safe-top)) 10px 8px !important;
  pointer-events: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.brand {
  display: grid !important;
  align-items: center !important;
  width: 92px !important;
  min-width: 92px !important;
  height: 42px !important;
  overflow: hidden !important;
  color: var(--read-text) !important;
}

.brand-logo {
  display: block !important;
  width: 92px !important;
  height: 42px !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 > span,
.brand small,
.brand-mark {
  display: none !important;
}

.active-view-chip {
  display: block !important;
  overflow: hidden !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--read-text) !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.active-view-chip::after {
  content: none !important;
  display: none !important;
}

.command-button {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 15px !important;
  padding: 0 !important;
}

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

.command-button-icon {
  display: grid !important;
  width: 20px !important;
  height: 20px !important;
  color: var(--read-text) !important;
}

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

.topbar-switches {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 6px !important;
}

.locale-switch,
.market-switch {
  min-width: 0 !important;
}

.locale-switch select,
.market-switch select {
  min-height: 42px !important;
  border-radius: 15px !important;
  padding: 0 6px !important;
  text-align: center !important;
}

main {
  position: fixed !important;
  inset: calc(var(--topbar-height) + var(--safe-top)) 0 calc(var(--dock-height) + var(--safe-bottom)) 0 !important;
  z-index: 2 !important;
  display: grid !important;
  justify-items: center !important;
  overflow: hidden !important;
  background: transparent !important;
}

.studio-band,
.content-band,
.business-band {
  width: min(var(--app-width), calc(100vw - 14px)) !important;
  max-width: calc(100vw - 14px) !important;
  height: 100% !important;
  margin: 0 auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-right: 1px solid rgba(248, 243, 233, 0.08) !important;
  border-left: 1px solid rgba(248, 243, 233, 0.08) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(248, 243, 233, 0.035), transparent 190px),
    #090909 !important;
  padding: 12px 10px 28px !important;
  scrollbar-width: none;
}

.studio-band::-webkit-scrollbar,
.content-band::-webkit-scrollbar,
.business-band::-webkit-scrollbar {
  display: none;
}

.mobile-dock {
  position: fixed !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 57 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: min(var(--app-width), calc(100vw - 14px)) !important;
  min-height: calc(var(--dock-height) + var(--safe-bottom)) !important;
  margin: 0 auto !important;
  border: 1px solid rgba(248, 243, 233, 0.14) !important;
  border-bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  background:
    linear-gradient(180deg, rgba(248, 243, 233, 0.07), rgba(248, 243, 233, 0.018)),
    #0d0d0d !important;
  box-shadow:
    inset 0 1px 0 rgba(248, 243, 233, 0.1),
    0 -18px 42px rgba(0, 0, 0, 0.34) !important;
  padding: 8px 8px calc(8px + var(--safe-bottom)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mobile-dock a {
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 5px !important;
  min-height: 58px !important;
  border-radius: 16px !important;
}

.quick-action-button {
  right: max(18px, calc((100vw - var(--app-width)) / 2 + 18px)) !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom) + 16px) !important;
  z-index: 59 !important;
}

/* v88: remove legacy glyph soup and tighten app components. */
.quick-action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.quick-action-grid button {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  gap: 5px !important;
  min-height: 74px !important;
  border: 1px solid rgba(248, 243, 233, 0.13) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(248, 243, 233, 0.065), rgba(248, 243, 233, 0.018)),
    #111111 !important;
  box-shadow: none !important;
  padding: 11px !important;
  text-align: left !important;
}

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

.quick-action-grid button:hover,
.quick-action-grid button:focus-visible {
  border-color: rgba(232, 198, 110, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(232, 198, 110, 0.16), rgba(248, 243, 233, 0.024)),
    #121212 !important;
}

.quick-action-grid strong {
  overflow-wrap: anywhere;
  color: var(--read-text) !important;
  font-size: 0.86rem !important;
  line-height: 1.1 !important;
}

.quick-action-grid span {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: var(--read-muted) !important;
  font-size: 0.74rem !important;
  line-height: 1.22 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.panel,
[class$="-panel"],
.section-head,
main article,
.item-card,
.outfit-row,
.history-card,
.saved-look-card,
.trend-card,
.look-card,
.repair-card,
.empty-card,
.watchlist-row,
.catalog-audit-row,
.wardrobe-coverage-row,
.wardrobe-gap-card,
.community-post-card,
.social-card-preview {
  border-radius: 14px !important;
}

.panel-head,
.section-head,
.repair-head,
.vision-head,
.quick-action-head,
.command-head {
  gap: 10px !important;
  padding-bottom: 10px !important;
}

.section-head {
  margin-bottom: 12px !important;
}

.section-head p,
.panel-head p,
.status-line {
  margin-top: 4px !important;
}

.field-grid,
.capture-field-grid,
.profile-grid,
.taste-grid,
.size-grid {
  gap: 10px !important;
}

.ghost-button,
.primary-button,
.import-button,
.product-link,
.mini-product-link,
.watch-button,
.segmented button,
.mode-switch button {
  min-height: 40px !important;
  border-radius: 12px !important;
}

.segmented,
.mode-switch {
  border-radius: 14px !important;
  padding: 4px !important;
}

.palette-swatches {
  gap: 7px !important;
}

.palette-swatches span,
.palette-swatch {
  border-radius: 12px !important;
}

.palette-swatches i {
  border-radius: 8px !important;
}

@media (max-width: 380px) {
  .quick-action-grid {
    grid-template-columns: 1fr !important;
  }
}

/* v89: logo fix. Use transparent mark, never the square source PNG in the topbar. */
.topbar {
  grid-template-columns: 74px minmax(0, 1fr) 44px minmax(96px, 120px) !important;
}

.brand {
  width: 74px !important;
  min-width: 74px !important;
  height: 42px !important;
  background: transparent !important;
}

.brand-logo {
  width: 74px !important;
  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;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.34)) !important;
  transform: none !important;
}

/* v92: make the expert result card read like a mobile app surface, not a squeezed web card. */
#studio.studio-band,
.studio-band {
  padding-bottom: 56px !important;
  scroll-padding-bottom: 56px !important;
}

#studio .score-wrap {
  grid-template-columns: 74px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 14px !important;
  margin-top: 14px !important;
  margin-bottom: 16px !important;
  padding: 15px !important;
}

#studio .score-ring {
  width: 74px !important;
  height: 74px !important;
  margin-top: 2px !important;
}

#studio .score-ring strong {
  font-size: 1.44rem !important;
}

#studio .score-wrap h3 {
  margin: 0 0 7px !important;
  color: #f7f2e8 !important;
  font-size: 1.04rem !important;
  line-height: 1.14 !important;
}

#studio .score-wrap p {
  margin: 0 !important;
  color: rgba(247, 242, 232, 0.82) !important;
  font-size: 0.88rem !important;
  line-height: 1.36 !important;
  opacity: 1 !important;
}

.brand-pill {
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 2px 0 6px !important;
  border-color: rgba(212, 166, 67, 0.42) !important;
  background: rgba(212, 166, 67, 0.12) !important;
  color: #e8c66e !important;
}

/* v101: app legibility pass. Solid mobile surfaces, no desktop nav bleed, no washed text. */
:root {
  --read-bg: #050505;
  --read-shell: #0a0a0a;
  --read-panel: #101010;
  --read-panel-2: #151515;
  --read-card: #1a1a1a;
  --read-text: #fbf6ea;
  --read-soft: #ddd4c6;
  --read-muted: #b8ae9f;
  --read-faint: #8b8174;
  --read-line: rgba(251, 246, 234, 0.18);
  --read-line-soft: rgba(251, 246, 234, 0.12);
  --read-gold: #d4a643;
  --read-gold-bright: #efcc71;
  --topbar-height: 64px;
  --dock-height: 78px;
}

body,
main,
.studio-band,
.content-band,
.business-band {
  background:
    radial-gradient(ellipse at 50% -12%, rgba(212, 166, 67, 0.12), transparent 32%),
    #050505 !important;
}

.topbar-actions {
  display: none !important;
}

.topbar {
  grid-template-columns: 74px minmax(0, 1fr) 44px minmax(104px, 128px) !important;
  min-height: calc(var(--topbar-height) + var(--safe-top)) !important;
  border-color: rgba(251, 246, 234, 0.16) !important;
  border-radius: 0 0 18px 18px !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.065), rgba(251, 246, 234, 0.015)),
    #090909 !important;
  padding: calc(7px + var(--safe-top)) 9px 7px !important;
}

.active-view-chip {
  color: var(--read-text) !important;
  font-size: 0.94rem !important;
  font-weight: 720 !important;
}

.command-button,
.locale-switch select,
.market-switch select {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.085), rgba(251, 246, 234, 0.02)),
    #131313 !important;
}

.command-button svg {
  width: 20px !important;
  height: 20px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.locale-switch span,
.market-switch span {
  display: none !important;
}

.locale-switch select,
.market-switch select {
  padding: 0 7px !important;
  color: var(--read-text) !important;
  font-size: 0.84rem !important;
  font-weight: 720 !important;
}

main {
  inset: calc(var(--topbar-height) + var(--safe-top)) 0 calc(var(--dock-height) + var(--safe-bottom)) 0 !important;
}

.studio-band,
.content-band,
.business-band {
  padding: 12px 10px 34px !important;
  border-color: rgba(251, 246, 234, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.032), transparent 220px),
    #080808 !important;
}

.panel,
[class$="-panel"],
main article,
.item-card,
.empty-card,
.history-card,
.saved-look-card,
.trend-card,
.look-card,
.repair-card,
.watchlist-row,
.catalog-audit-row,
.wardrobe-gap-card,
.community-post-card,
.social-card-preview {
  border-color: var(--read-line-soft) !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.052), rgba(251, 246, 234, 0.015)),
    var(--read-card) !important;
  color: var(--read-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(251, 246, 234, 0.075),
    0 14px 34px rgba(0, 0, 0, 0.34) !important;
}

h1,
h2,
h3,
h4,
strong,
.panel-head h2,
.panel-head h3,
.section-head h2,
.expert-critique-head strong,
.expert-critique-grid strong,
.score-wrap h3,
.item-card h3,
#inventory h2,
#inventory h3 {
  color: var(--read-text) !important;
  font-weight: 720 !important;
  text-shadow: none !important;
}

p,
label,
span,
small,
.panel p,
.section-head p,
.score-wrap p,
.expert-critique-grid p,
.vision-fixes p,
.repair-card p,
#inventory p,
#inventory span {
  color: var(--read-soft) !important;
  text-shadow: none !important;
}

.eyebrow,
.panel-head .eyebrow,
.section-head .eyebrow,
.expert-critique-head span,
.expert-critique-grid article > span {
  color: var(--read-gold-bright) !important;
  font-size: 0.73rem !important;
  font-weight: 700 !important;
}

#studio .upload-zone {
  height: clamp(320px, 52dvh, 520px) !important;
  min-height: 320px !important;
  border: 1px solid rgba(251, 246, 234, 0.14) !important;
  border-radius: 18px !important;
  background: #050505 !important;
}

#studio .upload-zone img,
#uploadedPhoto {
  object-fit: cover !important;
  object-position: center top !important;
  image-rendering: auto !important;
  filter: none !important;
}

#studio .upload-zone span {
  right: 12px !important;
  bottom: 12px !important;
  min-height: 36px !important;
  border-radius: 999px !important;
  background: rgba(8, 8, 8, 0.84) !important;
  color: var(--read-text) !important;
  font-size: 0.82rem !important;
}

#studio .score-wrap,
#studio .vision-panel,
#studio .repair-panel,
#studio .taste-panel,
#studio .expert-critique-head,
#studio .expert-critique-grid article {
  border: 1px solid var(--read-line-soft) !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.06), rgba(251, 246, 234, 0.018)),
    #111111 !important;
  box-shadow:
    inset 0 1px 0 rgba(251, 246, 234, 0.07),
    0 12px 28px rgba(0, 0, 0, 0.26) !important;
}

#studio .score-wrap {
  border-radius: 18px !important;
  padding: 14px !important;
}

#studio .score-wrap p {
  color: rgba(251, 246, 234, 0.86) !important;
  font-size: 0.91rem !important;
  line-height: 1.43 !important;
}

#studio .expert-critique {
  display: grid !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

#studio .expert-critique-head {
  border-left: 3px solid var(--read-gold-bright) !important;
  border-radius: 16px !important;
  padding: 13px 14px !important;
}

#studio .expert-critique-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

#studio .expert-critique-grid article {
  border-radius: 16px !important;
  padding: 12px 13px !important;
}

#studio .expert-critique-grid p {
  color: rgba(251, 246, 234, 0.83) !important;
  font-size: 0.89rem !important;
  line-height: 1.44 !important;
}

#studio .vision-signals {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#studio .vision-signals article,
#studio .vision-fixes p,
#inventory .catalog-audit-metrics div,
#inventory .watchlist-metrics div,
#inventory .wardrobe-metrics div,
#inventory .item-card,
#inventory .catalog-audit-row,
#inventory .watchlist-row,
#inventory .wardrobe-gap-card {
  border: 1px solid var(--read-line-soft) !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.052), rgba(251, 246, 234, 0.014)),
    #171717 !important;
  color: var(--read-text) !important;
}

#studio .vision-fixes p {
  border-left: 3px solid var(--read-gold-bright) !important;
  color: rgba(251, 246, 234, 0.86) !important;
}

.palette-swatches span {
  min-width: 0 !important;
  border-radius: 12px !important;
  background: #141414 !important;
  color: var(--read-soft) !important;
}

.palette-swatches small {
  overflow: hidden !important;
  color: rgba(251, 246, 234, 0.8) !important;
  text-overflow: ellipsis !important;
}

#inventory .section-head,
#inventory .inventory-layout > *,
#inventory .catalog-audit-panel,
#inventory .watchlist-panel,
#inventory .wardrobe-panel {
  border-color: var(--read-line-soft) !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.045), rgba(251, 246, 234, 0.012)),
    #101010 !important;
}

#inventory strong,
#inventory h2,
#inventory h3,
#inventory h4 {
  color: var(--read-text) !important;
}

#inventory .segmented,
#inventory .csv-actions,
#inventory .section-actions {
  gap: 8px !important;
}

#inventory .segmented button,
#inventory .csv-actions button,
#inventory .section-actions button {
  min-width: 0 !important;
  min-height: 40px !important;
  white-space: normal !important;
}

.mobile-dock {
  min-height: calc(var(--dock-height) + var(--safe-bottom)) !important;
  border-color: rgba(251, 246, 234, 0.16) !important;
  border-radius: 18px 18px 0 0 !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.065), rgba(251, 246, 234, 0.015)),
    #090909 !important;
  padding: 7px 8px calc(7px + var(--safe-bottom)) !important;
}

.mobile-dock a {
  min-height: 56px !important;
  border-radius: 14px !important;
}

.mobile-dock a.active,
.mobile-dock a:focus-visible {
  background:
    linear-gradient(180deg, rgba(239, 204, 113, 0.22), rgba(212, 166, 67, 0.08)) !important;
  color: var(--read-text) !important;
}

.mobile-dock a.active .dock-icon,
.mobile-dock a:focus-visible .dock-icon {
  background:
    linear-gradient(180deg, #f3d987, #d4a643) !important;
  color: #050505 !important;
}

.dock-label {
  color: rgba(251, 246, 234, 0.7) !important;
}

.mobile-dock a.active .dock-label {
  color: var(--read-text) !important;
}

.quick-action-button {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  border-radius: 18px !important;
  border-color: rgba(239, 204, 113, 0.58) !important;
  background:
    linear-gradient(180deg, #f2d77f 0%, #d4a643 54%, #906820 100%) !important;
  color: #050505 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 12px 28px rgba(212, 166, 67, 0.26) !important;
}

.quick-action-button svg {
  width: 24px !important;
  height: 24px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.8 !important;
  stroke-linecap: round !important;
}

.quick-action-button:hover,
.quick-action-button:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    0 16px 34px rgba(212, 166, 67, 0.34) !important;
}

@media (max-width: 380px) {
  .topbar {
    grid-template-columns: 62px minmax(0, 1fr) 40px minmax(92px, 112px) !important;
    gap: 6px !important;
  }

  .brand,
  .brand-logo {
    width: 62px !important;
    min-width: 62px !important;
  }

  #studio .vision-signals {
    grid-template-columns: 1fr !important;
  }
}

/* v103: native workflow screens. One-column app rhythm for profile, stylist, fit and inventory. */
.content-band > .section-head,
.passport-band > .section-head,
.coach-band > .section-head,
.fit-band > .section-head,
#inventory > .section-head {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  border-radius: 18px !important;
  padding: 14px !important;
}

.section-actions,
.csv-actions,
.watchlist-actions,
.panel-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.section-actions > *,
.csv-actions > *,
.watchlist-actions > *,
.panel-actions > * {
  flex: 1 1 auto !important;
  min-width: min(100%, 128px) !important;
}

.section-actions .segmented,
#inventory .segmented {
  flex: 1 1 100% !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.section-actions button,
.csv-actions button,
.csv-actions .import-button,
.watchlist-actions button,
.panel-actions button {
  min-height: 42px !important;
  padding: 0 11px !important;
}

.passport-layout,
.coach-layout,
.fit-layout,
.inventory-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.passport-panel,
.coach-panel,
.fit-panel,
.item-form {
  position: static !important;
  top: auto !important;
  display: grid !important;
  gap: 12px !important;
  padding: 14px !important;
}

.passport-card-panel,
.coach-answer-panel,
.fit-result-panel {
  grid-column: auto !important;
}

.passport-card,
.coach-answer,
.fit-ticket {
  min-height: auto !important;
  border-top: 0 !important;
  border-left: 3px solid var(--read-gold-bright) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.06), rgba(251, 246, 234, 0.014)),
    #141414 !important;
  padding: 14px !important;
}

.passport-card-head,
.coach-answer-head,
.fit-ticket-head {
  align-items: center !important;
}

#passportScore,
#coachScore,
#fitScore {
  width: 54px !important;
  height: 54px !important;
  border: 2px solid rgba(239, 204, 113, 0.56) !important;
  background:
    radial-gradient(circle at 48% 42%, rgba(239, 204, 113, 0.22), transparent 58%),
    #070707 !important;
  color: var(--read-text) !important;
  font-size: 1rem !important;
}

.passport-metrics,
.coach-metrics,
.fit-metrics,
.size-passport-metrics,
.wardrobe-metrics,
.catalog-audit-metrics,
.watchlist-metrics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.passport-metrics div,
.coach-metrics div,
.fit-metrics div,
.size-passport-metrics div,
.wardrobe-metrics div,
.catalog-audit-metrics div,
.watchlist-metrics div {
  min-width: 0 !important;
  border-radius: 14px !important;
  padding: 10px !important;
}

.passport-metrics strong,
.coach-metrics strong,
.fit-metrics strong,
.size-passport-metrics strong,
.wardrobe-metrics strong,
.catalog-audit-metrics strong,
.watchlist-metrics strong {
  display: block !important;
  overflow: hidden !important;
  color: var(--read-text) !important;
  font-size: 1rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.passport-metrics span,
.coach-metrics span,
.fit-metrics span,
.size-passport-metrics span,
.wardrobe-metrics span,
.catalog-audit-metrics span,
.watchlist-metrics span {
  display: block !important;
  margin-top: 2px !important;
  color: var(--read-muted) !important;
  font-size: 0.74rem !important;
}

.field-grid,
.field-grid.two,
.field-grid.four,
.capture-field-grid,
.size-passport-controls .field-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

label {
  gap: 6px !important;
  color: rgba(251, 246, 234, 0.76) !important;
}

input,
select,
textarea {
  min-height: 44px !important;
  border-radius: 13px !important;
}

textarea {
  min-height: 112px !important;
}

.inventory-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.item-card {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  align-items: stretch !important;
  min-height: 118px !important;
  border-radius: 16px !important;
}

.item-card img {
  width: 96px !important;
  height: 100% !important;
  min-height: 118px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}

.item-body {
  min-width: 0 !important;
  padding: 12px !important;
}

.item-body h3 {
  margin-bottom: 5px !important;
  font-size: 0.98rem !important;
  line-height: 1.14 !important;
}

.item-meta,
.stock-line,
.pill-row {
  gap: 6px !important;
  margin-top: 8px !important;
}

.stock-line,
.item-meta {
  flex-wrap: wrap !important;
}

.product-link,
.mini-product-link,
.watch-button {
  width: max-content !important;
  max-width: 100% !important;
}

.coach-message p,
.fit-readout p,
.passport-reasons p,
.passport-dna p {
  margin: 0 !important;
  border: 1px solid var(--read-line-soft) !important;
  border-radius: 14px !important;
  background: rgba(251, 246, 234, 0.055) !important;
  padding: 10px !important;
  color: rgba(251, 246, 234, 0.84) !important;
}

@media (min-width: 700px) {
  .passport-layout,
  .coach-layout,
  .fit-layout,
  .inventory-layout {
    grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr) !important;
  }

  .passport-products-panel,
  .coach-history-panel,
  .fit-history-panel,
  .wardrobe-panel,
  .catalog-audit-panel,
  .watchlist-panel {
    grid-column: 1 / -1 !important;
  }

  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v104: platform publish kit for StyleCircle */
.social-share-panel {
  border-color: rgba(239, 204, 113, 0.2) !important;
  background:
    linear-gradient(180deg, rgba(239, 204, 113, 0.075), rgba(251, 246, 234, 0.018)),
    #111 !important;
}

.social-share-panel .field-grid.two {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.social-share-preview {
  gap: 12px !important;
}

.social-card-preview {
  display: grid !important;
  grid-template-columns: 128px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  border: 1px solid rgba(239, 204, 113, 0.22) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(239, 204, 113, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(251, 246, 234, 0.055), rgba(251, 246, 234, 0.018)),
    #080808 !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26) !important;
  color: var(--read-text) !important;
  padding: 12px !important;
}

.social-card-visual {
  display: grid;
  min-width: 0;
}

.social-card-phone {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 174px;
  border: 1px solid rgba(251, 246, 234, 0.16);
  border-radius: 18px;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.72);
}

.social-card-phone-story,
.social-card-phone-reel {
  aspect-ratio: 9 / 16;
}

.social-card-phone-feed {
  aspect-ratio: 4 / 5;
}

.social-card-phone-pin {
  aspect-ratio: 2 / 3;
}

.social-card-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.social-card-overlay {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(251, 246, 234, 0.16);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.78);
  padding: 7px 9px;
  backdrop-filter: blur(12px);
}

.social-card-overlay span,
.social-card-overlay strong {
  overflow: hidden;
  color: #fffaf0;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-card-overlay span {
  color: var(--read-gold-bright);
}

.social-card-copy {
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
}

.social-card-headline {
  display: grid;
  gap: 4px;
}

.social-card-headline > span,
.social-card-caption > span,
.social-publish-checks > span {
  color: var(--read-gold-bright);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.social-card-headline strong {
  color: var(--read-text) !important;
  font-size: 1.05rem !important;
  line-height: 1.08;
}

.social-card-headline em {
  color: var(--read-muted);
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.35;
}

.social-export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.social-export-grid div {
  min-width: 0;
  border: 1px solid rgba(251, 246, 234, 0.09);
  border-radius: 12px;
  background: rgba(251, 246, 234, 0.055);
  padding: 8px;
}

.social-export-grid strong,
.social-export-grid span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-export-grid strong {
  color: var(--read-text);
  font-size: 0.9rem;
}

.social-export-grid span {
  margin-top: 2px;
  color: var(--read-muted);
  font-size: 0.66rem;
}

.social-item-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.social-item-strip span {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(251, 246, 234, 0.11);
  border-radius: 999px;
  background: rgba(251, 246, 234, 0.055);
  padding: 6px 8px;
  color: rgba(251, 246, 234, 0.82);
  font-size: 0.68rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-card-caption,
.social-publish-checks {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(251, 246, 234, 0.1);
  border-radius: 14px;
  background: rgba(251, 246, 234, 0.045);
  padding: 10px;
}

.social-card-caption p {
  display: block !important;
  overflow: visible !important;
  margin: 0 !important;
  color: rgba(251, 246, 234, 0.9) !important;
  font-size: 0.78rem !important;
  line-height: 1.38 !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
}

.social-publish-checks ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-publish-checks li {
  position: relative;
  padding-left: 16px;
  color: rgba(251, 246, 234, 0.78);
  font-size: 0.72rem;
  line-height: 1.34;
}

.social-publish-checks li::before {
  position: absolute;
  top: 0.52em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--read-gold-bright);
  content: "";
}

.social-platform-link {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  border: 1px solid rgba(239, 204, 113, 0.46);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(239, 204, 113, 0.98), rgba(183, 132, 34, 0.96)),
    #d4a83c;
  color: #090909;
  font-size: 0.8rem;
  font-weight: 950;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(212, 168, 60, 0.18);
}

.social-share-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.social-share-actions button {
  min-width: 0;
}

.community-feed-panel,
.community-post-card {
  border-color: rgba(239, 204, 113, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.045), rgba(251, 246, 234, 0.016)),
    #101010 !important;
}

.community-post-card {
  display: grid !important;
  grid-template-columns: 124px minmax(0, 1fr) !important;
  gap: 12px !important;
  border-radius: 18px !important;
  padding: 12px !important;
}

.community-post-media {
  min-height: 168px !important;
  border-radius: 16px !important;
  background: #050505 !important;
}

.community-post-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.community-post-media span {
  right: 8px !important;
  bottom: 8px !important;
  left: 8px !important;
  width: auto !important;
  border: 1px solid rgba(251, 246, 234, 0.14) !important;
  background: rgba(5, 5, 5, 0.82) !important;
  color: var(--read-gold-bright) !important;
  font-size: 0.64rem !important;
}

.community-post-body {
  min-width: 0 !important;
}

.community-author-line,
.community-post-head {
  gap: 8px !important;
}

.community-author-line strong,
.community-post-head strong {
  color: var(--read-text) !important;
}

.community-author-line span,
.community-post-head span,
.community-post-stats {
  color: var(--read-muted) !important;
}

.community-post-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.community-post-actions .ghost-button {
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 7px 8px !important;
  font-size: 0.68rem !important;
}

.community-post-body > p {
  margin: 8px 0 0 !important;
  color: rgba(251, 246, 234, 0.84) !important;
  font-size: 0.78rem !important;
  line-height: 1.38 !important;
}

.community-item-pills span,
.community-room-tag,
.community-challenge-tag {
  border-color: rgba(251, 246, 234, 0.12) !important;
  background: rgba(251, 246, 234, 0.055) !important;
  color: rgba(251, 246, 234, 0.82) !important;
}

.brand-brain-panel {
  border-color: rgba(239, 204, 113, 0.2) !important;
  background:
    linear-gradient(135deg, rgba(239, 204, 113, 0.08), rgba(251, 246, 234, 0.02) 48%),
    #111 !important;
}

.brand-brain-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.brand-brain-metrics div {
  min-width: 0;
  border: 1px solid rgba(251, 246, 234, 0.1);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.06), rgba(251, 246, 234, 0.02)),
    #0b0b0b;
  padding: 10px;
}

.brand-brain-metrics strong,
.brand-brain-metrics span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-brain-metrics strong {
  color: var(--read-text);
  font-size: 1rem;
  line-height: 1.05;
}

.brand-brain-metrics span {
  margin-top: 3px;
  color: var(--read-muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.brand-brain-list {
  display: grid;
  gap: 10px;
}

.brand-brain-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(251, 246, 234, 0.1);
  border-radius: 16px;
  background: rgba(251, 246, 234, 0.045);
  padding: 11px;
}

.brand-brain-card > span {
  color: var(--read-gold-bright);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-brain-active div {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-left: 2px solid var(--read-gold-bright);
  padding-left: 9px;
}

.brand-brain-card strong {
  overflow: hidden;
  color: var(--read-text);
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-brain-card p,
.brand-brain-card em {
  margin: 0;
  color: rgba(251, 246, 234, 0.78);
  font-size: 0.72rem;
  font-style: normal;
  line-height: 1.34;
}

.brand-brain-card em {
  color: var(--read-muted);
}

.brand-brain-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.brand-brain-pills em {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(239, 204, 113, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(239, 204, 113, 0.16), rgba(251, 246, 234, 0.035)),
    #0c0c0c;
  padding: 6px 8px;
  color: rgba(251, 246, 234, 0.88);
  font-size: 0.68rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .social-share-panel .field-grid.two,
  .social-share-actions {
    grid-template-columns: 1fr !important;
  }

  .social-card-preview {
    grid-template-columns: 1fr !important;
  }

  .social-card-phone {
    justify-self: center;
    width: min(176px, 62vw);
    max-height: 260px;
  }

  .community-post-card {
    grid-template-columns: 1fr !important;
  }

  .community-post-media {
    min-height: 260px !important;
  }

  .brand-brain-metrics {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 700px) {
  .brand-brain-panel {
    grid-column: 1 / -1;
  }

  .brand-brain-list {
    grid-template-columns: 1.2fr 1fr 0.8fr;
  }
}

/* v108: professor verdict, readable on the mobile app frame. */
.expert-critique {
  gap: 12px !important;
  margin: 14px 0 16px !important;
}

.expert-verdict-card {
  display: grid;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(239, 204, 113, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(239, 204, 113, 0.12), rgba(251, 246, 234, 0.035) 44%, rgba(4, 4, 4, 0.88)),
    #121212;
  box-shadow:
    inset 0 1px 0 rgba(251, 246, 234, 0.12),
    0 18px 36px rgba(0, 0, 0, 0.34);
  padding: 14px;
}

.expert-verdict-card::before {
  content: "";
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f1d57b, rgba(251, 246, 234, 0.18), transparent);
}

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

.expert-verdict-score {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(239, 204, 113, 0.34);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(251, 246, 234, 0.12), transparent 54%),
    conic-gradient(#d4a643 0 72%, rgba(251, 246, 234, 0.11) 72% 100%);
  color: #fffefa;
}

.expert-verdict-score strong {
  font-size: 1.38rem;
  line-height: 0.95;
}

.expert-verdict-score span {
  margin-top: -12px;
  color: rgba(251, 246, 234, 0.66);
  font-size: 0.68rem;
  font-weight: 850;
}

.expert-verdict-body {
  min-width: 0;
}

.expert-verdict-body > span,
.expert-next-move span {
  display: block;
  color: #f1d57b;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.expert-verdict-body h3 {
  margin: 4px 0 6px;
  color: #fffefa;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.28rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.expert-verdict-body p,
.expert-next-move {
  margin: 0;
  color: rgba(251, 246, 234, 0.82);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.42;
}

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

.expert-verdict-metrics article {
  min-width: 0;
  border: 1px solid rgba(251, 246, 234, 0.11);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.065), rgba(251, 246, 234, 0.018)),
    #0a0a0a;
  padding: 9px;
}

.expert-verdict-metrics span,
.expert-verdict-metrics strong,
.expert-verdict-metrics small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.expert-verdict-metrics span {
  color: rgba(251, 246, 234, 0.58);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.expert-verdict-metrics strong {
  margin-top: 3px;
  color: #fffefa;
  font-size: 0.86rem;
  line-height: 1.12;
}

.expert-verdict-metrics small {
  margin-top: 3px;
  color: rgba(251, 246, 234, 0.56);
  font-size: 0.68rem;
  font-weight: 760;
}

.expert-next-move {
  border-left: 2px solid #d4a643;
  padding-left: 10px;
}

.expert-next-move span {
  margin-bottom: 4px;
}

.expert-verdict-strong {
  border-color: rgba(239, 204, 113, 0.36);
}

.expert-verdict-work {
  border-color: rgba(239, 204, 113, 0.26);
}

.expert-verdict-blocked {
  border-color: rgba(207, 64, 87, 0.42);
}

.expert-verdict-blocked::before {
  background: linear-gradient(90deg, #cf4057, rgba(239, 204, 113, 0.34), transparent);
}

.expert-critique-head,
.expert-critique-grid article {
  border-color: rgba(251, 246, 234, 0.11) !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.052), rgba(251, 246, 234, 0.018)),
    #101010 !important;
}

.expert-critique-head span,
.expert-critique-grid article > span {
  color: #f1d57b !important;
}

.expert-critique-head strong {
  font-size: 0.92rem !important;
  line-height: 1.25 !important;
}

.expert-critique-grid p {
  color: rgba(251, 246, 234, 0.78) !important;
  font-size: 0.76rem !important;
  line-height: 1.42 !important;
}

@media (max-width: 420px) {
  .expert-verdict-card {
    padding: 12px;
  }

  .expert-verdict-top {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
  }

  .expert-verdict-score {
    width: 62px;
    height: 62px;
  }

  .expert-verdict-metrics {
    grid-template-columns: 1fr;
  }
}

/* v109: Photo Lens control for explicit image interpretation. */
.photo-lens-field {
  position: relative;
  border-color: rgba(239, 204, 113, 0.24) !important;
  background:
    linear-gradient(135deg, rgba(239, 204, 113, 0.13), rgba(251, 246, 234, 0.035)),
    #111 !important;
}

.photo-lens-field::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(239, 204, 113, 0.72);
  box-shadow: 0 0 0 4px rgba(239, 204, 113, 0.1);
  pointer-events: none;
}

.photo-lens-field select {
  border-color: rgba(239, 204, 113, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.07), rgba(251, 246, 234, 0.018)),
    #0b0b0b !important;
  color: #fffefa !important;
}

/* v110: never crop the user's fit photo in Studio. */
#studio .upload-zone {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(239, 204, 113, 0.08), transparent 44%),
    linear-gradient(135deg, rgba(251, 246, 234, 0.035), transparent 44%),
    #050505 !important;
}

#studio .upload-zone img,
#photoPreview,
#uploadedPhoto {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #050505 !important;
  image-rendering: auto !important;
}

#studio .upload-zone[data-full-image="true"]::before {
  content: none !important;
  display: none !important;
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  border: 1px solid rgba(239, 204, 113, 0.38);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.78);
  padding: 6px 9px;
  color: rgba(251, 246, 234, 0.86);
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.1em;
}

/* v113: readable mobile scoring. Keep the verdict sharp, move diagnostics into chips. */
html,
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#studio .score-wrap {
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  border-color: rgba(239, 204, 113, 0.26) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(145deg, rgba(239, 204, 113, 0.13), rgba(251, 246, 234, 0.036) 38%, rgba(10, 10, 10, 0.96)),
    #101010 !important;
  padding: 15px !important;
}

#studio .score-ring {
  width: 78px !important;
  height: 78px !important;
  border: 1px solid rgba(239, 204, 113, 0.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(251, 246, 234, 0.12),
    0 10px 28px rgba(212, 166, 67, 0.13) !important;
}

#studio .score-ring strong {
  font-size: 1.58rem !important;
  letter-spacing: 0 !important;
}

#studio .score-ring span {
  font-size: 0.72rem !important;
}

#studio .score-wrap h3 {
  margin: 1px 0 8px !important;
  color: #fffefa !important;
  font-size: clamp(1.08rem, 0.95rem + 0.72vw, 1.34rem) !important;
  font-weight: 780 !important;
  line-height: 1.1 !important;
}

#studio .score-wrap p {
  max-width: 62ch !important;
  color: rgba(251, 246, 234, 0.87) !important;
  font-size: clamp(0.92rem, 0.86rem + 0.28vw, 1rem) !important;
  font-weight: 620 !important;
  line-height: 1.48 !important;
}

.score-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.score-meta[hidden] {
  display: none !important;
}

.score-meta span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 28px;
  border: 1px solid rgba(251, 246, 234, 0.13);
  border-radius: 999px;
  background: rgba(251, 246, 234, 0.065);
  padding: 5px 9px;
  color: rgba(251, 246, 234, 0.86) !important;
  font-size: 0.72rem !important;
  font-weight: 820 !important;
  line-height: 1.15 !important;
  white-space: normal;
}

.score-meta-good {
  border-color: rgba(239, 204, 113, 0.32) !important;
  background: rgba(212, 166, 67, 0.14) !important;
  color: #f5dfa0 !important;
}

.score-meta-warn,
.score-meta-risk {
  border-color: rgba(207, 64, 87, 0.36) !important;
  background: rgba(207, 64, 87, 0.14) !important;
  color: #ffd9df !important;
}

.score-meta-mode,
.score-meta-score,
.score-meta-read {
  border-color: rgba(239, 204, 113, 0.26) !important;
  background: rgba(239, 204, 113, 0.105) !important;
  color: #fff1bf !important;
}

.intent-pill {
  border-color: rgba(239, 204, 113, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(239, 204, 113, 0.18), rgba(239, 204, 113, 0.06)),
    rgba(12, 12, 12, 0.72) !important;
  color: #ffe7a0 !important;
}

.subtype-pill {
  border-color: rgba(234, 230, 218, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(234, 230, 218, 0.13), rgba(212, 166, 67, 0.055)),
    rgba(14, 14, 14, 0.74) !important;
  color: rgba(255, 250, 238, 0.92) !important;
}

/* v117: show the SB mark as metal, not as a square badge. */
.brand {
  overflow: visible !important;
  background: transparent !important;
}

.brand-logo {
  width: 78px !important;
  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;
}

.expert-verdict-card {
  border-radius: 20px !important;
  padding: 15px !important;
}

.expert-verdict-body h3,
.expert-critique-head strong,
.expert-critique-grid strong {
  color: #fffefa !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

.expert-verdict-body p,
.expert-next-move,
.expert-critique-grid p {
  color: rgba(251, 246, 234, 0.84) !important;
  font-size: clamp(0.88rem, 0.84rem + 0.22vw, 0.98rem) !important;
  font-weight: 610 !important;
  line-height: 1.52 !important;
}

.expert-verdict-metrics article {
  border-radius: 13px !important;
  padding: 10px !important;
}

.expert-verdict-metrics span,
.expert-verdict-metrics strong,
.expert-verdict-metrics small {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

.expert-verdict-metrics strong {
  font-size: 0.9rem !important;
  line-height: 1.18 !important;
}

#studio .vision-signals article,
#studio .vision-fixes p,
#studio .repair-list article,
#studio .photo-capture-draft,
#studio .photo-capture-editor {
  border-radius: 15px !important;
}

#studio .vision-signals strong,
#studio .repair-metrics strong,
#studio .taste-metrics strong {
  color: #fffefa !important;
  font-size: 1rem !important;
  font-weight: 780 !important;
}

#studio .vision-signals span,
#studio .vision-fixes p,
#studio .repair-list p,
#studio .photo-capture-draft p {
  color: rgba(251, 246, 234, 0.82) !important;
  font-size: 0.88rem !important;
  font-weight: 610 !important;
  line-height: 1.45 !important;
}

@media (max-width: 430px) {
  #studio .score-wrap {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    padding: 13px !important;
  }

  #studio .score-ring {
    width: 70px !important;
    height: 70px !important;
  }

  #studio .score-ring strong {
    font-size: 1.42rem !important;
  }

  .score-meta {
    gap: 6px;
  }

  .score-meta span {
    min-height: 27px;
    padding: 5px 8px;
    font-size: 0.68rem !important;
  }

  .expert-verdict-metrics {
    grid-template-columns: 1fr !important;
  }
}

/* v118: Passport is a phone screen even inside a wide desktop browser. */
#passport.passport-band,
#passport .passport-layout,
#passport .passport-panel,
#passport .passport-card-panel,
#passport .passport-products-panel,
#passport .size-passport-panel,
#passport .passport-history-panel {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

#passport .passport-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
}

#passport .passport-card-panel,
#passport .passport-products-panel,
#passport .size-passport-panel,
#passport .passport-history-panel {
  grid-column: 1 !important;
}

#passport .passport-panel {
  margin-bottom: 0 !important;
}

#passport .passport-card,
#passport .passport-card > *,
#passport .passport-products,
#passport .passport-history,
#passport .size-passport-controls,
#passport .size-passport-map {
  min-width: 0 !important;
  max-width: 100% !important;
}

#passport .passport-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 54px !important;
  gap: 10px !important;
}

#passport .passport-card-head h3,
#passport .passport-reasons p,
#passport .passport-dna-row,
#passport .passport-dna-row *,
#passport .passport-metrics *,
#passport .size-passport-metrics *,
#passport .size-passport-row * {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

#passport .passport-metrics,
#passport .size-passport-metrics,
#passport .size-passport-map,
#passport .passport-products {
  grid-template-columns: 1fr !important;
}

#passport .passport-dna-row div:first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
}

/* v119: every workflow stays inside the phone viewport, even on a wide desktop window. */
html,
body,
main {
  overflow-x: hidden !important;
}

main,
.studio-band,
.content-band,
.business-band {
  width: min(var(--app-width), calc(100vw - 14px)) !important;
  max-width: var(--app-width) !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.studio-band *,
.content-band *,
.business-band * {
  min-width: 0 !important;
}

.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,
.business-steps {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  overflow-x: hidden !important;
}

.passport-card-panel,
.passport-products-panel,
.size-passport-panel,
.passport-history-panel,
.coach-answer-panel,
.coach-history-panel,
.fit-result-panel,
.fit-history-panel,
.planner-result-panel,
.planner-history-panel,
.capsule-board-panel,
.capsule-outfits-panel,
.capsule-history-panel,
.discover-card-panel,
.discover-side-panel,
.rules-panel,
.brand-brain-panel,
.wardrobe-panel,
.catalog-audit-panel,
.watchlist-panel,
.lookbook-results-panel,
.client-dossier-panel,
.report-output-panel,
.campaign-history-panel,
.trend-grid-panel,
.history-grid-panel {
  grid-column: 1 !important;
  max-width: 100% !important;
}

.quick-stats,
.outfit-summary,
.passport-metrics,
.coach-metrics,
.fit-metrics,
.planner-metrics,
.capsule-metrics,
.discover-metrics,
.wardrobe-metrics,
.catalog-audit-metrics,
.watchlist-metrics,
.lookbook-metrics,
.client-metrics,
.report-metrics,
.trend-metrics,
.community-metrics,
.size-passport-metrics,
.size-passport-map,
.brand-brain-metrics {
  grid-template-columns: minmax(0, 1fr) !important;
}

.field-grid,
.field-grid.two,
.field-grid.four,
.profile-grid,
.taste-grid,
.size-grid,
.calendar-grid,
.planner-grid,
.capsule-grid,
.history-grid,
.saved-look-grid,
.discover-grid,
.report-grid,
.social-share-panel .field-grid.two {
  grid-template-columns: minmax(0, 1fr) !important;
}

.passport-product-card,
.coach-item-card,
.fit-alternative-card,
.planner-outfit-row,
.capsule-item,
.capsule-outfit-row,
.discover-queue-row,
.lookbook-row,
.client-product-card,
.report-row,
.campaign-history-row,
.trend-card,
.history-card,
.saved-look-card,
.community-post,
.community-comment {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.passport-card-head h3,
.panel-head h2,
.panel-head h3,
.section-head h2,
.passport-product-card *,
.coach-item-card *,
.fit-alternative-card *,
.planner-outfit *,
.capsule-items *,
.capsule-outfits *,
.discover-queue *,
.inventory-layout *,
.lookbook-layout *,
.clients-layout *,
.report-layout *,
.trend-lab *,
.history-layout *,
.community-grid * {
  overflow-wrap: anywhere !important;
}

/* v120: high-specificity clamp beats older desktop media queries. */
#studio .studio-grid,
#passport .passport-layout,
#coach .coach-layout,
#fit .fit-layout,
#planner .planner-layout,
#capsule .capsule-layout,
#discover .discover-layout,
#brain .brain-layout,
#inventory .inventory-layout,
#lookbook .lookbook-layout,
#clients .clients-layout,
#report .report-layout,
#trends .trend-lab,
#history .history-layout {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  overflow-x: hidden !important;
}

#studio .studio-grid > *,
#passport .passport-layout > *,
#coach .coach-layout > *,
#fit .fit-layout > *,
#planner .planner-layout > *,
#capsule .capsule-layout > *,
#discover .discover-layout > *,
#brain .brain-layout > *,
#inventory .inventory-layout > *,
#lookbook .lookbook-layout > *,
#clients .clients-layout > *,
#report .report-layout > *,
#trends .trend-lab > *,
#history .history-layout > * {
  grid-column: 1 !important;
  max-width: 100% !important;
}

/* v121: inner cards and action bars cannot push the app frame sideways. */
.topbar {
  grid-template-columns: 84px minmax(0, 1fr) 42px minmax(88px, 108px) !important;
  gap: 6px !important;
}

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

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

.topbar-switches {
  min-width: 0 !important;
}

.locale-switch select,
.market-switch select {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 0.72rem !important;
}

.section-actions,
.panel-actions,
.recommendation-actions,
.csv-actions,
.watchlist-actions,
.social-share-actions,
.community-post-actions,
.taste-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
}

.section-actions > *,
.panel-actions > *,
.recommendation-actions > *,
.csv-actions > *,
.watchlist-actions > *,
.social-share-actions > *,
.community-post-actions > *,
.taste-actions > * {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.social-card-preview,
.community-post-card,
.discover-card,
.client-dossier-profile,
.client-dossier-grid,
.lookbook-row,
.campaign-history-row,
.report-row,
.history-card,
.saved-look-card,
.brand-brain-list {
  grid-template-columns: minmax(0, 1fr) !important;
}

.social-card-phone,
.community-post-media,
.discover-media,
.passport-product-card img,
.coach-item-card img,
.fit-alternative-card img,
.item-card img {
  max-width: 100% !important;
}

.brand-brain-card strong,
.brand-brain-card p,
.brand-brain-card em,
.social-export-grid strong,
.social-export-grid span,
.social-item-strip span,
.community-author-line strong,
.community-post-head strong,
.community-post-body p,
.history-card p,
.saved-look-card p,
.report-row *,
.campaign-history-row *,
.lookbook-row *,
.client-dossier-profile * {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.quick-action-button {
  right: max(12px, calc((100vw - var(--app-width)) / 2 + 12px)) !important;
  width: 52px !important;
  height: 52px !important;
}

/* v122: leave real thumb space above the dock and keep bottom UI from covering content. */
.studio-band,
.content-band,
.business-band {
  padding-bottom: calc(104px + var(--safe-bottom)) !important;
  scroll-padding-bottom: calc(112px + var(--safe-bottom)) !important;
}

.mobile-dock {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
  padding-right: 6px !important;
  padding-left: 6px !important;
}

.mobile-dock a {
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 6px 2px !important;
}

.dock-icon {
  width: 30px !important;
  height: 30px !important;
}

.dock-label {
  display: block !important;
  width: 100% !important;
  overflow: hidden !important;
  font-size: 0.68rem !important;
  line-height: 1.05 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.quick-action-button {
  bottom: calc(var(--dock-height) + var(--safe-bottom) + 10px) !important;
  border-radius: 18px !important;
  opacity: 0.94 !important;
}

.quick-action-button svg {
  width: 24px !important;
  height: 24px !important;
}

.quick-action-sheet:not([hidden]) {
  padding-bottom: calc(var(--dock-height) + var(--safe-bottom) + 10px) !important;
}

.quick-action-panel {
  max-height: min(74dvh, 640px) !important;
}

/* v126: no cropped photo, no pale unreadable cards, no sideways phone drift. */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

body,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  text-rendering: geometricPrecision !important;
  text-shadow: none !important;
}

.studio-band,
.content-band,
.business-band,
.panel,
.section-head,
.passport-panel,
.coach-panel,
.fit-panel,
.item-form,
.mobile-dock,
.quick-action-panel {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#studio .photo-panel {
  min-height: auto !important;
}

#studio .upload-zone,
.upload-zone {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: min(62dvh, 540px) !important;
  min-height: 330px !important;
  max-height: 620px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(212, 166, 67, 0.12), transparent 44%),
    #050505 !important;
}

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

/* v166: final cascade - StyleBrain is a fashion scanner, not a DI/Fakturium skin. */
:root {
  --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;
  --read-bg: var(--sb-bg) !important;
  --read-shell: var(--sb-rail) !important;
  --read-panel: var(--sb-panel) !important;
  --read-card: #15181d !important;
  --read-text: var(--sb-ink) !important;
  --read-soft: var(--sb-soft) !important;
  --read-muted: var(--sb-muted) !important;
  --read-gold: var(--sb-signal) !important;
  --read-gold-bright: var(--sb-mint) !important;
  --topbar-height: 64px !important;
  --dock-height: 88px !important;
  --app-stage-top: 12px !important;
  --app-stage-bottom: 12px !important;
}

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

html,
body {
  background:
    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%) !important;
}

body::before {
  content: "" !important;
  display: block !important;
  top: var(--app-stage-top) !important;
  height: calc(100dvh - var(--app-stage-top) - var(--app-stage-bottom)) !important;
  border: 1px solid rgba(244, 240, 232, 0.1) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.035), transparent 36%),
    radial-gradient(ellipse at 50% 0%, rgba(185, 247, 228, 0.08), transparent 42%),
    #050608 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 34px 100px rgba(0, 0, 0, 0.68) !important;
}

body::after {
  content: none !important;
  display: none !important;
}

.app-shell {
  top: var(--app-stage-top) !important;
}

main {
  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;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.topbar,
.mobile-dock,
.quick-action-panel,
.command-panel {
  border-color: var(--sb-line) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.07), rgba(244, 240, 232, 0.018)),
    rgba(8, 10, 13, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 44px rgba(0, 0, 0, 0.34) !important;
}

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

.quick-action-button {
  bottom: calc(var(--app-stage-bottom) + var(--dock-height) + var(--safe-bottom) + 14px) !important;
}

.active-view-chip {
  border-left-color: rgba(185, 247, 228, 0.22) !important;
  color: var(--sb-ink) !important;
}

.command-button,
.locale-switch select,
.market-switch select {
  border-color: rgba(244, 240, 232, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.08), rgba(244, 240, 232, 0.018)),
    #101318 !important;
  color: var(--sb-ink) !important;
}

.locale-switch::after,
.market-switch::after {
  border-color: rgba(185, 247, 228, 0.72) !important;
}

main > .studio-band.active-view,
main > .content-band.active-view,
main > .business-band.active-view {
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-color: rgba(244, 240, 232, 0.08) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(185, 247, 228, 0.05), transparent 38%),
    #050608 !important;
  padding-bottom: 16px !important;
  scroll-padding-bottom: 18px !important;
}

.panel,
[class$="-panel"],
main article,
.item-card,
.history-card,
.saved-look-card,
.trend-card,
.look-card,
.repair-card,
.watchlist-row,
.catalog-audit-row,
.wardrobe-gap-card,
.community-post-card,
.social-card-preview {
  border-color: var(--sb-line) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.06), rgba(244, 240, 232, 0.018)),
    #111418 !important;
  color: var(--sb-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

.eyebrow,
.panel-head .eyebrow,
.section-head .eyebrow,
.expert-critique-head span,
.expert-critique-grid article > span {
  color: var(--sb-mint) !important;
  font-weight: 760 !important;
  letter-spacing: 0.02em !important;
}

h1,
h2,
h3,
h4,
strong,
.panel-head h2,
.panel-head h3,
.section-head h2,
.score-wrap h3 {
  color: var(--sb-ink) !important;
}

p,
label,
small,
span,
.panel p,
.section-head p,
.score-wrap p {
  color: var(--sb-soft) !important;
}

.primary-button,
.content-band .primary-button,
.content-band :is(.primary-button, button[type="submit"]) {
  border: 1px solid rgba(255, 54, 95, 0.44) !important;
  background:
    linear-gradient(180deg, #ff5878 0%, #ff365f 52%, #9d1735 100%) !important;
  color: #fff7f8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 16px 32px rgba(255, 54, 95, 0.22) !important;
}

.primary-button *,
.content-band .primary-button * {
  color: #fff7f8 !important;
}

#studio.studio-band.active-view {
  display: flex !important;
  min-height: 100% !important;
  flex-direction: column !important;
  background:
    radial-gradient(ellipse at 48% -8%, rgba(185, 247, 228, 0.07), transparent 42%),
    #050608 !important;
}

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

#studio .photo-panel {
  display: grid !important;
  min-height: 100% !important;
  flex: 1 1 auto !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
  gap: 12px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border-color: rgba(244, 240, 232, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.07), rgba(244, 240, 232, 0.015)),
    radial-gradient(ellipse at 80% 4%, rgba(255, 54, 95, 0.09), transparent 34%),
    #101318 !important;
}

#studio .photo-panel .panel-head {
  border-bottom-color: rgba(244, 240, 232, 0.12) !important;
}

#studio .photo-panel h2 {
  font-size: clamp(2rem, 8vw, 2.55rem) !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#studio .upload-zone,
.upload-zone {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border: 1px solid rgba(244, 240, 232, 0.14) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(90deg, rgba(185, 247, 228, 0.13) 1px, transparent 1px),
    linear-gradient(180deg, rgba(185, 247, 228, 0.12) 1px, transparent 1px),
    #050608 !important;
  background-size: 34px 34px !important;
}

#studio .upload-zone::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 14px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border: 1px solid rgba(185, 247, 228, 0.46) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(var(--sb-signal), var(--sb-signal)) left top / 42px 2px no-repeat,
    linear-gradient(var(--sb-signal), var(--sb-signal)) left top / 2px 42px no-repeat,
    linear-gradient(var(--sb-signal), var(--sb-signal)) right bottom / 42px 2px no-repeat,
    linear-gradient(var(--sb-signal), var(--sb-signal)) right bottom / 2px 42px no-repeat !important;
}

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

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto {
  object-fit: contain !important;
  object-position: center center !important;
  background: #050608 !important;
}

#studio .upload-zone span,
.upload-zone span {
  z-index: 3 !important;
  border: 1px solid rgba(244, 240, 232, 0.16) !important;
  background: rgba(5, 6, 8, 0.78) !important;
  color: var(--sb-ink) !important;
}

.score-ring {
  background:
    radial-gradient(circle at center, #050608 0 56%, transparent 57%),
    conic-gradient(var(--sb-signal) calc(var(--score, 86) * 3.6deg), rgba(244, 240, 232, 0.13) 0) !important;
  box-shadow:
    inset 0 0 0 1px rgba(244, 240, 232, 0.12),
    0 14px 28px rgba(255, 54, 95, 0.16) !important;
}

#studio .score-wrap {
  border-color: rgba(244, 240, 232, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.055), rgba(244, 240, 232, 0.014)),
    rgba(5, 6, 8, 0.72) !important;
}

.mobile-dock a.active,
.mobile-dock a:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 54, 95, 0.2), rgba(185, 247, 228, 0.06)),
    rgba(244, 240, 232, 0.045) !important;
}

.mobile-dock a.active .dock-icon,
.mobile-dock a:focus-visible .dock-icon {
  background:
    linear-gradient(180deg, #fff8fa 0%, #ff365f 100%) !important;
  color: #050608 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 12px 24px rgba(255, 54, 95, 0.28) !important;
}

.mobile-dock a.active::after,
.mobile-dock a:focus-visible::after {
  background: linear-gradient(90deg, transparent, var(--sb-mint), var(--sb-signal), transparent) !important;
  box-shadow: 0 0 18px rgba(185, 247, 228, 0.32) !important;
}

.quick-action-button {
  border-color: rgba(255, 54, 95, 0.54) !important;
  background:
    linear-gradient(180deg, #ff6a86 0%, #ff365f 52%, #8a1430 100%) !important;
  color: #fff7f8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 22px 48px rgba(255, 54, 95, 0.28) !important;
}

.quick-action-button svg {
  color: #fff7f8 !important;
  stroke: currentColor !important;
}

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

.quick-action-button {
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  border-radius: 18px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.quick-action-button svg {
  display: block !important;
  width: 25px !important;
  height: 25px !important;
  fill: none !important;
  stroke: #fff7f8 !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: none !important;
}

.palette-swatch small,
.brand-pill,
main :is(.pill, .source-badge, .stock-badge, .tag, .badge, .product-chip, .signal-chip, .trend-chip, .mood-chip) {
  border-color: rgba(185, 247, 228, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(185, 247, 228, 0.12), rgba(244, 240, 232, 0.018)),
    #0d1115 !important;
  color: var(--sb-soft) !important;
}

/* v780: Capsule becomes an editorial wardrobe decision, with every piece visible before the CTA. */
#capsule {
  --capsule-forest: #10271f;
  --capsule-ink: #08130f;
  --capsule-cream: #f2eddf;
  --capsule-lime: #dce96d;
  --capsule-sage: #9db6a5;
  background:
    radial-gradient(circle at 88% 4%, rgba(220, 233, 109, 0.2), transparent 24rem),
    linear-gradient(180deg, #d8dfd5 0, var(--capsule-cream) 32rem) !important;
}

#capsule .capsule-edit-head {
  align-items: end !important;
  margin-bottom: 14px !important;
  border: 0 !important;
  background: transparent !important;
  padding-top: clamp(20px, 4vw, 44px) !important;
}

#capsule .capsule-edit-head > div {
  max-width: 720px;
}

#capsule #capsuleEdition {
  color: #355749 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.2em !important;
}

#capsule #capsuleHeadline {
  max-width: 690px;
  margin: 5px 0 0 !important;
  color: var(--capsule-ink) !important;
  font-size: clamp(2.2rem, 6.2vw, 5.6rem) !important;
  line-height: 0.91 !important;
  letter-spacing: -0.065em !important;
}

#capsule .capsule-edit-deck {
  max-width: 620px;
  margin: 14px 0 0;
  color: #3a5147;
  font-size: clamp(0.88rem, 1.4vw, 1.04rem);
  font-weight: 720;
  line-height: 1.5;
}

#capsule .capsule-refresh-edit {
  width: auto !important;
  min-height: 44px;
  border-color: rgba(8, 19, 15, 0.22) !important;
  background: rgba(242, 237, 223, 0.62) !important;
  color: var(--capsule-ink) !important;
}

#capsule .capsule-layout {
  grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1.32fr) !important;
  gap: 14px !important;
}

#capsule .capsule-board-panel {
  grid-column: 1 / -1 !important;
  order: 1 !important;
  overflow: hidden !important;
  border: 1px solid rgba(8, 19, 15, 0.16) !important;
  border-radius: 26px !important;
  background: var(--capsule-forest) !important;
  box-shadow: 0 28px 70px rgba(8, 19, 15, 0.2) !important;
}

#capsule .capsule-board-edition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  background: var(--capsule-lime);
  padding: 8px 16px;
  color: var(--capsule-ink);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#capsule .capsule-board-edition strong {
  color: inherit;
  font-size: inherit;
}

#capsule .capsule-board {
  display: grid !important;
  grid-template-columns: minmax(270px, 0.76fr) minmax(0, 1.24fr) !important;
  grid-template-areas:
    "head items"
    "metrics items"
    "actions items"
    "status items" !important;
  align-content: start !important;
  gap: 18px 22px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 22% 10%, rgba(220, 233, 109, 0.12), transparent 22rem),
    var(--capsule-forest) !important;
  color: var(--capsule-cream) !important;
  padding: clamp(18px, 3vw, 32px) !important;
}

#capsule .capsule-board-head {
  grid-area: head;
  gap: 18px !important;
}

#capsule .capsule-board-head > div {
  min-width: 0;
}

#capsule #capsuleBriefKicker {
  color: var(--capsule-lime) !important;
  letter-spacing: 0.12em !important;
}

#capsule #capsule-title {
  max-width: 520px;
  margin-top: 7px !important;
  color: var(--capsule-cream) !important;
  font-size: clamp(1.8rem, 3.8vw, 3.8rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.052em !important;
}

#capsule .capsule-edit-narrative {
  max-width: 540px;
  margin: 14px 0 0;
  color: rgba(242, 237, 223, 0.74);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.55;
}

#capsule #capsuleScore {
  width: 58px !important;
  height: 58px !important;
  border: 1px solid rgba(220, 233, 109, 0.46) !important;
  background: rgba(220, 233, 109, 0.1) !important;
  color: var(--capsule-lime) !important;
  font-size: 1.05rem !important;
}

#capsule .capsule-metrics {
  grid-area: metrics;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  border: 1px solid rgba(242, 237, 223, 0.12) !important;
  border-radius: 16px !important;
  background: rgba(242, 237, 223, 0.045) !important;
}

#capsule .capsule-metrics div {
  min-height: 62px;
  border: 0 !important;
  border-right: 1px solid rgba(242, 237, 223, 0.09) !important;
  border-bottom: 1px solid rgba(242, 237, 223, 0.09) !important;
  background: transparent !important;
  padding: 10px 12px !important;
}

#capsule .capsule-metrics div:nth-child(2n) {
  border-right: 0 !important;
}

#capsule .capsule-metrics div:nth-last-child(-n + 2) {
  border-bottom: 0 !important;
}

#capsule .capsule-metrics strong {
  color: var(--capsule-cream) !important;
  font-size: 0.94rem;
}

#capsule .capsule-metrics span {
  margin-top: 3px;
  color: var(--capsule-sage) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#capsule .capsule-items {
  grid-area: items;
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(178px, 1fr) !important;
  gap: 7px !important;
  overflow: visible !important;
  padding: 0 !important;
}

#capsule .capsule-items > * {
  display: grid !important;
}

#capsule .capsule-item {
  position: relative !important;
  grid-template-columns: 1fr !important;
  align-content: end !important;
  min-height: 178px !important;
  overflow: hidden !important;
  border: 1px solid rgba(242, 237, 223, 0.13) !important;
  border-radius: 4px !important;
  background: var(--capsule-ink) !important;
  color: var(--capsule-cream) !important;
  padding: 0 !important;
}

#capsule .capsule-item:first-child {
  grid-row: span 2 !important;
  min-height: 363px !important;
}

#capsule .capsule-item img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(0.88) contrast(1.04);
}

#capsule .capsule-item::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 19, 15, 0.04) 24%, rgba(8, 19, 15, 0.92) 100%) !important;
}

#capsule .capsule-item-number {
  position: absolute !important;
  top: 10px;
  left: 10px;
  z-index: 3;
  width: fit-content;
  border: 1px solid rgba(242, 237, 223, 0.26);
  border-radius: 999px;
  background: rgba(8, 19, 15, 0.58);
  padding: 5px 7px;
  color: var(--capsule-cream) !important;
  font-size: 0.62rem !important;
  font-weight: 950;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
}

#capsule .capsule-item-copy {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  gap: 4px !important;
  padding: 66px 10px 11px !important;
}

#capsule .capsule-item-copy small {
  color: var(--capsule-lime);
  font-size: 0.56rem;
  font-weight: 950;
  letter-spacing: 0.09em;
}

#capsule .capsule-item-copy strong {
  color: var(--capsule-cream) !important;
  font-size: 0.87rem !important;
  line-height: 1.08 !important;
}

#capsule .capsule-item-copy > span {
  color: rgba(242, 237, 223, 0.62) !important;
  font-size: 0.62rem !important;
}

#capsule .capsule-tags {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  overflow: hidden !important;
  margin-top: 3px !important;
}

#capsule .capsule-tags span {
  flex: 0 1 auto;
  overflow: hidden;
  border: 1px solid rgba(242, 237, 223, 0.13) !important;
  background: rgba(242, 237, 223, 0.09) !important;
  color: rgba(242, 237, 223, 0.72) !important;
  font-size: 0.56rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#capsule .capsule-item .product-link {
  top: 9px !important;
  right: 9px !important;
  bottom: auto !important;
  z-index: 4 !important;
  background: var(--capsule-lime) !important;
  color: var(--capsule-ink) !important;
}

#capsule .capsule-edit-actions {
  grid-area: actions;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 8px;
}

#capsule .capsule-edit-actions .primary-button,
#capsule .capsule-edit-actions .ghost-button {
  min-height: 46px;
}

#capsule .capsule-edit-actions .primary-button {
  border-color: var(--capsule-lime) !important;
  background: var(--capsule-lime) !important;
  color: var(--capsule-ink) !important;
  box-shadow: none !important;
}

#capsule .capsule-edit-actions .ghost-button {
  border-color: rgba(242, 237, 223, 0.2) !important;
  background: rgba(242, 237, 223, 0.055) !important;
  color: var(--capsule-cream) !important;
}

#capsule #capsuleStatus {
  grid-area: status;
  margin: -8px 0 0 !important;
  color: var(--capsule-sage) !important;
}

#capsule .capsule-panel {
  grid-column: 1 !important;
  order: 2 !important;
  border-color: rgba(8, 19, 15, 0.12) !important;
  background: rgba(242, 237, 223, 0.8) !important;
}

#capsule .capsule-outfits-panel {
  grid-column: 2 !important;
  order: 2 !important;
  border-color: rgba(8, 19, 15, 0.12) !important;
  background: rgba(242, 237, 223, 0.8) !important;
}

#capsule .capsule-history-panel {
  grid-column: 1 / -1 !important;
  order: 3 !important;
  border-color: rgba(8, 19, 15, 0.12) !important;
  background: rgba(242, 237, 223, 0.8) !important;
}

@media (max-width: 760px) {
  #capsule .capsule-edit-head {
    align-items: start !important;
    padding-top: 18px !important;
  }

  #capsule #capsuleHeadline {
    max-width: 340px;
    font-size: clamp(2.35rem, 13vw, 3.7rem) !important;
  }

  #capsule .capsule-refresh-edit {
    width: 100% !important;
    margin-top: 5px;
  }

  #capsule .capsule-layout,
  html.native-layout-guard #capsule .capsule-layout,
  html.native-layout-guard body[data-theme] #capsule .capsule-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #capsule .capsule-board-panel,
  html.native-layout-guard #capsule .capsule-board-panel,
  html.native-layout-guard body[data-theme] #capsule .capsule-board-panel {
    grid-column: 1 !important;
    border-radius: 20px !important;
  }

  #capsule .capsule-board-edition {
    padding-inline: 13px;
    font-size: 0.59rem;
  }

  #capsule .capsule-board,
  html.native-layout-guard #capsule .capsule-board,
  html.native-layout-guard body[data-theme] #capsule .capsule-board {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "head"
      "metrics"
      "items"
      "actions"
      "status" !important;
    gap: 14px !important;
    padding: 15px !important;
  }

  #capsule #capsule-title {
    max-width: 270px;
    font-size: clamp(2rem, 11vw, 3rem) !important;
  }

  #capsule .capsule-edit-narrative {
    font-size: 0.82rem;
  }

  #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, 1.24fr) minmax(0, 0.76fr) !important;
    grid-auto-rows: 92px !important;
    gap: 6px !important;
  }

  #capsule .capsule-items > *,
  html.native-layout-guard #capsule .capsule-items > *,
  html.native-layout-guard body[data-theme] #capsule .capsule-items > * {
    display: grid !important;
  }

  #capsule .capsule-item,
  html.native-layout-guard #capsule .capsule-item,
  html.native-layout-guard body[data-theme] #capsule .capsule-item {
    min-height: 92px !important;
  }

  #capsule .capsule-item:first-child,
  html.native-layout-guard #capsule .capsule-item:first-child,
  html.native-layout-guard body[data-theme] #capsule .capsule-item:first-child {
    grid-row: span 4 !important;
    min-height: 386px !important;
  }

  #capsule .capsule-item:not(:first-child) .capsule-item-copy {
    gap: 2px !important;
    padding: 34px 7px 7px !important;
  }

  #capsule .capsule-item:not(:first-child) .capsule-item-copy > span,
  #capsule .capsule-item:not(:first-child) .capsule-tags {
    display: none !important;
  }

  #capsule .capsule-item:not(:first-child) .capsule-item-copy small {
    font-size: 0.46rem;
    letter-spacing: 0.04em;
  }

  #capsule .capsule-item:not(:first-child) .capsule-item-copy strong {
    font-size: 0.68rem !important;
    -webkit-line-clamp: 2;
  }

  #capsule .capsule-item:not(:first-child) .capsule-item-number {
    top: 6px;
    left: 6px;
    padding: 3px 5px;
    font-size: 0.52rem !important;
  }

  #capsule .capsule-item:not(:first-child) .product-link {
    display: none !important;
  }

  #capsule .capsule-edit-actions {
    grid-template-columns: 1fr;
  }

  #capsule .capsule-panel,
  #capsule .capsule-outfits-panel,
  #capsule .capsule-history-panel,
  html.native-layout-guard #capsule .capsule-panel,
  html.native-layout-guard #capsule .capsule-outfits-panel,
  html.native-layout-guard #capsule .capsule-history-panel,
  html.native-layout-guard body[data-theme] #capsule .capsule-panel,
  html.native-layout-guard body[data-theme] #capsule .capsule-outfits-panel,
  html.native-layout-guard body[data-theme] #capsule .capsule-history-panel {
    grid-column: 1 !important;
  }
}

/* v169: readable mobile commerce chrome. This must stay after the theme cascade. */
:root {
  --dock-height: 92px !important;
}

main {
  bottom: calc(var(--app-stage-bottom) + var(--dock-height) + var(--safe-bottom) + 10px) !important;
}

main > .studio-band.active-view,
main > .content-band.active-view,
main > .business-band.active-view {
  padding-bottom: 28px !important;
  scroll-padding-bottom: 32px !important;
}

.mobile-dock {
  right: max(8px, calc((100vw - var(--app-width)) / 2 + 8px)) !important;
  bottom: calc(var(--app-stage-bottom) + var(--safe-bottom) + 8px) !important;
  left: max(8px, calc((100vw - var(--app-width)) / 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)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.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 {
  content: none !important;
  display: none !important;
}

.mobile-dock a::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 18px !important;
  bottom: 3px !important;
  left: 18px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: transparent !important;
  opacity: 1 !important;
}

.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 {
  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 {
  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 {
  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 {
  color: #fffaf2 !important;
}

.mobile-dock a.active .dock-icon,
.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;
}

.mobile-dock a.active::after,
.mobile-dock a:focus-visible::after {
  background: linear-gradient(90deg, transparent, #b9f7e4, #ff365f, transparent) !important;
}

.quick-action-button {
  right: max(14px, calc((100vw - var(--app-width)) / 2 + 14px)) !important;
  bottom: calc(var(--app-stage-bottom) + var(--dock-height) + var(--safe-bottom) + 18px) !important;
  z-index: 78 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  border-color: rgba(244, 240, 232, 0.2) !important;
  background:
    linear-gradient(180deg, #20252d 0%, #0a0c10 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 26px rgba(0, 0, 0, 0.4) !important;
}

.quick-action-button svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #fffaf2 !important;
  stroke-width: 2.7 !important;
}

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

.subscription-pill {
  position: fixed !important;
  left: max(14px, calc((100vw - var(--app-width)) / 2 + 14px)) !important;
  right: auto !important;
  bottom: calc(var(--app-stage-bottom) + var(--dock-height) + var(--safe-bottom) + 20px) !important;
  z-index: 77 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 58px !important;
  height: 42px !important;
  min-width: 0 !important;
  border: 1px solid rgba(244, 240, 232, 0.22) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, #20252d 0%, #0a0c10 100%) !important;
  color: #d5ff4a !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 26px rgba(0, 0, 0, 0.34) !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

.subscription-pill span {
  color: #d5ff4a !important;
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

.subscription-pill strong {
  display: none !important;
}

.subscription-pill.is-active {
  color: #b9f7e4 !important;
}

.subscription-pill.is-active span {
  color: #b9f7e4 !important;
}

.app-toast {
  top: calc(var(--app-stage-top) + var(--topbar-height) + var(--safe-top) + 10px) !important;
  right: max(14px, calc((100vw - var(--app-width)) / 2 + 14px)) !important;
  bottom: auto !important;
  left: max(14px, calc((100vw - var(--app-width)) / 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;
  color: #15171b !important;
}

.app-toast * {
  color: #15171b !important;
}

@media (max-width: 380px) {
  .mobile-dock {
    gap: 5px !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  .mobile-dock .dock-label,
  .mobile-dock a:not(.active) .dock-label {
    font-size: 0.68rem !important;
  }
}

/* v166: bottom dock readability pass. Keep navigation legible before style effects. */
:root {
  --dock-height: 88px;
}

main {
  inset: calc(var(--topbar-height) + var(--safe-top)) 0 calc(var(--dock-height) + var(--safe-bottom) + 8px) 0 !important;
}

.mobile-dock {
  right: max(8px, calc((100vw - var(--app-width)) / 2 + 8px)) !important;
  bottom: max(8px, var(--safe-bottom)) !important;
  left: max(8px, calc((100vw - var(--app-width)) / 2 + 8px)) !important;
  z-index: 72 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: auto !important;
  min-height: calc(76px + var(--safe-bottom)) !important;
  overflow: visible !important;
  border: 1px solid rgba(18, 19, 20, 0.14) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 237, 226, 0.96)),
    #f8f3e9 !important;
  box-shadow:
    0 -18px 42px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  padding: 8px 8px calc(8px + var(--safe-bottom)) !important;
}

.mobile-dock a {
  display: grid !important;
  grid-template-rows: 34px 16px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: #25282d !important;
  opacity: 1 !important;
  padding: 4px 2px !important;
}

.mobile-dock .dock-icon {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid rgba(18, 19, 20, 0.16) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #15171b !important;
  box-shadow: inset 0 -1px 0 rgba(18, 19, 20, 0.06) !important;
}

.mobile-dock .dock-icon svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.25 !important;
}

.mobile-dock .dock-label,
.mobile-dock a:not(.active) .dock-label,
.mobile-dock a:not(.active) span {
  display: block !important;
  max-width: 100% !important;
  overflow: visible !important;
  color: #25282d !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  line-height: 1.05 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.mobile-dock a.active,
.mobile-dock a:focus-visible {
  background:
    linear-gradient(180deg, #181a1f, #07080a) !important;
  color: #fffaf2 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.2) !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 {
  color: #fffaf2 !important;
}

.mobile-dock a.active .dock-icon,
.mobile-dock a:focus-visible .dock-icon {
  border-color: transparent !important;
  background:
    linear-gradient(180deg, #ff6b8a 0%, #ff365f 54%, #b3173a 100%) !important;
  color: #fffaf2 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 9px 20px rgba(255, 54, 95, 0.34) !important;
  transform: none !important;
}

.mobile-dock a.active::after,
.mobile-dock a:focus-visible::after {
  bottom: -5px !important;
  width: 22px !important;
  height: 3px !important;
  background: linear-gradient(90deg, transparent, #ff365f, #55e5d6, transparent) !important;
  box-shadow: none !important;
}

.quick-action-button {
  right: max(18px, calc((100vw - var(--app-width)) / 2 + 18px)) !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom) + 22px) !important;
  z-index: 74 !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
}

.app-toast {
  top: calc(var(--topbar-height) + var(--safe-top) + 10px) !important;
  right: max(14px, calc((100vw - var(--app-width)) / 2 + 14px)) !important;
  bottom: auto !important;
  left: max(14px, calc((100vw - var(--app-width)) / 2 + 14px)) !important;
  z-index: 86 !important;
  border-color: rgba(18, 19, 20, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 237, 226, 0.96)),
    #f8f3e9 !important;
  color: #15171b !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22) !important;
}

@media (max-width: 380px) {
  .mobile-dock {
    gap: 4px !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  .mobile-dock .dock-label,
  .mobile-dock a:not(.active) .dock-label {
    font-size: 0.66rem !important;
  }
}

/* v168: active screens are pinned below the header; no mid-screen clipping, no duplicate FAB glyph. */
: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;
}

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

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

body::before {
  top: var(--app-stage-top) !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;
  }
}

/* v165: StyleBrain identity reset. Fashion scanner, not DI/Fakturium corporate gold. */
:root {
  --sb-bg: #050608;
  --sb-rail: #090b0e;
  --sb-panel: #111418;
  --sb-glass: rgba(18, 21, 25, 0.92);
  --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-platinum: #d7d2c8;
  --sb-mint: #b9f7e4;
  --sb-signal: #ff365f;
  --sb-signal-dark: #8a1430;
  --read-bg: var(--sb-bg) !important;
  --read-shell: var(--sb-rail) !important;
  --read-panel: var(--sb-panel) !important;
  --read-card: #15181d !important;
  --read-text: var(--sb-ink) !important;
  --read-soft: var(--sb-soft) !important;
  --read-muted: var(--sb-muted) !important;
  --read-gold: var(--sb-signal) !important;
  --read-gold-bright: var(--sb-mint) !important;
  --topbar-height: 64px !important;
  --dock-height: 88px !important;
}

html,
body {
  background:
    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%) !important;
}

body::before {
  display: block !important;
  content: "" !important;
  border: 1px solid rgba(244, 240, 232, 0.1) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.035), transparent 36%),
    radial-gradient(ellipse at 50% 0%, rgba(185, 247, 228, 0.08), transparent 42%),
    #050608 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 34px 100px rgba(0, 0, 0, 0.68) !important;
}

.topbar,
.mobile-dock,
.quick-action-panel,
.command-panel {
  border-color: var(--sb-line) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.07), rgba(244, 240, 232, 0.018)),
    rgba(8, 10, 13, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 44px rgba(0, 0, 0, 0.34) !important;
}

.active-view-chip {
  border-left-color: rgba(185, 247, 228, 0.22) !important;
  color: var(--sb-ink) !important;
}

.command-button,
.locale-switch select,
.market-switch select {
  border-color: rgba(244, 240, 232, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.08), rgba(244, 240, 232, 0.018)),
    #101318 !important;
  color: var(--sb-ink) !important;
}

.locale-switch::after,
.market-switch::after {
  border-color: rgba(185, 247, 228, 0.72) !important;
}

main > .studio-band.active-view,
main > .content-band.active-view,
main > .business-band.active-view {
  border-color: rgba(244, 240, 232, 0.08) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(185, 247, 228, 0.05), transparent 38%),
    #050608 !important;
}

.panel,
[class$="-panel"],
main article,
.item-card,
.history-card,
.saved-look-card,
.trend-card,
.look-card,
.repair-card,
.watchlist-row,
.catalog-audit-row,
.wardrobe-gap-card,
.community-post-card,
.social-card-preview {
  border-color: var(--sb-line) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.06), rgba(244, 240, 232, 0.018)),
    #111418 !important;
  color: var(--sb-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

.eyebrow,
.panel-head .eyebrow,
.section-head .eyebrow,
.expert-critique-head span,
.expert-critique-grid article > span {
  color: var(--sb-mint) !important;
  font-weight: 760 !important;
  letter-spacing: 0.02em !important;
}

h1,
h2,
h3,
h4,
strong,
.panel-head h2,
.panel-head h3,
.section-head h2,
.score-wrap h3 {
  color: var(--sb-ink) !important;
}

p,
label,
small,
span,
.panel p,
.section-head p,
.score-wrap p {
  color: var(--sb-soft) !important;
}

.primary-button,
.content-band .primary-button,
.content-band :is(.primary-button, button[type="submit"]) {
  border: 1px solid rgba(255, 54, 95, 0.44) !important;
  background:
    linear-gradient(180deg, #ff5878 0%, #ff365f 52%, #9d1735 100%) !important;
  color: #fff7f8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 16px 32px rgba(255, 54, 95, 0.22) !important;
}

.primary-button *,
.content-band .primary-button * {
  color: #fff7f8 !important;
}

.score-ring {
  background:
    radial-gradient(circle at center, #050608 0 56%, transparent 57%),
    conic-gradient(var(--sb-signal) calc(var(--score, 86) * 3.6deg), rgba(244, 240, 232, 0.13) 0) !important;
  box-shadow:
    inset 0 0 0 1px rgba(244, 240, 232, 0.12),
    0 14px 28px rgba(255, 54, 95, 0.16) !important;
}

#studio.studio-band.active-view {
  display: flex !important;
  min-height: 100% !important;
  flex-direction: column !important;
  background:
    radial-gradient(ellipse at 48% -8%, rgba(185, 247, 228, 0.07), transparent 42%),
    #050608 !important;
}

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

#studio .photo-panel {
  display: grid !important;
  min-height: calc(100% - 2px) !important;
  flex: 1 1 auto !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
  gap: 12px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border-color: rgba(244, 240, 232, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.07), rgba(244, 240, 232, 0.015)),
    radial-gradient(ellipse at 80% 4%, rgba(255, 54, 95, 0.09), transparent 34%),
    #101318 !important;
}

#studio .photo-panel .panel-head {
  border-bottom-color: rgba(244, 240, 232, 0.12) !important;
}

#studio .photo-panel h2 {
  font-size: clamp(2rem, 8vw, 2.55rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

#studio .upload-zone,
.upload-zone {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border: 1px solid rgba(244, 240, 232, 0.14) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(90deg, rgba(185, 247, 228, 0.13) 1px, transparent 1px),
    linear-gradient(180deg, rgba(185, 247, 228, 0.12) 1px, transparent 1px),
    #050608 !important;
  background-size: 34px 34px !important;
}

#studio .upload-zone::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 14px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border: 1px solid rgba(185, 247, 228, 0.46) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(var(--sb-signal), var(--sb-signal)) left top / 42px 2px no-repeat,
    linear-gradient(var(--sb-signal), var(--sb-signal)) left top / 2px 42px no-repeat,
    linear-gradient(var(--sb-signal), var(--sb-signal)) right bottom / 42px 2px no-repeat,
    linear-gradient(var(--sb-signal), var(--sb-signal)) right bottom / 2px 42px no-repeat !important;
}

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

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto {
  object-fit: contain !important;
  object-position: center center !important;
  background: #050608 !important;
}

#studio .upload-zone span,
.upload-zone span {
  z-index: 3 !important;
  border: 1px solid rgba(244, 240, 232, 0.16) !important;
  background: rgba(5, 6, 8, 0.78) !important;
  color: var(--sb-ink) !important;
}

#studio .score-wrap {
  border-color: rgba(244, 240, 232, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.055), rgba(244, 240, 232, 0.014)),
    rgba(5, 6, 8, 0.72) !important;
}

.mobile-dock a.active,
.mobile-dock a:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 54, 95, 0.2), rgba(185, 247, 228, 0.06)),
    rgba(244, 240, 232, 0.045) !important;
}

.mobile-dock a.active .dock-icon,
.mobile-dock a:focus-visible .dock-icon {
  background:
    linear-gradient(180deg, #fff8fa 0%, #ff365f 100%) !important;
  color: #050608 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 12px 24px rgba(255, 54, 95, 0.28) !important;
}

.mobile-dock a.active::after,
.mobile-dock a:focus-visible::after {
  background: linear-gradient(90deg, transparent, var(--sb-mint), var(--sb-signal), transparent) !important;
  box-shadow: 0 0 18px rgba(185, 247, 228, 0.32) !important;
}

.quick-action-button {
  border-color: rgba(255, 54, 95, 0.54) !important;
  background:
    linear-gradient(180deg, #ff6a86 0%, #ff365f 52%, #8a1430 100%) !important;
  color: #fff7f8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 22px 48px rgba(255, 54, 95, 0.28) !important;
}

.quick-action-button svg {
  color: #fff7f8 !important;
  stroke: currentColor !important;
}

.command-row.active,
.command-row:focus-visible {
  border-color: rgba(185, 247, 228, 0.76) !important;
  background:
    linear-gradient(180deg, rgba(185, 247, 228, 0.18), rgba(255, 54, 95, 0.08)),
    rgba(5, 6, 8, 0.9) !important;
  box-shadow:
    inset 0 0 0 1px rgba(185, 247, 228, 0.38),
    0 10px 22px rgba(0, 0, 0, 0.2) !important;
  outline: none;
}

.command-keyboard-hint {
  margin: -4px 0 12px;
  color: rgba(245, 241, 232, 0.64);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.01em;
}

.palette-swatch small,
.brand-pill,
main :is(.pill, .source-badge, .stock-badge, .tag, .badge, .product-chip, .signal-chip, .trend-chip, .mood-chip) {
  border-color: rgba(185, 247, 228, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(185, 247, 228, 0.12), rgba(244, 240, 232, 0.018)),
    #0d1115 !important;
  color: var(--sb-soft) !important;
}

#studio .upload-zone[data-full-image="true"]::before {
  content: none !important;
  display: none !important;
}

#studio .upload-zone span,
.upload-zone span {
  right: 12px !important;
  bottom: 12px !important;
  max-width: calc(100% - 24px) !important;
  border-radius: 999px !important;
  background: rgba(5, 5, 5, 0.78) !important;
  color: rgba(251, 246, 234, 0.92) !important;
  font-size: 0.78rem !important;
  line-height: 1.1 !important;
}

#inventory,
#inventory * {
  text-shadow: none !important;
}

#inventory .section-head,
#inventory .inventory-layout > *,
#inventory .wardrobe-panel,
#inventory .catalog-audit-panel,
#inventory .watchlist-panel,
#inventory .item-form,
#inventory .item-card,
#inventory .wardrobe-metrics div,
#inventory .catalog-audit-metrics div,
#inventory .watchlist-metrics div,
#inventory .wardrobe-coverage-row,
#inventory .wardrobe-gap-card,
#inventory .wardrobe-gaps-head,
#inventory .catalog-audit-row,
#inventory .watchlist-row,
#inventory .empty-card,
#inventory .watchlist-empty {
  border-color: rgba(251, 246, 234, 0.13) !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.055), rgba(251, 246, 234, 0.018)),
    #101010 !important;
  color: rgba(251, 246, 234, 0.9) !important;
}

#inventory h2,
#inventory h3,
#inventory h4,
#inventory strong,
#inventory .wardrobe-metrics strong,
#inventory .catalog-audit-metrics strong,
#inventory .watchlist-metrics strong,
#inventory .wardrobe-coverage-row strong,
#inventory .wardrobe-gap-card strong,
#inventory .catalog-audit-row-head strong,
#inventory .watchlist-row-head strong,
#inventory .item-card h3 {
  overflow: visible !important;
  color: #fffefa !important;
  font-weight: 780 !important;
  line-height: 1.14 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

#inventory p,
#inventory span,
#inventory .wardrobe-metrics span,
#inventory .catalog-audit-metrics span,
#inventory .watchlist-metrics span,
#inventory .wardrobe-coverage-row span,
#inventory .wardrobe-gap-card span,
#inventory .catalog-audit-row p,
#inventory .watchlist-row p,
#inventory .stock-line {
  color: rgba(251, 246, 234, 0.76) !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

#inventory .inventory-grid,
#inventory .catalog-audit-list,
#inventory .watchlist-list,
#inventory .wardrobe-map,
#inventory .wardrobe-coverage,
#inventory .wardrobe-gaps {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  overflow-x: hidden !important;
}

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

#inventory .item-card img,
#inventory .catalog-audit-row img,
#inventory .watchlist-row img,
#inventory .wardrobe-gap-card img {
  width: 82px !important;
  min-width: 82px !important;
  height: 110px !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 {
  min-width: 0 !important;
  max-width: 100% !important;
}

#inventory .pill-row,
#inventory .catalog-audit-tags,
#inventory .wardrobe-gap-tags,
#inventory .watchlist-signal,
#inventory .item-meta,
#inventory .stock-line,
#inventory .watchlist-row-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  max-width: 100% !important;
}

#inventory .pill,
#inventory .source-badge,
#inventory .stock-badge,
#inventory .catalog-audit-tags span,
#inventory .wardrobe-gap-tags span,
#inventory .watchlist-signal span {
  background: rgba(251, 246, 234, 0.075) !important;
  color: rgba(251, 246, 234, 0.84) !important;
  white-space: normal !important;
}

#passport .passport-layout,
#passport .passport-layout > *,
#passport .passport-card,
#passport .passport-metrics,
#passport .size-passport-metrics,
#passport .passport-products,
#passport .passport-history {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#passport .passport-card-head {
  grid-template-columns: minmax(0, 1fr) 48px !important;
}

@media (max-width: 430px) {
  #studio .upload-zone,
  .upload-zone {
    height: min(58dvh, 500px) !important;
    min-height: 300px !important;
  }

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

  #inventory .item-card img,
  #inventory .catalog-audit-row img,
  #inventory .watchlist-row img,
  #inventory .wardrobe-gap-card img {
    width: 74px !important;
    min-width: 74px !important;
    height: 104px !important;
  }
}

/* v128: image expertise reads from the photo, passport cannot spill sideways. */
#studio .vision-signals {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

#studio .vision-signals article {
  display: flex !important;
  min-width: 0 !important;
  min-height: 74px !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
}

#studio .vision-signals span,
#studio .vision-signals strong,
#studio .vision-fixes p {
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#studio .vision-signals strong {
  font-size: 0.94rem !important;
  line-height: 1.18 !important;
}

#studio .score-wrap {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
}

#studio .score-ring {
  justify-self: start !important;
}

#studio .score-wrap > div:last-child,
#studio .score-wrap h3,
#studio .score-wrap p,
#studio .score-meta {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#studio .score-wrap p {
  max-width: none !important;
}

#passport.passport-band,
#passport .passport-layout,
#passport .passport-layout > *,
#passport .passport-card,
#passport .passport-card > *,
#passport .passport-metrics,
#passport .passport-dna,
#passport .passport-reasons,
#passport .passport-products,
#passport .passport-history,
#passport .size-passport-controls,
#passport .size-passport-metrics,
#passport .size-passport-map {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

#passport .passport-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  overflow-x: hidden !important;
}

#passport .passport-layout > * {
  flex: 0 0 auto !important;
  grid-column: auto !important;
}

#passport .passport-card-panel,
#passport .passport-products-panel,
#passport .size-passport-panel,
#passport .passport-history-panel {
  grid-column: auto !important;
  overflow-x: hidden !important;
}

#passport .passport-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 52px !important;
}

#passport .passport-metrics,
#passport .size-passport-metrics,
#passport .size-passport-map,
#passport .passport-products,
#passport .passport-history {
  grid-template-columns: minmax(0, 1fr) !important;
}

#passport .passport-dna-row,
#passport .size-passport-row {
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  overflow-x: hidden !important;
}

#passport .passport-dna-row *,
#passport .size-passport-row *,
#passport .passport-reasons p,
#passport .passport-products * {
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* v131: keep Passport on the same centered phone rail as the topbar and dock. */
#passport.passport-band {
  justify-self: center !important;
  width: min(var(--app-width), calc(100vw - 14px)) !important;
  max-width: var(--app-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* v132: the app viewport is a single centered phone column for every screen. */
main {
  grid-template-columns: minmax(0, min(var(--app-width), calc(100vw - 14px))) !important;
  justify-content: center !important;
  justify-items: stretch !important;
}

main > .studio-band,
main > .content-band,
main > .business-band {
  grid-column: 1 !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

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

main > :is(.studio-band, .content-band, .business-band) > * {
  min-width: 0 !important;
  max-width: 100% !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
) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  overflow-x: hidden !important;
}

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

main > .studio-band,
main > .content-band,
main > .business-band {
  overscroll-behavior: contain !important;
  padding-bottom: calc(var(--dock-height) + var(--safe-bottom) + 88px) !important;
  scroll-padding-bottom: calc(var(--dock-height) + var(--safe-bottom) + 104px) !important;
  touch-action: pan-y !important;
}

main :is(input, select, textarea, button) {
  max-width: 100% !important;
}

.mobile-dock {
  touch-action: pan-x !important;
}

/* v139: fixed viewport is full width; each app screen sits in the centered phone rail. */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

main {
  position: fixed !important;
  inset: calc(var(--topbar-height) + var(--safe-top)) 0 calc(var(--dock-height) + var(--safe-bottom)) 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, min(var(--app-width), calc(100vw - 14px))) !important;
  justify-content: center !important;
  justify-items: stretch !important;
  overflow: hidden !important;
}

main > .studio-band,
main > .content-band,
main > .business-band {
  grid-column: 1 !important;
  justify-self: center !important;
  width: min(var(--app-width), calc(100vw - 14px)) !important;
  max-width: calc(100vw - 14px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}

#passport.passport-band,
#passport.passport-band > *,
#passport .passport-layout,
#passport .passport-layout > *,
#passport .passport-card,
#passport .passport-card > *,
#passport .passport-metrics,
#passport .passport-dna,
#passport .passport-reasons,
#passport .passport-products,
#passport .passport-history,
#passport .size-passport-controls,
#passport .size-passport-metrics,
#passport .size-passport-map {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

#passport .passport-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  width: 100% !important;
}

#passport .passport-panel,
#passport .passport-card-panel,
#passport .passport-products-panel,
#passport .size-passport-panel,
#passport .passport-history-panel {
  grid-column: 1 !important;
  width: 100% !important;
}

#passport .field-grid,
#passport .field-grid.two,
#passport .size-passport-panel .field-grid,
#passport .size-passport-panel .field-grid.two,
#passport .size-passport-panel .field-grid.four,
#passport .passport-metrics,
#passport .size-passport-metrics,
#passport .size-passport-map,
#passport .passport-products,
#passport .passport-history {
  grid-template-columns: minmax(0, 1fr) !important;
}

#passport .passport-card-head,
#passport .passport-dna-row,
#passport .size-passport-row,
#passport .passport-product-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

#passport .passport-card-head h3,
#passport .passport-reasons p,
#passport .passport-dna-row *,
#passport .passport-product-card *,
#passport .passport-history-card *,
#passport .size-passport-row * {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
}

/* v141: crisp native-app typography. Avoid synthetic ultra-bold weights that rasterize poorly. */
html,
body,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-synthesis-weight: none !important;
  font-kerning: normal !important;
  letter-spacing: 0 !important;
  text-rendering: optimizeLegibility !important;
}

h1,
h2,
h3,
h4,
.section-head h2,
.panel-head h2,
.panel-head h3,
.score-wrap h3,
.active-view-chip,
.dock-label,
.brand > span,
strong {
  font-weight: 700 !important;
}

.eyebrow,
button,
.primary-button,
.ghost-button,
.import-button,
.product-link,
.mini-product-link,
label,
select,
input,
textarea {
  font-weight: 600 !important;
}

p,
span,
small,
.status-line,
.hint-line,
.meta-line,
.score-meta span,
.vision-signals span,
.vision-signals strong,
.passport-reasons p,
.passport-dna-row,
.passport-metrics span,
.size-passport-row {
  text-shadow: none !important;
}

.score-wrap p,
.vision-fixes p,
.expert-critique p,
#passport p,
#inventory p,
.capture-meta span,
.score-meta span {
  font-weight: 500 !important;
  line-height: 1.42 !important;
}

/* v146: final mobile rail lock. The app may be previewed in a wide browser, but every screen is still one phone viewport. */
:root {
  --app-width: min(100vw, 430px) !important;
}

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

.app-shell,
.topbar,
.mobile-dock,
main {
  max-width: 100vw !important;
}

main {
  position: fixed !important;
  inset: calc(var(--topbar-height) + var(--safe-top)) 0 calc(var(--dock-height) + var(--safe-bottom)) 0 !important;
  display: grid !important;
  width: 100vw !important;
  max-width: 100vw !important;
  grid-template-columns: minmax(0, min(var(--app-width), calc(100vw - 14px))) !important;
  justify-content: center !important;
  justify-items: center !important;
  overflow: hidden !important;
}

main > .studio-band,
main > .content-band,
main > .business-band {
  grid-column: 1 !important;
  justify-self: center !important;
  width: min(var(--app-width), calc(100vw - 14px)) !important;
  max-width: calc(100vw - 14px) !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}

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

main > :is(.studio-band, .content-band, .business-band) > *,
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),
main :is(.panel, [class$="-panel"], .section-head, article, form) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

#passport .passport-layout,
#passport .field-grid,
#passport .field-grid.two,
#passport .field-grid.four,
#passport .passport-metrics,
#passport .size-passport-metrics,
#passport .size-passport-map,
#passport .passport-products,
#passport .passport-history {
  grid-template-columns: minmax(0, 1fr) !important;
}

#passport .passport-layout > *,
#passport .passport-card,
#passport .passport-card > *,
#passport .passport-product-card,
#passport .passport-history-card,
#passport .size-passport-row {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* v147: readable result diagnostics. Short chips, no synthetic heavy raster text. */
#studio .score-wrap p {
  max-width: none !important;
  font-size: 0.94rem !important;
  font-weight: 500 !important;
  line-height: 1.44 !important;
}

#studio .score-meta {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 10px !important;
}

#studio .score-meta[hidden] {
  display: none !important;
}

#studio .score-meta span {
  display: flex !important;
  min-width: 0 !important;
  min-height: 30px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 8px !important;
  padding: 6px 8px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 380px) {
  #studio .score-meta {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

#studio .photo-descriptor-field {
  display: grid !important;
  gap: 7px !important;
  width: 100% !important;
  margin: 10px 0 12px !important;
  color: rgba(251, 246, 234, 0.72) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

#studio .photo-descriptor-field input {
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid rgba(251, 246, 234, 0.16) !important;
  border-radius: 8px !important;
  background: rgba(3, 3, 3, 0.72) !important;
  color: #fbf6ea !important;
  padding: 0 11px !important;
  font-size: max(1rem, 16px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  outline-offset: 2px !important;
}

#studio .photo-descriptor-field input::placeholder {
  color: rgba(251, 246, 234, 0.38) !important;
}

/* v151: Passport is a native app panel, not a desktop form squeezed into a phone. */
#passport.passport-band {
  display: block !important;
  gap: 0 !important;
}

#passport > .section-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
  border: 1px solid rgba(224, 178, 56, 0.18) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 252, 0.08), rgba(255, 255, 252, 0.02)),
    rgba(17, 17, 17, 0.92) !important;
  padding: 14px !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22) !important;
}

#passport > .section-head h2 {
  max-width: 100% !important;
  color: #fffefa !important;
  font-size: 1.18rem !important;
  line-height: 1.1 !important;
}

#passport > .section-head .eyebrow {
  color: #e0b238 !important;
}

#passport .section-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

#passport .section-actions button {
  min-width: 0 !important;
  min-height: 42px !important;
  border-radius: 14px !important;
  padding: 8px 10px !important;
  font-size: 0.78rem !important;
  line-height: 1.12 !important;
  white-space: normal !important;
}

#passport .passport-layout {
  display: grid !important;
  gap: 10px !important;
}

#passport .passport-panel,
#passport .passport-card-panel,
#passport .passport-products-panel,
#passport .size-passport-panel,
#passport .passport-history-panel {
  border-radius: 20px !important;
  padding: 14px !important;
}

#passport .passport-panel .panel-head,
#passport .passport-products-panel .panel-head,
#passport .size-passport-panel .panel-head,
#passport .passport-history-panel .panel-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

#passport .size-passport-panel .panel-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}

#passport .size-passport-panel .panel-actions button:first-child {
  grid-column: 1 / -1 !important;
}

#passport .passport-panel label,
#passport .size-passport-panel label {
  gap: 7px !important;
  font-size: 0.76rem !important;
  line-height: 1.2 !important;
}

#passport .passport-panel select,
#passport .passport-panel input,
#passport .size-passport-panel select,
#passport .size-passport-panel input {
  min-height: 42px !important;
  border-radius: 14px !important;
  font-size: max(1rem, 16px) !important;
}

@media (max-width: 370px) {
  #passport .section-actions,
  #passport .size-passport-panel .panel-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* v156: Passport cannot fall back to the old desktop split inside the app rail. */
#passport.passport-band {
  overflow-x: hidden !important;
}

#passport .passport-layout {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

#passport .passport-layout > *,
#passport .passport-panel,
#passport .passport-card-panel,
#passport .passport-products-panel,
#passport .size-passport-panel,
#passport .passport-history-panel {
  position: static !important;
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

#passport .passport-card,
#passport .passport-card > *,
#passport .passport-products,
#passport .passport-history,
#passport .size-passport-controls,
#passport .size-passport-metrics,
#passport .size-passport-map,
#passport .passport-dna {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#passport .passport-card-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 54px !important;
  gap: 10px !important;
  align-items: start !important;
}

#passport #passportScore {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
}

#passport .field-grid,
#passport .field-grid.two,
#passport .field-grid.four,
#passport .passport-metrics,
#passport .passport-products,
#passport .passport-history,
#passport .size-passport-metrics,
#passport .size-passport-map,
#passport .size-passport-controls .field-grid,
#passport .size-passport-controls .field-grid.two,
#passport .size-passport-controls .field-grid.four {
  grid-template-columns: minmax(0, 1fr) !important;
}

#passport .passport-dna-row,
#passport .size-passport-row,
#passport .passport-history-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

/* v157: one physical app rail shared by header, screens, dock and floating action. */
:root {
  --app-rail-width: min(430px, calc(100vw - 14px)) !important;
  --app-rail-left: max(7px, calc((100vw - 430px) / 2)) !important;
}

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

body::before {
  left: 50% !important;
  width: var(--app-rail-width) !important;
  max-width: var(--app-rail-width) !important;
  transform: translateX(-50%) !important;
}

.app-shell {
  right: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  pointer-events: none !important;
}

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

main {
  position: fixed !important;
  inset: calc(var(--topbar-height) + var(--safe-top)) 0 calc(var(--dock-height) + var(--safe-bottom)) 0 !important;
  display: grid !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  grid-template-columns: var(--app-rail-width) !important;
  justify-content: center !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

main > .studio-band,
main > .content-band,
main > .business-band {
  position: relative !important;
  right: auto !important;
  left: auto !important;
  grid-column: 1 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

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

main > :is(.studio-band, .content-band, .business-band) > *,
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),
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;
  overflow-x: hidden !important;
}

.quick-action-button {
  right: auto !important;
  left: calc(var(--app-rail-left) + var(--app-rail-width) - 72px) !important;
  bottom: calc(var(--dock-height) + var(--safe-bottom) + 14px) !important;
}

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

/* v158: desktop preview is a phone viewport, not a full-height web page. */
:root {
  --app-stage-top: 0px !important;
  --app-stage-bottom: 0px !important;
  --app-stage-height: 100dvh !important;
}

@media (min-width: 720px) and (min-height: 760px) {
  :root {
    --app-stage-top: 12px !important;
    --app-stage-height: min(844px, calc(100vh - 24px)) !important;
    --app-stage-bottom: calc(100vh - var(--app-stage-top) - var(--app-stage-height)) !important;
  }
}

body::before {
  top: var(--app-stage-top) !important;
  bottom: auto !important;
  height: var(--app-stage-height) !important;
}

.app-shell {
  top: var(--app-stage-top) !important;
}

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

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

.quick-action-button {
  bottom: calc(var(--app-stage-bottom) + var(--dock-height) + var(--safe-bottom) + 14px) !important;
}

/* v159: product chips must never render white-on-white. */
main :is(
  .item-card,
  .passport-product-card,
  .client-product-card,
  .watchlist-row,
  .catalog-audit-row,
  .wardrobe-gap-card,
  .community-post,
  .trend-card,
  .history-card,
  .rule-card
) :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;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

main :is(
  .item-card,
  .passport-product-card,
  .client-product-card,
  .watchlist-row,
  .catalog-audit-row,
  .wardrobe-gap-card,
  .community-post,
  .trend-card,
  .history-card,
  .rule-card
) :is(.pill, .source-badge, .stock-badge, .tag, .badge, .product-chip, .signal-chip, .trend-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;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 28px !important;
  align-items: center !important;
  border: 1px solid rgba(239, 204, 113, 0.18) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.105), rgba(251, 246, 234, 0.028)),
    #111111 !important;
  color: #fbf6ea !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 5px 14px rgba(0, 0, 0, 0.18) !important;
  padding: 5px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 650 !important;
  line-height: 1.12 !important;
  text-shadow: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

main :is(.item-card, .watchlist-row, .catalog-audit-row) :is(.source-shop, .stock-available, .watchlist-price-ready .watchlist-row-head span) {
  border-color: rgba(239, 204, 113, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(239, 204, 113, 0.26), rgba(239, 204, 113, 0.08)),
    #14110a !important;
  color: #f5d884 !important;
}

main :is(.item-card, .watchlist-row, .catalog-audit-row) :is(.source-user, .stock-owned) {
  border-color: rgba(221, 212, 198, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(221, 212, 198, 0.16), rgba(221, 212, 198, 0.045)),
    #111111 !important;
  color: #e8dfd1 !important;
}

/* v160: inventory cards are a native list inside the app rail, never a squeezed desktop grid. */
#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;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#inventory .item-card,
#inventory .wardrobe-gap-card,
#inventory .catalog-audit-row,
#inventory .watchlist-row {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

#inventory .item-card img,
#inventory .wardrobe-gap-card img,
#inventory .catalog-audit-row img,
#inventory .watchlist-row img {
  width: 96px !important;
  min-width: 96px !important;
  height: 124px !important;
  min-height: 124px !important;
  aspect-ratio: auto !important;
  border-radius: 14px !important;
  object-fit: cover !important;
}

#inventory .item-body,
#inventory .wardrobe-gap-card > div,
#inventory .catalog-audit-row > div,
#inventory .watchlist-body {
  display: grid !important;
  align-content: start !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 12px 12px 12px 0 !important;
  overflow: hidden !important;
}

#inventory .item-card h3,
#inventory .wardrobe-gap-card strong,
#inventory .catalog-audit-row-head strong,
#inventory .watchlist-row-head strong {
  max-width: 100% !important;
  margin: 0 0 5px !important;
  font-size: 1rem !important;
  line-height: 1.12 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

#inventory .item-meta,
#inventory .stock-line,
#inventory .pill-row,
#inventory .wardrobe-gap-tags,
#inventory .watchlist-signal {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  margin-top: 7px !important;
}

#inventory :is(.pill, .source-badge, .stock-badge, .wardrobe-gap-tags span, .watchlist-signal span, .catalog-audit-tags span) {
  width: auto !important;
  max-width: 100% !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;
}

#inventory .product-link,
#inventory .mini-product-link,
#inventory .watch-button {
  justify-self: start !important;
  width: auto !important;
  max-width: 100% !important;
  margin-top: 9px !important;
}

@media (max-width: 370px) {
  #inventory .item-card,
  #inventory .wardrobe-gap-card,
  #inventory .catalog-audit-row,
  #inventory .watchlist-row {
    grid-template-columns: 84px minmax(0, 1fr) !important;
  }

#inventory .item-card img,
#inventory .wardrobe-gap-card img,
#inventory .catalog-audit-row img,
#inventory .watchlist-row img {
    width: 84px !important;
    min-width: 84px !important;
    height: 116px !important;
    min-height: 116px !important;
  }
}

/* v161: active app screens always start at the top of the phone viewport. */
html {
  scroll-behavior: auto !important;
}

html,
body {
  overflow: hidden !important;
}

main {
  align-content: stretch !important;
  align-items: stretch !important;
  place-items: stretch center !important;
}

main > .active-view {
  display: block !important;
  place-self: stretch !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  align-content: start !important;
  justify-content: start !important;
  scroll-margin-top: 0 !important;
  scroll-padding-top: 0 !important;
  transform: none !important;
}

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

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

/* v162: Studio must read as one native phone screen, not a tiny web card on a black page. */
@media (min-width: 720px) and (min-height: 760px) {
  :root {
    --app-stage-top: 12px !important;
    --app-stage-height: min(760px, calc(100vh - 24px)) !important;
    --app-stage-bottom: calc(100vh - var(--app-stage-top) - var(--app-stage-height)) !important;
  }

  body::before {
    border: 1px solid rgba(251, 246, 234, 0.12) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(212, 166, 67, 0.16), transparent 38%),
      linear-gradient(180deg, rgba(251, 246, 234, 0.035), transparent 210px),
      #050505 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -80px 120px rgba(0, 0, 0, 0.42),
      0 30px 90px rgba(0, 0, 0, 0.72) !important;
  }
}

main > .studio-band.active-view,
main > .content-band.active-view,
main > .business-band.active-view {
  padding: 10px 10px 12px !important;
  scroll-padding-top: 10px !important;
  scroll-padding-bottom: 12px !important;
}

#studio.studio-band.active-view {
  display: block !important;
  background:
    radial-gradient(ellipse at 50% -80px, rgba(212, 166, 67, 0.13), transparent 42%),
    #050505 !important;
}

#studio .intro-panel {
  display: none !important;
}

#studio .studio-grid {
  display: grid !important;
  min-height: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 10px !important;
}

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

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

#studio .upload-zone,
.upload-zone {
  display: grid !important;
  height: clamp(340px, calc(var(--app-stage-height) - var(--topbar-height) - var(--dock-height) - 190px), 520px) !important;
  min-height: 320px !important;
  max-height: 520px !important;
  flex: 1 0 auto !important;
  place-items: center !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;
  background: #050505 !important;
}

#studio .score-wrap {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}

#studio .vision-panel,
#studio #expertCritique,
#studio .controls-panel,
#studio .recommendation-panel {
  flex: 0 0 auto !important;
}

/* v163: compact native topbar controls. No oversized web pills in the phone chrome. */
.topbar {
  grid-template-columns: 88px minmax(0, 1fr) 42px 120px !important;
  gap: 6px !important;
  align-items: center !important;
  padding: calc(7px + var(--safe-top)) 8px 7px !important;
}

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

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

.active-view-chip {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  border-left: 1px solid rgba(212, 166, 67, 0.18) !important;
  padding-left: 8px !important;
  font-size: 0.86rem !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.command-button {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border-radius: 14px !important;
  padding: 0 !important;
}

.command-button-icon,
.command-button svg {
  width: 19px !important;
  height: 19px !important;
}

.topbar-switches {
  display: grid !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  grid-template-columns: 54px 60px !important;
  gap: 6px !important;
}

.locale-switch,
.market-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::after,
.market-switch::after {
  content: "" !important;
  position: absolute !important;
  top: calc(50% - 4px) !important;
  right: 8px !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 1.5px solid rgba(251, 246, 234, 0.7) !important;
  border-bottom: 1.5px solid rgba(251, 246, 234, 0.7) !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
}

.locale-switch select,
.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;
  border: 1px solid rgba(251, 246, 234, 0.16) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(251, 246, 234, 0.07), rgba(251, 246, 234, 0.018)),
    #101010 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 18px rgba(0, 0, 0, 0.22) !important;
  color: #fbf6ea !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-align-last: center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.locale-switch select {
  padding: 0 17px 0 6px !important;
}

.market-switch select {
  padding: 0 16px 0 6px !important;
}

@media (max-width: 370px) {
  .topbar {
    grid-template-columns: 78px minmax(0, 1fr) 40px 106px !important;
    gap: 5px !important;
    padding-right: 7px !important;
    padding-left: 7px !important;
  }

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

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

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

  .topbar-switches {
    width: 106px !important;
    min-width: 106px !important;
    max-width: 106px !important;
    grid-template-columns: 49px 52px !important;
    gap: 5px !important;
  }

  .locale-switch select,
  .market-switch select {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    font-size: 0.68rem !important;
  }
}

/* v164: remove the mid-screen clipping. The phone chrome owns one continuous viewport. */
:root {
  --app-stage-top: 12px !important;
  --app-stage-bottom: 12px !important;
  --app-stage-height: calc(100dvh - 24px) !important;
}

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

.app-shell {
  top: var(--app-stage-top) !important;
}

main {
  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;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

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

.quick-action-button {
  bottom: calc(var(--app-stage-bottom) + var(--dock-height) + var(--safe-bottom) + 14px) !important;
}

main > .studio-band.active-view,
main > .content-band.active-view,
main > .business-band.active-view {
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-bottom: 16px !important;
  scroll-padding-bottom: 18px !important;
}

#studio .studio-grid {
  min-height: auto !important;
  align-content: start !important;
}

#studio .photo-panel {
  min-height: auto !important;
  overflow: visible !important;
}

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

#studio .upload-zone,
.upload-zone {
  height: clamp(380px, 52dvh, 540px) !important;
  min-height: 380px !important;
  max-height: 540px !important;
  overflow: hidden !important;
}

@media (max-width: 430px) {
  #studio .upload-zone,
  .upload-zone {
    height: clamp(340px, 56dvh, 500px) !important;
    min-height: 340px !important;
  }
}

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

/* v166: final cascade - StyleBrain is a fashion scanner, not a DI/Fakturium skin. */
:root {
  --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;
  --read-bg: var(--sb-bg) !important;
  --read-shell: var(--sb-rail) !important;
  --read-panel: var(--sb-panel) !important;
  --read-card: #15181d !important;
  --read-text: var(--sb-ink) !important;
  --read-soft: var(--sb-soft) !important;
  --read-muted: var(--sb-muted) !important;
  --read-gold: var(--sb-signal) !important;
  --read-gold-bright: var(--sb-mint) !important;
  --topbar-height: 64px !important;
  --dock-height: 88px !important;
  --app-stage-top: 12px !important;
  --app-stage-bottom: 12px !important;
}

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

html,
body {
  background:
    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%) !important;
}

body::before {
  content: "" !important;
  display: block !important;
  top: var(--app-stage-top) !important;
  height: calc(100dvh - var(--app-stage-top) - var(--app-stage-bottom)) !important;
  border: 1px solid rgba(244, 240, 232, 0.1) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.035), transparent 36%),
    radial-gradient(ellipse at 50% 0%, rgba(185, 247, 228, 0.08), transparent 42%),
    #050608 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 34px 100px rgba(0, 0, 0, 0.68) !important;
}

body::after {
  content: none !important;
  display: none !important;
}

.app-shell {
  top: var(--app-stage-top) !important;
}

main {
  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;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.topbar,
.mobile-dock,
.quick-action-panel,
.command-panel {
  border-color: var(--sb-line) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.07), rgba(244, 240, 232, 0.018)),
    rgba(8, 10, 13, 0.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 44px rgba(0, 0, 0, 0.34) !important;
}

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

.quick-action-button {
  bottom: calc(var(--app-stage-bottom) + var(--dock-height) + var(--safe-bottom) + 14px) !important;
}

.active-view-chip {
  border-left-color: rgba(185, 247, 228, 0.22) !important;
  color: var(--sb-ink) !important;
}

.command-button,
.locale-switch select,
.market-switch select {
  border-color: rgba(244, 240, 232, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.08), rgba(244, 240, 232, 0.018)),
    #101318 !important;
  color: var(--sb-ink) !important;
}

.locale-switch::after,
.market-switch::after {
  border-color: rgba(185, 247, 228, 0.72) !important;
}

main > .studio-band.active-view,
main > .content-band.active-view,
main > .business-band.active-view {
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-color: rgba(244, 240, 232, 0.08) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(185, 247, 228, 0.05), transparent 38%),
    #050608 !important;
  padding-bottom: 16px !important;
  scroll-padding-bottom: 18px !important;
}

.panel,
[class$="-panel"],
main article,
.item-card,
.history-card,
.saved-look-card,
.trend-card,
.look-card,
.repair-card,
.watchlist-row,
.catalog-audit-row,
.wardrobe-gap-card,
.community-post-card,
.social-card-preview {
  border-color: var(--sb-line) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.06), rgba(244, 240, 232, 0.018)),
    #111418 !important;
  color: var(--sb-ink) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

.eyebrow,
.panel-head .eyebrow,
.section-head .eyebrow,
.expert-critique-head span,
.expert-critique-grid article > span {
  color: var(--sb-mint) !important;
  font-weight: 760 !important;
  letter-spacing: 0.02em !important;
}

h1,
h2,
h3,
h4,
strong,
.panel-head h2,
.panel-head h3,
.section-head h2,
.score-wrap h3 {
  color: var(--sb-ink) !important;
}

p,
label,
small,
span,
.panel p,
.section-head p,
.score-wrap p {
  color: var(--sb-soft) !important;
}

.primary-button,
.content-band .primary-button,
.content-band :is(.primary-button, button[type="submit"]) {
  border: 1px solid rgba(255, 54, 95, 0.44) !important;
  background:
    linear-gradient(180deg, #ff5878 0%, #ff365f 52%, #9d1735 100%) !important;
  color: #fff7f8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 16px 32px rgba(255, 54, 95, 0.22) !important;
}

.primary-button *,
.content-band .primary-button * {
  color: #fff7f8 !important;
}

#studio.studio-band.active-view {
  display: flex !important;
  min-height: 100% !important;
  flex-direction: column !important;
  background:
    radial-gradient(ellipse at 48% -8%, rgba(185, 247, 228, 0.07), transparent 42%),
    #050608 !important;
}

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

#studio .photo-panel {
  display: grid !important;
  min-height: 100% !important;
  flex: 1 1 auto !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
  gap: 12px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  border-color: rgba(244, 240, 232, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.07), rgba(244, 240, 232, 0.015)),
    radial-gradient(ellipse at 80% 4%, rgba(255, 54, 95, 0.09), transparent 34%),
    #101318 !important;
}

#studio .photo-panel .panel-head {
  border-bottom-color: rgba(244, 240, 232, 0.12) !important;
}

#studio .photo-panel h2 {
  font-size: clamp(2rem, 8vw, 2.55rem) !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#studio .upload-zone,
.upload-zone {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  border: 1px solid rgba(244, 240, 232, 0.14) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(90deg, rgba(185, 247, 228, 0.13) 1px, transparent 1px),
    linear-gradient(180deg, rgba(185, 247, 228, 0.12) 1px, transparent 1px),
    #050608 !important;
  background-size: 34px 34px !important;
}

#studio .upload-zone::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 14px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border: 1px solid rgba(185, 247, 228, 0.46) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(var(--sb-signal), var(--sb-signal)) left top / 42px 2px no-repeat,
    linear-gradient(var(--sb-signal), var(--sb-signal)) left top / 2px 42px no-repeat,
    linear-gradient(var(--sb-signal), var(--sb-signal)) right bottom / 42px 2px no-repeat,
    linear-gradient(var(--sb-signal), var(--sb-signal)) right bottom / 2px 42px no-repeat !important;
}

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

#studio .upload-zone img,
.upload-zone img,
#photoPreview,
#uploadedPhoto {
  object-fit: contain !important;
  object-position: center center !important;
  background: #050608 !important;
}

#studio .upload-zone span,
.upload-zone span {
  z-index: 3 !important;
  border: 1px solid rgba(244, 240, 232, 0.16) !important;
  background: rgba(5, 6, 8, 0.78) !important;
  color: var(--sb-ink) !important;
}

.score-ring {
  background:
    radial-gradient(circle at center, #050608 0 56%, transparent 57%),
    conic-gradient(var(--sb-signal) calc(var(--score, 86) * 3.6deg), rgba(244, 240, 232, 0.13) 0) !important;
  box-shadow:
    inset 0 0 0 1px rgba(244, 240, 232, 0.12),
    0 14px 28px rgba(255, 54, 95, 0.16) !important;
}

#studio .score-wrap {
  border-color: rgba(244, 240, 232, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(244, 240, 232, 0.055), rgba(244, 240, 232, 0.014)),
    rgba(5, 6, 8, 0.72) !important;
}

.mobile-dock a.active,
.mobile-dock a:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 54, 95, 0.2), rgba(185, 247, 228, 0.06)),
    rgba(244, 240, 232, 0.045) !important;
}

.mobile-dock a.active .dock-icon,
.mobile-dock a:focus-visible .dock-icon {
  background:
    linear-gradient(180deg, #fff8fa 0%, #ff365f 100%) !important;
  color: #050608 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 12px 24px rgba(255, 54, 95, 0.28) !important;
}

.mobile-dock a.active::after,
.mobile-dock a:focus-visible::after {
  background: linear-gradient(90deg, transparent, var(--sb-mint), var(--sb-signal), transparent) !important;
  box-shadow: 0 0 18px rgba(185, 247, 228, 0.32) !important;
}

.quick-action-button {
  border-color: rgba(255, 54, 95, 0.54) !important;
  background:
    linear-gradient(180deg, #ff6a86 0%, #ff365f 52%, #8a1430 100%) !important;
  color: #fff7f8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 22px 48px rgba(255, 54, 95, 0.28) !important;
}

.quick-action-button svg {
  color: #fff7f8 !important;
  stroke: currentColor !important;
}

.palette-swatch small,
.brand-pill,
main :is(.pill, .source-badge, .stock-badge, .tag, .badge, .product-chip, .signal-chip, .trend-chip, .mood-chip) {
  border-color: rgba(185, 247, 228, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(185, 247, 228, 0.12), rgba(244, 240, 232, 0.018)),
    #0d1115 !important;
  color: var(--sb-soft) !important;
}


/* Rejony komunikatów dla czytników ekranu. Muszą pozostać w drzewie
   dostępności, więc nie wolno użyć `display: none` ani `visibility: hidden`. */
.app-toast-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}