:root {
  --cream: #F1E8DC;
  --surface: #FAF5EE;
  --ink: #302326;
  --muted: #716267;
  --line: #E2D6CA;
  --plum: #6B2232;
  --bubblegum: #E8BFC9;
  --periwinkle: #8F8FCF;
  --sage: #DCE7D2;
  --butter: #F4E4BD;
  --cherry: #C8233A;
  --tomato: #EB5B2C;
  --ok-bg: #DCEBCB;
  --radius: 24px;
  --tabbar-h: 68px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
}
h1, h2, h3 { font-family: 'Bodoni Moda', Georgia, serif; font-optical-sizing: auto; color: var(--plum); margin: 0; line-height: 1.15; }
h1 { font-weight: 800; font-size: 30px; }
h2 { font-weight: 800; font-size: 21px; }
h3 { font-weight: 600; font-size: 17px; }
p { margin: 0; }
a { color: var(--plum); }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
[hidden] { display: none !important; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--surface); padding: 8px 12px; border-radius: 10px; z-index: 50; }

/* ---------- header & nav ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(8px);
}
.logo { text-decoration: none; display: inline-flex; align-items: baseline; font-family: 'Bodoni Moda', Georgia, serif; font-weight: 800; font-size: 32px; line-height: 1; min-height: 44px; align-items: center; }
.logo .l1 { color: var(--tomato); } .logo .l2 { color: var(--periwinkle); } .logo .l3 { color: var(--bubblegum); } .logo .l4 { color: var(--sage); }

.topnav { display: none; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px; }
.topnav a, .topnav button {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; border: 0; background: none; cursor: pointer;
  padding: 8px 11px; border-radius: 999px; color: var(--ink); font-weight: 500; font-size: 13px;
}
.topnav a[aria-current="page"] { background: var(--plum); color: var(--surface); font-weight: 600; }
.topnav .topnav-snap { background: var(--cherry); color: #fff; font-weight: 600; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  height: calc(var(--tabbar-h) + var(--safe-b)); padding: 0 6px var(--safe-b);
  background: var(--surface); border-top: 1px solid var(--line);
}
.tabbar a, .tabbar button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: var(--tabbar-h); text-decoration: none; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 11px; font-weight: 500;
}
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--plum); font-weight: 600; }
.tabbar a[aria-current="page"] svg { stroke-width: 2.4; }
.tabbar .tab-snap { color: var(--plum); }
.tabbar .tab-snap svg { width: 56px; height: 56px; padding: 14px; margin-top: -26px; border-radius: 999px; background: var(--cherry); stroke: #fff; box-shadow: 0 6px 16px rgba(107, 42, 51, 0.3); }
.badge { background: var(--cherry); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; }
.tabbar .badge { position: absolute; top: 8px; left: calc(50% + 6px); }

@media (min-width: 1024px) {
  body { padding-bottom: 32px; }
  .topbar { padding: 16px 32px; }
  .topnav:not([hidden]) { display: flex; }
  .tabbar { display: none !important; }
}

/* ---------- layout ---------- */
main { max-width: 1280px; margin: 0 auto; padding: 4px 16px 24px; display: flex; flex-direction: column; gap: 16px; }
main:focus { outline: none; }
.page-head { display: flex; flex-direction: column; gap: 4px; padding: 4px 2px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cherry); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }

.home-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  main { padding: 8px 32px 32px; }
  .home-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .home-grid > .span-2 { grid-column: 1 / -1; }
  h1 { font-size: 40px; }
}

.card { border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); }
.card.bubblegum { background: var(--surface); }
.card.periwinkle { background: var(--surface); }
.card.sage { background: var(--sage); border-color: transparent; }
.card.butter { background: var(--butter); border-color: var(--line); }
.card.plum { background: var(--plum); border-color: transparent; color: var(--surface); }
.card.plum h1, .card.plum h2, .card.plum h3 { color: var(--surface); }
.card.bubblegum h2, .card.periwinkle h2, .card.sage h2, .card.butter h2 { color: var(--ink); }
.inner { background: var(--surface); border-radius: 16px; padding: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 12px 20px; border-radius: 999px; border: 1px solid var(--periwinkle); background: var(--periwinkle);
  color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
}
.btn.primary { background: var(--cherry); border-color: var(--cherry); color: #fff; }
.btn.dark { background: var(--plum); border-color: var(--plum); color: var(--surface); }
.btn.ghost { border-color: transparent; background: transparent; text-decoration: underline; padding-inline: 8px; }
.btn.small { min-height: 40px; padding: 8px 14px; font-size: 14px; border-width: 1px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.snap-btn { min-height: 64px; font-size: 18px; border-radius: 20px; }
.snap-btn svg { width: 26px; height: 26px; }

.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 12px; font-size: 13px; background: var(--surface); border: 1px solid var(--line); }
.chip.on { background: var(--plum); color: var(--surface); border-color: var(--plum); }
button.chip { min-height: 40px; padding: 8px 14px; cursor: pointer; font-weight: 500; }
.swatch { width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(43, 32, 32, 0.25); flex: none; }

/* ---------- photos & grids ---------- */
.outfit-pieces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.outfit-pieces figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.outfit-pieces img, .thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--surface); }
.outfit-pieces figcaption { font-size: 12px; line-height: 1.3; }
.home-outfit-pieces { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-outfit-pieces img, .home-outfit-pieces .thumb { border-radius: 16px; }
.home-outfit-pieces figcaption { font-size: 12px; }
.outfit-heading { gap: 2px; }
.outfit-weather { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.outfit-weather .linkish { padding: 0; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.item-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 8px; display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; }
.item-card .name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.heart { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 999px; border: 0; background: var(--surface); color: var(--cherry); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.heart svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; }
.no-photo { width: 100%; aspect-ratio: 1; border-radius: 14px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font-size: 13px; font-weight: 600; background: var(--cream); }

.alert-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--surface); border-radius: 16px; padding: 10px; }
.alert-row img, .alert-row .no-photo { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; aspect-ratio: auto; }
.alert-row .actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- charts ---------- */
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 2.6em; gap: 8px; align-items: center; font-size: 13px; }
.bar-row .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 14px; background: rgba(251, 246, 239, 0.7); border-radius: 0 4px 4px 0; }
.bar-fill { display: block; height: 14px; background: var(--plum); border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-row .val { text-align: right; font-weight: 600; }
.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--surface); border-radius: 16px; padding: 12px; }
.stat .big { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 800; font-size: 30px; line-height: 1.1; color: var(--plum); }
@media (min-width: 640px) { .stat-row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- forms ---------- */
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.field input, .field select, .field textarea { font-weight: 400; font-size: 16px; padding: 12px 14px; border: 1px solid #CDBBA8; border-radius: 14px; background: #fff; }
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; }
.check input { width: 22px; height: 22px; accent-color: var(--cherry); }
.photo-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 4 / 3; border: 2px dashed #CDBBA8; border-radius: 18px; background: var(--surface); cursor: pointer; text-align: center; padding: 12px; overflow: hidden; }
.photo-drop img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }

