:root {
  --ink: #2c181c;
  --muted: #8a6f74;
  --line: #e6d4cc;
  --paper: #f6efe6;
  --card: #fffaf5;
  --rose: #9e4a58;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  padding: 18px 16px 88px;
}
.hidden { display: none !important; }
body.locked main,
body.locked .bottom-nav,
body.locked .install-bar,
body.locked .icon-gate { display: none !important; }
body.needs-icon main,
body.needs-icon .bottom-nav,
body.needs-icon .gate,
body.needs-icon .install-bar { display: none !important; }
.gate { display: none; }
body.locked .gate { display: block; }
body.needs-icon .icon-gate { display: block !important; }
.gate textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  margin: 8px 0 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  font: inherit;
  direction: ltr;
  text-align: left;
  background: #fff;
}
.icon-gate { display: none; margin-top: 8px; }
.icon-gate-card {
  background:
    radial-gradient(120% 80% at 100% 0%, #f3d5db 0%, transparent 55%),
    linear-gradient(165deg, #fffaf5 0%, #f6ebe3 100%);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 20px 22px;
  text-align: center;
}
.icon-gate-preview {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  display: block;
  margin: 0 auto 16px;
  box-shadow: 0 10px 28px rgba(92, 42, 53, 0.18);
  background: #fff;
  object-fit: cover;
}
.icon-gate .ask { margin-bottom: 6px; }
.icon-gate .hint { margin-bottom: 16px; }
.icon-gate .cta { width: 100%; margin-top: 4px; }
.icon-gate-steps {
  list-style: none;
  counter-reset: ig;
  text-align: right;
  margin: 18px 0 10px;
  padding: 0;
}
.icon-gate-steps li {
  counter-increment: ig;
  position: relative;
  padding: 10px 14px 10px 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
}
.icon-gate-steps li::before {
  content: counter(ig);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: 8px;
  border-radius: 50%;
  background: #e7b7c0;
  color: #2c181c;
  font-size: 0.78rem;
  font-weight: 800;
  vertical-align: middle;
}
.icon-gate-after { margin-top: 4px; }
.icon-gate-skip {
  display: block;
  width: 100%;
  margin-top: 22px;
  border: 0;
  background: transparent;
  color: #c4a8ad;
  font: inherit;
  font-size: 0.74rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
header img { width: 48px; height: 48px; border-radius: 14px; }
h1 { font-family: "Amiri", "Times New Roman", serif; font-size: 1.7rem; color: #5c2a35; line-height: 1.1; }
header p { color: var(--muted); font-size: 0.88rem; }

.drop {
  display: block;
  min-height: 260px;
  border: 2px dashed var(--rose);
  background: #f8e8ea;
  border-radius: 24px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.drop.on {
  background: #f3d4d8;
  border-style: solid;
}
.drop input { display: none; }
.drop-empty {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  gap: 6px;
}
.drop-empty em { font-style: normal; font-size: 2rem; }
.drop-empty strong { font-size: 1.15rem; }
.drop-empty span { color: var(--muted); font-size: 0.9rem; }
.drop-empty b {
  margin-top: 8px;
  background: #9e4a58;
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.88rem;
}

.drop-full { position: relative; }
.drop-full img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  background: #ddd;
}
.change {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(44, 24, 28, 0.8);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 800;
}

.found {
  margin-top: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.found-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.found i {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  flex: 0 0 auto;
}
.found span { color: var(--muted); font-size: 0.82rem; display: block; }
.alts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.alts span { width: 100%; }
.alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 4px 10px 4px 4px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--ink);
}
.alt i { width: 18px; height: 18px; }

.ask {
  font-weight: 800;
  margin: 16px 0 8px;
}
.ask.after { font-size: 0.95rem; }
.what { margin-top: 4px; }
#page-photo .what .ask { margin-top: 12px; }

.pieces {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.piece {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 14px;
  padding: 10px 8px;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}
.piece.on {
  background: #2c181c;
  color: #f6efe6;
  border-color: #2c181c;
}
.piece.pic {
  padding: 0;
  overflow: hidden;
  text-align: center;
}
.piece.pic img,
.piece.pic .piece-svg {
  display: block;
  width: 100%;
  height: 118px;
  object-fit: contain;
  background: #f3ead8;
}
.piece.pic .garment {
  width: 100%;
  height: 118px;
}
.piece.pic b {
  display: block;
  padding: 7px 4px 8px;
  font-size: 0.78rem;
}
.hint {
  color: var(--muted);
  font-size: 0.82rem;
  margin: -4px 0 10px;
}
.looks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.look {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--card);
  font-family: inherit;
  cursor: pointer;
  text-align: right;
  color: var(--ink);
}
.look.on { border-color: var(--rose); box-shadow: 0 0 0 2px rgba(158,74,88,.25); }
.look img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  background: #eee;
}
.look-meta {
  display: block;
  padding: 8px 10px 10px;
}
.look-meta em {
  display: block;
  font-style: normal;
  color: var(--rose);
  font-size: 0.72rem;
  font-weight: 800;
}
.look-meta b { font-size: 0.88rem; }
.palette {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
}
.palette i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
}
.look-hero {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 12px;
}
.look-hero img {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center;
}
.row-pic {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--line);
}

