:root {
  --bg: #08110d;
  --ink: #e8fff4;
  --muted: #8aae9a;
  --card: #101a16;
  --line: #244036;
  --accent: #3dff9a;
  --bad: #ff4d6d;
  --spot: #163528;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.mark { width: 28px; height: 28px; display: block; }
.emeralds {
  color: var(--accent);
  letter-spacing: 0.06em;
}
.profile-wrap { position: relative; }
.account-btn.is-profile {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0;
}
.profile-drop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 196px;
  padding: 8px;
  background: #12161c;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  z-index: 30;
}
.profile-drop a,
.profile-drop button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.profile-drop a:hover,
.profile-drop button:hover { background: var(--spot); }
.face-glam,
.face-spicy {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}
.modes {
  display: flex;
  gap: 6px;
  margin-left: 8px;
}
.nav-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Inline custom pictogram (px-* sprite symbol) used in place of an emoji in a label. */
.pic { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.22em; flex: none; }
.choice .pic { width: 1.25em; height: 1.25em; vertical-align: -0.26em; }
.modes button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
  font: inherit;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.modes button:hover { color: var(--ink); border-color: rgba(61, 255, 154, 0.6); }
.modes button:active { transform: translateY(1px); }
.modes button.on {
  color: #04140c;
  background: linear-gradient(135deg, #e7fff1, #3dff9a);
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(61, 255, 154, 0.32);
}
.modes button.on:hover { color: #04140c; }
.status {
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 0.8rem;
}
.corner-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.corner-btn[hidden] { display: none !important; }
.corner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #07140f;
  color: #cfeede;
  text-decoration: none;
  font: 600 0.82rem/1 inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
/* Log in / out — deliberately quieter than Generator so the hero stays the hero. */
.corner-btn.is-main {
  background: #04140c;
  color: var(--accent);
  border-color: rgba(61, 255, 154, 0.6);
  font-weight: 700;
}
.corner-btn:hover { border-color: #3dff9a; color: #3dff9a; background: rgba(61, 255, 154, 0.08); }
.corner-btn:active { transform: translateY(1px); }
.corner-btn.is-main:hover { background: var(--accent); color: #04140c; border-color: var(--accent); }
/* Emerald balance chip — links to /plans, same gem pill as the rest of the site */
.emerald-pill { gap: 6px; padding: 8px 12px; text-transform: none; }
.emerald-pill .gem-ico {
  width: 15px; height: 15px; flex: none;
  fill: rgba(61, 255, 154, 0.3); stroke: #3dff9a; stroke-width: 1.6; stroke-linejoin: round;
}
.emerald-pill b { font: 800 0.8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #3dff9a; letter-spacing: 0.02em; }
.help-btn,
.account-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
  font: inherit;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.help-btn:hover,
.account-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(61, 255, 154, 0.08); }
.account-btn:not(.is-profile) {
  background: #04140c;
  color: var(--accent);
  border-color: rgba(61, 255, 154, 0.75);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 0 22px rgba(61, 255, 154, 0.2);
}
.account-btn:not(.is-profile):hover {
  background: var(--accent);
  color: #04140c;
}
.modes button.on {
  box-shadow: 0 4px 16px rgba(61, 255, 154, 0.32);
}
[data-magnetic] { will-change: transform; }
.reveal-word {
  display: inline-block;
  background: linear-gradient(135deg, #f4fff8, #3dff9a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(14px);
  animation: reveal-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes reveal-in {
  to { opacity: 1; filter: blur(0); transform: none; }
}
h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 700;
}
.lede {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.mini {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.82rem;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 0 10px;
  border-radius: 999px;
  background: var(--spot);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
}
.view-tabs {
  display: none;
  gap: 8px;
  padding: 12px 24px 0;
}
.view-tabs button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
}
.view-tabs button.on {
  color: var(--accent);
  border-color: var(--accent);
}
.dash {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: 18px;
  padding: 22px 24px 8px;
}
.pane {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  min-width: 0;
}
.pane.tour-on {
  position: relative;
  z-index: 40;
  box-shadow: 0 0 0 3px var(--accent);
}
/* "describe a person" is a dev-only input — end users upload or reuse a saved face */
body:not(.is-dev) #whoWrap { display: none; }
.photo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #070d0a;
  border: 1px dashed var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-stage img,
.photo-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#photoEmpty { color: var(--muted); padding: 16px; text-align: center; }
.photo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.btn, label.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #04140c;
  border: 0;
  border-radius: 12px;
  padding: 11px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.btn.ghost, label.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn.ghost:hover, label.btn.ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.block { margin: 0 0 18px; }
.label {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.mix-head { margin: 4px 0 10px; }
.mix-wrap {
  display: none;
}
.mix-wrap.is-open {
  display: block;
  animation: mixReveal 0.45s ease;
}
@keyframes mixReveal {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cards-2 { grid-template-columns: 1fr 1fr; }
.choice {
  text-align: left;
  background: #070d0a;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  font: inherit;
  cursor: pointer;
}
.choice b { display: block; font-size: 1rem; }
.choice small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}
.choice.on {
  border-color: var(--accent);
  background: var(--spot);
  color: var(--accent);
}
.choice.on small { color: #b7e8cc; }
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.field {
  display: block;
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}
select {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: #070d0a;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
  font-weight: 400;
}
.recipe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.recipe-head .label { margin: 0; }
.own-scenario { margin-top: 10px; }
.own-scenario textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: #070d0a;
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
  font-weight: 400;
  resize: vertical;
}
.mine-list { display: grid; gap: 8px; margin-top: 12px; max-height: 60vh; overflow: auto; }
.mine-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #070d0a;
}
.mine-row b { flex: 1; min-width: 120px; }
.mine-empty { color: var(--muted); margin: 12px 0; }
.go-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
  margin-top: 18px;
}
.go-row #go { margin-top: 0; }
.go-row #savePresetBtn {
  width: 100%;
  margin-top: 0;
  border-radius: 14px;
  padding: 16px;
  font-weight: 700;
}
body.catalog-kurvy #genderBlock { display: none; }
button#go {
  width: 100%;
  margin-top: 18px;
  background: var(--accent);
  color: #04140c;
  border: 0;
  border-radius: 14px;
  padding: 16px;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
/* Phones: stack Generate + Save-this-look full-width so "Save this look" fits on one line
   instead of wrapping into a cramped block beside Generate. */
@media (max-width: 560px) {
  .go-row { grid-template-columns: 1fr; gap: 10px; }
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
.hint {
  min-height: 1.2em;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.progress {
  margin-top: 14px;
}
.progress-track {
  height: 10px;
  background: #070d0a;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.4s ease;
}
.progress-label {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
}
.results {
  padding: 8px 24px 48px;
}
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.result-grid img {
  width: 100%;
  display: block;
  background: #070d0a;
  border: 1px solid var(--line);
  border-radius: 14px;
}
#tour {
  position: fixed;
  inset: 0;
  z-index: 30;
}
.tour-dim {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 8, 0.72);
}
.tour-card {
  position: absolute;
  left: 50%;
  top: 18px;
  bottom: auto;
  transform: translateX(-50%);
  width: min(440px, calc(100% - 32px));
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 18px;
  z-index: 50;
}
.tour-kicker {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* When the highlighted target sits in the upper half of the screen the top-pinned card would
   cover it — JS flips the card to the bottom (above the mobile tab bar) for those steps. */
#tour.tour--bottom .tour-card { top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 761px) { #tour.tour--bottom .tour-card { bottom: 24px; } }
.tour-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.tour-card p { margin: 0 0 14px; color: var(--muted); line-height: 1.4; }
.tour-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tour-target {
  position: relative;
  z-index: 40;
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 10px rgba(61, 255, 154, 0.18);
  border-radius: 16px;
}
.inspo-publish { display: none; }
@view-transition { navigation: auto; }
header.top { view-transition-name: topbar; }
.dash, .inspo { view-transition-name: stage; }
::view-transition-old(stage) { animation: 380ms ease both stage-out; }
::view-transition-new(stage) { animation: 480ms ease both stage-in; }
/* Fade + slide only — no animated filter:blur (re-rasterizing a full-page blur each frame is what
   made entering Inspo stutter, esp. the glowing GLAM/BOLD titles). Opacity + transform are GPU-cheap. */
@keyframes stage-out { to { opacity: 0; transform: translateY(14px); } }
@keyframes stage-in { from { opacity: 0; transform: translateY(18px); } }
body.mode-inspo .dash,
body.mode-inspo .view-tabs { display: none; }
.inspo {
  display: none;
  padding: 22px 24px 48px;
}
body.mode-inspo .inspo { display: block; }
.inspo-more {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  height: 108px;
  padding: 0 0 22px;
  align-items: flex-end;
  justify-content: center;
  border: 0;
  background: linear-gradient(to top, #08110d 18%, rgba(8, 17, 13, 0));
  cursor: pointer;
}
.inspo-more span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: #04140c;
  font-size: 1.35rem;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
@media (min-width: 1100px) {
  body.mode-inspo .inspo-more { display: flex; }
}
/* Mobile: show the same "next looks" down-arrow, lifted above the bottom tab bar, as a small
   floating control. JS un-hides it (removes [hidden]) only when a look card is still below the
   fold. pointer-events:none on the strip so it never blocks taps on the feed; only the button taps. */
@media (max-width: 1099px) {
  body.mode-inspo .inspo-more:not([hidden]) {
    display: flex;
    height: auto;
    padding: 0;
    bottom: calc(82px + env(safe-area-inset-bottom));
    background: none;
    pointer-events: none;
  }
  body.mode-inspo .inspo-more:not([hidden]) .inspo-more-btn { pointer-events: auto; }
}
.inspo-lede { max-width: 720px; }
.inspo-publish {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #101a16ee;
}
.inspo-publish pre {
  margin: 0;
  width: 100%;
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--ink, #e8fff3);
  background: #070d0a;
  border-radius: 10px;
  padding: 10px 12px;
  font: 0.75rem/1.45 ui-monospace, monospace;
}
.inspo-publish a { color: var(--accent); font-size: 0.82rem; }
body:not(.is-dev) .inspo-publish { display: none; }
.fill-bar {
  position: sticky;
  top: 0;
  z-index: 8;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #101a16ee;
  backdrop-filter: blur(10px);
}
.fill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.fill-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
  flex: 1;
  min-width: 220px;
}
.fill-bar .progress { margin-top: 12px; }
.fill-queue {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.fill-queue.has-items { display: grid; }
.fill-q {
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #070d0a;
}
.fill-q img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fill-q small {
  display: none;
}
.inspo-split {
  display: grid;
  /* minmax(0,1fr) so each column can shrink to its 50% share — a plain 1fr can't shrink
     below the cards' 900px intrinsic size (content-visibility), which overflowed the page. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.inspo-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.inspo-col h2 {
  margin: 0 0 12px;
  font-size: 1.6rem;
  letter-spacing: 0;
}
.inspo-col h2.face-glam,
.inspo-col h2.face-spicy {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
}
.inspo-col-head h2 { margin: 0; }
.inspo-who {
  display: flex;
  gap: 6px;
}
.inspo-who button {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  font: inherit;
  font-size: 1.15rem;
  cursor: pointer;
}
.inspo-who button.on {
  border-color: var(--accent);
  background: var(--spot);
}
.inspo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.inspo-card {
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.inspo-arrange {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inspo-arrange button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(7, 13, 10, 0.88);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.inspo-arrange button:disabled {
  opacity: 0.28;
  cursor: default;
}
.inspo-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  background:
    radial-gradient(120% 80% at 50% 0%, #1a3328 0%, #070d0a 62%);
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}
.inspo-tile img,
.inspo-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
/* Smooth, non-choppy preview loading: full-res images fade in once downloaded; a heavy lane
   render shows an animated shimmer while it buffers (e.g. on a return visit with no loader). */
@keyframes inspo-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
.inspo-cover { transition: opacity 0.4s ease; }
.inspo-cover.img-wait { opacity: 0; }
.lane-buffering {
  background-image: linear-gradient(100deg, #0a1610 18%, rgba(61, 255, 154, 0.14) 40%, #0a1610 62%) !important;
  background-size: 250% 100% !important;
  animation: inspo-shimmer 1.25s linear infinite;
}
.inspo-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4d6d5c;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.inspo-cap {
  position: absolute;
  inset: auto 0 0;
  padding: 56px 16px 18px;
  background: linear-gradient(transparent, rgba(4, 12, 8, 0.94));
  transform: translateY(18px);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  z-index: 2;
}
.inspo-card:hover .inspo-tile,
.inspo-card.is-open .inspo-tile {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--accent);
}
.inspo-hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(transparent 18%, rgba(4, 12, 8, 0.9));
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}
body.is-signed .inspo-card:hover .inspo-hover,
body.is-signed .inspo-card.is-open .inspo-hover {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.inspo-hover button {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 13, 10, 0.88);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.inspo-hover button.is-gen {
  background: var(--accent);
  color: #04140c;
  border-color: var(--accent);
}
.inspo-hover button.is-remove,
.look-choice-btn.is-remove {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.inspo-hover button.is-delete,
.look-choice-btn.is-delete {
  background: transparent;
  color: #ffb4c0;
  border-color: #5a2433;
}
.inspo-hover button small {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.8;
}
@media (max-width: 800px) {
  .inspo-hover { display: none; }
  body.is-signed .inspo-card.is-open .inspo-hover { display: flex; }
}
.inspo-card:hover .inspo-cap,
.inspo-card.is-open .inspo-cap,
.inspo-tile:focus .inspo-cap {
  transform: none;
  opacity: 1;
}
.inspo-cap b {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}
.inspo-cap small {
  display: block;
  margin-top: 4px;
  color: var(--accent);
  font-size: 0.78rem;
}
.inspo-mini {
  display: none;
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  z-index: 6;
  background: rgba(8, 16, 12, 0.94);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 12px;
  backdrop-filter: blur(8px);
}
.inspo-card.is-empty:hover .inspo-mini,
.inspo-card.is-open .inspo-mini { display: block; }
.inspo-card.is-empty:hover .inspo-cap,
.inspo-card.is-open.is-empty .inspo-cap { opacity: 0; }
.inspo-mini h3 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}
.inspo-mini-photo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.inspo-mini-photo img {
  width: 44px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #070d0a;
}
.inspo-mini .btn { padding: 8px 10px; font-size: 0.82rem; }
.inspo-mini-go {
  width: 100%;
  margin-top: 4px;
}
.inspo-mini-hint {
  min-height: 1.1em;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}
.inspo-queue {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.inspo-queue.has-items { display: grid; }
.inspo-q {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #070d0a;
}
.inspo-q img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* full-resolution download button that sits on each generated photo */
.q-download {
  position: absolute; top: 7px; right: 7px; z-index: 3; padding: 0;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(4, 10, 8, 0.74); border: 1px solid rgba(61, 255, 154, 0.55); color: #3dff9a;
  transition: background 0.15s, transform 0.1s;
}
.q-download svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.q-download:hover { background: rgba(61, 255, 154, 0.22); color: #eafff4; }
.q-download:active { transform: scale(0.9); }
.look-latest-wrap { position: relative; display: block; margin: 0 auto; }
.look-latest-wrap[hidden] { display: none !important; }
.look-latest-dl { top: 12px; right: 12px; width: 40px; height: 40px; }
.look-latest-dl svg { width: 20px; height: 20px; }
.inspo-q .set-pic {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #04140c;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}
.inspo-q.is-wait {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
  padding: 8px;
}
.look-dim {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 8, 0.72);
  /* above the fixed bottom nav (z-index 95) so the nav doesn't float over the modal */
  z-index: 96;
}
.look-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100% - 28px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: 18px;
  padding: 18px;
  z-index: 97;
  animation: lookIn 0.32s ease;
}
@keyframes lookIn {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
/* "Feeling random?" result popup */
.rando-modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(380px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--card); border: 1px solid var(--accent); border-radius: 20px;
  padding: 16px; z-index: 97; animation: lookIn 0.32s ease; text-align: center;
}
.rando-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1;
  background: rgba(4, 10, 8, 0.6); color: #eafff4; border: 1px solid rgba(255, 255, 255, 0.2);
}
.rando-photo {
  aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #070d0a; border: 1px solid var(--line);
}
.rando-photo img, .rando-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rando-info { margin: 13px 0 14px; }
.rando-info h3 { margin: 0 0 3px; color: #eafff4; font-size: 1.15rem; }
.rando-info .mini { margin: 0; color: var(--muted); }
.rando-act { display: grid; gap: 10px; }
.rando-again {
  margin-top: 12px; background: transparent; border: 0; cursor: pointer; font: inherit;
  color: #3dff9a; font-weight: 700; font-size: 0.9rem;
}
/* "Feeling random?" quick-pick card — shown in lane mode on mobile + desktop (JS toggles [hidden]) */
.inspo-rando {
  margin: 10px 16px 0; padding: 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(61, 255, 154, 0.12), rgba(61, 255, 154, 0.02));
  border: 1px solid rgba(61, 255, 154, 0.3);
}
.rando-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.rando-head .rando-dice { font-size: 1.15rem; line-height: 1; }
.rando-head .rando-title { color: #eafff4; font-weight: 700; font-size: 0.98rem; }
.rando-picks { display: flex; gap: 10px; }
.rando-pick {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 8px; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.92rem;
  color: #eafff4; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(61, 255, 154, 0.28);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.rando-pick .rp-ico { font-size: 1.1rem; line-height: 1; }
.rando-pick:active { transform: scale(0.97); }
.rando-pick:hover { background: rgba(61, 255, 154, 0.12); border-color: #3dff9a; }
/* Inspo UI in caps: GLAM / BOLD, the Feeling-random picks, and every look title (emoji titles are unaffected) */
.face-glam, .face-spicy,
.inspo-col h2,
.lane span,
.inspo-cap b,
.rando-info h3,
.rando-pick,
.look-head h2 {
  text-transform: uppercase;
}
.look-choice { display: grid; gap: 10px; }
.look-choice-btn {
  width: 100%;
  padding: 16px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #070d0a;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.look-choice-btn.is-gen {
  background: var(--accent);
  color: #04140c;
  border-color: var(--accent);
}
.look-choice-btn small {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  font-size: 0.78rem;
  opacity: 0.8;
}
.look-latest {
  width: 100%;
  display: block;
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #070d0a;
}
.look-latest[hidden] { display: none !important; }
#lookUploads { margin: 0 0 12px; }
.upload-row:empty { display: none; }
.saved-label:has(+ .upload-row:empty) { display: none; }
.inspo-pick .pick-remove,
.inspo-q .pick-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  border: 0;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(4, 10, 8, 0.86);
  color: var(--ink);
  font: inherit;
  font-size: 0.68rem;
  cursor: pointer;
}
body.gen-arrive .dash,
body.gen-arrive .view-tabs,
body.gen-arrive #genResults {
  animation: genIn 0.45s ease;
}
@keyframes genIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 800px) {
  .look-modal {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: 90dvh;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    transform: none;
    animation: sheetUp 0.34s ease;
  }
  @keyframes sheetUp {
    from { transform: translateY(28px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
}
.look-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.look-head h2 { margin: 0; font-size: 1.15rem; }
.look-photo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
/* "Take photo" (opens the camera via capture) is mobile-only — on desktop there's no
   phone camera and the plain file picker already covers webcams. (Specificity must beat
   `label.btn { display: inline-flex }`, hence the `.look-photo` prefix.) */
.look-photo .look-cam-btn { display: none; }
@media (max-width: 760px) { .look-photo .look-cam-btn { display: inline-flex; } }
.look-photo img {
  width: 56px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #070d0a;
}
.look-cast {
  display: block;
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}
.look-cast textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: #070d0a;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
  font-weight: 400;
  resize: vertical;
}
.look-go { width: 100%; }
#lookOpenGen { width: 100%; margin-top: 10px; }
#lookQueue { margin-top: 12px; }
.inspo-picks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}
.inspo-picks:empty { display: none; }
.inspo-pick {
  position: relative;
  margin: 0;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #070d0a;
  cursor: pointer;
  aspect-ratio: 3 / 4;
}
.inspo-pick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inspo-pick small {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 6px 6px;
  background: linear-gradient(transparent, rgba(4, 12, 8, 0.92));
  color: var(--ink);
  font-size: 0.68rem;
  line-height: 1.2;
}
.inspo-pick.is-cover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.inspo-pick.is-cover::after {
  content: "Thumbnail";
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #04140c;
  font-size: 0.65rem;
  font-weight: 700;
}
#lookPickHint { margin: 0 0 10px; }
@media (max-width: 720px) {
  .inspo-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.account-dim {
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 8, 0.55);
  z-index: 96;
}
#accountPane {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  background: var(--bg);
  border-left: 1px solid var(--line);
  z-index: 97;
  overflow: auto;
  padding: 18px 18px calc(40px + env(safe-area-inset-bottom));
}
.account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.account-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.account-tabs button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
}
.account-tabs button.on {
  color: #04140c;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}
.ig-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.avatar {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070d0a;
  cursor: pointer;
  flex: 0 0 auto;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#avatarEmpty { color: var(--muted); font-size: 1.6rem; }
.ig-name { margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; }
#accountPane h3 {
  margin: 18px 0 8px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
  background: var(--line);
}
.ig-empty {
  grid-column: 1 / -1;
  padding: 28px 12px;
  text-align: center;
  color: var(--muted);
  background: var(--bg);
  font-size: 0.88rem;
}
.ig-cell {
  position: relative;
  aspect-ratio: 1;
  background: #070d0a;
  overflow: hidden;
}
.ig-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ig-hover {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 8, 0.78);
  color: var(--ink);
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px;
  font-size: 0.68rem;
  line-height: 1.3;
  transition: opacity 0.2s ease;
}
.ig-cell:hover .ig-hover { opacity: 1; }
.ig-tags span {
  display: inline-block;
  margin: 2px 4px 0 0;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--spot);
  color: var(--accent);
}
.ig-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: rgba(4, 10, 8, 0.8);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.upload-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
button.upload-cell {
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: block;
}
.upload-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #070d0a;
  border: 1px solid var(--line);
}
.upload-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#accountSettings .btn { display: inline-flex; margin: 8px 8px 0 0; }
.inspo-heart {
  color: #3dff9a;
  font-style: normal;
}
body.mode-generator:not(.is-signed) .dash,
body.mode-generator:not(.is-signed) .view-tabs {
  cursor: pointer;
}
body.mode-generator:not(.is-signed) .dash *,
body.mode-generator:not(.is-signed) .view-tabs * {
  pointer-events: none;
}
@media (max-width: 1099px) {
  .view-tabs { display: none; }
  .dash { grid-template-columns: 1fr; }
  .tour-card { top: 12px; bottom: auto; }
  #tour.tour--bottom .tour-card { top: auto; }
  .inspo-split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid, .cards { grid-template-columns: 1fr; }
  .top { flex-wrap: wrap; row-gap: 10px; }
  .corner-nav { flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
  .corner-btn { min-height: 34px; padding: 7px 11px; font-size: 0.66rem; letter-spacing: 0.04em; }
  .emerald-pill { padding: 7px 10px; }
  .help-btn { font-size: 0.72rem; }
}

.lane-pick, .lane-back { display: none; }
.dash button.is-pressed,
.inspo button.is-pressed,
.modes button.is-pressed,
.view-tabs button.is-pressed,
.look-modal button.is-pressed,
.inspo-more.is-pressed,
label.btn.is-pressed {
  transform: scale(0.94);
}
.inspo-tile.is-pressed { transform: scale(0.97); }
@media (max-width: 800px) {
  body.mode-inspo .inspo { padding: 0; }
  body.mode-inspo:not(.inspo-lane) .inspo-split,
  body.mode-inspo:not(.inspo-lane) .inspo-lede { display: none; }
  body.mode-inspo:not(.inspo-lane) .lane-pick {
    display: block;
    position: relative;
    /* 53px "How it works" bar above + the 72px bottom tab bar (body padding) below — anything
       taller leaves a 17px page scroll that makes the lane screen bounce on a phone. */
    height: calc(100dvh - 125px);
    min-height: 420px;
    overflow: hidden;
  }
  .lane {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    border: 0;
    color: #f4fff8;
    background-color: #04140c;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    font: inherit;
    cursor: pointer;
  }
  .lane-glam { left: 0; border-right: 1px solid rgba(255, 255, 255, 0.22); }
  .lane-spicy { left: 50%; }
  .lane::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.40));
  }
  .lane span {
    position: absolute;
    z-index: 1;
    font-size: clamp(2rem, 10vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
  }
  .lane-glam span { top: 16%; left: 8%; }
  .lane-spicy span { right: 8%; bottom: 14%; }
  .lane.is-pressed { filter: brightness(1.15); }
  @keyframes lane-sheen {
    from { background-position: 0% 0%; }
    to { background-position: 100% 100%; }
  }
  body.mode-inspo.inspo-lane .lane-back {
    display: inline-flex;
    margin: 14px 16px 0;
    padding: 8px 0;
    background: transparent;
    color: #3dff9a;
    border: 0;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
  }
  body.mode-inspo.inspo-lane .inspo { padding: 0 0 28px; }
  body.mode-inspo.inspo-lane .inspo-lede { display: block; padding: 8px 16px 0; }
  body.mode-inspo.inspo-lane-glam .inspo-col-spicy { display: none; }
  body.mode-inspo.inspo-lane-spicy .inspo-col-glam { display: none; }
  body.mode-inspo.inspo-lane .inspo-split { padding: 8px 12px 0; }
  /* whole photo, no crop, fit to the screen, and never wider than the viewport */
  body.mode-inspo .inspo-grid { gap: 12px; grid-template-columns: minmax(0, 1fr); }
  body.mode-inspo .inspo-card { min-width: 0; max-width: 100%; }
  body.mode-inspo .inspo-tile {
    aspect-ratio: auto;
    height: auto;
    max-width: 100%;
    background: #070d0a;
  }
  body.mode-inspo .inspo-tile img,
  body.mode-inspo .inspo-tile video {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 82vh;
    max-height: 82dvh;
    object-fit: contain;
  }
  body.mode-inspo .inspo-card.is-empty .inspo-tile { aspect-ratio: 3 / 4; }
}

/* Desktop uses the same lane flow: pick Glam/Bold, then one lane + "Feeling random?" */
@media (min-width: 801px) {
  body.mode-inspo:not(.inspo-lane) .inspo-split,
  body.mode-inspo:not(.inspo-lane) .inspo-lede { display: none; }
  body.mode-inspo:not(.inspo-lane) .lane-pick {
    display: block; position: relative;
    height: min(72vh, 660px); min-height: 440px;
    margin: 10px 0 0; border-radius: 18px; overflow: hidden;
  }
  .lane {
    position: absolute; top: 0; bottom: 0; width: 50%; border: 0;
    color: #f4fff8; background-color: #04140c; background-size: cover;
    background-position: center top; background-repeat: no-repeat; font: inherit; cursor: pointer;
    transition: filter 0.2s ease;
  }
  .lane-glam { left: 0; border-right: 1px solid rgba(255, 255, 255, 0.22); }
  .lane-spicy { left: 50%; }
  .lane::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.42));
  }
  .lane span {
    position: absolute; z-index: 1; font-size: clamp(2.4rem, 4vw, 3.6rem);
    font-weight: 700; letter-spacing: -0.03em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
  }
  .lane-glam span { top: 12%; left: 6%; }
  .lane-spicy span { right: 6%; bottom: 12%; }
  .lane:hover { filter: brightness(1.12); }

  body.mode-inspo.inspo-lane .lane-back {
    display: inline-flex; margin: 14px 0 2px; padding: 8px 2px;
    background: transparent; color: #3dff9a; border: 0;
    letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.74rem; font-weight: 700; cursor: pointer;
  }
  body.mode-inspo.inspo-lane-glam .inspo-col-spicy { display: none; }
  body.mode-inspo.inspo-lane-spicy .inspo-col-glam { display: none; }
  /* the one chosen lane spans the full width as a multi-column grid of looks */
  body.mode-inspo.inspo-lane .inspo-split { grid-template-columns: 1fr; }
  body.mode-inspo.inspo-lane .inspo-grid { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 16px; }
  /* the Men tab has only a couple looks — center them, and scale with the viewport (not a fixed size) */
  body.mode-inspo.inspo-lane #inspoIconMan { grid-template-columns: repeat(2, clamp(200px, 30vw, 360px)); justify-content: center; }
  /* the "Feeling random?" card: full width, with clear space below before the GLAM/BOLD heading */
  body.mode-inspo.inspo-lane .inspo-rando { max-width: none; margin: 4px 0 26px; }
}

