/* ShirtMath Platform — account/auth UI (Stage 1). Additive, staging-only.
   Reuses the redesign-system.css design tokens (--paper/--clay/--ink/--disp…)
   so login/signup/account match the warm editorial look, not a bolted-on form. */

/* ---- top-right account control in the header ---- */
.sm-acct-ctl{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.sm-acct-btn{font-family:var(--body,system-ui);font-size:14px;font-weight:600;
  border:1px solid var(--line,#E4D8C2);background:var(--card,#FCF8EF);color:var(--ink,#2A2018);
  padding:8px 14px;border-radius:999px;cursor:pointer;transition:.18s var(--ease,ease);white-space:nowrap}
.sm-acct-btn:hover{border-color:var(--clay,#FF624F);color:var(--clay,#FF624F)}
.sm-acct-btn.primary{background:var(--clay,#FF624F);border-color:var(--clay,#FF624F);color:#fff}
.sm-acct-btn.primary:hover{background:var(--clay-deep,#E14A38);color:#fff}
.sm-avatar{width:36px;height:36px;border-radius:999px;border:1px solid var(--line,#E4D8C2);
  background:var(--card-2,#F2E8D7);color:var(--ink,#2A2018);font-family:var(--mono,monospace);
  font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:.18s var(--ease,ease);letter-spacing:.02em}
.sm-avatar:hover{border-color:var(--clay,#FF624F)}
.sm-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:var(--card,#FCF8EF);
  border:1px solid var(--line,#E4D8C2);border-radius:var(--r-md,11px);box-shadow:0 18px 44px rgba(42,32,24,.16);
  padding:6px;z-index:1200;display:none}
.sm-menu.open{display:block}
.sm-acct-wrap{position:relative;display:inline-flex}
.sm-menu a,.sm-menu button{display:block;width:100%;text-align:left;background:none;border:0;
  font-family:var(--body,system-ui);font-size:14px;color:var(--ink,#2A2018);padding:9px 12px;
  border-radius:var(--r-sm,6px);cursor:pointer;text-decoration:none}
.sm-menu a:hover,.sm-menu button:hover{background:var(--paper-2,#EDE3D2);color:var(--clay,#FF624F)}
.sm-menu .sm-menu-sep{height:1px;background:var(--line-2,#EFE6D5);margin:6px 4px}
.sm-menu .sm-menu-who{padding:9px 12px 4px;font-size:12px;color:var(--ink-3,#9C8C77);
  font-family:var(--mono,monospace);word-break:break-all}

/* ---- full-panel auth/account view (over the SPA) ---- */
#smAccountRoot{position:fixed;inset:0;background:var(--paper,#F4EDE0);z-index:1100;overflow:auto;display:none}
#smAccountRoot.on{display:block}
.sm-shell{max-width:960px;margin:0 auto;padding:26px 22px 80px}
.sm-topbar{display:flex;align-items:center;gap:14px;padding:6px 0 22px}
.sm-back{font-family:var(--body,system-ui);font-size:14px;color:var(--ink-2,#6C5D4D);background:none;
  border:0;cursor:pointer;padding:6px 4px}
.sm-back:hover{color:var(--clay,#FF624F)}
.sm-crumb{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3,#9C8C77)}
.sm-crumb b{color:var(--ink-2,#6C5D4D);font-weight:600}

/* auth card (login/signup) */
.sm-authwrap{max-width:420px;margin:4vh auto 0}
.sm-card{background:var(--card,#FCF8EF);border:1px solid var(--line,#E4D8C2);border-radius:var(--r-lg,18px);
  padding:30px 28px;box-shadow:0 12px 34px rgba(42,32,24,.07)}
.sm-h{font-family:var(--disp,Georgia);font-size:30px;line-height:1.1;letter-spacing:-.015em;
  color:var(--ink,#2A2018);margin:0 0 6px}
.sm-sub{font-family:var(--body,system-ui);font-size:14.5px;color:var(--ink-2,#6C5D4D);margin:0 0 22px}
.sm-field{margin:0 0 15px}
.sm-field label{display:block;font-size:12px;font-family:var(--mono,monospace);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3,#9C8C77);margin:0 0 6px}
.sm-field input{width:100%;box-sizing:border-box;font-family:var(--body,system-ui);font-size:15.5px;
  color:var(--ink,#2A2018);background:var(--paper,#F4EDE0);border:1px solid var(--line,#E4D8C2);
  border-radius:var(--r-sm,6px);padding:11px 13px;transition:.16s var(--ease,ease)}
.sm-field input:focus{outline:none;border-color:var(--clay,#FF624F);background:#fff;
  box-shadow:0 0 0 3px rgba(255,98,79,.14)}
.sm-btn{width:100%;font-family:var(--body,system-ui);font-size:15.5px;font-weight:600;color:#fff;
  background:var(--clay,#FF624F);border:1px solid var(--clay,#FF624F);border-radius:999px;
  padding:12px 18px;cursor:pointer;transition:.18s var(--ease,ease)}
.sm-btn:hover{background:var(--clay-deep,#E14A38)}
.sm-btn:disabled{opacity:.6;cursor:default}
.sm-btn.ghost{background:none;color:var(--ink,#2A2018);border-color:var(--line,#E4D8C2)}
.sm-btn.ghost:hover{border-color:var(--clay,#FF624F);color:var(--clay,#FF624F);background:none}
.sm-alt{text-align:center;font-size:14px;color:var(--ink-2,#6C5D4D);margin:18px 0 0}
.sm-alt a{color:var(--clay,#FF624F);cursor:pointer;text-decoration:none;font-weight:600}
.sm-alt a:hover{text-decoration:underline}
.sm-err{background:#fbe9e4;border:1px solid #e6b7a6;color:#8a2c12;border-radius:var(--r-sm,6px);
  padding:10px 12px;font-size:13.5px;margin:0 0 15px;display:none}
.sm-err.on{display:block}
.sm-note{font-size:12.5px;color:var(--ink-3,#9C8C77);margin:14px 0 0;line-height:1.5}
.sm-soon-google{margin:16px 0 0;padding:11px 12px;border:1px dashed var(--line,#E4D8C2);border-radius:var(--r-sm,6px);
  text-align:center;font-size:13px;color:var(--ink-3,#9C8C77);font-family:var(--body,system-ui)}
.sm-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-3,#9C8C77);font-size:12px;
  font-family:var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase}
.sm-or::before,.sm-or::after{content:"";flex:1;height:1px;background:var(--line-2,#EFE6D5)}
.sm-google-btn{display:flex;align-items:center;justify-content:center;gap:9px}
.sm-g{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;
  background:#fff;border:1px solid var(--line,#E4D8C2);font-family:var(--disp,Georgia);font-weight:700;font-size:13px;
  color:#4285F4;line-height:1}

/* account overview + sub-nav */
.sm-acct-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px}
.sm-subnav{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line-2,#EFE6D5);padding:0 0 14px;margin:0 0 22px}
.sm-subnav a{font-family:var(--body,system-ui);font-size:14px;color:var(--ink-2,#6C5D4D);padding:7px 13px;
  border-radius:999px;cursor:pointer;text-decoration:none}
.sm-subnav a:hover{background:var(--paper-2,#EDE3D2)}
.sm-subnav a.on{background:var(--ink,#2A2018);color:var(--paper,#F4EDE0)}
.sm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.sm-tile{background:var(--card,#FCF8EF);border:1px solid var(--line,#E4D8C2);border-radius:var(--r-md,11px);padding:16px}
.sm-tile h4{font-family:var(--disp,Georgia);font-size:18px;margin:0 0 6px;color:var(--ink,#2A2018)}
.sm-tile p{font-size:13.5px;color:var(--ink-2,#6C5D4D);margin:0}
.sm-tile .sm-big{font-family:var(--mono,monospace);font-size:26px;color:var(--clay,#FF624F)}
.sm-empty{text-align:center;color:var(--ink-2,#6C5D4D);padding:44px 20px;font-size:15px}
.sm-empty .sm-h{font-size:22px;margin-bottom:8px}
.sm-priv{display:inline-block;font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--match,#5F7A57);border:1px solid var(--line,#E4D8C2);
  border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:middle}
.sm-scan{background:var(--card,#FCF8EF);border:1px solid var(--line,#E4D8C2);border-radius:var(--r-md,11px);
  padding:15px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.sm-scan .sm-scan-m{font-family:var(--mono,monospace);font-size:12.5px;color:var(--ink-2,#6C5D4D)}
.sm-list{display:flex;flex-direction:column;gap:10px}
@media(max-width:560px){.sm-shell{padding:18px 15px 70px}.sm-h{font-size:25px}}

/* ---- Stage 2: style survey ---- */
.sv-wrap{max-width:560px;margin:2vh auto 0}
.sv-top{margin:0 0 26px}
.sv-progress{height:6px;background:var(--line-2,#EFE6D5);border-radius:999px;overflow:hidden}
.sv-bar{height:100%;background:var(--clay,#FF624F);border-radius:999px;transition:width .35s var(--ease,ease)}
.sv-step{margin-top:8px;font-family:var(--mono,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3,#9C8C77)}
.sv-q{font-family:var(--disp,Georgia);font-size:30px;line-height:1.12;letter-spacing:-.015em;color:var(--ink,#2A2018);margin:0 0 8px}
.sv-sub{font-family:var(--body,system-ui);font-size:15px;color:var(--ink-2,#6C5D4D);margin:0 0 22px;line-height:1.5}
.sv-opts{display:flex;flex-direction:column;gap:10px}
.sv-opt{position:relative;display:flex;flex-direction:row;align-items:center;gap:13px;text-align:left;
  background:var(--card,#FCF8EF);border:1.5px solid var(--line,#E4D8C2);border-radius:var(--r-md,11px);
  padding:13px 44px 13px 15px;cursor:pointer;transition:.15s var(--ease,ease);font-family:var(--body,system-ui)}
.sv-opt-txt{display:flex;flex-direction:column;gap:2px}
.sv-opt-art{flex:0 0 auto;width:36px;height:32px;display:flex;align-items:center;justify-content:center}
.sv-opt-emoji{font-size:23px;line-height:1}
.sv-sw{width:100%;height:32px;display:block}
.sv-opt:hover{border-color:var(--clay,#FF624F)}
.sv-opt.on{border-color:var(--clay,#FF624F);background:#fbf1ea;box-shadow:0 0 0 3px rgba(255,98,79,.12)}
.sv-opt-l{font-size:16px;font-weight:600;color:var(--ink,#2A2018)}
.sv-opt-d{font-size:13px;color:var(--ink-2,#6C5D4D)}
.sv-check{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:999px;
  border:1.5px solid var(--line,#E4D8C2);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;transition:.15s var(--ease,ease)}
.sv-opt.on .sv-check{background:var(--clay,#FF624F);border-color:var(--clay,#FF624F)}
.sv-nav{display:flex;align-items:center;justify-content:space-between;margin-top:24px;gap:12px}
.sv-nav-r{display:inline-flex;gap:10px;align-items:center;margin-left:auto}
.sv-back{background:none;border:0;font-family:var(--body,system-ui);font-size:14px;color:var(--ink-2,#6C5D4D);cursor:pointer;padding:8px 4px}
.sv-back:hover{color:var(--clay,#FF624F)}
.sv-inline{width:auto!important;display:inline-block}
.sv-loved-cta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.sv-done{text-align:center;padding:2vh 0}
.sv-done-mark{width:56px;height:56px;border-radius:999px;background:var(--match,#5F7A57);color:#fff;font-size:28px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.sv-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 26px}
.sv-chip{font-family:var(--body,system-ui);font-size:13.5px;color:var(--ink,#2A2018);background:var(--card-2,#F2E8D7);
  border:1px solid var(--line,#E4D8C2);border-radius:999px;padding:6px 13px}
.sv-done-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* v2: section eyebrow, number inputs, brand chips, visual style shuffle */
.sv-eyebrow{font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--clay,#FF624F);margin:0 0 8px}
.sv-nums{display:flex;flex-wrap:wrap;gap:14px}
.sv-num{flex:1 1 160px}
.sv-num label{display:block;font-size:12px;font-family:var(--mono,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3,#9C8C77);margin:0 0 6px}
.sv-num input{width:100%;box-sizing:border-box;font-family:var(--body,system-ui);font-size:16px;color:var(--ink,#2A2018);
  background:var(--paper,#F4EDE0);border:1.5px solid var(--line,#E4D8C2);border-radius:var(--r-sm,6px);padding:11px 13px}
.sv-num input:focus{outline:none;border-color:var(--clay,#FF624F);background:#fff;box-shadow:0 0 0 3px rgba(255,98,79,.12)}
.sv-chips-pick{display:flex;flex-wrap:wrap;gap:9px}
.sv-brand{font-family:var(--body,system-ui);font-size:14px;color:var(--ink,#2A2018);background:var(--card,#FCF8EF);
  border:1.5px solid var(--line,#E4D8C2);border-radius:999px;padding:9px 15px;cursor:pointer;transition:.14s var(--ease,ease)}
.sv-brand:hover{border-color:var(--clay,#FF624F)}
.sv-brand.on{background:var(--clay,#FF624F);border-color:var(--clay,#FF624F);color:#fff}
.sv-shuffle{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sv-sh-card{background:var(--card,#FCF8EF);border:1.5px solid var(--line,#E4D8C2);border-radius:var(--r-md,11px);overflow:hidden;transition:.15s var(--ease,ease)}
.sv-sh-card.liked{border-color:var(--clay,#FF624F);box-shadow:0 0 0 3px rgba(255,98,79,.14)}
.sv-sh-card.passed{opacity:.42}
.sv-sh-img{aspect-ratio:1/1;background:var(--card-2,#F2E8D7);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sv-sh-img img{width:100%;height:100%;object-fit:cover}
.sv-sh-img.noimg::after{content:"no image";font-family:var(--mono,monospace);font-size:11px;color:var(--ink-3,#9C8C77)}
.sv-sh-meta{font-size:12px;color:var(--ink-2,#6C5D4D);padding:8px 10px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-sh-acts{display:flex;gap:6px;padding:8px 10px 10px}
.sv-sh-pass,.sv-sh-like{flex:1;border:1px solid var(--line,#E4D8C2);background:var(--paper,#F4EDE0);border-radius:999px;
  padding:6px 0;cursor:pointer;font-size:15px;transition:.14s var(--ease,ease)}
.sv-sh-pass:hover{border-color:var(--ink-2,#6C5D4D)}
.sv-sh-like:hover{border-color:var(--clay,#FF624F);color:var(--clay,#FF624F)}
.sv-sh-card.liked .sv-sh-like{background:var(--clay,#FF624F);border-color:var(--clay,#FF624F);color:#fff}
.sv-sh-card.passed .sv-sh-pass{background:var(--ink-2,#6C5D4D);border-color:var(--ink-2,#6C5D4D);color:#fff}
.sv-shuffle-round{font-family:var(--mono,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3,#9C8C77);margin:0 0 12px}
/* v3: brand search + add */
.sv-brand-search{display:flex;gap:8px;margin:0 0 14px}
.sv-brand-search input{flex:1;box-sizing:border-box;font-family:var(--body,system-ui);font-size:15px;color:var(--ink,#2A2018);
  background:var(--paper,#F4EDE0);border:1.5px solid var(--line,#E4D8C2);border-radius:var(--r-sm,6px);padding:10px 12px}
.sv-brand-search input:focus{outline:none;border-color:var(--clay,#FF624F);background:#fff;box-shadow:0 0 0 3px rgba(255,98,79,.12)}
.sv-brand-search .sv-brand-add{white-space:nowrap}
/* v3: interactive build widget */
.sv-build{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:4px}
.sv-build-fig{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:150px}
.sv-fig{position:relative;width:150px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.sv-fig-head{width:34px;height:34px;border-radius:999px;background:var(--clay,#FF624F);margin-bottom:4px;flex:0 0 auto}
.sv-fig-body{flex:1 1 auto;width:150px;background:linear-gradient(var(--clay,#FF624F),var(--clay-deep,#E14A38));transition:clip-path .1s var(--ease,ease)}
.sv-build-label{font-family:var(--disp,Georgia);font-size:22px;color:var(--ink,#2A2018)}
.sv-build-sliders{flex:1 1 220px;min-width:220px;display:flex;flex-direction:column;gap:16px}
.sv-slider label{display:block;font-size:12px;font-family:var(--mono,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3,#9C8C77);margin:0 0 7px}
.sv-slider input[type=range]{width:100%;accent-color:var(--clay,#FF624F);cursor:pointer;height:22px}
/* v7: parametric morphing figure (front+side) */
.sv-figure{width:100%;max-width:300px;height:auto;display:block}
.sv-build-photo{max-width:190px;width:auto;object-fit:contain;display:block;border-radius:var(--r-md,11px);background:var(--paper,#F4EDE0)}
/* v5: Q16 text buttons (Pass / Maybe / Like) */
.sv-sh-acts button{font-size:12.5px;font-weight:600;font-family:var(--body,system-ui)}
/* v6: real-photo option cards (fit, look, …) */
.sv-photocards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.sv-pc{position:relative;text-align:left;background:var(--card,#FCF8EF);border:1.5px solid var(--line,#E4D8C2);border-radius:var(--r-md,11px);overflow:hidden;cursor:pointer;transition:.15s var(--ease,ease);padding:0}
.sv-pc:hover{border-color:var(--clay,#FF624F)}
.sv-pc.on{border-color:var(--clay,#FF624F);box-shadow:0 0 0 3px rgba(255,98,79,.14)}
.sv-pc-img{display:block;aspect-ratio:1/1;background:var(--card-2,#F2E8D7);overflow:hidden}
.sv-pc-img img{width:100%;height:100%;object-fit:cover;display:block}
.sv-pc-img.noimg{min-height:110px}
.sv-pc-l{display:block;font-family:var(--body,system-ui);font-size:15px;font-weight:600;color:var(--ink,#2A2018);padding:10px 12px 0}
.sv-pc-d{display:block;font-size:12.5px;color:var(--ink-2,#6C5D4D);padding:2px 12px 12px}
/* v4: realistic human build figure (front + side) */
.sv-human-wrap{display:flex;gap:8px;align-items:flex-end;justify-content:center}
.sv-human-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.sv-human{height:200px;width:auto}
.sv-human path,.sv-human ellipse,.sv-human rect{fill:var(--clay,#FF624F)}
.sv-human-cap{font-family:var(--mono,monospace);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3,#9C8C77)}
/* v4: 3-way style shuffle */
.sv-sh-card.maybe{border-color:var(--gold,#B9892C);box-shadow:0 0 0 3px rgba(185,137,44,.14)}
.sv-sh-maybe{flex:1;border:1px solid var(--line,#E4D8C2);background:var(--paper,#F4EDE0);border-radius:999px;padding:6px 0;cursor:pointer;font-size:15px;transition:.14s var(--ease,ease)}
.sv-sh-maybe:hover{border-color:var(--gold,#B9892C);color:var(--gold,#B9892C)}
.sv-sh-card.maybe .sv-sh-maybe{background:var(--gold,#B9892C);border-color:var(--gold,#B9892C);color:#fff}
.sv-shuffle-foot{margin-top:14px;text-align:center}
/* v4: instant matches grid + buy links */
.sv-matches{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:8px}
.sv-match{background:var(--card,#FCF8EF);border:1px solid var(--line,#E4D8C2);border-radius:var(--r-md,11px);overflow:hidden;display:flex;flex-direction:column}
.sv-match-img{aspect-ratio:1/1;background:var(--card-2,#F2E8D7);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sv-match-img img{width:100%;height:100%;object-fit:cover}
.sv-match-img.noimg::after{content:"no image";font-family:var(--mono,monospace);font-size:11px;color:var(--ink-3,#9C8C77)}
.sv-match-body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:4px}
.sv-match-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sv-match-brand{font-weight:600;font-size:14px;color:var(--ink,#2A2018)}
.sv-match-price{font-family:var(--mono,monospace);font-size:13px;color:var(--clay,#FF624F)}
.sv-match-name{font-size:12.5px;color:var(--ink-2,#6C5D4D);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-match-buys{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sv-buy{font-family:var(--body,system-ui);font-size:12px;color:var(--clay,#FF624F);border:1px solid var(--line,#E4D8C2);
  border-radius:999px;padding:4px 10px;text-decoration:none;transition:.14s var(--ease,ease)}
.sv-buy:hover{background:var(--clay,#FF624F);border-color:var(--clay,#FF624F);color:#fff}

/* ------------------------------------------- closet rows carry the garment's own photo
   The photo is private: it is fetched with the session cookie and injected as an object
   URL, so the markup never contains a link anyone could lift out and share. */
.sm-scan{display:flex;align-items:flex-start;gap:12px}
.sm-scan-body{flex:1 1 auto;min-width:0}
.sm-scan-thumb{flex:0 0 auto;width:56px;height:66px;border:1px solid var(--line,#E4D8C2);
  border-radius:6px;background:var(--paper,#F4F1EA);display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.sm-scan-img{width:100%;height:100%;object-fit:contain;image-orientation:from-image}
.sm-scan-noimg{font-family:var(--mono,ui-monospace);font-size:8.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3,#9A8A76);text-align:center;line-height:1.3;padding:2px}
.sm-linkish{display:inline-block;margin-top:7px;font-family:var(--body,system-ui);font-size:12px;
  color:var(--clay,#FF624F);background:none;border:0;border-bottom:1px solid currentColor;
  padding:1px 0;cursor:pointer}
.sm-linkish:hover{color:var(--ink,#2A2018)}

/* ==========================================================================
   Stage 2: My Style Survey — v8 visual layer.
   Everything below is scoped to `.sv-app` (the survey shell) or to
   `#smAccountRoot.sm-survey-v8`, so account, login, closet, matches, scan and
   the storefront keep the rules above untouched. Legacy `.sv-*` selectors that
   this layer replaces are removed in a separate cleanup commit.
   ========================================================================== */
.sv-app{
  --sv-navy:#061B30;
  --sv-blue:#2F65F5;
  --sv-blue-soft:#EAF2FF;
  --sv-coral:#FF624F;
  --sv-coral-dark:#E94D3B;
  --sv-paper:#FFFFFF;
  --sv-ground:#F6F8FB;
  --sv-line:#DCE3EC;
  --sv-line-strong:#C9D3E1;
  --sv-muted:#64748B;
  --sv-ink-2:#3B4A5C;
  --sv-danger:#B42318;
  --sv-shadow:0 18px 55px rgba(6,27,48,.08);
  --sv-display:"Fraunces",Georgia,serif;
  --sv-body:"Karla",system-ui,sans-serif;
  --sv-mono:"DM Mono",ui-monospace,monospace;
  min-height:100vh;background:var(--sv-ground);color:var(--sv-navy);font-family:var(--sv-body)
}
/* The survey shell owns the whole overlay. `:has()` keeps this off every other account view
   without leaving a class behind on #smAccountRoot that a later view would inherit. */
#smAccountRoot:has(.sv-app){background:#F6F8FB;overflow:hidden}
#smAccountRoot:has(.sv-app.is-complete){overflow:auto}
#smAccountRoot:has(.sv-app)>.sm-shell{max-width:none;margin:0;padding:0;min-height:100%}
/* The site's build badge is fixed to the bottom-right and would sit on top of Continue in the
   survey's sticky action bar. Hidden only while the survey shell is on screen. */
body:has(#smAccountRoot .sv-app) #smBuildBadge{display:none}
.sv-app *{box-sizing:border-box}
.sv-app button,.sv-app input{font:inherit;color:inherit}
.sv-app img{max-width:100%}

/* ---- header ---- */
/* The wordmark sits on the same optical line as the progress rail below it, so the header
   gutter tracks the workspace gutter rather than being a fixed number. */
.sv-global-header{height:72px;padding:0 max(20px,calc((100% - 1346px) / 2));display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;background:var(--sv-paper);
  border-bottom:1px solid var(--sv-line);position:sticky;top:0;z-index:20}
.sv-wordmark{font-family:var(--sv-display);font-size:29px;font-weight:700;letter-spacing:-.04em;
  color:var(--sv-navy);text-decoration:none;cursor:pointer;justify-self:start}
.sv-global-nav{display:flex;align-items:center;gap:34px}
.sv-global-nav a{font-size:13.5px;color:var(--sv-ink-2);text-decoration:none;cursor:pointer}
.sv-global-nav a:hover{color:var(--sv-blue)}
.sv-header-actions{display:flex;justify-content:flex-end;align-items:center;gap:14px}
.sv-account-button{width:34px;height:34px;padding:0;border:1px solid var(--sv-line-strong);border-radius:50%;
  background:var(--sv-paper);color:var(--sv-navy);cursor:pointer;display:grid;place-items:center}
.sv-account-button:hover{border-color:var(--sv-blue);color:var(--sv-blue)}
.sv-save-exit{min-width:112px;padding:11px 16px;border:0;border-radius:4px;background:var(--sv-coral);
  color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.sv-save-exit:hover{background:var(--sv-coral-dark)}

/* ---- workspace ---- */
/* The question card owns its own scroll, so the action bar is always on screen and the page
   itself never scrolls on desktop. Mobile reverts to page scroll with a fixed action bar.
   `overflow:visible` is load-bearing: the site stylesheet gives every <main> `overflow:auto`,
   which silently makes .sv-shell the sticky scrollport and offsets the mobile stage strip by a
   second header height. The card, not the shell, is the scroller here. */
.sv-shell{overflow:visible;width:min(1346px,calc(100% - 40px));margin:0 auto;padding:28px 0 32px;height:calc(100vh - 72px);
  display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:34px;align-items:stretch}
.sv-shell.is-bare{display:block;width:min(1040px,calc(100% - 40px));height:auto;padding:34px 0 56px}
.sv-rail{align-self:start;max-height:100%;overflow-y:auto;padding:14px 8px 0;scrollbar-width:none}
.sv-rail::-webkit-scrollbar{display:none}
.sv-progress-ring{--sv-pct:6%;width:74px;height:74px;border-radius:50%;display:grid;place-content:center;
  margin:0 0 22px 5px;background:conic-gradient(var(--sv-blue) var(--sv-pct),#E4EAF2 0);position:relative;text-align:center}
.sv-progress-ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--sv-ground)}
.sv-progress-ring.is-idle{background:#E4EAF2}
.sv-progress-value,.sv-progress-total{position:relative;z-index:1;display:block;line-height:1}
.sv-progress-value{font-family:var(--sv-display);font-size:27px;font-weight:700}
.sv-progress-total{margin-top:4px;font:10px/1 var(--sv-mono);color:var(--sv-muted)}
.sv-rail-title{font:700 11px/1 var(--sv-mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 11px;color:#526275}
.sv-rail-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sv-rail-step{width:100%;border:0;border-radius:5px;background:transparent;color:#526275;text-align:left;
  padding:11px 10px;display:flex;align-items:center;gap:11px;cursor:pointer;font-size:13.5px}
.sv-rail-step>span{flex:0 0 auto;width:24px;height:24px;border:1px solid var(--sv-line-strong);border-radius:50%;
  display:grid;place-items:center;font:10px/1 var(--sv-mono);background:var(--sv-paper)}
.sv-rail-step:not(:disabled):hover{background:#F0F4FA;color:var(--sv-navy)}
.sv-rail-step.is-active{background:var(--sv-blue-soft);color:var(--sv-navy);font-weight:700}
.sv-rail-step.is-active>span{background:var(--sv-blue);border-color:var(--sv-blue);color:#fff}
.sv-rail-step.is-done>span{border-color:var(--sv-blue);color:var(--sv-blue)}
.sv-rail-step:disabled{cursor:default;opacity:.55}

.sv-card{min-width:0;min-height:0;background:var(--sv-paper);border:1px solid var(--sv-line);border-radius:5px;
  box-shadow:var(--sv-shadow);display:flex;flex-direction:column;overflow:hidden}
.sv-card-scroll{padding:26px 32px 16px;flex:1 1 auto;min-width:0;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.sv-app.is-complete .sv-card{overflow:visible}
.sv-app.is-complete .sv-card-scroll{overflow:visible}
.sv-question-head{margin-bottom:18px}
.sv-app .sv-eyebrow{margin:0 0 7px;font:600 11px/1 var(--sv-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sv-blue)}
.sv-app .sv-q{font-family:var(--sv-display);font-size:34px;line-height:1.08;letter-spacing:-.025em;
  color:var(--sv-navy);margin:0 0 7px;font-weight:600}
.sv-app .sv-q:focus{outline:none}
.sv-app .sv-sub{font-family:var(--sv-body);font-size:14.5px;line-height:1.45;color:#536275;margin:0}
.sv-resume-note{margin:10px 0 0;font-size:12.5px;color:var(--sv-muted)}
.sv-linkish{border:0;background:none;padding:0;color:var(--sv-blue);font-weight:600;cursor:pointer;text-decoration:underline}
.sv-question-body{min-height:0}

/* ---- segmented presentation tabs ---- */
.sv-segmented{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);
  border:1px solid var(--sv-line-strong);border-radius:4px;overflow:hidden;margin-bottom:14px}
.sv-segmented button{border:0;border-right:1px solid var(--sv-line-strong);background:var(--sv-paper);
  color:var(--sv-ink-2);padding:10px 18px;cursor:pointer;font-size:13.5px}
.sv-segmented button:last-child{border-right:0}
.sv-segmented button[aria-checked=true]{background:var(--sv-navy);color:#fff;font-weight:700}

/* ---- body profile ---- */
.sv-body-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.sv-image-choice{position:relative;border:1px solid var(--sv-line);border-radius:5px;background:var(--sv-paper);
  padding:0;overflow:hidden;text-align:left;cursor:pointer;color:var(--sv-navy);display:block}
.sv-image-choice:hover{border-color:#91B0FF}
.sv-image-choice.is-selected{border:2px solid var(--sv-blue)}
.sv-image-frame{display:block;height:330px;background:linear-gradient(150deg,#E7F0FE,#F3F8FF);overflow:hidden}
.sv-image-frame img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 24%}
.sv-image-frame.noimg::after{content:"Photo unavailable";display:grid;place-items:center;height:100%;
  font:11px/1 var(--sv-mono);color:var(--sv-muted)}
.sv-choice-label{display:block;text-align:center;padding:10px;font-size:13.5px;font-weight:700;
  border-top:1px solid var(--sv-line)}
.sv-image-choice.is-selected .sv-choice-label{color:var(--sv-blue)}
.sv-selected-mark{position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;
  display:none;place-items:center;background:var(--sv-blue);color:#fff}
.sv-image-choice.is-selected .sv-selected-mark{display:grid}

.sv-slider-stack{display:grid;border:1px solid var(--sv-line);border-radius:4px;overflow:hidden}
.sv-slider-row{min-height:56px;display:grid;grid-template-columns:200px 92px minmax(0,1fr) 132px;gap:14px;
  align-items:center;padding:9px 16px;border-bottom:1px solid var(--sv-line)}
.sv-slider-row:last-of-type{border-bottom:0}
.sv-slider-name{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.sv-info{width:17px;height:17px;flex:0 0 auto;border:1px solid #94A3B8;border-radius:50%;background:var(--sv-paper);
  color:var(--sv-muted);font:10px/15px var(--sv-mono);text-align:center;cursor:help;display:inline-block}
.sv-slider-end{font-size:11.5px;color:var(--sv-muted)}
.sv-slider-row .sv-slider-end:last-of-type{text-align:right}
.sv-slider-row input[type=range]{width:100%;accent-color:var(--sv-blue);cursor:pointer;height:22px}

/* ---- photo grid (fit, occasions, dress code, vibes, colors, fabrics) ---- */
.sv-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sv-photo-choice{position:relative;display:flex;flex-direction:column;border:1px solid var(--sv-line);
  border-radius:5px;background:var(--sv-paper);padding:0;overflow:hidden;text-align:left;cursor:pointer;color:var(--sv-navy)}
.sv-photo-choice:hover{border-color:#91B0FF}
.sv-photo-choice.is-selected{border:2px solid var(--sv-blue)}
.sv-photo-media{display:block;aspect-ratio:16/9;background:#EDF2F8;overflow:hidden}
.sv-photo-media img{width:100%;height:100%;display:block;object-fit:cover}
.sv-photo-media.noimg::after{content:"Photo unavailable";display:grid;place-items:center;height:100%;
  font:11px/1 var(--sv-mono);color:var(--sv-muted)}
.sv-photo-copy{padding:11px 46px 13px 13px;display:grid;gap:3px;flex:1 1 auto}
.sv-photo-title{font-size:14px;font-weight:700;line-height:1.25}
.sv-photo-desc{font-size:11.5px;color:var(--sv-muted);line-height:1.35}
.sv-choice-box{position:absolute;right:12px;bottom:12px;width:21px;height:21px;border:1px solid var(--sv-line-strong);
  border-radius:3px;background:var(--sv-paper)}
.sv-photo-choice.is-selected .sv-choice-box,.sv-list-choice.is-selected .sv-choice-box,
.sv-check-chip.is-selected .sv-choice-box{background:var(--sv-blue);border-color:var(--sv-blue)}
.sv-photo-choice.is-selected .sv-choice-box::after,.sv-list-choice.is-selected .sv-choice-box::after,
.sv-check-chip.is-selected .sv-choice-box::after{content:"";position:absolute;inset:0;
  background:no-repeat center/13px 13px url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 7'/%3E%3C/svg%3E")}
.sv-photo-mark{position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;
  display:none;place-items:center;background:var(--sv-blue);color:#fff}
.sv-photo-choice.is-selected .sv-photo-mark{display:grid}
/* single-select photo cards read as radios: no square box, just the round mark */
.sv-photo-choice[role=radio] .sv-choice-box{border-radius:50%}
.sv-photo-choice[role=radio].is-selected .sv-choice-box{display:none}

/* ---- plain list choices (sizes, patterns, room, frustrations, height, weight) ---- */
.sv-list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sv-list-choice{position:relative;min-height:60px;border:1px solid var(--sv-line);border-radius:4px;
  background:var(--sv-paper);color:var(--sv-navy);padding:12px 46px 12px 14px;display:flex;align-items:center;
  gap:12px;text-align:left;cursor:pointer}
.sv-list-choice:hover{border-color:#91B0FF}
.sv-list-choice.is-selected{border:2px solid var(--sv-blue);background:#F8FAFF}
.sv-list-choice .sv-choice-box{top:50%;bottom:auto;transform:translateY(-50%)}
.sv-list-choice[role=radio] .sv-choice-box{border-radius:50%}
.sv-list-copy{min-width:0}
.sv-list-choice strong{display:block;font-size:14px;font-weight:700}
.sv-list-choice small{display:block;margin-top:2px;color:var(--sv-muted);font-size:11.5px;font-weight:400}
.sv-opt-art{flex:0 0 auto;width:36px;height:32px;display:flex;align-items:center;justify-content:center}
.sv-app .sv-sw{width:100%;height:30px;display:block}

/* ---- materials secondary row ---- */
.sv-avoid-row{display:grid;grid-template-columns:150px repeat(5,minmax(0,1fr));gap:10px;align-items:center;
  margin-top:16px;padding:12px;border:1px solid var(--sv-line);border-radius:4px;background:#FBFCFE}
.sv-avoid-label{font-size:12.5px;font-weight:700;color:#435366}
.sv-check-chip{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid var(--sv-line);border-radius:4px;background:var(--sv-paper);padding:10px 38px 10px 11px;
  color:#405166;font-size:12px;cursor:pointer;text-align:left;min-height:44px}
.sv-check-chip:hover{border-color:#91B0FF}
.sv-check-chip.is-selected{border:2px solid var(--sv-blue);background:#F8FAFF;color:var(--sv-navy);font-weight:600}
.sv-check-chip .sv-choice-box{right:10px;top:50%;bottom:auto;transform:translateY(-50%);width:19px;height:19px}

/* ---- brands ---- */
.sv-brand-tools{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:14px;margin-bottom:6px}
.sv-brand-search-wrap{position:relative;display:block}
.sv-brand-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#8FA0B4;pointer-events:none}
.sv-brand-tools input{width:100%;height:48px;border:1px solid var(--sv-line-strong);border-radius:4px;
  padding:0 14px 0 42px;color:var(--sv-navy);background:var(--sv-paper);font-size:14.5px}
.sv-brand-tools input::placeholder{color:#93A3B6}
.sv-brand-tools input:focus{outline:3px solid rgba(47,101,245,.17);outline-offset:0;border-color:var(--sv-blue)}
.sv-brand-add{height:48px;border:0;border-radius:4px;background:var(--sv-coral);color:#fff;font-weight:700;
  font-size:14px;cursor:pointer;white-space:nowrap}
.sv-brand-add:hover{background:var(--sv-coral-dark)}
.sv-brand-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0;
  padding:12px;border:1px solid var(--sv-line);border-radius:4px;background:#FBFCFE}
.sv-brand-results[hidden]{display:none}
.sv-brand-hit{display:flex;align-items:baseline;justify-content:space-between;gap:8px;border:1px solid var(--sv-line);
  border-radius:4px;background:var(--sv-paper);padding:10px 12px;cursor:pointer;text-align:left;font-size:13px;color:var(--sv-navy)}
.sv-brand-hit:hover{border-color:var(--sv-blue);color:var(--sv-blue)}
.sv-brand-hit small{color:var(--sv-muted);font-size:10.5px;white-space:nowrap}
.sv-section-label{margin:18px 0 8px;font-size:13px;font-weight:700;color:#33455A}
.sv-brand-selected{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.sv-brand-pill{min-height:60px;border:2px solid var(--sv-blue);border-radius:4px;background:var(--sv-paper);
  color:var(--sv-navy);padding:10px 13px;display:flex;justify-content:space-between;align-items:center;gap:10px;
  text-align:left;cursor:pointer}
.sv-brand-pill strong{font-size:14px;font-weight:700;display:block}
.sv-brand-pill small{display:block;color:var(--sv-muted);font-size:11px;margin-top:2px;font-weight:400}
.sv-brand-pill-mark{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--sv-blue);color:#fff}
.sv-closet-suggestions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sv-closet-card{border:1px solid var(--sv-line);border-radius:4px;background:var(--sv-paper);overflow:hidden;
  display:flex;flex-direction:column}
.sv-closet-media{display:block;height:168px;background:#F2F6FC;overflow:hidden;display:grid;place-items:center}
.sv-closet-media img{width:100%;height:100%;object-fit:contain;display:block}
.sv-closet-media.noimg::after{content:"No photo";font:11px/1 var(--sv-mono);color:var(--sv-muted)}
.sv-closet-card-copy{padding:10px 11px 4px;font-size:13px;flex:1 1 auto}
.sv-closet-card-copy strong{display:block;font-weight:700}
.sv-closet-card-copy small{display:block;color:var(--sv-muted);font-weight:400;margin-top:2px;font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-closet-card button{width:calc(100% - 20px);margin:8px 10px 10px;border:1px solid var(--sv-line-strong);
  border-radius:3px;background:var(--sv-paper);color:var(--sv-blue);padding:8px;cursor:pointer;font-weight:600;font-size:13px}
.sv-closet-card button:hover{border-color:var(--sv-blue);background:var(--sv-blue-soft)}
.sv-brand-more-row{text-align:center;margin:18px 0 0}
.sv-brand-more{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:var(--sv-blue);
  font-weight:700;font-size:13.5px;cursor:pointer;padding:8px 10px}
.sv-brand-more.is-open svg{transform:rotate(180deg)}
.sv-brand-all{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding:14px;border:1px solid var(--sv-line);
  border-radius:4px;background:#FBFCFE;max-height:210px;overflow-y:auto}
.sv-brand-all[hidden]{display:none}
.sv-brand-chip{border:1px solid var(--sv-line-strong);border-radius:4px;background:var(--sv-paper);
  color:var(--sv-ink-2);padding:8px 12px;font-size:13px;cursor:pointer}
.sv-brand-chip:hover{border-color:var(--sv-blue);color:var(--sv-blue);background:var(--sv-blue-soft)}

/* ---- outfit rating ---- */
.sv-filter-summary{min-height:40px;border:1px solid var(--sv-line);border-radius:4px;display:flex;align-items:center;
  gap:12px;padding:8px 14px;margin-bottom:14px;font-size:12px;color:#526275;flex-wrap:wrap}
.sv-filter-bit{font-weight:600;color:var(--sv-ink-2)}
.sv-filter-dot{width:3px;height:3px;border-radius:50%;background:var(--sv-line-strong)}
.sv-filter-change{margin-left:auto;border:0;background:none;color:var(--sv-blue);font-weight:600;cursor:pointer;font-size:12.5px}
.sv-filter-change:disabled{color:var(--sv-muted);cursor:default}
.sv-outfit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sv-outfit-card{border:1px solid var(--sv-line);border-radius:5px;background:var(--sv-paper);overflow:hidden;
  position:relative;display:flex;flex-direction:column}
.sv-outfit-card.is-rated{border:2px solid var(--sv-blue)}
.sv-outfit-card.passed{opacity:.55}
.sv-outfit-media{height:352px;background:linear-gradient(150deg,#E7F0FE,#F5F9FF);position:relative;overflow:hidden}
/* Geometry is shared with survey.js PIECE: top0 3.4%, topH 46%, botH 50%. The bottom piece's
   `top` is written inline per pair from the tiles' persisted alpha bounds, so the DAYLIGHT
   between the painted hem and the painted waistband lands at ~6px whatever padding the two
   tiles happen to carry. The value below is only the pre-inline fallback. */
.sv-outfit-piece{position:absolute;left:50%;transform:translateX(-50%);object-fit:contain;mix-blend-mode:multiply}
.sv-outfit-piece.is-top{top:3.4%;width:74%;height:46%}
.sv-outfit-piece.is-bottom{top:45%;width:64%;height:50%}
.sv-match-badge{position:absolute;left:10px;top:10px;width:52px;height:52px;border:2px solid var(--sv-blue);
  border-radius:50%;background:var(--sv-paper);display:grid;place-content:center;text-align:center;
  color:var(--sv-blue);font:700 14px/1 var(--sv-mono);z-index:2}
.sv-match-badge small{display:block;margin-top:2px;font-size:7px;letter-spacing:.09em}
.sv-outfit-mark{position:absolute;right:10px;top:10px;width:26px;height:26px;border-radius:50%;
  display:none;place-items:center;background:var(--sv-blue);color:#fff;z-index:2}
.sv-outfit-card.is-rated .sv-outfit-mark{display:grid}
.sv-outfit-copy{padding:10px 12px 4px;border-top:1px solid var(--sv-line);flex:1 1 auto}
.sv-outfit-line{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;margin-bottom:3px;align-items:baseline}
.sv-outfit-role{color:var(--sv-muted);font-size:10.5px}
.sv-outfit-name{color:var(--sv-navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-outfit-price{color:var(--sv-navy);font-weight:700;white-space:nowrap}
.sv-outfit-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:8px 9px}
.sv-outfit-actions button{display:flex;align-items:center;justify-content:center;gap:4px;border:1px solid var(--sv-line-strong);
  border-radius:3px;background:var(--sv-paper);padding:9px 1px;color:#415166;font-size:10.5px;cursor:pointer;
  white-space:nowrap;letter-spacing:-.012em;min-width:0}
.sv-outfit-actions button svg{flex:0 0 auto}
.sv-outfit-actions button:hover{border-color:var(--sv-blue);color:var(--sv-blue)}
.sv-outfit-actions button.is-active{background:var(--sv-blue);border-color:var(--sv-blue);color:#fff}
.sv-view-items{display:block;width:100%;text-align:center;color:var(--sv-blue);font-size:11.5px;padding:9px;
  border:0;border-top:1px solid var(--sv-line);background:none;cursor:pointer;font-weight:600}
.sv-outfit-items{padding:8px 12px 12px;border-top:1px solid var(--sv-line);display:grid;gap:6px}
.sv-outfit-items[hidden]{display:none}
.sv-item-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:8px;align-items:baseline;font-size:11.5px}
.sv-item-role{color:var(--sv-muted);font-size:10.5px}
.sv-item-link{color:var(--sv-blue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-item-link.is-plain{color:var(--sv-muted)}
.sv-item-price{font-weight:700}
.sv-none-row{text-align:center;margin:16px 0 0}
.sv-none-btn{border:0;background:none;color:#526275;font-size:12.5px;cursor:pointer;text-decoration:underline}
.sv-none-btn:hover{color:var(--sv-blue)}
.sv-shuffle-done{border:1px solid var(--sv-line);border-radius:4px;padding:26px;text-align:center;background:#FBFCFE}
.sv-shuffle-done-h{font-family:var(--sv-display);font-size:21px;margin:0 0 6px;color:var(--sv-navy)}

/* ---- numbers ---- */
.sv-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:620px}
.sv-num label{display:block;font:600 11px/1 var(--sv-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--sv-muted);margin:0 0 7px}
.sv-num input{width:100%;height:48px;border:1px solid var(--sv-line-strong);border-radius:4px;padding:0 14px;
  font-size:15px;color:var(--sv-navy);background:var(--sv-paper)}
.sv-num input:focus{outline:3px solid rgba(47,101,245,.17);border-color:var(--sv-blue)}
.sv-num-hint{display:block;margin-top:6px;font-size:11.5px;color:var(--sv-muted)}

/* ---- loved capture ---- */
.sv-loved-list{display:grid;gap:10px;margin-bottom:18px;max-width:640px}
.sv-loved-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;
  border:1px solid var(--sv-line);border-radius:4px;padding:12px 14px;background:var(--sv-paper)}
.sv-loved-thumb{width:64px;height:64px;border-radius:3px;background:#F2F6FC;display:grid;place-items:center;overflow:hidden}
.sv-loved-thumb img{width:100%;height:100%;object-fit:cover}
.sv-loved-noimg{font:10px/1 var(--sv-mono);color:var(--sv-muted);text-align:center}
.sv-loved-meta strong{display:block;font-size:14.5px}
.sv-loved-meta small{display:block;margin-top:3px;color:var(--sv-muted);font-size:12px}
.sv-loved-remove{border:1px solid var(--sv-line-strong);border-radius:3px;background:var(--sv-paper);
  padding:8px 13px;color:var(--sv-ink-2);cursor:pointer;font-size:13px}
.sv-loved-remove:hover{border-color:var(--sv-danger);color:var(--sv-danger)}
.sv-loved-remove.is-confirm{border-color:var(--sv-danger);background:#FFF1F0;color:var(--sv-danger);font-weight:700}
.sv-loved-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.sv-scan-cta{border:0;border-radius:4px;background:var(--sv-blue);color:#fff;font-weight:700;font-size:14.5px;
  padding:13px 22px;cursor:pointer}
.sv-scan-cta:hover{background:#2454DA}

/* ---- completion ---- */
.sv-app.is-complete .sv-card-scroll{padding:34px 36px 36px}
.sv-app.is-complete .sv-q{font-size:38px}
.sv-app.is-complete .sv-question-body{min-height:0}
.sv-done-summary{margin:18px 0 20px}
.sv-app .sv-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;justify-content:flex-start}
.sv-app .sv-chip{font-size:12.5px;color:var(--sv-ink-2);background:var(--sv-blue-soft);border:1px solid #D5E4FF;
  border-radius:4px;padding:6px 11px;font-family:var(--sv-body)}
.sv-app .sv-matches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0}
.sv-app .sv-match{border:1px solid var(--sv-line);border-radius:5px;background:var(--sv-paper);overflow:hidden;
  display:flex;flex-direction:column}
.sv-app .sv-match-img{aspect-ratio:1/1;background:#F2F6FC;overflow:hidden}
.sv-app .sv-match-img img{width:100%;height:100%;object-fit:cover;display:block}
.sv-app .sv-match-img.noimg::after{content:"No photo";display:grid;place-items:center;height:100%;
  font:11px/1 var(--sv-mono);color:var(--sv-muted)}
.sv-app .sv-match-body{padding:11px 12px 13px;display:grid;gap:4px}
.sv-app .sv-match-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.sv-app .sv-match-brand{font-size:12.5px;font-weight:700;color:var(--sv-navy)}
.sv-app .sv-match-price{font-size:12.5px;font-weight:700;color:var(--sv-navy)}
.sv-app .sv-match-name{font-size:12px;color:var(--sv-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sv-body)}
.sv-app .sv-match-buys{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sv-app .sv-buy{font-size:11.5px;color:var(--sv-blue);border:1px solid var(--sv-line);border-radius:3px;
  padding:5px 9px;text-decoration:none;background:var(--sv-paper)}
.sv-app .sv-buy:hover{border-color:var(--sv-blue);background:var(--sv-blue-soft)}
.sv-match-soon{font:11px/1 var(--sv-mono);color:var(--sv-muted)}
.sv-done-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}
.sv-done-secondary{border:1px solid var(--sv-line-strong);border-radius:4px;background:var(--sv-paper);
  color:var(--sv-ink-2);padding:11px 20px;cursor:pointer;font-weight:600}
.sv-done-secondary:hover{border-color:var(--sv-blue);color:var(--sv-blue)}

/* ---- action bar ---- */
.sv-actions{min-height:66px;border-top:1px solid var(--sv-line);display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:14px;padding:11px 32px;background:var(--sv-paper);position:sticky;bottom:0;z-index:5}
.sv-action-back{justify-self:start;border:0;background:none;color:var(--sv-blue);font-weight:700;cursor:pointer;padding:10px 2px}
.sv-action-back:hover{color:#2454DA}
.sv-action-mid{display:flex;align-items:center;gap:16px;justify-self:center}
.sv-selected-count{color:var(--sv-blue);font-size:13px;font-weight:700;white-space:nowrap}
.sv-save-status{margin:0;color:#6B7B8E;font-size:12px;white-space:nowrap}
.sv-save-status.is-saving::before{content:"";display:inline-block;width:9px;height:9px;border:2px solid #C8D1DC;
  border-top-color:var(--sv-blue);border-radius:50%;margin-right:7px;vertical-align:-1px;animation:svSpin .8s linear infinite}
.sv-save-status.is-error{color:var(--sv-danger);font-weight:600}
.sv-retry{border:0;background:none;color:var(--sv-blue);font-weight:700;cursor:pointer;text-decoration:underline;padding:0 2px}
.sv-action-right{justify-self:end;display:flex;align-items:center;gap:10px}
.sv-action-skip{border:0;background:none;color:var(--sv-muted);font-weight:600;cursor:pointer;padding:10px}
.sv-action-skip:hover{color:var(--sv-navy)}
.sv-action-primary{min-width:132px;padding:12px 22px;border:0;border-radius:4px;background:var(--sv-coral);
  color:#fff;font-weight:700;font-size:14.5px;cursor:pointer}
.sv-action-primary:hover{background:var(--sv-coral-dark)}
.sv-action-primary:disabled{background:#B7C1CD;cursor:not-allowed}

/* ---- states ---- */
.sv-inline-error{margin:14px 0 0;border:1px solid #F1B8B4;background:#FFF1F0;color:var(--sv-danger);
  border-radius:4px;padding:11px 13px;font-size:13px}
.sv-error-block{border:1px solid var(--sv-line);border-radius:5px;padding:30px;background:#FBFCFE;max-width:520px}
.sv-error-h{margin:0 0 6px;font-size:15px;font-weight:700}
.sv-empty-line{margin:8px 0 0;color:var(--sv-muted);font-size:13px}
.sv-loading{min-height:300px;display:grid;place-items:center;align-content:center;gap:12px;color:var(--sv-muted);font-size:13.5px}
.sv-spinner{display:inline-block;width:17px;height:17px;border:2px solid #C8D1DC;border-top-color:var(--sv-blue);
  border-radius:50%;animation:svSpin .8s linear infinite}
.sv-skeleton{width:100%;height:18px;border-radius:4px;margin-bottom:12px;
  background:linear-gradient(90deg,#EEF2F6,#F8FAFC,#EEF2F6);background-size:200% 100%;animation:svShimmer 1.3s linear infinite}
.sv-skeleton-rail{height:34px}
.sv-skeleton-card{height:230px;border-radius:4px;background:linear-gradient(90deg,#EEF2F6,#F8FAFC,#EEF2F6);
  background-size:200% 100%;animation:svShimmer 1.3s linear infinite}
.sv-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.sv-app :focus-visible{outline:3px solid rgba(47,101,245,.45);outline-offset:2px;border-radius:3px}
@keyframes svSpin{to{transform:rotate(360deg)}}
@keyframes svShimmer{to{background-position:-200% 0}}

/* ---- responsive ---- */
@media (max-width:1299px){
  .sv-outfit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sv-outfit-actions button{font-size:11.5px;padding:9px 3px;gap:5px}
}
@media (max-width:1120px){
  .sv-shell{grid-template-columns:152px minmax(0,1fr);gap:20px;width:calc(100% - 28px)}
  .sv-card-scroll{padding:24px 24px 12px}
  .sv-actions{padding:11px 24px}
  .sv-image-frame{height:286px}
  .sv-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-outfit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-outfit-media{height:320px}
  .sv-avoid-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sv-avoid-label{grid-column:1/-1}
  .sv-brand-results,.sv-brand-selected{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-closet-suggestions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-app .sv-matches{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sv-slider-row{grid-template-columns:170px 78px minmax(0,1fr) 112px;gap:10px}
}
@media (max-width:860px){
  /* Below the rail breakpoint the PAGE scrolls again and the action bar is fixed to the
     viewport, so the card no longer owns a scrollport of its own. */
  #smAccountRoot:has(.sv-app){overflow:auto;-webkit-overflow-scrolling:touch}
  .sv-card-scroll{overflow:visible}
  .sv-global-header{height:62px;padding:0 16px;grid-template-columns:1fr auto}
  .sv-global-nav{display:none}
  .sv-wordmark{font-size:25px}
  .sv-account-button{display:none}
  .sv-shell,.sv-shell.is-bare{display:block;width:100%;padding:0;height:auto}
  .sv-rail{position:sticky;top:62px;z-index:12;background:var(--sv-paper);border-bottom:1px solid var(--sv-line);
    padding:9px 14px;display:flex;align-items:center;gap:14px;max-height:none;overflow:visible}
  .sv-progress-ring{width:46px;height:46px;margin:0;flex:0 0 auto}
  .sv-progress-ring::after{inset:4px}
  .sv-progress-value{font-size:17px}
  .sv-progress-total{font-size:7.5px;margin-top:2px}
  .sv-rail-title{display:none}
  .sv-rail-list{display:flex;overflow-x:auto;gap:6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sv-rail-list::-webkit-scrollbar{display:none}
  .sv-rail-step{white-space:nowrap;padding:8px 11px;font-size:12.5px}
  .sv-rail-step>span{display:none}
  .sv-card{border:0;border-radius:0;box-shadow:none;min-height:calc(100vh - 122px)}
  .sv-card-scroll{padding:22px 16px 104px}
  .sv-app .sv-q,.sv-app.is-complete .sv-q{font-size:27px}
  .sv-question-body{min-height:0}
  .sv-image-frame{height:230px}
  .sv-body-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .sv-choice-label{font-size:12.5px;padding:8px 4px}
  .sv-slider-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:12px 14px}
  .sv-slider-row input[type=range]{grid-column:1/-1;order:3}
  .sv-slider-row .sv-slider-end{order:2}
  .sv-slider-row .sv-slider-end:first-of-type{order:4}
  .sv-slider-row .sv-slider-end:last-of-type{order:5;text-align:right}
  .sv-list-grid{grid-template-columns:1fr}
  .sv-brand-tools{grid-template-columns:1fr}
  .sv-brand-results,.sv-brand-selected,.sv-closet-suggestions{grid-template-columns:1fr 1fr}
  .sv-outfit-grid{grid-template-columns:1fr;gap:14px}
  .sv-outfit-media{height:400px}
  .sv-nums{grid-template-columns:1fr}
  .sv-app .sv-matches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-loved-row{grid-template-columns:56px minmax(0,1fr);row-gap:10px}
  .sv-loved-remove{grid-column:2}
  .sv-actions{position:fixed;left:0;right:0;bottom:0;padding:10px 14px;
    box-shadow:0 -10px 30px rgba(6,27,48,.10);grid-template-columns:auto minmax(0,1fr) auto}
  .sv-action-mid{gap:10px;flex-direction:column;align-items:center}
  .sv-save-status{font-size:10.5px}
}
@media (max-width:480px){
  .sv-save-exit{min-width:0;padding:10px 13px;font-size:13px}
  .sv-header-actions{gap:8px}
  .sv-body-cards{grid-template-columns:1fr}
  .sv-image-frame{height:260px}
  .sv-photo-grid{grid-template-columns:1fr 1fr;gap:9px}
  .sv-photo-media{aspect-ratio:1/1}
  .sv-photo-copy{padding:9px 34px 11px 10px}
  .sv-photo-title{font-size:12.5px}
  .sv-photo-desc{font-size:10.5px}
  .sv-avoid-row{grid-template-columns:1fr 1fr}
  .sv-brand-results,.sv-brand-selected,.sv-closet-suggestions{grid-template-columns:1fr}
  .sv-app .sv-matches{grid-template-columns:1fr 1fr}
  .sv-outfit-media{height:340px}
  .sv-action-mid{display:none}
  .sv-actions{grid-template-columns:1fr auto}
  .sv-action-primary{min-width:0;padding:12px 18px}
}
@media (prefers-reduced-motion:reduce){
  .sv-app *,.sv-app *::before,.sv-app *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .sv-skeleton,.sv-skeleton-card{background:#EEF2F6}
}