/* Pro look mockups: shared tokens and parts. Static design review only, no backend. */
@font-face { font-family: "DM Sans"; src: url("/site-fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
:root {
  --navy:#12233B; --navy-2:#0C1A2D; --navy-3:#1C3150; --teal:#2D8C87; --teal-d:#1F7773; --teal-l:#58B9B1; --amber:#F4B73F; --amber-d:#E2A21F;
  --cream:#FBF8F2; --paper:#FFFFFF; --ink:#0F1E2E; --ink-2:#435468; --ink-3:#5A6A80; --line:#E6DFD0; --line-2:#D9D0BC; --good:#0E7A62; --good-bg:#DDF3EA;
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2,.7,.2,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--cream); line-height: 1.45; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--amber); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* mockup review bar (not part of the product) */
.mockbar { background: #0A1422; color: #C9D3E4; font: 500 12.5px/1 var(--font); padding: 0 16px; min-height: 36px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mockbar b { color: #fff; font-weight: 700; letter-spacing: .06em; font-size: 11px; }
.mockbar a { color: #fff; text-decoration: none; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); }
.mockbar a[aria-current="true"] { background: var(--amber); color: var(--navy); border-color: var(--amber); font-weight: 700; }
.mockbar .sp { flex: 1; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; font-weight: 700; border-radius: 999px; transition: transform .16s var(--ease), background .16s, box-shadow .16s; white-space: nowrap; }
.btn-primary { background: var(--amber); color: var(--navy); box-shadow: 0 10px 24px -12px rgba(226,162,31,.9); }
.btn-primary:hover { background: #FFC85A; transform: translateY(-1px); }
.btn-dark { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-2); }
.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line-2); }
.btn-ghost:hover { background: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* visual parts */
.chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; border-radius: 999px; padding: 5px 11px; }
.chip-good { background: var(--good-bg); color: #0B4F3A; }
.chip-amber { background: #FBE3A6; color: #4A3300; }
.chip-glass { background: rgba(10,20,34,.62); color: #fff; backdrop-filter: blur(10px); }
.imgfill { width: 100%; height: 100%; object-fit: cover; }

/* before and after slider */
.ba { position: relative; overflow: hidden; --pos: 52%; background: var(--navy-3); isolation: isolate; user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba .after { clip-path: inset(0 0 0 var(--pos)); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none; box-shadow: 0 0 14px rgba(0,0,0,.35); }
.ba .handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2312233B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/22px no-repeat; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba:focus-within { outline: 3px solid var(--amber); outline-offset: 3px; }
.ba .tag { position: absolute; top: 14px; z-index: 2; }
.ba .tag.l { left: 14px; } .ba .tag.r { right: 14px; }

/* tile (checkbox card with image) */
.tile { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tile-img { position: relative; display: block; overflow: hidden; aspect-ratio: 4/5; background: #E4DFD2; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.tile-img img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; background: #E4DFD2; }
/* a skeleton shows until the picture arrives; a tile whose picture cannot load shows a quiet plain box, never the browser's broken-picture icon (UXF-116) */
.tile-img { background: linear-gradient(100deg, #E4DFD2 30%, #EFEBE1 50%, #E4DFD2 70%) 0 0 / 200% 100%; animation: tile-shimmer 1.4s linear infinite; }
.tile-img.is-loaded, .tile-img.is-bad { animation: none; background: #E4DFD2; }
.tile-img.is-bad img { visibility: hidden; }
@keyframes tile-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .tile-img { animation: none; } }
.tile-badge { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.9); border: 2px solid rgba(18,35,59,.18); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; color: var(--navy); transition: .16s var(--ease); }
.tile input:checked ~ .tile-img .tile-badge { background: var(--navy); border-color: #fff; color: #fff; transform: scale(1.06); }
.tile input:checked ~ .tile-img { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--navy); }
.tile input:focus-visible ~ .tile-img { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--teal); }
.tile input:checked:focus-visible ~ .tile-img { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--navy), 0 0 0 9px var(--teal); }
.tile-cap { display: block; padding-top: 12px; }
.tile-cap b { display: block; font-weight: 700; color: var(--ink); }
.tile-cap small { display: block; color: var(--ink-2); }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* picked slots */
.slots { display: inline-flex; gap: 8px; align-items: center; }
.slot { width: 36px; height: 45px; border-radius: 10px; border: 2px dashed var(--line-2); background: #fff center/cover no-repeat; }
.slot.on { border: 2px solid var(--navy); }
.slot.own { background: #F3EEDF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M50 27v-4.5a6 6 0 1 0-6-6' stroke='%23E2A21F' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M50 27 14 47a4 4 0 0 0 2 7.5h68a4 4 0 0 0 2-7.5z' stroke='%23E2A21F' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M33 50l-14 11 7 10 7-5v26h34V66l7 5 7-10-14-11-9-3c-1 7-5 11-10 11s-9-4-10-11z' fill='%2312233B'/%3E%3C/svg%3E") center / 70% no-repeat; }
/* My own clothes: a text card with an icon on a soft tile, the same 4:5 shape as the picture cards (no photo: the example model is not wearing the member's clothes) */
.own-art { display: grid; place-items: center; background: linear-gradient(160deg, #F6F1E3, #EAE3D0); border: 1px solid var(--line-2); }
.own-art .own-ic { width: 46%; height: auto; }
.own-note { color: var(--ink-3); font-size: 12.5px; line-height: 1.35; margin-top: 4px; }

/* segmented, switch */
.seg { display: inline-flex; background: #EFEBE1; border-radius: 999px; padding: 4px; gap: 2px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; }
.seg span { display: block; padding: 10px 18px; border-radius: 999px; font-weight: 700; color: var(--ink-2); cursor: pointer; font-size: 15px; }
.seg input:checked + span { background: var(--navy); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
.switch { position: relative; display: inline-block; width: 56px; height: 32px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: #CFC8B6; transition: .2s var(--ease); }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: .2s var(--ease); }
.switch input:checked ~ i { background: var(--teal-d); }
.switch input:checked ~ i::after { transform: translateX(24px); }
.switch input:focus-visible ~ i { outline: 3px solid var(--teal); outline-offset: 3px; }

.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; transition: .25s var(--ease); z-index: 60; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* silhouette stand-in (temporary) */
.sil { background: linear-gradient(160deg, #D6DBE4, #B8C0CE); display: grid; place-items: end center; overflow: hidden; }
.sil svg { width: 70%; height: auto; color: #8995A8; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled ~ i { opacity: .45; }