/* "more coming soon" note under the Men looks */
.inspo-soon {
  margin: 0; padding: 18px 0 6px; text-align: center;
  color: #8fcdb0; font-size: 0.88rem; letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .lane::before { animation: none; }
}

.enter-dim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(4, 8, 12, 0.62);
  backdrop-filter: blur(16px);
  opacity: 0;
}
.enter-dim.open { animation: dim-in 0.28s ease forwards; }
.enter-window {
  position: fixed;
  z-index: 41;
  left: 50%;
  top: 50%;
  width: min(440px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  padding: 28px 24px 22px;
  background: #12161c;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translate(-50%, -46%) scale(0.94);
}
.enter-window.open { animation: pop-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes dim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
  from { opacity: 0; transform: translate(-50%, -42%) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.enter-window h2 {
  margin: 0 0 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1rem;
  color: var(--accent);
}
.enter-window .kicker {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--muted);
}
.enter-window label { display: block; margin: 12px 0; color: var(--muted); font-size: 0.75rem; }
.enter-window input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  background: #0a0d12;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.enter-window button[type="submit"],
.google-btn {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  background: var(--accent);
  color: #04140c;
  border: 0;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.google-btn { background: #0a0d12; color: var(--ink); border: 1px solid var(--line); }
.auth-flip { display: grid; }
.auth-face {
  grid-area: 1 / 1;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease;
}
.auth-login {
  transform: translateX(36px);
  opacity: 0;
  pointer-events: none;
}
.enter-window.show-login .auth-face:not(.auth-login) {
  transform: translateX(-36px);
  opacity: 0;
  pointer-events: none;
}
.enter-window.show-login .auth-login {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.switch-link,
.dev-sim {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 999px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: inherit;
}
.switch-link:hover,
.dev-sim:hover { color: var(--accent); }
.dev-sim { border: 1px dashed var(--line); }
button.dev-toggle.is-on {
  color: #04140c;
  background: var(--accent);
  border-color: var(--accent);
}
#lookDev { margin: 0 0 14px; }
#lookTitleInput {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: #070d0a;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  font: inherit;
}
#lookDevPreview {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  background: #000;
  margin: 0 0 10px;
}
#lookDevPreview[hidden] { display: none; }
.enter-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 999px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.68rem;
  cursor: pointer;
}

/* generated results in the generator */
.results { margin-top: 18px; }
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.result-shot { position: relative; margin: 0; }
.result-shot img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #070d0a;
  cursor: zoom-in;
  display: block;
}
.result-dl {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: #04140c;
  font: 700 0.68rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* shared full-screen preview */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: rgba(3, 8, 6, 0.92);
  backdrop-filter: blur(6px);
  padding: 16px;
}
.lightbox[hidden] { display: none; }
.lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.lb-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 6px 4px; }
.lb-dl {
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #04140c;
  font: 700 0.8rem/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.lb-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(7, 20, 15, 0.85);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 1;
}
body.lb-open { overflow: hidden; }

