* { box-sizing: border-box; }

:root {
  color-scheme: light;
  --ink: var(--gl-ink, #050505);
  --paper: var(--gl-paper, #fbf7ef);
  --paper-2: var(--gl-paper-2, #f1eadf);
  --muted: var(--gl-muted, #756c62);
  --sage: #49675d;
  --sage-soft: #e4eee9;
  --coral: var(--gl-coral, #ff4b36);
  --blue: var(--gl-blue, #147cff);
  --green: var(--gl-green, #20a366);
  --nav-height: 76px;
  --safe-top: max(16px, env(safe-area-inset-top));
  --safe-bottom: max(10px, env(safe-area-inset-bottom));
  font-family: var(--gl-font-ui, "Outfit", Arial, sans-serif);
  font-synthesis: none;
  letter-spacing: 0;
}

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #dfddd8;
}

body {
  min-height: 100svh;
  color: var(--ink);
  font-family: var(--gl-font-ui, "Outfit", Arial, sans-serif);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea, select { font: inherit; letter-spacing: 0; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
img { max-width: 100%; }
[hidden] { display: none !important; }

.v2-shell {
  position: relative;
  width: min(100%, 480px);
  height: 100svh;
  min-height: 620px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}

.v2-main, .app-view { width: 100%; height: 100%; }
.app-view { position: absolute; inset: 0; overflow: hidden; }
.app-view[hidden] { display: none; }

.bottom-nav {
  position: absolute;
  z-index: 60;
  right: 12px;
  bottom: var(--safe-bottom);
  left: 12px;
  height: 66px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  padding: 5px 4px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  background: rgba(5,5,5,.88);
  box-shadow: 0 14px 36px rgba(0,0,0,.2);
  backdrop-filter: blur(18px);
  transition: color .2s ease, background .2s ease;
}

.bottom-nav.on-light {
  border-color: rgba(5,5,5,.11);
  background: rgba(251,247,239,.94);
  box-shadow: 0 10px 28px rgba(5,5,5,.09);
}

.nav-item {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border-radius: 20px;
  color: rgba(255,255,255,.48);
  background: transparent;
  font-size: 9px;
  font-weight: 500;
}

.bottom-nav.on-light .nav-item { color: #8a857d; }
.nav-item.is-active { color: white; }
.bottom-nav.on-light .nav-item.is-active { color: var(--ink); }
.nav-item.is-active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.nav-item svg { width: 19px; height: 19px; stroke-width: 1.7; }
.nav-icon-wrap { position: relative; display: grid; place-items: center; }
.nav-badge {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  color: white;
  background: var(--coral);
  font-size: 8px;
  font-weight: 700;
}

/* Looks */
.looks-view { background: #181818; }
.look-stage { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: pan-y; }
.look-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: white;
  background: #252525;
  transform: translate3d(0,0,0) rotate(0);
  transform-origin: 50% 88%;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
  will-change: transform, opacity;
}
.look-card.is-dragging { transition: none; }
.look-card.is-leaving-left { transform: translate3d(-115%, 0, 0) rotate(-8deg); opacity: .2; }
.look-card.is-leaving-right { transform: translate3d(115%, 0, 0) rotate(8deg); opacity: .2; }
.look-visual { position: absolute; inset: 0; overflow: hidden; background: #282828; }
.look-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 51%, rgba(0,0,0,.86) 100%);
  pointer-events: none;
}
.look-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 22%;
  user-select: none;
  -webkit-user-drag: none;
}
.look-visual.triptych {
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.look-visual.triptych-left { background-position: left center; }
.look-visual.triptych-center { background-position: center center; }
.look-visual.triptych-right { background-position: right center; }
.look-visual.triptych .look-photo { display: none; }

.look-header {
  position: absolute;
  z-index: 8;
  top: var(--safe-top);
  right: 20px;
  left: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}
.brand-white { width: 139px; height: auto; display: block; }
.look-new-count {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 49px;
  margin-left: -139px;
  padding: 0 12px;
  border-radius: 999px;
  color: #252525;
  background: rgba(255,255,255,.92);
  font-size: 10px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  pointer-events: auto;
}
.look-new-count::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.look-new-count.is-store-context { max-width: min(220px, calc(100vw - 72px)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-new-count.is-store-context::before { background: var(--coral); }

.photo-mode-button {
  position: absolute;
  z-index: 8;
  right: 20px;
  bottom: 294px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 999px;
  color: #1a1a1a;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  font-size: 11px;
  font-weight: 500;
}
.photo-mode-button svg { width: 17px; height: 17px; }

.look-copy {
  position: absolute;
  z-index: 7;
  right: 20px;
  bottom: 151px;
  left: 20px;
}
.store-line {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.28);
  color: white;
  background: transparent;
  text-align: left;
}
.store-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: white;
  font-size: 11px;
  font-weight: 600;
}
.store-copy { min-width: 0; }
.store-copy small { display: block; color: rgba(255,255,255,.68); font-size: 9px; }
.store-copy strong { display: block; overflow: hidden; margin-top: 1px; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.store-open { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 500; }
.store-open svg { width: 14px; height: 14px; }
.look-title-row { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px; padding-top: 13px; }
.look-title { min-width: 0; margin: 0; font-size: clamp(24px, 7.2vw, 32px); font-weight: 300; line-height: 1; }
.look-price { margin-bottom: 2px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.look-meta { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; color: rgba(255,255,255,.7); font-size: 9px; }
.look-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--green); }

.look-actions {
  position: absolute;
  z-index: 8;
  right: 20px;
  bottom: 84px;
  left: 20px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 52px;
  gap: 9px;
}
.look-actions.is-generic { grid-template-rows: 48px 54px; }
.look-actions.is-generic .hybrid-preview-button { grid-column: 1 / -1; }
.look-card.is-generic .look-copy { bottom: 207px; }
.hybrid-preview-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  color: white;
  background: rgba(5,5,5,.62);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  backdrop-filter: blur(12px);
}
.hybrid-preview-button svg { width: 20px; height: 20px; }
.buy-button {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  color: #151515;
  background: white;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
}
.buy-button svg { width: 19px; height: 19px; stroke-width: 1.6; }
.save-button {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
  color: white;
  background: rgba(10,10,10,.28);
  backdrop-filter: blur(12px);
}
.save-button.is-saved { color: white; background: var(--coral); border-color: var(--coral); }
.save-button svg { width: 20px; height: 20px; }

.swipe-stamp {
  position: absolute;
  z-index: 10;
  top: 128px;
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 14px;
  border: 3px solid currentColor;
  border-radius: 8px;
  opacity: 0;
  font-size: 16px;
  font-weight: 700;
  transform: rotate(-8deg);
  pointer-events: none;
}
.swipe-stamp.like { left: 28px; color: #7ff2b2; }
.swipe-stamp.pass { right: 28px; color: #ff7a69; transform: rotate(8deg); }
.swipe-hint {
  position: absolute;
  z-index: 9;
  top: 49%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  opacity: 0;
  color: white;
  background: rgba(5,5,5,.55);
  transition: opacity .18s ease;
  pointer-events: none;
}
.swipe-hint.left { left: 12px; }
.swipe-hint.right { right: 12px; }
.look-card.is-first .swipe-hint { animation: hint-in 2.8s ease 1.2s 1 both; }
@keyframes hint-in { 0%,100%{opacity:0} 22%,70%{opacity:.72} }

/* Shared light views */
.light-view { color: var(--ink); background: var(--paper); }
.light-header {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  left: 0;
  height: calc(64px + env(safe-area-inset-top));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--safe-top) 20px 10px;
  border-bottom: 1px solid rgba(5,5,5,.09);
  background: rgba(251,247,239,.94);
  backdrop-filter: blur(16px);
}
.brand-black { width: 118px; display: block; }
.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(5,5,5,.12);
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
}
.icon-button svg { width: 18px; height: 18px; stroke-width: 1.7; }
.view-scroll {
  position: absolute;
  top: calc(64px + env(safe-area-inset-top));
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.view-scroll::-webkit-scrollbar { display: none; }
.section-content, .search-content { min-height: 100%; padding: 30px 20px calc(var(--nav-height) + 34px + env(safe-area-inset-bottom)); }
.section-eyebrow { margin: 0 0 8px; color: var(--sage); font-size: 10px; font-weight: 600; text-transform: uppercase; }
.section-title { margin: 0; font-size: 34px; font-weight: 300; line-height: 1.02; }
.section-lead { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Search */
.discovery-switch { height: 45px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px; margin: 0 0 26px; padding: 3px; border: 1px solid rgba(5,5,5,.1); border-radius: 8px; background: #eee8de; }
.discovery-switch-item { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 5px; color: #7a746c; background: transparent; font-size: 11px; font-weight: 500; }
.discovery-switch-item.is-active { color: var(--ink); background: white; box-shadow: 0 3px 12px rgba(5,5,5,.07); }
.discovery-switch-item svg { width: 15px; height: 15px; }
.search-hero { padding: 2px 0 22px; }
.search-title { max-width: 340px; margin: 0; font-size: clamp(34px, 10vw, 46px); font-weight: 300; line-height: .98; }
.search-composer {
  margin-top: 24px;
  padding: 14px;
  border: 1px solid rgba(5,5,5,.15);
  border-radius: 8px;
  background: white;
  box-shadow: 0 12px 32px rgba(5,5,5,.05);
}
.search-input {
  width: 100%;
  min-height: 74px;
  resize: none;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
}
.search-input::placeholder { color: #9d978e; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.composer-tools { display: flex; gap: 7px; }
.composer-tool {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #655f57;
  background: var(--paper-2);
}
.composer-tool svg { width: 17px; height: 17px; }
.search-submit {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 999px;
  color: white;
  background: var(--ink);
  font-size: 12px;
  font-weight: 500;
}
.search-submit:disabled { color: #8b867e; background: #ddd8cf; }
.search-submit svg { width: 16px; height: 16px; }
.reference-ready { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; color: var(--sage); font-size: 10px; }
.reference-ready svg { width: 15px; height: 15px; }
.search-examples { margin-top: 22px; }
.search-examples > span { display: block; margin-bottom: 9px; color: #817b72; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.search-chip, .profile-chip {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(5,5,5,.13);
  border-radius: 999px;
  color: #3c3935;
  background: transparent;
  font-size: 10px;
}
.search-chip:active, .search-chip.is-selected { color: white; border-color: var(--sage); background: var(--sage); }
.privacy-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 25px; color: #777169; font-size: 9px; line-height: 1.45; }
.privacy-note svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--sage); }

.search-confirm { padding-top: 2px; }
.request-summary { margin: 16px -20px 26px; padding: 22px 20px; color: white; background: var(--ink); }
.request-summary small { color: rgba(255,255,255,.58); font-size: 9px; text-transform: uppercase; }
.request-summary h2 { margin: 7px 0 0; font-size: 27px; font-weight: 300; line-height: 1.08; }
.field-stack { display: grid; gap: 17px; }
.field { display: grid; gap: 7px; }
.field > span { color: #777169; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.field input, .field select {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1px solid rgba(5,5,5,.14);
  border-radius: 6px;
  color: var(--ink);
  background: white;
  font-size: 13px;
}
.size-options { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
.size-option { height: 42px; border: 1px solid rgba(5,5,5,.14); border-radius: 6px; color: var(--ink); background: transparent; font-size: 11px; }
.size-option.is-selected { color: white; border-color: var(--sage); background: var(--sage); }
.wide-primary, .wide-secondary {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.wide-primary { color: white; background: var(--ink); }
.wide-secondary { margin-top: 9px; border: 1px solid rgba(5,5,5,.16); color: var(--ink); background: transparent; }
.wide-primary svg, .wide-secondary svg { width: 17px; height: 17px; }

.searching-state { min-height: calc(100svh - 180px); display: grid; place-items: center; align-content: center; text-align: center; }
.searching-icon { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--sage); box-shadow: 0 18px 45px rgba(73,103,93,.25); animation: search-pulse 1.2s ease-in-out infinite; }
.searching-icon svg { width: 27px; height: 27px; }
@keyframes search-pulse { 50% { transform: scale(1.05); } }
.searching-state h2 { max-width: 310px; margin: 22px 0 0; font-size: 28px; font-weight: 300; line-height: 1.08; }
.searching-state p { max-width: 285px; margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.results-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.results-header h1 { margin: 0; font-size: 34px; font-weight: 300; line-height: 1; }
.results-header b { color: var(--sage); font-size: 11px; }
.results-copy { margin: 10px 0 20px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 9px; }
.result-card { min-width: 0; overflow: hidden; padding: 0; border: 1px solid rgba(5,5,5,.12); border-radius: 8px; color: var(--ink); background: white; text-align: left; }
.result-card img { width: 100%; aspect-ratio: .66; display: block; object-fit: cover; object-position: center 16%; }
.result-info { min-width: 0; padding: 10px; }
.result-info small { display: block; overflow: hidden; color: #7e786f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.result-info strong { display: -webkit-box; min-height: 31px; margin-top: 4px; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.1; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.result-price { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 8px; font-size: 10px; }
.match-score { color: var(--sage); font-weight: 600; }
.new-search-button { width: 100%; min-height: 46px; margin-top: 22px; border: 1px solid rgba(5,5,5,.14); border-radius: 999px; color: var(--ink); background: transparent; font-size: 12px; }

/* Store discovery */
.store-directory-head { margin-bottom: 20px; }
.store-directory-head h1 { max-width: 350px; margin: 0; font-size: 36px; font-weight: 300; line-height: 1; }
.store-directory-head > p:last-child { max-width: 360px; margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.store-directory-search { height: 49px; display: grid; grid-template-columns: 22px minmax(0,1fr) 32px; align-items: center; gap: 8px; padding: 0 8px 0 13px; border: 1px solid rgba(5,5,5,.14); border-radius: 8px; background: white; box-shadow: 0 10px 28px rgba(5,5,5,.04); }
.store-directory-search > svg { width: 18px; height: 18px; color: var(--sage); }
.store-directory-search input { min-width: 0; height: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.store-directory-search input::placeholder { color: #99928a; }
.store-directory-search button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #736d65; background: var(--paper-2); }
.store-directory-search button svg { width: 14px; height: 14px; }
.store-filter-row { display: flex; gap: 6px; margin: 13px -20px 21px; overflow-x: auto; padding: 0 20px 3px; scrollbar-width: none; }
.store-filter-row::-webkit-scrollbar { display: none; }
.store-filter { min-width: max-content; height: 33px; padding: 0 12px; border: 1px solid rgba(5,5,5,.12); border-radius: 999px; color: #625d56; background: transparent; font-size: 9px; }
.store-filter.is-active { color: white; border-color: var(--ink); background: var(--ink); }
.store-featured { padding-bottom: 25px; border-bottom: 1px solid rgba(5,5,5,.12); }
.store-featured-visual { position: relative; width: 100%; aspect-ratio: 1.62; overflow: hidden; padding: 0; border-radius: 8px; background: #d8d4cd; }
.store-featured-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,.04), rgba(5,5,5,.48)); }
.store-featured-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 28%; }
.store-featured-visual > span { position: absolute; z-index: 2; bottom: 12px; left: 12px; min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.92); font-size: 8px; font-weight: 600; }
.store-featured-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 13px; }
.store-featured-copy div { min-width: 0; }
.store-featured-copy small { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.store-featured-copy h2 { display: flex; align-items: center; gap: 5px; margin: 3px 0 0; font-size: 24px; font-weight: 400; line-height: 1; }
.store-featured-copy h2 svg { width: 15px; height: 15px; color: var(--blue); }
.store-featured-copy > strong { color: var(--sage); font-size: 23px; font-weight: 500; }
.store-reason-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.store-reason-row span { min-height: 25px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; color: #486158; background: var(--sage-soft); font-size: 8px; }
.store-open-profile { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding: 0 15px; border: 1px solid rgba(5,5,5,.14); border-radius: 999px; color: var(--ink); background: transparent; font-size: 10px; font-weight: 500; }
.store-open-profile svg { width: 15px; height: 15px; }
.store-directory-section { margin-top: 25px; }
.store-directory-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.store-directory-title h2 { margin: 0; font-size: 15px; font-weight: 500; }
.store-directory-title span { color: var(--muted); font-size: 9px; }
.store-directory-list { border-top: 1px solid rgba(5,5,5,.11); }
.store-directory-row { width: 100%; min-width: 0; min-height: 92px; display: grid; grid-template-columns: 66px minmax(0,1fr) 62px; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid rgba(5,5,5,.11); color: var(--ink); background: transparent; text-align: left; }
.store-directory-row > img { width: 66px; height: 72px; object-fit: cover; object-position: center 24%; border-radius: 6px; background: #d8d4cd; }
.store-directory-copy { min-width: 0; }
.store-directory-copy > small { display: block; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.store-directory-copy > strong { display: flex; align-items: center; gap: 4px; overflow: hidden; margin-top: 3px; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.store-directory-copy > strong svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--blue); }
.store-directory-copy > em { display: -webkit-box; margin-top: 5px; overflow: hidden; color: #6f6961; font-size: 8px; font-style: normal; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.store-directory-score { min-width: 0; display: grid; justify-items: end; gap: 2px; }
.store-directory-score b { color: var(--sage); font-size: 14px; }
.store-directory-score small { max-width: 62px; overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.store-directory-score svg { width: 14px; height: 14px; margin-top: 6px; color: #8c867e; }
.store-empty { display: grid; justify-items: center; padding: 56px 20px; text-align: center; }
.store-empty > svg { width: 30px; height: 30px; color: var(--sage); }
.store-empty h2 { margin: 15px 0 0; font-size: 23px; font-weight: 300; }
.store-empty p { max-width: 280px; margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.store-empty button { min-height: 40px; margin-top: 16px; padding: 0 15px; border-radius: 999px; color: white; background: var(--ink); font-size: 10px; }
.store-permissions-link { width: 100%; min-height: 54px; display: grid; grid-template-columns: 28px minmax(0,1fr) 18px; align-items: center; gap: 8px; margin-top: 24px; padding: 0; border-top: 1px solid rgba(5,5,5,.11); border-bottom: 1px solid rgba(5,5,5,.11); color: var(--ink); background: transparent; text-align: left; font-size: 10px; }
.store-permissions-link svg { width: 15px; height: 15px; color: var(--sage); }
.store-permissions-link svg:last-child { color: #8b857c; }

/* Orders */
.order-feature { margin: 22px -20px 0; padding: 22px 20px; color: white; background: var(--ink); }
.order-feature-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.order-feature-head small { color: rgba(255,255,255,.55); font-size: 9px; text-transform: uppercase; }
.order-status-pill { min-height: 27px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 999px; color: #17352a; background: #b9f0d1; font-size: 8px; font-weight: 600; }
.order-feature h2 { margin: 15px 0 0; font-size: 27px; font-weight: 300; }
.order-product { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 11px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); }
.order-product img { width: 64px; height: 78px; object-fit: cover; object-position: center top; border-radius: 6px; }
.order-product div { min-width: 0; }
.order-product small { color: rgba(255,255,255,.55); font-size: 8px; }
.order-product strong { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; }
.order-product b { font-size: 12px; }
.order-timeline { display: grid; gap: 0; margin-top: 22px; }
.order-step { position: relative; min-height: 52px; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 8px; align-items: start; color: rgba(255,255,255,.56); font-size: 10px; }
.order-step::after { content: ""; position: absolute; top: 14px; bottom: -4px; left: 6px; width: 1px; background: rgba(255,255,255,.2); }
.order-step:last-child::after { display: none; }
.order-dot { position: relative; z-index: 1; width: 13px; height: 13px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.35); border-radius: 50%; background: var(--ink); }
.order-step.is-done, .order-step.is-current { color: white; }
.order-step.is-done .order-dot { border-color: #79dca7; background: #79dca7; }
.order-step.is-current .order-dot { border-color: white; }
.order-step strong { display: block; font-size: 11px; font-weight: 500; }
.order-step small { display: block; margin-top: 2px; color: inherit; font-size: 8px; }
.order-step time { font-size: 8px; }
.track-button { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; border-radius: 999px; color: var(--ink); background: white; font-size: 11px; font-weight: 500; }
.track-button svg { width: 16px; height: 16px; }
.subsection-title { margin: 27px 0 11px; font-size: 15px; font-weight: 500; }
.order-list { display: grid; border-top: 1px solid rgba(5,5,5,.11); }
.order-row { min-height: 78px; display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid rgba(5,5,5,.11); color: var(--ink); background: transparent; text-align: left; }
.order-row img { width: 50px; height: 58px; object-fit: cover; border-radius: 5px; }
.order-row > span { min-width: 0; }
.order-row small { display: block; color: var(--muted); font-size: 8px; }
.order-row strong { display: block; overflow: hidden; margin-top: 2px; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.order-row em { display: block; margin-top: 3px; color: var(--sage); font-size: 9px; font-style: normal; }
.order-row svg { width: 17px; height: 17px; color: #777169; }

/* Profile */
.profile-hero { display: grid; grid-template-columns: 86px minmax(0,1fr); gap: 15px; align-items: center; padding-bottom: 25px; border-bottom: 1px solid rgba(5,5,5,.11); }
.profile-avatar { position: relative; width: 86px; height: 106px; overflow: hidden; border-radius: 8px; background: #d8d5cf; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.profile-avatar button { position: absolute; right: 5px; bottom: 5px; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(5,5,5,.78); }
.profile-avatar button svg { width: 14px; height: 14px; }
.profile-intro { min-width: 0; }
.profile-intro small { color: var(--sage); font-size: 9px; font-weight: 600; text-transform: uppercase; }
.profile-intro h1 { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 29px; font-weight: 300; line-height: 1; }
.profile-intro p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.profile-progress { margin: 18px 0 0; }
.progress-copy { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 9px; }
.progress-copy b { color: var(--ink); font-size: 10px; }
.progress-track { height: 3px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: #ded8cf; }
.progress-track span { display: block; width: var(--profile-progress, 58%); height: 100%; background: var(--sage); }
.profile-section { margin-top: 28px; }
.profile-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.profile-section-head h2 { margin: 0; font-size: 14px; font-weight: 500; }
.text-action { padding: 0; color: var(--sage); background: transparent; font-size: 10px; }
.saved-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 88px; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.saved-strip::-webkit-scrollbar { display: none; }
.saved-thumb { position: relative; width: 88px; height: 116px; overflow: hidden; border-radius: 7px; background: #ddd; }
.saved-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.saved-thumb span { position: absolute; right: 5px; bottom: 5px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(5,5,5,.72); }
.saved-thumb svg { width: 12px; height: 12px; }
.generated-look-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 124px; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.generated-look-strip::-webkit-scrollbar { display: none; }
.generated-look-card { position: relative; width: 124px; aspect-ratio: 3 / 4; overflow: hidden; border: 0; border-radius: 7px; padding: 0; background: #ddd; color: white; text-align: left; }
.generated-look-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.generated-look-card::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.82)); }
.generated-look-card span { position: absolute; z-index: 1; left: 9px; right: 9px; bottom: 9px; min-width: 0; }
.generated-look-card small, .generated-look-card strong { display: block; }
.generated-look-card small { margin-bottom: 3px; color: rgba(255,255,255,.72); font-size: 8px; font-weight: 700; letter-spacing: .8px; }
.generated-look-card strong { overflow: hidden; font-size: 11px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.generated-look-empty { width: 100%; min-height: 72px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; align-items: center; gap: 10px; background: #fff; text-align: left; }
.generated-look-empty > svg:first-child { width: 20px; height: 20px; }
.generated-look-empty > svg:last-child { width: 16px; height: 16px; }
.generated-look-empty strong, .generated-look-empty small { display: block; }
.generated-look-empty strong { font-size: 13px; font-weight: 600; }
.generated-look-empty small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.profile-list { border-top: 1px solid rgba(5,5,5,.11); }
.profile-row { width: 100%; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(5,5,5,.11); color: var(--ink); background: transparent; text-align: left; }
.profile-row-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--sage); background: var(--sage-soft); }
.profile-row-icon.coral { color: #a62b1c; background: var(--gl-coral-soft, #ffe1d9); }
.profile-row-icon.blue { color: #0c54a8; background: var(--gl-blue-soft, #dcecff); }
.profile-row-icon svg { width: 15px; height: 15px; }
.profile-row > span:nth-child(2) { min-width: 0; }
.profile-row strong { display: block; font-size: 11px; font-weight: 500; }
.profile-row small { display: block; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-row > svg { width: 16px; height: 16px; color: #8d877e; }
.profile-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-chip.is-active { color: white; border-color: var(--sage); background: var(--sage); }
.cloud-status { display: flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--muted); font-size: 9px; }
.cloud-status i { width: 7px; height: 7px; border-radius: 50%; background: #aaa; }
.cloud-status.is-online i { background: var(--green); }

/* Sheets */
.sheet-backdrop { position: fixed; z-index: 100; inset: 0; background: rgba(5,5,5,.54); backdrop-filter: blur(3px); }
.action-sheet {
  position: fixed;
  z-index: 101;
  right: max(0px, calc((100vw - 480px) / 2));
  bottom: 0;
  left: max(0px, calc((100vw - 480px) / 2));
  max-height: min(88svh, 820px);
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 -22px 60px rgba(5,5,5,.22);
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.action-sheet.is-open { transform: translateY(0); }
.sheet-handle { width: 40px; height: 4px; margin: 8px auto 3px; border-radius: 4px; background: #c5c0b8; }
.sheet-content { max-height: calc(min(88svh, 820px) - 15px); overflow-y: auto; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); scrollbar-width: none; }
.sheet-content::-webkit-scrollbar { display: none; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sheet-head h2 { margin: 0; font-size: 29px; font-weight: 300; line-height: 1; }
.sheet-head p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.sheet-close { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: #efebe4; }
.sheet-close svg { width: 18px; height: 18px; }
.sheet-product { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 12px; align-items: center; margin-top: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(5,5,5,.12); }
.sheet-product img { width: 76px; height: 96px; object-fit: cover; object-position: center top; border-radius: 7px; }
.sheet-product small { display: block; color: var(--muted); font-size: 8px; }
.sheet-product h3 { margin: 3px 0 0; font-size: 19px; font-weight: 400; line-height: 1.05; }
.sheet-product b { display: block; margin-top: 5px; font-size: 12px; }
.checkout-list { margin-top: 6px; }
.checkout-row { min-height: 64px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid rgba(5,5,5,.1); }
.checkout-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--sage); background: var(--sage-soft); }
.checkout-icon svg { width: 15px; height: 15px; }
.checkout-row strong { display: block; font-size: 11px; font-weight: 500; }
.checkout-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }
.checkout-row button { color: var(--sage); background: transparent; font-size: 9px; }
.checkout-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 0; font-size: 12px; }
.checkout-total strong { font-size: 18px; font-weight: 500; }
.fit-warning { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border-radius: 7px; color: #4f4a43; background: #ebe8df; font-size: 9px; line-height: 1.4; }
.fit-warning svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--sage); }
.trial-link { width: 100%; min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; color: var(--sage); background: transparent; font-size: 10px; font-weight: 500; }
.trial-link svg { width: 15px; height: 15px; }
.success-mark { width: 64px; height: 64px; display: grid; place-items: center; margin: 4px 0 18px; border-radius: 50%; color: white; background: var(--green); }
.success-mark svg { width: 28px; height: 28px; }
.success-title { margin: 0; font-size: 31px; font-weight: 300; line-height: 1; }
.success-copy { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.order-number { display: inline-block; margin-top: 16px; padding: 7px 10px; border-radius: 999px; color: #33544a; background: var(--sage-soft); font-size: 9px; font-weight: 600; }
.feedback-options { display: grid; gap: 8px; margin-top: 20px; }
.feedback-option { min-height: 52px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; padding: 0 12px; border: 1px solid rgba(5,5,5,.13); border-radius: 8px; color: var(--ink); background: white; text-align: left; }
.feedback-option span:first-child { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-2); font-size: 14px; }
.feedback-option strong { display: block; font-size: 11px; font-weight: 500; }
.feedback-option small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }

/* Store */
.store-sheet-hero { position: relative; height: 190px; margin: -10px -20px 0; overflow: hidden; background: #ddd; }
.store-sheet-hero img { width: 100%; height: 100%; object-fit: cover; }
.store-sheet-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.54)); }
.store-sheet-close, .store-sheet-share { position: absolute; z-index: 2; top: 12px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(5,5,5,.48); backdrop-filter: blur(12px); }
.store-sheet-close { right: 14px; }
.store-sheet-share { right: 62px; }
.store-sheet-close svg, .store-sheet-share svg { width: 17px; height: 17px; }
.store-sheet-title { position: absolute; z-index: 2; right: 20px; bottom: 18px; left: 20px; color: white; }
.store-sheet-title small { font-size: 9px; text-transform: uppercase; }
.store-sheet-title h2 { display: flex; align-items: center; gap: 7px; margin: 4px 0 0; font-size: 27px; font-weight: 400; }
.store-sheet-title h2 svg { width: 17px; height: 17px; color: #9cc9ff; }
.store-sheet-title > span { display: block; margin-top: 4px; color: rgba(255,255,255,.72); font-size: 9px; }
.store-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0 -20px; border-bottom: 1px solid rgba(5,5,5,.1); }
.store-stat { min-width: 0; padding: 14px 7px; text-align: center; }
.store-stat + .store-stat { border-left: 1px solid rgba(5,5,5,.1); }
.store-stat strong { display: block; font-size: 13px; }
.store-stat small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.store-actions { display: grid; grid-template-columns: minmax(0,1fr) repeat(3,48px); gap: 7px; margin-top: 16px; }
.store-follow { border-radius: 999px; color: white; background: var(--ink); font-size: 11px; font-weight: 500; }
.store-follow.is-active { color: #264b3f; background: var(--sage-soft); }
.store-action-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(5,5,5,.13); border-radius: 50%; color: var(--ink); background: transparent; }
.store-action-icon.is-active { color: #a62b1c; border-color: #ffc9bd; background: var(--gl-coral-soft, #ffe1d9); }
.store-action-icon svg { width: 17px; height: 17px; }
.store-affinity-band { margin: 17px -20px 0; padding: 17px 20px; background: #e7eee9; }
.store-affinity-band > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.store-affinity-band small { color: #5f756c; font-size: 8px; text-transform: uppercase; }
.store-affinity-band strong { color: #2e5145; font-size: 14px; font-weight: 500; }
.store-profile-section { margin-top: 24px; }
.store-profile-section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.store-profile-section-head small { color: var(--sage); font-size: 8px; text-transform: uppercase; }
.store-profile-section-head h3 { margin: 3px 0 0; font-size: 18px; font-weight: 400; }
.store-profile-section-head > span { color: var(--muted); font-size: 8px; }
.store-product-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 126px; gap: 8px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.store-product-strip::-webkit-scrollbar { display: none; }
.store-product-strip button { min-width: 0; overflow: hidden; padding: 0; border: 1px solid rgba(5,5,5,.11); border-radius: 7px; color: var(--ink); background: white; text-align: left; }
.store-product-strip img { width: 100%; height: 152px; display: block; object-fit: cover; object-position: center 18%; }
.store-product-strip button > span { display: block; padding: 8px; }
.store-product-strip strong { display: block; overflow: hidden; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.store-product-strip small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.store-about { padding-top: 17px; border-top: 1px solid rgba(5,5,5,.11); }
.store-about > small { color: var(--sage); font-size: 8px; text-transform: uppercase; }
.store-about p { margin: 7px 0 0; color: #5f5a53; font-size: 10px; line-height: 1.5; }
.store-about > span { display: flex; align-items: flex-start; gap: 7px; margin-top: 11px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.store-about > span svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--blue); }
.store-looks-cta { margin-top: 21px; }
.store-detail-list { margin-top: 14px; border-top: 1px solid rgba(5,5,5,.1); }
.store-detail { min-height: 54px; display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 9px; align-items: center; border-bottom: 1px solid rgba(5,5,5,.1); }
.store-detail svg { width: 16px; height: 16px; color: var(--sage); }
.store-detail strong { display: block; font-size: 10px; font-weight: 500; }
.store-detail small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }

/* Store permissions */
.permission-list { margin-top: 18px; border-top: 1px solid rgba(5,5,5,.11); }
.permission-toggle-row { width: 100%; min-height: 72px; display: grid; grid-template-columns: 34px minmax(0,1fr) 42px; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(5,5,5,.11); color: var(--ink); background: transparent; text-align: left; }
.permission-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--sage); background: var(--sage-soft); }
.permission-icon.coral { color: #a62b1c; background: var(--gl-coral-soft, #ffe1d9); }
.permission-icon svg { width: 15px; height: 15px; }
.permission-toggle-row > span:nth-child(2) { min-width: 0; }
.permission-toggle-row strong { display: block; font-size: 11px; font-weight: 500; }
.permission-toggle-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.permission-toggle { position: relative; width: 40px; height: 23px; border-radius: 999px; background: #d2ccc3; }
.permission-toggle b { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: white; box-shadow: 0 2px 7px rgba(5,5,5,.18); transition: transform .2s ease; }
.permission-toggle.is-on { background: var(--sage); }
.permission-toggle.is-on b { transform: translateX(17px); }
.permission-section { margin-top: 24px; }
.permission-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.permission-section-head h3 { margin: 0; font-size: 13px; font-weight: 500; }
.permission-section-head span { color: var(--muted); font-size: 8px; }
.permission-segments { height: 40px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; padding: 3px; border-radius: 7px; background: #eae4da; }
.permission-segments button { min-width: 0; border-radius: 4px; color: #726c64; background: transparent; font-size: 9px; }
.permission-segments button.is-active { color: var(--ink); background: white; box-shadow: 0 2px 8px rgba(5,5,5,.07); }
.permission-store-list { border-top: 1px solid rgba(5,5,5,.11); }
.permission-store-row { min-height: 61px; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid rgba(5,5,5,.11); }
.permission-store-row > img { width: 40px; height: 44px; object-fit: cover; border-radius: 5px; }
.permission-store-row > button:nth-child(2) { min-width: 0; padding: 0; color: var(--ink); background: transparent; text-align: left; }
.permission-store-row strong, .permission-store-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.permission-store-row strong { font-size: 10px; font-weight: 500; }
.permission-store-row small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.permission-store-row > button:last-child { min-height: 30px; padding: 0 9px; border: 1px solid rgba(5,5,5,.12); border-radius: 999px; color: #5f5952; background: transparent; font-size: 8px; }
.permission-empty { margin: 0; padding: 13px 0; border-top: 1px solid rgba(5,5,5,.11); border-bottom: 1px solid rgba(5,5,5,.11); color: var(--muted); font-size: 9px; line-height: 1.45; }
.permission-privacy { display: flex; align-items: flex-start; gap: 8px; margin: 24px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.permission-privacy svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--blue); }

/* Photo viewer */
.photo-viewer { position: fixed; z-index: 120; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; color: white; background: #050505; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.photo-viewer.is-open { opacity: 1; pointer-events: auto; }
.photo-toolbar { min-height: calc(62px + env(safe-area-inset-top)); display: grid; grid-template-columns: 44px 1fr 44px; align-items: end; gap: 10px; padding: var(--safe-top) 16px 8px; }
.photo-toolbar img { width: 110px; align-self: center; justify-self: center; }
.photo-tool, .photo-round { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: white; background: transparent; }
.photo-tool svg, .photo-round svg { width: 18px; height: 18px; }
.photo-canvas { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; }
.photo-canvas img { max-width: none; width: 100%; height: 100%; object-fit: contain; transform: translate3d(0,0,0) scale(var(--photo-scale,1)); transform-origin: center; user-select: none; }
.photo-actions { min-height: calc(84px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 42px minmax(80px,1fr) 42px auto; align-items: start; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.photo-actions input { width: 100%; align-self: center; accent-color: white; }
.photo-save { height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border-radius: 999px; color: var(--ink); background: white; font-size: 10px; font-weight: 500; }
.photo-save svg { width: 15px; height: 15px; }

/* Progressive onboarding */
.onboarding { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; color: var(--ink); background: #dedcd7; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.onboarding.is-open { opacity: 1; pointer-events: auto; }
.onboarding-stage { position: relative; width: min(100%,480px); height: 100svh; min-height: 620px; overflow: hidden; background: var(--paper); }
.onboard-screen { width: 100%; height: 100%; overflow-y: auto; scrollbar-width: none; }
.onboard-screen::-webkit-scrollbar { display: none; }
.onboard-welcome { position: relative; display: flex; align-items: flex-end; overflow: hidden; color: white; background: #151515; }
.onboard-welcome img.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.onboard-welcome::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,5,.15), rgba(5,5,5,.05) 40%, rgba(5,5,5,.9) 100%); }
.welcome-content { position: relative; z-index: 2; width: 100%; padding: 0 22px calc(28px + env(safe-area-inset-bottom)); }
.welcome-content .welcome-logo { width: 148px; margin-bottom: 22px; }
.welcome-content > small { display: block; margin-bottom: 12px; color: rgba(255,255,255,.78); font-size: 11px; font-weight: 700; line-height: 1.3; text-transform: uppercase; }
.welcome-content h1 { max-width: 370px; margin: 0; font-size: clamp(38px, 11vw, 54px); font-weight: 300; line-height: .96; }
.welcome-content p { max-width: 340px; margin: 14px 0 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.45; }
.welcome-actions { display: grid; gap: 9px; margin-top: 24px; }
.onboard-primary, .onboard-secondary { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.onboard-primary { color: var(--ink); background: white; }
.onboard-secondary { border: 1px solid rgba(255,255,255,.32); color: white; background: rgba(5,5,5,.18); backdrop-filter: blur(10px); }
.onboard-primary.dark { color: white; background: var(--ink); }
.onboard-secondary.dark { border-color: rgba(5,5,5,.15); color: var(--ink); background: transparent; }
.onboard-primary svg, .onboard-secondary svg { width: 17px; height: 17px; }

.onboard-standard { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.onboard-header { min-height: calc(66px + env(safe-area-inset-top)); display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; align-items: end; gap: 8px; padding: var(--safe-top) 16px 10px; border-bottom: 1px solid rgba(5,5,5,.09); }
.onboard-back { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--paper-2); }
.onboard-back svg { width: 18px; height: 18px; }
.onboard-step { text-align: center; }
.onboard-step strong { display: block; font-size: 11px; font-weight: 600; }
.onboard-step span { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.onboard-body { overflow-y: auto; padding: 26px 20px 18px; scrollbar-width: none; }
.onboard-body::-webkit-scrollbar { display: none; }
.onboard-body h1 { max-width: 370px; margin: 0; font-size: 34px; font-weight: 300; line-height: 1; }
.onboard-body > p { max-width: 350px; margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.onboard-footer { padding: 10px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(5,5,5,.08); background: var(--paper); }
.onboard-fields { display: grid; gap: 16px; margin-top: 25px; }
.onboard-field { display: grid; gap: 7px; }
.onboard-field > span { color: #766f67; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.onboard-field input, .onboard-field select { width: 100%; height: 48px; padding: 0 13px; border: 1px solid rgba(5,5,5,.14); border-radius: 6px; color: var(--ink); background: white; font-size: 13px; }
.audience-control { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; padding: 4px; border-radius: 8px; background: var(--paper-2); }
.audience-option { min-height: 40px; border-radius: 6px; color: #6f6961; background: transparent; font-size: 10px; }
.audience-option.is-selected { color: var(--ink); background: white; box-shadow: 0 3px 10px rgba(5,5,5,.08); }
.cloud-inline { display: flex; align-items: flex-start; gap: 9px; margin-top: 18px; padding: 12px; border-radius: 7px; color: #655f57; background: #ebe7de; font-size: 9px; line-height: 1.4; }
.cloud-inline svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--sage); }
.account-body { padding-top: 22px; }
.account-fields { gap: 13px; margin-top: 20px; }
.auth-options { display: grid; gap: 11px; margin-top: 20px; }
.google-auth-button { width: 100%; min-height: 54px; display: grid; grid-template-columns: 28px minmax(0,1fr) 20px; align-items: center; gap: 10px; padding: 0 15px; border: 1px solid rgba(5,5,5,.16); border-radius: 999px; color: var(--ink); background: white; box-shadow: 0 8px 22px rgba(5,5,5,.07); }
.google-auth-button:disabled { color: #8b867f; background: #efede8; box-shadow: none; }
.google-auth-button strong { font-size: 12px; font-weight: 500; text-align: center; }
.google-auth-button > svg { width: 16px; height: 16px; }
.google-mark { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(5,5,5,.1); border-radius: 50%; color: #4285f4; background: white; font-family: Arial, sans-serif; font-size: 15px; font-weight: 700; }
.auth-divider { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 9px; color: var(--muted); }
.auth-divider span { height: 1px; background: rgba(5,5,5,.1); }
.auth-divider small { font-size: 8px; }
.email-auth-button { min-height: 42px; border: 1px solid rgba(5,5,5,.14); border-radius: 999px; color: var(--sage); background: transparent; font-size: 10px; font-weight: 500; }
.email-auth-button:disabled { color: #aaa49d; }
.auth-message { margin: 0; padding: 10px 12px; border-radius: 7px; color: #5f5a53; background: #ebe7de; font-size: 9px; line-height: 1.4; }
.auth-connected { display: grid; grid-template-columns: 36px minmax(0,1fr) 22px; align-items: center; gap: 10px; margin-top: 20px; padding: 12px; border: 1px solid rgba(48,126,84,.22); border-radius: 8px; background: #e5eee8; }
.auth-connected .google-mark { width: 36px; height: 36px; }
.auth-connected > span:nth-child(2) { min-width: 0; }
.auth-connected strong, .auth-connected small { display: block; }
.auth-connected strong { font-size: 10px; font-weight: 600; }
.auth-connected small { margin-top: 3px; overflow: hidden; color: #5e675f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.auth-connected > svg { width: 17px; height: 17px; color: var(--green); }
.auth-footer { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #746e66; font-size: 9px; text-align: center; }
.auth-footer svg { width: 15px; height: 15px; color: var(--sage); }

.capture-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 24px; }
.capture-card { position: relative; min-width: 0; aspect-ratio: .68; overflow: hidden; border: 1px solid rgba(5,5,5,.13); border-radius: 8px; color: var(--ink); background: #e9e5de; }
.capture-card img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.capture-card::after { content: ""; position: absolute; inset: auto 0 0; height: 44%; background: linear-gradient(180deg, transparent, rgba(5,5,5,.68)); opacity: 0; }
.capture-card.has-photo::after { opacity: 1; }
.capture-card-icon { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--sage); background: white; transform: translate(-50%,-50%); }
.capture-card-icon svg { width: 17px; height: 17px; }
.capture-card-copy { position: absolute; z-index: 2; right: 7px; bottom: 8px; left: 7px; color: #514b44; text-align: left; }
.capture-card.has-photo .capture-card-copy { color: white; }
.capture-card-copy strong { display: block; overflow-wrap: anywhere; font-size: 9px; font-weight: 600; }
.capture-card-copy span { display: block; margin-top: 2px; font-size: 7px; }
.capture-check { position: absolute; z-index: 3; top: 7px; right: 7px; width: 23px; height: 23px; display: none; place-items: center; border-radius: 50%; color: white; background: var(--green); }
.capture-card.has-photo .capture-check { display: grid; }
.capture-check svg { width: 12px; height: 12px; }
.capture-body { padding-top: 22px; }
.capture-workflow { display: grid; gap: 9px; margin-top: 22px; }
.video-capture-card { width: 100%; min-height: 128px; display: grid; grid-template-columns: 104px minmax(0,1fr) 30px; align-items: center; gap: 12px; padding: 10px; overflow: hidden; border: 1px solid rgba(5,5,5,.13); border-radius: 8px; color: var(--ink); background: #ece8e1; text-align: left; }
.video-capture-card.is-ready { background: #e5ebe6; }
.video-capture-visual { width: 104px; height: 108px; display: grid; place-items: center; align-content: center; gap: 8px; border-radius: 6px; color: white; background: var(--sage); }
.video-capture-visual svg { width: 25px; height: 25px; }
.video-capture-visual b { font-size: 9px; font-weight: 500; }
.video-frame-pair { width: 104px; height: 108px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3px; }
.video-frame-pair > span { position: relative; min-width: 0; overflow: hidden; border-radius: 5px; background: #d4d1cb; }
.video-frame-pair img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }
.video-frame-pair small { position: absolute; right: 3px; bottom: 3px; left: 3px; padding: 3px 2px; border-radius: 3px; color: white; background: rgba(5,5,5,.62); font-size: 6px; text-align: center; text-transform: uppercase; }
.video-capture-copy { min-width: 0; }
.video-capture-copy strong { display: block; font-size: 12px; font-weight: 600; }
.video-capture-copy span { display: block; margin-top: 5px; color: #6a645d; font-size: 8px; line-height: 1.4; }
.video-capture-action { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--sage); background: white; }
.video-capture-action svg { width: 14px; height: 14px; }
.face-capture-row { width: 100%; min-height: 70px; display: grid; grid-template-columns: 48px minmax(0,1fr) 24px; align-items: center; gap: 11px; padding: 10px; border: 1px solid rgba(5,5,5,.13); border-radius: 8px; color: var(--ink); background: white; text-align: left; }
.face-capture-row > img, .face-capture-icon { width: 48px; height: 48px; border-radius: 50%; }
.face-capture-row > img { display: block; object-fit: cover; object-position: center top; }
.face-capture-icon { display: grid; place-items: center; color: var(--sage); background: var(--sage-soft); }
.face-capture-icon svg { width: 20px; height: 20px; }
.face-capture-row > span:nth-child(2) { min-width: 0; }
.face-capture-row strong { display: block; font-size: 10px; font-weight: 600; }
.face-capture-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.face-capture-row > svg { width: 16px; height: 16px; color: var(--sage); }
.demo-capture { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; border: 1px solid rgba(5,5,5,.13); border-radius: 999px; color: var(--sage); background: transparent; font-size: 10px; font-weight: 500; }
.demo-capture svg { width: 15px; height: 15px; }
.capture-advice { display: grid; gap: 8px; margin-top: 21px; }
.advice-row { display: grid; grid-template-columns: 27px minmax(0,1fr); align-items: center; gap: 9px; color: #655f57; font-size: 9px; }
.advice-row i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: var(--sage); background: var(--sage-soft); font-style: normal; font-size: 9px; font-weight: 600; }

.size-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 9px; margin-top: 24px; }
.size-grid .onboard-field:first-child { grid-column: 1 / -1; }
.consent-row { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 9px; align-items: start; margin-top: 20px; color: #635d55; font-size: 9px; line-height: 1.45; }
.consent-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--sage); }

.building-screen { display: grid; place-items: center; align-content: center; padding: 30px 22px; text-align: center; }
.building-visual { position: relative; width: 190px; height: 250px; overflow: hidden; border-radius: 8px; background: #d4d1cb; box-shadow: 0 22px 58px rgba(5,5,5,.16); }
.building-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(.25); }
.building-scan { position: absolute; right: 0; left: 0; height: 2px; background: #8ff0bb; box-shadow: 0 0 18px #8ff0bb; animation: scan-avatar 2s ease-in-out infinite; }
@keyframes scan-avatar { 0%,100% { top: 12%; } 50% { top: 86%; } }
.building-screen h1 { max-width: 340px; margin: 25px 0 0; font-size: 30px; font-weight: 300; line-height: 1; }
.building-screen p { margin: 10px 0 0; color: var(--muted); font-size: 10px; }
.building-progress { width: min(280px,100%); height: 4px; margin-top: 22px; overflow: hidden; border-radius: 4px; background: #ddd8cf; }
.building-progress span { display: block; width: 42%; height: 100%; background: var(--sage); animation: avatar-progress 1.8s ease-in-out infinite; }
@keyframes avatar-progress { 0% { transform: translateX(-105%); } 55% { transform: translateX(92%); } 100% { transform: translateX(245%); } }

.avatar-review { display: grid; grid-template-rows: minmax(0,1fr) auto; color: white; background: #111; }
.avatar-review-visual { position: relative; min-height: 0; overflow: hidden; }
.avatar-review-visual > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.avatar-review-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.38), transparent 30%, rgba(0,0,0,.72)); }
.avatar-review-head { position: absolute; z-index: 2; top: var(--safe-top); right: 20px; left: 20px; }
.avatar-review-head img { width: 134px; }
.avatar-review-copy { position: absolute; z-index: 2; right: 20px; bottom: 20px; left: 20px; }
.avatar-review-copy small { color: #9be6bc; font-size: 9px; font-weight: 600; text-transform: uppercase; }
.avatar-review-copy h1 { max-width: 350px; margin: 6px 0 0; font-size: 35px; font-weight: 300; line-height: .98; }
.avatar-review-copy p { margin: 10px 0 0; color: rgba(255,255,255,.7); font-size: 10px; line-height: 1.45; }
.avatar-review-footer { display: grid; gap: 8px; padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); background: #111; }

.ready-screen { display: grid; grid-template-rows: minmax(0,1fr) auto; color: white; background: #111; }
.ready-collage { position: relative; min-height: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; overflow: hidden; }
.ready-collage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.12) 48%, rgba(0,0,0,.9)); }
.ready-collage img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ready-copy { position: absolute; z-index: 2; right: 20px; bottom: 22px; left: 20px; }
.ready-copy h1 { margin: 0; font-size: 38px; font-weight: 300; line-height: .96; }
.ready-copy p { margin: 10px 0 0; color: rgba(255,255,255,.68); font-size: 10px; }
.ready-footer { padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); background: #111; }

/* Camera */
.camera-dialog { width: min(100%,480px); height: 100svh; max-width: none; max-height: none; margin: auto; padding: 0; border: 0; color: white; background: #050505; }
.camera-dialog::backdrop { background: #050505; }
.camera-shell { position: relative; width: 100%; height: 100%; overflow: hidden; }
.camera-shell video { width: 100%; height: 100%; object-fit: cover; }
.camera-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.48), transparent 24%, transparent 68%, rgba(0,0,0,.7)); pointer-events: none; }
.camera-guide { position: absolute; top: 15%; right: 18%; bottom: 15%; left: 18%; border: 1px solid rgba(255,255,255,.65); border-radius: 48% 48% 23% 23% / 20% 20% 12% 12%; pointer-events: none; }
.camera-guide.face { top: 25%; right: 24%; bottom: 25%; left: 24%; border-radius: 46% 46% 42% 42%; }
.camera-guide.side { transform: scaleX(.7); }
.camera-guide.body-video { top: 13%; right: 17%; bottom: 17%; left: 17%; }
.camera-guide span { position: absolute; top: 50%; right: -9px; width: 18px; height: 1px; background: rgba(255,255,255,.65); }
.camera-header { position: absolute; top: 0; right: 0; left: 0; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: end; gap: 10px; padding: var(--safe-top) 16px 12px; }
.camera-header > div { text-align: center; }
.camera-header strong { display: block; font-size: 12px; }
.camera-header span { display: block; margin-top: 2px; color: rgba(255,255,255,.64); font-size: 8px; }
.camera-icon, .camera-file { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: white; background: rgba(5,5,5,.2); }
.camera-icon svg, .camera-file svg { width: 18px; height: 18px; }
.camera-footer { position: absolute; right: 0; bottom: 0; left: 0; min-height: calc(112px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 52px 84px 52px; justify-content: center; align-items: start; gap: 28px; padding: 13px 16px calc(18px + env(safe-area-inset-bottom)); }
.camera-file { align-self: center; }
.camera-shutter { width: 82px; height: 82px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: rgba(255,255,255,.2); }
.camera-shutter span { width: 66px; height: 66px; border-radius: 50%; background: white; }
.camera-timer { align-self: center; display: grid; place-items: center; gap: 3px; color: white; font-size: 9px; }
.camera-timer svg { width: 20px; height: 20px; }
.camera-countdown { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; color: white; font-size: 90px; font-weight: 600; text-shadow: 0 8px 28px rgba(0,0,0,.35); pointer-events: none; }
.guided-video-coach { position: absolute; z-index: 3; right: 18px; bottom: calc(128px + env(safe-area-inset-bottom)); left: 18px; min-height: 112px; padding: 13px 14px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; color: white; background: rgba(5,5,5,.58); backdrop-filter: blur(12px); }
.guided-video-coach > span { color: #9be6bc; font-size: 8px; font-weight: 600; text-transform: uppercase; }
.guided-video-coach strong { display: block; margin-top: 5px; font-size: 14px; font-weight: 500; line-height: 1.2; }
.guided-video-coach p { margin: 5px 0 0; color: rgba(255,255,255,.68); font-size: 8px; line-height: 1.35; }
.guided-video-progress { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.2); }
.guided-video-progress span { display: block; width: 0; height: 100%; background: #9be6bc; transition: width .25s ease; }
.camera-dialog.is-video .camera-footer { grid-template-columns: 84px; gap: 0; }
.camera-dialog.is-video .camera-timer { display: none; }
.camera-dialog.is-video .camera-shutter span { background: #f4f4f1; }
.camera-dialog.is-recording .camera-shutter { border-color: rgba(255,255,255,.6); }
.camera-dialog.is-recording .camera-shutter span { width: 30px; height: 30px; border-radius: 6px; background: #ef5a55; }
.camera-dialog.is-recording .camera-icon { opacity: .45; pointer-events: none; }

.toast { position: fixed; z-index: 250; bottom: calc(94px + env(safe-area-inset-bottom)); left: 50%; max-width: min(360px, calc(100% - 28px)); min-height: 42px; display: flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; color: white; background: rgba(5,5,5,.92); box-shadow: 0 14px 34px rgba(5,5,5,.22); opacity: 0; transform: translate(-50%,12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; font-size: 10px; text-align: center; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

@media (min-width: 700px) {
  .v2-shell, .onboarding-stage, .camera-dialog { box-shadow: 0 0 0 1px rgba(5,5,5,.08), 0 24px 70px rgba(5,5,5,.16); }
  .photo-viewer { right: calc((100vw - 480px) / 2); left: calc((100vw - 480px) / 2); }
}

@media (max-height: 720px) {
  .look-copy { bottom: 140px; }
  .look-actions { bottom: 78px; }
  .photo-mode-button { bottom: 276px; }
  .look-title { font-size: 24px; }
  .store-line { min-height: 43px; }
  .look-meta { margin-top: 5px; }
  .bottom-nav { height: 62px; }
  .guided-video-coach { bottom: calc(104px + env(safe-area-inset-bottom)); min-height: 96px; padding: 10px 12px; }
  .guided-video-coach strong { font-size: 12px; }
  .camera-footer { min-height: calc(94px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Intelligent capture: camera choice, voice and real-time pose quality */
.camera-shell video.is-selfie { transform: scaleX(-1); }
.camera-dialog.is-video .camera-shell video { object-fit: contain; }
.camera-guide.is-aligned { border-color: #7ff9bd; box-shadow: 0 0 0 2px rgba(127,249,189,.22), 0 0 24px rgba(127,249,189,.18); }
.camera-guide.is-adjusting { border-color: #ffd080; }
.camera-quality-indicator { position: absolute; z-index: 3; top: calc(92px + env(safe-area-inset-top)); left: 16px; right: 16px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.23); border-radius: 10px; color: #fff; background: rgba(24,30,27,.75); font-size: 12px; font-weight: 600; text-align: center; backdrop-filter: blur(10px); }
.camera-quality-indicator[data-status="good"] { border-color: rgba(127,249,189,.6); color: #a3ffcb; }
.camera-quality-indicator[data-status="adjust"] { border-color: rgba(255,208,128,.56); color: #ffe4ac; }
.camera-voice-toggle { position: absolute; z-index: 4; right: 15px; bottom: calc(232px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: 10px 12px; color: white; background: rgba(0,0,0,.55); font-size: 10px; }
.camera-voice-toggle svg { width: 15px; height: 15px; }
.camera-dialog:not(.is-video) .camera-voice-toggle { bottom: calc(134px + env(safe-area-inset-bottom)); }
.face-source-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 8px; }
.face-source-options button { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border: 1px solid rgba(5,5,5,.15); border-radius: 9px; color: var(--ink); background: white; font-size: 11px; font-weight: 600; }
.face-source-options button svg { width: 17px; height: 17px; color: var(--sage); }
.face-source-caption { margin: 2px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.camera-mode-advice { margin: 12px 0 0; border-radius: 8px; padding: 11px 12px; color: #45634d; background: #e5ede6; font-size: 10px; line-height: 1.48; }
.face-capture-row { cursor: default; }
@media(max-height:750px) { .camera-dialog.is-video .camera-voice-toggle { bottom: calc(208px + env(safe-area-inset-bottom)); } }

.camera-voice-toggle[hidden], .camera-quality-indicator[hidden] { display: none !important; }
.camera-guide.is-aligned { transition: border-color .25s ease, box-shadow .25s ease; }

.capture-mode-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.capture-mode-options button { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 9px; border: 1px solid rgba(5,5,5,.13); border-radius: 8px; color: var(--ink); background: #fff; text-align: left; }
.capture-mode-options button svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--sage); }
.capture-mode-options button span { min-width: 0; }
.capture-mode-options button strong, .capture-mode-options button small { display:block; }
.capture-mode-options button strong { font-size: 10px; font-weight: 600; line-height: 1.2; }
.capture-mode-options button small { margin-top: 4px; color:var(--muted); font-size: 8px; line-height: 1.35; }

/* Clean production experience: no fabricated product card or personal avatar. */
.look-empty-state { width:100%; height:100%; min-height:calc(100svh - 75px); display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:25px; padding:calc(34px + env(safe-area-inset-top)) 24px calc(50px + env(safe-area-inset-bottom)); color:#fff; background:radial-gradient(circle at 65% 28%,#334b41 0%,#13251e 47%,#090e0c 100%); }
.look-empty-logo { display:block; width:min(130px,42%); height:auto; }
.look-empty-copy { width:100%; max-width:380px; }
.look-empty-copy > span { display:block; margin-bottom:12px; font-size:10px; font-weight:700; letter-spacing:.17em; color:#a5d4b6; }
.look-empty-copy h1 { margin:0; font-size:clamp(32px,8vw,50px); font-weight:300; letter-spacing:-.04em; line-height:1.04; }
.look-empty-copy p { margin:13px 0 24px; max-width:345px; font-size:12px; color:#c4d3c9; line-height:1.55; }
.look-empty-copy button { min-height:50px; width:100%; border:1px solid #fff; border-radius:999px; padding:12px 17px; color:#0b2017; background:#fff; font-size:13px; font-weight:600; cursor:pointer; }
.look-empty-copy button svg { display:inline-block; width:15px; height:15px; margin-left:5px; vertical-align:middle; }
.look-empty-copy button.look-empty-secondary { margin-top:10px; border-color:rgba(255,255,255,.35); color:#fff; background:transparent; }
.profile-avatar-placeholder { display:grid; place-items:center; height:100%; width:100%; background:linear-gradient(140deg,#b4c9bd,#e8eee9); color:#315847; }
.profile-avatar-placeholder svg { width:33px; height:33px; }
.saved-strip:has(> .section-lead) { display:block; }
.saved-strip > .section-lead { padding:12px 0; }