.more {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  padding: 4px 12px 12px;
}
.more summary {
  cursor: pointer;
  font-weight: 800;
  padding: 10px 0;
}

.colors {
  display: block;
}
.color-family {
  margin-bottom: 16px;
}
.color-family h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
}
.color-family h3 i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  flex: 0 0 auto;
}
.color-family-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.color-family-grid.swatches {
  grid-template-columns: repeat(4, 1fr);
}
.swatch {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 16px;
  padding: 8px 6px;
  text-align: center;
  font-family: inherit;
  cursor: pointer;
}
.swatch.on { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(158, 74, 88, 0.18); }
.swatch i {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  margin-bottom: 6px;
  border: 1px solid rgba(0,0,0,.06);
}
.swatch b { display: block; font-size: 0.78rem; }

.result {
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
}
.result h2 {
  font-family: "Amiri", serif;
  font-size: 1.35rem;
  margin-bottom: 12px;
}
.result .why {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.row i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
  flex: 0 0 auto;
}
.row span { color: var(--muted); font-size: 0.82rem; display: block; }
.row b { font-size: 1rem; }

.say {
  margin-top: 14px;
  background: #2c181c;
  color: #f6efe6;
  border-radius: 16px;
  padding: 12px;
  font-size: 0.92rem;
}
.say button {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 0;
  border-radius: 999px;
  padding: 10px;
  font-family: inherit;
  font-weight: 800;
  background: #c45c6e;
  color: #fff;
  cursor: pointer;
}

.toast {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  background: #2c181c;
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
}
.toast.show { opacity: 1; }
.install-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 74px;
  z-index: 40;
  display: flex;
  gap: 8px;
  align-items: center;
  background: #2c181c;
  color: #fff;
  border-radius: 16px;
  padding: 10px 10px 10px 12px;
  box-shadow: 0 8px 24px rgba(44, 24, 28, 0.22);
}
.install-bar p { margin: 0; flex: 1; font-size: 0.82rem; line-height: 1.35; }
.install-bar p b { display: block; font-size: 0.92rem; }
.install-bar button {
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}
.install-bar .install-go { background: #e7b7c0; color: #2c181c; padding: 8px 12px; }
.install-bar .install-x { background: transparent; color: #fff; font-size: 1.1rem; padding: 4px 8px; }
.install-steps { margin-top: 8px; }

.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,250,245,0.96);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
  z-index: 50;
}
.skin-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 16px;
}
.skin-card {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 10px;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink);
}
.skin-card.on {
  box-shadow: 0 0 0 2px var(--rose);
  background: #f8e8ea;
}
.skin-face {
  display: block;
  background: #cfc3b3;
}
.skin-face .garment-photo {
  height: 140px;
  object-fit: cover;
  object-position: center 20%;
}
.skin-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 8px 4px 0;
  border: 1px solid rgba(44,24,28,.15);
  vertical-align: middle;
}
.skin-card b { display: block; font-size: 0.86rem; }
.skin-card small { color: var(--muted); font-size: 0.72rem; }
.match-four {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 16px;
}
.avoid .avoid-vis .garment-photo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  object-position: center 22%;
}

