:root {
  --vm-blue:#0b74ff;
  --vm-blue-strong:#075fe0;
  --vm-blue-soft:#eaf2ff;
  --vm-indigo-soft:#dfe5ff;
  --vm-line:#d8deea;
  --vm-text:#111827;
  --vm-muted:#647084;
  --vm-bg:#ffffff;
  --vm-surface:#ffffff;
  --vm-ring:#2563eb;
}
* { box-sizing:border-box; }
html { min-width:320px; }
body { min-height: 100vh; margin:0; background:var(--vm-bg); color:var(--vm-text); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.45; display: flex; flex-direction: column; }
a { color:inherit; }
button,a,input,select { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--vm-ring); outline-offset:3px; }
svg { width:1em; height:1em; fill:currentColor; }
.vm-skip-link { position:absolute; left:1rem; top:-4rem; z-index:1000; padding:.75rem 1rem; border-radius:.75rem; background:var(--vm-text); color:white; }
.vm-skip-link:focus { top:1rem; }
.vm-topbar { position:sticky; top:0; z-index:50; display:grid; grid-template-columns:210px 1fr auto; align-items:center; min-height:64px; padding:0 1.65rem; background:rgba(255,255,255,.96); border-bottom:1px solid var(--vm-line); box-shadow:0 1px 8px rgba(17,24,39,.04); }
.vm-brand { display:flex; align-items:center; gap:.55rem; min-height:48px; text-decoration:none; color:var(--vm-text); }
.vm-brand-mark { display:grid; place-items:center; flex:0 0 57px; width:57px; height:57px; color:var(--vm-blue); overflow:hidden; }
.vm-brand-mark img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.vm-brand strong { display:block; font-size:1.3rem; letter-spacing:-.03em; line-height:1; }
.vm-brand small { display:block; margin-top:.15rem; color:var(--vm-blue); font-size:0.62rem; font-weight:700; }
.vm-topnav { justify-self:center; display:flex; align-items:center; gap:2rem; height:64px; }
.vm-topnav a { position:relative; display:flex; align-items:center; gap:.35rem; min-height:48px; text-decoration:none; color:#111827; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.vm-topnav a.active { color:var(--vm-blue); }
.vm-topnav a.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:999px 999px 0 0; background:var(--vm-blue); }
.vm-nav-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#e5f7ff,#d8ecff); color:#2481ff; font-size:.62rem; box-shadow:0 4px 10px rgba(37,99,235,.18); }
.vm-top-actions { justify-self:end; display:flex; align-items:center; gap:.65rem; }
.vm-login-btn { display:inline-flex; align-items:center; gap:.42rem; min-height:38px; padding:0 .95rem; border-radius:6px; font-size:.75rem; font-weight:750; text-decoration:none; white-space:nowrap; transition:box-shadow .15s ease, transform .15s ease; }
.vm-login-btn svg { width:18px; height:18px; flex:0 0 auto; }
.vm-login-btn:hover { transform:translateY(-1px); }
.vm-login-google { border:1px solid #d1d5db; background:#fff; color:#1f2937; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.vm-login-google:hover { box-shadow:0 4px 12px rgba(0,0,0,.1); }
.vm-login-facebook { border:0; background:#1877f2; color:#fff; box-shadow:0 1px 3px rgba(24,119,242,.25); }
.vm-login-facebook:hover { box-shadow:0 4px 12px rgba(24,119,242,.35); }
.vm-user-menu { position:relative; }
.vm-user-avatar { display:grid; place-items:center; width:38px; height:38px; border:2px solid var(--vm-line); border-radius:50%; padding:0; background:var(--vm-bg); overflow:hidden; cursor:pointer; transition:border-color .15s ease; }
.vm-user-avatar:hover,.vm-user-avatar:focus-visible { border-color:var(--vm-blue); }
.vm-user-avatar img { width:100%; height:100%; object-fit:cover; }
.vm-avatar-fallback { display:grid; place-items:center; width:100%; height:100%; background:var(--vm-blue); color:#fff; font-size:.82rem; font-weight:900; }
.vm-user-dropdown { position:absolute; top:calc(100% + .45rem); right:0; z-index:60; min-width:155px; display:grid; gap:2px; padding:.35rem; border-radius:8px; background:#fff; box-shadow:0 12px 36px rgba(17,24,39,.16); }
.vm-user-dropdown:not([hidden]) { display:grid; }
.vm-user-dropdown a { display:flex; align-items:center; min-height:36px; padding:.25rem .65rem; border-radius:5px; text-decoration:none; color:#1f2937; font-size:.78rem; font-weight:650; }
.vm-user-dropdown a:hover { background:#f3f4f6; }
.vm-my-vto { position:relative; display:inline-flex; align-items:center; gap:.42rem; min-height:44px; border:0; border-radius:7px; padding:0 .95rem; background:var(--vm-blue); color:white; font-size:.84rem; font-weight:800; text-decoration:none; box-shadow:0 10px 22px rgba(11,116,255,.22); }
.vm-notification-badge { position:absolute; top:-9px; right:-9px; display:grid; place-items:center; min-width:18px; height:18px; padding:0 .25rem; border-radius:999px; background:#f4214e; color:white; font-size:.68rem; font-weight:800; }
.vm-locale-switcher { position:relative; }
.vm-locale-pill { display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .55rem; border:1px solid #e5e7eb; border-radius:6px; background:#fff; color:#374151; font-size:.78rem; font-weight:600; white-space:nowrap; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.vm-locale-pill:hover { border-color:#93c5fd; box-shadow:0 0 0 2px rgba(59,130,246,.12); }
.vm-locale-icon { width:12px; height:12px; flex-shrink:0; opacity:.5; }
.vm-locale-time { font-variant-numeric:tabular-nums; color:#6b7280; }
.vm-locale-sep { color:#d1d5db; margin:0 .05rem; }
.vm-locale-lang { color:#059669; font-weight:700; }
.vm-locale-region { color:#1d4ed8; font-weight:700; }
.vm-locale-dropdown { position:absolute; top:calc(100% + 6px); right:0; z-index:1000; min-width:220px; padding:.5rem; border:1px solid #e5e7eb; border-radius:10px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.vm-locale-section { padding:.25rem 0; }
.vm-locale-section + .vm-locale-section { border-top:1px solid #f3f4f6; margin-top:.25rem; padding-top:.5rem; }
.vm-locale-label { display:block; padding:0 .25rem .3rem; font-size:.68rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; }
.vm-locale-options { display:flex; flex-wrap:wrap; gap:.3rem; }
.vm-locale-opt { padding:.25rem .5rem; border:1px solid #e5e7eb; border-radius:5px; background:#f9fafb; color:#374151; font-size:.75rem; font-weight:600; cursor:pointer; transition:all .12s; }
.vm-locale-opt:hover { background:#eff6ff; border-color:#93c5fd; color:#1d4ed8; }
.vm-locale-opt.active { background:#dbeafe; border-color:#3b82f6; color:#1d4ed8; }
.vm-sidebar { border-right:1px solid var(--vm-line); padding:1rem .9rem 1.4rem; background:#fff; }
.vm-history-title h2 { margin:0; font-size:1.07rem; font-weight:900; letter-spacing:-.04em; }
.vm-history-title p { margin:.1rem 0 1.8rem; color:#303846; font-size:.6rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.vm-side-nav { display:grid; gap:.8rem; }
.vm-side-nav a { display:flex; align-items:center; gap:.78rem; min-height:44px; padding:.25rem .55rem; border-radius:10px; text-decoration:none; color:#1f2937; font-size:.86rem; font-weight:650; }
.vm-side-nav a:hover,.vm-side-nav a.active { background:#f5f8ff; color:var(--vm-blue); }
.vm-side-nav svg { width:18px; height:18px; color:#1f2937; }
.vm-new-generation { width:100%; min-height:44px; margin-top:2.1rem; border:0; border-radius:6px; background:var(--vm-blue); color:white; font-size:.85rem; font-weight:750; box-shadow:0 10px 24px rgba(11,116,255,.2); }
.vm-workspace { padding:1.05rem 1.9rem 0 1.9rem; overflow:hidden; }
.vm-page-title { display:flex; align-items:flex-start; gap:.7rem; margin-bottom:1.85rem; }
.vm-title-icon { display:grid; place-items:center; width:20px; height:26px; color:#111827; transform:rotate(-16deg); }
.vm-page-title h1 { margin:0; font-size:1.7rem; font-weight:900; letter-spacing:-.035em; }
.vm-page-title p { margin:.35rem 0 0; color:var(--vm-muted); font-size:.86rem; }
.vm-tryon-layout { display:grid; grid-template-columns:minmax(400px,505px) minmax(390px,1fr); align-items:start; gap:1.25rem; max-width:1220px; }
.vm-model-stage { position:relative; min-height:792px; border:1px dashed #d3dbea; border-radius:7px; overflow:hidden; background:#f8f5f0; }
.vm-stage-image { position:absolute; inset:0; aspect-ratio:9/16; background-image:url(/images/vtoMirror_bg.png); background-size:cover; background-position:center; filter:saturate(.9); }
.vm-stage-image.has-photo { background-size:cover; background-position:center top; filter:none; }
.vm-ai-ready { position:absolute; top:1.45rem; left:1.65rem; display:inline-flex; align-items:center; gap:.45rem; min-height:28px; padding:0 .95rem; border-radius:999px; background:rgba(255,255,255,.95); color:#4b5563; font-size:.67rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; box-shadow:0 8px 20px rgba(17,24,39,.08); }
.vm-ai-ready span { width:6px; height:6px; border-radius:50%; background:#ee6a77; }
.vm-ai-ready.is-ready { color:#0f7a2c; }
.vm-ai-ready.is-ready span { background:#16a34a; }
.vm-model-card { position:absolute; left:50%; top:39%; transform:translate(-50%,-50%); width:min(405px,82%); min-height:410px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 2rem 1.8rem; border-radius:12px; background:rgba(255,255,255,.72); box-shadow:0 24px 80px rgba(17,24,39,.16); backdrop-filter:blur(10px); text-align:center; }
.vm-stage-image.has-photo ~ .vm-model-card { background:rgba(255,255,255,.32); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); box-shadow:0 24px 80px rgba(17,24,39,.24); }
.vm-person-symbol { display:grid; place-items:center; width:80px; height:80px; margin-bottom:1rem; border-radius:50%; background:#dbe4ff; color:var(--vm-blue); font-size:2.15rem; }
.vm-model-card h2 { margin:0; font-size:1.72rem; font-weight:900; letter-spacing:-.04em; }
.vm-model-card p { max-width:330px; margin:.85rem 0 1.1rem; color:#677386; font-size:1.3rem; line-height:1.42; }
.vm-upload-button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; margin-bottom:1.05rem; border-radius:6px; padding:0 1rem; background:var(--vm-blue); color:white; font-size:.78rem; font-weight:850; cursor:pointer; box-shadow:0 10px 20px rgba(11,116,255,.18); }
#vm-person-image { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.vm-body-fields { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:1.05rem; }
.vm-body-fields label { display:grid; gap:.38rem; color:#5e6878; font-size:.68rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; text-align:center; }
.vm-body-fields input,.vm-body-fields select { width:100%; min-height:30px; border:1px solid #d8deea; border-radius:4px; background:white; color:#1f2937; font-size:.76rem; padding:.25rem .5rem; text-transform:none; letter-spacing:0; }
.vm-model-card small { margin-top:.55rem; color:#687486; font-size:.72rem; }
.vm-stage-cta { position:absolute; right:1.15rem; bottom:1.15rem; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; width:300px; min-height:56px; border:0; border-radius:999px; background:linear-gradient(135deg,#0b74ff,#5b77f3); color:white; font-size:1.03rem; font-weight:900; box-shadow:0 18px 36px rgba(37,99,235,.3); z-index:10; }
.vm-stage-cta:disabled { opacity:.75; cursor:not-allowed; }
.vm-stage-cta small { font-size:10px; font-weight:400; }
.vm-stage-cta svg { width:22px; height:22px; }
.vm-outfit-panel { position:relative; min-width:0; }
.vm-outfit-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.1rem 0 .55rem; }
.vm-outfit-heading h2 { margin:0; color:#293241; font-size:.72rem; font-weight:950; letter-spacing:.07em; text-transform:uppercase; }
.vm-outfit-heading span { display:inline-flex; align-items:center; justify-content:center; min-width:96px; min-height:24px; padding:0 .85rem; border-radius:999px; background:#dfe6ff; color:#18233a; font-size:.68rem; font-weight:900; white-space:nowrap; }
.vm-category-grid { display:grid; grid-template-columns:1fr 1fr; gap:.82rem 1.1rem; align-items:start; }
.vm-category-group { position:relative; min-height:88px; }
.vm-row-spacer { grid-column:1 / -1; display:block; height:0; margin-top:-.82rem; transition:height .18s ease; }
.vm-category-card { width:100%; display:grid; grid-template-columns:44px 1fr 34px; align-items:center; gap:.72rem; min-height:88px; border:1px solid #cdd5e6; border-radius:7px; background:linear-gradient(90deg,#fff 0%,#fff 66%,rgba(248,250,255,.7) 66%,#fff 100%); padding:.78rem .72rem; text-align:left; color:#111827; cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.vm-category-card:hover,.vm-category-card.is-selected { border-color:#9fbaff; box-shadow:0 12px 30px rgba(37,99,235,.08); transform:translateY(-1px); }
.vm-category-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:8px; background:#f4f8ff; color:var(--vm-blue); font-size:1.25rem; }
.vm-category-copy { display:grid; gap:.12rem; min-width:0; }
.vm-category-copy strong { font-size:.92rem; font-weight:950; letter-spacing:-.02em; }
.vm-category-copy small,.vm-category-copy em { color:#111827; font-size:.7rem; font-style:normal; line-height:1.2; }
.vm-category-copy em { color:#5f6b7a; }
.vm-add-sign { justify-self:end; color:#d5d8df; font-size:2.1rem; font-weight:200; line-height:1; }
.vm-smart-fitting { margin-top:.95rem; border:1px solid #bbc8ff; border-radius:7px; background:#dfe3ff; padding:1rem 1.05rem; color:#24304a; }
.vm-smart-fitting strong { display:flex; align-items:center; gap:.45rem; font-size:.88rem; font-weight:950; }
.vm-smart-fitting strong svg { color:var(--vm-blue); }
.vm-smart-fitting p { margin:.55rem 0 0; color:#5b6680; font-size:.76rem; }
/* ====== Product Item Card ====== */
.vm-item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vm-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  cursor: pointer;
}
.vm-item-card:hover {
  box-shadow: 0 6px 18px rgba(17,24,39,.1);
  transform: translateY(-1px);
  border-color: #b8c5d6;
}
.vm-item-link { display:contents; text-decoration:none; color:inherit; }
.vm-product-image-wrap { position:relative; overflow:hidden; background:#f8fafc; aspect-ratio:1/1; }
.vm-product-image-wrap > img { display:block; width:100%; height:100%; object-fit:contain; }
.vm-item-body { padding:.45rem .5rem .25rem; }
.vm-item-body h3 { margin:0 0 .25rem; color:#111827; font-size:.72rem; font-weight:800; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vm-item-meta { display:flex; align-items:center; justify-content:space-between; gap:.45rem; min-width:0; }
.vm-image-merchant-badge { flex:0 1 auto; max-width:132px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-flex; align-items:center; gap:.3rem; min-height:24px; padding:.15rem .5rem .15rem .2rem; border-radius:999px; background:rgba(255,255,255,.95); color:#374151; font-size:.65rem; font-weight:800; box-shadow:0 2px 8px rgba(17,24,39,.08); }
.vm-image-merchant-icon { flex:0 0 auto; width:18px; height:18px; border-radius:50%; object-fit:cover; border:1px solid var(--vm-line); background:#fff; }
.vm-image-merchant-icon-fallback { display:grid; place-items:center; background:var(--vm-blue-soft); color:var(--vm-blue); font-size:.6rem; }
.vm-price { margin:0; color:#111827; font-size:.75rem; font-weight:950; white-space:nowrap; }
.vm-item-hint { margin:0 .5rem; color:#9ca3af; font-size:.58rem; opacity:0; transition:opacity .18s ease; }
.vm-item-card:hover .vm-item-hint { opacity:1; }
.vm-merchant-link { display:flex; align-items:center; gap:.35rem; margin:.25rem .5rem 0; color:#6b7280; font-size:.65rem; font-weight:700; text-decoration:none; transition:color .15s ease; }
.vm-merchant-link:hover { color:var(--vm-blue); }
.vm-merchant-icon { width:18px; height:18px; border-radius:50%; object-fit:cover; border:1px solid var(--vm-line); }
.vm-merchant-icon-fallback { display:grid; place-items:center; background:var(--vm-blue-soft); color:var(--vm-blue); font-size:.65rem; }
.vm-item-actions { padding:.4rem .5rem .5rem; }
.vm-select-item { width:100%; min-height:30px; border:0; border-radius:5px; background:var(--vm-blue); color:#fff; font-size:.68rem; font-weight:800; cursor:pointer; transition:background .15s ease, transform .15s ease; }
.vm-select-item:hover { background:var(--vm-blue-strong); transform:translateY(-1px); }
.vm-select-item:active { transform:translateY(0); }
.vm-items-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.8rem; padding:.8rem; width:100%; }
.vm-item-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.8rem; padding:1rem; max-width:1400px; margin:0 auto; }
.vm-modal-open { overflow:hidden; }
.vm-modal-open .vm-stage-cta { z-index:100; }
.vm-modal[hidden] { display:none; }
.vm-modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:2.2rem 3.8rem; }
.vm-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.48); }
.vm-product-dialog { position:relative; z-index:1; width:min(100%,1120px); max-height:86dvh; min-height:0; display:flex; flex-direction:column; border-radius:6px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.3); overflow:hidden; }
.vm-color-dialog { position:relative; z-index:1; width:min(100%,590px); max-height:86dvh; min-height:0; display:flex; flex-direction:column; border-radius:6px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.3); overflow:hidden; }
.vm-auth-dialog { position:relative; z-index:1; width:min(100%,420px); border-radius:10px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.3); overflow:hidden; }
.vm-auth-modal-body { padding:1.35rem; text-align:center; }
.vm-auth-modal-body p { margin:0 0 1.15rem; color:#4b5563; font-size:.9rem; }
.vm-auth-login-link { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 1.25rem; border-radius:7px; background:var(--vm-blue); color:#fff; font-size:.85rem; font-weight:850; text-decoration:none; }
.vm-modal-header { display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:0 .75rem 0 .9rem; border-bottom:1px solid #e5e7eb; }
.vm-modal-header h2 { margin:0; font-size:1.3rem; font-weight:850; }
.vm-modal-close { display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:#6b7280; font-size:1.8rem; line-height:1; }
.vm-filter-row { display:flex; align-items:center; gap:.55rem; min-height:46px; padding:.55rem 1rem .45rem; overflow-x:auto; overflow-y:hidden; border-bottom:1px solid #eef1f5; scrollbar-gutter:stable; }
.vm-filter-pill { flex:0 0 auto; min-height:30px; border:1px solid #ccd4e2; border-radius:999px; background:#fff; color:#344054; padding:0 .9rem; font-size:.72rem; font-weight:800; line-height:1; white-space:nowrap; }
.vm-filter-pill.active { background:var(--vm-blue); border-color:var(--vm-blue); color:white; }
.vm-gender-row { display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-bottom:1px solid #eef1f5; }
.vm-gender-pill { flex:0 0 auto; min-height:28px; border:1px solid #d1d5db; border-radius:999px; background:#f9fafb; color:#374151; padding:0 .75rem; font-size:.7rem; font-weight:700; line-height:1; white-space:nowrap; cursor:pointer; transition:all .15s ease; }
.vm-gender-pill:hover { background:#e5e7eb; border-color:#d1d5db; }
.vm-gender-pill.active { background:var(--vm-blue); border-color:var(--vm-blue); color:white; }
.vm-gender-pill.active:hover { background:var(--vm-blue-strong); border-color:var(--vm-blue-strong); }
.vm-product-grid { display:grid; flex:1; grid-template-columns:repeat(5,minmax(140px,1fr)); gap:1.1rem .62rem; padding:1rem .8rem .7rem; overflow:auto; min-height:0; }
.vm-picker-card { position:relative; min-width:0; }
.vm-product-image-wrap { position:relative; overflow:hidden; border-radius:3px; background:#f8fafc; }
.vm-product-image-wrap > img { display:block; width:100%; aspect-ratio:1/1; object-fit:contain; border:1px solid #d9dee8; border-radius:3px; background:#f8fafc; box-shadow:0 1px 5px rgba(17,24,39,.14); }
.vm-picker-card h3 { margin:.42rem 0 .28rem; color:#111827; font-size:.72rem; font-weight:900; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vm-picker-card p { margin:0; color:#111827; font-size:.68rem; font-weight:800; text-align:center; }
.vm-item-meta { display:flex; align-items:center; justify-content:center; gap:.45rem; min-width:0; }
.vm-image-merchant-badge { flex:0 1 auto; max-width:132px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-flex; align-items:center; gap:.35rem; min-height:28px; padding:.2rem .45rem .2rem .25rem; border-radius:999px; background:rgba(255,255,255,.93); color:#111827; font-size:.68rem; font-weight:900; box-shadow:0 4px 12px rgba(17,24,39,.12); }
.vm-image-merchant-icon { flex:0 0 auto; width:22px; height:22px; border-radius:50%; object-fit:cover; border:1px solid var(--vm-line); background:#fff; }
.vm-image-merchant-icon-fallback { display:grid; place-items:center; background:var(--vm-blue-soft); color:var(--vm-blue); font-size:.66rem; }
.vm-image-merchant-badge-compact { position:absolute; left:.25rem; right:.25rem; bottom:.25rem; z-index:2; min-height:22px; padding:.12rem .32rem .12rem .18rem; font-size:.56rem; }
.vm-image-merchant-badge-compact .vm-image-merchant-icon { width:16px; height:16px; }
.vm-merchant-name { cursor:pointer; }
.vm-merchant-name:hover { color:var(--vm-blue); }
.vm-picker-link { display:contents; text-decoration:none; color:inherit; }
.vm-picker-hint { margin:.15rem 0 0; color:#9ca3af; font-size:.62rem; }
.vm-select-color { position:absolute; left:50%; bottom:2.85rem; transform:translateX(-50%); min-width:98px; min-height:34px; border:0; border-radius:2px; background:var(--vm-blue); color:white; font-size:.78rem; font-weight:900; box-shadow:0 8px 18px rgba(11,116,255,.25); }
.vm-select-color::before { content:""; position:absolute; left:10px; top:-13px; width:14px; height:14px; border-radius:50%; background:#d8e4f7; box-shadow:24px 0 #c2b59b,48px 0 #7fa9d8,72px 0 #f4d18c; }
.vm-modal-footer { display:flex; justify-content:center; min-height:50px; padding:.6rem; border-top:1px solid #e5e7eb; background:#fff; }
.vm-modal-footer-end { justify-content:flex-end; }
.vm-cancel { min-height:34px; border:1px solid #cfd6e4; border-radius:5px; padding:0 1rem; background:#fff; color:#1f2937; font-size:.78rem; font-weight:850; cursor:pointer; }

.vm-terms-agree-button { min-height:34px; border:0; border-radius:5px; padding:0 1rem; background:var(--vm-blue); color:white; font-size:.78rem; font-weight:850; cursor:pointer; }
.vm-terms-agree-button:disabled { opacity:.55; cursor:not-allowed; }

.vm-color-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:1.8rem 1.2rem 1.4rem; overflow-y:auto; max-height:100%; }
.vm-color-option { border:0; border-radius:4px; background:#fff; padding:.4rem; text-align:center; }
.vm-color-option:hover { box-shadow:0 10px 28px rgba(17,24,39,.12); }
.vm-color-option img { width:100%; aspect-ratio:1/1; object-fit:cover; background:#f8fafc; }
.vm-color-option span { display:block; margin:.45rem 0 0; font-size:.75rem; font-weight:850; }
.vm-selected-slot { position:absolute; left:0; top:calc(100% + .65rem); z-index:5; display:flex; gap:.5rem; width:max-content; max-width:100%; margin:0; pointer-events:auto; }
.vm-selected-slot[hidden] { display:none; }
.vm-selected-thumb { position:relative; display:block; width:112px; height:112px; border-radius:0 0 8px 8px; overflow:hidden; background:#f3f4f6; box-shadow:0 1px 4px rgba(17,24,39,.18); }
.vm-selected-thumb img { width:100%; height:100%; object-fit:cover; }
.vm-remove-selected { position:absolute; top:3px; right:3px; display:grid; place-items:center; width:24px; height:24px; border:0; border-radius:50%; background:rgba(17,24,39,.72); color:white; font-size:1.15rem; line-height:1; }
.vm-change-selected { position:absolute; left:0; right:0; bottom:0; min-height:23px; border:0; background:rgba(0,0,0,.65); color:white; font-size:.65rem; font-weight:900; }
.vm-new-generation-link { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.vm-portfolio-workspace { padding:1rem 1.6rem 2rem; overflow:visible; }
.vm-portfolio { max-width:1180px; margin:0 auto; }
.vm-portfolio-grid { display:grid; grid-template-columns:minmax(420px,505px) minmax(430px,1fr); gap:2.35rem; align-items:start; }
.vm-portfolio-visual-card { position:relative; min-height:760px; border-radius:22px; background:#f4f0eb; overflow:hidden; box-shadow:0 26px 58px rgba(17,24,39,.13); }
.vm-portfolio-image { width:100%; display:block; background:#f3f4f6; }
.vm-portfolio-placeholder { min-height:760px; display:grid; place-items:center; padding:2rem; color:#6b7280; font-weight:800; text-align:center; background:linear-gradient(135deg,rgba(248,250,252,.90),rgba(243,244,246,.90)),url('/images/portfolio_bg.png') center/cover no-repeat; }
.vm-portfolio-render-badge { position:absolute; top:1.35rem; left:1.35rem; z-index:3; display:inline-flex; align-items:center; gap:.45rem; min-height:28px; padding:0 .9rem; border-radius:999px; background:rgba(255,255,255,.92); color:#4b5563; font-size:.66rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 10px 24px rgba(17,24,39,.1); }
.vm-portfolio-render-badge svg { color:#6b7280; }
.vm-portfolio-overlay-items { position:absolute; top:5.2rem; right:.65rem; z-index:3; display:grid; gap:1rem; width:82px; }
.vm-portfolio-overlay-item { display:grid; gap:.18rem; text-align:center; text-decoration:none; color:white; text-shadow:0 1px 7px rgba(0,0,0,.45); font-size:.72rem; font-weight:850; }
.vm-portfolio-overlay-item img { width:82px; height:82px; object-fit:cover; border-radius:7px; background:rgba(255,255,255,.72); box-shadow:0 8px 22px rgba(0,0,0,.18); }
.vm-portfolio-overlay-item strong { line-height:1.05; }
.vm-portfolio-overlay-item span { line-height:1.05; }
.vm-download-image { position:absolute; left:50%; bottom:1rem; z-index:4; transform:translateX(-50%); display:inline-flex; align-items:center; gap:.45rem; min-height:38px; padding:0 1.15rem; border-radius:999px; background:rgba(255,255,255,.96); color:#111827; font-size:.76rem; font-weight:900; text-decoration:none; box-shadow:0 10px 28px rgba(17,24,39,.18); }
.vm-portfolio-detail-panel { min-width:0; padding-top:.3rem; }
.vm-portfolio-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:2.4rem; }
.vm-portfolio-heading-row h1 { margin:0; font-size:1.95rem; line-height:1.08; font-weight:950; letter-spacing:-.055em; color:#0b0f19; }
.vm-portfolio-heading-row p { max-width:520px; margin:.72rem 0 0; color:#657083; font-size:.84rem; line-height:1.55; }
.vm-atelier-badge { display:grid; place-items:center; width:84px; min-height:48px; border-radius:4px; background:#f2efec; color:#938a82; font-size:.55rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; text-align:center; line-height:1.2; }
.vm-components-card { border-radius:13px; background:#fbfbfb; padding:1.15rem 1.15rem 1rem; box-shadow:0 14px 34px rgba(17,24,39,.04); }
.vm-components-card h2 { margin:0 0 1.15rem; font-size:.82rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; color:#263142; }
.vm-component-list { display:grid; gap:.8rem; }
.vm-component { display:grid; grid-template-columns:74px 1fr auto; align-items:center; gap:.85rem; min-height:94px; padding:.65rem .7rem; border:0; border-radius:10px; background:#fff; box-shadow:0 10px 25px rgba(17,24,39,.035); text-decoration:none; color:inherit; transition:box-shadow .15s; }
.vm-component:hover { box-shadow:0 10px 25px rgba(17,24,39,.10); }
.vm-component-image-wrap { position:relative; width:74px; height:74px; overflow:hidden; border-radius:5px; background:#f3f4f6; flex:0 0 auto; }
.vm-component-image-wrap > img { width:100%; height:100%; object-fit:cover; border-radius:5px; background:#f3f4f6; }
.vm-component-copy { min-width:0; }
.vm-component-copy h3 { margin:0 0 .12rem; color:#172033; font-size:.76rem; font-weight:950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vm-component-copy h3 a { color:inherit; text-decoration:none; }
.vm-component-copy h3 a:hover { color:var(--vm-blue); }
.vm-component-copy p { margin:0; color:#9aa1ad; font-size:.62rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.vm-portfolio-merchant { display:inline-flex; margin-top:.2rem; color:var(--vm-blue); font-size:.62rem; font-weight:900; text-decoration:none; }
.vm-portfolio-merchant:hover { text-decoration:underline; }
.vm-component > strong { color:#111827; font-size:.88rem; font-weight:950; white-space:nowrap; }
.vm-social-action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-top:1.45rem; }
.vm-social-card { min-height:86px; display:grid; gap:.35rem; align-content:center; border:2px solid #d8dee9; border-radius:8px; background:#fff; padding:.75rem .65rem; color:#111827; text-align:center; cursor:pointer; }
.vm-social-card strong { display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.72rem; font-weight:950; }
.vm-social-card small { color:#8a93a3; font-size:.58rem; font-weight:700; }
.vm-like-toggle { border-color:#0b74ff; }
.vm-share-card { border-color:#20a35b; }
.vm-wishlist-toggle { border-color:#ec4b61; }
.vm-social-card[aria-pressed="true"] { background:#0b74ff; color:white; }
.vm-share-card[aria-pressed="true"] { background:#20a35b; border-color:#20a35b; color:white; }
.vm-wishlist-toggle[aria-pressed="true"] { background:#ec4b61; border-color:#ec4b61; color:white; }
.vm-social-card[aria-pressed="true"] strong { color:white; }
.vm-social-card[aria-pressed="true"] small { color:rgba(255,255,255,.8); }
.vm-social-card:disabled { opacity:.6; cursor:not-allowed; }
.vm-toggle-dot { display:inline-block; width:34px; height:18px; border-radius:999px; background:#e5e7eb; position:relative; vertical-align:middle; cursor:pointer; }
.vm-toggle-dot::after { content:""; position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:white; box-shadow:0 1px 4px rgba(0,0,0,.18); transition:left .18s ease; }
.vm-toggle-dot.is-on { background:#22c55e; }
.vm-toggle-dot.is-on::after { left:19px; }
.vm-share-strip { margin-top:1rem; border-radius:12px; background:#fbfbfb; padding:1rem 1.05rem; text-align:center; box-shadow:0 10px 24px rgba(17,24,39,.035); }
.vm-share-strip p { margin:0 0 .9rem; color:#8d8990; font-size:.72rem; font-style:italic; font-weight:700; }
.vm-share-buttons { display:flex; align-items:center; justify-content:center; gap:.55rem; flex-wrap:wrap; }
.vm-share-buttons button,.vm-share-buttons a { min-width:72px; min-height:28px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #dce2eb; border-radius:4px; background:#fff; color:#334155; font-size:.68rem; font-weight:850; text-decoration:none; }
.vm-list-header { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin:0 0 1.4rem; }
.vm-list-header h1 { margin:0; font-size:1.8rem; font-weight:900; letter-spacing:-.035em; }
.vm-list-header span { color:#6b7280; font-size:.72rem; font-weight:750; }
.vm-list-empty { padding:6rem 2rem; text-align:center; }
.vm-list-empty h2 { margin:0; font-size:1.4rem; font-weight:900; }
.vm-list-empty p { margin:.5rem 0 1.5rem; color:#6b7280; font-size:.9rem; }
.vm-list-empty a { display:inline-flex; align-items:center; min-height:42px; padding:0 1.5rem; border:0; border-radius:8px; background:#0b74ff; color:#fff; font-size:.85rem; font-weight:850; cursor:pointer; text-decoration:none; box-shadow:0 10px 24px rgba(11,116,255,.2); }
.vm-vto-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.2rem; }
.vm-vto-card { display:grid; gap:.5rem; }
.vm-vto-card-image { position:relative; display:block; border-radius:14px; overflow:hidden; aspect-ratio:2/3; background:#f0f2f5; text-decoration:none; }
.vm-vto-card-image img { width:100%; height:100%; object-fit:cover; }
.vm-vto-card-placeholder { display:grid; place-items:center; width:100%; height:100%; color:#6b7280; font-weight:800; font-size:.8rem; }
.vm-vto-card-placeholder.vm-error { color:#dc2626; }
.vm-vto-card-strip { display:flex; gap:.35rem; height:100px; padding:0; border-radius:8px; background:#f8fafc; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.vm-vto-card-strip::-webkit-scrollbar { display:none; }
.vm-vto-card-strip > div { flex:0 0 100px; width:100px; height:100px; min-width:100px; }
.vm-vto-card-strip img { width:100px; height:100px; object-fit:cover; border-radius:4px; background:#fff; }
.vm-vto-card-footer { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:34px; padding:.35rem .2rem; }
.vm-vto-card-footer svg { width:18px; height:18px; color:#4b5563; fill:none; stroke:currentColor; stroke-width:2px; }
.vm-vto-card-owner { display:flex; align-items:center; gap:.5rem; padding:.35rem .25rem; text-decoration:none; color:inherit; cursor:pointer; }
.vm-vto-card-owner:hover { opacity:.8; }
.vm-vto-card-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; background:#e5e7eb; flex-shrink:0; }
.vm-vto-card-owner-name { font-size:.78rem; font-weight:700; color:#1f2937; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vm-vto-actions { display:flex; align-items:center; gap:.8rem; }
.vm-vto-heart,.vm-vto-like { display:inline-flex; align-items:center; gap:.15rem; border:0; background:transparent; color:#4b5563; font-size:.75rem; font-weight:900; cursor:pointer; }
.vm-vto-heart b,.vm-vto-like b { color:#111827; }
.vm-list-more { text-align:center; padding:2rem 0 1rem; }
.vm-list-more a { display:inline-flex; align-items:center; justify-content:center; min-width:130px; min-height:40px; border:1px solid #d1d5db; border-radius:6px; background:#fff; color:#374151; font-size:.8rem; font-weight:850; text-decoration:none; }
.vm-list-filter-badge { margin:-.6rem 0 1rem; }
.vm-list-filter-badge a { display:inline-flex; align-items:center; min-height:30px; padding:0 .75rem; border:1px solid #d1d5db; border-radius:999px; background:#f9fafb; color:#374151; font-size:.75rem; font-weight:750; text-decoration:none; gap:.35rem; }
.vm-list-filter-badge a:hover { background:#e5e7eb; }
.vm-error { color:#b42318; font-weight:700; }
/* Settings page */
.vm-settings-workspace { max-width: 90%; margin: 0 auto; }
.vm-settings-grid { display:grid; gap:1.5rem; }
.vm-settings-card { border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:1.4rem 1.6rem; }
.vm-settings-card h2 { margin:0 0 .35rem; font-size:.95rem; font-weight:900; }
.vm-settings-hint { margin:0 0 1rem; color:#6b7280; font-size:.74rem; }
.vm-settings-profile { display:flex; align-items:flex-start; gap:1.5rem; }
.vm-settings-avatar { flex:0 0 auto; width:72px; height:72px; border-radius:50%; overflow:hidden; background:var(--vm-blue); }
.vm-settings-avatar img { width:100%; height:100%; object-fit:cover; }
.vm-avatar-large { display:grid; place-items:center; width:100%; height:100%; font-size:1.8rem; font-weight:900; color:#fff; }
.vm-settings-profile-fields { flex:1; display:grid; gap:1rem; min-width:0; }
.vm-settings-field { display:grid; gap:.3rem; }
.vm-settings-field label { color:#374151; font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.vm-settings-field input,.vm-settings-field select { width:100%; min-height:38px; border:1px solid #d1d5db; border-radius:6px; padding:0 .7rem; background:#fff; color:#111827; font-size:.8rem; transition:border-color .15s ease; }
.vm-settings-field input:focus,.vm-settings-field select:focus { border-color:var(--vm-blue); outline:none; box-shadow:0 0 0 3px rgba(11,116,255,.15); }
.vm-settings-field input[readonly] { background:#f9fafb; color:#6b7280; cursor:not-allowed; }
.vm-settings-body-fields { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.vm-settings-image-area { display:flex; gap:1.2rem; align-items:flex-start; }
.vm-settings-image-preview { position:relative; width:180px; aspect-ratio:9/16; border:1px dashed #d1d5db; border-radius:8px; overflow:hidden; background:#f9fafb; }
.vm-settings-image-preview img { width:100%; height:100%; object-fit:cover; }
.vm-settings-image-empty { display:grid; place-items:center; gap:.4rem; width:100%; height:100%; color:#9ca3af; font-size:.68rem; font-weight:700; }
.vm-settings-image-empty svg { width:28px; height:28px; }
.vm-settings-image-remove { position:absolute; top:4px; right:4px; display:grid; place-items:center; width:24px; height:24px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:1.3rem; line-height:1; cursor:pointer; }
.vm-settings-image-remove:hover { background:rgba(220,38,38,.85); }
.vm-settings-image-actions { display:grid; gap:.5rem; }
.vm-settings-upload-btn { display:inline-flex; align-items:center; min-height:34px; padding:0 1rem; border:0; border-radius:6px; background:var(--vm-blue); color:#fff; font-size:.75rem; font-weight:850; cursor:pointer; box-shadow:0 4px 12px rgba(11,116,255,.18); }
.vm-settings-upload-btn:hover { background:#075fe0; }
.vm-settings-footer { display:flex; align-items:center; gap:1rem; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid #e5e7eb; }
.vm-settings-save { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:0 1.6rem; border:0; border-radius:8px; background:var(--vm-blue); color:#fff; font-size:.85rem; font-weight:900; cursor:pointer; box-shadow:0 10px 24px rgba(11,116,255,.22); transition:transform .15s ease, box-shadow .15s ease; }
.vm-settings-save:hover { transform:translateY(-1px); box-shadow:0 14px 30px rgba(11,116,255,.28); }
.vm-settings-save:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.vm-settings-save svg { width:18px; height:18px; }
.vm-settings-status { font-size:.78rem; font-weight:700; }
.vm-settings-status.vm-saved { color:#16a34a; }
.vm-settings-status.vm-error { color:#dc2626; }
@media (max-width:720px) {
  .vm-settings-profile { flex-direction:column; align-items:center; }
  .vm-settings-body-fields { grid-template-columns:1fr; }
  .vm-settings-image-area { flex-direction:column; }
  .vm-settings-image-preview { width:100%; max-width:200px; }
  .vm-settings-footer { flex-direction:column; align-items:stretch; }
  .vm-settings-save { justify-content:center; }
}
.vm-merchant-link { display:flex; align-items:center; gap:.45rem; margin:.75rem .9rem 0; color:#374151; font-size:.78rem; font-weight:800; text-decoration:none; }
.vm-merchant-link:hover { color:var(--vm-blue); }
.vm-merchant-icon { width:24px; height:24px; border-radius:50%; object-fit:cover; border:1px solid var(--vm-line); }
.vm-merchant-icon-fallback { display:grid; place-items:center; background:var(--vm-blue-soft); color:var(--vm-blue); font-size:.72rem; }
.vm-store-hero { display:flex; align-items:center; gap:1.4rem; margin-bottom:2rem; padding:1.6rem; border:1px solid var(--vm-line); border-radius:18px; background:linear-gradient(135deg,#fff,#f5f8ff); box-shadow:0 10px 30px rgba(17,24,39,.06); }
.vm-store-icon { width:112px; height:112px; border-radius:24px; object-fit:cover; border:1px solid var(--vm-line); background:#fff; }
.vm-store-icon-fallback { display:grid; place-items:center; color:var(--vm-blue); background:var(--vm-blue-soft); font-size:2.4rem; font-weight:900; }
.vm-store-hero h1 { margin:0; font-size:2rem; font-weight:950; letter-spacing:-.04em; }
.vm-store-hero p { max-width:720px; margin:.35rem 0 .7rem; color:var(--vm-muted); }
.vm-store-meta { display:flex; flex-wrap:wrap; gap:.5rem; }
.vm-store-meta a,.vm-store-meta span { display:inline-flex; align-items:center; min-height:28px; padding:0 .7rem; border-radius:999px; background:#fff; color:#374151; font-size:.78rem; font-weight:800; text-decoration:none; border:1px solid #e5e7eb; }
.vm-store-meta a:hover { color:var(--vm-blue); border-color:var(--vm-blue); }
.vm-empty-state { padding:2rem; border:1px dashed var(--vm-line); border-radius:14px; color:var(--vm-muted); text-align:center; background:#fff; }
@media (max-width:720px) { .vm-store-hero { flex-direction:column; align-items:flex-start; } .vm-store-icon { width:88px; height:88px; border-radius:18px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
@media (max-width:1100px) {
  .vm-topbar { grid-template-columns:190px 1fr; row-gap:.5rem; padding:.5rem 1rem; }
  .vm-top-actions { grid-column:2; grid-row:1; }
  .vm-shell { grid-template-columns:1fr; }
  .vm-sidebar { display:none; }
  .vm-mobile-bottomnav { display:flex; }
  .vm-footer { padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }
  .vm-workspace { padding:1rem; }
  .vm-tryon-layout { grid-template-columns:1fr; max-width:none; }
  .vm-model-stage { min-height:720px; }
  .vm-modal { padding:1rem; }
  .vm-product-grid { grid-template-columns:repeat(3,minmax(130px,1fr)); }
  .vm-portfolio-grid { grid-template-columns:1fr; max-width:760px; margin:0 auto; }
  .vm-portfolio-visual-card,.vm-portfolio-placeholder { min-height:530px; }
  .vm-portfolio-render-badge { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); min-height:36px; padding:0 1.2rem; font-size:.82rem; }
  .vm-social-action-grid { grid-template-columns:1fr; }
  .vm-vto-grid { grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
  .vm-list-header h1 { font-size:1.55rem; }
}
@media (max-width:720px) {
  .vm-topbar { display:flex; flex-wrap:wrap; gap:.65rem; min-height:auto; }
  .vm-topnav { order:3; width:100%; justify-content:center; gap:1.3rem; height:48px; }
  .vm-top-actions { margin-left:auto; }
  .vm-locale-switcher { display:none; }
  .vm-page-title h1 { font-size:1.45rem; }
  .vm-model-card { top:42%; width:88%; min-height:auto; padding:1.4rem 1rem; }
  .vm-body-fields { grid-template-columns:1fr; gap:.65rem; }
  .vm-category-grid { grid-template-columns:1fr; gap:.5rem; }
  .vm-category-group { min-height:auto; }
  .vm-row-spacer { display:none; }
  .vm-selected-slot { position:static; width:100%; flex-wrap:wrap; }
  .vm-selected-thumb { width:80px; height:80px; }
  .vm-stage-cta { position:fixed; left:50%; right:auto; bottom:64px; transform:translateX(-50%); width:80%; border-radius:999px; z-index:9999; }
  .vm-product-grid { grid-template-columns:repeat(2,minmax(120px,1fr)); }
  .vm-color-grid { grid-template-columns:repeat(3,1fr); gap:.5rem; padding:1rem .6rem; }
  .vm-portfolio-heading-row { display:grid; gap:.75rem; }
  .vm-atelier-badge { width:auto; max-width:150px; }
  .vm-component { grid-template-columns:64px 1fr; }
  .vm-component-image-wrap { width:64px; height:64px; }
  .vm-component > strong { grid-column:2; justify-self:start; }
  .vm-portfolio-overlay-items { width:62px; gap:.6rem; }
  .vm-portfolio-overlay-item img { width:62px; height:62px; }
  .vm-download-image { white-space:nowrap; }
  .vm-vto-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:.8rem; }
  .vm-list-header { display:grid; gap:.4rem; }
  .vm-list-header h1 { font-size:1.35rem; }
  .vm-list-empty { padding:4rem 1rem; }
}

.vm-terms-dialog { position:relative; z-index:1; width:min(100%,560px); max-height:86dvh; display:flex; flex-direction:column; border-radius:6px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.3); overflow:hidden; }
.vm-terms-body { padding:1.1rem 1.4rem .4rem; overflow-y:auto; }
.vm-terms-intro { margin:0 0 .9rem; color:#374151; font-size:.85rem; line-height:1.45; }
.vm-terms-list { margin:0; padding-left:1.15rem; color:#1f2937; font-size:.78rem; line-height:1.5; }
.vm-terms-list li + li { margin-top:.55rem; }
.vm-terms-footer { flex-direction:column; align-items:stretch; gap:.55rem; padding:.85rem 1.4rem 1rem; border-top:1px solid #eef1f5; }
.vm-terms-checkrow { display:flex; align-items:flex-start; gap:.55rem; color:#1f2937; font-size:.8rem; }
.vm-terms-checkrow input[type="checkbox"] { margin-top:.18rem; }
.vm-terms-version { color:#6b7280; font-size:.7rem; }
.vm-terms-actions { display:flex; justify-content:flex-end; gap:.55rem; }


/* Site footer (matches moutlet.top reference layout) */
.vm-footer { margin-top: auto; padding-top: 2rem; background:var(--vm-blue-soft); border-top:1px solid var(--vm-line); }
.vm-footer .vm-footer-brand-mark { display:inline-grid; place-items:center; width:32px; height:32px; }
.vm-footer .vm-footer-brand-mark img { width:100%; height:100%; object-fit:contain; }
.vm-footer-link { display:inline-flex; align-items:center; gap:.35rem; color:var(--vm-text); text-decoration:none; font-size:.92rem; }
.vm-footer-link:hover { color:var(--vm-blue-strong); text-decoration:underline; }
.vm-footer-link .material-symbols-outlined { font-size:1.05rem; color:var(--vm-blue); }
.vm-footer .text-muted { color:var(--vm-muted) !important; }
.vm-footer a img { vertical-align:middle; }


main { flex-grow: 1; }

/* Mobile bottom nav — replaces sidebar on small screens */
.vm-mobile-bottomnav { display:none; position:fixed; bottom:0; left:0; right:0; z-index:80; justify-content:space-around; align-items:stretch; height:60px; padding:4px 0 max(4px,env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--vm-line); box-shadow:0 -2px 8px rgba(17,24,39,.06); }
.vm-mobile-bottomnav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex:1; min-height:0; text-decoration:none; color:var(--vm-muted); font-size:.58rem; font-weight:700; letter-spacing:.02em; }
.vm-mobile-bottomnav a svg { width:20px; height:20px; flex-shrink:0; }
.vm-mobile-bottomnav a.active { color:var(--vm-blue); }



/* Static pages (privacy/terms/contact) - full width without sidebar */
.vm-shell:has(.vm-static-page) {
  grid-template-columns: 1fr;
}
.vm-shell:has(.vm-static-page) .vm-workspace {
  padding-left: 0;
  padding-right: 0;
}



:root {
  --vm-blue:#0b74ff;
  --vm-blue-strong:#075fe0;
  --vm-blue-soft:#eaf2ff;
  --vm-indigo-soft:#dfe5ff;
  --vm-line:#d8deea;
  --vm-text:#111827;
  --vm-muted:#647084;
  --vm-bg:#ffffff;
  --vm-surface:#ffffff;
  --vm-ring:#2563eb;
}
* { box-sizing:border-box; }
html { min-width:320px; }
body { min-height: 100vh; margin:0; background:var(--vm-bg); color:var(--vm-text); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.45; display: flex; flex-direction: column; }
a { color:inherit; }
button,a,input,select { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--vm-ring); outline-offset:3px; }
svg { width:1em; height:1em; fill:currentColor; }
.vm-skip-link { position:absolute; left:1rem; top:-4rem; z-index:1000; padding:.75rem 1rem; border-radius:.75rem; background:var(--vm-text); color:white; }
.vm-skip-link:focus { top:1rem; }
.vm-topbar { position:sticky; top:0; z-index:50; display:grid; grid-template-columns:210px 1fr auto; align-items:center; min-height:64px; padding:0 1.65rem; background:rgba(255,255,255,.96); border-bottom:1px solid var(--vm-line); box-shadow:0 1px 8px rgba(17,24,39,.04); }
.vm-brand { display:flex; align-items:center; gap:.55rem; min-height:48px; text-decoration:none; color:var(--vm-text); }
.vm-brand-mark { display:grid; place-items:center; flex:0 0 57px; width:57px; height:57px; color:var(--vm-blue); overflow:hidden; }
.vm-brand-mark img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.vm-brand strong { display:block; font-size:1.3rem; letter-spacing:-.03em; line-height:1; }
.vm-brand small { display:block; margin-top:.15rem; color:var(--vm-blue); font-size:0.62rem; font-weight:700; }
.vm-topnav { justify-self:center; display:flex; align-items:center; gap:2rem; height:64px; }
.vm-topnav a { position:relative; display:flex; align-items:center; gap:.35rem; min-height:48px; text-decoration:none; color:#111827; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.vm-topnav a.active { color:var(--vm-blue); }
.vm-topnav a.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:999px 999px 0 0; background:var(--vm-blue); }
.vm-nav-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#e5f7ff,#d8ecff); color:#2481ff; font-size:.62rem; box-shadow:0 4px 10px rgba(37,99,235,.18); }
.vm-top-actions { justify-self:end; display:flex; align-items:center; gap:.65rem; }
.vm-login-btn { display:inline-flex; align-items:center; gap:.42rem; min-height:38px; padding:0 .95rem; border-radius:6px; font-size:.75rem; font-weight:750; text-decoration:none; white-space:nowrap; transition:box-shadow .15s ease, transform .15s ease; }
.vm-login-btn svg { width:18px; height:18px; flex:0 0 auto; }
.vm-login-btn:hover { transform:translateY(-1px); }
.vm-login-google { border:1px solid #d1d5db; background:#fff; color:#1f2937; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.vm-login-google:hover { box-shadow:0 4px 12px rgba(0,0,0,.1); }
.vm-login-facebook { border:0; background:#1877f2; color:#fff; box-shadow:0 1px 3px rgba(24,119,242,.25); }
.vm-login-facebook:hover { box-shadow:0 4px 12px rgba(24,119,242,.35); }
.vm-user-menu { position:relative; }
.vm-user-avatar { display:grid; place-items:center; width:38px; height:38px; border:2px solid var(--vm-line); border-radius:50%; padding:0; background:var(--vm-bg); overflow:hidden; cursor:pointer; transition:border-color .15s ease; }
.vm-user-avatar:hover,.vm-user-avatar:focus-visible { border-color:var(--vm-blue); }
.vm-user-avatar img { width:100%; height:100%; object-fit:cover; }
.vm-avatar-fallback { display:grid; place-items:center; width:100%; height:100%; background:var(--vm-blue); color:#fff; font-size:.82rem; font-weight:900; }
.vm-user-dropdown { position:absolute; top:calc(100% + .45rem); right:0; z-index:60; min-width:155px; display:grid; gap:2px; padding:.35rem; border-radius:8px; background:#fff; box-shadow:0 12px 36px rgba(17,24,39,.16); }
.vm-user-dropdown:not([hidden]) { display:grid; }
.vm-user-dropdown a { display:flex; align-items:center; min-height:36px; padding:.25rem .65rem; border-radius:5px; text-decoration:none; color:#1f2937; font-size:.78rem; font-weight:650; }
.vm-user-dropdown a:hover { background:#f3f4f6; }
.vm-my-vto { position:relative; display:inline-flex; align-items:center; gap:.42rem; min-height:44px; border:0; border-radius:7px; padding:0 .95rem; background:var(--vm-blue); color:white; font-size:.84rem; font-weight:800; text-decoration:none; box-shadow:0 10px 22px rgba(11,116,255,.22); }
.vm-notification-badge { position:absolute; top:-9px; right:-9px; display:grid; place-items:center; min-width:18px; height:18px; padding:0 .25rem; border-radius:999px; background:#f4214e; color:white; font-size:.68rem; font-weight:800; }
.vm-locale-switcher { position:relative; }
.vm-locale-pill { display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .55rem; border:1px solid #e5e7eb; border-radius:6px; background:#fff; color:#374151; font-size:.78rem; font-weight:600; white-space:nowrap; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.vm-locale-pill:hover { border-color:#93c5fd; box-shadow:0 0 0 2px rgba(59,130,246,.12); }
.vm-locale-icon { width:12px; height:12px; flex-shrink:0; opacity:.5; }
.vm-locale-time { font-variant-numeric:tabular-nums; color:#6b7280; }
.vm-locale-sep { color:#d1d5db; margin:0 .05rem; }
.vm-locale-lang { color:#059669; font-weight:700; }
.vm-locale-region { color:#1d4ed8; font-weight:700; }
.vm-locale-dropdown { position:absolute; top:calc(100% + 6px); right:0; z-index:1000; min-width:220px; padding:.5rem; border:1px solid #e5e7eb; border-radius:10px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.vm-locale-section { padding:.25rem 0; }
.vm-locale-section + .vm-locale-section { border-top:1px solid #f3f4f6; margin-top:.25rem; padding-top:.5rem; }
.vm-locale-label { display:block; padding:0 .25rem .3rem; font-size:.68rem; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.04em; }
.vm-locale-options { display:flex; flex-wrap:wrap; gap:.3rem; }
.vm-locale-opt { padding:.25rem .5rem; border:1px solid #e5e7eb; border-radius:5px; background:#f9fafb; color:#374151; font-size:.75rem; font-weight:600; cursor:pointer; transition:all .12s; }
.vm-locale-opt:hover { background:#eff6ff; border-color:#93c5fd; color:#1d4ed8; }
.vm-locale-opt.active { background:#dbeafe; border-color:#3b82f6; color:#1d4ed8; }
.vm-shell { display:grid; grid-template-columns:210px 1fr; }
.vm-sidebar { border-right:1px solid var(--vm-line); padding:1rem .9rem 1.4rem; background:#fff; }
.vm-history-title h2 { margin:0; font-size:1.07rem; font-weight:900; letter-spacing:-.04em; }
.vm-history-title p { margin:.1rem 0 1.8rem; color:#303846; font-size:.6rem; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.vm-side-nav { display:grid; gap:.8rem; }
.vm-side-nav a { display:flex; align-items:center; gap:.78rem; min-height:44px; padding:.25rem .55rem; border-radius:10px; text-decoration:none; color:#1f2937; font-size:.86rem; font-weight:650; }
.vm-side-nav a:hover,.vm-side-nav a.active { background:#f5f8ff; color:var(--vm-blue); }
.vm-side-nav svg { width:18px; height:18px; color:#1f2937; }
.vm-new-generation { width:100%; min-height:44px; margin-top:2.1rem; border:0; border-radius:6px; background:var(--vm-blue); color:white; font-size:.85rem; font-weight:750; box-shadow:0 10px 24px rgba(11,116,255,.2); }
.vm-workspace { padding:1.05rem 1.9rem 0 1.9rem; overflow:hidden; }
.vm-page-title { display:flex; align-items:flex-start; gap:.7rem; margin-bottom:1.85rem; }
.vm-title-icon { display:grid; place-items:center; width:20px; height:26px; color:#111827; transform:rotate(-16deg); }
.vm-page-title h1 { margin:0; font-size:1.7rem; font-weight:900; letter-spacing:-.035em; }
.vm-page-title p { margin:.35rem 0 0; color:var(--vm-muted); font-size:.86rem; }
.vm-tryon-layout { display:grid; grid-template-columns:minmax(400px,505px) minmax(390px,1fr); align-items:start; gap:1.25rem; max-width:1220px; }
.vm-model-stage { position:relative; min-height:792px; border:1px dashed #d3dbea; border-radius:7px; overflow:hidden; background:#f8f5f0; }
.vm-stage-image { position:absolute; inset:0; aspect-ratio:9/16; background-image:url(/images/vtoMirror_bg.png); background-size:cover; background-position:center; filter:saturate(.9); }
.vm-stage-image.has-photo { background-size:cover; background-position:center top; filter:none; }
.vm-ai-ready { position:absolute; top:1.45rem; left:1.65rem; display:inline-flex; align-items:center; gap:.45rem; min-height:28px; padding:0 .95rem; border-radius:999px; background:rgba(255,255,255,.95); color:#4b5563; font-size:.67rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; box-shadow:0 8px 20px rgba(17,24,39,.08); }
.vm-ai-ready span { width:6px; height:6px; border-radius:50%; background:#ee6a77; }
.vm-ai-ready.is-ready { color:#0f7a2c; }
.vm-ai-ready.is-ready span { background:#16a34a; }
.vm-model-card { position:absolute; left:50%; top:39%; transform:translate(-50%,-50%); width:min(405px,82%); min-height:410px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 2rem 1.8rem; border-radius:12px; background:rgba(255,255,255,.72); box-shadow:0 24px 80px rgba(17,24,39,.16); backdrop-filter:blur(10px); text-align:center; }
.vm-stage-image.has-photo ~ .vm-model-card { background:rgba(255,255,255,.32); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); box-shadow:0 24px 80px rgba(17,24,39,.24); }
.vm-person-symbol { display:grid; place-items:center; width:80px; height:80px; margin-bottom:1rem; border-radius:50%; background:#dbe4ff; color:var(--vm-blue); font-size:2.15rem; }
.vm-model-card h2 { margin:0; font-size:1.72rem; font-weight:900; letter-spacing:-.04em; }
.vm-model-card p { max-width:330px; margin:.85rem 0 1.1rem; color:#677386; font-size:1.3rem; line-height:1.42; }
.vm-upload-button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; margin-bottom:1.05rem; border-radius:6px; padding:0 1rem; background:var(--vm-blue); color:white; font-size:.78rem; font-weight:850; cursor:pointer; box-shadow:0 10px 20px rgba(11,116,255,.18); }
#vm-person-image { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.vm-body-fields { width:100%; display:grid; grid-template-columns:repeat(3,1fr); gap:1.05rem; }
.vm-body-fields label { display:grid; gap:.38rem; color:#5e6878; font-size:.68rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; text-align:center; }
.vm-body-fields input,.vm-body-fields select { width:100%; min-height:30px; border:1px solid #d8deea; border-radius:4px; background:white; color:#1f2937; font-size:.76rem; padding:.25rem .5rem; text-transform:none; letter-spacing:0; }
.vm-model-card small { margin-top:.55rem; color:#687486; font-size:.72rem; }
.vm-stage-cta { position:absolute; right:1.15rem; bottom:1.15rem; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; width:300px; min-height:56px; border:0; border-radius:999px; background:linear-gradient(135deg,#0b74ff,#5b77f3); color:white; font-size:1.03rem; font-weight:900; box-shadow:0 18px 36px rgba(37,99,235,.3); z-index:10; }
.vm-stage-cta:disabled { opacity:.75; cursor:not-allowed; }
.vm-stage-cta small { font-size:10px; font-weight:400; }
.vm-stage-cta svg { width:22px; height:22px; }
.vm-outfit-panel { position:relative; min-width:0; }
.vm-outfit-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.1rem 0 .55rem; }
.vm-outfit-heading h2 { margin:0; color:#293241; font-size:.72rem; font-weight:950; letter-spacing:.07em; text-transform:uppercase; }
.vm-outfit-heading span { display:inline-flex; align-items:center; justify-content:center; min-width:96px; min-height:24px; padding:0 .85rem; border-radius:999px; background:#dfe6ff; color:#18233a; font-size:.68rem; font-weight:900; white-space:nowrap; }
.vm-category-grid { display:grid; grid-template-columns:1fr 1fr; gap:.82rem 1.1rem; align-items:start; }
.vm-category-group { position:relative; min-height:88px; }
.vm-row-spacer { grid-column:1 / -1; display:block; height:0; margin-top:-.82rem; transition:height .18s ease; }
.vm-category-card { width:100%; display:grid; grid-template-columns:44px 1fr 34px; align-items:center; gap:.72rem; min-height:88px; border:1px solid #cdd5e6; border-radius:7px; background:linear-gradient(90deg,#fff 0%,#fff 66%,rgba(248,250,255,.7) 66%,#fff 100%); padding:.78rem .72rem; text-align:left; color:#111827; cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.vm-category-card:hover,.vm-category-card.is-selected { border-color:#9fbaff; box-shadow:0 12px 30px rgba(37,99,235,.08); transform:translateY(-1px); }
.vm-category-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:8px; background:#f4f8ff; color:var(--vm-blue); font-size:1.25rem; }
.vm-category-copy { display:grid; gap:.12rem; min-width:0; }
.vm-category-copy strong { font-size:.92rem; font-weight:950; letter-spacing:-.02em; }
.vm-category-copy small,.vm-category-copy em { color:#111827; font-size:.7rem; font-style:normal; line-height:1.2; }
.vm-category-copy em { color:#5f6b7a; }
.vm-add-sign { justify-self:end; color:#d5d8df; font-size:2.1rem; font-weight:200; line-height:1; }
.vm-smart-fitting { margin-top:.95rem; border:1px solid #bbc8ff; border-radius:7px; background:#dfe3ff; padding:1rem 1.05rem; color:#24304a; }
.vm-smart-fitting strong { display:flex; align-items:center; gap:.45rem; font-size:.88rem; font-weight:950; }
.vm-smart-fitting strong svg { color:var(--vm-blue); }
.vm-smart-fitting p { margin:.55rem 0 0; color:#5b6680; font-size:.76rem; }
/* ====== Product Item Card ====== */
.vm-item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vm-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  cursor: pointer;
}
.vm-item-card:hover {
  box-shadow: 0 6px 18px rgba(17,24,39,.1);
  transform: translateY(-1px);
  border-color: #b8c5d6;
}
.vm-item-link { display:contents; text-decoration:none; color:inherit; }
.vm-product-image-wrap { position:relative; overflow:hidden; background:#f8fafc; aspect-ratio:1/1; }
.vm-product-image-wrap > img { display:block; width:100%; height:100%; object-fit:contain; }
.vm-item-body { padding:.45rem .5rem .25rem; }
.vm-item-body h3 { margin:0 0 .25rem; color:#111827; font-size:.72rem; font-weight:800; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vm-item-meta { display:flex; align-items:center; justify-content:space-between; gap:.45rem; min-width:0; }
.vm-image-merchant-badge { flex:0 1 auto; max-width:132px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-flex; align-items:center; gap:.3rem; min-height:24px; padding:.15rem .5rem .15rem .2rem; border-radius:999px; background:rgba(255,255,255,.95); color:#374151; font-size:.65rem; font-weight:800; box-shadow:0 2px 8px rgba(17,24,39,.08); }
.vm-image-merchant-icon { flex:0 0 auto; width:18px; height:18px; border-radius:50%; object-fit:cover; border:1px solid var(--vm-line); background:#fff; }
.vm-image-merchant-icon-fallback { display:grid; place-items:center; background:var(--vm-blue-soft); color:var(--vm-blue); font-size:.6rem; }
.vm-price { margin:0; color:#111827; font-size:.75rem; font-weight:950; white-space:nowrap; }
.vm-item-hint { margin:0 .5rem; color:#9ca3af; font-size:.58rem; opacity:0; transition:opacity .18s ease; }
.vm-item-card:hover .vm-item-hint { opacity:1; }
.vm-merchant-link { display:flex; align-items:center; gap:.35rem; margin:.25rem .5rem 0; color:#6b7280; font-size:.65rem; font-weight:700; text-decoration:none; transition:color .15s ease; }
.vm-merchant-link:hover { color:var(--vm-blue); }
.vm-merchant-icon { width:18px; height:18px; border-radius:50%; object-fit:cover; border:1px solid var(--vm-line); }
.vm-merchant-icon-fallback { display:grid; place-items:center; background:var(--vm-blue-soft); color:var(--vm-blue); font-size:.65rem; }
.vm-item-actions { padding:.4rem .5rem .5rem; }
.vm-select-item { width:100%; min-height:30px; border:0; border-radius:5px; background:var(--vm-blue); color:#fff; font-size:.68rem; font-weight:800; cursor:pointer; transition:background .15s ease, transform .15s ease; }
.vm-select-item:hover { background:var(--vm-blue-strong); transform:translateY(-1px); }
.vm-select-item:active { transform:translateY(0); }
.vm-items-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.8rem; padding:.8rem; width:100%; }
.vm-item-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.8rem; padding:1rem; max-width:1400px; margin:0 auto; }
.vm-modal-open { overflow:hidden; }
.vm-modal-open .vm-stage-cta { z-index:100; }
.vm-modal[hidden] { display:none; }
.vm-modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:2.2rem 3.8rem; }
.vm-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.48); }
.vm-product-dialog { position:relative; z-index:1; width:min(100%,1120px); max-height:86dvh; min-height:0; display:flex; flex-direction:column; border-radius:6px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.3); overflow:hidden; }
.vm-color-dialog { position:relative; z-index:1; width:min(100%,590px); max-height:86dvh; min-height:0; display:flex; flex-direction:column; border-radius:6px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.3); overflow:hidden; }
.vm-auth-dialog { position:relative; z-index:1; width:min(100%,420px); border-radius:10px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.3); overflow:hidden; }
.vm-auth-modal-body { padding:1.35rem; text-align:center; }
.vm-auth-modal-body p { margin:0 0 1.15rem; color:#4b5563; font-size:.9rem; }
.vm-auth-login-link { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 1.25rem; border-radius:7px; background:var(--vm-blue); color:#fff; font-size:.85rem; font-weight:850; text-decoration:none; }
.vm-modal-header { display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:0 .75rem 0 .9rem; border-bottom:1px solid #e5e7eb; }
.vm-modal-header h2 { margin:0; font-size:1.3rem; font-weight:850; }
.vm-modal-close { display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:#6b7280; font-size:1.8rem; line-height:1; }
.vm-filter-row { display:flex; align-items:center; gap:.55rem; min-height:46px; padding:.55rem 1rem .45rem; overflow-x:auto; overflow-y:hidden; border-bottom:1px solid #eef1f5; scrollbar-gutter:stable; }
.vm-filter-pill { flex:0 0 auto; min-height:30px; border:1px solid #ccd4e2; border-radius:999px; background:#fff; color:#344054; padding:0 .9rem; font-size:.72rem; font-weight:800; line-height:1; white-space:nowrap; }
.vm-filter-pill.active { background:var(--vm-blue); border-color:var(--vm-blue); color:white; }
.vm-gender-row { display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-bottom:1px solid #eef1f5; }
.vm-gender-pill { flex:0 0 auto; min-height:28px; border:1px solid #d1d5db; border-radius:999px; background:#f9fafb; color:#374151; padding:0 .75rem; font-size:.7rem; font-weight:700; line-height:1; white-space:nowrap; cursor:pointer; transition:all .15s ease; }
.vm-gender-pill:hover { background:#e5e7eb; border-color:#d1d5db; }
.vm-gender-pill.active { background:var(--vm-blue); border-color:var(--vm-blue); color:white; }
.vm-gender-pill.active:hover { background:var(--vm-blue-strong); border-color:var(--vm-blue-strong); }
.vm-product-grid { display:grid; flex:1; grid-template-columns:repeat(5,minmax(140px,1fr)); gap:1.1rem .62rem; padding:1rem .8rem .7rem; overflow:auto; min-height:0; }
.vm-picker-card { position:relative; min-width:0; }
.vm-product-image-wrap { position:relative; overflow:hidden; border-radius:3px; background:#f8fafc; }
.vm-product-image-wrap > img { display:block; width:100%; aspect-ratio:1/1; object-fit:contain; border:1px solid #d9dee8; border-radius:3px; background:#f8fafc; box-shadow:0 1px 5px rgba(17,24,39,.14); }
.vm-picker-card h3 { margin:.42rem 0 .28rem; color:#111827; font-size:.72rem; font-weight:900; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vm-picker-card p { margin:0; color:#111827; font-size:.68rem; font-weight:800; text-align:center; }
.vm-item-meta { display:flex; align-items:center; justify-content:center; gap:.45rem; min-width:0; }
.vm-image-merchant-badge { flex:0 1 auto; max-width:132px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-flex; align-items:center; gap:.35rem; min-height:28px; padding:.2rem .45rem .2rem .25rem; border-radius:999px; background:rgba(255,255,255,.93); color:#111827; font-size:.68rem; font-weight:900; box-shadow:0 4px 12px rgba(17,24,39,.12); }
.vm-image-merchant-icon { flex:0 0 auto; width:22px; height:22px; border-radius:50%; object-fit:cover; border:1px solid var(--vm-line); background:#fff; }
.vm-image-merchant-icon-fallback { display:grid; place-items:center; background:var(--vm-blue-soft); color:var(--vm-blue); font-size:.66rem; }
.vm-image-merchant-badge-compact { position:absolute; left:.25rem; right:.25rem; bottom:.25rem; z-index:2; min-height:22px; padding:.12rem .32rem .12rem .18rem; font-size:.56rem; }
.vm-image-merchant-badge-compact .vm-image-merchant-icon { width:16px; height:16px; }
.vm-merchant-name { cursor:pointer; }
.vm-merchant-name:hover { color:var(--vm-blue); }
.vm-picker-link { display:contents; text-decoration:none; color:inherit; }
.vm-picker-hint { margin:.15rem 0 0; color:#9ca3af; font-size:.62rem; }
.vm-select-color { position:absolute; left:50%; bottom:2.85rem; transform:translateX(-50%); min-width:98px; min-height:34px; border:0; border-radius:2px; background:var(--vm-blue); color:white; font-size:.78rem; font-weight:900; box-shadow:0 8px 18px rgba(11,116,255,.25); }
.vm-select-color::before { content:""; position:absolute; left:10px; top:-13px; width:14px; height:14px; border-radius:50%; background:#d8e4f7; box-shadow:24px 0 #c2b59b,48px 0 #7fa9d8,72px 0 #f4d18c; }
.vm-modal-footer { display:flex; justify-content:center; min-height:50px; padding:.6rem; border-top:1px solid #e5e7eb; background:#fff; }
.vm-modal-footer-end { justify-content:flex-end; }
.vm-cancel { min-height:34px; border:1px solid #cfd6e4; border-radius:5px; padding:0 1rem; background:#fff; color:#1f2937; font-size:.78rem; font-weight:850; cursor:pointer; }

.vm-terms-agree-button { min-height:34px; border:0; border-radius:5px; padding:0 1rem; background:var(--vm-blue); color:white; font-size:.78rem; font-weight:850; cursor:pointer; }
.vm-terms-agree-button:disabled { opacity:.55; cursor:not-allowed; }

.vm-color-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:1.8rem 1.2rem 1.4rem; overflow-y:auto; max-height:100%; }
.vm-color-option { border:0; border-radius:4px; background:#fff; padding:.4rem; text-align:center; }
.vm-color-option:hover { box-shadow:0 10px 28px rgba(17,24,39,.12); }
.vm-color-option img { width:100%; aspect-ratio:1/1; object-fit:cover; background:#f8fafc; }
.vm-color-option span { display:block; margin:.45rem 0 0; font-size:.75rem; font-weight:850; }
.vm-selected-slot { position:absolute; left:0; top:calc(100% + .65rem); z-index:5; display:flex; gap:.5rem; width:max-content; max-width:100%; margin:0; pointer-events:auto; }
.vm-selected-slot[hidden] { display:none; }
.vm-selected-thumb { position:relative; display:block; width:112px; height:112px; border-radius:0 0 8px 8px; overflow:hidden; background:#f3f4f6; box-shadow:0 1px 4px rgba(17,24,39,.18); }
.vm-selected-thumb img { width:100%; height:100%; object-fit:cover; }
.vm-remove-selected { position:absolute; top:3px; right:3px; display:grid; place-items:center; width:24px; height:24px; border:0; border-radius:50%; background:rgba(17,24,39,.72); color:white; font-size:1.15rem; line-height:1; }
.vm-change-selected { position:absolute; left:0; right:0; bottom:0; min-height:23px; border:0; background:rgba(0,0,0,.65); color:white; font-size:.65rem; font-weight:900; }
.vm-new-generation-link { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.vm-portfolio-workspace { padding:1rem 1.6rem 2rem; overflow:visible; }
.vm-portfolio { max-width:1180px; margin:0 auto; }
.vm-portfolio-grid { display:grid; grid-template-columns:minmax(420px,505px) minmax(430px,1fr); gap:2.35rem; align-items:start; }
.vm-portfolio-visual-card { position:relative; min-height:760px; border-radius:22px; background:#f4f0eb; overflow:hidden; box-shadow:0 26px 58px rgba(17,24,39,.13); }
.vm-portfolio-image { width:100%; display:block; background:#f3f4f6; }
.vm-portfolio-placeholder { min-height:760px; display:grid; place-items:center; padding:2rem; color:#6b7280; font-weight:800; text-align:center; background:linear-gradient(135deg,rgba(248,250,252,.90),rgba(243,244,246,.90)),url('/images/portfolio_bg.png') center/cover no-repeat; }
.vm-portfolio-render-badge { position:absolute; top:1.35rem; left:1.35rem; z-index:3; display:inline-flex; align-items:center; gap:.45rem; min-height:28px; padding:0 .9rem; border-radius:999px; background:rgba(255,255,255,.92); color:#4b5563; font-size:.66rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 10px 24px rgba(17,24,39,.1); }
.vm-portfolio-render-badge svg { color:#6b7280; }
.vm-portfolio-overlay-items { position:absolute; top:5.2rem; right:.65rem; z-index:3; display:grid; gap:1rem; width:82px; }
.vm-portfolio-overlay-item { display:grid; gap:.18rem; text-align:center; text-decoration:none; color:white; text-shadow:0 1px 7px rgba(0,0,0,.45); font-size:.72rem; font-weight:850; }
.vm-portfolio-overlay-item img { width:82px; height:82px; object-fit:cover; border-radius:7px; background:rgba(255,255,255,.72); box-shadow:0 8px 22px rgba(0,0,0,.18); }
.vm-portfolio-overlay-item strong { line-height:1.05; }
.vm-portfolio-overlay-item span { line-height:1.05; }
.vm-download-image { position:absolute; left:50%; bottom:1rem; z-index:4; transform:translateX(-50%); display:inline-flex; align-items:center; gap:.45rem; min-height:38px; padding:0 1.15rem; border-radius:999px; background:rgba(255,255,255,.96); color:#111827; font-size:.76rem; font-weight:900; text-decoration:none; box-shadow:0 10px 28px rgba(17,24,39,.18); }
.vm-portfolio-detail-panel { min-width:0; padding-top:.3rem; }
.vm-portfolio-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:2.4rem; }
.vm-portfolio-heading-row h1 { margin:0; font-size:1.95rem; line-height:1.08; font-weight:950; letter-spacing:-.055em; color:#0b0f19; }
.vm-portfolio-heading-row p { max-width:520px; margin:.72rem 0 0; color:#657083; font-size:.84rem; line-height:1.55; }
.vm-atelier-badge { display:grid; place-items:center; width:84px; min-height:48px; border-radius:4px; background:#f2efec; color:#938a82; font-size:.55rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; text-align:center; line-height:1.2; }
.vm-components-card { border-radius:13px; background:#fbfbfb; padding:1.15rem 1.15rem 1rem; box-shadow:0 14px 34px rgba(17,24,39,.04); }
.vm-components-card h2 { margin:0 0 1.15rem; font-size:.82rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; color:#263142; }
.vm-component-list { display:grid; gap:.8rem; }
.vm-component { display:grid; grid-template-columns:74px 1fr auto; align-items:center; gap:.85rem; min-height:94px; padding:.65rem .7rem; border:0; border-radius:10px; background:#fff; box-shadow:0 10px 25px rgba(17,24,39,.035); text-decoration:none; color:inherit; transition:box-shadow .15s; }
.vm-component:hover { box-shadow:0 10px 25px rgba(17,24,39,.10); }
.vm-component-image-wrap { position:relative; width:74px; height:74px; overflow:hidden; border-radius:5px; background:#f3f4f6; flex:0 0 auto; }
.vm-component-image-wrap > img { width:100%; height:100%; object-fit:cover; border-radius:5px; background:#f3f4f6; }
.vm-component-copy { min-width:0; }
.vm-component-copy h3 { margin:0 0 .12rem; color:#172033; font-size:.76rem; font-weight:950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vm-component-copy h3 a { color:inherit; text-decoration:none; }
.vm-component-copy h3 a:hover { color:var(--vm-blue); }
.vm-component-copy p { margin:0; color:#9aa1ad; font-size:.62rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.vm-portfolio-merchant { display:inline-flex; margin-top:.2rem; color:var(--vm-blue); font-size:.62rem; font-weight:900; text-decoration:none; }
.vm-portfolio-merchant:hover { text-decoration:underline; }
.vm-component > strong { color:#111827; font-size:.88rem; font-weight:950; white-space:nowrap; }
.vm-social-action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-top:1.45rem; }
.vm-social-card { min-height:86px; display:grid; gap:.35rem; align-content:center; border:2px solid #d8dee9; border-radius:8px; background:#fff; padding:.75rem .65rem; color:#111827; text-align:center; cursor:pointer; }
.vm-social-card strong { display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.72rem; font-weight:950; }
.vm-social-card small { color:#8a93a3; font-size:.58rem; font-weight:700; }
.vm-like-toggle { border-color:#0b74ff; }
.vm-share-card { border-color:#20a35b; }
.vm-wishlist-toggle { border-color:#ec4b61; }
.vm-social-card[aria-pressed="true"] { background:#0b74ff; color:white; }
.vm-share-card[aria-pressed="true"] { background:#20a35b; border-color:#20a35b; color:white; }
.vm-wishlist-toggle[aria-pressed="true"] { background:#ec4b61; border-color:#ec4b61; color:white; }
.vm-social-card[aria-pressed="true"] strong { color:white; }
.vm-social-card[aria-pressed="true"] small { color:rgba(255,255,255,.8); }
.vm-social-card:disabled { opacity:.6; cursor:not-allowed; }
.vm-toggle-dot { display:inline-block; width:34px; height:18px; border-radius:999px; background:#e5e7eb; position:relative; vertical-align:middle; cursor:pointer; }
.vm-toggle-dot::after { content:""; position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:white; box-shadow:0 1px 4px rgba(0,0,0,.18); transition:left .18s ease; }
.vm-toggle-dot.is-on { background:#22c55e; }
.vm-toggle-dot.is-on::after { left:19px; }
.vm-share-strip { margin-top:1rem; border-radius:12px; background:#fbfbfb; padding:1rem 1.05rem; text-align:center; box-shadow:0 10px 24px rgba(17,24,39,.035); }
.vm-share-strip p { margin:0 0 .9rem; color:#8d8990; font-size:.72rem; font-style:italic; font-weight:700; }
.vm-share-buttons { display:flex; align-items:center; justify-content:center; gap:.55rem; flex-wrap:wrap; }
.vm-share-buttons button,.vm-share-buttons a { min-width:72px; min-height:28px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #dce2eb; border-radius:4px; background:#fff; color:#334155; font-size:.68rem; font-weight:850; text-decoration:none; }
.vm-list-header { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin:0 0 1.4rem; }
.vm-list-header h1 { margin:0; font-size:1.8rem; font-weight:900; letter-spacing:-.035em; }
.vm-list-header span { color:#6b7280; font-size:.72rem; font-weight:750; }
.vm-list-empty { padding:6rem 2rem; text-align:center; }
.vm-list-empty h2 { margin:0; font-size:1.4rem; font-weight:900; }
.vm-list-empty p { margin:.5rem 0 1.5rem; color:#6b7280; font-size:.9rem; }
.vm-list-empty a { display:inline-flex; align-items:center; min-height:42px; padding:0 1.5rem; border:0; border-radius:8px; background:#0b74ff; color:#fff; font-size:.85rem; font-weight:850; cursor:pointer; text-decoration:none; box-shadow:0 10px 24px rgba(11,116,255,.2); }
.vm-vto-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:1.2rem; }
.vm-vto-card { display:grid; gap:.5rem; }
.vm-vto-card-image { position:relative; display:block; border-radius:14px; overflow:hidden; aspect-ratio:2/3; background:#f0f2f5; text-decoration:none; }
.vm-vto-card-image img { width:100%; height:100%; object-fit:cover; }
.vm-vto-card-placeholder { display:grid; place-items:center; width:100%; height:100%; color:#6b7280; font-weight:800; font-size:.8rem; }
.vm-vto-card-placeholder.vm-error { color:#dc2626; }
.vm-vto-card-strip { display:flex; gap:.35rem; height:100px; padding:0; border-radius:8px; background:#f8fafc; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.vm-vto-card-strip::-webkit-scrollbar { display:none; }
.vm-vto-card-strip > div { flex:0 0 100px; width:100px; height:100px; min-width:100px; }
.vm-vto-card-strip img { width:100px; height:100px; object-fit:cover; border-radius:4px; background:#fff; }
.vm-vto-card-footer { display:flex; align-items:center; justify-content:space-between; gap:.5rem; min-height:34px; padding:.35rem .2rem; }
.vm-vto-card-footer svg { width:18px; height:18px; color:#4b5563; fill:none; stroke:currentColor; stroke-width:2px; }
.vm-vto-card-owner { display:flex; align-items:center; gap:.5rem; padding:.35rem .25rem; text-decoration:none; color:inherit; cursor:pointer; }
.vm-vto-card-owner:hover { opacity:.8; }
.vm-vto-card-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; background:#e5e7eb; flex-shrink:0; }
.vm-vto-card-owner-name { font-size:.78rem; font-weight:700; color:#1f2937; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vm-vto-actions { display:flex; align-items:center; gap:.8rem; }
.vm-vto-heart,.vm-vto-like { display:inline-flex; align-items:center; gap:.15rem; border:0; background:transparent; color:#4b5563; font-size:.75rem; font-weight:900; cursor:pointer; }
.vm-vto-heart b,.vm-vto-like b { color:#111827; }
.vm-list-more { text-align:center; padding:2rem 0 1rem; }
.vm-list-more a { display:inline-flex; align-items:center; justify-content:center; min-width:130px; min-height:40px; border:1px solid #d1d5db; border-radius:6px; background:#fff; color:#374151; font-size:.8rem; font-weight:850; text-decoration:none; }
.vm-list-filter-badge { margin:-.6rem 0 1rem; }
.vm-list-filter-badge a { display:inline-flex; align-items:center; min-height:30px; padding:0 .75rem; border:1px solid #d1d5db; border-radius:999px; background:#f9fafb; color:#374151; font-size:.75rem; font-weight:750; text-decoration:none; gap:.35rem; }
.vm-list-filter-badge a:hover { background:#e5e7eb; }
.vm-error { color:#b42318; font-weight:700; }
/* Settings page */
.vm-settings-workspace { max-width: 95%; margin: 0 auto; }
.vm-settings-grid { display:grid; gap:1.5rem; }
.vm-settings-card { border:1px solid #e5e7eb; border-radius:12px; background:#fff; padding:1.4rem 1.6rem; }
.vm-settings-card h2 { margin:0 0 .35rem; font-size:.95rem; font-weight:900; }
.vm-settings-hint { margin:0 0 1rem; color:#6b7280; font-size:.74rem; }
.vm-settings-profile { display:flex; align-items:flex-start; gap:1.5rem; }
.vm-settings-avatar { flex:0 0 auto; width:72px; height:72px; border-radius:50%; overflow:hidden; background:var(--vm-blue); }
.vm-settings-avatar img { width:100%; height:100%; object-fit:cover; }
.vm-avatar-large { display:grid; place-items:center; width:100%; height:100%; font-size:1.8rem; font-weight:900; color:#fff; }
.vm-settings-profile-fields { flex:1; display:grid; gap:1rem; min-width:0; }
.vm-settings-field { display:grid; gap:.3rem; }
.vm-settings-field label { color:#374151; font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.vm-settings-field input,.vm-settings-field select { width:100%; min-height:38px; border:1px solid #d1d5db; border-radius:6px; padding:0 .7rem; background:#fff; color:#111827; font-size:.8rem; transition:border-color .15s ease; }
.vm-settings-field input:focus,.vm-settings-field select:focus { border-color:var(--vm-blue); outline:none; box-shadow:0 0 0 3px rgba(11,116,255,.15); }
.vm-settings-field input[readonly] { background:#f9fafb; color:#6b7280; cursor:not-allowed; }
.vm-settings-body-fields { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.vm-settings-image-area { display:flex; gap:1.2rem; align-items:flex-start; }
.vm-settings-image-preview { position:relative; width:180px; aspect-ratio:9/16; border:1px dashed #d1d5db; border-radius:8px; overflow:hidden; background:#f9fafb; }
.vm-settings-image-preview img { width:100%; height:100%; object-fit:cover; }
.vm-settings-image-empty { display:grid; place-items:center; gap:.4rem; width:100%; height:100%; color:#9ca3af; font-size:.68rem; font-weight:700; }
.vm-settings-image-empty svg { width:28px; height:28px; }
.vm-settings-image-remove { position:absolute; top:4px; right:4px; display:grid; place-items:center; width:24px; height:24px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:1.3rem; line-height:1; cursor:pointer; }
.vm-settings-image-remove:hover { background:rgba(220,38,38,.85); }
.vm-settings-image-actions { display:grid; gap:.5rem; }
.vm-settings-upload-btn { display:inline-flex; align-items:center; min-height:34px; padding:0 1rem; border:0; border-radius:6px; background:var(--vm-blue); color:#fff; font-size:.75rem; font-weight:850; cursor:pointer; box-shadow:0 4px 12px rgba(11,116,255,.18); }
.vm-settings-upload-btn:hover { background:#075fe0; }
.vm-settings-footer { display:flex; align-items:center; gap:1rem; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid #e5e7eb; }
.vm-settings-save { display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:0 1.6rem; border:0; border-radius:8px; background:var(--vm-blue); color:#fff; font-size:.85rem; font-weight:900; cursor:pointer; box-shadow:0 10px 24px rgba(11,116,255,.22); transition:transform .15s ease, box-shadow .15s ease; }
.vm-settings-save:hover { transform:translateY(-1px); box-shadow:0 14px 30px rgba(11,116,255,.28); }
.vm-settings-save:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.vm-settings-save svg { width:18px; height:18px; }
.vm-settings-status { font-size:.78rem; font-weight:700; }
.vm-settings-status.vm-saved { color:#16a34a; }
.vm-settings-status.vm-error { color:#dc2626; }
@media (max-width:720px) {
  .vm-settings-profile { flex-direction:column; align-items:center; }
  .vm-settings-body-fields { grid-template-columns:1fr; }
  .vm-settings-image-area { flex-direction:column; }
  .vm-settings-image-preview { width:100%; max-width:200px; }
  .vm-settings-footer { flex-direction:column; align-items:stretch; }
  .vm-settings-save { justify-content:center; }
}
.vm-merchant-link { display:flex; align-items:center; gap:.45rem; margin:.75rem .9rem 0; color:#374151; font-size:.78rem; font-weight:800; text-decoration:none; }
.vm-merchant-link:hover { color:var(--vm-blue); }
.vm-merchant-icon { width:24px; height:24px; border-radius:50%; object-fit:cover; border:1px solid var(--vm-line); }
.vm-merchant-icon-fallback { display:grid; place-items:center; background:var(--vm-blue-soft); color:var(--vm-blue); font-size:.72rem; }
.vm-store-hero { display:flex; align-items:center; gap:1.4rem; margin-bottom:2rem; padding:1.6rem; border:1px solid var(--vm-line); border-radius:18px; background:linear-gradient(135deg,#fff,#f5f8ff); box-shadow:0 10px 30px rgba(17,24,39,.06); }
.vm-store-icon { width:112px; height:112px; border-radius:24px; object-fit:cover; border:1px solid var(--vm-line); background:#fff; }
.vm-store-icon-fallback { display:grid; place-items:center; color:var(--vm-blue); background:var(--vm-blue-soft); font-size:2.4rem; font-weight:900; }
.vm-store-hero h1 { margin:0; font-size:2rem; font-weight:950; letter-spacing:-.04em; }
.vm-store-hero p { max-width:720px; margin:.35rem 0 .7rem; color:var(--vm-muted); }
.vm-store-meta { display:flex; flex-wrap:wrap; gap:.5rem; }
.vm-store-meta a,.vm-store-meta span { display:inline-flex; align-items:center; min-height:28px; padding:0 .7rem; border-radius:999px; background:#fff; color:#374151; font-size:.78rem; font-weight:800; text-decoration:none; border:1px solid #e5e7eb; }
.vm-store-meta a:hover { color:var(--vm-blue); border-color:var(--vm-blue); }
.vm-empty-state { padding:2rem; border:1px dashed var(--vm-line); border-radius:14px; color:var(--vm-muted); text-align:center; background:#fff; }
@media (max-width:720px) { .vm-store-hero { flex-direction:column; align-items:flex-start; } .vm-store-icon { width:88px; height:88px; border-radius:18px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
@media (max-width:1100px) {
  .vm-topbar { grid-template-columns:190px 1fr; row-gap:.5rem; padding:.5rem 1rem; }
  .vm-top-actions { grid-column:2; grid-row:1; }
  .vm-shell { grid-template-columns:1fr; }
  .vm-sidebar { display:none; }
  .vm-mobile-bottomnav { display:flex; }
  .vm-footer { padding-bottom:calc(1rem + env(safe-area-inset-bottom)); }
  .vm-workspace { padding:1rem; }
  .vm-tryon-layout { grid-template-columns:1fr; max-width:none; }
  .vm-model-stage { min-height:720px; }
  .vm-modal { padding:1rem; }
  .vm-product-grid { grid-template-columns:repeat(3,minmax(130px,1fr)); }
  .vm-portfolio-grid { grid-template-columns:1fr; max-width:760px; margin:0 auto; }
  .vm-portfolio-visual-card,.vm-portfolio-placeholder { min-height:530px; }
  .vm-portfolio-render-badge { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); min-height:36px; padding:0 1.2rem; font-size:.82rem; }
  .vm-social-action-grid { grid-template-columns:1fr; }
  .vm-vto-grid { grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
  .vm-list-header h1 { font-size:1.55rem; }
}
@media (max-width:720px) {
  .vm-topbar { display:flex; flex-wrap:wrap; gap:.65rem; min-height:auto; }
  .vm-topnav { order:3; width:100%; justify-content:center; gap:1.3rem; height:48px; }
  .vm-top-actions { margin-left:auto; }
  .vm-locale-switcher { display:none; }
  .vm-page-title h1 { font-size:1.45rem; }
  .vm-model-card { top:42%; width:88%; min-height:auto; padding:1.4rem 1rem; }
  .vm-body-fields { grid-template-columns:1fr; gap:.65rem; }
  .vm-category-grid { grid-template-columns:1fr; gap:.5rem; }
  .vm-category-group { min-height:auto; }
  .vm-row-spacer { display:none; }
  .vm-selected-slot { position:static; width:100%; flex-wrap:wrap; }
  .vm-selected-thumb { width:80px; height:80px; }
  .vm-stage-cta { position:fixed; left:50%; right:auto; bottom:64px; transform:translateX(-50%); width:80%; border-radius:999px; z-index:9999; }
  .vm-product-grid { grid-template-columns:repeat(2,minmax(120px,1fr)); }
  .vm-color-grid { grid-template-columns:repeat(3,1fr); gap:.5rem; padding:1rem .6rem; }
  .vm-portfolio-heading-row { display:grid; gap:.75rem; }
  .vm-atelier-badge { width:auto; max-width:150px; }
  .vm-component { grid-template-columns:64px 1fr; }
  .vm-component-image-wrap { width:64px; height:64px; }
  .vm-component > strong { grid-column:2; justify-self:start; }
  .vm-portfolio-overlay-items { width:62px; gap:.6rem; }
  .vm-portfolio-overlay-item img { width:62px; height:62px; }
  .vm-download-image { white-space:nowrap; }
  .vm-vto-grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:.8rem; }
  .vm-list-header { display:grid; gap:.4rem; }
  .vm-list-header h1 { font-size:1.35rem; }
  .vm-list-empty { padding:4rem 1rem; }
}

.vm-terms-dialog { position:relative; z-index:1; width:min(100%,560px); max-height:86dvh; display:flex; flex-direction:column; border-radius:6px; background:#fff; box-shadow:0 24px 80px rgba(0,0,0,.3); overflow:hidden; }
.vm-terms-body { padding:1.1rem 1.4rem .4rem; overflow-y:auto; }
.vm-terms-intro { margin:0 0 .9rem; color:#374151; font-size:.85rem; line-height:1.45; }
.vm-terms-list { margin:0; padding-left:1.15rem; color:#1f2937; font-size:.78rem; line-height:1.5; }
.vm-terms-list li + li { margin-top:.55rem; }
.vm-terms-footer { flex-direction:column; align-items:stretch; gap:.55rem; padding:.85rem 1.4rem 1rem; border-top:1px solid #eef1f5; }
.vm-terms-checkrow { display:flex; align-items:flex-start; gap:.55rem; color:#1f2937; font-size:.8rem; }
.vm-terms-checkrow input[type="checkbox"] { margin-top:.18rem; }
.vm-terms-version { color:#6b7280; font-size:.7rem; }
.vm-terms-actions { display:flex; justify-content:flex-end; gap:.55rem; }


/* Site footer (matches moutlet.top reference layout) */
.vm-footer { margin-top: auto; padding-top: 2rem; background:var(--vm-blue-soft); border-top:1px solid var(--vm-line); }
.vm-footer .vm-footer-brand-mark { display:inline-grid; place-items:center; width:32px; height:32px; }
.vm-footer .vm-footer-brand-mark img { width:100%; height:100%; object-fit:contain; }
.vm-footer-link { display:inline-flex; align-items:center; gap:.35rem; color:var(--vm-text); text-decoration:none; font-size:.92rem; }
.vm-footer-link:hover { color:var(--vm-blue-strong); text-decoration:underline; }
.vm-footer-link .material-symbols-outlined { font-size:1.05rem; color:var(--vm-blue); }
.vm-footer .text-muted { color:var(--vm-muted) !important; }
.vm-footer a img { vertical-align:middle; }


main { flex-grow: 1; }




/* Static pages (privacy/terms/contact) - full width without sidebar */
.vm-shell:has(.vm-static-page) {
  grid-template-columns: 1fr;
}
.vm-shell:has(.vm-static-page) .vm-workspace {
  padding-left: 0;
  padding-right: 0;
}




/* Pending count badge animation */
@keyframes vm-badge-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); box-shadow: 0 0 10px rgba(239, 68, 68, 0.6); }
  100% { transform: scale(1); }
}

.vm-sidebar-badge.pulse {
  animation: vm-badge-pulse 0.6s ease-in-out;
}

/* Settings — danger zone (account deletion) */
.vm-settings-danger { border:1px solid #fecaca; background:#fff5f5; }
.vm-settings-danger h2 { color:#b91c1c; }
.vm-settings-delete-btn {
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:40px; padding:0 1.1rem;
  border:1px solid #ef4444; border-radius:8px;
  background:#fff; color:#b91c1c;
  font-size:.85rem; font-weight:700; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.vm-settings-delete-btn:hover { background:#ef4444; color:#fff; }
.vm-settings-delete-btn:disabled { opacity:.6; cursor:not-allowed; }

/* Portfolio — retry button (shown when generation failed) */
.vm-portfolio-placeholder.vm-error { display:flex; flex-direction:column; gap:1rem; }
.vm-error-message { margin:0; max-width:32rem; color:#b42318; font-weight:700; }
.vm-retry-btn {
  display:inline-flex; align-items:center; gap:.45rem;
  min-height:42px; padding:0 1.25rem;
  border:1px solid #2563eb; border-radius:9999px;
  background:#2563eb; color:#fff;
  font-size:.9rem; font-weight:700; cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.vm-retry-btn svg { width:18px; height:18px; fill:currentColor; }
.vm-retry-btn:hover { background:#1d4ed8; }
.vm-retry-btn:disabled { opacity:.7; cursor:wait; }
.vm-retry-hint { margin:0; font-size:.78rem; font-weight:500; color:#6b7280; max-width:24rem; }

.vm-portfolio-render-badge.vm-status-failed { background: rgba(220,38,38,.92); color: #fff; }
.vm-portfolio-render-badge.vm-status-failed svg { color: #fff; }
.vm-portfolio-render-badge.vm-status-processing { background: rgba(11,116,255,.92); color: #fff; }
.vm-portfolio-render-badge.vm-status-processing svg { color: #fff; animation: vm-spin 1.2s linear infinite; }
@keyframes vm-spin { to { transform: rotate(360deg); } }

/* Delete account modal */
.vm-delete-dialog {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(440px, 92vw);
  background: #fff; border-radius: 14px; box-shadow: 0 24px 80px rgba(0,0,0,.24);
  z-index: 1000; overflow: hidden;
  display: flex; flex-direction: column;
}
.vm-delete-modal-header { border-bottom: 1px solid #fecaca; background: #fef2f2; }
.vm-delete-modal-header h2 { color: #991b1b; font-size: 1.05rem; font-weight: 800; margin: 0; }
.vm-delete-modal-body { padding: 1.5rem 1.5rem 0; }
.vm-delete-icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #fee2e2; color: #dc2626;
  margin: 0 auto 1rem;
}
.vm-delete-warning { color: #374151; font-size: .88rem; line-height: 1.55; text-align: center; margin: 0 0 1.2rem; }
.vm-delete-confirm-label { display: block; font-size: .82rem; font-weight: 700; color: #1f2937; margin-bottom: .45rem; }
.vm-delete-word { color: #dc2626; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.vm-delete-confirm-input {
  width: 100%; min-height: 42px; padding: .55rem .8rem;
  border: 2px solid #d1d5db; border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  outline: none; transition: border-color .15s;
}
.vm-delete-confirm-input:focus { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.vm-delete-confirm-input.vm-has-error { border-color: #dc2626; background: #fef2f2; }
.vm-delete-error { color: #dc2626; font-size: .78rem; margin: .4rem 0 0; }
.vm-delete-modal-footer {
  display: flex; justify-content: flex-end; gap: .6rem;
  padding: 1rem 1.5rem 1.5rem; border-top: 1px solid #f3f4f6; margin-top: 1rem;
}
.vm-delete-confirm-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: 0 1.1rem; border: 0; border-radius: 8px;
  background: #dc2626; color: #fff; font-size: .85rem; font-weight: 800; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.vm-delete-confirm-btn:hover:not(:disabled) { background: #b91c1c; }
.vm-delete-confirm-btn:disabled { opacity: .45; cursor: not-allowed; }
.vm-delete-confirm-spinner {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: vm-spin .7s linear infinite;
}
/* ===== REDESIGNED SETTINGS PAGE ===== */
.vm-settings-shell .vm-workspace {
  padding-bottom: 120px;
}

.vm-settings-workspace {
  max-width: 1100px !important;
  padding-top: 2rem;
  padding-bottom: 6rem;
}

/* Page title */
.vm-settings-workspace .vm-page-title {
  margin-bottom: 2rem;
}
.vm-settings-workspace .vm-page-title h1 {
  font-size: 1.75rem !important;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0;
}
.vm-settings-workspace .vm-page-title p {
  margin: 0.3rem 0 0;
  color: var(--vm-muted);
  font-size: 0.9rem;
}
.vm-settings-workspace .vm-title-icon {
  display: none;
}

/* Settings grid - 2 equal columns */
.vm-settings-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
  align-items: start !important;
}
.vm-settings-danger {
  grid-column: 1 / -1 !important;
}

/* Cards */
.vm-settings-card {
  border: 1px solid #e8ecf2 !important;
  border-radius: 16px !important;
  background: #fff !important;
  padding: 1.75rem !important;
  box-shadow: 0 1px 3px rgba(17,24,39,.04), 0 4px 16px rgba(17,24,39,.04);
}
.vm-settings-card h2 {
  margin: 0 0 0.35rem !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vm-muted);
}
.vm-settings-hint {
  margin: 0 0 1.25rem !important;
  color: var(--vm-muted) !important;
  font-size: 0.82rem !important;
  line-height: 1.5;
}

/* Profile card - left column, compact */
.vm-settings-card:first-child {
  background: linear-gradient(135deg, #f8faff 0%, #fff 60%) !important;
  border-color: #e0e8ff !important;
  border-top: 3px solid var(--vm-blue) !important;
}
.vm-settings-card:first-child h2 {
  color: var(--vm-blue);
}

.vm-settings-profile {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 1.25rem;
}

.vm-settings-avatar {
  flex: 0 0 auto !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  overflow: hidden;
  background: var(--vm-blue);
  box-shadow: 0 4px 16px rgba(11,116,255,.2);
  border: 2px solid #fff;
  outline: 2px solid var(--vm-blue-soft);
  outline-offset: 2px;
}
.vm-settings-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vm-avatar-large {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: #fff !important;
}

.vm-settings-profile-fields {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  min-width: 0;
}

/* Name field - display as heading */
.vm-settings-profile-fields .vm-settings-field:nth-child(1) {
  margin-bottom: 0;
}
.vm-settings-profile-fields .vm-settings-field:nth-child(1) label {
  display: none;
}
.vm-settings-profile-fields .vm-settings-field:nth-child(1) input {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: auto !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: var(--vm-text) !important;
  cursor: default !important;
  box-shadow: none !important;
  letter-spacing: -0.02em;
}

/* Email field - display as muted text */
.vm-settings-profile-fields .vm-settings-field:nth-child(2) {
  margin-bottom: 0;
}
.vm-settings-profile-fields .vm-settings-field:nth-child(2) label {
  display: none;
}
.vm-settings-profile-fields .vm-settings-field:nth-child(2) input {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: auto !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--vm-muted) !important;
  cursor: default !important;
  box-shadow: none !important;
}

/* Form fields - modern style */
.vm-settings-field {
  display: grid !important;
  gap: 0.4rem !important;
}
.vm-settings-field label {
  color: var(--vm-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}
.vm-settings-field-icon {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
  opacity: 0.55;
}
.vm-settings-field input,
.vm-settings-field select {
  width: 100% !important;
  min-height: 42px !important;
  border: 1.5px solid #e2e6ed !important;
  border-radius: 10px !important;
  padding: 0 0.85rem !important;
  background: #f9fafb !important;
  color: var(--vm-text) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
  -webkit-appearance: none;
  appearance: none;
}
.vm-settings-field input:hover,
.vm-settings-field select:hover {
  border-color: #d0d5de !important;
  background: #fff !important;
}
.vm-settings-field input::placeholder {
  color: #b0b8c5;
  font-weight: 500;
}
.vm-settings-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23647084' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
  padding-right: 2.25rem !important;
  cursor: pointer;
}
.vm-settings-field input:focus,
.vm-settings-field select:focus {
  border-color: var(--vm-blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(11,116,255,.1) !important;
}

/* Body measurement fields - 3 column grid */
.vm-settings-body-fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0.875rem !important;
}

/* Person image / photo section - left column */
.vm-settings-card:nth-child(3) {
  /* Person image card stacks below body measurements in left column */
}

.vm-settings-image-area {
  display: flex !important;
  gap: 1.5rem !important;
  align-items: flex-start !important;
}

.vm-settings-image-preview {
  position: relative !important;
  width: 160px !important;
  aspect-ratio: 9/16 !important;
  border: 2px dashed #d8deea !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #f7f9fc !important;
  transition: border-color .2s ease, background .2s ease;
  flex-shrink: 0;
}
.vm-settings-image-preview:hover {
  border-color: var(--vm-blue);
  background: #f0f5ff;
}
.vm-settings-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vm-settings-image-preview:has(img) {
  border-style: solid !important;
  border-color: #e2e6ed !important;
  background: #fff !important;
}

.vm-settings-image-empty {
  display: grid !important;
  place-items: center !important;
  gap: 0.5rem !important;
  width: 100%;
  height: 100%;
  color: #b0b8c5 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-align: center;
  padding: 1rem;
}
.vm-settings-image-empty svg {
  width: 32px !important;
  height: 32px !important;
  color: #c5cdd9;
}

.vm-settings-image-remove {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.6) !important;
  color: #fff !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background .15s ease;
}
.vm-settings-image-remove:hover {
  background: rgba(220,38,38,.9) !important;
}

.vm-settings-image-actions {
  display: flex !important;
  flex-direction: column;
  gap: 0.6rem !important;
  padding-top: 0.25rem;
}

.vm-settings-upload-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: 0 1.25rem !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--vm-blue) !important;
  color: #fff !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(11,116,255,.22) !important;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease !important;
  white-space: nowrap;
}
.vm-settings-upload-btn:hover {
  background: var(--vm-blue-strong) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(11,116,255,.3) !important;
}

/* Danger zone - right column */
.vm-settings-danger {
  grid-column: 1 / -1;
  grid-row: auto;
  border: 1.5px solid #fecaca !important;
  background: #fffbfb !important;
  box-shadow: 0 1px 3px rgba(220,38,38,.04);
}
.vm-settings-danger h2 {
  color: #dc2626 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.vm-settings-danger h2::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
  flex-shrink: 0;
}
.vm-settings-danger .vm-settings-hint {
  color: #7f1d1d !important;
  font-size: 0.8rem !important;
  line-height: 1.55;
}

.vm-settings-delete-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem;
  min-height: 40px !important;
  padding: 0 1.2rem !important;
  border: 1.5px solid #dc2626 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #dc2626 !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.vm-settings-delete-btn:hover {
  background: #dc2626 !important;
  color: #fff !important;
}
.vm-settings-delete-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Save footer - sticky */
.vm-settings-footer {
  position: sticky !important;
  bottom: 0;
  z-index: 20;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
  padding: 1rem 1.5rem !important;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid #e8ecf2;
  border-radius: 14px;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  margin-bottom: -1rem;
  box-shadow: 0 -4px 20px rgba(17,24,39,.06);
}

.vm-settings-save {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  min-height: 46px !important;
  padding: 0 2rem !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--vm-blue) !important;
  color: #fff !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(11,116,255,.28) !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.vm-settings-save:hover {
  background: var(--vm-blue-strong) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(11,116,255,.35) !important;
}
.vm-settings-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.vm-settings-save svg {
  width: 18px !important;
  height: 18px !important;
}

.vm-settings-status {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}
.vm-settings-status.vm-saved {
  color: #16a34a;
}
.vm-settings-status.vm-error {
  color: #dc2626;
}

/* Responsive */
@media (max-width: 860px) {
  .vm-settings-workspace {
    max-width: 100% !important;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .vm-settings-grid {
    grid-template-columns: 1fr !important;
  }
  .vm-settings-danger {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .vm-settings-profile-fields {
    grid-template-columns: 1fr !important;
  }
  .vm-settings-card {
    padding: 1.5rem !important;
  }
  .vm-settings-body-fields {
    grid-template-columns: 1fr 1fr !important;
  }
  .vm-settings-footer {
    margin-left: 0;
    margin-right: 0;
    border-radius: 12px;
  }
}

@media (max-width: 720px) {
  .vm-settings-workspace {
    padding-top: 1.25rem;
  }
  .vm-settings-profile {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }
  .vm-settings-profile-fields {
    width: 100%;
  }
  .vm-settings-body-fields {
    grid-template-columns: 1fr !important;
  }
  .vm-settings-image-area {
    flex-direction: column !important;
    align-items: center !important;
  }
  .vm-settings-image-preview {
    width: 180px !important;
  }
  .vm-settings-image-actions {
    width: 100%;
  }
  .vm-settings-upload-btn {
    width: 100%;
  }
  .vm-settings-footer {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .vm-settings-save {
    justify-content: center !important;
    width: 100%;
  }
  .vm-settings-status {
    text-align: center;
  }
  .vm-settings-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 64px !important;
    margin: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    z-index: 9999 !important;
  }
  .vm-settings-workspace {
    padding-bottom: 100px !important;
  }
}

/* Dark mode support via system preference (subtle) */
@media (prefers-color-scheme: dark) {
  .vm-settings-card {
    background: #fff !important;
    border-color: #e5e7eb !important;
  }
  .vm-settings-card:first-child {
    background: linear-gradient(135deg, #f8faff 0%, #fff 60%) !important;
    border-color: #e0e8ff !important;
  }
  .vm-settings-field input,
  .vm-settings-field select {
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #1f2937 !important;
  }
  .vm-settings-danger {
    background: #fff5f5 !important;
    border-color: #fecaca !important;
  }
  .vm-settings-image-preview {
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
  }
  .vm-settings-image-preview:hover {
    background: #f3f4f6 !important;
  }
  .vm-settings-footer {
    background: #fff !important;
    border-top-color: #e5e7eb !important;
  }
}

/* Region hint inline */
.vm-settings-field .vm-settings-hint {
  margin: 0.35rem 0 0 !important;
  font-size: 0.72rem !important;
  color: var(--vm-muted) !important;
  padding: 0.35rem 0.65rem !important;
  background: #f0f5ff !important;
  border-radius: 6px !important;
  border-left: 2px solid var(--vm-blue-soft) !important;
  line-height: 1.45 !important;
}

/* Keep Language & Region columns equal height — hint stays in flow */
.vm-settings-profile-fields .vm-settings-field:nth-child(3),
.vm-settings-profile-fields .vm-settings-field:nth-child(4) {
  align-self: start;
}

/* Section divider between identity and preferences */
.vm-settings-profile-fields .vm-settings-field:nth-child(2) {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #eef1f6;
  margin-bottom: 1.25rem;
}
.vm-settings-profile-section-label {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin: 0.15rem 0 0.35rem !important;
  color: var(--vm-muted) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.vm-settings-profile-section-label::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: #eef1f6 !important;
}

/* Make sure the profile card doesn't stretch too much */
.vm-settings-card:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}
.vm-settings-card:nth-child(3) {
  grid-column: 1;
  grid-row: 3;
}

/* Fix: workspace overflow:hidden clips sticky elements */
.vm-settings-workspace {
  overflow: visible !important;
}


/* ====== Store Pagination ====== */
.vm-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding: 16px 0;
}
.vm-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 8px 16px;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 6px;
  background: var(--card-bg, #fff);
  color: var(--text-color, #333);
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.vm-pagination-btn:hover {
  background: var(--accent-color, #6c5ce7);
  color: #fff;
  border-color: var(--accent-color, #6c5ce7);
}
.vm-pagination-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.vm-pagination-info {
  font-size: 14px;
  color: var(--text-muted, #888);
}

/* ===== STORE CATEGORY FILTER ===== */
.vm-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
}
.vm-category-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}
.vm-category-pill:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
  transform: translateY(-1px);
}
.vm-category-pill-active {
  background: var(--vm-blue);
  color: #fff;
  border-color: var(--vm-blue);
}
.vm-category-pill-active:hover {
  background: var(--vm-blue-strong);
  border-color: var(--vm-blue-strong);
}
.vm-gender-filter {
  margin-top: 0.25rem;
}

@media (max-width: 640px) {
  .vm-category-filter {
    gap: 0.4rem;
  }
  .vm-category-pill {
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
  }
}

/* ===== MERCHANT CTA (cross-promotion EcomViz) ===== */
.vm-sidebar-cta {
  margin-top: auto;
  padding: 1rem 0.9rem;
  border-top: 1px solid var(--vm-line);
}
.vm-sidebar-cta p {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--vm-muted);
  line-height: 1.4;
}
.vm-sidebar-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 0.9rem;
  border-radius: 8px;
  background: var(--vm-blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.vm-sidebar-cta a:hover {
  background: var(--vm-blue-strong);
  transform: translateY(-1px);
}

.vm-merchant-cta {
  margin: 2rem 1.5rem 0;
  padding: 0;
  border-top: 1px solid var(--vm-line);
}
.vm-merchant-cta-content {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem 0;
  text-align: center;
}
.vm-merchant-cta-content strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--vm-text);
  margin-bottom: 0.5rem;
}
.vm-merchant-cta-content p {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--vm-muted);
  line-height: 1.6;
}
.vm-merchant-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.5rem;
  border-radius: 10px;
  background: var(--vm-blue);
  color: #fff !important;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(11,116,255,.22);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.vm-merchant-cta-btn:hover {
  background: var(--vm-blue-strong);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(11,116,255,.3);
}

.vm-footer-cta {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--vm-blue) !important;
  text-decoration: none !important;
  transition: color .15s ease;
}
.vm-footer-cta:hover {
  color: var(--vm-blue-strong) !important;
  text-decoration: underline !important;
}

/* ===== Share Success Modal ===== */
.vm-share-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.vm-share-modal-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}
.vm-share-modal {
  position: relative;
  width: min(440px, 92vw);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.24);
  transform: translateY(20px) scale(.96);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}
.vm-share-modal-overlay[aria-hidden="false"] .vm-share-modal {
  transform: translateY(0) scale(1);
}
.vm-share-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  color: #6b7280;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.vm-share-modal-close:hover {
  background: rgba(0,0,0,.1);
  color: #111827;
}
.vm-share-modal-content {
  padding: 2.5rem 2rem 2rem;
  text-align: center;
}
.vm-share-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  margin-bottom: 1.25rem;
  animation: vm-share-icon-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes vm-share-icon-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}
.vm-share-modal-icon svg {
  width: 32px;
  height: 32px;
}
.vm-share-modal-content h2 {
  margin: 0 0 .65rem;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #111827;
}
.vm-share-modal-content > p {
  margin: 0 0 1.5rem;
  color: #4b5563;
  font-size: .92rem;
  line-height: 1.5;
}
.vm-share-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.vm-share-modal-sharethis {
  padding: .5rem 0;
}
.vm-share-modal-sharethis .sharethis-inline-share-buttons {
  justify-content: center !important;
}
.vm-share-modal-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 1.5rem;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #374151;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.vm-share-modal-copy svg {
  width: 18px;
  height: 18px;
}
.vm-share-modal-copy:hover {
  border-color: var(--vm-blue);
  background: var(--vm-blue-soft);
  transform: translateY(-1px);
}
.vm-share-modal-hint {
  margin: 0;
  color: #9ca3af;
  font-size: .78rem;
  font-style: italic;
}

/* ===== Try On Same Button ===== */
.vm-try-on-same {
  border-color: #8b5cf6;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: #fff;
}
.vm-try-on-same:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139,92,246,.3);
}
.vm-try-on-same strong {
  color: #fff;
}
.vm-try-on-same small {
  color: rgba(255,255,255,.85);
}

.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .3s ease, transform .3s ease;
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .3s ease, transform .3s ease;
}

.vm-copy-link-card {
  display: none;
  opacity: 0;
  transform: translateY(10px);
}

.vm-settings-profile-section-label { color:#374151; font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; margin-top:.5rem; }
.vm-settings-social-accounts { display:grid; gap:.75rem; }
.vm-settings-social-item { display:flex; align-items:center; gap:1rem; padding:.75rem; border:1px solid #e5e7eb; border-radius:8px; background:#fafafa; }
.vm-settings-social-icon { flex:0 0 auto; width:40px; height:40px; border-radius:8px; display:grid; place-items:center; }
.vm-settings-social-icon svg { width:20px; height:20px; }
.vm-social-google { background:#f8fafc; color:#4285f4; }
.vm-social-facebook { background:#f0f2ff; color:#1877f2; }
.vm-settings-social-info { flex:1; min-width:0; display:grid; gap:.15rem; }
.vm-settings-social-name { font-size:.8rem; font-weight:900; color:#111827; }
.vm-settings-social-status { font-size:.68rem; font-weight:700; }
.vm-settings-social-linked { color:#16a34a; }
.vm-settings-social-not-linked { color:#9ca3af; }
.vm-settings-social-email { font-size:.72rem; color:#6b7280; }
.vm-settings-social-action { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; }
.vm-settings-link-btn { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 .85rem; border:1px solid var(--vm-blue); border-radius:6px; background:#fff; color:var(--vm-blue); font-size:.72rem; font-weight:850; text-decoration:none; transition:background .15s ease, color .15s ease; }
.vm-settings-link-btn:hover { background:var(--vm-blue); color:#fff; }
.vm-settings-unlink-btn { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 .85rem; border:1px solid #ef4444; border-radius:6px; background:#fff; color:#ef4444; font-size:.72rem; font-weight:850; cursor:pointer; transition:background .15s ease, color .15s ease; }
.vm-settings-unlink-btn:hover:not(:disabled) { background:#ef4444; color:#fff; }
.vm-settings-unlink-btn:disabled { opacity:.4; cursor:not-allowed; }
.vm-settings-social-hint { font-size:.62rem; color:#9ca3af; max-width:180px; text-align:right; }

/* ===== Email Verification Code Login ===== */
.vm-email-login-form { display:flex; flex-direction:column; gap:.5rem; width:100%; }
.vm-email-input,
.vm-code-input {
  width:100%; padding:.5rem .75rem; border:1.5px solid #d1d5db; border-radius:8px;
  font-size:.85rem; background:#fff; color:#111827; outline:none; transition:border-color .15s;
  box-sizing:border-box;
}
.vm-email-input:focus,
.vm-code-input:focus { border-color:#6366f1; }
.vm-email-send-btn,
.vm-email-verify-btn {
  padding:.5rem 1rem; border:none; border-radius:8px; font-size:.82rem; font-weight:600;
  cursor:pointer; transition:background .15s, transform .1s; white-space:nowrap;
}
.vm-email-send-btn {
  background:#6366f1; color:#fff;
}
.vm-email-send-btn:hover:not(:disabled) { background:#4f46e5; }
.vm-email-send-btn:disabled { opacity:.6; cursor:not-allowed; }
.vm-email-verify-btn {
  background:#10b981; color:#fff;
}
.vm-email-verify-btn:hover:not(:disabled) { background:#059669; }
.vm-email-verify-btn:disabled { opacity:.6; cursor:not-allowed; }
.vm-email-code-row { display:flex; gap:.4rem; }
.vm-email-code-row .vm-code-input { flex:1; min-width:0; }
.vm-email-code-row .vm-email-verify-btn { flex:0 0 auto; }
.vm-email-status { font-size:.75rem; font-weight:600; min-height:1em; }
.vm-auth-divider {
  display:flex; align-items:center; gap:.75rem; width:100%;
  color:#9ca3af; font-size:.75rem; margin:.25rem 0;
}
.vm-auth-divider::before,
.vm-auth-divider::after {
  content:''; flex:1; height:1px; background:#e5e7eb;
}
.vm-auth-divider span { white-space:nowrap; }
/* Header sign-in link */
.vm-login-header {
  padding:.45rem .9rem; border:1.5px solid #6366f1; border-radius:8px;
  font-size:.82rem; font-weight:600; color:#6366f1; text-decoration:none;
  transition:background .15s, color .15s; white-space:nowrap;
}
.vm-login-header:hover { background:#6366f1; color:#fff; }
/* Primary login button (used in login page, auth modal, vto-list) */
.vm-login-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.5rem; border:none; border-radius:8px;
  background:#6366f1; color:#fff; font-size:.95rem; font-weight:600;
  text-decoration:none; transition:background .15s; width:100%;
}
.vm-login-primary:hover { background:#4f46e5; color:#fff; }
/* Auth-modal actions layout */
.vm-auth-modal-actions { display:flex; flex-direction:column; gap:.5rem; align-items:center; }
/* Email icon color for settings */
.vm-social-email { color:#6366f1; }

/* Multi-profile grid */
.vm-profiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.vm-profile-card {
  position: relative;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.vm-profile-card:hover {
  border-color: #94a3b8;
}
.vm-profile-active {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99,102,241,.25);
}
.vm-profile-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: #f1f5f9;
}
.vm-profile-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vm-profile-card-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #94a3b8;
}
.vm-profile-card-empty svg {
  width: 32px;
  height: 32px;
}
.vm-profile-card-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #6366f1;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.vm-profile-card-info {
  padding: 6px 8px;
}
.vm-profile-card-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #1e293b;
}
.vm-profile-card-stats {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}
.vm-profile-card-actions {
  display: flex;
  gap: 4px;
  padding: 0 8px 8px;
}
.vm-profile-edit-btn,
.vm-profile-delete-btn {
  background: none;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  color: #64748b;
  transition: background .15s, color .15s;
}
.vm-profile-edit-btn:hover {
  background: #f1f5f9;
  color: #1e293b;
}
.vm-profile-delete-btn:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.vm-profile-edit-btn svg,
.vm-profile-delete-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}
.vm-profile-card-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  border-color: #cbd5e1;
  color: #64748b;
  min-height: 180px;
  gap: 8px;
  font-size: 13px;
}
.vm-profile-card-add:hover {
  border-color: #6366f1;
  color: #6366f1;
}
.vm-profile-card-add-icon {
  font-size: 28px;
  line-height: 1;
}
.vm-profile-edit-form {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.vm-profile-edit-form h3 {
  margin: 0 0 12px;
  font-size: 16px;
}
.vm-profile-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.vm-profile-save-btn {
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
}
.vm-profile-save-btn:hover { background: #4f46e5; }
.vm-profile-cancel-btn {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 20px;
  cursor: pointer;
}
.vm-profile-cancel-btn:hover { background: #f1f5f9; }

/* Homepage profile switcher strip — floats at bottom-center of stage */
.vm-profile-switcher {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(17,24,39,.10);
  justify-content: center;
}
.vm-profile-switch-item {
  width: 56px;
  height: 56px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #f1f5f9;
  padding: 0;
  transition: border-color .2s, box-shadow .2s;
  flex-shrink: 0;
}
.vm-profile-switch-item:hover {
  border-color: #94a3b8;
}
.vm-profile-switch-active {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99,102,241,.25);
}
.vm-profile-switch-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vm-profile-switch-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}