/* ---------- sheet, toast, busy ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(43, 32, 32, 0.45); z-index: 40; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 88vh; overflow: auto;
  background: var(--cream); border-radius: 26px 26px 0 0; padding: 18px 16px calc(18px + var(--safe-b));
  display: flex; flex-direction: column; gap: 14px;
}
@media (min-width: 700px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(560px, 92vw); border-radius: 26px; }
}
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px); z-index: 50; background: var(--ink); color: var(--surface); padding: 12px 18px; border-radius: 999px; font-size: 14px; display: flex; gap: 12px; align-items: center; max-width: 92vw; }
.toast button { background: none; border: 0; color: var(--butter); font-weight: 600; text-decoration: underline; cursor: pointer; min-height: 32px; }
@media (min-width: 1024px) { .toast { bottom: 28px; } }
.busy { display: flex; align-items: center; gap: 12px; }
.spinner { width: 26px; height: 26px; border-radius: 999px; border: 3px solid rgba(107, 42, 51, 0.25); border-top-color: var(--plum); animation: spin 0.9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.empty { text-align: center; align-items: center; padding: 28px 18px; }
.mascot { width: 96px; height: 96px; }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.steps code, .code { font-family: ui-monospace, Menlo, monospace; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1px 6px; font-size: 13px; word-break: break-all; }
.qr svg { width: 200px; height: 200px; background: #fff; border-radius: 12px; padding: 6px; }

/* ---------- cream editorial refresh ---------- */
input, select, textarea { accent-color: var(--plum); }
.field input, .field select, .field textarea { background: var(--surface); border-color: var(--line); }
.card { border-color: var(--line); }
.inner, .stat { border: 1px solid var(--line); }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; }
.home-layout > .home-head { grid-area: head; }
.home-layout > .home-outfit-card { grid-area: outfit; }
.home-layout > .ask-home-card { grid-area: ask; }
.home-layout > .home-style-card { grid-area: style; }
.home-layout > .home-recreate-card { grid-area: recreate; }
.home-style-card > .tile { height: 100%; }
.home-recreate-card > .tile { height: 100%; }
.home-outfit-card { background: var(--surface); }
.ask-home-card { border: 0; border-radius: 24px; }
.topnav .badge { margin-left: 1px; min-width: 17px; height: 17px; font-size: 10px; }

@media (min-width: 1024px) {
  .home-layout {
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
    grid-template-areas: "head ask" "outfit style" "recreate recreate";
    align-items: stretch;
  }
  .home-layout > .home-outfit-card { min-width: 0; }
  .home-layout > .home-head { min-height: 100px; }
  .topnav a, .topnav button { white-space: nowrap; }
  .top-right > .bell { display: none; }
}
@media (max-width: 1023px) {
  .home-layout { grid-template-areas: "head" "outfit" "ask" "style" "recreate"; }
}
.recreate-results { margin-top: 16px; }
.recreate-summary { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
.recreate-summary h2, .recreate-summary p { flex-basis: 100%; }
.recreate-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recreate-shop-list { display: grid; gap: 10px; }
.recreate-shop-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.recreate-shop-item img, .recreate-shop-placeholder { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--cream); }
.recreate-shop-placeholder { display: grid; place-items: center; text-align: center; font-size: 11px; color: var(--muted); }
.recreate-shop-item .btn { grid-column: 2; justify-self: start; }
@media (min-width: 700px) { .recreate-shop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- log in / create account ---------- */
.landing { display: grid; gap: 18px; max-width: 1000px; margin: 0 auto; padding-top: 4px; }
.landing-hero { display: flex; flex-direction: column; gap: 12px; padding: 8px 4px; }
.landing-hero h1 { font-size: 34px; }
.app-icon { width: 72px; height: 72px; border-radius: 18px; box-shadow: 0 6px 18px rgba(107, 42, 51, 0.18); }
.features { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.feature { display: flex; gap: 10px; align-items: flex-start; }
.feature .dot { width: 14px; height: 14px; border-radius: 999px; margin-top: 5px; flex: none; }
.auth-card { gap: 14px; padding: 22px; box-shadow: 0 10px 30px rgba(43, 32, 32, 0.08); }
.segmented { display: grid; grid-template-columns: 1fr 1fr; background: var(--cream); border-radius: 999px; padding: 4px; }
.segmented button { border: 0; background: none; border-radius: 999px; min-height: 44px; font-weight: 600; cursor: pointer; color: var(--muted); }
.segmented button.on { background: var(--plum); color: var(--surface); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 72px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--plum); font-weight: 600; font-size: 14px; min-height: 40px; padding: 0 10px; cursor: pointer; }
.form-msg { color: var(--cherry); font-size: 14px; font-weight: 500; min-height: 0; }
.form-msg:empty { display: none; }
.linkish { border: 0; background: none; color: var(--plum); text-decoration: underline; font-weight: 600; cursor: pointer; padding: 0; }
.demo { border-top: 1px solid var(--line); padding-top: 10px; }
.demo summary { cursor: pointer; font-size: 14px; font-weight: 600; min-height: 32px; }
.field input { width: 100%; }
@media (min-width: 1024px) {
  .landing { grid-template-columns: 1.1fr 1fr; align-items: center; padding-top: 32px; gap: 48px; }
  .landing-hero h1 { font-size: 48px; }
}

/* ---------- plans & Ask Loop ---------- */
.plans { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); }
.plan.plus { background: var(--plum); color: var(--surface); border-color: var(--plum); }
.plan.plus h2, .plan.plus h3 { color: var(--surface); }
.plan .price { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 800; font-size: 40px; line-height: 1; }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.chip.plus-status { align-self: flex-start; max-width: 220px; padding: 8px 12px; border-color: var(--periwinkle); background: var(--periwinkle); color: var(--ink); font-weight: 600; }
.plus-status-icon { width: 22px; height: 22px; flex: none; }
.plus-note { color: var(--surface); }
.meter { height: 10px; border-radius: 999px; background: rgba(43, 32, 32, 0.12); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--plum); border-radius: 999px; }
.chat { display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 85%; padding: 12px 16px; border-radius: 20px; font-size: 15px; }
.bubble.me { align-self: flex-end; background: var(--bubblegum); border-bottom-right-radius: 6px; }
.bubble.loop { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.chat .outfit-pieces { max-width: 420px; }
.ask-form { display: flex; gap: 8px; position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); background: var(--cream); padding: 8px 0; }
.ask-form input { flex: 1; min-width: 0; font-size: 16px; padding: 12px 16px; border: 1px solid #CDBBA8; border-radius: 999px; background: #fff; }
@media (min-width: 1024px) { .ask-form { bottom: 0; } }
.page-head.row { flex-direction: row; align-items: flex-end; }

/* ---------- Back button ---------- */
.brand { display: flex; align-items: center; gap: 10px; }
.back-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 8px; border-radius: 999px; cursor: pointer;
  background: #F8F1E8; color: var(--plum); border: 2px solid var(--bubblegum);
}
.back-btn svg { flex: none; }
.back-btn:focus-visible { outline: 3px solid var(--periwinkle); outline-offset: 2px; }