.bottom-nav button {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 6px 1px;
  line-height: 1.2;
  font-family: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.bottom-nav button.on { color: var(--rose); }
.bottom-nav button em {
  display: block;
  font-style: normal;
  font-size: 1.05rem;
  margin-bottom: 2px;
}

.problem {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 8px;
  overflow: hidden;
}
.problem summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 800;
  position: relative;
  padding-left: 28px;
}
.problem summary::-webkit-details-marker { display: none; }
.problem summary::after {
  content: "+";
  position: absolute;
  left: 12px;
  top: 10px;
  color: var(--rose);
}
.problem[open] summary::after { content: "–"; }
.problem .body { padding: 0 14px 12px; color: var(--ink); font-size: 0.92rem; }
.problem .why { color: var(--muted); margin-bottom: 6px; }

.garment {
  width: 100%;
  height: auto;
  display: block;
}
.row-svg {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  background: #f3ead8;
  border-radius: 12px;
  overflow: hidden;
}
.row-svg .garment { width: 52px; height: 52px; }
.outfit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 12px;
  margin: 8px 0 12px;
}
.outfit-item {
  background: #f3ead8;
  border-radius: 16px;
  padding: 8px 8px 10px;
  text-align: center;
}
.outfit-item.on {
  box-shadow: 0 0 0 2px var(--rose);
  background: #f8e8ea;
}
.outfit-item b { display: block; font-size: 0.82rem; margin-top: 2px; }
.outfit-item em {
  display: block;
  font-style: normal;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}