/* --- Custom scenario picker ------------------------------------------------------------ */
.is-hidden-select { display: none !important; }
.scenario-picker { position: relative; margin-top: 6px; }
.scenario-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 14px;
  background: #070d0a; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.scenario-trigger:hover { border-color: var(--accent); }
.scenario-trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61, 255, 154, 0.12); }
.scenario-trigger-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; font-weight: 600; }
.scenario-trigger-label .sc-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scenario-trigger-label.is-placeholder { color: var(--muted); font-weight: 400; }
.scenario-trigger-caret { color: var(--accent); font-size: 0.8rem; flex: none; }

.scenario-panel {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 8px);
  display: flex; flex-direction: column; max-height: 62vh;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42); overflow: hidden;
}
/* The panel also carries the kit's .sp-cut, whose position:relative (loaded later) clobbers the
   positioning above — pin it back by id so the desktop dropdown and mobile bottom-sheet both work. */
#scenarioPanel { position: absolute; }
.scenario-panel-top { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.scenario-search {
  flex: 1 1 auto; width: 100%; margin: 0; padding: 10px 12px;
  background: #070d0a; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; font: inherit;
}
.scenario-search:focus { outline: none; border-color: var(--accent); }
.scenario-close {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(7, 20, 15, 0.85);
  color: var(--ink); font-size: 1rem; cursor: pointer;
}
.scenario-close:hover { border-color: var(--accent); color: var(--accent); }
.scenario-tabs { display: flex; gap: 6px; padding: 0 12px 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.scenario-tabs button {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); font: 600 0.82rem/1 inherit;
}
.scenario-tabs button:hover { color: var(--ink); border-color: var(--accent); }
.scenario-tabs button.on { background: var(--accent); color: #04140c; border-color: var(--accent); }

.scenario-list { overflow-y: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
.scenario-section + .scenario-section { margin-top: 16px; }
.scenario-section-head {
  margin: 0 0 8px; font: 700 0.72rem/1 inherit; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.scenario-section-head span { opacity: 0.6; font-weight: 600; }
.scenario-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.scenario-chip {
  position: relative; display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 12px;
  background: #0c1713; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  font: 600 0.86rem/1.2 inherit; text-align: left; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}
.sc-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.sc-badge { flex: none; display: block; }
.sc-badge-flag { width: 23px; height: 17px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 0 0.5px rgba(255, 255, 255, 0.15); }
.sc-badge-place { width: 21px; height: 21px; }
/* themed-scenario emoji badge (slavpic-emoji sprite — keeps its own mint colours) */
.sc-badge-emoji { width: 24px; height: 24px; overflow: visible; }
.scenario-chip:hover { border-color: var(--accent); background: var(--spot); }
.scenario-chip:active { transform: scale(0.98); }
.scenario-chip.on { border-color: var(--accent); background: rgba(61, 255, 154, 0.16); color: var(--accent); }
.scenario-chip-dot {
  position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent); box-shadow: 0 0 0 2px var(--card);
}
.scenario-empty { margin: 8px 4px; color: var(--muted); font-size: 0.9rem; }

@media (max-width: 760px) {
  body.scenario-open { overflow: hidden; }
  /* No dim overlay — the sheet just sits over the page (opaque card bg keeps it readable). */
  .scenario-panel, #scenarioPanel {
    position: fixed; z-index: 200; left: 0; right: 0; bottom: 0; top: auto;
    max-height: 72vh; border-radius: 18px 18px 0 0; border-bottom: none;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  }
  /* Clear the fixed bottom tab bar so the last chips aren't hidden behind it. */
  .scenario-list { padding-bottom: 76px; }
  .scenario-grid { grid-template-columns: repeat(auto-fill, minmax(44%, 1fr)); }
}

.photo-tip { margin: 10px 0 0; color: #9fd8bb; font-size: 0.78rem; line-height: 1.45; text-transform: none; letter-spacing: 0; }
.result-grid.framed { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px 18px; }
/* "↓ SAVE" tag on a finished photo — both the single-page result grid and the wizard's big
   result frame (.genfx-overlay), which otherwise rendered it as a bare default button. */
.result-shot .sp-dl, .genfx-overlay .sp-dl {
  position: absolute; z-index: 6; top: 10px; right: 10px; min-height: 30px; padding: 6px 11px;
  background: rgba(4,20,12,.85); color: var(--accent); border: 1px solid rgba(61,255,154,.5); border-radius: 8px;
  font: 700 .66rem/1 ui-monospace, monospace; letter-spacing: .06em; cursor: pointer;
}
.result-shot .sp-dl:hover, .genfx-overlay .sp-dl:hover { background: var(--accent); color: #04140c; }
.look-latest-wrap .sp-frame { max-width: 340px; margin: 0 auto; }
.sp-dl-corner { position: absolute; z-index: 6; top: 10px; right: 10px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid rgba(61,255,154,.5); background: rgba(4,20,12,.82); color: var(--accent); cursor: pointer; padding: 0; }
.sp-dl-corner svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-dl-corner:hover { background: var(--accent); color: #04140c; }

/* nudity refusal popup (safety.py) — "spicy version coming soon" newsletter opt-in */
.spicy-modal { text-align: left; width: min(420px, calc(100% - 32px)); }
.spicy-ico { font-size: 2rem; line-height: 1; margin: 4px 0 10px; }
.spicy-modal h3 { margin: 0 0 6px; color: #eafff4; font-size: 1.15rem; }
.spicy-modal .mini { margin: 0 0 12px; color: var(--muted); }
.spicy-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid rgba(61, 255, 154, 0.35); border-radius: 12px; cursor: pointer; color: #eafff4; font-size: 0.92rem; }
.spicy-opt input { accent-color: #3dff9a; width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.spicy-email { display: flex; gap: 8px; margin-top: 10px; }
.spicy-email input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #070d0a; color: #eafff4; font: inherit; }
.spicy-done { color: #3dff9a !important; margin-top: 10px !important; }
.spicy-ok { width: 100%; margin-top: 14px; }

/* Woman / Man switch under the photo — suggested from the photo, always one tap to change */
.who-switch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.who-switch-label { color: #eafff4; font-size: 0.9rem; }
.who-switch-btns { display: flex; gap: 6px; }
.who-switch button { padding: 7px 16px; border-radius: 10px; border: 1px solid var(--line); background: #070d0a; color: #eafff4; font: inherit; font-size: 0.88rem; cursor: pointer; }
.who-switch button.on { border-color: var(--accent); color: var(--accent); background: rgba(61, 255, 154, 0.08); }
.who-switch-note { flex-basis: 100%; color: var(--muted); }