/* ---------- Ask Loop answers ---------- */
.pick-card, .memory-card { align-self: stretch; max-width: 460px; display: flex; flex-direction: column; gap: 8px; border-radius: 18px; padding: 12px; }
.pick-card { background: var(--butter); }
.memory-card { background: #E6E7F5; }

/* ---------- brand art + more color ---------- */
.logo img { height: 40px; width: auto; display: block; }
body::before { content: ''; position: fixed; inset: 0 0 auto; height: 6px; z-index: 50;
  background: linear-gradient(90deg, var(--tomato), var(--bubblegum), var(--periwinkle), var(--sage), var(--butter)); }
body::after { content: ''; position: fixed; right: -40px; bottom: 60px; width: 220px; height: 440px; z-index: -1; pointer-events: none;
  background: url('/brand/flower.png') no-repeat center / contain; opacity: 0.08; transform: rotate(12deg); }

.landing-hero { position: relative; align-items: flex-start; }
.landing-logo { width: min(320px, 80%); height: auto; }
.landing-chars { width: min(360px, 90%); height: auto; filter: drop-shadow(0 8px 16px rgba(107, 42, 51, 0.15)); }
@media (min-width: 1024px) { .landing { grid-template-columns: 1.1fr 1fr; align-items: center; } }

.quiz { display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin: 0 auto; }
.quiz-progress { display: flex; gap: 6px; }
.quiz-progress span { flex: 1; height: 8px; border-radius: 999px; background: var(--line); transition: background 0.2s; }
.quiz-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.quiz-head h1 { font-size: 28px; }
.quiz-char { width: 64px; height: auto; flex: none; }
.quiz-chip { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface);
  font: inherit; font-weight: 500; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.quiz-chip.on { color: var(--ink); font-weight: 600; box-shadow: 0 3px 0 rgba(107, 42, 51, 0.2); }
.home-head { display: flex; justify-content: space-between; align-items: center; }
.home-char { width: 46px; height: auto; }
.welcome-chars { width: min(260px, 80%); height: auto; align-self: center; }
.home-grid { display: grid; gap: 16px; }
@media (min-width: 1024px) { .home-grid { grid-template-columns: 1.2fr 1fr; align-items: start; } }

.snap-card { background: linear-gradient(135deg, #FFE3EA, #E6E7FA); border-color: transparent; }
.snap-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.snap-btn { min-height: 64px; flex-direction: column; gap: 4px; font-size: 15px; padding: 10px 8px; }
.snap-btn svg { width: 24px; height: 24px; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tiles.four { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .tiles.four { grid-template-columns: repeat(4, 1fr); } }
.tile { border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 6px; min-height: 120px;
  text-decoration: none; color: var(--ink); transition: transform 0.15s; }
a.tile:hover { transform: translateY(-2px) rotate(-0.5deg); }
.tile-title { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 800; font-size: 18px; }
.tile-value { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 800; font-size: 30px; line-height: 1; }
.tile.periwinkle, .tile.butter, .tile.sage, .tile.bubblegum { background: var(--surface); border: 1px solid var(--line); }
.tile.tomato { background: var(--tomato); color: #fff; }
.tile.plum { background: var(--plum); color: #fff; }
.ask-home-card { min-width: 0; gap: 12px; }
.ask-home-card .tile-title { display: block; color: #fff; font-size: 22px; }
.ask-home-card > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.ask-home-form { display: flex; align-items: center; gap: 8px; width: 100%; }
.ask-home-form input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 15px; }
.ask-home-form input::placeholder { color: var(--muted); opacity: 1; }
.ask-home-form button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; }
.ask-home-form button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ask-home-form button::after { content: "→"; font-size: 22px; line-height: 1; color: var(--plum); }
.ask-home-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-home-chip { min-height: 40px; max-width: 100%; padding: 8px 12px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; line-height: 1.3; text-align: left; cursor: pointer; }
.ask-home-form input:focus-visible, .ask-home-form button:focus-visible, .ask-home-chip:focus-visible { outline-color: var(--plum); }
/* tab bar: each tab gets its own color when active */
.tabbar a[data-tab="home"][aria-current="page"] { color: var(--tomato); }
.tabbar a[data-tab="closet"][aria-current="page"] { color: var(--periwinkle); }
.tabbar a[data-tab="shop"][aria-current="page"] { color: var(--cherry); }
.tabbar a[data-tab="profile"][aria-current="page"] { color: var(--sage); }
.tabbar .tab-snap svg { background: linear-gradient(135deg, var(--tomato), var(--bubblegum)); }
.chip { border-color: var(--bubblegum); }
.btn.primary { background: linear-gradient(135deg, var(--cherry), var(--tomato)); border-color: var(--cherry); }
details > summary { cursor: pointer; font-weight: 600; color: var(--plum); min-height: 32px; }
details.card { display: block; }
details.card[open] > * + * { margin-top: 12px; }

/* ---------- top right: alerts bell ---------- */
.top-right { display: flex; align-items: center; gap: 10px; }
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--plum); }
.bell svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bell[aria-current="page"] { background: var(--plum); color: var(--surface); }
.bell .badge { position: absolute; top: -4px; right: -4px; }
.bell[hidden], .join-btn[hidden] { display: none; }

/* ---------- shop ---------- */
.shop-hero { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.shop-char { width: 54px; height: auto; }
.gap-card { background: linear-gradient(135deg, #FFE3EA, #FFF1C9); border-color: transparent; }
.h-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 44%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.h-scroll > * { scroll-snap-align: start; }
@media (min-width: 1024px) { .h-scroll { grid-auto-columns: minmax(180px, 1fr); } }
.chip-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.chip-scroll > * { flex: none; }
.shop-tools { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 64px; z-index: 5; background: color-mix(in srgb, var(--cream) 94%, transparent); padding: 8px 0; }
.sort { display: inline-flex; align-items: center; gap: 8px; }
.sort select { min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); padding: 0 12px; font: inherit; font-size: 14px; }
.product-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 8px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; min-width: 0; }
.product-card:hover { box-shadow: 0 6px 18px rgba(107, 42, 51, 0.12); }
.product-card .name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.product-card .price, .price { font-family: 'Bodoni Moda', Georgia, serif; font-weight: 800; color: var(--plum); font-size: 18px; }
.price.big { font-size: 34px; }
.product-photo { position: relative; }
.garment svg, .garment { display: block; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.product-photo.big .garment, .product-photo.big .thumb { max-width: 340px; }
.heart-btn { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.92);
  color: #D9CFC3; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.heart-btn svg { width: 22px; height: 22px; stroke-width: 1.5; }
.heart-btn.on { color: var(--bubblegum); }
.product-detail .heart-btn { position: static; border: 1px solid var(--line); }
.src-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; max-width: 100%; border-radius: 999px; padding: 3px 10px 3px 4px;
  font-size: 12px; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-badge.secondhand { background: #E4F0D8; padding-left: 10px; }
.src-badge.boutique { background: #FCE1E8; }
.src-badge.partner { background: #E3E4F7; padding-left: 10px; }
.initials { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 700; flex: none; }
.initials.big { width: 72px; height: 72px; font-size: 26px; background: rgba(255, 255, 255, 0.85); color: var(--plum); font-family: 'Bodoni Moda', Georgia, serif; }
.why { font-size: 12px; font-weight: 600; color: var(--cherry); line-height: 1.3; }
.why-line { background: #FCE1E8; border-radius: 12px; padding: 10px 12px; margin: 0; font-weight: 500; }
.similar-note { color: var(--plum); text-decoration: underline; }
.code-box { background: var(--butter); border-radius: 12px; padding: 10px 12px; margin: 0; }
.product-detail { display: grid; gap: 16px; }
@media (min-width: 700px) { .product-detail { grid-template-columns: 1fr 1fr; align-items: start; } }
.boutique-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.boutique-pill .initials { width: 36px; height: 36px; font-size: 13px; }
.boutique-pill > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.boutique-head { flex-direction: row; align-items: flex-start; gap: 16px; border-color: transparent; color: var(--ink); }
.boutique-head h1 { color: var(--ink); }
.quiz-chip svg { width: 16px; height: 16px; }

/* =====================================================================
   Stitch theme (Nov 2026): blush surfaces, wine + raspberry accents,
   Newsreader headlines, Plus Jakarta Sans body, soft shadowed cards,
   pill buttons and a floating tab bar. Overrides everything above.
   ===================================================================== */
:root {
  --cream: #FFF8F7;            /* page background (surface) */
  --surface: #FFFFFF;          /* cards (surface-container-lowest) */
  --blush: #FFF0F0;            /* surface-container-low */
  --blush-2: #FEE9E9;          /* surface-container */
  --blush-3: #F2DEDD;          /* surface-container-highest */
  --ink: #231919;              /* on-surface */
  --muted: #534344;            /* on-surface-variant */
  --line: #F2DEDD;
  --plum: #4F121E;             /* primary: headlines */
  --wine: #6B2833;             /* primary-container */
  --cherry: #AB2E59;           /* secondary: main actions */
  --rose: #FFD9E0;             /* secondary-fixed */
  --hot-pink: #FC6D98;         /* secondary-container */
  --bubblegum: #FFD9E0;
  --periwinkle: #E0E0FF;       /* tertiary-fixed */
  --peri-ink: #3F4276;
  --navy: #363A6E;             /* tertiary-container */
  --sage: #FFF0F0;
  --butter: #FFF0F0;
  --tomato: #AB2E59;
  --leaf: #A0C27F;
  --err-bg: #FFDAD6;
  --err-ink: #93000A;
  --shadow-sm: 0 1px 3px rgba(43, 32, 32, 0.06), 0 1px 2px rgba(43, 32, 32, 0.04);
  --shadow-md: 0 6px 18px rgba(107, 40, 51, 0.08);
  --radius: 32px;
  --tabbar-h: 68px;
}

body { background: var(--cream); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink);
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 40px); }
body::before, body::after { display: none; }
h1, h2, h3 { font-family: 'Newsreader', Georgia, serif; color: var(--plum); letter-spacing: -0.01em; }
h1 { font-weight: 600; font-size: 32px; }
h2 { font-weight: 600; font-size: 21px; }
h3 { font-weight: 600; font-size: 17px; }
.eyebrow { color: var(--cherry); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }
.muted { color: var(--muted); }

/* header */
.topbar { background: rgba(255, 248, 247, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 8px rgba(43, 32, 32, 0.04); padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
.logo img { height: 32px; }
.bell { background: transparent; border: 0; color: var(--ink); }
.bell .badge { top: 4px; right: 4px; min-width: 16px; height: 16px; font-size: 10px; background: var(--hot-pink); color: #fff; box-shadow: 0 0 0 2px var(--cream); }
.back-btn { background: var(--surface); border: 0; box-shadow: var(--shadow-sm); color: var(--plum); }
.badge { background: var(--hot-pink); }

/* floating pill tab bar with a raised camera */
.tabbar { left: 16px; right: 16px; bottom: calc(12px + var(--safe-b)); margin: 0 auto; max-width: 374px; height: var(--tabbar-h);
  padding: 0 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 12px 32px rgba(107, 40, 51, 0.12); align-items: center; }
.tabbar a, .tabbar button { height: var(--tabbar-h); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
.tabbar svg { width: 22px; height: 22px; }
.tabbar a[aria-current="page"], .tabbar a[data-tab][aria-current="page"] { color: var(--cherry); }
.tabbar .tab-snap { color: var(--wine); }
.tabbar .tab-snap span { display: none; }
.tabbar .tab-snap svg { width: 56px; height: 56px; padding: 15px; margin-top: -30px; background: var(--wine); stroke: #fff;
  box-shadow: 0 8px 20px rgba(107, 40, 51, 0.28); }
.tabbar .badge { top: 10px; }
.toast { bottom: calc(var(--tabbar-h) + var(--safe-b) + 28px); background: var(--plum); }

/* desktop pill nav */
.topnav { background: var(--surface); border: 0; box-shadow: var(--shadow-sm); }
.topnav a[aria-current="page"] { background: var(--wine); color: #fff; }

/* cards & tiles */
.card, .tile, .plan { background: var(--surface); border: 0; box-shadow: var(--shadow-sm); border-radius: var(--radius); }
.card.butter, .card.sage, .card.bubblegum, .card.periwinkle, .tile.periwinkle, .tile.butter, .tile.sage, .tile.bubblegum { background: var(--surface); border: 0; }
.card.soft { background: var(--blush); }
.card.plum, .plan.plus, .tile.plum { background: var(--plum); color: #fff; }
.card.plum .small, .plan.plus .small { color: #F2DEDD; }
.inner, .stat { background: var(--blush); border: 0; border-radius: 16px; }
.stat .big, .tile-value, .plan .price, .price, .product-card .price { font-family: 'Newsreader', Georgia, serif; font-weight: 600; color: var(--plum); }
.card.plum .stat .big { color: var(--plum); }
.tile-title { font-family: 'Newsreader', Georgia, serif; font-weight: 600; color: var(--plum); }
a.tile:hover { transform: translateY(-1px); }

/* buttons */
.btn { border: 0; background: var(--periwinkle); color: var(--peri-ink); font-weight: 700; font-size: 14px; min-height: 48px; box-shadow: var(--shadow-sm);
  transition: transform 0.12s; }
.btn:active { transform: scale(0.96); }
.btn.primary { background: var(--cherry); color: #fff; }
.btn.dark { background: var(--wine); color: #fff; }
.btn.soft { background: var(--blush-2); color: #6E0031; }
.btn.ghost { box-shadow: none; background: transparent; color: var(--plum); }
.btn.small { min-height: 40px; font-size: 13px; }

/* chips */
.chip { background: var(--blush-2); border: 0; color: var(--ink); font-weight: 600; font-size: 12px; }
button.chip { min-height: 36px; padding: 6px 14px; }
.chip.on { background: var(--wine); color: #fff; }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3; white-space: nowrap; }
.pill.rose { background: var(--rose); color: #3F0019; }
.pill.peri { background: var(--periwinkle); color: #202356; }
.pill.blush { background: var(--blush-2); color: #6E0031; }
.pill.white { background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: var(--shadow-sm); }
.pill.err { background: var(--err-bg); color: var(--err-ink); }
.pill.leaf { background: var(--leaf); color: #122A08; }
.pill svg { width: 12px; height: 12px; }

/* forms */
.field input, .field select, .field textarea, .ask-form input { background: var(--surface); border: 1px solid var(--blush-3); border-radius: 16px; }
.ask-form input { border-radius: 999px; }
.ask-form { background: var(--cream); }
.segmented { background: var(--blush-2); }
.segmented button.on { background: var(--wine); }
.meter { background: var(--blush-2); height: 8px; }
.meter span { background: var(--hot-pink); }
.bar-track { background: var(--blush-2); border-radius: 999px; }
.bar-fill { background: var(--cherry); border-radius: 999px; }
.sheet { background: var(--surface); border-radius: 48px 48px 0 0; }
.sheet::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--blush-3); margin: -6px auto 0; flex: none; }
@media (min-width: 700px) { .sheet { border-radius: 32px; } .sheet::before { display: none; } }

/* photos */
.thumb, .outfit-pieces img, .no-photo { border-radius: 16px; background: var(--blush-2); }
.item-card, .product-card { border: 0; background: var(--surface); box-shadow: var(--shadow-sm); border-radius: 32px; padding: 6px; }
.item-card .thumb, .product-card .thumb, .product-card .garment { border-radius: 26px; }
.heart, .heart-btn { box-shadow: var(--shadow-sm); }
.heart-btn.on { color: var(--cherry); }
.alert-row { background: var(--blush); border-radius: 20px; }

/* chat */
.bubble.me { background: var(--rose); }
.bubble.loop { background: var(--surface); border: 0; box-shadow: var(--shadow-sm); }
.pick-card { background: var(--blush); }
.memory-card { background: var(--periwinkle); }

/* ---------- Today ---------- */
.today { display: flex; flex-direction: column; gap: 20px; max-width: 640px; width: 100%; margin: 0 auto; }
.today-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding-top: 4px; }
.today-hero .chars { height: 150px; width: auto; filter: drop-shadow(0 4px 8px rgba(107, 40, 51, 0.12)); margin-bottom: 6px; }
.today-hero h1 { color: var(--cherry); font-size: 26px; line-height: 32px; font-weight: 600; }
.today-hero .sub { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 18px; color: var(--wine); }
.today-hero .date { font-size: 12px; color: var(--muted); margin-top: 2px; }
.vibe-ribbon { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--blush); border-radius: 999px; padding: 8px 8px 8px 16px; box-shadow: var(--shadow-sm); }
.vibe-ribbon .vibes { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.vibe-ribbon .vibes::-webkit-scrollbar { display: none; }
.vibe-ribbon .label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); flex: none; }
.vibe-ribbon .vibe { flex: none; background: var(--surface); border-radius: 999px; padding: 4px 10px; font-size: 10px; font-weight: 700; box-shadow: var(--shadow-sm); white-space: nowrap; }
.vibe-ribbon a { flex: none; font-size: 11px; font-weight: 700; color: var(--cherry); text-decoration: none; padding: 6px 8px; }
.today .card { border-radius: 40px; padding: 18px; gap: 14px; }
.today .home-outfit-card { box-shadow: var(--shadow-md); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.today .outfit-pieces.home-outfit-pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.today .outfit-pieces figure { position: relative; gap: 6px; }
.today .outfit-pieces img, .today .outfit-pieces .no-photo { border-radius: 16px; box-shadow: var(--shadow-sm); }
.today .outfit-pieces figcaption { font-size: 11px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reason { display: flex; align-items: flex-start; gap: 10px; background: var(--blush); border-radius: 16px; padding: 12px; font-size: 14px; line-height: 1.4; }
.reason .spark { width: 24px; height: 24px; border-radius: 999px; background: var(--rose); color: var(--cherry); display: grid; place-items: center; flex: none; font-size: 13px; }
.reason strong { color: var(--plum); }
.two-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.two-btns .btn { width: 100%; padding-inline: 10px; }
.outfit-weather .linkish { color: var(--cherry); }
.ask-card .ask-row { display: flex; align-items: center; gap: 8px; background: var(--blush); border-radius: 16px; padding: 8px; box-shadow: inset 0 1px 3px rgba(43, 32, 32, 0.06); }
.ask-card .ask-row input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 15px; padding: 8px 6px; outline: none; color: var(--ink); }
.ask-card .ask-row input::placeholder { color: #867274; }
.ask-card .send { width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px; background: var(--navy); color: #BFC2FF; display: grid; place-items: center; cursor: pointer; }
.ask-card .send svg { width: 20px; height: 20px; }
.ask-card .ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.ask-card .ideas button { border: 0; background: var(--blush-2); color: var(--ink); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; text-align: left; }
.teaser { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--blush-2); border-radius: 16px; padding: 10px 12px; font-size: 11px; font-weight: 600; }
.teaser strong { color: var(--plum); }
.teaser a { color: var(--cherry); font-weight: 700; flex: none; }
.recreate-row { flex-direction: row !important; align-items: center; justify-content: space-between; }
.recreate-row p { max-width: 220px; }
.idle-card { background: var(--blush) !important; }
.idle-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.idle-thumbs figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.idle-thumbs figcaption { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idle-thumbs .no-photo { font-size: 10px; }

/* ---------- Closet ---------- */
.closet-cap { display: flex; flex-direction: column; gap: 6px; }
.closet-cap .top { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.closet-cap .top span:last-child { font-size: 11px; color: var(--cherry); }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-stats > div { background: var(--blush); border-radius: 16px; padding: 10px 12px; }
.mini-stats .k { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.mini-stats .v { font-family: 'Newsreader', Georgia, serif; font-size: 22px; font-weight: 600; color: var(--plum); line-height: 1.2; }
.chip-row { display: flex; gap: 6px; overflow-x: auto; padding: 2px 16px 4px; margin: 0 -16px; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row > * { flex: none; }
.item-card .photo-wrap { position: relative; }
.item-card .photo-wrap .pill { position: absolute; }
.item-card .photo-wrap .tl { top: 8px; left: 8px; }
.item-card .photo-wrap .bl { bottom: 8px; left: 8px; }
.item-card .meta { padding: 4px 8px 6px; display: flex; flex-direction: column; gap: 2px; }
.item-card .foot { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 6px; font-size: 11px; font-weight: 700; color: var(--cherry); }
.item-card .foot.idle { color: var(--err-ink); }
.item-card .heart { top: 12px; right: 12px; width: 32px; height: 32px; }
.item-card .heart svg { width: 16px; height: 16px; }

/* ---------- Insights ---------- */
.ins-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ins-head .tags { display: flex; gap: 6px; margin-bottom: 4px; }
.month-pill { flex: none; background: var(--surface); box-shadow: var(--shadow-sm); border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--plum); }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(4, 1fr); } }
.metric { background: var(--surface); border-radius: 32px; padding: 16px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 160px; text-decoration: none; color: inherit; }
.metric .k { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.metric .v { font-family: 'Newsreader', Georgia, serif; font-size: 40px; line-height: 1; font-weight: 600; color: var(--plum); }
.metric .s { font-size: 12px; color: var(--muted); }
.metric .cta { display: flex; justify-content: space-between; align-items: center; background: var(--rose); color: #3F0019; border-radius: 999px; padding: 6px 10px; font-size: 10px; font-weight: 700; }
.ring { width: 48px; height: 48px; flex: none; }
.champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.champs figure { margin: 0; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.champs .photo-wrap { position: relative; }
.champs .photo-wrap .pill { position: absolute; }
.champs .tl { top: 6px; left: 6px; } .champs .br { bottom: 6px; right: 6px; }
.champs figcaption b { display: block; font-size: 12px; color: var(--plum); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.champs figcaption span { font-size: 11px; color: var(--muted); }
.cpw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--blush); border-radius: 16px; padding: 10px; text-decoration: none; color: inherit; }
.cpw-row .l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cpw-row .thumb, .cpw-row .no-photo { width: 48px; height: 48px; flex: none; border-radius: 12px; font-size: 9px; }
.cpw-row b { display: block; font-size: 13px; color: var(--plum); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpw-row .r { text-align: right; flex: none; }
.cpw-row .r b { color: var(--cherry); }
.plus-banner { background: var(--plum); color: #fff; border-radius: 32px; padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); }
.plus-banner h3 { color: #fff; }
.plus-banner p { color: #D8C1C2; font-size: 12px; }
.plus-banner .btn { background: var(--hot-pink); color: #6E0031; }
.plus-banner::after { content: ''; position: absolute; right: -20px; bottom: -30px; width: 130px; height: 130px; border-radius: 999px; background: rgba(171, 46, 89, 0.25); filter: blur(24px); }

/* shop */
.src-badge.secondhand { background: var(--leaf); color: #122A08; }
.src-badge.boutique { background: var(--periwinkle); color: #121548; }
.src-badge.partner { background: var(--blush-2); color: #6E0031; }
.gap-card { background: var(--blush) !important; }
.why { color: var(--cherry); }
.why-line { background: var(--blush); }
.shop-tools { background: rgba(255, 248, 247, 0.94); }
.sort select { border: 0; box-shadow: var(--shadow-sm); }
.code-box { background: var(--blush); }

/* landing */
.auth-card { box-shadow: var(--shadow-md); }
.app-icon { box-shadow: var(--shadow-md); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Shop (Stitch) ---------- */
.shop-hero h1 { color: var(--wine); }
.search-pill { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--muted); }
.search-pill svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.search-pill input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 15px; color: var(--ink); }
.product-card { padding: 10px; gap: 6px; }
.product-card .product-photo { position: relative; }
.product-card .thumb, .product-card .garment { border-radius: 20px; }
.product-card .name { font-size: 14px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.product-card .seller { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-card .price { font-size: 20px; }
.product-card .btn.small { min-height: 36px; font-size: 12px; margin-top: 2px; }
.photo-tags { position: absolute; top: 8px; left: 8px; right: 52px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.product-detail .product-photo { position: relative; }
.similar-flag { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; align-items: flex-start; gap: 4px; padding: 6px 8px; border-radius: 12px;
  background: var(--err-bg); color: var(--err-ink); font-size: 10px; font-weight: 700; line-height: 1.25; cursor: pointer; box-shadow: var(--shadow-sm); z-index: 1; }
.similar-flag svg { width: 12px; height: 12px; flex: none; margin-top: 1px; }
.similar-flag.static { position: static; border: 0; font: inherit; font-size: 13px; text-align: left; padding: 10px 12px; }
.product-card .similar-flag ~ .heart-btn { top: auto; bottom: 8px; }
.h-scroll { grid-auto-columns: minmax(200px, 70%); }
.checkout-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--blush); border-radius: 16px; padding: 10px; }
.checkout-item .thumb, .checkout-item .garment { width: 64px; height: 64px; border-radius: 12px; }
.checkout-lines { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); }
.checkout-lines > div { display: flex; justify-content: space-between; gap: 12px; }
.checkout-lines > div > span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
.checkout-lines .total { padding-top: 8px; border-top: 1px solid var(--blush-3); font-family: 'Newsreader', Georgia, serif; font-size: 20px; font-weight: 600; color: var(--plum); }
.checkout-lines .total span:last-child { color: var(--plum); }

/* ---------- Closet extras ---------- */
.item-card { position: relative; }
.item-card .more-btn { position: absolute; right: 10px; bottom: 34px; width: 32px; height: 32px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.item-card .meta { padding-right: 30px; }
.sort-label { flex: none; align-self: center; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pill.sort-chip { border: 0; cursor: pointer; background: var(--blush-2); color: var(--muted); padding: 7px 12px; min-height: 30px; font: inherit; font-size: 11px; font-weight: 700; }
.pill.sort-chip.on { background: var(--rose); color: #3F0019; }
.sort-chip .dot { width: 6px; height: 6px; border-radius: 999px; background: #BA1A1A; }
.quick-log { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b) + 22px); z-index: 10; display: flex; justify-content: center; }
.quick-log .btn { max-width: 340px; justify-content: space-between; padding-inline: 20px; box-shadow: 0 10px 24px rgba(79, 18, 30, 0.25); background: var(--plum); }
@media (min-width: 1024px) { .quick-log { bottom: 16px; } }
.metric.eco { grid-column: 1 / -1; background: var(--blush); }

/* =====================================================================
   Always the phone app: same mobile layout on laptops and projectors.
   ===================================================================== */
main { max-width: 480px !important; margin: 0 auto; padding: 8px 16px 24px !important; }
.topbar { padding-left: max(16px, calc(50vw - 224px)); padding-right: max(16px, calc(50vw - 224px)); }
.topnav, .topnav:not([hidden]) { display: none !important; }
.tabbar:not([hidden]) { display: grid !important; }
.top-right > .bell:not([hidden]) { display: inline-flex !important; }
body { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 40px) !important; }
h1 { font-size: 30px !important; }
.home-layout, .home-grid, .landing, .product-detail { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; }
.home-layout > * { grid-area: auto !important; }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.bento { grid-template-columns: 1fr 1fr !important; }
.tiles.four, .stat-row.four { grid-template-columns: repeat(2, 1fr) !important; }
.toast { bottom: calc(var(--tabbar-h) + var(--safe-b) + 28px) !important; }
.sheet { left: 50% !important; right: auto !important; top: auto !important; bottom: 0 !important; transform: translateX(-50%) !important;
  width: min(480px, 100vw) !important; border-radius: 40px 40px 0 0 !important; }
.sheet::before { display: block !important; }
.landing-hero h1 { font-size: 34px !important; }
.quick-log { bottom: calc(var(--tabbar-h) + var(--safe-b) + 22px) !important; }
.photo-drop svg { width: 40px; height: 40px; fill: none; stroke: var(--wine); stroke-width: 1.8; }
.photo-drop { aspect-ratio: 4 / 3; max-height: 320px; background: var(--blush); border-color: var(--blush-3); }

/* closet cards (Stitch) */
.closet-grid .item-card { padding: 6px; gap: 0; }
.item-card .card-open { all: unset; cursor: pointer; display: block; }
.item-card .meta { padding: 8px 6px 2px; padding-right: 6px; gap: 0; }
.item-card .meta .name { font-size: 14px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.item-card .more-btn { position: static; flex: none; width: 24px; height: 24px; font-size: 18px; color: var(--muted); }
.item-card .foot { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 4px; font-size: 11px; font-weight: 700; color: var(--cherry); }
.item-card .foot.idle { color: #BA1A1A; }
.log-btn { width: 26px; height: 26px; border: 0; border-radius: 999px; background: var(--blush-2); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.log-btn:hover { background: var(--rose); color: #3F0019; }
.log-btn svg { width: 14px; height: 14px; }
.swap-btn { background: var(--plum); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 10px; font-weight: 700; text-decoration: none; }
.pill.wide.bl { right: 8px; justify-content: center; background: rgba(242, 222, 221, 0.95); color: #EC909B; color: var(--wine); }
.round-btn { width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px; background: var(--wine); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); }
.round-btn svg { width: 20px; height: 20px; }
.idle-banner { flex-direction: row !important; align-items: center; text-decoration: none; color: inherit; gap: 14px; }
.flower-badge { width: 48px; height: 48px; flex: none; border-radius: 999px; background: var(--cherry); display: grid; place-items: center; overflow: hidden; }
.flower-badge img { width: 34px; height: auto; }
.menu-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--blush); color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-align: left; }
.menu-row svg { width: 20px; height: 20px; color: var(--cherry); flex: none; }
.sheet .btn svg, .sheet label.btn svg { width: 20px; height: 20px; }
label.btn { cursor: pointer; }

/* insights extras */
.dot-pink { width: 10px; height: 10px; border-radius: 999px; background: var(--hot-pink); }
.icon-dot { width: 32px; height: 32px; border-radius: 999px; background: var(--blush-2); color: var(--plum); display: grid; place-items: center; font-weight: 700; }
.icon-dot.rose { background: var(--rose); color: #3F0019; }
.bento.two .metric { justify-content: flex-start; }

/* ---------- landing (Stitch) ---------- */
.landing { display: flex !important; flex-direction: column; gap: 18px; padding-top: 0 !important; }
.landing-hero { align-items: center !important; text-align: center; gap: 10px !important; padding: 0 4px; }
.landing-hero .landing-chars { width: min(280px, 80%); filter: drop-shadow(0 6px 12px rgba(107, 40, 51, 0.15)); }
.landing-hero h1 { font-size: 32px !important; line-height: 1.15; color: var(--plum); }
.landing-hero h1 em { color: var(--cherry); font-style: italic; font-weight: 500; }
.landing-hero p { max-width: 320px; }
.landing-hero .btn { max-width: 320px; margin-top: 4px; }
.land-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.land-tile { background: var(--surface); border-radius: 24px; padding: 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px; }
.land-tile strong { font-family: 'Newsreader', Georgia, serif; font-size: 17px; color: var(--plum); }
.land-tile .small { font-size: 12px; line-height: 1.35; }
.land-ic { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-size: 15px; margin-bottom: 4px; }
.auth-card { border-radius: 32px !important; }
.topbar .join-btn { display: none; }
.land-features { align-self: center; gap: 8px !important; margin: 0 !important; }
.land-features .feature { align-items: center; font-size: 16px; }
.land-features .dot { width: 14px; height: 14px; margin-top: 0 !important; }
.land-features strong { color: var(--plum); font-weight: 800; }

/* ---------- Recreate this look ---------- */
.inspo-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.inspo-chars { width: min(240px, 70%); height: auto; filter: drop-shadow(0 6px 12px rgba(107, 40, 51, 0.15)); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .inspo-chars { animation: none; } }
.inspo-hero h1 { color: var(--cherry); }
.inspo-hero .sub { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 18px; color: var(--wine); }
.inspo-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 220px; padding: 20px; border-radius: 32px; cursor: pointer; overflow: hidden;
  background: linear-gradient(135deg, var(--rose), var(--periwinkle)); border: 2px dashed rgba(171, 46, 89, 0.35); box-shadow: var(--shadow-sm); }
.inspo-drop strong { font-family: 'Newsreader', Georgia, serif; font-size: 22px; color: var(--plum); }
.inspo-emoji { width: 64px; height: 64px; border-radius: 999px; background: var(--surface); display: grid; place-items: center; font-size: 30px; box-shadow: var(--shadow-sm); margin-bottom: 4px; }
.inspo-drop.has-pic { padding: 0; border: 0; min-height: 0; background: var(--blush-2); }
.inspo-drop.has-pic img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.inspo-drop .swap-pic { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); }

/* ---------- add a piece: AI reading ---------- */
.reading { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, var(--rose), var(--periwinkle)); font-size: 14px; }
.reading strong { font-family: 'Newsreader', Georgia, serif; font-size: 20px; color: var(--plum); line-height: 1.2; }
.reading-ic { width: 40px; height: 40px; flex: none; border-radius: 999px; background: var(--surface); color: var(--cherry); display: grid; place-items: center; font-size: 18px; box-shadow: var(--shadow-sm); }
.edit-details > summary { list-style: none; font-size: 13px; color: var(--cherry); }
.edit-details > summary::-webkit-details-marker { display: none; }
.edit-details:not([open]) > summary::after { content: ' · Not quite right? Edit'; color: var(--muted); font-weight: 500; }
.edit-details[open] > summary { margin-bottom: 10px; }

/* =====================================================================
   Clean girl refinement (Nov 2026)
   - Warm, skin-like neutrals with blush, wine kept as the accent
   - Fewer typefaces, calmer weights (500-600), tighter headline tracking
   - Body 15px / 1.55, nothing smaller than 11px (iOS: 17pt body, 11pt min)
   - Hairline borders + whisper shadows instead of heavy cards
   - Bold, obvious buttons and short scannable lines for Gen Z
   ===================================================================== */
:root {
  --cream: #FCF8F5;          /* warm porcelain page */
  --surface: #FFFFFF;
  --blush: #F9F0EC;          /* latte-blush fill */
  --blush-2: #F5E7E2;
  --blush-3: #EEDBD5;
  --rose: #F7DCE0;
  --periwinkle: #E7E7FA;
  --peri-ink: #3C3F72;
  --ink: #2A1E1F;
  --muted: #7A6466;
  --plum: #4A1D26;
  --title: #3B2427;          /* espresso headlines */
  --wine: #6B2833;
  --cherry: #A8325A;
  --hairline: rgba(74, 29, 38, 0.06);
  --shadow-sm: 0 1px 2px rgba(74, 29, 38, 0.03), 0 4px 14px rgba(74, 29, 38, 0.05);
  --shadow-md: 0 2px 4px rgba(74, 29, 38, 0.03), 0 10px 28px rgba(74, 29, 38, 0.07);
  --radius: 28px;
}

body { font-size: 15px; line-height: 1.55; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* headlines: soft serif, calmer weight, tight tracking */
h1, h2, h3 { color: var(--title); font-weight: 500; letter-spacing: -0.02em; }
h1 { font-size: 30px !important; line-height: 1.12; }
h2 { font-size: 21px; line-height: 1.2; }
h3 { font-size: 17px; line-height: 1.25; }
h1 em, .sub, .today-hero .sub, .inspo-hero .sub { color: var(--cherry); }
.today-hero h1 { color: var(--title); font-size: 28px !important; }
.today-hero h1::after { content: ''; display: block; width: 32px; height: 2px; margin: 10px auto 0; border-radius: 2px; background: var(--rose); }
.inspo-hero h1 { color: var(--title); }

/* small labels: quiet, spaced, never below 11px */
.eyebrow, .k, .metric .k, .mini-stats .k, .sort-label, .vibe-ribbon .label {
  font-size: 11px !important; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.eyebrow { color: var(--cherry); }
.small { font-size: 13px; }
.pill, .vibe-ribbon .vibe, .pill.sort-chip, .idle-thumbs figcaption { font-size: 11px !important; font-weight: 600; letter-spacing: 0.02em; }
.tabbar a, .tabbar button { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; }
.muted, .small.muted, .s { color: var(--muted); }

/* numbers read like a magazine */
.metric .v, .mini-stats .v, .stat .big, .tile-value, .price, .plan .price { font-weight: 500; letter-spacing: -0.02em; color: var(--title); }

/* calmer surfaces: hairline + whisper shadow */
.card, .tile, .plan, .metric, .item-card, .product-card, .land-tile, .vibe-ribbon, .search-pill, .month-pill {
  border: 1px solid var(--hairline) !important; box-shadow: var(--shadow-sm); }
.today .home-outfit-card { box-shadow: var(--shadow-md); }
.card { padding: 20px; gap: 14px; }
.today .card { border-radius: 32px; padding: 20px; }
.reason, .inner, .stat, .mini-stats > div, .cpw-row, .checkout-item, .alert-row, .teaser { background: var(--blush); border: 0; }
.idle-card, .gap-card, .card.soft, .idle-banner { background: var(--blush) !important; }
.thumb, .outfit-pieces img, .no-photo { background: var(--blush-2); }

/* more breathing room */
main { gap: 20px; }
.today, .stack[style*="gap:18px"], .stack[style*="gap:22px"] { gap: 22px !important; }
.page-head { gap: 6px; }

/* buttons: bold and obvious, soft everywhere else */
.btn { font-weight: 700; letter-spacing: 0.01em; box-shadow: none; }
.btn.primary { background: var(--cherry); box-shadow: 0 6px 16px rgba(168, 50, 90, 0.22); }
.btn.dark { background: var(--wine); box-shadow: 0 6px 16px rgba(107, 40, 51, 0.2); }
.btn:not(.primary):not(.dark):not(.ghost):not(.soft) { background: var(--periwinkle); color: var(--peri-ink); }
.btn.soft { background: var(--blush-2); color: var(--wine); }
.chip { background: var(--surface); border: 1px solid var(--blush-3); color: var(--ink); font-weight: 600; }
.chip.on { background: var(--wine); border-color: var(--wine); color: #fff; }
.pill.rose { background: var(--rose); color: #5A1830; }
.pill.blush { background: var(--blush-2); color: var(--wine); }
.pill.peri { background: var(--periwinkle); color: #2A2D5E; }

/* tab bar: quieter, with an active dot */
.tabbar { box-shadow: 0 10px 30px rgba(74, 29, 38, 0.10); border: 1px solid var(--hairline); }
.tabbar a[aria-current="page"] { color: var(--cherry) !important; }
.tabbar a[aria-current="page"]::after { content: ''; position: absolute; bottom: 9px; width: 4px; height: 4px; border-radius: 999px; background: var(--cherry); }
.tabbar a[aria-current="page"] span { transform: translateY(-3px); }
.tabbar .tab-snap svg { background: var(--wine); box-shadow: 0 8px 20px rgba(107, 40, 51, 0.25); }

/* gentle feedback: every tap answers back */
.card, .item-card, .product-card, .metric, .btn, .chip, .pill.sort-chip, .menu-row, .land-tile { transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; }
.item-card:active, .product-card:active, a.metric:active, .menu-row:active { transform: scale(0.98); }
@media (hover: hover) { .item-card:hover, .product-card:hover, a.metric:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#view > * > * { animation: rise 0.35s ease both; }
#view > * > *:nth-child(2) { animation-delay: 0.04s; } #view > * > *:nth-child(3) { animation-delay: 0.08s; }
#view > * > *:nth-child(4) { animation-delay: 0.12s; } #view > * > *:nth-child(n+5) { animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) { #view > * > * { animation: none; } .card, .btn { transition: none; } }

/* inputs */
.field input, .field select, .field textarea { border: 1px solid var(--blush-3); background: var(--surface); font-size: 16px; }
.field input:focus, .field select:focus, .search-pill:focus-within, .ask-row:focus-within { outline: none; border-color: var(--cherry); box-shadow: 0 0 0 4px rgba(168, 50, 90, 0.10); }
label.field { font-size: 13px; font-weight: 600; color: var(--ink); }

/* ---------- profile picture + account ---------- */
.avatar-btn { display: inline-flex; width: 40px; height: 40px; border-radius: 999px; padding: 2px; background: linear-gradient(135deg, var(--rose), var(--periwinkle)); text-decoration: none; }
.avatar-btn[hidden] { display: none !important; }
.avatar-btn[aria-current="page"] { background: var(--cherry); }
.avatar { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; border: 2px solid var(--surface); background: var(--blush-2); }
.initials-avatar { display: grid; place-items: center; font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 15px; color: var(--wine); }
.top-right { gap: 6px !important; }
.acc-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 4px; }
.acc-photo { position: relative; width: 104px; height: 104px; border-radius: 999px; padding: 3px; background: linear-gradient(135deg, var(--rose), var(--periwinkle)); cursor: pointer; margin-bottom: 6px; }
.avatar.big { font-size: 36px; }
.acc-cam { position: absolute; right: 0; bottom: 2px; width: 32px; height: 32px; border-radius: 999px; background: var(--wine); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); border: 2px solid var(--surface); }
.acc-cam svg { width: 16px; height: 16px; }
.acc-hero h1 { font-size: 26px !important; }
.acc-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 16px; text-decoration: none; color: var(--ink); }
.acc-row:hover { background: var(--blush); }
.acc-row strong { font-size: 15px; font-weight: 600; }
.acc-ic { width: 40px; height: 40px; border-radius: 14px; background: var(--blush); display: grid; place-items: center; font-size: 18px; }
.acc-chev { font-size: 22px; color: var(--muted); }
.account .field input[type="date"] { min-height: 48px; }
.boutique-card { background: linear-gradient(135deg, var(--periwinkle), var(--surface)) !important; }
.boutique-card .h-scroll { grid-auto-columns: minmax(200px, 70%); }

/* ---------- "Show another": three dots while loading, no jump ---------- */
.loading-dots { display: flex; justify-content: center; gap: 6px; padding: 2px 0; }
.loading-dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--cherry); opacity: 0.25; animation: dot 1s ease-in-out infinite; }
.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .loading-dots span { animation-duration: 2s; transform: none !important; } }
.card.is-loading > :not(.loading-dots) { opacity: 0.45; transition: opacity 0.2s; pointer-events: none; }
.reason { padding: 12px 14px; }

/* ---------- Free plan: Ask Loop locked, in brand colors ---------- */
.ask-locked { background: linear-gradient(150deg, var(--rose) 0%, #FFF0F3 45%, var(--periwinkle) 100%) !important; }
.lock-preview { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.55); }
.lock-preview .bubble { font-size: 13px; padding: 9px 12px; filter: blur(1.6px); user-select: none; }
.lock-badge { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 999px; background: var(--wine); color: #fff; display: grid; place-items: center; font-size: 22px; box-shadow: 0 8px 20px rgba(107, 40, 51, 0.28); }
.lock-copy { font-size: 14px; color: var(--ink); }
.lock-copy strong { color: var(--plum); }

/* Prices and text stay readable on the maroon Plus cards */
.plan.plus, .plan.plus h2, .plan.plus h3, .plan.plus li, .plan.plus .price { color: #fff !important; }
.plan.plus .small, .plan.plus p { color: #F7DCE0 !important; }
.plan.plus .price { font-size: 44px; }
.card.plum .stat .big, .card.plum .tile-value { color: var(--plum) !important; }
.plus-banner .small, .plus-banner .row span:last-child { color: #FFD9E0 !important; }

/* ---------- messages ---------- */
.msg-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.thread-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 24px; background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); }
.thread-row.unread { background: #FFF6F7; }
.thread-row.unread strong { color: var(--cherry); }
.thread-last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thumb { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; background: var(--blush-2); display: grid; place-items: center; font-family: 'Newsreader', Georgia, serif; color: var(--wine); }
.chat-thumb.big { width: 64px; height: 64px; }
.chat-page { display: flex; flex-direction: column; gap: 12px; min-height: calc(100vh - 220px); }
.chat-head { flex-direction: row !important; align-items: center; gap: 12px; padding: 12px !important; position: sticky; top: 64px; z-index: 5; }
.chat-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-log { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 4px 0 8px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 20px; display: flex; flex-direction: column; gap: 3px; font-size: 15px; line-height: 1.4; }
.msg.me { align-self: flex-end; background: var(--wine); color: #fff; border-bottom-right-radius: 6px; }
.msg.them { align-self: flex-start; background: var(--surface); border: 1px solid var(--hairline); border-bottom-left-radius: 6px; }
.msg-meta { font-size: 11px; opacity: 0.7; }
.offer-tag { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--rose); color: #5A1830; }
.chat-compose { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b) + 22px); display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-md); border: 1px solid var(--hairline); }
.chat-compose input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 16px; color: var(--ink); }
.chat-compose .send { width: 42px; height: 42px; border: 0; border-radius: 999px; background: var(--cherry); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.chat-compose .send svg { width: 20px; height: 20px; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-quick button { border: 0; background: var(--blush-2); color: var(--ink); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.order-row { flex-direction: row !important; align-items: center; gap: 12px; }

/* ---------- checkout: sizes + delivery ---------- */
.size-row { display: flex; flex-wrap: wrap; gap: 8px; }
.size-chip { min-width: 52px; height: 44px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--blush-3); background: var(--surface); font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.size-chip.on { background: var(--wine); border-color: var(--wine); color: #fff; }
.seg-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-choice button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: 18px; border: 1px solid var(--blush-3); background: var(--surface); font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.seg-choice button.on { border-color: var(--cherry); background: #FFF6F7; box-shadow: 0 0 0 3px rgba(168, 50, 90, 0.10); }
.addr-row { display: grid; grid-template-columns: 1.4fr 0.7fr 0.9fr; gap: 8px; }

/* Sent messages in the brand pink instead of red */
.msg.me { background: var(--hot-pink, #FC6D98); color: #fff; }
.msg.me .msg-meta { opacity: 0.85; }
.msg.me .offer-tag { background: rgba(255, 255, 255, 0.9); color: #8A1142; }
.chat-compose .send { background: var(--hot-pink, #FC6D98); }

/* ---------- Depop-style shop cards: photo first, real pictures ---------- */
.product-card.depop { padding: 0; gap: 0; overflow: hidden; border-radius: 22px; }
.product-card.depop .product-photo { position: relative; }
.product-card.depop .thumb { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; display: block; background: var(--blush-2); }
.product-card.depop .photo-tags { top: 10px; left: 10px; }
.product-card.depop .heart-btn { top: auto; bottom: 10px; right: 10px; width: 36px; height: 36px; background: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow-sm); }
.product-card.depop .similar-flag { top: 10px; left: 10px; right: 10px; }
.product-card.depop .similar-flag ~ .heart-btn { bottom: 10px; }
.depop-meta { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 4px; }
.depop-meta .price { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; font-size: 17px !important; font-weight: 800 !important; color: var(--ink) !important; letter-spacing: -0.01em; }
.depop-size { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.depop-meta .name { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.depop-meta .seller { font-size: 11px; font-weight: 600; color: var(--muted); }
.depop-meta .why { font-size: 11px; }
.product-card.depop > .btn { margin: 6px 12px 12px; width: auto; min-height: 36px; font-size: 12px; }
.product-card.depop > span[style] { padding: 0 12px; }
.photo-soon { aspect-ratio: 4 / 5; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--blush-2); }
.h-scroll .product-card.depop { min-width: 0; }

/* Cropped photos: the frame stays put, the clothing fills it */
.crop-box { display: block; overflow: hidden; position: relative; padding: 0 !important; }
.crop-box > img.cropped { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; aspect-ratio: auto !important; box-shadow: none !important; }
.crop-box.thumb { aspect-ratio: 1; }
.product-card.depop .crop-box.thumb { aspect-ratio: 4 / 5; border-radius: 0; }
.crop-box.chat-thumb { display: block; }

/* ---------- v37: unlock chip, brand green accents, smaller outfit photos ---------- */
:root { --leaf: #A0C27F; --leaf-ink: #3F6B22; --leaf-soft: #EEF5E6; }
/* Ask Loop for Free members: a soft "unlock" chip instead of a padlock */
.unlock-chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(90deg, #FC6D98, #8F8FCF); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 8px 22px rgba(143, 143, 207, 0.35); }
.unlock-chip svg { width: 15px; height: 15px; fill: #fff; stroke: #fff; }
/* Brand green */
.pill.leaf-soft { background: var(--leaf-soft); color: var(--leaf-ink); border: 1px solid #CFE3BC; }
.src-badge.secondhand { background: var(--leaf); color: #1F3A10; }
.today .reason, .reason { background: var(--leaf-soft); border-left: 3px solid var(--leaf); }
.today .reason p, .reason p { color: #2E4A1C; }
.icon-dot.leaf { background: var(--leaf-soft); color: var(--leaf-ink); }
.eco-green { color: var(--leaf-ink); font-weight: 700; }
.eco-title::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--leaf); margin-right: 8px; vertical-align: middle; }
.today .btn.soft .icon, .wore-check { color: var(--leaf); }
/* Today's outfit: smaller photos so the whole fit fits on one screen */
.today .outfit-pieces.home-outfit-pieces { grid-template-columns: repeat(auto-fit, minmax(70px, 92px)); justify-content: center; gap: 10px; }
.today .outfit-pieces img, .today .outfit-pieces .no-photo, .today .outfit-pieces .crop-box { border-radius: 14px; aspect-ratio: 4 / 5; }
.today .outfit-pieces figcaption { font-size: 10.5px; }