.outfit-item .garment { max-height: 130px; margin: 0 auto; }
.garment-photo {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  background: #eee4d6;
}
.outfit-item .garment-photo {
  height: 132px;
  border-radius: 12px;
  object-fit: contain;
}
.cat-color-pic .garment-photo { height: 118px; object-fit: contain; }
.row-svg .garment-photo { width: 52px; height: 52px; }
.chip .garment-photo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.piece.pic .garment-photo { height: 118px; object-fit: contain; }
.kind-pic .garment-photo { width: 112px; height: 168px; object-fit: contain; }
.avoid-vis .garment-photo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
}
.cat-color-pic {
  display: block;
  height: auto;
  padding: 6px 8px 0;
  background: #f3ead8;
}
.cat-color-pic .garment { height: 92px; }
.chip .garment {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}
.chip.yes {
  padding: 4px 10px 4px 4px;
}
.avoid-vis {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.avoid-vis .garment { width: 44px; height: 44px; }
.avoid-vis b { color: var(--rose); font-size: 1.1rem; }

.back {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  color: var(--rose);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 4px 0 8px;
  cursor: pointer;
}
.cat-kinds {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.cat-kind {
  display: flex;
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
  text-align: right;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}
.cat-kind img,
.cat-kind .kind-pic {
  width: 112px;
  height: 168px;
  object-fit: contain;
  flex: 0 0 auto;
  background: #f3ead8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kind-pic .garment-photo {
  width: 112px;
  height: 168px;
  object-fit: contain;
}
.cat-kind span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 14px;
  gap: 4px;
}
.cat-kind b { font-size: 1.15rem; }
.cat-kind em {
  font-style: normal;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
}
.cat-colors {
  display: block;
}
.cat-color {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
}
.cat-color b { display: block; font-size: 0.78rem; padding: 6px 4px 0; }
.cat-color em {
  display: block;
  font-style: normal;
  color: var(--muted);
  font-size: 0.68rem;
  padding: 0 4px 8px;
  font-weight: 700;
}
.cat-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 10px;
  margin-bottom: 8px;
}
.cat-hero-pic {
  position: relative;
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  border-radius: 16px;
  overflow: hidden;
}
.cat-hero-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-hero-pic i {
  position: absolute;
  inset: auto 6px 6px auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.cat-hero em { color: var(--rose); font-style: normal; font-weight: 800; font-size: 0.78rem; }
.cat-hero h2 { font-family: "Amiri", "Times New Roman", serif; font-size: 1.45rem; line-height: 1.2; }
.cat-hero span { color: var(--muted); font-size: 0.88rem; }
.ex-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 10px;
}
.ex-pic {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin-bottom: 8px;
}
.ex-dots { display: flex; gap: 6px; margin-bottom: 8px; }
.ex-dots i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08);
}
.ex-line { font-weight: 800; font-size: 0.88rem; margin-bottom: 4px; }
.ex-card .copy {
  display: block;
  width: 100%;
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  padding: 9px;
  font-family: inherit;
  font-weight: 800;
  background: #c45c6e;
  color: #fff;
  cursor: pointer;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px 5px 5px;
  font-size: 0.78rem;
  font-weight: 800;
}
.chip i { width: 16px; height: 16px; border-radius: 50%; }
.chip.yes { border-color: #b7c9a8; background: #f4f7ef; }
.avoid-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.worn {
  position: relative;
  margin: 8px 0 12px;
  border-radius: 22px;
  overflow: hidden;
  background: #eee4d6;
  border: 1px solid var(--line);
}
.worn img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.worn span {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(44, 24, 28, 0.78));
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 28px 12px 10px;
}
.worn.bad {
  box-shadow: 0 0 0 3px #c45c6e;
}
.worn.bad::after {
  content: "✕";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #c45c6e;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 34px;
  text-align: center;
}
.worn.miss { display: none; }
.ex-card .worn { margin: 0 0 8px; }
.ex-card .outfit { margin-top: 0; }
.avoid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  background: #f8e8ea;
  border: 1px solid #e6c9ce;
  border-radius: 14px;
  padding: 10px;
}
.avoid .worn {
  margin: 0;
  border-radius: 14px;
}
.avoid .worn img { max-height: 420px; }
.avoid .worn span {
  color: #fff;
  font-size: 0.88rem;
}
.avoid-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avoid b { display: block; font-size: 0.92rem; }
.avoid span { color: var(--muted); font-size: 0.8rem; }

.mk-card, .quiz-card, .result-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 10px;
}
.opt {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 14px;
  padding: 11px;
  text-align: right;
  font-weight: 700;
  font-family: inherit;
  margin-top: 8px;
  cursor: pointer;
}

.picked {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  margin: 4px 0 14px;
}
.picked-photo {
  background: #cfc3b3;
}
.picked-photo .garment-photo {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  margin: 0 auto;
}
.picked-meta { padding: 12px 14px 14px; }
.picked-kind {
  display: block;
  font-size: 0.75rem;
  color: var(--rose);
  font-weight: 800;
}
.picked h2 { font-size: 1.28rem; line-height: 1.2; }
.picked-meta p { color: var(--muted); font-size: 0.88rem; }

.match-four {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 16px;
}
.match-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 10px;
}
.match-photo { background: #cfc3b3; }
.match-photo .garment-photo {
  height: 168px;
  object-fit: cover;
  object-position: center 18%;
}
.match-card b { display: block; font-size: 0.82rem; }
.match-card small {
  color: var(--muted);
  font-size: 0.72rem;
}
.match-card .why {
  margin: 4px 8px 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.45;
}
.swatch-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 8px 4px 2px;
  border: 1px solid rgba(44, 24, 28, 0.12);
  vertical-align: middle;
}
.opt.pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.opt.pick span {
  display: block;
  width: 100%;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}
.opt.pick.on {
  box-shadow: 0 0 0 2px var(--rose);
  background: #f8e8ea;
}
.cta {
  display: block;
  width: 100%;
  margin-top: 18px;
  margin-bottom: 88px;
  border: 0;
  background: var(--rose);
  color: #fff;
  font-weight: 800;
  font-family: inherit;
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  font-size: 1rem;
}
.me-chips {
  color: var(--rose);
  font-size: 0.92rem;
  margin: 0 0 8px;
}
.season-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 10px;
}
.season-card h3 {
  font-family: Amiri, serif;
  font-size: 1.2rem;
  margin: 0 0 8px;
}
.me-list {
  margin: 6px 0 0;
  padding: 0 18px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}
.hub.compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 4px;
}
.hub button {
  display: block;
  width: 100%;
  text-align: right;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 12px;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink);
}
.hub button.on { box-shadow: 0 0 0 2px var(--rose); background: #f8e8ea; }
.hub button b { display: block; font-size: 1rem; }
.hub button span { color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.heart {
  display: inline-block;
  margin-top: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--rose);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}
.heart.on { background: #f8e8ea; }
.own-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 14px;
}
.own-grid button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--ink);
}
.own-grid button.on {
  background: #f8e8ea;
  box-shadow: 0 0 0 2px var(--rose);
}
.piece-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0;
}
.piece-tabs button {
  flex: 1;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 8px 4px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
}
.cmp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 6px 0 12px;
}
.cmp-color, .cmp-result > div {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
  padding: 0 0 8px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}
.cmp-color.on { box-shadow: 0 0 0 2px var(--rose); background: #f8e8ea; }
.cmp-pic { display: block; background: #cfc3b3; }
.cmp-pic .garment-photo {
  width: 100%;
  height: 92px;
  object-fit: cover;
  object-position: center 18%;
}
.cmp-color b, .cmp-result b { display: block; font-size: 0.78rem; margin-top: 6px; }
.cmp-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.cmp-result > div { cursor: default; }
.wrap-shot { margin-top: 14px; }
.wrap-cap { display: block; margin-bottom: 8px; font-size: 1.05rem; }
.wrap-photo { display: block; width: 100%; border-radius: 16px; margin: 0 0 10px; background: #efe8df; }

.tryon-card { margin-top: 14px; }
.tryon-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: #2a2420;
  margin: 0 0 10px;
}
.tryon-stage video,
.tryon-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.tryon-stage canvas { pointer-events: none; }
.tryon-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  color: #f5efe8;
  z-index: 2;
}
.tryon-empty p { margin: 0; font-size: 0.92rem; opacity: 0.9; line-height: 1.45; }
.tryon-empty[hidden] { display: none; }
.tryon-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}
.tryon-tools button {
  flex: 1 1 auto;
  min-width: 72px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 10px 8px;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.tryon-tools button.on {
  border-color: var(--rose);
  background: color-mix(in srgb, var(--rose) 12%, #fff);
  color: var(--rose);
}
.tryon-frames {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 8px 0 4px;
}
.tryon-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 8px 4px;
  font: inherit;
  cursor: pointer;
}
.tryon-frame img {
  width: 100%;
  height: 36px;
  object-fit: contain;
  background: #f7f2ec;
  border-radius: 6px;
}
.tryon-frame b { font-size: 0.72rem; line-height: 1.2; text-align: center; }
.tryon-frame.on {
  border-color: var(--rose);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rose) 25%, transparent);
}
.tryon-fit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.tryon-fit button {
  border: 1px solid var(--line);
  background: #f7f2ec;
  border-radius: 10px;
  padding: 8px 4px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.tryon-live .cta,
.tryon-live .opt { margin-top: 8px; }

.buy-card .cmp-pic .garment-photo { height: 140px; object-fit: contain; }
.verdict.no { border-color: #e6c9ce; background: #f8e8ea; }
.verdict.careful { border-color: #e6d3a8; }

@media (min-width: 720px) {
  body { width: min(560px, 100%); margin: 0 auto; }
  .drop-full img { height: 320px; }
}